Upgrade to React 16, do not use deprecated ref syntax

package.json

@@ -22,7 +22,7 @@
     "measure-scrollbar": "^0.1.0"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0-0"
+    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -35,7 +35,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
-    "babel-runtime": "^6.23.0",
+    "babel-runtime": "^6.26.0",
     "emoji-datasource": "^3.0.0",
     "emojilib": "^2.2.1",
     "inflection": "1.10.0",
@@ -46,11 +46,11 @@
     "karma-jasmine": "^1.1.0",
     "karma-webpack": "^2.0.2",
     "mkdirp": "0.5.1",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.6.0",
-    "react": "^15.5.4",
+    "react": "^16.0.0",
-    "react-dom": "^15.5.4",
+    "react-dom": "^16.0.0",
     "rimraf": "2.5.2",
-    "size-limit": "^0.11.1",
+    "size-limit": "^0.11.4",
     "svg-jsx-loader": "^0.0.16",
     "webpack": "1.12.14"
   },

src/components/category.js

@@ -6,8 +6,6 @@ import { Emoji } from '.'
 
 export default class Category extends React.Component {
   componentDidMount() {
-    this.container = this.refs.container
-    this.label = this.refs.label
     this.parent = this.container.parentNode
 
     this.margin = 0
@@ -105,6 +103,14 @@ export default class Category extends React.Component {
     this.container.style.display = display
   }
 
+  setContainerRef(c) {
+    this.container = c
+  }
+
+  setLabelRef(c) {
+    this.label = c
+  }
+
   render() {
     var { name, hasStickyPosition, emojiProps, i18n } = this.props,
         emojis = this.getEmojis(),
@@ -128,9 +134,9 @@ export default class Category extends React.Component {
       }
     }
 
-    return <div ref='container' className={`emoji-mart-category ${emojis && !emojis.length ? 'emoji-mart-no-results' : ''}`} style={containerStyles}>
+    return <div ref={this.setContainerRef.bind(this)} className={`emoji-mart-category ${emojis && !emojis.length ? 'emoji-mart-no-results' : ''}`} style={containerStyles}>
       <div style={labelStyles} data-name={name} className='emoji-mart-category-label'>
-        <span style={labelSpanStyles} ref='label'>{i18n.categories[name.toLowerCase()]}</span>
+        <span style={labelSpanStyles} ref={this.setLabelRef.bind(this)}>{i18n.categories[name.toLowerCase()]}</span>
       </div>
 
       {emojis && emojis.map((emoji) =>

src/components/picker.js

@@ -152,7 +152,7 @@ export default class Picker extends React.Component {
   }
 
   handleEmojiOver(emoji) {
-    var { preview } = this.refs
+    var { preview } = this
     // Use Array.prototype.find() when it is more widely supported.
     const emojiData = CUSTOM_CATEGORY.emojis.filter(customEmoji => customEmoji.id === emoji.id)[0]
     preview.setState({ emoji: Object.assign(emoji, emojiData) })
@@ -161,7 +161,7 @@ export default class Picker extends React.Component {
 
   handleEmojiLeave(emoji) {
     this.leaveTimeout = setTimeout(() => {
-      var { preview } = this.refs
+      var { preview } = this
       preview.setState({ emoji: null })
     }, 16)
   }
@@ -170,7 +170,7 @@ export default class Picker extends React.Component {
     this.props.onClick(emoji, e)
     if (!this.hideRecent) frequently.add(emoji)
 
-    var component = this.refs['category-1']
+    var component = this.categoryRefs['category-1']
     if (component) {
       let maxMargin = component.maxMargin
       component.forceUpdate()
@@ -199,7 +199,7 @@ export default class Picker extends React.Component {
   handleScrollPaint() {
     this.waitingForPaint = false
 
-    if (!this.refs.scroll) {
+    if (!this.scroll) {
       return
     }
 
@@ -208,7 +208,7 @@ export default class Picker extends React.Component {
     if (SEARCH_CATEGORY.emojis) {
       activeCategory = SEARCH_CATEGORY
     } else {
-      var target = this.refs.scroll,
+      var target = this.scroll,
           scrollTop = target.scrollTop,
           scrollingDown = scrollTop > (this.scrollTop || 0),
           minTop = 0
@@ -216,7 +216,7 @@ export default class Picker extends React.Component {
       for (let i = 0, l = this.categories.length; i < l; i++) {
         let ii = scrollingDown ? (this.categories.length - 1 - i) : i,
             category = this.categories[ii],
-            component = this.refs[`category-${ii}`]
+            component = this.categoryRefs[`category-${ii}`]
 
         if (component) {
           let active = component.handleScroll(scrollTop)
@@ -246,7 +246,7 @@ export default class Picker extends React.Component {
     }
 
     if (activeCategory) {
-      let { anchors } = this.refs,
+      let { anchors } = this,
           { name: categoryName } = activeCategory
 
       if (anchors.state.selected != categoryName) {
@@ -261,7 +261,7 @@ export default class Picker extends React.Component {
     SEARCH_CATEGORY.emojis = emojis
 
     for (let i = 0, l = this.categories.length; i < l; i++) {
-      let component = this.refs[`category-${i}`]
+      let component = this.categoryRefs[`category-${i}`]
 
       if (component && component.props.name != 'Search') {
         let display = emojis ? 'none' : 'inherit'
@@ -270,13 +270,13 @@ export default class Picker extends React.Component {
     }
 
     this.forceUpdate()
-    this.refs.scroll.scrollTop = 0
+    this.scroll.scrollTop = 0
     this.handleScroll()
   }
 
   handleAnchorClick(category, i) {
-    var component = this.refs[`category-${i}`],
+    var component = this.categoryRefs[`category-${i}`],
-        { scroll, anchors } = this.refs,
+        { scroll, anchors } = this,
         scrollToComponent = null
 
     scrollToComponent = () => {
@@ -295,7 +295,7 @@ export default class Picker extends React.Component {
 
     if (SEARCH_CATEGORY.emojis) {
       this.handleSearch(null)
-      this.refs.search.clear()
+      this.search.clear()
 
       window.requestAnimationFrame(scrollToComponent)
     } else {
@@ -312,12 +312,12 @@ export default class Picker extends React.Component {
 
   updateCategoriesSize() {
     for (let i = 0, l = this.categories.length; i < l; i++) {
-      let component = this.refs[`category-${i}`]
+      let component = this.categoryRefs[`category-${i}`]
       if (component) component.memoizeSize()
     }
 
-    if (this.refs.scroll) {
+    if (this.scroll) {
-      let target = this.refs.scroll
+      let target = this.scroll
       this.scrollHeight = target.scrollHeight
       this.clientHeight = target.clientHeight
     }
@@ -327,6 +327,30 @@ export default class Picker extends React.Component {
     return this.state.firstRender ? this.categories.slice(0, 3) : this.categories
   }
 
+  setAnchorsRef(c) {
+    this.anchors = c
+  }
+
+  setSearchRef(c) {
+    this.search = c
+  }
+
+  setPreviewRef(c) {
+    this.preview = c
+  }
+
+  setScrollRef(c) {
+    this.scroll = c
+  }
+
+  setCategoryRef(name, c) {
+    if (!this.categoryRefs) {
+      this.categoryRefs = {}
+    }
+
+    this.categoryRefs[name] = c
+  }
+
   render() {
     var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, include, exclude, autoFocus } = this.props,
         { skin } = this.state,
@@ -335,7 +359,7 @@ export default class Picker extends React.Component {
     return <div style={{width: width, ...style}} className='emoji-mart'>
       <div className='emoji-mart-bar'>
         <Anchors
-          ref='anchors'
+          ref={this.setAnchorsRef.bind(this)}
           i18n={this.i18n}
           color={color}
           categories={this.categories}
@@ -344,7 +368,7 @@ export default class Picker extends React.Component {
       </div>
 
       <Search
-        ref='search'
+        ref={this.setSearchRef.bind(this)}
         onSearch={this.handleSearch.bind(this)}
         i18n={this.i18n}
         emojisToShowFilter={emojisToShowFilter}
@@ -354,10 +378,10 @@ export default class Picker extends React.Component {
         autoFocus={autoFocus}
       />
 
-      <div ref="scroll" className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
+      <div ref={this.setScrollRef.bind(this)} className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
         {this.getCategories().map((category, i) => {
           return <Category
-            ref={`category-${i}`}
+            ref={this.setCategoryRef.bind(this, `category-${i}`)}
             key={category.name}
             name={category.name}
             emojis={category.emojis}
@@ -384,7 +408,7 @@ export default class Picker extends React.Component {
 
       <div className='emoji-mart-bar'>
         <Preview
-          ref='preview'
+          ref={this.setPreviewRef.bind(this)}
           title={title}
           emoji={emoji}
           emojiProps={{

src/components/search.js

@@ -4,8 +4,7 @@ import emojiIndex from '../utils/emoji-index'
 
 export default class Search extends React.Component {
   handleChange() {
-    var { input } = this.refs,
+    var value = this.input.value
-        value = input.value
 
     this.props.onSearch(emojiIndex.search(value, {
       emojisToShowFilter: this.props.emojisToShowFilter,
@@ -16,8 +15,12 @@ export default class Search extends React.Component {
     }))
   }
 
+  setRef(c) {
+    this.input = c
+  }
+
   clear() {
-    this.refs.input.value = ''
+    this.input.value = ''
   }
 
   render() {
@@ -25,7 +28,7 @@ export default class Search extends React.Component {
 
     return <div className='emoji-mart-search'>
       <input
-        ref='input'
+        ref={this.setRef.bind(this)}
         type='text'
         onChange={this.handleChange.bind(this)}
         placeholder={i18n.search}

yarn.lock

@@ -776,7 +776,7 @@ babel-runtime@^5.0.0:
   dependencies:
     core-js "^1.0.0"
 
-babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.9.0:
+babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.9.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1986,9 +1986,9 @@ fastparse@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
-fbjs@^0.8.9:
+fbjs@^0.8.16:
-  version "0.8.12"
+  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
     core-js "^1.0.0"
     isomorphic-fetch "^2.1.1"
@@ -3186,7 +3186,7 @@ object-assign@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -3698,12 +3698,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
+prop-types@^15.6.0:
-  version "15.5.10"
+  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
-    fbjs "^0.8.9"
+    fbjs "^0.8.16"
     loose-envify "^1.3.1"
+    object-assign "^4.1.1"
 
 proxy-addr@~1.1.5:
   version "1.1.5"
@@ -3818,23 +3819,23 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^15.5.4:
+react-dom@^16.0.0:
-  version "15.5.4"
+  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
   dependencies:
-    fbjs "^0.8.9"
+    fbjs "^0.8.16"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
+    object-assign "^4.1.1"
-    prop-types "~15.5.7"
+    prop-types "^15.6.0"
 
-react@^15.5.4:
+react@^16.0.0:
-  version "15.5.4"
+  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
   dependencies:
-    fbjs "^0.8.9"
+    fbjs "^0.8.16"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
+    object-assign "^4.1.1"
-    prop-types "^15.5.7"
+    prop-types "^15.6.0"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -4172,9 +4173,9 @@ signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-size-limit@^0.11.1:
+size-limit@^0.11.4:
-  version "0.11.1"
+  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.11.1.tgz#e3f5f3ea67671203a716358af0e483de28ff0e3d"
+  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.11.4.tgz#89c2957a702e81802a23f53ee62ccf542496357a"
   dependencies:
     bytes "^3.0.0"
     chalk "^2.1.0"
@@ -4189,9 +4190,9 @@ size-limit@^0.11.1:
     read-pkg-up "^2.0.0"
     style-loader "^0.18.2"
     uglifyjs-webpack-plugin "^1.0.0-beta.2"
-    webpack "^3.5.6"
+    webpack "^3.6.0"
     webpack-bundle-analyzer "^2.9.0"
-    yargs "^8.0.2"
+    yargs "^9.0.1"
 
 slash@^1.0.0:
   version "1.0.0"
@@ -4838,9 +4839,9 @@ webpack@1.12.14:
     watchpack "^0.2.1"
     webpack-core "~0.6.0"
 
-webpack@^3.5.6:
+webpack@^3.6.0:
-  version "3.5.6"
+  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.6.tgz#a492fb6c1ed7f573816f90e00c8fbb5a20cc5c36"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
@@ -5018,6 +5019,24 @@ yargs@^8.0.2:
     y18n "^3.2.1"
     yargs-parser "^7.0.0"
 
+yargs@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"