Completely hide categories with no emojis

src/components/category.js

@@ -56,12 +56,11 @@ export default class Category extends React.Component {
     var { height: labelHeight } = this.label.getBoundingClientRect()
 
     this.top = top - parentTop + this.parent.scrollTop
+
     if (height == 0) {
       this.maxMargin = 0
-    } else if (height > labelHeight) {
-      this.maxMargin = height - labelHeight
     } else {
-      this.maxMargin = 1
+      this.maxMargin = height - labelHeight
     }
   }
 
@@ -81,11 +80,8 @@ export default class Category extends React.Component {
     return true
   }
 
-  render() {
-    var { name, emojis, perLine, hasStickyPosition, emojiProps } = this.props,
-        labelStyles = {},
-        labelSpanStyles = {},
-        containerStyles = {}
+  getEmojis() {
+    var { name, emojis, perLine } = this.props
 
     if (name == 'Recent') {
       let frequentlyUsed = frequently.get(perLine * 4)
@@ -97,11 +93,31 @@ export default class Category extends React.Component {
 
     if (emojis) {
       emojis = emojis.slice(0)
-    } else {
+    }
+
+    return emojis
+  }
+
+  updateDisplay(display) {
+    var emojis = this.getEmojis()
+
+    if (!display && !emojis) {
+      return
+    }
+
+    this.container.style.display = display
+  }
+
+  render() {
+    var { name, hasStickyPosition, emojiProps } = this.props,
+        emojis = this.getEmojis(),
+        labelStyles = {},
+        labelSpanStyles = {},
+        containerStyles = {}
+
+    if (!emojis) {
       containerStyles = {
-        height: 1,
-        overflow: 'hidden',
-        marginBottom: '-1px',
+        display: 'none',
       }
     }
 

src/components/picker.js

@@ -1,7 +1,6 @@
 import '../vendor/raf-polyfill'
 
 import React from 'react'
-import ReactDOM from 'react-dom'
 import data from '../../data'
 
 import {store, frequently} from '../utils'
@@ -90,13 +89,20 @@ export default class Picker extends React.Component {
     var target = this.refs.scroll,
         scrollTop = target.scrollTop,
         scrollingDown = scrollTop > (this.scrollTop || 0),
-        activeCategory = null
+        activeCategory = null,
+        minTop = 0
 
     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 (!minTop || component.top < minTop) {
+        if (component.top > 0) {
+          minTop = component.top
+        }
+      }
+
       if (component) {
         let active = component.handleScroll(scrollTop)
         if (active && !activeCategory) {
@@ -106,6 +112,10 @@ export default class Picker extends React.Component {
       }
     }
 
+    if (scrollTop < minTop) {
+      activeCategory = RECENT_CATEGORY
+    }
+
     if (activeCategory) {
       let { anchors } = this.refs,
           { name: categoryName } = activeCategory
@@ -125,10 +135,8 @@ export default class Picker extends React.Component {
       let component = this.refs[`category-${i}`]
 
       if (component && component.props.name != 'Search') {
-        let DOMNode = ReactDOM.findDOMNode(component),
-            display = emojis ? 'none' : null
-
-        if (DOMNode) DOMNode.style.display = display
+        let display = emojis ? 'none' : null
+        component.updateDisplay(display)
       }
     }