Add data property to any components that import data.js, and use that under the hood

src/components/category.js

@@ -3,12 +3,14 @@ import PropTypes from 'prop-types'
 
 import frequently from '../utils/frequently'
 import { getData } from '../utils'
-import { Emoji } from '.'
+import { CategoryPropTypes, CategoryDefaultProps } from '../utils/shared-props'
+import NimbleEmoji from './emoji'
 
-export default class Category extends React.Component {
+export default class NimbleCategory extends React.Component {
   constructor(props) {
     super(props)
 
+    this.data = props.data
     this.setContainerRef = this.setContainerRef.bind(this)
     this.setLabelRef = this.setLabelRef.bind(this)
   }
@@ -109,7 +111,7 @@ export default class Category extends React.Component {
 
             return id
           })
-          .filter((id) => !!getData(id))
+          .filter((id) => !!getData(id, null, null, this.data))
       }
 
       if (emojis.length === 0 && frequentlyUsed.length > 0) {
@@ -184,13 +186,14 @@ export default class Category extends React.Component {
         </div>
 
         {emojis &&
-          emojis.map((emoji) => Emoji({ emoji: emoji, ...emojiProps }))}
+          emojis.map((emoji) => NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps }))}
 
         {emojis &&
           !emojis.length && (
             <div>
               <div>
-                {Emoji({
+                {NimbleEmoji({
+                  data: this.data,
                   ...emojiProps,
                   size: 38,
                   emoji: 'sleuth_or_spy',
@@ -208,17 +211,5 @@ export default class Category extends React.Component {
   }
 }
 
-Category.propTypes = {
+NimbleCategory.propTypes = { ...CategoryPropTypes, data: PropTypes.object.isRequired }
-  emojis: PropTypes.array,
+NimbleCategory.defaultProps = CategoryDefaultProps
-  hasStickyPosition: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  native: PropTypes.bool.isRequired,
-  perLine: PropTypes.number.isRequired,
-  emojiProps: PropTypes.object.isRequired,
-  recent: PropTypes.arrayOf(PropTypes.string),
-}
-
-Category.defaultProps = {
-  emojis: [],
-  hasStickyPosition: true,
-}

src/components/emoji.js

@@ -1,11 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import data from '../data'
 
 import { getData, getSanitizedData, unifiedToNative } from '../utils'
+import { EmojiPropTypes, EmojiDefaultProps } from '../utils/shared-props'
 
 const SHEET_COLUMNS = 52
 
+const _getData = (props) => {
+  var { emoji, skin, set, data } = props
+  return getData(emoji, skin, set, data)
+}
+
 const _getPosition = (props) => {
   var { sheet_x, sheet_y } = _getData(props),
     multiply = 100 / (SHEET_COLUMNS - 1)
@@ -13,14 +18,9 @@ const _getPosition = (props) => {
   return `${multiply * sheet_x}% ${multiply * sheet_y}%`
 }
 
-const _getData = (props) => {
-  var { emoji, skin, set } = props
-  return getData(emoji, skin, set)
-}
-
 const _getSanitizedData = (props) => {
-  var { emoji, skin, set } = props
+  var { emoji, skin, set, data } = props
-  return getSanitizedData(emoji, skin, set)
+  return getSanitizedData(emoji, skin, set, data)
 }
 
 const _handleClick = (e, props) => {
@@ -73,10 +73,10 @@ const _convertStyleToCSS = (style) => {
   return div.getAttribute('style')
 }
 
-const Emoji = (props) => {
+const NimbleEmoji = (props) => {
-  for (let k in Emoji.defaultProps) {
+  for (let k in NimbleEmoji.defaultProps) {
-    if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
+    if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) {
-      props[k] = Emoji.defaultProps[k]
+      props[k] = NimbleEmoji.defaultProps[k]
     }
   }
 
@@ -163,41 +163,7 @@ const Emoji = (props) => {
   }
 }
 
-Emoji.propTypes = {
+NimbleEmoji.propTypes = { ...EmojiPropTypes, data: PropTypes.object.isRequired }
-  onOver: PropTypes.func,
+NimbleEmoji.defaultProps = EmojiDefaultProps
-  onLeave: PropTypes.func,
-  onClick: PropTypes.func,
-  fallback: PropTypes.func,
-  backgroundImageFn: PropTypes.func,
-  native: PropTypes.bool,
-  forceSize: PropTypes.bool,
-  tooltip: PropTypes.bool,
-  skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
-  sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
-  set: PropTypes.oneOf([
-    'apple',
-    'google',
-    'twitter',
-    'emojione',
-    'messenger',
-    'facebook',
-  ]),
-  size: PropTypes.number.isRequired,
-  emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-}
 
-Emoji.defaultProps = {
+export default NimbleEmoji
-  skin: 1,
-  set: 'apple',
-  sheetSize: 64,
-  native: false,
-  forceSize: false,
-  tooltip: false,
-  backgroundImageFn: (set, sheetSize) =>
-    `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
-  onOver: () => {},
-  onLeave: () => {},
-  onClick: () => {},
-}
-
-export default Emoji

src/components/index.js

@@ -1,7 +1,12 @@
 export { default as Anchors } from './anchors'
-export { default as Category } from './category'
+export { default as Category } from './parent-category'
-export { default as Emoji } from './emoji'
+export { default as Emoji } from './parent-emoji'
-export { default as Picker } from './picker'
+export { default as Picker } from './parent-picker'
-export { default as Preview } from './preview'
+export { default as Preview } from './parent-preview'
-export { default as Search } from './search'
+export { default as Search } from './parent-search'
 export { default as Skins } from './skins'
+export { default as NimbleCategory } from './category'
+export { default as NimbleEmoji } from './emoji'
+export { default as NimblePicker } from './picker'
+export { default as NimblePreview } from './preview'
+export { default as NimbleSearch } from './search'

src/components/parent-category.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { CategoryPropTypes, CategoryDefaultProps } from '../utils/shared-props'
+import NimbleCategory from './category'
+
+export default class Category extends React.Component {
+  render() {
+    return <NimbleCategory {...this.props} {...this.state}/>
+  }
+}
+
+Category.propTypes = { ...CategoryPropTypes }
+Category.defaultProps = { ...CategoryDefaultProps, data }

src/components/parent-emoji.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { EmojiPropTypes, EmojiDefaultProps } from '../utils/shared-props'
+import NimbleEmoji from './emoji'
+
+export default class Emoji extends React.PureComponent {
+  render() {
+    return <NimbleEmoji {...this.props} {...this.state}/>
+  }
+}
+
+Emoji.propTypes = EmojiPropTypes
+Emoji.defaultProps = { ...EmojiDefaultProps, data }

src/components/parent-picker.js

@@ -0,0 +1,15 @@
+import '../vendor/raf-polyfill'
+
+import React from 'react'
+import data from '../data'
+import { PickerPropTypes, PickerDefaultProps } from '../utils/shared-props'
+import NimblePicker from './picker'
+
+export default class Picker extends React.PureComponent {
+  render() {
+    return <NimblePicker {...this.props} {...this.state}/>
+  }
+}
+
+Picker.propTypes = PickerPropTypes
+Picker.defaultProps = { ...PickerDefaultProps, data }

src/components/parent-preview.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { PreviewPropTypes, PreviewDefaultProps } from '../utils/shared-props'
+import NimblePreview from './preview'
+
+export default class Preview extends React.PureComponent {
+  render() {
+    return <NimblePreview {...this.props} {...this.state}/>
+  }
+}
+
+Preview.propTypes = PreviewPropTypes
+Preview.defaultProps = { ...PreviewDefaultProps, data }

src/components/parent-search.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { SearchPropTypes, SearchDefaultProps } from '../utils/shared-props'
+import NimbleSearch from './search'
+
+export default class Search extends React.PureComponent {
+  render() {
+    return <NimbleSearch {...this.props} {...this.state}/>
+  }
+}
+
+Search.propTypes = SearchPropTypes
+Search.defaultProps = { ...SearchDefaultProps, data }

src/components/picker.js

@@ -2,13 +2,13 @@ import '../vendor/raf-polyfill'
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import data from '../data'
 
 import store from '../utils/store'
 import frequently from '../utils/frequently'
 import { deepMerge, measureScrollbar } from '../utils'
+import { PickerPropTypes, PickerDefaultProps } from '../utils/shared-props'
 
-import { Anchors, Category, Emoji, Preview, Search } from '.'
+import { Anchors, NimbleCategory, NimblePreview, NimbleSearch } from '.'
 
 const I18N = {
   search: 'Search',
@@ -28,7 +28,7 @@ const I18N = {
   },
 }
 
-export default class Picker extends React.PureComponent {
+export default class NimblePicker extends React.PureComponent {
   constructor(props) {
     super(props)
 
@@ -41,6 +41,7 @@ export default class Picker extends React.PureComponent {
       anchor: false,
     }
 
+    this.data = props.data
     this.i18n = deepMerge(I18N, props.i18n)
     this.state = {
       skin: props.skin || store.get('skin') || props.defaultSkin,
@@ -48,7 +49,7 @@ export default class Picker extends React.PureComponent {
     }
 
     this.categories = []
-    let allCategories = [].concat(data.categories)
+    let allCategories = [].concat(this.data.categories)
 
     if (props.custom.length > 0) {
       this.CUSTOM_CATEGORY.emojis = props.custom.map((emoji) => {
@@ -99,7 +100,7 @@ export default class Picker extends React.PureComponent {
         const { emojis } = category
         for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex++) {
           const emoji = emojis[emojiIndex]
-          if (props.emojisToShowFilter(data.emojis[emoji] || emoji)) {
+          if (props.emojisToShowFilter(this.data.emojis[emoji] || emoji)) {
             newEmojis.push(emoji)
           }
         }
@@ -474,6 +475,7 @@ export default class Picker extends React.PureComponent {
         <div className="emoji-mart-bar">
           <Anchors
             ref={this.setAnchorsRef}
+            data={this.data}
             i18n={this.i18n}
             color={color}
             categories={this.categories}
@@ -481,9 +483,10 @@ export default class Picker extends React.PureComponent {
           />
         </div>
 
-        <Search
+        <NimbleSearch
           ref={this.setSearchRef}
           onSearch={this.handleSearch}
+          data={this.data}
           i18n={this.i18n}
           emojisToShowFilter={emojisToShowFilter}
           include={include}
@@ -499,7 +502,7 @@ export default class Picker extends React.PureComponent {
         >
           {this.getCategories().map((category, i) => {
             return (
-              <Category
+              <NimbleCategory
                 ref={this.setCategoryRef.bind(this, `category-${i}`)}
                 key={category.name}
                 id={category.id}
@@ -508,6 +511,7 @@ export default class Picker extends React.PureComponent {
                 perLine={perLine}
                 native={native}
                 hasStickyPosition={this.hasStickyPosition}
+                data={this.data}
                 i18n={this.i18n}
                 recent={
                   category.id == this.RECENT_CATEGORY.id ? recent : undefined
@@ -537,8 +541,9 @@ export default class Picker extends React.PureComponent {
 
         {showPreview && (
           <div className="emoji-mart-bar">
-            <Preview
+            <NimblePreview
               ref={this.setPreviewRef}
+              data={this.data}
               title={title}
               emoji={emoji}
               showSkinTones={showSkinTones}
@@ -562,62 +567,5 @@ export default class Picker extends React.PureComponent {
   }
 }
 
-Picker.propTypes = {
+NimblePicker.propTypes = { ...PickerPropTypes, data: PropTypes.object.isRequired }
-  onClick: PropTypes.func,
+NimblePicker.defaultProps = { ...PickerDefaultProps }
-  onSelect: PropTypes.func,
-  onSkinChange: PropTypes.func,
-  perLine: PropTypes.number,
-  emojiSize: PropTypes.number,
-  i18n: PropTypes.object,
-  style: PropTypes.object,
-  title: PropTypes.string,
-  emoji: PropTypes.string,
-  color: PropTypes.string,
-  set: Emoji.propTypes.set,
-  skin: Emoji.propTypes.skin,
-  native: PropTypes.bool,
-  backgroundImageFn: Emoji.propTypes.backgroundImageFn,
-  sheetSize: Emoji.propTypes.sheetSize,
-  emojisToShowFilter: PropTypes.func,
-  showPreview: PropTypes.bool,
-  showSkinTones: PropTypes.bool,
-  emojiTooltip: Emoji.propTypes.tooltip,
-  include: PropTypes.arrayOf(PropTypes.string),
-  exclude: PropTypes.arrayOf(PropTypes.string),
-  recent: PropTypes.arrayOf(PropTypes.string),
-  autoFocus: PropTypes.bool,
-  custom: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      short_names: PropTypes.arrayOf(PropTypes.string).isRequired,
-      emoticons: PropTypes.arrayOf(PropTypes.string),
-      keywords: PropTypes.arrayOf(PropTypes.string),
-      imageUrl: PropTypes.string.isRequired,
-    }),
-  ),
-}
-
-Picker.defaultProps = {
-  onClick: () => {},
-  onSelect: () => {},
-  onSkinChange: () => {},
-  emojiSize: 24,
-  perLine: 9,
-  i18n: {},
-  style: {},
-  title: 'Emoji Mart™',
-  emoji: 'department_store',
-  color: '#ae65c5',
-  set: Emoji.defaultProps.set,
-  skin: null,
-  defaultSkin: Emoji.defaultProps.skin,
-  native: Emoji.defaultProps.native,
-  sheetSize: Emoji.defaultProps.sheetSize,
-  backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
-  emojisToShowFilter: null,
-  showPreview: true,
-  showSkinTones: true,
-  emojiTooltip: Emoji.defaultProps.tooltip,
-  autoFocus: false,
-  custom: [],
-}

src/components/preview.js

@@ -1,12 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Emoji, Skins } from '.'
+import { PreviewPropTypes, PreviewDefaultProps } from '../utils/shared-props'
+import { NimbleEmoji, Skins } from '.'
 import { getData } from '../utils'
 
-export default class Preview extends React.PureComponent {
+export default class NimblePreview extends React.PureComponent {
   constructor(props) {
     super(props)
+
+    this.data = props.data
     this.state = { emoji: null }
   }
 
@@ -21,7 +24,7 @@ export default class Preview extends React.PureComponent {
       } = this.props
 
     if (emoji) {
-      var emojiData = getData(emoji),
+      var emojiData = getData(emoji, null, null, this.data),
         { emoticons = [] } = emojiData,
         knownEmoticons = [],
         listedEmoticons = []
@@ -38,7 +41,7 @@ export default class Preview extends React.PureComponent {
       return (
         <div className="emoji-mart-preview">
           <div className="emoji-mart-preview-emoji">
-            {Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })}
+            {NimbleEmoji({ key: emoji.id, emoji: emoji, data: this.data, ...emojiProps })}
           </div>
 
           <div className="emoji-mart-preview-data">
@@ -66,7 +69,7 @@ export default class Preview extends React.PureComponent {
           <div className="emoji-mart-preview-emoji">
             {idleEmoji &&
               idleEmoji.length &&
-              Emoji({ emoji: idleEmoji, ...emojiProps })}
+              NimbleEmoji({ emoji: idleEmoji, data: this.data, ...emojiProps })}
           </div>
 
           <div className="emoji-mart-preview-data">
@@ -84,15 +87,5 @@ export default class Preview extends React.PureComponent {
   }
 }
 
-Preview.propTypes = {
+NimblePreview.propTypes = { ...PreviewPropTypes, data: PropTypes.object.isRequired }
-  showSkinTones: PropTypes.bool,
+NimblePreview.defaultProps = PreviewDefaultProps
-  title: PropTypes.string.isRequired,
-  emoji: PropTypes.string.isRequired,
-  emojiProps: PropTypes.object.isRequired,
-  skinsProps: PropTypes.object.isRequired,
-}
-
-Preview.defaultProps = {
-  showSkinTones: true,
-  onChange: () => {},
-}

src/components/search.js

@@ -1,11 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import emojiIndex from '../utils/emoji-index'
+import NimbleEmojiIndex from '../utils/emoji-index'
+import { SearchPropTypes, SearchDefaultProps } from '../utils/shared-props'
 
-export default class Search extends React.PureComponent {
+export default class NimbleSearch extends React.PureComponent {
   constructor(props) {
     super(props)
 
+    this.data = props.data
+    this.emojiIndex = new NimbleEmojiIndex(this.data)
     this.setRef = this.setRef.bind(this)
     this.handleChange = this.handleChange.bind(this)
   }
@@ -14,7 +17,7 @@ export default class Search extends React.PureComponent {
     var value = this.input.value
 
     this.props.onSearch(
-      emojiIndex.search(value, {
+      this.emojiIndex.search(value, {
         emojisToShowFilter: this.props.emojisToShowFilter,
         maxResults: this.props.maxResults,
         include: this.props.include,
@@ -49,16 +52,5 @@ export default class Search extends React.PureComponent {
   }
 }
 
-Search.propTypes = {
+NimbleSearch.propTypes = { ...SearchPropTypes, data: PropTypes.object.isRequired }
-  onSearch: PropTypes.func,
+NimbleSearch.defaultProps = SearchDefaultProps
-  maxResults: PropTypes.number,
-  emojisToShowFilter: PropTypes.func,
-  autoFocus: PropTypes.bool,
-}
-
-Search.defaultProps = {
-  onSearch: () => {},
-  maxResults: 75,
-  emojisToShowFilter: null,
-  autoFocus: false,
-}

src/index.js

@@ -1,4 +1,4 @@
-import emojiIndex from './utils/emoji-index'
+import emojiIndex from './utils/parent-emoji-index'
 import store from './utils/store'
 import frequently from './utils/frequently'
 

src/utils/emoji-index.js

@@ -1,180 +1,187 @@
-import data from '../data'
 import { getData, getSanitizedData, intersect } from '.'
 
-var originalPool = {}
+export default class NimbleEmojiIndex {
-var index = {}
+  constructor(data) {
-var emojisList = {}
+    this.data = data || {}
-var emoticonsList = {}
+    this.originalPool = {}
-var customEmojisList = []
+    this.index = {}
+    this.emojis = {}
+    this.emoticons = {}
+    this.customEmojisList = []
 
-for (let emoji in data.emojis) {
+    this.buildIndex()
-  let emojiData = data.emojis[emoji],
+  }
-    { short_names, emoticons } = emojiData,
-    id = short_names[0]
 
-  if (emoticons) {
+  buildIndex() {
-    emoticons.forEach((emoticon) => {
+    for (let emoji in this.data.emojis) {
-      if (emoticonsList[emoticon]) {
+      let emojiData = this.data.emojis[emoji],
-        return
+        { short_names, emoticons } = emojiData,
+        id = short_names[0]
+
+      if (emoticons) {
+        emoticons.forEach((emoticon) => {
+          if (this.emoticons[emoticon]) {
+            return
+          }
+
+          this.emoticons[emoticon] = id
+        })
       }
 
-      emoticonsList[emoticon] = id
+      this.emojis[id] = getSanitizedData(id, null, null, this.data)
+      this.originalPool[id] = emojiData
+    }
+  }
+
+  clearCustomEmojis(pool) {
+    this.customEmojisList.forEach((emoji) => {
+      let emojiId = emoji.id || emoji.short_names[0]
+  
+      delete pool[emojiId]
+      delete emojisList[emojiId]
     })
   }
 
-  emojisList[id] = getSanitizedData(id)
+  addCustomToPool(custom, pool) {
-  originalPool[id] = emojiData
+    if (this.customEmojisList.length) this.clearCustomEmojis(pool)
-}
 
-function clearCustomEmojis(pool) {
+    custom.forEach((emoji) => {
-  customEmojisList.forEach((emoji) => {
+      let emojiId = emoji.id || emoji.short_names[0]
-    let emojiId = emoji.id || emoji.short_names[0]
 
-    delete pool[emojiId]
+      if (emojiId && !pool[emojiId]) {
-    delete emojisList[emojiId]
+        pool[emojiId] = getData(emoji, null, null, this.data)
-  })
+        this.emojis[emojiId] = getSanitizedData(emoji, null, null, this.data)
-}
+      }
+    })
+  
+    this.customEmojisList = custom
+    this.index = {}
+  }
 
-function addCustomToPool(custom, pool) {
+  search(
-  if (customEmojisList.length) clearCustomEmojis(pool)
+    value,
+    { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {},
+  ) {
+    if (this.customEmojisList != custom) this.addCustomToPool(custom, this.originalPool)
 
-  custom.forEach((emoji) => {
+    maxResults || (maxResults = 75)
-    let emojiId = emoji.id || emoji.short_names[0]
+    include || (include = [])
+    exclude || (exclude = [])
 
-    if (emojiId && !pool[emojiId]) {
+    var results = null,
-      pool[emojiId] = getData(emoji)
+      pool = this.originalPool
-      emojisList[emojiId] = getSanitizedData(emoji)
-    }
-  })
 
-  customEmojisList = custom
+    if (value.length) {
-  index = {}
+      if (value == '-' || value == '-1') {
-}
+        return [this.emojis['-1']]
+      }
 
-function search(
+      var values = value.toLowerCase().split(/[\s|,|\-|_]+/),
-  value,
+        allResults = []
-  { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {},
-) {
-  if (customEmojisList != custom) addCustomToPool(custom, originalPool)
 
-  maxResults || (maxResults = 75)
+      if (values.length > 2) {
-  include || (include = [])
+        values = [values[0], values[1]]
-  exclude || (exclude = [])
+      }
 
-  var results = null,
+      if (include.length || exclude.length) {
-    pool = originalPool
+        pool = {}
 
-  if (value.length) {
+        this.data.categories.forEach((category) => {
-    if (value == '-' || value == '-1') {
+          let isIncluded =
-      return [emojisList['-1']]
+            include && include.length ? include.indexOf(category.id) > -1 : true
-    }
+          let isExcluded =
+            exclude && exclude.length ? exclude.indexOf(category.id) > -1 : false
+          if (!isIncluded || isExcluded) {
+            return
+          }
 
-    var values = value.toLowerCase().split(/[\s|,|\-|_]+/),
+          category.emojis.forEach(
-      allResults = []
+            (emojiId) => (pool[emojiId] = this.data.emojis[emojiId]),
+          )
+        })
 
-    if (values.length > 2) {
+        if (custom.length) {
-      values = [values[0], values[1]]
+          let customIsIncluded =
-    }
+            include && include.length ? include.indexOf('custom') > -1 : true
-
+          let customIsExcluded =
-    if (include.length || exclude.length) {
+            exclude && exclude.length ? exclude.indexOf('custom') > -1 : false
-      pool = {}
+          if (customIsIncluded && !customIsExcluded) {
-
+            this.addCustomToPool(custom, pool)
-      data.categories.forEach((category) => {
+          }
-        let isIncluded =
-          include && include.length ? include.indexOf(category.id) > -1 : true
-        let isExcluded =
-          exclude && exclude.length ? exclude.indexOf(category.id) > -1 : false
-        if (!isIncluded || isExcluded) {
-          return
         }
+      }
 
-        category.emojis.forEach(
+      allResults = values
-          (emojiId) => (pool[emojiId] = data.emojis[emojiId]),
+        .map((value) => {
-        )
+          var aPool = pool,
-      })
+            aIndex = this.index,
+            length = 0
 
-      if (custom.length) {
+          for (let charIndex = 0; charIndex < value.length; charIndex++) {
-        let customIsIncluded =
+            const char = value[charIndex]
-          include && include.length ? include.indexOf('custom') > -1 : true
+            length++
-        let customIsExcluded =
+
-          exclude && exclude.length ? exclude.indexOf('custom') > -1 : false
+            aIndex[char] || (aIndex[char] = {})
-        if (customIsIncluded && !customIsExcluded) {
+            aIndex = aIndex[char]
-          addCustomToPool(custom, pool)
+
-        }
+            if (!aIndex.results) {
+              let scores = {}
+
+              aIndex.results = []
+              aIndex.pool = {}
+
+              for (let id in aPool) {
+                let emoji = aPool[id],
+                  { search } = emoji,
+                  sub = value.substr(0, length),
+                  subIndex = search.indexOf(sub)
+
+                if (subIndex != -1) {
+                  let score = subIndex + 1
+                  if (sub == id) score = 0
+
+                  aIndex.results.push(this.emojis[id])
+                  aIndex.pool[id] = emoji
+
+                  scores[id] = score
+                }
+              }
+
+              aIndex.results.sort((a, b) => {
+                var aScore = scores[a.id],
+                  bScore = scores[b.id]
+
+                return aScore - bScore
+              })
+            }
+
+            aPool = aIndex.pool
+          }
+
+          return aIndex.results
+        })
+        .filter((a) => a)
+
+      if (allResults.length > 1) {
+        results = intersect.apply(null, allResults)
+      } else if (allResults.length) {
+        results = allResults[0]
+      } else {
+        results = []
       }
     }
 
-    allResults = values
+    if (results) {
-      .map((value) => {
+      if (emojisToShowFilter) {
-        var aPool = pool,
+        results = results.filter((result) => emojisToShowFilter(pool[result.id]))
-          aIndex = index,
+      }
-          length = 0
 
-        for (let charIndex = 0; charIndex < value.length; charIndex++) {
+      if (results && results.length > maxResults) {
-          const char = value[charIndex]
+        results = results.slice(0, maxResults)
-          length++
+      }
-
-          aIndex[char] || (aIndex[char] = {})
-          aIndex = aIndex[char]
-
-          if (!aIndex.results) {
-            let scores = {}
-
-            aIndex.results = []
-            aIndex.pool = {}
-
-            for (let id in aPool) {
-              let emoji = aPool[id],
-                { search } = emoji,
-                sub = value.substr(0, length),
-                subIndex = search.indexOf(sub)
-
-              if (subIndex != -1) {
-                let score = subIndex + 1
-                if (sub == id) score = 0
-
-                aIndex.results.push(emojisList[id])
-                aIndex.pool[id] = emoji
-
-                scores[id] = score
-              }
-            }
-
-            aIndex.results.sort((a, b) => {
-              var aScore = scores[a.id],
-                bScore = scores[b.id]
-
-              return aScore - bScore
-            })
-          }
-
-          aPool = aIndex.pool
-        }
-
-        return aIndex.results
-      })
-      .filter((a) => a)
-
-    if (allResults.length > 1) {
-      results = intersect.apply(null, allResults)
-    } else if (allResults.length) {
-      results = allResults[0]
-    } else {
-      results = []
     }
+
+    return results
   }
-
-  if (results) {
-    if (emojisToShowFilter) {
-      results = results.filter((result) => emojisToShowFilter(pool[result.id]))
-    }
-
-    if (results && results.length > maxResults) {
-      results = results.slice(0, maxResults)
-    }
-  }
-
-  return results
 }
 
-export default { search, emojis: emojisList, emoticons: emoticonsList }

src/utils/index.js

@@ -1,5 +1,4 @@
 import buildSearch from './build-search'
-import data from '../data'
 import stringFromCodePoint from '../polyfills/stringFromCodePoint'
 
 const _JSON = JSON
@@ -58,7 +57,7 @@ function getSanitizedData() {
   return sanitize(getData(...arguments))
 }
 
-function getData(emoji, skin, set) {
+function getData(emoji, skin, set, data) {
   var emojiData = {}
 
   if (typeof emoji == 'string') {
@@ -68,7 +67,7 @@ function getData(emoji, skin, set) {
       emoji = matches[1]
 
       if (matches[2]) {
-        skin = parseInt(matches[2])
+        skin = parseInt(matches[2], 10)
       }
     }
 

src/utils/parent-emoji-index.js

@@ -0,0 +1,12 @@
+import data from '../data'
+import NimbleEmojiIndex from './emoji-index'
+
+const emojiIndex = new NimbleEmojiIndex(data)
+const emojis = emojiIndex.emojis
+const emoticons = emojiIndex.emoticons
+
+function search() {
+  return emojiIndex.search(...arguments)
+}
+
+export default { search, emojis, emoticons }

src/utils/shared-props.js

@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types'
+
+const CategoryPropTypes = {
+  emojis: PropTypes.array,
+  hasStickyPosition: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  native: PropTypes.bool.isRequired,
+  perLine: PropTypes.number.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+  recent: PropTypes.arrayOf(PropTypes.string),
+}
+
+const CategoryDefaultProps = {
+  emojis: [],
+  hasStickyPosition: true,
+}
+
+const EmojiPropTypes = {
+  data: PropTypes.object.isRequired,
+  onOver: PropTypes.func,
+  onLeave: PropTypes.func,
+  onClick: PropTypes.func,
+  fallback: PropTypes.func,
+  backgroundImageFn: PropTypes.func,
+  native: PropTypes.bool,
+  forceSize: PropTypes.bool,
+  tooltip: PropTypes.bool,
+  skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+  sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
+  set: PropTypes.oneOf([
+    'apple',
+    'google',
+    'twitter',
+    'emojione',
+    'messenger',
+    'facebook',
+  ]),
+  size: PropTypes.number.isRequired,
+  emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+}
+
+const EmojiDefaultProps = {
+  skin: 1,
+  set: 'apple',
+  sheetSize: 64,
+  native: false,
+  forceSize: false,
+  tooltip: false,
+  backgroundImageFn: (set, sheetSize) =>
+  `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
+  onOver: () => {},
+  onLeave: () => {},
+  onClick: () => {},
+}
+
+const PickerPropTypes = {
+  onClick: PropTypes.func,
+  onSkinChange: PropTypes.func,
+  perLine: PropTypes.number,
+  emojiSize: PropTypes.number,
+  i18n: PropTypes.object,
+  style: PropTypes.object,
+  title: PropTypes.string,
+  emoji: PropTypes.string,
+  color: PropTypes.string,
+  set: EmojiPropTypes.set,
+  skin: EmojiPropTypes.skin,
+  native: PropTypes.bool,
+  backgroundImageFn: EmojiPropTypes.backgroundImageFn,
+  sheetSize: EmojiPropTypes.sheetSize,
+  emojisToShowFilter: PropTypes.func,
+  showPreview: PropTypes.bool,
+  showSkinTones: PropTypes.bool,
+  emojiTooltip: EmojiPropTypes.tooltip,
+  include: PropTypes.arrayOf(PropTypes.string),
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  recent: PropTypes.arrayOf(PropTypes.string),
+  autoFocus: PropTypes.bool,
+  custom: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      short_names: PropTypes.arrayOf(PropTypes.string).isRequired,
+      emoticons: PropTypes.arrayOf(PropTypes.string),
+      keywords: PropTypes.arrayOf(PropTypes.string),
+      imageUrl: PropTypes.string.isRequired,
+    })
+  ),
+}
+
+const PickerDefaultProps = {
+  onClick: () => {},
+  onSkinChange: () => {},
+  emojiSize: 24,
+  perLine: 9,
+  i18n: {},
+  style: {},
+  title: 'Emoji Mart™',
+  emoji: 'department_store',
+  color: '#ae65c5',
+  set: EmojiDefaultProps.set,
+  skin: null,
+  defaultSkin: EmojiDefaultProps.skin,
+  native: EmojiDefaultProps.native,
+  sheetSize: EmojiDefaultProps.sheetSize,
+  backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
+  emojisToShowFilter: null,
+  showPreview: true,
+  showSkinTones: true,
+  emojiTooltip: EmojiDefaultProps.tooltip,
+  autoFocus: false,
+  custom: [],
+}
+
+const PreviewPropTypes = {
+  showSkinTones: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  emoji: PropTypes.string.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+  skinsProps: PropTypes.object.isRequired,
+}
+
+const PreviewDefaultProps = {
+  showSkinTones: true,
+  onChange: () => {},
+}
+
+
+const SearchPropTypes = {
+  onSearch: PropTypes.func,
+  maxResults: PropTypes.number,
+  emojisToShowFilter: PropTypes.func,
+  autoFocus: PropTypes.bool,
+}
+
+const SearchDefaultProps = {
+  onSearch: () => {},
+  maxResults: 75,
+  emojisToShowFilter: null,
+  autoFocus: false,
+}
+
+export {
+  CategoryPropTypes,
+  CategoryDefaultProps,
+  EmojiPropTypes,
+  EmojiDefaultProps,
+  PickerPropTypes,
+  PickerDefaultProps,
+  PreviewPropTypes,
+  PreviewDefaultProps,
+  SearchPropTypes,
+  SearchDefaultProps,
+}