2016-05-31 14:36:52 +00:00
|
|
|
import React from 'react'
|
|
|
|
import Emoji from './emoji'
|
|
|
|
|
|
|
|
export default class Category extends React.Component {
|
2016-05-31 16:35:08 +00:00
|
|
|
componentDidMount() {
|
|
|
|
this.container = this.refs.container
|
|
|
|
this.label = this.refs.label
|
|
|
|
this.parent = this.container.parentNode
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2016-05-31 16:35:08 +00:00
|
|
|
this.margin = 0
|
|
|
|
this.minMargin = 0
|
|
|
|
|
|
|
|
this.memoizeSize()
|
|
|
|
}
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2016-05-31 16:35:08 +00:00
|
|
|
componentDidUpdate() {
|
|
|
|
this.memoizeSize()
|
|
|
|
}
|
|
|
|
|
|
|
|
memoizeSize() {
|
|
|
|
var { top, height } = this.container.getBoundingClientRect()
|
|
|
|
var { top: parentTop } = this.parent.getBoundingClientRect()
|
|
|
|
var { height: labelHeight } = this.label.getBoundingClientRect()
|
|
|
|
|
|
|
|
this.top = top - parentTop + this.parent.scrollTop
|
|
|
|
this.maxMargin = height - labelHeight
|
|
|
|
}
|
|
|
|
|
|
|
|
handleScroll(scrollTop) {
|
|
|
|
var margin = scrollTop - this.top
|
|
|
|
margin = margin < this.minMargin ? this.minMargin : margin
|
|
|
|
margin = margin > this.maxMargin ? this.maxMargin : margin
|
|
|
|
|
|
|
|
if (margin == this.margin) return
|
|
|
|
this.label.style.top = `${margin}px`
|
|
|
|
this.margin = margin
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2016-05-31 18:48:15 +00:00
|
|
|
var { name, emojis, hasStickyPosition, emojiProps } = this.props,
|
2016-05-31 14:36:52 +00:00
|
|
|
emojis = emojis.slice(0),
|
2016-05-31 16:35:08 +00:00
|
|
|
labelStyles = {},
|
|
|
|
labelSpanStyles = {}
|
2016-05-31 14:36:52 +00:00
|
|
|
|
2016-05-31 16:35:08 +00:00
|
|
|
if (!hasStickyPosition) {
|
|
|
|
labelStyles = {
|
|
|
|
height: 28,
|
|
|
|
}
|
|
|
|
|
|
|
|
labelSpanStyles = {
|
|
|
|
position: 'absolute',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div ref='container' className='emoji-picker-category'>
|
|
|
|
<div style={labelStyles} data-name={name} className='emoji-picker-category-label'>
|
|
|
|
<span style={labelSpanStyles} ref='label'>{name}</span>
|
|
|
|
</div>
|
|
|
|
|
2016-05-31 18:48:15 +00:00
|
|
|
{emojis.map((emoji) =>
|
|
|
|
<Emoji
|
|
|
|
key={emoji}
|
|
|
|
emoji={emoji}
|
|
|
|
{...emojiProps}
|
|
|
|
/>
|
2016-05-31 14:36:52 +00:00
|
|
|
)}
|
2016-06-01 15:38:11 +00:00
|
|
|
|
|
|
|
{!emojis.length &&
|
|
|
|
<div className='emoji-picker-no-results'>
|
|
|
|
<Emoji
|
|
|
|
{...emojiProps}
|
|
|
|
size={22}
|
|
|
|
emoji='sleuth_or_spy'
|
|
|
|
/>
|
|
|
|
|
|
|
|
<span className='emoji-picker-no-results-label'>
|
|
|
|
No emoji found
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
}
|
2016-05-31 14:36:52 +00:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Category.propTypes = {
|
|
|
|
emojis: React.PropTypes.array,
|
2016-05-31 16:35:08 +00:00
|
|
|
hasStickyPosition: React.PropTypes.bool,
|
2016-05-31 14:36:52 +00:00
|
|
|
name: React.PropTypes.string.isRequired,
|
|
|
|
emojiProps: React.PropTypes.object.isRequired,
|
|
|
|
}
|
|
|
|
|
|
|
|
Category.defaultProps = {
|
|
|
|
emojis: [],
|
2016-05-31 16:35:08 +00:00
|
|
|
hasStickyPosition: true,
|
2016-05-31 14:36:52 +00:00
|
|
|
}
|