Merge pull request #2361 from weseek/imprv/operate_new_link_issue_form

Imprv/operate new link issue form

src/client/js/components/OutsideShareLinkModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -16,11 +16,14 @@ import ShareLinkList from './ShareLinkList';
 import ShareLinkForm from './ShareLinkForm';
 
 const OutsideShareLinkModal = (props) => {
+  const [isOpenShareLinkForm, setIsOpenShareLinkForm] = useState(false);
 
-  /* const { t } = props; */
+  function toggleShareLinkFormHandler() {
+    setIsOpenShareLinkForm(!isOpenShareLinkForm);
+  }
 
   return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
+    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose}>
       <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">Title
       </ModalHeader>
       <ModalBody>
@@ -32,8 +35,14 @@ const OutsideShareLinkModal = (props) => {
 
           <div>
             <ShareLinkList />
-            <button className="btn btn-outline-secondary d-block mx-auto px-5 mb-3" type="button">+</button>
-            <ShareLinkForm />
+            <button
+              className="btn btn-outline-secondary d-block mx-auto px-5 mb-3"
+              type="button"
+              onClick={toggleShareLinkFormHandler}
+            >
+              {isOpenShareLinkForm ? 'Close' : 'New'}
+            </button>
+            {isOpenShareLinkForm && <ShareLinkForm />}
           </div>
         </div>
       </ModalBody>

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

@@ -26,12 +26,10 @@ const PageShareManagement = (props) => {
 
   function renderModals() {
     return (
-      <>
-        <OutsideShareLinkModal
-          isOpen={isOutsideShareLinkModalShown}
-          onClose={closeOutsideShareLinkModalHandler}
-        />
-      </>
+      <OutsideShareLinkModal
+        isOpen={isOutsideShareLinkModalShown}
+        onClose={closeOutsideShareLinkModalHandler}
+      />
     );
   }
 

src/client/js/components/ShareLinkForm.jsx

@@ -1,64 +1,190 @@
 import React from 'react';
 
 import { withTranslation } from 'react-i18next';
+import dateFnsFormat from 'date-fns/format';
 
 import { createSubscribedElement } from './UnstatedUtils';
 
-
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
-const ShareLinkForm = (props) => {
-  return (
-    <div className="share-link-form border p-3">
-      <h4>Expiration Date</h4>
-      <form>
-        <fieldset className="form-group">
-          <div className="row">
-            <legend className="col-form-label col-3"></legend>
-            <div>
-              <div className="custom-control custom-radio mb-2">
-                <input id="customRadio1" name="customRadio" type="radio" className="custom-control-input"></input>
-                <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
-              </div>
-
-              <div className="custom-control custom-radio mb-2">
-                <input id="customRadio2" name="customRadio" type="radio" className="custom-control-input"></input>
-                <label className="custom-control-label" htmlFor="customRadio2">
-                  <div className="row align-items-center m-0">
-                    <input className="form-control col-2" type="number" min="1" max="7" value="7"></input>
-                    <span className="col-auto">Days</span>
-                  </div>
-                </label>
-              </div>
-
-              <div className="custom-control custom-radio mb-2">
-                <input id="customRadio3" name="customRadio" type="radio" className="custom-control-input"></input>
-                <label className="custom-control-label" htmlFor="customRadio3">
-                  Custom
-                  <div className="date-picker">Date Picker</div>
-                </label>
-              </div>
+class ShareLinkForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      expirationType: 'unlimited',
+      numberOfDays: 7,
+      description: '',
+      customExpirationDate: dateFnsFormat(new Date(), 'yyyy-MM-dd'),
+      customExpirationTime: dateFnsFormat(new Date(), 'hh:mm:s'),
+    };
+
+    this.handleChangeExpirationType = this.handleChangeExpirationType.bind(this);
+    this.handleChangeNumberOfDays = this.handleChangeNumberOfDays.bind(this);
+    this.handleChangeDescription = this.handleChangeDescription.bind(this);
+    this.handleIssueShareLink = this.handleIssueShareLink.bind(this);
+  }
+
+  /**
+   * change expirationType
+   * @param {string} expirationType
+   */
+  handleChangeExpirationType(expirationType) {
+    this.setState({ expirationType });
+  }
+
+  /**
+   * change numberOfDays
+   * @param {number} numberOfDays
+   */
+  handleChangeNumberOfDays(numberOfDays) {
+    this.setState({ numberOfDays });
+  }
+
+  /**
+   * change description
+   * @param {string} description
+   */
+  handleChangeDescription(description) {
+    this.setState({ description });
+  }
+
+  /**
+   * change customExpirationDate
+   * @param {date} customExpirationDate
+   */
+  handleChangeCustomExpirationDate(customExpirationDate) {
+    this.setState({ customExpirationDate });
+  }
+
+  /**
+   * change customExpirationTime
+   * @param {date} customExpirationTime
+   */
+  handleChangeCustomExpirationTime(customExpirationTime) {
+    this.setState({ customExpirationTime });
+  }
+
+  handleIssueShareLink() {
+    // use these options
+    console.log(this.state);
+    console.log('発行する!');
+  }
+
+  renderExpirationTypeOptions() {
+    const { expirationType } = this.state;
+
+    return (
+      <div className="form-group">
+        <div className="custom-control custom-radio offset-4 mb-2">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id="customRadio1"
+            name="expirationType"
+            value="customRadio1"
+            checked={expirationType === 'unlimited'}
+            onChange={() => { this.handleChangeExpirationType('unlimited') }}
+          />
+          <label className="custom-control-label" htmlFor="customRadio1">Unlimited</label>
+        </div>
+
+        <div className="custom-control custom-radio offset-4 mb-2">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id="customRadio2"
+            value="customRadio2"
+            checked={expirationType === 'numberOfDays'}
+            onChange={() => { this.handleChangeExpirationType('numberOfDays') }}
+            name="expirationType"
+          />
+          <label className="custom-control-label" htmlFor="customRadio2">
+            <div className="row align-items-center m-0">
+              <input
+                type="number"
+                min="1"
+                className="col-4"
+                name="expirationType"
+                value={this.state.numberOfDays}
+                onFocus={() => { this.handleChangeExpirationType('numberOfDays') }}
+                onChange={e => this.handleChangeNumberOfDays(Number(e.target.value))}
+              />
+              <span className="col-auto">Days</span>
             </div>
-          </div>
-        </fieldset>
+          </label>
+        </div>
 
-        <hr />
+        <div className="custom-control custom-radio offset-4 mb-2">
+          <input
+            type="radio"
+            className="custom-control-input"
+            id="customRadio3"
+            name="expirationType"
+            value="customRadio3"
+            checked={expirationType === 'custom'}
+            onChange={() => { this.handleChangeExpirationType('custom') }}
+          />
+          <label className="custom-control-label" htmlFor="customRadio3">
+            Custom
+          </label>
+          <input
+            type="date"
+            className="ml-3"
+            name="customExpirationDate"
+            value={this.state.customExpirationDate}
+            onFocus={() => { this.handleChangeExpirationType('custom') }}
+            onChange={e => this.handleChangeCustomExpirationDate(e.target.value)}
+          />
+          <input
+            type="time"
+            className="ml-3"
+            name="customExpiration"
+            value={this.state.customExpirationTime}
+            onFocus={() => { this.handleChangeExpirationType('custom') }}
+            onChange={e => this.handleChangeCustomExpirationTime(e.target.value)}
+          />
+        </div>
+      </div>
+    );
+  }
 
-        <div className="form-group row">
-          <label htmlFor="inputDesc" className="offset-3 col-form-label">Description</label>
-          <div className="col-5">
-            <input type="text" className="form-control" id="inputDesc" placeholder="Enter description"></input>
-          </div>
+  renderDescriptionForm() {
+    return (
+      <div className="form-group row">
+        <label htmlFor="inputDesc" className="col-md-4 col-form-label">Description</label>
+        <div className="col-md-4">
+          <input
+            type="text"
+            className="form-control"
+            id="inputDesc"
+            placeholder="Enter description"
+            value={this.state.description}
+            onChange={e => this.handleChangeDescription(e.target.value)}
+          />
         </div>
+      </div>
+    );
+  }
 
-        <div className="form-inline">
-          <button type="button" className="ml-auto btn btn-primary">Issue</button>
+  render() {
+    return (
+      <div className="share-link-form border p-3">
+        <h4>Expiration Date</h4>
+        {this.renderExpirationTypeOptions()}
+        <hr />
+        {this.renderDescriptionForm()}
+        <div className="text-right">
+          <button type="button" className="btn btn-primary" onClick={this.handleIssueShareLink}>
+            Issue
+          </button>
         </div>
-      </form>
-    </div>
-  );
-};
+      </div>
+    );
+  }
+
+}
 
 const ShareLinkFormWrapper = (props) => {
   return createSubscribedElement(ShareLinkForm, props, [AppContainer, PageContainer]);