Add emojis to recent category on click

exclude-unsupported-native-emojis
Etienne Lemay 2016-07-07 14:22:02 -04:00
parent a922dbb8c5
commit de98e7a729
2 changed files with 48 additions and 12 deletions

View File

@ -1,4 +1,6 @@
import React from 'react' import React from 'react'
import {frequently} from '../utils'
import {Emoji} from '.' import {Emoji} from '.'
export default class Category extends React.Component { export default class Category extends React.Component {
@ -47,12 +49,28 @@ export default class Category extends React.Component {
} }
render() { render() {
var { name, emojis, hasStickyPosition, emojiProps } = this.props, var { name, emojis, perLine, hasStickyPosition, emojiProps } = this.props,
emojis = emojis ? emojis.slice(0) : null,
labelStyles = {}, labelStyles = {},
labelSpanStyles = {}, labelSpanStyles = {},
containerStyles = {} containerStyles = {}
if (name == 'Recent') {
let frequentlyUsed = frequently.get(perLine * 4)
if (frequentlyUsed.length) {
emojis = frequentlyUsed
}
}
if (emojis) {
emojis = emojis.slice(0)
} else {
containerStyles = {
height: 1,
overflow: 'hidden',
}
}
if (!hasStickyPosition) { if (!hasStickyPosition) {
labelStyles = { labelStyles = {
height: 28, height: 28,
@ -63,13 +81,6 @@ export default class Category extends React.Component {
} }
} }
if (!emojis) {
containerStyles = {
height: 1,
overflow: 'hidden',
}
}
return <div ref='container' className='emoji-picker-category' style={containerStyles}> return <div ref='container' className='emoji-picker-category' style={containerStyles}>
<div style={labelStyles} data-name={name} className='emoji-picker-category-label'> <div style={labelStyles} data-name={name} className='emoji-picker-category-label'>
<span style={labelSpanStyles} ref='label'>{name}</span> <span style={labelSpanStyles} ref='label'>{name}</span>
@ -104,6 +115,7 @@ Category.propTypes = {
emojis: React.PropTypes.array, emojis: React.PropTypes.array,
hasStickyPosition: React.PropTypes.bool, hasStickyPosition: React.PropTypes.bool,
name: React.PropTypes.string.isRequired, name: React.PropTypes.string.isRequired,
perLine: React.PropTypes.number.isRequired,
emojiProps: React.PropTypes.object.isRequired, emojiProps: React.PropTypes.object.isRequired,
} }

View File

@ -3,7 +3,7 @@ import '../vendor/raf-polyfill'
import React from 'react' import React from 'react'
import data from '../../data' import data from '../../data'
import {store} from '../utils' import {store, frequently} from '../utils'
import {Anchors, Category, Preview, Search} from '.' import {Anchors, Category, Preview, Search} from '.'
const DEFAULT_CATEGORIES = [ const DEFAULT_CATEGORIES = [
@ -53,6 +53,29 @@ export default class Picker extends React.Component {
}, 16) }, 16)
} }
handleEmojiClick(emoji) {
this.props.onClick(emoji)
frequently.add(emoji)
var component = this.refs['category-0']
if (component && component.props.name == 'Recent') {
let maxMargin = component.maxMargin
component.forceUpdate()
window.requestAnimationFrame(() => {
if (maxMargin == component.maxMargin) return
var { categories } = this.state
for (let i = 0, l = categories.length; i < l; i++) {
let component = this.refs[`category-${i}`]
if (component) component.memoizeSize()
}
this.handleScrollPaint()
})
}
}
handleScroll() { handleScroll() {
if (!this.waitingForPaint) { if (!this.waitingForPaint) {
this.waitingForPaint = true this.waitingForPaint = true
@ -65,7 +88,7 @@ export default class Picker extends React.Component {
var target = this.refs.scroll, var target = this.refs.scroll,
scrollTop = target.scrollTop, scrollTop = target.scrollTop,
scrollingDown = scrollTop > (this.scrollTop || 0), scrollingDown = scrollTop >= (this.scrollTop || 0),
activeCategory = null, activeCategory = null,
{ categories } = this.state { categories } = this.state
@ -154,6 +177,7 @@ export default class Picker extends React.Component {
key={category.name} key={category.name}
name={category.name} name={category.name}
emojis={category.emojis} emojis={category.emojis}
perLine={perLine}
hasStickyPosition={this.hasStickyPosition} hasStickyPosition={this.hasStickyPosition}
emojiProps={{ emojiProps={{
skin: skin, skin: skin,
@ -161,7 +185,7 @@ export default class Picker extends React.Component {
sheetURL: sheetURL, sheetURL: sheetURL,
onOver: this.handleEmojiOver.bind(this), onOver: this.handleEmojiOver.bind(this),
onLeave: this.handleEmojiLeave.bind(this), onLeave: this.handleEmojiLeave.bind(this),
onClick: this.props.onClick, onClick: this.handleEmojiClick.bind(this),
}} }}
/> />
})} })}