Change wiki nav scroll when change page (#7006)

* 01 fix wiki nav scroll bar position

* 02 fix search Wiki input height when too much pages

* 03 fix nav scroll when click another page

* 04 fix scroll when too much pages

frontend/src/components/common/event-bus.js

@@ -25,4 +25,8 @@ class EventBus {
   }
 }
 
+const eventBus = new EventBus();
+
 export default EventBus;
+
+export { eventBus };

frontend/src/components/search/wiki2-search-result.js

@@ -7,8 +7,9 @@ import { gettext } from '../../utils/constants';
 
 import './wiki2-search-result.css';
 
-function Wiki2SearchResult({ result, currentPageId, setCurrentPage, resetToDefault, setRef, isHighlight }) {
+function Wiki2SearchResult({ result, getCurrentPageId, setCurrentPage, resetToDefault, setRef, isHighlight }) {
   const { content, page } = result;
+  const currentPageId = getCurrentPageId();
   const isCurrentPage = currentPageId === page.id;
   return (
     <div
@@ -19,7 +20,7 @@ function Wiki2SearchResult({ result, currentPageId, setCurrentPage, resetToDefau
       <div className='wiki2-search-result-top d-flex align-items-center'>
         {page.icon ? <CustomIcon icon={page.icon} /> : <NavItemIcon symbol={'file'} disable={true} />}
         <span className='wiki2-search-result-page-name text-truncate' title={page.name} style={isCurrentPage ? { width: 'auto' } : { width: 700 }}>{page.name}</span>
-        {currentPageId === page.id ?
+        {isCurrentPage ?
           <span className='wiki2-search-result-current'>{gettext('Current page')}</span> :
           <span className='wiki2-search-result-enter sf3-font sf3-font-enter' style={isHighlight ? { opacity: 1 } : {}}></span>
         }
@@ -37,7 +38,7 @@ function Wiki2SearchResult({ result, currentPageId, setCurrentPage, resetToDefau
 
 Wiki2SearchResult.propTypes = {
   result: PropTypes.object.isRequired,
-  currentPageId: PropTypes.string.isRequired,
+  getCurrentPageId: PropTypes.func.isRequired,
   setCurrentPage: PropTypes.func.isRequired,
   resetToDefault: PropTypes.func.isRequired,
   setRef: PropTypes.func.isRequired,

frontend/src/components/search/wiki2-search.css

@@ -1,8 +1,9 @@
 .wiki2-search {
-  margin: 10px 8px 10px;
+  margin: 10px 8px 0px;
   height: 32px;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   border-radius: 3px;
 }
 
@@ -16,10 +17,6 @@
   color: #666;
 }
 
-.wiki2-search-input {
-  position: relative;
-}
-
 .wiki2-search-input .sf3-font-search {
   position: absolute;
   top: 0;

frontend/src/components/search/wiki2-search.js

@@ -16,7 +16,7 @@ const isEnter = isHotkey('enter');
 const isUp = isHotkey('up');
 const isDown = isHotkey('down');
 
-function Wiki2Search({ setCurrentPage, config, currentPageId, wikiId }) {
+function Wiki2Search({ setCurrentPage, config, getCurrentPageId, wikiId }) {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -60,7 +60,7 @@ function Wiki2Search({ setCurrentPage, config, currentPageId, wikiId }) {
     if (isResultGetted) {
       if (isEnter(e)) {
         const hightlightResult = results[highlightIndex];
-        if (hightlightResult && hightlightResult.page.id !== currentPageId) {
+        if (hightlightResult && hightlightResult.page.id !== getCurrentPageId()) {
           setCurrentPage(hightlightResult.page.id);
           resetToDefault();
         }
@@ -75,7 +75,7 @@ function Wiki2Search({ setCurrentPage, config, currentPageId, wikiId }) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResultGetted, value, results, highlightIndex, currentPageId]);
+  }, [isResultGetted, value, results, highlightIndex]);
 
   const onUp = useCallback((e, highlightIndex) => {
     e.preventDefault();
@@ -153,7 +153,7 @@ function Wiki2Search({ setCurrentPage, config, currentPageId, wikiId }) {
       {isModalOpen &&
         <Modal className="wiki2-search-modal" isOpen={isModalOpen} toggle={resetToDefault} autoFocus={false} size='lg'>
           <ModalBody>
-            <div className="wiki2-search-input mb-4">
+            <div className="wiki2-search-input mb-4 position-relative">
               <i className="sf3-font sf3-font-search"></i>
               <Input
                 type="text"
@@ -179,7 +179,7 @@ function Wiki2Search({ setCurrentPage, config, currentPageId, wikiId }) {
                   <Wiki2SearchResult
                     result={result}
                     key={result._id}
-                    currentPageId={currentPageId}
+                    getCurrentPageId={this.props.getCurrentPageId}
                     setCurrentPage={setCurrentPage}
                     resetToDefault={resetToDefault}
                     isHighlight={highlightIndex === index}
@@ -199,7 +199,7 @@ Wiki2Search.propTypes = {
   wikiId: PropTypes.string.isRequired,
   setCurrentPage: PropTypes.func.isRequired,
   config: PropTypes.object.isRequired,
-  currentPageId: PropTypes.string.isRequired,
+  getCurrentPageId: PropTypes.func.isRequired,
 };
 
 export default Wiki2Search;