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;