Merge commit 'aad35246d68134f1f6fd36e21134828de8225f3b' into feat/enhanced-link-edit-modal-for-master-merge

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

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import {
-  Modal, ModalHeader, ModalBody,
-} from 'reactstrap';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
 export default class LinkEditModal extends React.PureComponent {
 
@@ -12,10 +10,13 @@ export default class LinkEditModal extends React.PureComponent {
     this.state = {
       show: false,
       isUseRelativePath: false,
+      inputValue: '~.cloud.~',
+      labelInputValue: 'ここがリンク',
     };
 
     this.cancel = this.cancel.bind(this);
     this.toggleIsUseRelativePath = this.toggleIsUseRelativePath.bind(this);
+    this.showLog = this.showLog.bind(this);
   }
 
   show() {
@@ -44,11 +45,24 @@ export default class LinkEditModal extends React.PureComponent {
     // TODO GW-2659
   }
 
+  showLog() {
+    console.log(this.state.inputValue);
+  }
+
+  handleInputChange(linkValue) {
+    this.setState({ inputValue: linkValue });
+  }
+
+  labelInputChange(labelValue) {
+    this.setState({ labelInputValue: labelValue });
+  }
+
+
   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
+          Edit Links
         </ModalHeader>
 
         <ModalBody className="container">
@@ -63,28 +77,38 @@ export default class LinkEditModal extends React.PureComponent {
                     type="text"
                     placeholder="/foo/bar/31536000"
                     aria-describedby="button-addon"
+                    value={this.state.inputValue}
+                    onChange={e => this.handleInputChange(e.target.value)}
                   />
                   <div className="input-group-append">
-                    <button type="button" id="button-addon" className="btn btn-secondary">Preview</button>
+                    <button type="button" id="button-addon" className="btn btn-secondary" onClick={this.showLog}>
+                      Preview
+                    </button>
                   </div>
                 </div>
               </div>
 
               <div className="d-block d-lg-none">
-                { this.renderPreview }
+                {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>
+                    <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>
+                    <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>
+                    <a className="nav-link" href="#MD" role="tab" data-toggle="tab">
+                      MD
+                    </a>
                   </li>
                 </ul>
 
@@ -93,28 +117,27 @@ export default class LinkEditModal extends React.PureComponent {
                     <form className="form-group">
                       <div className="form-group">
                         <label htmlFor="pukiwikiLink">Label</label>
-                        <input type="text" className="form-control" id="pukiwikiLink"></input>
+                        <input
+                          type="text"
+                          className="form-control"
+                          id="pukiwikiLink"
+                          value={this.state.labelInputValue}
+                          onChange={e => this.labelInputChange(e.target.value)}
+                        />
                       </div>
+                      <span className="p-2">[[{this.state.labelInputValue} &gt; {this.state.inputValue}]]</span>
                       <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}
-                          >
+                          <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>
+                        <button type="button" className="btn btn-primary ml-auto">
+                          Done
+                        </button>
                       </div>
                     </form>
                   </div>
@@ -129,7 +152,9 @@ export default class LinkEditModal extends React.PureComponent {
                         <span>URI</span>
                       </div>
                       <div className="d-flex">
-                        <button type="button" className="btn btn-primary ml-auto">Done</button>
+                        <button type="button" className="btn btn-primary ml-auto">
+                          Done
+                        </button>
                       </div>
                     </form>
                   </div>
@@ -145,21 +170,14 @@ export default class LinkEditModal extends React.PureComponent {
                       </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}
-                          >
+                          <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>
+                        <button type="button" className="btn btn-primary ml-auto">
+                          Done
+                        </button>
                       </div>
                     </form>
                   </div>
@@ -168,12 +186,11 @@ export default class LinkEditModal extends React.PureComponent {
             </div>
 
             <div className="col d-none d-lg-block">
-              { this.renderPreview }
+              {this.renderPreview}
               render preview
             </div>
           </div>
         </ModalBody>
-
       </Modal>
     );
   }