2016-05-31 14:36:52 +00:00
|
|
|
import React from 'react'
|
|
|
|
|
|
|
|
import data from '../../data'
|
|
|
|
import Preview from './preview'
|
|
|
|
import Category from './category'
|
|
|
|
|
|
|
|
export default class Picker extends React.Component {
|
2016-05-31 16:35:08 +00:00
|
|
|
componentWillMount() {
|
|
|
|
var stickyTestElement = document.createElement('div')
|
|
|
|
for (let prefix of ['', '-webkit-', '-ms-', '-moz-', '-o-']) {
|
|
|
|
stickyTestElement.style.position = `${prefix}sticky`
|
|
|
|
}
|
|
|
|
|
|
|
|
this.hasStickyPosition = !!stickyTestElement.style.position.length
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
this.handleScroll()
|
|
|
|
}
|
|
|
|
|
2016-05-31 14:36:52 +00:00
|
|
|
handleEmojiOver(emoji) {
|
|
|
|
var { preview } = this.refs
|
|
|
|
preview.setState({ emoji: emoji })
|
|
|
|
}
|
|
|
|
|
2016-05-31 16:35:08 +00:00
|
|
|
handleScroll() {
|
|
|
|
var target = this.refs.scroll,
|
|
|
|
scrollTop = target.scrollTop
|
|
|
|
|
|
|
|
if (!this.hasStickyPosition) {
|
|
|
|
Array(data.categories.length).fill().forEach((_, i) => {
|
|
|
|
var category = this.refs[`category-${i}`]
|
|
|
|
if (category) {
|
|
|
|
category.handleScroll(scrollTop)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-05-31 14:36:52 +00:00
|
|
|
render() {
|
|
|
|
var { perLine, emojiSize, sheetURL } = this.props
|
|
|
|
|
|
|
|
return <div className='emoji-picker'>
|
|
|
|
<div className='emoji-picker-bar'>
|
|
|
|
Categories
|
|
|
|
</div>
|
|
|
|
|
2016-05-31 16:35:08 +00:00
|
|
|
<div ref="scroll" className='emoji-picker-scroll' onScroll={this.handleScroll.bind(this)}>
|
2016-05-31 14:36:52 +00:00
|
|
|
<input
|
|
|
|
type='text'
|
|
|
|
placeholder='Search'
|
|
|
|
className='emoji-picker-search'
|
|
|
|
/>
|
|
|
|
|
2016-05-31 16:35:08 +00:00
|
|
|
{data.categories.map((category, i) => {
|
2016-05-31 14:36:52 +00:00
|
|
|
if (category.name == 'Skins') return null
|
|
|
|
return <Category
|
2016-05-31 16:35:08 +00:00
|
|
|
ref={`category-${i}`}
|
2016-05-31 14:36:52 +00:00
|
|
|
key={category.name}
|
|
|
|
name={category.name}
|
|
|
|
emojis={category.emojis}
|
|
|
|
perLine={perLine}
|
2016-05-31 16:35:08 +00:00
|
|
|
hasStickyPosition={this.hasStickyPosition}
|
2016-05-31 14:36:52 +00:00
|
|
|
emojiProps={{
|
|
|
|
size: emojiSize,
|
|
|
|
sheetURL: sheetURL,
|
|
|
|
onOver: this.handleEmojiOver.bind(this),
|
|
|
|
onClick: this.props.onClick,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className='emoji-picker-bar emoji-picker-preview'>
|
|
|
|
<Preview
|
|
|
|
ref='preview'
|
|
|
|
emojiProps={{
|
|
|
|
size: 38,
|
|
|
|
sheetURL: sheetURL,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Picker.propTypes = {
|
|
|
|
onClick: React.PropTypes.func,
|
|
|
|
perLine: React.PropTypes.number,
|
|
|
|
emojiSize: React.PropTypes.number,
|
|
|
|
sheetURL: React.PropTypes.string.isRequired,
|
|
|
|
}
|
|
|
|
|
|
|
|
Picker.defaultProps = {
|
|
|
|
onClick: (() => {}),
|
|
|
|
emojiSize: 32,
|
|
|
|
perLine: 9,
|
|
|
|
}
|