set isActive

src/client/js/components/PageAccessoriesModal.jsx

@@ -22,30 +22,33 @@ const PageAccessoriesModal = (props) => {
       size="lg"
       isOpen={props.isOpen}
       toggle={props.onClose}
+      isActive={props.isActive}
       className="grw-create-page"
     >
       <ModalHeader tag="h4">
-        <ul className="nav">
+        <ul className="nav nav-tabs"> {/* nav-tabsは一時的につけているだけ */}
           <li className="nav-item">
-            <a className="nav-link active" href="#">
-              <PageList className="mx-5" />
+            <a className={`nav-link page-accessories ${isActive === 'pageList' && 'active'}`} href="#">
+              <PageList
+                className="mx-5"
+              />
               ページリスト
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className={`nav-link page-accessories ${isActive === 'pageList' && 'active'}`} href="#">
               <TimeLine />
               タイムライン
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className={`nav-link page-accessories ${isActive === 'recentChanges' && 'active'}`} href="#">
               <RecentChanges />
               更新履歴
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">
+            <a className={`nav-link page-accessories ${isActive === 'attachment' && 'active'}`} href="#">
               <Attachment />
               添付データ
             </a>
@@ -69,8 +72,10 @@ const PageAccessoriesModalWrapper = withUnstatedContainers(PageAccessoriesModal,
 PageAccessoriesModal.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  isActive: PropTypes.bool.isRequired,
 };
 
 export default withTranslation()(PageAccessoriesModalWrapper);

src/client/js/components/TopOfTableContents.jsx

@@ -17,9 +17,11 @@ import { withUnstatedContainers } from './UnstatedUtils';
 const TopOfTableContents = (props) => {
 
   const [isPageAccessoriesModalShown, setIsPageAccessoriesModalShown] = useState(false);
+  const [activeTab, setActiveTab] = useState('');
 
-  function openPageAccessoriesModal() {
+  function openPageAccessoriesModal(activeTab) {
     setIsPageAccessoriesModalShown(true);
+    setActiveTab(activeTab);
   }
 
   function closePageAccessoriesModal() {
@@ -32,6 +34,7 @@ const TopOfTableContents = (props) => {
         <PageAccessoriesModal
           isOpen={isPageAccessoriesModalShown}
           onClose={closePageAccessoriesModal}
+          isActive={activeTab}
         />
       </>
     );
@@ -40,19 +43,19 @@ const TopOfTableContents = (props) => {
   return (
     <>
       <div className="top-of-table-contents d-flex align-items-end pb-1">
-        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal}>
+        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal('pageList')}>
           <PageList />
         </button>
 
-        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal}>
+        <button type="button" className="bg-transparent border-0 active" onClick={openPageAccessoriesModal('timeLine')}>
           <TimeLine />
         </button>
 
-        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal}>
+        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal('recentChanges')}>
           <RecentChanges />
         </button>
 
-        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal}>
+        <button type="button" className="bg-transparent border-0" onClick={openPageAccessoriesModal('attachment')}>
           <Attachment />
         </button>
         {/* [TODO: setting Footprints' icon by GW-3308] */}