[PLT-7317] Fix emoji picker preview (#7136)

* fix emoji picker preview

* make use of sprite-sheet CSS for all system emojis

3 files changed, 50 insertions, 86 deletions

diff --git a/webapp/components/emoji_picker/components/emoji_picker_item.jsx b/webapp/components/emoji_picker/components/emoji_picker_item.jsx
index cbafd31c5..af72331be 100644
--- a/webapp/components/emoji_picker/components/emoji_picker_item.jsx
+++ b/webapp/components/emoji_picker/components/emoji_picker_item.jsx
@@ -35,7 +35,7 @@ export default class EmojiPickerItem extends React.PureComponent {
     }
 
     handleMouseOut() {
-        this.props.onItemOut(this.props.emoji);
+        this.props.onItemOut();
     }
 
     handleClick() {
@@ -45,21 +45,7 @@ export default class EmojiPickerItem extends React.PureComponent {
     render() {
         let item = null;
 
-        if (this.props.category === 'recent' || this.props.category === 'custom') {
-            item = (
-                <span
-                    onMouseOver={this.handleMouseOver}
-                    onMouseOut={this.handleMouseOut}
-                    onClick={this.handleClick}
-                    className='emoji-picker__item-wrapper'
-                >
-                    <img
-                        className='emoji-picker__item emoticon'
-                        src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
-                    />
-                </span>
-            );
-        } else {
+        if (this.props.emoji.category) {
             let className;
             if (this.props.isLoaded) {
                 className = 'emojisprite';
@@ -67,7 +53,7 @@ export default class EmojiPickerItem extends React.PureComponent {
                 className = 'emojisprite-loading';
             }
 
-            className += ' emoji-category-' + this.props.category;
+            className += ' emoji-category-' + this.props.emoji.category;
             className += ' emoji-' + this.props.emoji.filename;
 
             item = (
@@ -81,7 +67,22 @@ export default class EmojiPickerItem extends React.PureComponent {
                     />
                 </div>
             );
+        } else {
+            item = (
+                <span
+                    onMouseOver={this.handleMouseOver}
+                    onMouseOut={this.handleMouseOut}
+                    onClick={this.handleClick}
+                    className='emoji-picker__item-wrapper'
+                >
+                    <img
+                        className='emoji-picker__item emoticon'
+                        src={EmojiStore.getEmojiImageUrl(this.props.emoji)}
+                    />
+                </span>
+            );
         }
+
         return item;
     }
 }
diff --git a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
index b9f3f4262..991bf4a2d 100644
--- a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
+++ b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx
@@ -22,22 +22,29 @@ export default class EmojiPickerPreview extends React.Component {
             let aliases;
             let previewImage;
 
-            if (emoji.aliases) {
+            if (emoji.aliases && emoji.category) {
                 // This is a system emoji which only has a list of aliases
                 name = emoji.aliases[0];
                 aliases = emoji.aliases;
-                previewImage = (<span className='sprite-preview'><img
-                    src='/static/images/img_trans.gif'
-                    className={'  emojisprite-preview emoji-' + emoji.filename + ' '}
-                                                                 /></span>);
+
+                previewImage = (
+                    <span className='sprite-preview'>
+                        <img
+                            src='/static/images/img_trans.gif'
+                            className={'emojisprite-preview emoji-category-' + emoji.category + ' emoji-' + emoji.filename}
+                        />
+                    </span>
+                );
             } else {
                 // This is a custom emoji that matches the model on the server
                 name = emoji.name;
                 aliases = [emoji.name];
-                previewImage = (<img
-                    className='emoji-picker__preview-image'
-                    src={EmojiStore.getEmojiImageUrl(emoji)}
-                                />);
+                previewImage = (
+                    <img
+                        className='emoji-picker__preview-image'
+                        src={EmojiStore.getEmojiImageUrl(emoji)}
+                    />
+                );
             }
 
             return (
@@ -47,9 +54,9 @@ export default class EmojiPickerPreview extends React.Component {
                     </div>
                     <div className='emoji-picker__preview-image-label-box'>
                         <span className='emoji-picker__preview-name'>{name}</span>
-                        <span
-                            className='emoji-picker__preview-aliases'
-                        >{ ':' + aliases[0] + ':'}</span>
+                        <span className='emoji-picker__preview-aliases'>
+                            {':' + aliases[0] + ':'}
+                        </span>
                     </div>
                 </div>
             );
diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx
index 49050a7d8..56acdec2d 100644
--- a/webapp/components/emoji_picker/emoji_picker.jsx
+++ b/webapp/components/emoji_picker/emoji_picker.jsx
@@ -119,17 +119,23 @@ export default class EmojiPicker extends React.Component {
 
     handleItemOver(emoji) {
         clearTimeout(this.timeouthandler);
-        this.setState({selected: emoji});
+        this.setState({
+            selected: emoji
+        });
     }
 
     handleItemOut() {
-        this.timeouthandler = setTimeout(() => this.setState({selected: null}), 500);
+        this.timeouthandler = setTimeout(() => this.setState({
+            selected: null
+        }), 500);
     }
 
     handleItemUnmount(emoji) {
         // Prevent emoji preview from showing emoji which is not present anymore (due to filter)
         if (this.state.selected === emoji) {
-            this.setState({selected: null});
+            this.setState({
+                selected: null
+            });
         }
     }
 
@@ -235,9 +241,7 @@ export default class EmojiPicker extends React.Component {
         let header = null;
         if (items.length > 0) {
             header = (
-                <div
-                    className='emoji-picker__category-header'
-                >
+                <div className='emoji-picker__category-header'>
                     <FormattedMessage id={'emoji_picker.' + category}/>
                 </div>
             );
@@ -257,56 +261,6 @@ export default class EmojiPicker extends React.Component {
         );
     }
 
-    renderPreview(selected) {
-        if (selected) {
-            let name;
-            let aliases;
-            let previewImage;
-            if (selected.name) {
-                // This is a custom emoji that matches the model on the server
-                name = selected.name;
-                aliases = [selected.name];
-                previewImage = (
-                    <img
-                        className='emoji-picker__preview-image'
-                        align='absmiddle'
-                        src={EmojiStore.getEmojiImageUrl(selected)}
-                    />
-                );
-            } else {
-                // This is a system emoji which only has a list of aliases
-                name = selected.aliases[0];
-                aliases = selected.aliases;
-                previewImage = (
-                    <span>
-                        <img
-                            src='/static/images/img_trans.gif'
-                            className={'  emojisprite-preview emoji-' + selected.filename + ' '}
-                            align='absmiddle'
-                        />
-                    </span>
-                );
-            }
-
-            return (
-                <div className='emoji-picker__preview'>
-                    {previewImage}
-                    <span className='emoji-picker__preview-name'>{name}</span>
-                    <span className='emoji-picker__preview-aliases'>{aliases.map((alias) => ':' + alias + ':').join(' ')}</span>
-                </div>
-            );
-        }
-
-        return (
-            <span className='emoji-picker__preview-placeholder'>
-                <FormattedMessage
-                    id='emoji_picker.emojiPicker'
-                    defaultMessage='Emoji Picker'
-                />
-            </span>
-        );
-    }
-
     render() {
         const items = [];
 
@@ -473,7 +427,9 @@ export default class EmojiPicker extends React.Component {
                 >
                     {items}
                 </div>
-                <EmojiPickerPreview emoji={this.state.selected}/>
+                <EmojiPickerPreview
+                    emoji={this.state.selected}
+                />
             </div>
         );
     }