Scroll to category on anchor click

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 {

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 <div className='emoji-picker-anchors'>
       {categories.map((category, i) => {
         var { name } = category
 
-        return <span key={name} className={`emoji-picker-anchor ${name == selected ? 'emoji-picker-anchor-selected' : ''}`}>
+        return (
-          <InlineSVG src={SVGs[name]} />
+          <span
-          <span className='emoji-picker-anchor-bar'></span>
+            key={name}
-        </span>
+            title={name}
+            onClick={() => onAnchorClick(category, i)}
+            className={`emoji-picker-anchor ${name == selected ? 'emoji-picker-anchor-selected' : ''}`}
+          >
+            <InlineSVG src={SVGs[name]} />
+            <span className='emoji-picker-anchor-bar'></span>
+          </span>
+        )
       })}
     </div>
   }
@@ -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: (() => {}),
 }

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++) {
+    for (let i = 0, l = categories.length; i < l; i++) {
-      let category = this.state.categories[i],
+      let ii = scrollingDown ? (categories.length - 1 - i) : i,
-          component = this.refs[`category-${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 {
         <Anchors
           ref='anchors'
           categories={DEFAULT_CATEGORIES}
+          onAnchorClick={this.handleAnchorClick.bind(this)}
         />
       </div>