summaryrefslogtreecommitdiff
path: root/frontend/src/components/modals/Modal.js
diff options
context:
space:
mode:
authorGeorgios Andreadis <info@gandreadis.com>2020-07-01 13:33:31 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2020-08-24 19:47:17 +0200
commitde8f12d74faef5fa3f9e38d1340948cab2d06ea3 (patch)
tree678bf1af3e5fa2334f0df43388d45294785bbf1e /frontend/src/components/modals/Modal.js
parent44236756c4cf689806dc17c6950a2cff3e9227bf (diff)
Manually generate IDs
Diffstat (limited to 'frontend/src/components/modals/Modal.js')
-rw-r--r--frontend/src/components/modals/Modal.js226
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>&times;</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>&times;</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