add emojisToShow filter

Signed-off-by: Thomas Osugi <tosugi@pivotal.io>

src/components/picker.js

@@ -12,10 +12,7 @@ import { Anchors, Category, Emoji, Preview, Search } from '.'
 const RECENT_CATEGORY = { name: 'Recent', emojis: null }
 const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: RECENT_CATEGORY }
 
-const CATEGORIES = [
-  SEARCH_CATEGORY,
-  RECENT_CATEGORY,
-].concat(data.categories)
+let CATEGORIES = [];
 
 const I18N = {
   search: 'Search',
@@ -42,6 +39,32 @@ export default class Picker extends React.Component {
       skin: store.get('skin') || props.skin,
       firstRender: true,
     }
+
+    let filteredCategories = [];
+
+    for (let hash of data.categories) {
+      let new_emojis = [];
+      for (let emoji of hash.emojis) {
+        let unified = data.emojis[emoji].unified;
+        if (props.emojisToShowFilter(unified)) {
+          new_emojis.push(emoji)
+        }
+      }
+
+      if (new_emojis.length) {
+        let new_hash = {
+          emojis: new_emojis,
+          name: hash.name
+        }
+        filteredCategories.push(new_hash);
+      }
+    }
+    CATEGORIES = [
+      SEARCH_CATEGORY,
+      RECENT_CATEGORY,
+    ].concat(filteredCategories);
+
+    this.categories = CATEGORIES;
   }
 
   componentWillReceiveProps(props) {
@@ -238,7 +261,7 @@ export default class Picker extends React.Component {
   }
 
   render() {
-    var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, backgroundImageFn } = this.props,
+    var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, backgroundImageFn, emojisToShowFilter } = this.props,
         { skin } = this.state,
         width = (perLine * (emojiSize + 12)) + 12 + 2
 
@@ -258,6 +281,7 @@ export default class Picker extends React.Component {
           ref='search'
           onSearch={this.handleSearch.bind(this)}
           i18n={this.i18n}
+          emojisToShowFilter={emojisToShowFilter}
         />
 
         {this.getCategories().map((category, i) => {
@@ -318,6 +342,7 @@ Picker.propTypes = {
   backgroundImageFn: Emoji.propTypes.backgroundImageFn,
   skin: Emoji.propTypes.skin,
   sheetSize: Emoji.propTypes.sheetSize,
+  emojisToShowFilter: React.PropTypes.func,
 }
 
 Picker.defaultProps = {
@@ -333,4 +358,5 @@ Picker.defaultProps = {
   skin: Emoji.defaultProps.skin,
   sheetSize: Emoji.defaultProps.sheetSize,
   backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
+  emojisToShowFilter: (codePoint) => true,
 }

src/components/search.js

@@ -6,7 +6,7 @@ export default class Search extends React.Component {
     var { input } = this.refs,
         value = input.value
 
-    this.props.onSearch(emojiIndex.search(value))
+    this.props.onSearch(emojiIndex.search(value, this.props.emojisToShowFilter, this.props.maxResults))
   }
 
   clear() {
@@ -29,9 +29,11 @@ export default class Search extends React.Component {
 Search.propTypes = {
   onSearch: React.PropTypes.func,
   maxResults: React.PropTypes.number,
+  emojisToShowFilter: React.PropTypes.func
 }
 
 Search.defaultProps = {
   onSearch: (() => {}),
   maxResults: 75,
+  emojisToShowFilter: () => true
 }

src/utils/emoji-index.js

@@ -20,7 +20,7 @@ for (let emoji in data.emojis) {
   emojisList[id] = getSanitizedData(id)
 }
 
-function search(value, maxResults = 75) {
+function search(value, emojisToShowFilter = () => true, maxResults = 75) {
   var results = null
 
   if (value.length) {
@@ -92,11 +92,13 @@ function search(value, maxResults = 75) {
     }
   }
 
-  if (results && results.length) {
-    results = results.slice(0, maxResults)
+  let filtered_results = (results || []).filter(
+    (result) => emojisToShowFilter(data.emojis[result.id].unified));
+  if (filtered_results && filtered_results.length) {
+    filtered_results = filtered_results.slice(0, maxResults)
   }
 
-  return results
+  return filtered_results
 }
 
 export default { search, emojis: emojisList, emoticons: emoticonsList }