github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-server/web/src/components/FormModal.js (about)

     1  import {
     2    Button,
     3    Modal,
     4    ModalBody,
     5    ModalFooter,
     6    ModalHeader,
     7  } from 'reactstrap';
     8  import Form from 'react-jsonschema-form';
     9  import React from 'react';
    10  
    11  import styles from './FormModal.scss';
    12  
    13  const log = type => console.log.bind(console, type); // eslint-disable-line no-console
    14  
    15  const CustomCheckbox = (props) => {
    16    const {
    17      id,
    18      value,
    19      required,
    20      disabled,
    21      readonly,
    22      label,
    23      autofocus,
    24      onChange,
    25    } = props;
    26    return (
    27      <div className={`checkbox custom-control custom-checkbox ${disabled || readonly ? 'disabled' : ''}`}>
    28        <input
    29          type="checkbox"
    30          className="custom-control-input"
    31          id={id}
    32          checked={typeof value === 'undefined' ? false : value}
    33          required={required}
    34          disabled={disabled || readonly}
    35          autoFocus={autofocus}
    36          onChange={event => onChange(event.target.checked)}
    37        />
    38        <label className="custom-control-label" htmlFor={id}>
    39          <span>{label}</span>
    40        </label>
    41      </div>
    42    );
    43  };
    44  
    45  class FormModal extends React.Component {
    46    state = {
    47      isValid: true,
    48      formData: {
    49      },
    50    }
    51  
    52    componentWillReceiveProps(props) {
    53      this.setState({
    54        formData: props.formData,
    55      });
    56    }
    57  
    58    onChange() {
    59      return (data) => {
    60        const { errors, formData } = data;
    61        this.setState({
    62          isValid: errors.length === 0,
    63          formData,
    64        });
    65  
    66        if (this.props.onChange) {
    67          this.props.onChange(data);
    68        }
    69      };
    70    }
    71  
    72    render() {
    73      return (
    74        <Modal isOpen={this.props.isOpen} toggle={this.props.onClose} wrapClassName="bootstrap-global" className={styles.formModal}>
    75          {this.props.title &&
    76          <ModalHeader toggle={this.props.onClose}>
    77            {this.props.title}
    78          </ModalHeader>
    79          }
    80          <ModalBody>
    81            {!this.props.prepend && this.props.children}
    82            <Form
    83              schema={this.props.schema}
    84              uiSchema={this.props.uiSchema}
    85              showErrorList={false}
    86              liveValidate
    87              onChange={this.onChange()}
    88              formData={this.state.formData}
    89              onSubmit={this.props.onSubmit}
    90              onError={log('errors')}
    91              disabled={this.props.disabled}
    92              transformErrors={this.props.transformErrors}
    93              widgets={{
    94                CheckboxWidget: CustomCheckbox,
    95              }}
    96            >
    97              <button ref={(btn) => { this.submitButton = btn; }} style={{ display: 'none' }} type="submit" />
    98            </Form>
    99            {this.props.prepend && this.props.children}
   100          </ModalBody>
   101          <ModalFooter>
   102            {this.props.footer}
   103            <Button color="primary" disabled={!this.state.isValid || this.props.disabled} onClick={() => this.submitButton.click()}>
   104              {this.props.submitButton || 'Create'}
   105            </Button>{' '}
   106          </ModalFooter>
   107        </Modal>
   108      );
   109    }
   110  }
   111  
   112  export default FormModal;