Merge pull request #251 from Kennybll/master

Adds Spritesheets for Custom Emojis
missive · Dec 3, 2018 · 993074f · 993074f
2 parents 3482a56 + 2ff225b
commit 993074f
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -220,7 +220,7 @@ Following the `dangerouslySetInnerHTML` example above, make sure the wrapping `s
 ```
 
 ## Custom emojis
-You can provide custom emojis which will show up in their own category.
+You can provide custom emojis which will show up in their own category. You can either use a single image as imageUrl or use a spritesheet as shown in the second object.
 
 ```js
 import { Picker } from 'emoji-mart'
@@ -234,6 +234,19 @@ const customEmojis = [
     keywords: ['github'],
     imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
   },
+  {
+    name: 'Test Flag',
+    short_names: ['test'],
+    text: '',
+    emoticons: [],
+    keywords: ['test', 'flag'],
+    spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
+    sheet_x: 1,
+    sheet_y: 1,
+    size: 64,
+    sheetColumns: 52,
+    sheetRows: 52,
+  },
 ]
 
 <Picker custom={customEmojis} />

diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.js b/docs/index.js
@@ -22,6 +22,17 @@ const CUSTOM_EMOJIS = [
     keywords: ['github'],
     imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
   },
+  {
+    name: 'Test Flag',
+    short_names: ['test'],
+    keywords: ['test', 'flag'],
+    spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
+    sheet_x: 1,
+    sheet_y: 1,
+    size: 64,
+    sheetColumns: 52,
+    sheetRows: 52,
+  },
 ]
 
 class Example extends React.Component {

diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
@@ -127,8 +127,21 @@ const NimbleEmoji = (props) => {
       width: props.size,
       height: props.size,
       display: 'inline-block',
-      backgroundImage: `url(${imageUrl})`,
-      backgroundSize: 'contain',
+    }
+    if (data.spriteUrl) {
+      style = {
+        ...style,
+        backgroundImage: `url(${data.spriteUrl})`,
+        backgroundSize: `${100 * props.sheetColumns}% ${100 *
+          props.sheetRows}%`,
+        backgroundPosition: _getPosition(props),
+      }
+    } else {
+      style = {
+        ...style,
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: 'contain',
+      }
     }
   } else {
     let setHasEmoji =
@@ -149,7 +162,8 @@ const NimbleEmoji = (props) => {
           props.set,
           props.sheetSize,
         )})`,
-        backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`,
+        backgroundSize: `${100 * props.sheetColumns}% ${100 *
+          props.sheetRows}%`,
         backgroundPosition: _getPosition(props),
       }
     }