Merge pull request #2594 from weseek/imprv/swiching-active-tab

Imprv/swiching active tab

src/client/js/components/PageAccessoriesModal.jsx

@@ -25,6 +25,13 @@ const PageAccessoriesModal = (props) => {
     props.onClose();
   }
 
+  function switchTabHandler(clickedTab) {
+    if (props.onSwitch == null) {
+      return;
+    }
+    props.onSwitch(clickedTab);
+  }
+
   return (
     <React.Fragment>
       <Modal
@@ -36,25 +43,33 @@ const PageAccessoriesModal = (props) => {
         <ModalBody>
           <Nav className="nav-title border-bottom">
             <NavItem className={`nav-link ${props.activeTab === 'pageList' && 'active'}`}>
-              <NavLink>
+              <NavLink
+                onClick={() => { switchTabHandler('pageList') }}
+              >
                 <PageList />
                 { t('page_list') }
               </NavLink>
             </NavItem>
             <NavItem className={`nav-link ${props.activeTab === 'timeLine' && 'active'}`}>
-              <NavLink>
+              <NavLink
+                onClick={() => { switchTabHandler('timeLine') }}
+              >
                 <TimeLine />
                 { t('Timeline View') }
               </NavLink>
             </NavItem>
             <NavItem className={`nav-link ${props.activeTab === 'recentChanges' && 'active'}`}>
-              <NavLink>
+              <NavLink
+                onClick={() => { switchTabHandler('recentChanges') }}
+              >
                 <RecentChanges />
                 { t('History') }
               </NavLink>
             </NavItem>
             <NavItem className={`nav-link ${props.activeTab === 'attachment' && 'active'}`}>
-              <NavLink>
+              <NavLink
+                onClick={() => { switchTabHandler('attachment') }}
+              >
                 <Attachment />
                 { t('attachment_data') }
               </NavLink>
@@ -82,6 +97,7 @@ PageAccessoriesModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
   activeTab: PropTypes.string.isRequired,
+  onSwitch: PropTypes.func,
 };
 
 export default withTranslation()(PageAccessoriesModalWrapper);

src/client/js/components/TopOfTableContents.jsx

@@ -18,12 +18,20 @@ const TopOfTableContents = (props) => {
 
   const [isPageAccessoriesModalShown, setIsPageAccessoriesModalShown] = useState(false);
   const [activeTab, setActiveTab] = useState('');
+  // Prevent unnecessary rendering
+  const [activeComponents, setActiveComponents] = useState(new Set(['']));
 
   function openPageAccessoriesModal(activeTab) {
     setIsPageAccessoriesModalShown(true);
     setActiveTab(activeTab);
   }
 
+  function switchActiveTab(clickedTab) {
+    activeComponents.add(clickedTab);
+    setActiveComponents(activeComponents);
+    setActiveTab(clickedTab);
+  }
+
   function closePageAccessoriesModal() {
     setIsPageAccessoriesModalShown(false);
   }
@@ -35,6 +43,7 @@ const TopOfTableContents = (props) => {
           isOpen={isPageAccessoriesModalShown}
           onClose={closePageAccessoriesModal}
           activeTab={activeTab}
+          onSwitch={switchActiveTab}
         />
       </>
     );