diff options
Diffstat (limited to 'webapp/components')
4 files changed, 130 insertions, 65 deletions
diff --git a/webapp/components/delete_modal_trigger.jsx b/webapp/components/delete_modal_trigger.jsx new file mode 100644 index 000000000..9ccbf33a2 --- /dev/null +++ b/webapp/components/delete_modal_trigger.jsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import ConfirmModal from './confirm_modal.jsx'; + +export default class DeleteModalTrigger extends React.Component { + constructor(props) { + super(props); + if (this.constructor === DeleteModalTrigger) { + throw new TypeError('Can not construct abstract class.'); + } + this.handleConfirm = this.handleConfirm.bind(this); + this.handleCancel = this.handleCancel.bind(this); + this.handleOpenModal = this.handleOpenModal.bind(this); + + this.state = { + showDeleteModal: false + }; + } + + handleOpenModal(e) { + e.preventDefault(); + + this.setState({ + showDeleteModal: true + }); + } + + handleConfirm(e) { + this.props.onDelete(e); + } + + handleCancel() { + this.setState({ + showDeleteModal: false + }); + } + + render() { + return ( + <span> + <a + href='#' + onClick={this.handleOpenModal} + > + { this.triggerTitle } + </a> + <ConfirmModal + show={this.state.showDeleteModal} + title={this.modalTitle} + message={this.modalMessage} + confirmButton={this.modalConfirmButton} + onConfirm={this.handleConfirm} + onCancel={this.handleCancel} + /> + </span> + ); + } +} + +DeleteModalTrigger.propTypes = { + onDelete: React.PropTypes.func.isRequired +}; diff --git a/webapp/components/emoji/components/delete_emoji_modal.jsx b/webapp/components/emoji/components/delete_emoji_modal.jsx new file mode 100644 index 000000000..604e3a27b --- /dev/null +++ b/webapp/components/emoji/components/delete_emoji_modal.jsx @@ -0,0 +1,49 @@ +import React from 'react'; +import {FormattedMessage} from 'react-intl'; + +import DeleteModalTrigger from '../../delete_modal_trigger.jsx'; + +export default class DeleteEmoji extends DeleteModalTrigger { + get triggerTitle() { + return ( + <FormattedMessage + id='emoji_list.delete' + defaultMessage='Delete' + /> + ); + } + + get modalTitle() { + return ( + <FormattedMessage + id='emoji_list.delete.confirm.title' + defaultMessage='Delete Custom Emoji' + /> + ); + } + + get modalMessage() { + return ( + <div className='alert alert-warning'> + <i className='fa fa-warning'/> + <FormattedMessage + id='emoji_list.delete.confirm.msg' + defaultMessage='This action permanently deletes the custom emoji. Are you sure you want to delete it?' + /> + </div> + ); + } + + get modalConfirmButton() { + return ( + <FormattedMessage + id='emoji_list.delete.confirm.button' + defaultMessage='Delete' + /> + ); + } +} + +DeleteEmoji.propTypes = { + onDelete: React.PropTypes.func.isRequired +}; diff --git a/webapp/components/emoji/components/emoji_list_item.jsx b/webapp/components/emoji/components/emoji_list_item.jsx index f2ed82ba7..019b0ca93 100644 --- a/webapp/components/emoji/components/emoji_list_item.jsx +++ b/webapp/components/emoji/components/emoji_list_item.jsx @@ -4,6 +4,7 @@ import React from 'react'; import EmojiStore from 'stores/emoji_store.jsx'; +import DeleteEmoji from './delete_emoji_modal.jsx'; import * as Utils from 'utils/utils.jsx'; @@ -80,15 +81,7 @@ export default class EmojiListItem extends React.Component { let deleteButton = null; if (this.props.onDelete) { deleteButton = ( - <a - href='#' - onClick={this.handleDelete} - > - <FormattedMessage - id='emoji_list.delete' - defaultMessage='Delete' - /> - </a> + <DeleteEmoji onDelete={this.handleDelete}/> ); } diff --git a/webapp/components/integrations/components/delete_integration.jsx b/webapp/components/integrations/components/delete_integration.jsx index 442ac57f7..8e2e27596 100644 --- a/webapp/components/integrations/components/delete_integration.jsx +++ b/webapp/components/integrations/components/delete_integration.jsx @@ -1,48 +1,29 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; -import ConfirmModal from '../../confirm_modal.jsx'; +import DeleteModalTrigger from '../../delete_modal_trigger.jsx'; -export default class DeleteIntegration extends React.Component { - constructor(props) { - super(props); - - this.handleConfirm = this.handleConfirm.bind(this); - this.handleCancel = this.handleCancel.bind(this); - this.handleOpenModal = this.handleOpenModal.bind(this); - - this.state = { - showDeleteModal: false - }; - } - - handleOpenModal(e) { - e.preventDefault(); - - this.setState({ - showDeleteModal: true - }); - } - - handleConfirm() { - this.props.onDelete(); - } - - handleCancel() { - this.setState({ - showDeleteModal: false - }); +export default class DeleteIntegration extends DeleteModalTrigger { + get triggerTitle() { + return ( + <FormattedMessage + id='installed_integrations.delete' + defaultMessage='Delete' + /> + ); } - render() { - const title = ( + get modalTitle() { + return ( <FormattedMessage id='integrations.delete.confirm.title' defaultMessage='Delete Integration' /> ); + } - const message = ( + get modalMessage() { + return ( <div className='alert alert-warning'> <i className='fa fa-warning'/> <FormattedMessage @@ -51,35 +32,15 @@ export default class DeleteIntegration extends React.Component { /> </div> ); + } - const confirmButton = ( + get modalConfirmButton() { + return ( <FormattedMessage id='integrations.delete.confirm.button' defaultMessage='Delete' /> ); - - return ( - <span> - <a - href='#' - onClick={this.handleOpenModal} - > - <FormattedMessage - id='installed_integrations.delete' - defaultMessage='Delete' - /> - </a> - <ConfirmModal - show={this.state.showDeleteModal} - title={title} - message={message} - confirmButton={confirmButton} - onConfirm={this.handleConfirm} - onCancel={this.handleCancel} - /> - </span> - ); } } |