diff --git a/src/components/picker.js b/src/components/picker.js index a42fdea..90db7af 100644 --- a/src/components/picker.js +++ b/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, } diff --git a/src/components/search.js b/src/components/search.js index 47d9055..c945009 100644 --- a/src/components/search.js +++ b/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 } diff --git a/src/utils/emoji-index.js b/src/utils/emoji-index.js index f6d571f..50c529f 100644 --- a/src/utils/emoji-index.js +++ b/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 }