From 573ef818f5fe5f74adc904af69d3042df68adfcf Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Thu, 7 Jul 2016 17:05:37 -0400
Subject: [PATCH] List emoticons in emoji preview Ignore when same but
 lowercase/uppercase

---
 css/emoji-picker.css      |  9 ++++++++-
 src/components/preview.js | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/css/emoji-picker.css b/css/emoji-picker.css
index eadf3df..48d13ce 100644
--- a/css/emoji-picker.css
+++ b/css/emoji-picker.css
@@ -170,10 +170,17 @@
   font-size: 12px;
   color: #888;
 }
-.emoji-picker-preview-shortname + .emoji-picker-preview-shortname {
+.emoji-picker-preview-shortname + .emoji-picker-preview-shortname,
+.emoji-picker-preview-shortname + .emoji-picker-preview-emoticon,
+.emoji-picker-preview-emoticon + .emoji-picker-preview-emoticon {
   margin-left: .5em;
 }
 
+.emoji-picker-preview-emoticon {
+  font-size: 11px;
+  color: #bbb;
+}
+
 .emoji-picker-title span {
   display: inline-block;
   vertical-align: middle;
diff --git a/src/components/preview.js b/src/components/preview.js
index 9f3e3b0..d8f678c 100644
--- a/src/components/preview.js
+++ b/src/components/preview.js
@@ -12,6 +12,22 @@ export default class Preview extends React.Component {
         { emojiProps, skinsProps } = this.props
 
     if (emoji) {
+      var { text, texts } = emoji,
+          knownEmoticons = [],
+          emoticons = []
+
+      texts || (texts = [])
+      if (text && !texts.length) {
+        texts = [text]
+      }
+
+      for (let text of texts) {
+        if (knownEmoticons.indexOf(text.toLowerCase()) == -1) {
+          knownEmoticons.push(text.toLowerCase())
+          emoticons.push(text)
+        }
+      }
+
       return <div className='emoji-picker-preview'>
         <div className='emoji-picker-preview-emoji'>
           <Emoji
@@ -26,6 +42,9 @@ export default class Preview extends React.Component {
           <span className='emoji-picker-preview-shortnames'>
             {emoji.short_names.map((short_name) =>
               <span key={short_name} className='emoji-picker-preview-shortname'>:{short_name}:</span>
+            )}<br />
+            {emoticons.map((emoticon) =>
+              <span key={emoticon} className='emoji-picker-preview-emoticon'>{emoticon}</span>
             )}
           </span>
         </div>