confirm component is added

2017-07-05 22:07:50 +09:00 · 2017-07-05 22:07:50 +09:00 · e87de4262d
parent bbd4ae4bba
commit e87de4262d
6 changed files with 134 additions and 78 deletions
--- a/webui/src/components/Base/Logout.js
+++ b/webui/src/components/Base/Logout.js
@ -90,7 +90,7 @@ const propTypes = {
 const Logout = ({ visible, onHide, onLogout }) => (
  <Modal 
    visible={visible} 
-    onHide={onHide} 
+    onOutside={onHide} 
    transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
    transitionLeave={`${transitions.slideUp} .5s ease-in-out`}
    transitionEnterTimeout={500}
--- a/webui/src/components/Shared/Confirm.js
+++ b/webui/src/components/Shared/Confirm.js
@ -7,6 +7,7 @@ import { media, transitions } from 'helpers/style-utils';

 import Modal from './Modal';
 import Button from './Button';
+import Dimmed from './Dimmed';

 const Wrapper = styled.div`
  display: flex;
@ -33,11 +34,12 @@ const Buttons = styled.div`
  padding: 1rem;
 `

-const Confirm = ({ visible, message, buttons, onHide }) => {
+const Confirm = ({ visible, onOutside, message, buttons }) => {
  const buttonList = buttons
    .map(button =>
      <Button
-        clear 
+        key={button.text}
+        clear={true}
        danger={button.danger === true} 
        info={button.info === true} 
        onClick={button.action}>
@ -45,13 +47,26 @@ const Confirm = ({ visible, message, buttons, onHide }) => {
      </Button>
    );
  return (
-    <Modal visible={visible} onHide={onHide}>
-      <Wrapper>
-        <Message>{message}</Message>
-        <Buttons>{buttonList}</Buttons>
-      </Wrapper>  
-    </Modal>
+    <div>
+      <Modal visible={visible} onOutside={onOutside} zindex='1000'>
+        <Wrapper>
+          <Message>{message}</Message>
+          <Buttons>{buttonList}</Buttons>
+        </Wrapper>
+      </Modal>
+      <Dimmed visible={visible} zindex='999'/>
+    </div>
  )
 }

+Confirm.propTypes = {
+  visible: PropTypes.bool,
+  onOutside: PropTypes.func,
+}
+
+Confirm.defaultProps = {
+  visible: false,
+  onOutside: () => {},
+}
+
 export default Confirm;
--- a/webui/src/components/Shared/Dimmed.js
+++ b/webui/src/components/Shared/Dimmed.js
@ -25,7 +25,7 @@ Dimmed.propTypes = {

 Dimmed.defaultProps = {
  visible: false,
-  zindex: '5'
+  zindex: '300'
 }

 export default Dimmed;
--- a/webui/src/components/Shared/Form.js
+++ b/webui/src/components/Shared/Form.js
@ -10,6 +10,7 @@ import JsonSchemaForm from 'react-jsonschema-form';
 import Modal from './Modal';
 import Button from './Button';
 import Spinner from './Spinner';
+import Confirm from './Confirm';

 const Wrapper = styled.div`
  display: flex;
@ -143,25 +144,55 @@ class Form extends Component {
    title: ""
  };

+  state = {
+    editing: false,
+    confirm: false
+  };
+
+  handleChange = data => {
+    const {
+      onChange
+    } = this.props;
+
+    this.setState({ editing: true })
+    onChange(data.formData, data.errors)
+  }
+
  handleSubmitButton = () => {
+    this.setState({ editing: false })
    this.submitButton.click();
  }

-  handleChange = data => {
-    const { formData, errors } = data;
+  handleOutside = () => {
+    const {
+      onHide
+    } = this.props;
+
+    if (this.state.editing === true) {
+      this.setState({ confirm: true })
+    } else {
+      onHide();
+    }
+  }
+
+  handleClose = () => {
+    const {
+      onHide
+    } = this.props;

-    let disableSubmitButton = (errors.length !== 0);
-    // I think there is a library bug React or Jsonschema
-    // For workaround, I'll simply add 'formData' in setState
    this.setState({
-      disableSubmitButton,
-      formData
-    });
+      editing: false,
+      confirm: false
+    })
+    onHide();
  }

  render() {
    const {
-      handleSubmitButton
+      handleChange,
+      handleSubmitButton,
+      handleOutside,
+      handleClose
    } = this;

    const {
@ -174,64 +205,73 @@ class Form extends Component {
      isLoading,
      disableSubmitButton,
      validate,
-      onHide,
      onChange,
      onSubmit
    } = this.props;

    return (
-      <Modal 
-        visible={visible} 
-        onHide={onHide}>
-        <Wrapper id='nprogress-base-form'>
-          <Header>
-            {title}
-          </Header>
-          <Body>
-            {isLoading && <Spinner/>}
-            {!isLoading && 
-              <JsonSchemaForm
-                schema={schema}
-                uiSchema={
-                  disabled ? {
-                    "ui:disabled": true,
-                    ...uiSchema
-                  } : {
-                    ...uiSchema
-                  }
-                }
-                formData={formData}
-                disableSubmitButton={disableSubmitButton}
-                fields={fields}
-                FieldTemplate={CustomFieldTemplate}
-                liveValidate
-                validate={validate}
-                showErrorList={false}
-                transformErrors={transformErrors}
-                autocomplete="off"
-                onChange={data => onChange(data.formData, data.errors)}
-                onSubmit={data => onSubmit(data.formData)}>
-                <div>
-                  <button type="submit" ref={(el => this.submitButton = el)}/>
-                  <style jsx>{`
-                    button {
-                      display: none;
+      <div>
+        <Modal 
+          visible={visible} 
+          onOutside={handleOutside}
+          disableOnClickOutside={this.state.confirm}>
+          <Wrapper id='nprogress-base-form'>
+            <Header>
+              {title}
+            </Header>
+            <Body>
+              {isLoading && <Spinner/>}
+              {!isLoading && 
+                <JsonSchemaForm
+                  schema={schema}
+                  uiSchema={
+                    disabled ? {
+                      "ui:disabled": true,
+                      ...uiSchema
+                    } : {
+                      ...uiSchema
                    }
-                  kkk`}</style>
-                </div>
-              </JsonSchemaForm>
-            }
-          </Body>
-          <Footer>
-            <Button clear disabled={disabled} onClick={onHide}>
-              CANCEL
-            </Button>
-            <Button clear disabled={disabled || disableSubmitButton} onClick={handleSubmitButton}>
-              SAVE
-            </Button>
-          </Footer>
-        </Wrapper>  
-      </Modal>
+                  }
+                  formData={formData}
+                  disableSubmitButton={disableSubmitButton}
+                  fields={fields}
+                  FieldTemplate={CustomFieldTemplate}
+                  liveValidate
+                  validate={validate}
+                  showErrorList={false}
+                  transformErrors={transformErrors}
+                  autocomplete="off"
+                  onChange={handleChange}
+                  onSubmit={data => onSubmit(data.formData)}>
+                  <div>
+                    <button type="submit" ref={(el => this.submitButton = el)}/>
+                    <style jsx>{`
+                      button {
+                        display: none;
+                      }
+                    kkk`}</style>
+                  </div>
+                </JsonSchemaForm>
+              }
+            </Body>
+            <Footer>
+              <Button clear disabled={disabled} onClick={handleClose}>
+                CANCEL
+              </Button>
+              <Button clear disabled={disabled || disableSubmitButton} onClick={handleSubmitButton}>
+                SAVE
+              </Button>
+            </Footer>
+          </Wrapper>  
+        </Modal>
+        <Confirm 
+          visible={this.state.confirm} 
+          message="You have unsaved changes. Are you sure you want to close?"
+          buttons={[
+            { text: "CLOSE", action: handleClose, info:true },
+            { text: "NO", action: () => this.setState({ confirm: false })}
+          ]}/>
+      </div>
    )
  }
 }
--- a/webui/src/components/Shared/Modal.js
+++ b/webui/src/components/Shared/Modal.js
@ -28,7 +28,7 @@ const Wrapper = styled.div`
 class Modal extends Component {
  static propTypes = {
    visible: PropTypes.bool,
-    onHide: PropTypes.func,
+    onOutside: PropTypes.func,
    zindex: PropTypes.string,
    transitionEnter: PropTypes.string,
    transitionLeave: PropTypes.string,
@ -37,7 +37,7 @@ class Modal extends Component {
  }

  static defaultProps = {
-    zindex: '10',
+    zindex: '500',
    transitionEnter: `${transitions.stretchOut} .25s ease-in`,
    transitionLeave: `${transitions.shrinkIn} .25s ease-in`,
    transitionEnterTimeout: 300,
@ -45,16 +45,16 @@ class Modal extends Component {
  }

  handleClickOutside = (e) => {
-    const { visible, onHide } = this.props;
+    const { visible, onOutside } = this.props;

    if (!visible) return null;
-    onHide();
+    onOutside();
  }

  handleKeyUp = (e) => {
-    const { onHide } = this.props
+    const { onOutside } = this.props
    if (e.keyCode === 27) {
-      onHide();
+      onOutside();
    }
  }
  
--- a/webui/src/containers/Subscriber/Collection.js
+++ b/webui/src/containers/Subscriber/Collection.js
@ -13,7 +13,8 @@ import {
  Spinner, 
  FloatingButton, 
  Blank,
-  Dimmed
+  Dimmed,
+  Confirm
 } from 'components';

 import Document from './Document';