success to show tab contents

src/client/js/components/CustomNavbar.jsx

@@ -7,20 +7,8 @@ import {
 
 import { withTranslation } from 'react-i18next';
 
-
-// import PageListIcon from './Icons/PageListIcon';
-// import TimeLineIcon from './Icons/TimeLineIcon';
-// import RecentChangesIcon from './Icons/RecentChangesIcon';
-// import AttachmentIcon from './Icons/AttachmentIcon';
-// import ShareLinkIcon from './Icons/ShareLinkIcon';
-
 import { withUnstatedContainers } from './UnstatedUtils';
 import PageAccessoriesContainer from '../services/PageAccessoriesContainer';
-// import PageAttachment from './PageAttachment';
-// import PageTimeline from './PageTimeline';
-// import PageList from './PageList';
-// import PageHistory from './PageHistory';
-// import ShareLink from './ShareLink/ShareLink';
 
 
 const CustomNavbar = (props) => {
@@ -73,6 +61,7 @@ const CustomNavbar = (props) => {
               return (
                 <NavItem key={key} type="button" className={`p-0 nav-link ${activeTab === key && 'active'}`}>
                   <NavLink onClick={() => { switchActiveTab(key) }}>
+                    {/* {value.icon} */}
                     {t(value.i18n)}
                   </NavLink>
                 </NavItem>
@@ -81,56 +70,14 @@ const CustomNavbar = (props) => {
       </Nav>
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
       <TabContent activeTab={activeTab} className="p-5">
-        <TabPane tabId="pagelist">
-          {props.navContents}
-        </TabPane>
-        {/* <TabPane tabId="timeline">
-          {pageAccessoriesContainer.state.activeComponents.has('timeline') && <PageTimeline /> }
-        </TabPane>
-        <TabPane tabId="pageHistory">
-          <div className="overflow-auto">
-            {pageAccessoriesContainer.state.activeComponents.has('pageHistory') && <PageHistory /> }
-          </div>
-        </TabPane>
-        <TabPane tabId="attachment">
-          {pageAccessoriesContainer.state.activeComponents.has('attachment') && <PageAttachment />}
-        </TabPane>
-        <TabPane tabId="shareLink">
-          {pageAccessoriesContainer.state.activeComponents.has('shareLink') && <ShareLink />}
-        </TabPane> */}
+        {Object.entries(props.navTabMapping).map(([key, value]) => {
+          return (
+            <TabPane key={key} tabId={key}>
+              {value.content}
+            </TabPane>
+          );
+        })}
       </TabContent>
-
-      {/* <Nav className="nav-title" id="nav-title">
-        {Object.entries(navTabMapping).map(([key, value]) => {
-              return (
-                <NavItem key={key} type="button" className={`p-0 nav-link ${activeTab === key && 'active'}`}>
-                  <NavLink onClick={() => { switchActiveTab(key) }}>
-                    {t(value.i18n)}
-                  </NavLink>
-                </NavItem>
-              );
-            })}
-      </Nav>
-      <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
-      <TabContent activeTab={activeTab} className="p-5">
-        <TabPane tabId="pagelist">
-          {pageAccessoriesContainer.state.activeComponents.has('pagelist') && <PageList />}
-        </TabPane>
-        <TabPane tabId="timeline">
-          {pageAccessoriesContainer.state.activeComponents.has('timeline') && <PageTimeline /> }
-        </TabPane>
-        <TabPane tabId="pageHistory">
-          <div className="overflow-auto">
-            {pageAccessoriesContainer.state.activeComponents.has('pageHistory') && <PageHistory /> }
-          </div>
-        </TabPane>
-        <TabPane tabId="attachment">
-          {pageAccessoriesContainer.state.activeComponents.has('attachment') && <PageAttachment />}
-        </TabPane>
-        <TabPane tabId="shareLink">
-          {pageAccessoriesContainer.state.activeComponents.has('shareLink') && <ShareLink />}
-        </TabPane>
-      </TabContent> */}
     </React.Fragment>
   );
 };
@@ -144,11 +91,7 @@ CustomNavbar.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   pageAccessoriesContainer: PropTypes.instanceOf(PageAccessoriesContainer).isRequired,
-  i18n: PropTypes.array,
-  index: PropTypes.array,
-  icons: PropTypes.array,
   navTabMapping: PropTypes.object,
-  navContents: PropTypes.array,
 };
 
 export default withTranslation()(PageAccessoriesModalWrapper);

src/client/js/components/Page/TrashPageAlert.jsx

@@ -118,26 +118,31 @@ const TrashPageAlert = (props) => {
       icon: <PageListIcon />,
       i18n: 'page_list',
       index: 0,
+      content: 'aaa',
     },
     timeline:  {
       icon: <TimeLineIcon />,
       i18n: 'Timeline View',
       index: 1,
+      content: 'bbb',
     },
     pageHistory: {
       icon: <RecentChangesIcon />,
       i18n: 'History',
       index: 2,
+      content: 'ccc',
     },
     attachment: {
       icon: <AttachmentIcon />,
       i18n: 'attachment_data',
       index: 3,
+      content: 'ddd',
     },
     shareLink: {
       icon: <ShareLinkIcon />,
       i18n: 'share_links.share_link_management',
       index: 4,
+      content: 'eee',
     },
   };
 
@@ -155,7 +160,6 @@ const TrashPageAlert = (props) => {
 
       <CustomNavbar
         navTabMapping={navTabMapping}
-        navContents={['aaa', ['bbb'], ['ccc'], ['ddd'], ['eee']]}
       />
     </>
   );