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

Merge pull request #123 from Gargron/feature-react-16 

Upgrade to React 16
release
Etienne Lemay 2017-09-27 20:12:35 -04:00 committed by GitHub
parent 5ef1c28d75 9f49499240
commit f8358ff28f
5 changed files with 125 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package.json
View File

@ -19,15 +19,15 @@
},
"homepage": "https://github.com/missive/emoji-mart",
"dependencies": {
"measure-scrollbar": "^0.1.0"
"measure-scrollbar": "^1.0.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",
"babel-core": "6.7.2",
"babel-loader": "6.2.4",
"babel-loader": "^7.1.2",
"babel-plugin-module-resolver": "2.7.1",
"babel-plugin-transform-define": "^1.3.0",
"babel-plugin-transform-es2015-destructuring": "6.9.0",
@ -36,7 +36,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",
@ -45,15 +45,15 @@
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.2",
"karma-webpack": "^2.0.4",
"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": "3.6.0"
"webpack": "^3.6.0"
},
"scripts": {
"clean": "rimraf data/data.js dist/",

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
@ -104,6 +102,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(),
@ -127,9 +133,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

@ -156,7 +156,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]
for (let key in emojiData) {
@ -170,7 +170,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)
}
@ -179,7 +179,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()
@ -208,7 +208,7 @@ export default class Picker extends React.Component {
handleScrollPaint() {
this.waitingForPaint = false
if (!this.refs.scroll) {
if (!this.scroll) {
return
}
@ -217,7 +217,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
@ -225,7 +225,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)
@ -250,7 +250,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) {
@ -265,7 +265,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'
@ -274,13 +274,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 = () => {
@ -299,7 +299,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 {
@ -316,12 +316,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
}
@ -331,6 +331,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,
@ -339,7 +363,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}
@ -348,7 +372,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}
@ -358,10 +382,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}
@ -388,7 +412,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}

104
yarn.lock
View File

@ -400,13 +400,13 @@ babel-helpers@^6.24.1, babel-helpers@^6.6.0:
babel-runtime "^6.22.0"
babel-template "^6.24.1"
babel-loader@6.2.4:
version "6.2.4"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.4.tgz#aa70aff8ddc223a5952e839a43a6c3a4c8bfa1e9"
babel-loader@^7.1.2:
version "7.1.2"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
dependencies:
loader-utils "^0.2.11"
find-cache-dir "^1.0.0"
loader-utils "^1.0.2"
mkdirp "^0.5.1"
object-assign "^4.0.1"
babel-messages@^6.23.0, babel-messages@^6.7.2:
version "6.23.0"
@ -604,12 +604,6 @@ babel-plugin-transform-flow-strip-types@^6.3.13:
babel-plugin-syntax-flow "^6.18.0"
babel-runtime "^6.22.0"
babel-plugin-transform-helper@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-helper/-/babel-plugin-transform-helper-0.0.6.tgz#ba9a1fc07d8caec13f3313b604ceca0657c736bd"
dependencies:
babel-helpers "^6.6.0"
babel-plugin-transform-object-rest-spread@6.8.0:
version "6.8.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.8.0.tgz#03d1308e257a9d8e1a815ae1fd3db21bdebf08d9"
@ -726,7 +720,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.26.0, babel-runtime@^6.9.0:
babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.9.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
@ -1291,14 +1285,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-class@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"
cross-spawn@^5.0.1:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@ -1887,9 +1873,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.15"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.15.tgz#4f0695fdfcc16c37c0b07facec8cb4c4091685b9"
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"
@ -2619,7 +2605,7 @@ karma-jasmine@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/karma-jasmine/-/karma-jasmine-1.1.0.tgz#22e4c06bf9a182e5294d1f705e3733811b810acf"
karma-webpack@^2.0.2:
karma-webpack@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.4.tgz#3e2d4f48ba94a878e1c66bb8e1ae6128987a175b"
dependencies:
@ -2789,9 +2775,9 @@ md5.js@^1.3.4:
hash-base "^3.0.0"
inherits "^2.0.1"
measure-scrollbar@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/measure-scrollbar/-/measure-scrollbar-0.1.0.tgz#2bbfac6773bcbb98d814e6890554c0b92846fe6f"
measure-scrollbar@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/measure-scrollbar/-/measure-scrollbar-1.0.0.tgz#a7b1019155671192c1a8587ea49669af4f75833d"
media-typer@0.3.0:
version "0.3.0"
@ -3581,12 +3567,13 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.8:
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"
@ -3706,24 +3693,23 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-dom@^15.5.4:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
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.10"
object-assign "^4.1.1"
prop-types "^15.6.0"
react@^15.5.4:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
react@^16.0.0:
version "16.0.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
dependencies:
create-react-class "^15.6.0"
fbjs "^0.8.9"
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.10"
object-assign "^4.1.1"
prop-types "^15.6.0"
read-pkg-up@^2.0.0:
version "2.0.0"
@ -4029,9 +4015,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.3"
resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.11.3.tgz#d3dbff672210753d9c15c5ba5eb1b8a775d2a8cc"
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"
@ -4046,9 +4032,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"
@ -4647,7 +4633,7 @@ webpack-sources@^1.0.1:
source-list-map "^2.0.0"
source-map "~0.5.3"
webpack@3.6.0, webpack@^3.5.6:
webpack@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
dependencies:
@ -4819,6 +4805,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"