diff --git a/css/emoji-picker.css b/css/emoji-picker.css index 4fb1f0f..3c25f63 100644 --- a/css/emoji-picker.css +++ b/css/emoji-picker.css @@ -34,10 +34,14 @@ text-align: center; padding: 12px 4px; overflow: hidden; - transition: color .2s ease-out; + transition: color .1s ease-out; +} +.emoji-picker-anchor:hover { + color: #464646; } -.emoji-picker-anchor-selected { +.emoji-picker-anchor-selected, +.emoji-picker-anchor-selected:hover { color: #ae65c5; } .emoji-picker-anchor-selected .emoji-picker-anchor-bar { diff --git a/src/components/anchors.js b/src/components/anchors.js index 6afddff..fd8747b 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -13,17 +13,24 @@ export default class Anchors extends React.Component { } render() { - var { categories } = this.props, + var { categories, onAnchorClick } = this.props, { selected } = this.state return
{categories.map((category, i) => { var { name } = category - return - - - + return ( + onAnchorClick(category, i)} + className={`emoji-picker-anchor ${name == selected ? 'emoji-picker-anchor-selected' : ''}`} + > + + + + ) })}
} @@ -31,8 +38,10 @@ export default class Anchors extends React.Component { Anchors.propTypes = { categories: React.PropTypes.array, + onAnchorClick: React.PropTypes.func, } Anchors.defaultProps = { categories: [], + onAnchorClick: (() => {}), } diff --git a/src/components/picker.js b/src/components/picker.js index e362e7b..6104f62 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -57,11 +57,14 @@ export default class Picker extends React.Component { var target = this.refs.scroll, scrollTop = target.scrollTop, - activeCategory = null + scrollingDown = scrollTop > (this.scrollTop || 0), + activeCategory = null, + { categories } = this.state - for (let i = 0, l = this.state.categories.length; i < l; i++) { - let category = this.state.categories[i], - component = this.refs[`category-${i}`] + for (let i = 0, l = categories.length; i < l; i++) { + let ii = scrollingDown ? (categories.length - 1 - i) : i, + category = categories[ii], + component = this.refs[`category-${ii}`] if (component) { let active = component.handleScroll(scrollTop) @@ -94,6 +97,23 @@ export default class Picker extends React.Component { } } + handleAnchorClick(category, i) { + var component = this.refs[`category-${i}`], + { scroll, anchors } = this.refs + + if (component) { + let { top } = component + + if (i == 0) { + top = 0 + } else { + top += 1 + } + + scroll.scrollTop = top + } + } + render() { var { skin, perLine, emojiSize, sheetURL } = this.props, width = (perLine * (emojiSize + 12)) + 12 + 2 @@ -103,6 +123,7 @@ export default class Picker extends React.Component {