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;

frontend/src/pages/wiki2/css/wiki-nav.css

@@ -15,6 +15,8 @@
   overflow: auto;
   user-select: none;
   max-height: 100%;
+  margin-right: -8px;
+  padding-right: 8px;
 }
 
 .wiki-nav .can-drop::after,

frontend/src/pages/wiki2/index.js

@@ -13,6 +13,7 @@ import MainPanel from './main-panel';
 import PageUtils from './wiki-nav/page-utils';
 import LocalStorage from '../../utils/local-storage-utils';
 import { DEFAULT_PAGE_NAME } from './constant';
+import { eventBus } from '../../components/common/event-bus';
 
 import '../../css/layout.css';
 import '../../css/side-panel.css';
@@ -28,7 +29,7 @@ class Wiki extends Component {
     this.state = {
       path: '',
       pathExist: true,
-      closeSideBar: false,
+      isSidePanelOpen: false,
       isDataLoading: false,
       editorContent: {},
       permission: '',
@@ -45,7 +46,7 @@ class Wiki extends Component {
 
   UNSAFE_componentWillMount() {
     if (!Utils.isDesktop()) {
-      this.setState({ closeSideBar: true });
+      this.setState({ isSidePanelOpen: true });
     }
   }
 
@@ -142,11 +143,19 @@ class Wiki extends Component {
     });
   };
 
-  onCloseSide = () => {
-    this.setState({ closeSideBar: !this.state.closeSideBar });
+  mobileCloseSidePanel = () => {
+    this.setState({ isSidePanelOpen: false });
   };
 
-  showPage = (pageId, filePath) => {
+  mobileOpenSidePanel = () => {
+    this.setState({ isSidePanelOpen: true });
+  };
+
+  getCurrentPageId = () => {
+    return this.state.currentPageId;
+  };
+
+  updateSdocPage = (pageId, filePath) => {
     this.setState({
       isDataLoading: true,
     });
@@ -204,11 +213,11 @@ class Wiki extends Component {
   };
 
   setCurrentPage = (pageId, callback) => {
-    const { currentPageId, config } = this.state;
-    if (pageId === currentPageId) {
+    if (pageId === this.state.currentPageId) {
       callback && callback();
       return;
     }
+    const { config } = this.state;
     const { pages } = config;
     const currentPage = PageUtils.getPageById(pages, pageId);
     if (!currentPage) {
@@ -216,13 +225,18 @@ class Wiki extends Component {
       return;
     }
     const { path, id, name, docUuid } = currentPage;
-    if (path !== this.state.path) this.showPage(pageId, path);
-    this.onCloseSide();
+    if (path !== this.state.path) {
+      this.updateSdocPage(pageId, path);
+    }
+    if (!Utils.isDesktop()) {
+      this.mobileCloseSidePanel();
+    }
     this.setState({
       currentPageId: pageId,
       path: path,
     }, () => {
       callback && callback();
+      eventBus.dispatch('update-wiki-current-page');
     });
     this.cacheHistoryFiles(docUuid, name, id);
     this.updateDocumentTitle(name);
@@ -256,16 +270,16 @@ class Wiki extends Component {
       <div id="main" className="wiki-main">
         <SidePanel
           isLoading={this.state.isConfigLoading}
-          closeSideBar={this.state.closeSideBar}
+          isSidePanelOpen={this.state.isSidePanelOpen}
           config={this.state.config}
           updateWikiConfig={this.updateWikiConfig}
           getWikiConfig={this.getWikiConfig}
           setCurrentPage={this.setCurrentPage}
-          currentPageId={this.state.currentPageId}
+          getCurrentPageId={this.getCurrentPageId}
           onUpdatePage={this.onUpdatePage}
         />
         <MainPanel
-          onCloseSide={this.onCloseSide}
+          mobileOpenSidePanel={this.mobileOpenSidePanel}
           path={this.state.path}
           config={this.state.config}
           currentPageId={this.state.currentPageId}
@@ -280,7 +294,13 @@ class Wiki extends Component {
           isUpdateBySide={this.state.isUpdateBySide}
         />
         <MediaQuery query="(max-width: 767.8px)">
-          <Modal zIndex="1030" isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
+          <Modal
+            zIndex="1030"
+            isOpen={!this.state.isSidePanelOpen}
+            toggle={this.mobileCloseSidePanel}
+            contentClassName="d-none"
+          >
+          </Modal>
         </MediaQuery>
       </div>
     );

frontend/src/pages/wiki2/main-panel.js

@@ -23,7 +23,7 @@ const propTypes = {
   isUpdateBySide: PropTypes.bool,
   onUpdatePage: PropTypes.func,
   onAddWikiPage: PropTypes.func,
-  onCloseSide: PropTypes.func.isRequired
+  mobileOpenSidePanel: PropTypes.func.isRequired
 };
 
 class MainPanel extends Component {
@@ -67,7 +67,13 @@ class MainPanel extends Component {
         <div className='wiki2-main-panel-north'>
           <div className="d-flex align-items-center flex-fill o-hidden">
             <div className='wiki2-main-panel-north-content'>
-              <i role="button" aria-label={gettext('Side Nav Menu')} onClick={this.props.onCloseSide} className="sf2-icon-menu side-nav-toggle d-md-none"></i>
+              <i
+                role="button"
+                aria-label={gettext('Side Nav Menu')}
+                onClick={this.props.mobileOpenSidePanel}
+                className="sf2-icon-menu side-nav-toggle d-md-none"
+              >
+              </i>
               <WikiTopNav
                 config={config}
                 currentPageId={this.props.currentPageId}

frontend/src/pages/wiki2/side-panel.css

@@ -55,7 +55,7 @@
   flex: 1;
   overflow: hidden;
   padding: 8px;
-  padding-top: 10px;
+  padding-top: 20px;
 }
 
 .wiki2-side-panel .wiki2-side-nav .wiki2-pages-container:hover {

frontend/src/pages/wiki2/side-panel.js

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import deepCopy from 'deep-copy';
+import classNames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
 import { gettext, isWiki2, wikiId, wikiPermission } from '../../utils/constants';
 import toaster from '../../components/toast';
@@ -21,17 +22,18 @@ import './side-panel.css';
 const { repoName } = window.wiki.config;
 
 const propTypes = {
-  closeSideBar: PropTypes.bool.isRequired,
+  isSidePanelOpen: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   config: PropTypes.object.isRequired,
   updateWikiConfig: PropTypes.func.isRequired,
   getWikiConfig: PropTypes.func.isRequired,
   setCurrentPage: PropTypes.func.isRequired,
-  currentPageId: PropTypes.string,
+  getCurrentPageId: PropTypes.func.isRequired,
   onUpdatePage: PropTypes.func.isRequired,
 };
 
-class SidePanel extends Component {
+class SidePanel extends PureComponent {
+
   constructor(props) {
     super(props);
     this.state = {
@@ -104,7 +106,7 @@ class SidePanel extends Component {
   };
 
   toggelTrashDialog = () => {
-    this.setState({ 'isShowTrashDialog': !this.state.isShowTrashDialog });
+    this.setState({ isShowTrashDialog: !this.state.isShowTrashDialog });
   };
 
   renderWikiNav = () => {
@@ -124,7 +126,7 @@ class SidePanel extends Component {
             updateWikiConfig={this.props.updateWikiConfig}
             onAddNewPage={this.onAddNewPage}
             duplicatePage={this.duplicatePage}
-            currentPageId={this.props.currentPageId}
+            getCurrentPageId={this.props.getCurrentPageId}
             addPageInside={this.addPageInside}
             toggelTrashDialog={this.toggelTrashDialog}
           />
@@ -158,10 +160,10 @@ class SidePanel extends Component {
   };
 
   render() {
-    const { isLoading, config, currentPageId } = this.props;
+    const { isLoading, config } = this.props;
     const isDesktop = Utils.isDesktop();
     return (
-      <div className={`wiki2-side-panel${this.props.closeSideBar ? '' : ' left-zero'}`}>
+      <div className={classNames('wiki2-side-panel', { 'left-zero': this.props.isSidePanelOpen })}>
         <div className="wiki2-side-panel-top">
           <h4 className="text-truncate ml-0 mb-0" title={repoName}>{repoName}</h4>
           {isDesktop && wikiPermission !== 'public' &&
@@ -181,7 +183,7 @@ class SidePanel extends Component {
         <Wiki2Search
           wikiId={wikiId}
           config={config}
-          currentPageId={currentPageId}
+          getCurrentPageId={this.props.getCurrentPageId}
           setCurrentPage={this.props.setCurrentPage}
         />
         <div className="wiki2-side-nav">

frontend/src/pages/wiki2/wiki-nav/add-new-page-dialog.js

@@ -13,7 +13,7 @@ const propTypes = {
   title: PropTypes.node,
   toggle: PropTypes.func.isRequired,
   onAddNewPage: PropTypes.func,
-  currentPageId: PropTypes.string,
+  getCurrentPageId: PropTypes.func.isRequired,
 };
 
 
@@ -71,7 +71,7 @@ class AddNewPageDialog extends React.Component {
   };
 
   createPage = (pageName) => {
-    wikiAPI.createWiki2Page(wikiId, pageName, this.props.currentPageId).then(res => {
+    wikiAPI.createWiki2Page(wikiId, pageName, this.props.getCurrentPageId()).then(res => {
       const { page_id, obj_name, doc_uuid, parent_dir } = res.data.file_info;
       this.props.onAddNewPage({
         page_id: page_id,

frontend/src/pages/wiki2/wiki-nav/pages/page-item.js

@@ -10,6 +10,7 @@ import AddNewPageDialog from '../add-new-page-dialog';
 import Icon from '../../../../components/icon';
 import DraggedPageItem from './dragged-page-item';
 import CustomIcon from '../../custom-icon';
+import { eventBus } from '../../../../components/common/event-bus';
 
 class PageItem extends Component {
 
@@ -21,18 +22,30 @@ class PageItem extends Component {
       isShowDeleteDialog: false,
       isShowInsertPage: false,
       pageName: props.page.name || '',
-      isSelected: props.currentPageId === props.page.id,
+      isSelected: props.getCurrentPageId() === props.page.id,
       isMouseEnter: false,
     };
     this.pageItemRef = React.createRef();
   }
 
+  componentDidMount() {
+    this.unsubscribeEvent = eventBus.subscribe('update-wiki-current-page', this.updateSelected);
+  }
+
   componentWillUnmount() {
+    this.unsubscribeEvent();
     this.setState = () => {
       return;
     };
   }
 
+  updateSelected = () => {
+    const isSelected = this.props.getCurrentPageId() === this.props.page.id;
+    if (isSelected !== this.state.isSelected) {
+      this.setState({ isSelected });
+    }
+  };
+
   onMouseEnter = () => {
     this.setState({ isMouseEnter: true });
     if (this.state.isSelected) return;
@@ -130,7 +143,7 @@ class PageItem extends Component {
         updateWikiConfig={this.props.updateWikiConfig}
         pages={pages}
         pathStr={pathStr + '-' + page.id}
-        currentPageId={this.props.currentPageId}
+        getCurrentPageId={this.props.getCurrentPageId}
         addPageInside={this.props.addPageInside}
         getFoldState={this.props.getFoldState}
         toggleExpand={this.props.toggleExpand}
@@ -257,7 +270,7 @@ class PageItem extends Component {
                 {this.state.isShowInsertPage &&
                   <AddNewPageDialog
                     toggle={this.toggleInsertPage}
-                    currentPageId={this.props.page.id}
+                    getCurrentPageId={this.props.getCurrentPageId}
                     onAddNewPage={this.onAddNewPage}
                     title={gettext('Add page inside')}
                   />
@@ -302,7 +315,7 @@ PageItem.propTypes = {
   onMovePage: PropTypes.func,
   isOnlyOnePage: PropTypes.bool,
   pathStr: PropTypes.string,
-  currentPageId: PropTypes.string,
+  getCurrentPageId: PropTypes.func,
   addPageInside: PropTypes.func,
   getFoldState: PropTypes.func,
   toggleExpand: PropTypes.func,

frontend/src/pages/wiki2/wiki-nav/wiki-nav.js

@@ -19,7 +19,7 @@ class WikiNav extends Component {
     onDeletePage: PropTypes.func,
     onMovePage: PropTypes.func,
     duplicatePage: PropTypes.func,
-    currentPageId: PropTypes.string,
+    getCurrentPageId: PropTypes.func,
     addPageInside: PropTypes.func,
     updateWikiConfig: PropTypes.func.isRequired,
     toggelTrashDialog: PropTypes.func.isRequired,
@@ -83,7 +83,7 @@ class WikiNav extends Component {
         onMovePage={this.props.onMovePage}
         updateWikiConfig={this.props.updateWikiConfig}
         pathStr={page.id}
-        currentPageId={this.props.currentPageId}
+        getCurrentPageId={this.props.getCurrentPageId}
         addPageInside={this.props.addPageInside}
         getFoldState={this.getFoldState}
         toggleExpand={this.toggleExpand}