Browse Source

starting to work on History tabpane

guanyu-y 5 years ago
parent
commit
79cb04cf53
1 changed files with 21 additions and 22 deletions
  1. 21 22
      src/client/js/components/PageAccessoriesModal.jsx

+ 21 - 22
src/client/js/components/PageAccessoriesModal.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import PropTypes from 'prop-types';
 
 
-import {
-  Modal, ModalBody, Nav, NavItem, NavLink, TabContent, TabPane,
-} from 'reactstrap';
+import { Modal, ModalBody, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 
 
 import { withTranslation } from 'react-i18next';
 import { withTranslation } from 'react-i18next';
 
 
@@ -16,7 +14,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import PageAccessoriesContainer from '../services/PageAccessoriesContainer';
 import PageAccessoriesContainer from '../services/PageAccessoriesContainer';
 import PageAttachment from './PageAttachment';
 import PageAttachment from './PageAttachment';
 
 
-const PageAccessoriesModal = (props) => {
+const PageAccessoriesModal = props => {
   const { t, pageAccessoriesContainer } = props;
   const { t, pageAccessoriesContainer } = props;
   const { switchActiveTab } = pageAccessoriesContainer;
   const { switchActiveTab } = pageAccessoriesContainer;
   const { activeTab } = pageAccessoriesContainer.state;
   const { activeTab } = pageAccessoriesContainer.state;
@@ -30,53 +28,56 @@ const PageAccessoriesModal = (props) => {
 
 
   return (
   return (
     <React.Fragment>
     <React.Fragment>
-      <Modal
-        size="lg"
-        isOpen={props.isOpen}
-        toggle={closeModalHandler}
-        className="grw-page-accessories-modal"
-      >
+      <Modal size="lg" isOpen={props.isOpen} toggle={closeModalHandler} className="grw-page-accessories-modal">
         <ModalBody>
         <ModalBody>
           <Nav className="nav-title border-bottom">
           <Nav className="nav-title border-bottom">
             <NavItem type="button" className={`nav-link ${activeTab === 'pagelist' && 'active active-border'}`}>
             <NavItem type="button" className={`nav-link ${activeTab === 'pagelist' && 'active active-border'}`}>
               <NavLink
               <NavLink
-                onClick={() => { switchActiveTab('pagelist') }}
+                onClick={() => {
+                  switchActiveTab('pagelist');
+                }}
               >
               >
                 <PageListIcon />
                 <PageListIcon />
-                { t('page_list') }
+                {t('page_list')}
               </NavLink>
               </NavLink>
             </NavItem>
             </NavItem>
             <NavItem type="button" className={`nav-link ${activeTab === 'timeline' && 'active active-border'}`}>
             <NavItem type="button" className={`nav-link ${activeTab === 'timeline' && 'active active-border'}`}>
               <NavLink
               <NavLink
-                onClick={() => { switchActiveTab('timeline') }}
+                onClick={() => {
+                  switchActiveTab('timeline');
+                }}
               >
               >
                 <TimeLineIcon />
                 <TimeLineIcon />
-                { t('Timeline View') }
+                {t('Timeline View')}
               </NavLink>
               </NavLink>
             </NavItem>
             </NavItem>
             <NavItem type="button" className={`nav-link ${activeTab === 'recent-changes' && 'active active-border'}`}>
             <NavItem type="button" className={`nav-link ${activeTab === 'recent-changes' && 'active active-border'}`}>
               <NavLink
               <NavLink
-                onClick={() => { switchActiveTab('recent-changes') }}
+                onClick={() => {
+                  switchActiveTab('recent-changes');
+                }}
               >
               >
                 <RecentChangesIcon />
                 <RecentChangesIcon />
-                { t('History') }
+                {t('History')}
               </NavLink>
               </NavLink>
             </NavItem>
             </NavItem>
             <NavItem type="button" className={`nav-link ${activeTab === 'attachment' && 'active active-border'}`}>
             <NavItem type="button" className={`nav-link ${activeTab === 'attachment' && 'active active-border'}`}>
               <NavLink
               <NavLink
-                onClick={() => { switchActiveTab('attachment') }}
+                onClick={() => {
+                  switchActiveTab('attachment');
+                }}
               >
               >
                 <AttachmentIcon />
                 <AttachmentIcon />
-                { t('attachment_data') }
+                {t('attachment_data')}
               </NavLink>
               </NavLink>
             </NavItem>
             </NavItem>
           </Nav>
           </Nav>
           <TabContent activeTab={activeTab}>
           <TabContent activeTab={activeTab}>
             <TabPane tabId="pagelist"></TabPane>
             <TabPane tabId="pagelist"></TabPane>
             <TabPane tabId="timeline"></TabPane>
             <TabPane tabId="timeline"></TabPane>
-            <TabPane tabId="recent-changes"></TabPane>
+            <TabPane tabId="recent-changes">testing</TabPane>
             <TabPane tabId="attachment" className="p-4">
             <TabPane tabId="attachment" className="p-4">
-              {pageAccessoriesContainer.state.activeComponents.has('attachment') && <PageAttachment /> }
+              {pageAccessoriesContainer.state.activeComponents.has('attachment') && <PageAttachment />}
             </TabPane>
             </TabPane>
           </TabContent>
           </TabContent>
         </ModalBody>
         </ModalBody>
@@ -85,13 +86,11 @@ const PageAccessoriesModal = (props) => {
   );
   );
 };
 };
 
 
-
 /**
 /**
  * Wrapper component for using unstated
  * Wrapper component for using unstated
  */
  */
 const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageAccessoriesContainer]);
 const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal, [PageAccessoriesContainer]);
 
 
-
 PageAccessoriesModal.propTypes = {
 PageAccessoriesModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   t: PropTypes.func.isRequired, //  i18next
   // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,