Set RECENT_CATEGORY, CUSTOM_CATEGORY and SEARCH_CATEGORY on Picker instances [Fix #166]

src/components/picker.js

@@ -10,15 +10,6 @@ import { deepMerge, measureScrollbar } from '../utils'
 
 import { Anchors, Category, Emoji, Preview, Search } from '.'
 
-const RECENT_CATEGORY = { id: 'recent', name: 'Recent', emojis: null }
-const SEARCH_CATEGORY = {
-  id: 'search',
-  name: 'Search',
-  emojis: null,
-  anchor: false,
-}
-const CUSTOM_CATEGORY = { id: 'custom', name: 'Custom', emojis: [] }
-
 const I18N = {
   search: 'Search',
   notfound: 'No Emoji Found',
@@ -41,6 +32,15 @@ export default class Picker extends React.PureComponent {
   constructor(props) {
     super(props)
 
+    this.RECENT_CATEGORY = { id: 'recent', name: 'Recent', emojis: null }
+    this.CUSTOM_CATEGORY = { id: 'custom', name: 'Custom', emojis: [] }
+    this.SEARCH_CATEGORY = {
+      id: 'search',
+      name: 'Search',
+      emojis: null,
+      anchor: false,
+    }
+
     this.i18n = deepMerge(I18N, props.i18n)
     this.state = {
       skin: store.get('skin') || props.skin,
@@ -51,7 +51,7 @@ export default class Picker extends React.PureComponent {
     let allCategories = [].concat(data.categories)
 
     if (props.custom.length > 0) {
-      CUSTOM_CATEGORY.emojis = props.custom.map(emoji => {
+      this.CUSTOM_CATEGORY.emojis = props.custom.map(emoji => {
         return {
           ...emoji,
           // `<Category />` expects emoji to have an `id`.
@@ -60,9 +60,7 @@ export default class Picker extends React.PureComponent {
         }
       })
 
-      allCategories.push(CUSTOM_CATEGORY)
+      allCategories.push(this.CUSTOM_CATEGORY)
-    } else if (CUSTOM_CATEGORY.emojis.length > 0) {
-      CUSTOM_CATEGORY.emojis = [];
     }
 
     this.hideRecent = true
@@ -122,22 +120,22 @@ export default class Picker extends React.PureComponent {
 
     let includeRecent =
       props.include && props.include.length
-        ? props.include.indexOf(RECENT_CATEGORY.id) > -1
+        ? props.include.indexOf(this.RECENT_CATEGORY.id) > -1
         : true
     let excludeRecent =
       props.exclude && props.exclude.length
-        ? props.exclude.indexOf(RECENT_CATEGORY.id) > -1
+        ? props.exclude.indexOf(this.RECENT_CATEGORY.id) > -1
         : false
     if (includeRecent && !excludeRecent) {
       this.hideRecent = false
-      this.categories.unshift(RECENT_CATEGORY)
+      this.categories.unshift(this.RECENT_CATEGORY)
     }
 
     if (this.categories[0]) {
       this.categories[0].first = true
     }
 
-    this.categories.unshift(SEARCH_CATEGORY)
+    this.categories.unshift(this.SEARCH_CATEGORY)
 
     this.setAnchorsRef = this.setAnchorsRef.bind(this)
     this.handleAnchorClick = this.handleAnchorClick.bind(this)
@@ -174,7 +172,7 @@ export default class Picker extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    SEARCH_CATEGORY.emojis = null
+    this.SEARCH_CATEGORY.emojis = null
 
     clearTimeout(this.leaveTimeout)
     clearTimeout(this.firstRenderTimeout)
@@ -199,7 +197,7 @@ export default class Picker extends React.PureComponent {
     }
 
     // Use Array.prototype.find() when it is more widely supported.
-    const emojiData = CUSTOM_CATEGORY.emojis.filter(
+    const emojiData = this.CUSTOM_CATEGORY.emojis.filter(
       customEmoji => customEmoji.id === emoji.id
     )[0]
     for (let key in emojiData) {
@@ -240,7 +238,7 @@ export default class Picker extends React.PureComponent {
         this.updateCategoriesSize()
         this.handleScrollPaint()
 
-        if (SEARCH_CATEGORY.emojis) {
+        if (this.SEARCH_CATEGORY.emojis) {
           component.updateDisplay('none')
         }
       })
@@ -263,8 +261,8 @@ export default class Picker extends React.PureComponent {
 
     let activeCategory = null
 
-    if (SEARCH_CATEGORY.emojis) {
+    if (this.SEARCH_CATEGORY.emojis) {
-      activeCategory = SEARCH_CATEGORY
+      activeCategory = this.SEARCH_CATEGORY
     } else {
       var target = this.scroll,
         scrollTop = target.scrollTop,
@@ -313,7 +311,7 @@ export default class Picker extends React.PureComponent {
   }
 
   handleSearch(emojis) {
-    SEARCH_CATEGORY.emojis = emojis
+    this.SEARCH_CATEGORY.emojis = emojis
 
     for (let i = 0, l = this.categories.length; i < l; i++) {
       let component = this.categoryRefs[`category-${i}`]
@@ -348,7 +346,7 @@ export default class Picker extends React.PureComponent {
       }
     }
 
-    if (SEARCH_CATEGORY.emojis) {
+    if (this.SEARCH_CATEGORY.emojis) {
       this.handleSearch(null)
       this.search.clear()
 
@@ -450,7 +448,7 @@ export default class Picker extends React.PureComponent {
           emojisToShowFilter={emojisToShowFilter}
           include={include}
           exclude={exclude}
-          custom={CUSTOM_CATEGORY.emojis}
+          custom={this.CUSTOM_CATEGORY.emojis}
           autoFocus={autoFocus}
         />
 
@@ -471,10 +469,10 @@ export default class Picker extends React.PureComponent {
                 native={native}
                 hasStickyPosition={this.hasStickyPosition}
                 i18n={this.i18n}
-                recent={category.id == RECENT_CATEGORY.id ? recent : undefined}
+                recent={category.id == this.RECENT_CATEGORY.id ? recent : undefined}
                 custom={
-                  category.id == RECENT_CATEGORY.id
+                  category.id == this.RECENT_CATEGORY.id
-                    ? CUSTOM_CATEGORY.emojis
+                    ? this.CUSTOM_CATEGORY.emojis
                     : undefined
                 }
                 emojiProps={{