diff options
Diffstat (limited to 'frontend/src/components/modals/Modal.js')
| -rw-r--r-- | frontend/src/components/modals/Modal.js | 226 |
1 files changed, 113 insertions, 113 deletions
diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index 19337db8..ec6080f2 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -1,132 +1,132 @@ -import classNames from "classnames"; -import PropTypes from "prop-types"; -import React from "react"; -import jQuery from "../../util/jquery"; +import classNames from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' +import jQuery from '../../util/jquery' class Modal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - submitButtonType: PropTypes.string, - submitButtonText: PropTypes.string - }; - static defaultProps = { - submitButtonType: "primary", - submitButtonText: "Save" - }; - static idCounter = 0; + static propTypes = { + title: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + submitButtonType: PropTypes.string, + submitButtonText: PropTypes.string, + } + static defaultProps = { + submitButtonType: 'primary', + submitButtonText: 'Save', + } + static idCounter = 0 - // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate - // 'close' triggers) - visible = false; + // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate + // 'close' triggers) + visible = false - constructor(props) { - super(props); - this.id = "modal-" + Modal.idCounter++; - } + constructor(props) { + super(props) + this.id = 'modal-' + Modal.idCounter++ + } - componentDidMount() { - this.visible = this.props.show; - this.openOrCloseModal(); + componentDidMount() { + this.visible = this.props.show + this.openOrCloseModal() - // Trigger auto-focus - jQuery("#" + this.id) - .on("shown.bs.modal", function() { - jQuery(this) - .find("input") - .first() - .focus(); - }) - .on("hide.bs.modal", () => { - if (this.visible) { - this.props.onCancel(); - } - }) - .on("keydown", e => { - e.stopPropagation(); - }); - } + // Trigger auto-focus + jQuery('#' + this.id) + .on('shown.bs.modal', function() { + jQuery(this) + .find('input') + .first() + .focus() + }) + .on('hide.bs.modal', () => { + if (this.visible) { + this.props.onCancel() + } + }) + .on('keydown', e => { + e.stopPropagation() + }) + } - componentDidUpdate() { - this.visible = this.props.show; - this.openOrCloseModal(); - } + componentDidUpdate() { + this.visible = this.props.show + this.openOrCloseModal() + } - onSubmit() { - if (this.visible) { - this.props.onSubmit(); - this.visible = false; - this.closeModal(); + onSubmit() { + if (this.visible) { + this.props.onSubmit() + this.visible = false + this.closeModal() + } } - } - onCancel() { - if (this.visible) { - this.props.onCancel(); - this.visible = false; - this.closeModal(); + onCancel() { + if (this.visible) { + this.props.onCancel() + this.visible = false + this.closeModal() + } } - } - openModal() { - jQuery("#" + this.id).modal("show"); - } + openModal() { + jQuery('#' + this.id).modal('show') + } - closeModal() { - jQuery("#" + this.id).modal("hide"); - } + closeModal() { + jQuery('#' + this.id).modal('hide') + } - openOrCloseModal() { - if (this.visible) { - this.openModal(); - } else { - this.closeModal(); + openOrCloseModal() { + if (this.visible) { + this.openModal() + } else { + this.closeModal() + } } - } - render() { - return ( - <div className="modal fade" id={this.id} role="dialog"> - <div className="modal-dialog" role="document"> - <div className="modal-content"> - <div className="modal-header"> - <h5 className="modal-title">{this.props.title}</h5> - <button - type="button" - className="close" - onClick={this.onCancel.bind(this)} - aria-label="Close" - > - <span>×</span> - </button> + render() { + return ( + <div className="modal fade" id={this.id} role="dialog"> + <div className="modal-dialog" role="document"> + <div className="modal-content"> + <div className="modal-header"> + <h5 className="modal-title">{this.props.title}</h5> + <button + type="button" + className="close" + onClick={this.onCancel.bind(this)} + aria-label="Close" + > + <span>×</span> + </button> + </div> + <div className="modal-body">{this.props.children}</div> + <div className="modal-footer"> + <button + type="button" + className="btn btn-secondary" + onClick={this.onCancel.bind(this)} + > + Close + </button> + <button + type="button" + className={classNames( + 'btn', + 'btn-' + this.props.submitButtonType, + )} + onClick={this.onSubmit.bind(this)} + > + {this.props.submitButtonText} + </button> + </div> + </div> + </div> </div> - <div className="modal-body">{this.props.children}</div> - <div className="modal-footer"> - <button - type="button" - className="btn btn-secondary" - onClick={this.onCancel.bind(this)} - > - Close - </button> - <button - type="button" - className={classNames( - "btn", - "btn-" + this.props.submitButtonType - )} - onClick={this.onSubmit.bind(this)} - > - {this.props.submitButtonText} - </button> - </div> - </div> - </div> - </div> - ); - } + ) + } } -export default Modal; +export default Modal |