diff options
author | VeraLyu <lvroyce0210@gmail.com> | 2017-03-19 21:53:12 +0800 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-03-19 09:53:12 -0400 |
commit | 9b10f3ef5450886bc2eb47fc58b649ff67109b1d (patch) | |
tree | a0e050d9d58b9ca528e86f8f186a9c043d4927c5 | |
parent | efd6c8606664797f20a3f591b68ee79ee1a1682a (diff) | |
download | chat-9b10f3ef5450886bc2eb47fc58b649ff67109b1d.tar.gz chat-9b10f3ef5450886bc2eb47fc58b649ff67109b1d.tar.bz2 chat-9b10f3ef5450886bc2eb47fc58b649ff67109b1d.zip |
Split delete modal trigger for reuse (#5740)
Spllit delete modal trigger for reuse and make emoji delete
to use this modal trigger.
-rw-r--r-- | webapp/components/delete_modal_trigger.jsx | 62 | ||||
-rw-r--r-- | webapp/components/emoji/components/delete_emoji_modal.jsx | 49 | ||||
-rw-r--r-- | webapp/components/emoji/components/emoji_list_item.jsx | 11 | ||||
-rw-r--r-- | webapp/components/integrations/components/delete_integration.jsx | 73 | ||||
-rwxr-xr-x[-rw-r--r--] | webapp/i18n/en.json | 3 |
5 files changed, 133 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> - ); } } diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index bc30b53e7..85974b721 100644..100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1275,6 +1275,9 @@ "emoji_list.add": "Add Custom Emoji", "emoji_list.creator": "Creator", "emoji_list.delete": "Delete", + "emoji_list.delete.confirm.button": "Delete", + "emoji_list.delete.confirm.msg": "This action permanently deletes the custom emoji. Are you sure you want to delete it?", + "emoji_list.delete.confirm.title": "Delete Custom Emoji", "emoji_list.empty": "No Custom Emoji Found", "emoji_list.header": "Custom Emoji", "emoji_list.help": "Custom emoji are available to everyone on your server. Type ':' in a message box to bring up the emoji selection menu. Other users may need to refresh the page before new emojis appear.", |