add component for preview

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

@@ -4,6 +4,8 @@ import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
+import PublishLink from './PublishLink';
+
 export default class LinkEditModal extends React.PureComponent {
 
   constructor(props) {
@@ -12,10 +14,16 @@ export default class LinkEditModal extends React.PureComponent {
     this.state = {
       show: false,
       isUseRelativePath: false,
+      link: '/hoge/fuga/1234', // [TODO] GW-2793 の変更を適用する
+      label: '',
+      linkerType: 'pukiwikiLink',
     };
 
     this.cancel = this.cancel.bind(this);
     this.toggleIsUseRelativePath = this.toggleIsUseRelativePath.bind(this);
+    this.handleChangeLabelInput = this.handleChangeLabelInput.bind(this);
+    this.handleSelecteLinkerType = this.handleSelecteLinkerType.bind(this);
+    this.generateLinker = this.generateLinker.bind(this);
   }
 
   show() {
@@ -32,6 +40,36 @@ export default class LinkEditModal extends React.PureComponent {
     });
   }
 
+  handleChangeLabelInput(e) {
+    const label = e.target.value;
+    // const linkerType = e.target.id;
+    // const linker = this.generateLinker(label, linkerType);
+    // this.setState({ label, linker });
+    this.setState({ label });
+  }
+
+  generateLinker() {
+    let linker;
+    const label = this.state.label;
+    const type = this.state.linkerType;
+    if (type === 'pukiwikiLink') {
+      linker = `[[${label}]]`;
+    }
+    if (type === 'growiLink') {
+      linker = `growi ${label}`;
+    }
+    if (type === 'MDLink') {
+      linker = `md like ${label}`;
+    }
+
+    return linker;
+  }
+
+
+  handleSelecteLinkerType(e) {
+    this.setState({ linkerType: e.currentTarget.name });
+  }
+
   toggleIsUseRelativePath() {
     this.setState({ isUseRelativePath: !this.state.isUseRelativePath });
   }
@@ -63,117 +101,89 @@ export default class LinkEditModal extends React.PureComponent {
                     type="text"
                     placeholder="/foo/bar/31536000"
                     aria-describedby="button-addon"
+                    value={this.state.link}
                   />
                   <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">
+                      Preview
+                    </button>
                   </div>
                 </div>
               </div>
 
               <div className="d-block d-lg-none">
-                { this.renderPreview }
+                {this.renderPreview}
                 render preview
               </div>
 
-              <div className="linkedit-tabs">
+              <div className="link-edit-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" name="pukiwikiLink" onClick={this.handleSelecteLinkerType} 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" name="growiLink" onClick={this.handleSelecteLinkerType} href="#Growi" role="tab" data-toggle="tab">
+                      Growi Original
+                    </a>
                   </li>
                   <li className="nav-item">
-                    <a className="nav-link" href="#MD" role="tab" data-toggle="tab">MD</a>
+                    <a className="nav-link" name="MDLink" onClick={this.handleSelecteLinkerType} href="#MD" role="tab" data-toggle="tab">
+                      Markdown
+                    </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>
+                  <form className="form-group">
+                    <div className="form-group">
+                      <label htmlFor="pukiwikiLink">Label</label>
+                      <input
+                        type="text"
+                        className="form-control"
+                        id="pukiwikiLink"
+                        value={this.state.label}
+                        onChange={this.handleChangeLabelInput}
+                        disabled={this.state.linkerType === 'growiLink'}
+                      />
+                    </div>
+                    <div className="form-group">
+                      <PublishLink
+                        link={this.state.link}
+                        label={this.state.label}
+                        type={this.state.linkerType}
+                        isUseRelativePath={this.state.isUseRelativePath}
+                      />
+                    </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}
+                          disabled={this.state.linkerType === 'growiLink'}
+                        />
+                        <label className="custom-control-label" htmlFor="relativePath" onClick={this.toggleIsUseRelativePath}>
+                          Use relative path
+                        </label>
                       </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>
+                      <button type="button" className="btn btn-primary ml-auto">
+                        Done
+                      </button>
+                    </div>
+                  </form>
                 </div>
               </div>
             </div>
 
             <div className="col d-none d-lg-block">
-              { this.renderPreview }
+              {this.renderPreview}
               render preview
             </div>
           </div>
         </ModalBody>
-
       </Modal>
     );
   }

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class PublishLink extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      linker: '',
+    };
+
+    this.generateLink = this.generateLink.bind(this);
+  }
+
+  generateLink() {
+    const { link, label, type } = this.props;
+    let linker;
+    if (type === 'pukiwikiLink') {
+      linker = `[[${label}>${link}]]`;
+    }
+    if (type === 'growiLink') {
+      linker = `[${link}]`;
+    }
+    if (type === 'MDLink') {
+      linker = `[${label}](${link})`;
+    }
+
+    this.setState({ linker });
+  }
+
+  render() {
+    this.generateLink();
+
+    return (
+      <input type="text" readOnly className="form-control-plaintext" id="staticEmail" value={this.state.linker}></input>
+    );
+  }
+
+}
+
+PublishLink.propTypes = {
+  link: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  type: PropTypes.oneOf(['pukiwikiLink', 'growiLink', 'MDLink']).isRequired,
+  isUseRelativePath: PropTypes.bool,
+};