From c1bd9ea52ca96cd1009b50a62593b1f5b4b0015b Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Fri, 7 Apr 2017 17:09:30 -0400 Subject: [PATCH] Support including/excluding the recent category --- README.md | 2 +- src/components/anchors.js | 11 +++++---- src/components/picker.js | 49 +++++++++++++++++++++------------------ 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 6dfb76b..59ff74d 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ import { Picker } from 'emoji-mart' | **autoFocus** | | `false` | Auto focus the search input when mounted | | **color** | | `#ae65c5` | The top bar anchors select and hover color | | **emoji** | | `department_store` | The emoji shown when no emojis are hovered | -| **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). | +| **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). Order will be respected, except for the `recent` category which will always be the first. | | **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). | | **emojiSize** | | `24` | The emoji width and height | | **onClick** | | | Params: `(emoji, event) => {}` | diff --git a/src/components/anchors.js b/src/components/anchors.js index d163ade..704f1cc 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -7,9 +7,12 @@ export default class Anchors extends React.Component { constructor(props) { super(props) - var defaultCategory = props.categories[0] - if (defaultCategory.anchor) { - defaultCategory = defaultCategory.anchor + let defaultCategory = null + for (let category of props.categories) { + if (category.first) { + defaultCategory = category + break + } } this.state = { @@ -26,7 +29,7 @@ export default class Anchors extends React.Component { var { name, anchor } = category, isSelected = name == selected - if (anchor) { + if (anchor === false) { return null } diff --git a/src/components/picker.js b/src/components/picker.js index b1a77c7..482a39e 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -10,9 +10,7 @@ import { deepMerge } from '../utils' import { Anchors, Category, Emoji, Preview, Search } from '.' const RECENT_CATEGORY = { name: 'Recent', emojis: null } -const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: RECENT_CATEGORY } - -let CATEGORIES = [] +const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: false } const I18N = { search: 'Search', @@ -40,7 +38,7 @@ export default class Picker extends React.Component { firstRender: true, } - let filteredCategories = [] + this.categories = [] if (props.include != undefined) { data.categories.sort((a, b) => { @@ -76,16 +74,21 @@ export default class Picker extends React.Component { name: category.name, } - filteredCategories.push(newCategory) + this.categories.push(newCategory) } } - CATEGORIES = [ - SEARCH_CATEGORY, - RECENT_CATEGORY, - ].concat(filteredCategories) + let includeRecent = props.include == undefined ? true : props.include.indexOf('recent') > -1 + let excludeRecent = props.exclude == undefined ? false : props.exclude.indexOf('recent') > -1 + if (includeRecent && !excludeRecent) { + this.categories.unshift(RECENT_CATEGORY) + } - this.categories = CATEGORIES + if (this.categories[0]) { + this.categories[0].first = true + } + + this.categories.unshift(SEARCH_CATEGORY) } componentWillReceiveProps(props) { @@ -180,9 +183,9 @@ export default class Picker extends React.Component { 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], + for (let i = 0, l = this.categories.length; i < l; i++) { + let ii = scrollingDown ? (this.categories.length - 1 - i) : i, + category = this.categories[ii], component = this.refs[`category-${ii}`] if (component) { @@ -195,14 +198,18 @@ export default class Picker extends React.Component { } if (active && !activeCategory) { - if (category.anchor) category = category.anchor activeCategory = category } } } if (scrollTop < minTop) { - activeCategory = RECENT_CATEGORY + for (let category of this.categories) { + if (category.anchor === false) { continue } + + activeCategory = category + break + } } if (activeCategory) { @@ -220,7 +227,7 @@ export default class Picker extends React.Component { handleSearch(emojis) { SEARCH_CATEGORY.emojis = emojis - for (let i = 0, l = CATEGORIES.length; i < l; i++) { + for (let i = 0, l = this.categories.length; i < l; i++) { let component = this.refs[`category-${i}`] if (component && component.props.name != 'Search') { @@ -241,7 +248,7 @@ export default class Picker extends React.Component { if (component) { let { top } = component - if (category.name == 'Recent') { + if (category.first) { top = 0 } else { top += 1 @@ -269,16 +276,14 @@ export default class Picker extends React.Component { } updateCategoriesSize() { - for (let i = 0, l = CATEGORIES.length; i < l; i++) { + for (let i = 0, l = this.categories.length; i < l; i++) { let component = this.refs[`category-${i}`] if (component) component.memoizeSize() } } getCategories() { - var categories = CATEGORIES - - return this.state.firstRender ? categories.slice(0, 3) : categories + return this.state.firstRender ? this.categories.slice(0, 3) : this.categories } render() { @@ -292,7 +297,7 @@ export default class Picker extends React.Component { ref='anchors' i18n={this.i18n} color={color} - categories={CATEGORIES} + categories={this.categories} onAnchorClick={this.handleAnchorClick.bind(this)} />