Split delete modal trigger for reuse (#5740)

Spllit delete modal trigger for reuse and make emoji delete
to use this modal trigger.

2 files changed, 51 insertions, 9 deletions

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}/>
             );
         }