add emojisToShow filter

Signed-off-by: Thomas Osugi <tosugi@pivotal.io>
release
Devin Brown 2017-01-30 14:01:41 -07:00 committed by Thomas Osugi
parent 626d5b1ab4
commit 1a6e0e0fd3
3 changed files with 40 additions and 10 deletions

View File

@ -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,
}

View File

@ -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
}

View File

@ -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 }