From 6d095a072c4a7e80c4645ec2550297d5a15cd542 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etiennelemay21@gmail.com>
Date: Tue, 9 Jan 2018 15:14:54 -0500
Subject: [PATCH] Add `html` props to Emoji component [Ref #79]

---
 README.md               | 15 +++++++++++++
 src/components/emoji.js | 49 +++++++++++++++++++++++++++++++----------
 stories/index.js        |  1 +
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index dae87b9..0b6dc2c 100644
--- a/README.md
+++ b/README.md
@@ -155,6 +155,7 @@ import { Emoji } from 'emoji-mart'
 | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
 | **tooltip** | | `false` | Show emoji short name when hovering (title) |
+| [**html**](#using-with-dangerouslySetInnerHTML) | | `false` | Returns an HTML string to use with `dangerouslySetInnerHTML` |
 
 #### Unsupported emojis fallback
 Certain sets don’t support all emojis (i.e. Messenger & Facebook don’t support `:shrug:`). By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props.
@@ -172,6 +173,20 @@ To have the component render `:shrug:` you would need to:
 />
 ```
 
+#### Using with `dangerouslySetInnerHTML`
+The Emoji component being a [functional component](https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f), you can call it as you would call any function instead of using JSX. Make sure you pass `html: true` for it to return an HTML string.
+
+```js
+<span dangerouslySetInnerHTML={{
+  __html: Emoji({
+    html: true
+    set: 'apple'
+    emoji: '+1'
+    size: 24
+  })
+}}></span>
+```
+
 ## Custom emojis
 You can provide custom emojis which will show up in their own category.
 
diff --git a/src/components/emoji.js b/src/components/emoji.js
index 6e950a1..811f811 100644
--- a/src/components/emoji.js
+++ b/src/components/emoji.js
@@ -53,6 +53,26 @@ const _handleLeave = (e, props) => {
   onLeave(emoji, e)
 }
 
+const _isNumeric = (value) => {
+  return !isNaN(value - parseFloat(value))
+}
+
+const _convertStyleToCSS = (style) => {
+  let div = document.createElement('div')
+
+  for (let key in style) {
+    let value = style[key]
+
+    if (_isNumeric(value)) {
+      value += 'px'
+    }
+
+    div.style[key] = value
+  }
+
+  return div.getAttribute('style')
+}
+
 const Emoji = props => {
   for (let k in Emoji.defaultProps) {
     if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
@@ -123,18 +143,23 @@ const Emoji = props => {
     }
   }
 
-  return (
-    <span
-      key={props.emoji.id || props.emoji}
-      onClick={e => _handleClick(e, props)}
-      onMouseEnter={e => _handleOver(e, props)}
-      onMouseLeave={e => _handleLeave(e, props)}
-      title={title}
-      className={className}
-    >
-      <span style={style}>{children}</span>
-    </span>
-  )
+  if (props.html) {
+    style = _convertStyleToCSS(style)
+    return `<span style='${style}' ${title ? `title='${title}'` : ''} class='${className}'>${children || ''}</span>`
+  } else {
+    return (
+      <span
+        key={props.emoji.id || props.emoji}
+        onClick={e => _handleClick(e, props)}
+        onMouseEnter={e => _handleOver(e, props)}
+        onMouseLeave={e => _handleLeave(e, props)}
+        title={title}
+        className={className}
+      >
+        <span style={style}>{children}</span>
+      </span>
+    )
+  }
 }
 
 Emoji.propTypes = {
diff --git a/stories/index.js b/stories/index.js
index 50c0ff9..fffc4ad 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -50,6 +50,7 @@ storiesOf('Emoji', module)
       emoji={text('Emoji', '+1')}
       size={number('Emoji size', 64)}
       skin={number('Skin tone', 1)}
+      html={boolean('HTML', false)}
       fallback={(emoji) => {
         return `:${emoji.short_names[0]}:`
       }}