create modal

src/client/js/components/ArchiveCreateModal.jsx

@@ -1,68 +1,83 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
-export default class ArchiveCreateModal extends React.PureComponet {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: false,
-      isIncludeComment: false,
-      isIncludeFile: false,
-      isCreateAllSubordinatedPage: false,
-    };
-
-    this.show = this.show.bind(this);
-    this.cancel = this.cancel.bind(this);
-    this.save = this.save.bind(this);
-
-  }
-
-  show() {
-
-  }
-
-  cancel() {
-    this.hide();
-  }
-
-  hide() {
-    this.setState({ show: false });
-  }
-
-  save() {
-
-  }
-
-
-  render() {
-    return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="lg">
-        <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
-          アーカイブ作成
-        </ModalHeader>
-
-        <ModalBody className="container">
-          <div className="custom-control">
-            <button className="btn btn-outline-secondary d-block mx-auto px-5 mb-3" type="button">アーカイブを作成する</button>
-
-            <input className="custom-control-input" type="checkbox" checked={this.state.isIncludeComment} />
-            <label className="custom-control-label" onClick="this.">コメントもダウンロードする</label>
-
-            <input className="custom-control-input" type="checkbox" checked={this.isIncludeFile} />
-            <label className="custom-control-label" onClick="this.">添付ファイルもダウンロードする</label>
-
-            <input className="custom-control-input" type="checkbox" checked={this.isCreateAllSubordinatedPage} />
-            <label className="custom-control-label" onClick="this.">配下ページもダウンロードする</label>
-          </div>
-        </ModalBody>
-      </Modal>
-    );
-  }
-  // ArchiveCreateModal.propTypes = {
-  //   isOpen: Proptypes.bool.isRequired,
-  //   onClose: PropTypes.cunc.isRequired,
-  // };
-
-}
+const ArchiveCreateModal = (props) => {
+  // const [isArchiveCreateModalShown, setIsOpenShareLinkForm] = useState(false);
+
+  return (
+    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose}>
+      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-Light">
+        アーカイブを作成する
+      </ModalHeader>
+      <ModalBody>
+        試作
+      </ModalBody>
+    </Modal>
+  );
+};
+
+// export default class ArchiveCreateModal extends React.PureComponet {
+
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       show: false,
+//       isIncludeComment: false,
+//       isIncludeFile: false,
+//       isCreateAllSubordinatedPage: false,
+//     };
+
+//     this.show = this.show.bind(this);
+//     this.cancel = this.cancel.bind(this);
+//     this.save = this.save.bind(this);
+
+//   }
+
+//   show() {
+
+//   }
+
+//   cancel() {
+//     this.hide();
+//   }
+
+//   hide() {
+//     this.setState({ show: false });
+//   }
+
+//   save() {
+
+//   }
+
+
+//   render() {
+//     return (
+//       <Modal isOpen={this.state.show} toggle={this.cancel} size="lg">
+//         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
+//           アーカイブ作成
+//         </ModalHeader>
+
+//         <ModalBody className="container">
+//           <div className="custom-control">
+//             <button className="btn btn-outline-secondary d-block mx-auto px-5 mb-3" type="button">アーカイブを作成する</button>
+
+//             <input className="custom-control-input" type="checkbox" checked={this.state.isIncludeComment} />
+//             <label className="custom-control-label" onClick="this.">コメントもダウンロードする</label>
+
+//             <input className="custom-control-input" type="checkbox" checked={this.isIncludeFile} />
+//             <label className="custom-control-label" onClick="this.">添付ファイルもダウンロードする</label>
+
+//             <input className="custom-control-input" type="checkbox" checked={this.isCreateAllSubordinatedPage} />
+//             <label className="custom-control-label" onClick="this.">配下ページもダウンロードする</label>
+//           </div>
+//         </ModalBody>
+//       </Modal>
+//     );
+//   }
+ArchiveCreateModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ArchiveCreateModal;

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

@@ -13,6 +13,7 @@ import { toastError } from '../../util/apiNotification';
 
 import ArchiveCreateModal from '../ArchiveCreateModal';
 // import ArchiveCreateModal from '../ArchiveCreateModal';
+import ArchiveCreateModal from '../ArchiveCreateModal';
 
 const PageShareManagement = (props) => {
   const { t, appContainer, pageContainer } = props;
@@ -21,6 +22,8 @@ const PageShareManagement = (props) => {
 
   const [isOutsideShareLinkModalShown, setIsOutsideShareLinkModalShown] = useState(false);
 
+  const [isArchiveCreateModalShown, setIsArchiveCreateModalShown] = useState(false);
+
   function openOutsideShareLinkModalHandler() {
     setIsOutsideShareLinkModalShown(true);
   }
@@ -49,6 +52,16 @@ const PageShareManagement = (props) => {
     const exportPageFile = getExportPageFile(type);
     exportPage(exportPageFile);
   }
+  function openArchiveModalHandler() {
+    console.log('ログ出るで！');
+    setIsArchiveCreateModalShown(true);
+  }
+
+  function closeArchiveCreateModalHandler() {
+    console.log('ログ閉じるで！');
+    setIsArchiveCreateModalShown(false);
+  }
+
 
   function renderModals() {
     return (
@@ -61,6 +74,15 @@ const PageShareManagement = (props) => {
     );
   }
 
+  function renderArchiveModals() {
+    return (
+      <ArchiveCreateModal
+        isOpen={isArchiveCreateModalShown}
+        onClose={closeArchiveCreateModalHandler}
+      />
+    );
+  }
+
   function renderCurrentUser() {
     return (
       <>
@@ -92,13 +114,6 @@ const PageShareManagement = (props) => {
     );
   }
 
-  function openArchiveModalHandler() {
-    return (
-      console.log('ログ出るで！')
-    );
-  }
-
-
   return (
     <>
       {currentUser == null ? renderGuestUser() : renderCurrentUser()}
@@ -119,6 +134,7 @@ const PageShareManagement = (props) => {
 
       </div>
       {renderModals()}
+      {renderArchiveModals()}
     </>
   );