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 {