diff options
author | Joram Wilander <jwawilander@gmail.com> | 2017-06-06 17:24:08 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-06-06 17:24:08 -0400 |
commit | 6e7b912ec61a6a791e0e8405ff6f6bd7e622a187 (patch) | |
tree | c2fa1d2bae0b344859339d9077af5d822420e7bb /webapp/components/confirm_modal.jsx | |
parent | 02f09b8af90f1df38762b5257291b31597575dbb (diff) | |
download | chat-6e7b912ec61a6a791e0e8405ff6f6bd7e622a187.tar.gz chat-6e7b912ec61a6a791e0e8405ff6f6bd7e622a187.tar.bz2 chat-6e7b912ec61a6a791e0e8405ff6f6bd7e622a187.zip |
PLT-4257 Add pop-up asking if user wants to reset status (#6526)
* Add pop-up asking if user wants to reset status
* Update test snapshot
* Update prop name for old uses of confirm modal
* Updating checkbox (#6586)
* Updating style for checkbox (#6596)
Diffstat (limited to 'webapp/components/confirm_modal.jsx')
-rw-r--r-- | webapp/components/confirm_modal.jsx | 135 |
1 files changed, 103 insertions, 32 deletions
diff --git a/webapp/components/confirm_modal.jsx b/webapp/components/confirm_modal.jsx index 89656a776..72f341efb 100644 --- a/webapp/components/confirm_modal.jsx +++ b/webapp/components/confirm_modal.jsx @@ -1,18 +1,70 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import {FormattedMessage} from 'react-intl'; +import React from 'react'; import {Modal} from 'react-bootstrap'; - import PropTypes from 'prop-types'; - -import React from 'react'; +import {FormattedMessage} from 'react-intl'; export default class ConfirmModal extends React.Component { - constructor(props) { - super(props); + static propTypes = { + + /* + * Set to show modal + */ + show: PropTypes.bool.isRequired, + + /* + * Title to use for the modal + */ + title: PropTypes.node, + + /* + * Message to display in the body of the modal + */ + message: PropTypes.node, + + /* + * The CSS class to apply to the confirm button + */ + confirmButtonClass: PropTypes.string, + + /* + * Text/jsx element on the confirm button + */ + confirmButtonText: PropTypes.node, + + /* + * Text/jsx element on the cancel button + */ + cancelButtonText: PropTypes.node, + + /* + * Set to show checkbox + */ + showCheckbox: PropTypes.bool, + + /* + * Text/jsx element to display with the checkbox + */ + checkboxText: PropTypes.node, - this.handleKeypress = this.handleKeypress.bind(this); + /* + * Function called when the confirm button or ENTER is pressed. Passes `true` if the checkbox is checked + */ + onConfirm: PropTypes.func.isRequired, + + /* + * Function called when the cancel button is pressed or the modal is hidden. Passes `true` if the checkbox is checked + */ + onCancel: PropTypes.func.isRequired + } + + static defaultProps = { + title: '', + message: '', + confirmButtonClass: 'btn btn-primary', + confirmButtonText: '' } componentDidMount() { @@ -33,13 +85,50 @@ export default class ConfirmModal extends React.Component { } } - handleKeypress(e) { + handleKeypress = (e) => { if (e.key === 'Enter' && this.props.show) { - this.props.onConfirm(e); + this.handleConfirm(); } } + handleConfirm = () => { + const checked = this.refs.checkbox ? this.refs.checkbox.checked : false; + this.props.onConfirm(checked); + } + + handleCancel = () => { + const checked = this.refs.checkbox ? this.refs.checkbox.checked : false; + this.props.onCancel(checked); + } + render() { + let checkbox; + if (this.props.showCheckbox) { + checkbox = ( + <div className='checkbox text-right margin-bottom--none'> + <label> + <input + ref='checkbox' + type='checkbox' + /> + {this.props.checkboxText} + </label> + </div> + ); + } + + let cancelText; + if (this.props.cancelButtonText) { + cancelText = this.props.cancelButtonText; + } else { + cancelText = ( + <FormattedMessage + id='confirm_modal.cancel' + defaultMessage='Cancel' + /> + ); + } + return ( <Modal className='modal-confirm' @@ -51,43 +140,25 @@ export default class ConfirmModal extends React.Component { </Modal.Header> <Modal.Body> {this.props.message} + {checkbox} </Modal.Body> <Modal.Footer> <button type='button' className='btn btn-default' - onClick={this.props.onCancel} + onClick={this.handleCancel} > - <FormattedMessage - id='confirm_modal.cancel' - defaultMessage='Cancel' - /> + {cancelText} </button> <button type='button' className={this.props.confirmButtonClass} - onClick={this.props.onConfirm} + onClick={this.handleConfirm} > - {this.props.confirmButton} + {this.props.confirmButtonText} </button> </Modal.Footer> </Modal> ); } } - -ConfirmModal.defaultProps = { - title: '', - message: '', - confirmButtonClass: 'btn btn-primary', - confirmButton: '' -}; -ConfirmModal.propTypes = { - show: PropTypes.bool.isRequired, - title: PropTypes.node, - message: PropTypes.node, - confirmButtonClass: PropTypes.string, - confirmButton: PropTypes.node, - onConfirm: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired -}; |