PLT-7262 Stopped including emoji sprite sheets multiple times in CSS (#7077)

* PLT-7262 Stopped including emoji sprite sheets multiple times in CSS

* Changed EmojiPickerItem to be a PureComponent

webapp/components/emoji_picker/components/emoji_picker_item.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import EmojiStore from 'stores/emoji_store.jsx';
 
-export default class EmojiPickerItem extends React.Component {
+export default class EmojiPickerItem extends React.PureComponent {
     static propTypes = {
         emoji: PropTypes.object.isRequired,
         onItemOver: PropTypes.func.isRequired,
@@ -46,29 +46,41 @@ export default class EmojiPickerItem extends React.Component {
         let item = null;
 
         if (this.props.category === 'recent' || this.props.category === 'custom') {
-            item =
+            item = (
-                (<span
+                <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>);
+                </span>
+            );
         } else {
-            item =
+            let className;
-                (<div >
+            if (this.props.isLoaded) {
+                className = 'emojisprite';
+            } else {
+                className = 'emojisprite-loading';
+            }
+
+            className += ' emoji-category-' + this.props.category;
+            className += ' emoji-' + this.props.emoji.filename;
+
+            item = (
+                <div>
                     <img
                         src='/static/images/img_trans.gif'
-                        className={'  emojisprite' + (this.props.isLoaded ? '' : '-loading') + ' emoji-' + this.props.emoji.filename + ' '}
+                        className={className}
                         onMouseOver={this.handleMouseOver}
                         onMouseOut={this.handleMouseOut}
                         onClick={this.handleClick}
                     />
-                </div>);
+                </div>
+            );
         }
         return item;
     }

webapp/make-emojis

@@ -165,6 +165,8 @@ categories.each do |category|
         end
     end
 
+    css_rules << ".emoji-category-#{category} { background-image: url('../images/emoji-sheets/#{category}.png'); }"
+
     SpriteFactory.run!(
         tmp_directory,
         :layout => :packed,
@@ -175,9 +177,9 @@ categories.each do |category|
     ) do |images|
         images.each do |name, image|
             if image[:cssw] != 64 || image[:cssh] != 64
-                css_rules << ".emoji-#{name} { background-image: url(../images/emoji-sheets/#{category}.png); background-position: -#{image[:cssx]}px -#{image[:cssy]}px; width: #{image[:cssw]}px; height: #{image[:cssh]}px; }"
+                css_rules << ".emoji-#{name} { background-position: -#{image[:cssx]}px -#{image[:cssy]}px; width: #{image[:cssw]}px; height: #{image[:cssh]}px; }"
             else
-                css_rules << ".emoji-#{name} { background-image: url(../images/emoji-sheets/#{category}.png); background-position: -#{image[:cssx]}px -#{image[:cssy]}px; }"
+                css_rules << ".emoji-#{name} { background-position: -#{image[:cssx]}px -#{image[:cssy]}px; }"
             end
         end
     end