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 = {
-  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),
-}
-
-Category.defaultProps = {
-  emojis: [],
-  hasStickyPosition: true,
-}
+NimbleCategory.propTypes = { ...CategoryPropTypes, data: PropTypes.object.isRequired }
+NimbleCategory.defaultProps = CategoryDefaultProps

src/components/emoji.js

@@ -1,26 +1,26 @@
 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)
 
   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
-  return getSanitizedData(emoji, skin, set)
+  var { emoji, skin, set, data } = props
+  return getSanitizedData(emoji, skin, set, data)
 }
 
 const _handleClick = (e, props) => {
@@ -73,10 +73,10 @@ const _convertStyleToCSS = (style) => {
   return div.getAttribute('style')
 }
 
-const Emoji = (props) => {
-  for (let k in Emoji.defaultProps) {
-    if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
-      props[k] = Emoji.defaultProps[k]
+const NimbleEmoji = (props) => {
+  for (let k in NimbleEmoji.defaultProps) {
+    if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) {
+      props[k] = NimbleEmoji.defaultProps[k]
     }
   }
 
@@ -163,41 +163,7 @@ const Emoji = (props) => {
   }
 }
 
-Emoji.propTypes = {
-  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,
-}
-
-Emoji.defaultProps = {
-  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: () => {},
-}
+NimbleEmoji.propTypes = { ...EmojiPropTypes, data: PropTypes.object.isRequired }
+NimbleEmoji.defaultProps = EmojiDefaultProps
 
-export default Emoji
+export default NimbleEmoji

src/components/index.js

@@ -1,7 +1,12 @@
 export { default as Anchors } from './anchors'
-export { default as Category } from './category'
-export { default as Emoji } from './emoji'
-export { default as Picker } from './picker'
-export { default as Preview } from './preview'
-export { default as Search } from './search'
+export { default as Category } from './parent-category'
+export { default as Emoji } from './parent-emoji'
+export { default as Picker } from './parent-picker'
+export { default as Preview } from './parent-preview'
+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 }