treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade to React 16, do not use deprecated ref syntax

release
Eugen Rochko 2017-09-27 21:26:50 +02:00
parent bf5c67e345
commit d13e3b5e03
5 changed files with 115 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -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",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"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"
},

14
src/components/category.js
View File

@ -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) =>

64
src/components/picker.js
View File

@ -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}`],
{ scroll, anchors } = this.refs,
var component = this.categoryRefs[`category-${i}`],
{ 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) {
let target = this.refs.scroll
if (this.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={{

11
src/components/search.js
View File

@ -4,8 +4,7 @@ import emojiIndex from '../utils/emoji-index'
export default class Search extends React.Component {
handleChange() {
var { input } = this.refs,
value = input.value
var value = this.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}

77
yarn.lock
View File

@ -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:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
fbjs@^0.8.16:
version "0.8.16"
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:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
prop-types@^15.6.0:
version "15.6.0"
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:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
react-dom@^16.0.0:
version "16.0.0"
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"
prop-types "~15.5.7"
object-assign "^4.1.1"
prop-types "^15.6.0"
react@^15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
react@^16.0.0:
version "16.0.0"
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"
prop-types "^15.5.7"
object-assign "^4.1.1"
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:
version "0.11.1"
resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.11.1.tgz#e3f5f3ea67671203a716358af0e483de28ff0e3d"
size-limit@^0.11.4:
version "0.11.4"
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:
version "3.5.6"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.6.tgz#a492fb6c1ed7f573816f90e00c8fbb5a20cc5c36"
webpack@^3.6.0:
version "3.6.0"
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"