Merge pull request #2371 from weseek/feat/implement-linkedit-modal-layout

Feat/implement linkedit modal layout

src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
+  Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
 export default class LinkEditModal extends React.PureComponent {
@@ -11,9 +11,11 @@ export default class LinkEditModal extends React.PureComponent {
 
     this.state = {
       show: false,
+      isUseRelativePath: false,
     };
 
     this.cancel = this.cancel.bind(this);
+    this.toggleIsUseRelativePath = this.toggleIsUseRelativePath.bind(this);
   }
 
   show() {
@@ -30,20 +32,148 @@ export default class LinkEditModal extends React.PureComponent {
     });
   }
 
+  toggleIsUseRelativePath() {
+    this.setState({ isUseRelativePath: !this.state.isUseRelativePath });
+  }
+
+  renderPreview() {
+    // TODO GW-2658
+  }
+
+  insertLinkIntoEditor() {
+    // TODO GW-2659
+  }
+
   render() {
     return (
       <Modal isOpen={this.state.show} toggle={this.cancel} size="lg">
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           Edit Table
         </ModalHeader>
-        <ModalBody className="p-0 d-flex flex-column">
-        </ModalBody>
-        <ModalFooter className="grw-modal-footer">
-          <div className="ml-auto">
-            <button type="button" className="mr-2 btn btn-secondary" onClick={this.cancel}>Cancel</button>
-            <button type="button" className="btn btn-primary">Done</button>
+
+        <ModalBody className="container">
+          <div className="row">
+            <div className="col">
+              <div className="form-gorup my-3">
+                <label htmlFor="linkInput">Link</label>
+                <div className="input-group">
+                  <input
+                    className="form-control"
+                    id="linkInput"
+                    type="text"
+                    placeholder="/foo/bar/31536000"
+                    aria-describedby="button-addon"
+                  />
+                  <div className="input-group-append">
+                    <button type="button" id="button-addon" className="btn btn-secondary">Preview</button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="d-block d-lg-none">
+                { this.renderPreview }
+                render preview
+              </div>
+
+              <div className="linkedit-tabs">
+                <ul className="nav nav-tabs" role="tabist">
+                  <li className="nav-item">
+                    <a className="nav-link active" href="#Pukiwiki" role="tab" data-toggle="tab">Pukiwiki</a>
+                  </li>
+                  <li className="nav-item">
+                    <a className="nav-link" href="#Crowi" role="tab" data-toggle="tab">Crowi</a>
+                  </li>
+                  <li className="nav-item">
+                    <a className="nav-link" href="#MD" role="tab" data-toggle="tab">MD</a>
+                  </li>
+                </ul>
+
+                <div className="tab-content pt-3">
+                  <div id="Pukiwiki" className="tab-pane active" role="tabpanel">
+                    <form className="form-group">
+                      <div className="form-group">
+                        <label htmlFor="pukiwikiLink">Label</label>
+                        <input type="text" className="form-control" id="pukiwikiLink"></input>
+                      </div>
+                      <div>
+                        <span>URI</span>
+                      </div>
+                      <div className="form-inline">
+                        <div className="custom-control custom-checkbox custom-checkbox-info">
+                          <input
+                            className="custom-control-input"
+                            id="relativePath"
+                            type="checkbox"
+                            checked={this.state.isUseRelativePath}
+                          />
+                          <label
+                            className="custom-control-label"
+                            htmlFor="relativePath"
+                            onClick={this.toggleIsUseRelativePath}
+                          >
+                            Use relative path
+                          </label>
+                        </div>
+                        <button type="button" className="btn btn-primary ml-auto">Done</button>
+                      </div>
+                    </form>
+                  </div>
+
+                  <div id="Crowi" className="tab-pane" role="tabpanel">
+                    <form className="form-group">
+                      <div className="form-group">
+                        <label htmlFor="crowiLink">Label</label>
+                        <input type="text" className="form-control" id="crowiLink"></input>
+                      </div>
+                      <div>
+                        <span>URI</span>
+                      </div>
+                      <div className="d-flex">
+                        <button type="button" className="btn btn-primary ml-auto">Done</button>
+                      </div>
+                    </form>
+                  </div>
+
+                  <div id="MD" className="tab-pane" role="tabpanel">
+                    <form className="form-group">
+                      <div className="form-group">
+                        <label htmlFor="MDLink">Label</label>
+                        <input type="text" className="form-control" id="MDLink"></input>
+                      </div>
+                      <div>
+                        <span>URI</span>
+                      </div>
+                      <div className="form-inline">
+                        <div className="custom-control custom-checkbox custom-checkbox-info">
+                          <input
+                            className="custom-control-input"
+                            id="relativePath"
+                            type="checkbox"
+                            checked={this.state.isUseRelativePath}
+                          />
+                          <label
+                            className="custom-control-label"
+                            htmlFor="relativePath"
+                            onClick={this.toggleIsUseRelativePath}
+                          >
+                            Use relative path
+                          </label>
+                        </div>
+                        <button type="button" className="btn btn-primary ml-auto">Done</button>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="col d-none d-lg-block">
+              { this.renderPreview }
+              render preview
+            </div>
           </div>
-        </ModalFooter>
+        </ModalBody>
+
       </Modal>
     );
   }