diff --git a/src/components/category.js b/src/components/category.js index 710f288..89e83a5 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -3,12 +3,14 @@ import PropTypes from 'prop-types' import frequently from '../utils/frequently' import { getData } from '../utils' -import { Emoji } from '.' +import { CategoryPropTypes, CategoryDefaultProps } from '../utils/shared-props' +import NimbleEmoji from './emoji' -export default class Category extends React.Component { +export default class NimbleCategory extends React.Component { constructor(props) { super(props) + this.data = props.data this.setContainerRef = this.setContainerRef.bind(this) this.setLabelRef = this.setLabelRef.bind(this) } @@ -109,7 +111,7 @@ export default class Category extends React.Component { return id }) - .filter((id) => !!getData(id)) + .filter((id) => !!getData(id, null, null, this.data)) } if (emojis.length === 0 && frequentlyUsed.length > 0) { @@ -184,13 +186,14 @@ export default class Category extends React.Component { {emojis && - emojis.map((emoji) => Emoji({ emoji: emoji, ...emojiProps }))} + emojis.map((emoji) => NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps }))} {emojis && !emojis.length && (
- {Emoji({ + {NimbleEmoji({ + data: this.data, ...emojiProps, size: 38, emoji: 'sleuth_or_spy', @@ -208,17 +211,5 @@ export default class Category extends React.Component { } } -Category.propTypes = { - emojis: PropTypes.array, - hasStickyPosition: PropTypes.bool, - name: PropTypes.string.isRequired, - native: PropTypes.bool.isRequired, - perLine: PropTypes.number.isRequired, - emojiProps: PropTypes.object.isRequired, - recent: PropTypes.arrayOf(PropTypes.string), -} - -Category.defaultProps = { - emojis: [], - hasStickyPosition: true, -} +NimbleCategory.propTypes = { ...CategoryPropTypes, data: PropTypes.object.isRequired } +NimbleCategory.defaultProps = CategoryDefaultProps diff --git a/src/components/emoji.js b/src/components/emoji.js index 5e344e2..c7457ed 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -1,11 +1,16 @@ import React from 'react' import PropTypes from 'prop-types' -import data from '../data' import { getData, getSanitizedData, unifiedToNative } from '../utils' +import { EmojiPropTypes, EmojiDefaultProps } from '../utils/shared-props' const SHEET_COLUMNS = 52 +const _getData = (props) => { + var { emoji, skin, set, data } = props + return getData(emoji, skin, set, data) +} + const _getPosition = (props) => { var { sheet_x, sheet_y } = _getData(props), multiply = 100 / (SHEET_COLUMNS - 1) @@ -13,14 +18,9 @@ const _getPosition = (props) => { return `${multiply * sheet_x}% ${multiply * sheet_y}%` } -const _getData = (props) => { - var { emoji, skin, set } = props - return getData(emoji, skin, set) -} - const _getSanitizedData = (props) => { - var { emoji, skin, set } = props - return getSanitizedData(emoji, skin, set) + var { emoji, skin, set, data } = props + return getSanitizedData(emoji, skin, set, data) } const _handleClick = (e, props) => { @@ -73,10 +73,10 @@ const _convertStyleToCSS = (style) => { return div.getAttribute('style') } -const Emoji = (props) => { - for (let k in Emoji.defaultProps) { - if (props[k] == undefined && Emoji.defaultProps[k] != undefined) { - props[k] = Emoji.defaultProps[k] +const NimbleEmoji = (props) => { + for (let k in NimbleEmoji.defaultProps) { + if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) { + props[k] = NimbleEmoji.defaultProps[k] } } @@ -163,41 +163,7 @@ const Emoji = (props) => { } } -Emoji.propTypes = { - onOver: PropTypes.func, - onLeave: PropTypes.func, - onClick: PropTypes.func, - fallback: PropTypes.func, - backgroundImageFn: PropTypes.func, - native: PropTypes.bool, - forceSize: PropTypes.bool, - tooltip: PropTypes.bool, - skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]), - sheetSize: PropTypes.oneOf([16, 20, 32, 64]), - set: PropTypes.oneOf([ - 'apple', - 'google', - 'twitter', - 'emojione', - 'messenger', - 'facebook', - ]), - size: PropTypes.number.isRequired, - emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, -} +NimbleEmoji.propTypes = { ...EmojiPropTypes, data: PropTypes.object.isRequired } +NimbleEmoji.defaultProps = EmojiDefaultProps -Emoji.defaultProps = { - skin: 1, - set: 'apple', - sheetSize: 64, - native: false, - forceSize: false, - tooltip: false, - backgroundImageFn: (set, sheetSize) => - `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`, - onOver: () => {}, - onLeave: () => {}, - onClick: () => {}, -} - -export default Emoji +export default NimbleEmoji diff --git a/src/components/index.js b/src/components/index.js index ddcf015..ee40f44 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,7 +1,12 @@ export { default as Anchors } from './anchors' -export { default as Category } from './category' -export { default as Emoji } from './emoji' -export { default as Picker } from './picker' -export { default as Preview } from './preview' -export { default as Search } from './search' +export { default as Category } from './parent-category' +export { default as Emoji } from './parent-emoji' +export { default as Picker } from './parent-picker' +export { default as Preview } from './parent-preview' +export { default as Search } from './parent-search' export { default as Skins } from './skins' +export { default as NimbleCategory } from './category' +export { default as NimbleEmoji } from './emoji' +export { default as NimblePicker } from './picker' +export { default as NimblePreview } from './preview' +export { default as NimbleSearch } from './search' diff --git a/src/components/parent-category.js b/src/components/parent-category.js new file mode 100644 index 0000000..8aa48b6 --- /dev/null +++ b/src/components/parent-category.js @@ -0,0 +1,13 @@ +import React from 'react' +import data from '../data' +import { CategoryPropTypes, CategoryDefaultProps } from '../utils/shared-props' +import NimbleCategory from './category' + +export default class Category extends React.Component { + render() { + return + } +} + +Category.propTypes = { ...CategoryPropTypes } +Category.defaultProps = { ...CategoryDefaultProps, data } diff --git a/src/components/parent-emoji.js b/src/components/parent-emoji.js new file mode 100644 index 0000000..d094be2 --- /dev/null +++ b/src/components/parent-emoji.js @@ -0,0 +1,13 @@ +import React from 'react' +import data from '../data' +import { EmojiPropTypes, EmojiDefaultProps } from '../utils/shared-props' +import NimbleEmoji from './emoji' + +export default class Emoji extends React.PureComponent { + render() { + return + } +} + +Emoji.propTypes = EmojiPropTypes +Emoji.defaultProps = { ...EmojiDefaultProps, data } diff --git a/src/components/parent-picker.js b/src/components/parent-picker.js new file mode 100644 index 0000000..a1087b4 --- /dev/null +++ b/src/components/parent-picker.js @@ -0,0 +1,15 @@ +import '../vendor/raf-polyfill' + +import React from 'react' +import data from '../data' +import { PickerPropTypes, PickerDefaultProps } from '../utils/shared-props' +import NimblePicker from './picker' + +export default class Picker extends React.PureComponent { + render() { + return + } +} + +Picker.propTypes = PickerPropTypes +Picker.defaultProps = { ...PickerDefaultProps, data } diff --git a/src/components/parent-preview.js b/src/components/parent-preview.js new file mode 100644 index 0000000..cb786c5 --- /dev/null +++ b/src/components/parent-preview.js @@ -0,0 +1,13 @@ +import React from 'react' +import data from '../data' +import { PreviewPropTypes, PreviewDefaultProps } from '../utils/shared-props' +import NimblePreview from './preview' + +export default class Preview extends React.PureComponent { + render() { + return + } +} + +Preview.propTypes = PreviewPropTypes +Preview.defaultProps = { ...PreviewDefaultProps, data } diff --git a/src/components/parent-search.js b/src/components/parent-search.js new file mode 100644 index 0000000..0ef1e97 --- /dev/null +++ b/src/components/parent-search.js @@ -0,0 +1,13 @@ +import React from 'react' +import data from '../data' +import { SearchPropTypes, SearchDefaultProps } from '../utils/shared-props' +import NimbleSearch from './search' + +export default class Search extends React.PureComponent { + render() { + return + } +} + +Search.propTypes = SearchPropTypes +Search.defaultProps = { ...SearchDefaultProps, data } diff --git a/src/components/picker.js b/src/components/picker.js index 47edc92..63711fb 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -2,13 +2,13 @@ import '../vendor/raf-polyfill' import React from 'react' import PropTypes from 'prop-types' -import data from '../data' import store from '../utils/store' import frequently from '../utils/frequently' import { deepMerge, measureScrollbar } from '../utils' +import { PickerPropTypes, PickerDefaultProps } from '../utils/shared-props' -import { Anchors, Category, Emoji, Preview, Search } from '.' +import { Anchors, NimbleCategory, NimblePreview, NimbleSearch } from '.' const I18N = { search: 'Search', @@ -28,7 +28,7 @@ const I18N = { }, } -export default class Picker extends React.PureComponent { +export default class NimblePicker extends React.PureComponent { constructor(props) { super(props) @@ -41,6 +41,7 @@ export default class Picker extends React.PureComponent { anchor: false, } + this.data = props.data this.i18n = deepMerge(I18N, props.i18n) this.state = { skin: props.skin || store.get('skin') || props.defaultSkin, @@ -48,7 +49,7 @@ export default class Picker extends React.PureComponent { } this.categories = [] - let allCategories = [].concat(data.categories) + let allCategories = [].concat(this.data.categories) if (props.custom.length > 0) { this.CUSTOM_CATEGORY.emojis = props.custom.map((emoji) => { @@ -99,7 +100,7 @@ export default class Picker extends React.PureComponent { const { emojis } = category for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex++) { const emoji = emojis[emojiIndex] - if (props.emojisToShowFilter(data.emojis[emoji] || emoji)) { + if (props.emojisToShowFilter(this.data.emojis[emoji] || emoji)) { newEmojis.push(emoji) } } @@ -474,6 +475,7 @@ export default class Picker extends React.PureComponent {
- {this.getCategories().map((category, i) => { return ( - - {}, - onSelect: () => {}, - onSkinChange: () => {}, - emojiSize: 24, - perLine: 9, - i18n: {}, - style: {}, - title: 'Emoji Mart™', - emoji: 'department_store', - color: '#ae65c5', - set: Emoji.defaultProps.set, - skin: null, - defaultSkin: Emoji.defaultProps.skin, - native: Emoji.defaultProps.native, - sheetSize: Emoji.defaultProps.sheetSize, - backgroundImageFn: Emoji.defaultProps.backgroundImageFn, - emojisToShowFilter: null, - showPreview: true, - showSkinTones: true, - emojiTooltip: Emoji.defaultProps.tooltip, - autoFocus: false, - custom: [], -} +NimblePicker.propTypes = { ...PickerPropTypes, data: PropTypes.object.isRequired } +NimblePicker.defaultProps = { ...PickerDefaultProps } diff --git a/src/components/preview.js b/src/components/preview.js index f6dd6a4..6ea7b38 100644 --- a/src/components/preview.js +++ b/src/components/preview.js @@ -1,12 +1,15 @@ import React from 'react' import PropTypes from 'prop-types' -import { Emoji, Skins } from '.' +import { PreviewPropTypes, PreviewDefaultProps } from '../utils/shared-props' +import { NimbleEmoji, Skins } from '.' import { getData } from '../utils' -export default class Preview extends React.PureComponent { +export default class NimblePreview extends React.PureComponent { constructor(props) { super(props) + + this.data = props.data this.state = { emoji: null } } @@ -21,7 +24,7 @@ export default class Preview extends React.PureComponent { } = this.props if (emoji) { - var emojiData = getData(emoji), + var emojiData = getData(emoji, null, null, this.data), { emoticons = [] } = emojiData, knownEmoticons = [], listedEmoticons = [] @@ -38,7 +41,7 @@ export default class Preview extends React.PureComponent { return (
- {Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })} + {NimbleEmoji({ key: emoji.id, emoji: emoji, data: this.data, ...emojiProps })}
@@ -66,7 +69,7 @@ export default class Preview extends React.PureComponent {
{idleEmoji && idleEmoji.length && - Emoji({ emoji: idleEmoji, ...emojiProps })} + NimbleEmoji({ emoji: idleEmoji, data: this.data, ...emojiProps })}
@@ -84,15 +87,5 @@ export default class Preview extends React.PureComponent { } } -Preview.propTypes = { - showSkinTones: PropTypes.bool, - title: PropTypes.string.isRequired, - emoji: PropTypes.string.isRequired, - emojiProps: PropTypes.object.isRequired, - skinsProps: PropTypes.object.isRequired, -} - -Preview.defaultProps = { - showSkinTones: true, - onChange: () => {}, -} +NimblePreview.propTypes = { ...PreviewPropTypes, data: PropTypes.object.isRequired } +NimblePreview.defaultProps = PreviewDefaultProps diff --git a/src/components/search.js b/src/components/search.js index 71e8dc4..f826acf 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -1,11 +1,14 @@ import React from 'react' import PropTypes from 'prop-types' -import emojiIndex from '../utils/emoji-index' +import NimbleEmojiIndex from '../utils/emoji-index' +import { SearchPropTypes, SearchDefaultProps } from '../utils/shared-props' -export default class Search extends React.PureComponent { +export default class NimbleSearch extends React.PureComponent { constructor(props) { super(props) + this.data = props.data + this.emojiIndex = new NimbleEmojiIndex(this.data) this.setRef = this.setRef.bind(this) this.handleChange = this.handleChange.bind(this) } @@ -14,7 +17,7 @@ export default class Search extends React.PureComponent { var value = this.input.value this.props.onSearch( - emojiIndex.search(value, { + this.emojiIndex.search(value, { emojisToShowFilter: this.props.emojisToShowFilter, maxResults: this.props.maxResults, include: this.props.include, @@ -49,16 +52,5 @@ export default class Search extends React.PureComponent { } } -Search.propTypes = { - onSearch: PropTypes.func, - maxResults: PropTypes.number, - emojisToShowFilter: PropTypes.func, - autoFocus: PropTypes.bool, -} - -Search.defaultProps = { - onSearch: () => {}, - maxResults: 75, - emojisToShowFilter: null, - autoFocus: false, -} +NimbleSearch.propTypes = { ...SearchPropTypes, data: PropTypes.object.isRequired } +NimbleSearch.defaultProps = SearchDefaultProps diff --git a/src/index.js b/src/index.js index e831839..eeed8b4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import emojiIndex from './utils/emoji-index' +import emojiIndex from './utils/parent-emoji-index' import store from './utils/store' import frequently from './utils/frequently' diff --git a/src/utils/emoji-index.js b/src/utils/emoji-index.js index 950d15d..9a2eb2b 100644 --- a/src/utils/emoji-index.js +++ b/src/utils/emoji-index.js @@ -1,180 +1,187 @@ -import data from '../data' import { getData, getSanitizedData, intersect } from '.' -var originalPool = {} -var index = {} -var emojisList = {} -var emoticonsList = {} -var customEmojisList = [] +export default class NimbleEmojiIndex { + constructor(data) { + this.data = data || {} + this.originalPool = {} + this.index = {} + this.emojis = {} + this.emoticons = {} + this.customEmojisList = [] -for (let emoji in data.emojis) { - let emojiData = data.emojis[emoji], - { short_names, emoticons } = emojiData, - id = short_names[0] + this.buildIndex() + } - if (emoticons) { - emoticons.forEach((emoticon) => { - if (emoticonsList[emoticon]) { - return + buildIndex() { + for (let emoji in this.data.emojis) { + let emojiData = this.data.emojis[emoji], + { short_names, emoticons } = emojiData, + id = short_names[0] + + if (emoticons) { + emoticons.forEach((emoticon) => { + if (this.emoticons[emoticon]) { + return + } + + this.emoticons[emoticon] = id + }) } - emoticonsList[emoticon] = id + this.emojis[id] = getSanitizedData(id, null, null, this.data) + this.originalPool[id] = emojiData + } + } + + clearCustomEmojis(pool) { + this.customEmojisList.forEach((emoji) => { + let emojiId = emoji.id || emoji.short_names[0] + + delete pool[emojiId] + delete emojisList[emojiId] }) } - emojisList[id] = getSanitizedData(id) - originalPool[id] = emojiData -} + addCustomToPool(custom, pool) { + if (this.customEmojisList.length) this.clearCustomEmojis(pool) -function clearCustomEmojis(pool) { - customEmojisList.forEach((emoji) => { - let emojiId = emoji.id || emoji.short_names[0] + custom.forEach((emoji) => { + let emojiId = emoji.id || emoji.short_names[0] - delete pool[emojiId] - delete emojisList[emojiId] - }) -} + if (emojiId && !pool[emojiId]) { + pool[emojiId] = getData(emoji, null, null, this.data) + this.emojis[emojiId] = getSanitizedData(emoji, null, null, this.data) + } + }) + + this.customEmojisList = custom + this.index = {} + } -function addCustomToPool(custom, pool) { - if (customEmojisList.length) clearCustomEmojis(pool) + search( + value, + { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {}, + ) { + if (this.customEmojisList != custom) this.addCustomToPool(custom, this.originalPool) - custom.forEach((emoji) => { - let emojiId = emoji.id || emoji.short_names[0] + maxResults || (maxResults = 75) + include || (include = []) + exclude || (exclude = []) - if (emojiId && !pool[emojiId]) { - pool[emojiId] = getData(emoji) - emojisList[emojiId] = getSanitizedData(emoji) - } - }) + var results = null, + pool = this.originalPool - customEmojisList = custom - index = {} -} + if (value.length) { + if (value == '-' || value == '-1') { + return [this.emojis['-1']] + } -function search( - value, - { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {}, -) { - if (customEmojisList != custom) addCustomToPool(custom, originalPool) + var values = value.toLowerCase().split(/[\s|,|\-|_]+/), + allResults = [] - maxResults || (maxResults = 75) - include || (include = []) - exclude || (exclude = []) + if (values.length > 2) { + values = [values[0], values[1]] + } - var results = null, - pool = originalPool + if (include.length || exclude.length) { + pool = {} - if (value.length) { - if (value == '-' || value == '-1') { - return [emojisList['-1']] - } + this.data.categories.forEach((category) => { + let isIncluded = + include && include.length ? include.indexOf(category.id) > -1 : true + let isExcluded = + exclude && exclude.length ? exclude.indexOf(category.id) > -1 : false + if (!isIncluded || isExcluded) { + return + } - var values = value.toLowerCase().split(/[\s|,|\-|_]+/), - allResults = [] + category.emojis.forEach( + (emojiId) => (pool[emojiId] = this.data.emojis[emojiId]), + ) + }) - if (values.length > 2) { - values = [values[0], values[1]] - } - - if (include.length || exclude.length) { - pool = {} - - data.categories.forEach((category) => { - let isIncluded = - include && include.length ? include.indexOf(category.id) > -1 : true - let isExcluded = - exclude && exclude.length ? exclude.indexOf(category.id) > -1 : false - if (!isIncluded || isExcluded) { - return + if (custom.length) { + let customIsIncluded = + include && include.length ? include.indexOf('custom') > -1 : true + let customIsExcluded = + exclude && exclude.length ? exclude.indexOf('custom') > -1 : false + if (customIsIncluded && !customIsExcluded) { + this.addCustomToPool(custom, pool) + } } + } - category.emojis.forEach( - (emojiId) => (pool[emojiId] = data.emojis[emojiId]), - ) - }) + allResults = values + .map((value) => { + var aPool = pool, + aIndex = this.index, + length = 0 - if (custom.length) { - let customIsIncluded = - include && include.length ? include.indexOf('custom') > -1 : true - let customIsExcluded = - exclude && exclude.length ? exclude.indexOf('custom') > -1 : false - if (customIsIncluded && !customIsExcluded) { - addCustomToPool(custom, pool) - } + for (let charIndex = 0; charIndex < value.length; charIndex++) { + const char = value[charIndex] + length++ + + aIndex[char] || (aIndex[char] = {}) + aIndex = aIndex[char] + + if (!aIndex.results) { + let scores = {} + + aIndex.results = [] + aIndex.pool = {} + + for (let id in aPool) { + let emoji = aPool[id], + { search } = emoji, + sub = value.substr(0, length), + subIndex = search.indexOf(sub) + + if (subIndex != -1) { + let score = subIndex + 1 + if (sub == id) score = 0 + + aIndex.results.push(this.emojis[id]) + aIndex.pool[id] = emoji + + scores[id] = score + } + } + + aIndex.results.sort((a, b) => { + var aScore = scores[a.id], + bScore = scores[b.id] + + return aScore - bScore + }) + } + + aPool = aIndex.pool + } + + return aIndex.results + }) + .filter((a) => a) + + if (allResults.length > 1) { + results = intersect.apply(null, allResults) + } else if (allResults.length) { + results = allResults[0] + } else { + results = [] } } - allResults = values - .map((value) => { - var aPool = pool, - aIndex = index, - length = 0 + if (results) { + if (emojisToShowFilter) { + results = results.filter((result) => emojisToShowFilter(pool[result.id])) + } - for (let charIndex = 0; charIndex < value.length; charIndex++) { - const char = value[charIndex] - length++ - - aIndex[char] || (aIndex[char] = {}) - aIndex = aIndex[char] - - if (!aIndex.results) { - let scores = {} - - aIndex.results = [] - aIndex.pool = {} - - for (let id in aPool) { - let emoji = aPool[id], - { search } = emoji, - sub = value.substr(0, length), - subIndex = search.indexOf(sub) - - if (subIndex != -1) { - let score = subIndex + 1 - if (sub == id) score = 0 - - aIndex.results.push(emojisList[id]) - aIndex.pool[id] = emoji - - scores[id] = score - } - } - - aIndex.results.sort((a, b) => { - var aScore = scores[a.id], - bScore = scores[b.id] - - return aScore - bScore - }) - } - - aPool = aIndex.pool - } - - return aIndex.results - }) - .filter((a) => a) - - if (allResults.length > 1) { - results = intersect.apply(null, allResults) - } else if (allResults.length) { - results = allResults[0] - } else { - results = [] + if (results && results.length > maxResults) { + results = results.slice(0, maxResults) + } } + + return results } - - if (results) { - if (emojisToShowFilter) { - results = results.filter((result) => emojisToShowFilter(pool[result.id])) - } - - if (results && results.length > maxResults) { - results = results.slice(0, maxResults) - } - } - - return results } -export default { search, emojis: emojisList, emoticons: emoticonsList } diff --git a/src/utils/index.js b/src/utils/index.js index 43bd6f2..a7f8694 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,5 +1,4 @@ import buildSearch from './build-search' -import data from '../data' import stringFromCodePoint from '../polyfills/stringFromCodePoint' const _JSON = JSON @@ -58,7 +57,7 @@ function getSanitizedData() { return sanitize(getData(...arguments)) } -function getData(emoji, skin, set) { +function getData(emoji, skin, set, data) { var emojiData = {} if (typeof emoji == 'string') { @@ -68,7 +67,7 @@ function getData(emoji, skin, set) { emoji = matches[1] if (matches[2]) { - skin = parseInt(matches[2]) + skin = parseInt(matches[2], 10) } } diff --git a/src/utils/parent-emoji-index.js b/src/utils/parent-emoji-index.js new file mode 100644 index 0000000..5a13836 --- /dev/null +++ b/src/utils/parent-emoji-index.js @@ -0,0 +1,12 @@ +import data from '../data' +import NimbleEmojiIndex from './emoji-index' + +const emojiIndex = new NimbleEmojiIndex(data) +const emojis = emojiIndex.emojis +const emoticons = emojiIndex.emoticons + +function search() { + return emojiIndex.search(...arguments) +} + +export default { search, emojis, emoticons } diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js new file mode 100644 index 0000000..bb05b7f --- /dev/null +++ b/src/utils/shared-props.js @@ -0,0 +1,153 @@ +import PropTypes from 'prop-types' + +const CategoryPropTypes = { + emojis: PropTypes.array, + hasStickyPosition: PropTypes.bool, + name: PropTypes.string.isRequired, + native: PropTypes.bool.isRequired, + perLine: PropTypes.number.isRequired, + emojiProps: PropTypes.object.isRequired, + recent: PropTypes.arrayOf(PropTypes.string), +} + +const CategoryDefaultProps = { + emojis: [], + hasStickyPosition: true, +} + +const EmojiPropTypes = { + data: PropTypes.object.isRequired, + onOver: PropTypes.func, + onLeave: PropTypes.func, + onClick: PropTypes.func, + fallback: PropTypes.func, + backgroundImageFn: PropTypes.func, + native: PropTypes.bool, + forceSize: PropTypes.bool, + tooltip: PropTypes.bool, + skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]), + sheetSize: PropTypes.oneOf([16, 20, 32, 64]), + set: PropTypes.oneOf([ + 'apple', + 'google', + 'twitter', + 'emojione', + 'messenger', + 'facebook', + ]), + size: PropTypes.number.isRequired, + emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, +} + +const EmojiDefaultProps = { + skin: 1, + set: 'apple', + sheetSize: 64, + native: false, + forceSize: false, + tooltip: false, + backgroundImageFn: (set, sheetSize) => + `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`, + onOver: () => {}, + onLeave: () => {}, + onClick: () => {}, +} + +const PickerPropTypes = { + onClick: PropTypes.func, + onSkinChange: PropTypes.func, + perLine: PropTypes.number, + emojiSize: PropTypes.number, + i18n: PropTypes.object, + style: PropTypes.object, + title: PropTypes.string, + emoji: PropTypes.string, + color: PropTypes.string, + set: EmojiPropTypes.set, + skin: EmojiPropTypes.skin, + native: PropTypes.bool, + backgroundImageFn: EmojiPropTypes.backgroundImageFn, + sheetSize: EmojiPropTypes.sheetSize, + emojisToShowFilter: PropTypes.func, + showPreview: PropTypes.bool, + showSkinTones: PropTypes.bool, + emojiTooltip: EmojiPropTypes.tooltip, + include: PropTypes.arrayOf(PropTypes.string), + exclude: PropTypes.arrayOf(PropTypes.string), + recent: PropTypes.arrayOf(PropTypes.string), + autoFocus: PropTypes.bool, + custom: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string.isRequired, + short_names: PropTypes.arrayOf(PropTypes.string).isRequired, + emoticons: PropTypes.arrayOf(PropTypes.string), + keywords: PropTypes.arrayOf(PropTypes.string), + imageUrl: PropTypes.string.isRequired, + }) + ), +} + +const PickerDefaultProps = { + onClick: () => {}, + onSkinChange: () => {}, + emojiSize: 24, + perLine: 9, + i18n: {}, + style: {}, + title: 'Emoji Mart™', + emoji: 'department_store', + color: '#ae65c5', + set: EmojiDefaultProps.set, + skin: null, + defaultSkin: EmojiDefaultProps.skin, + native: EmojiDefaultProps.native, + sheetSize: EmojiDefaultProps.sheetSize, + backgroundImageFn: EmojiDefaultProps.backgroundImageFn, + emojisToShowFilter: null, + showPreview: true, + showSkinTones: true, + emojiTooltip: EmojiDefaultProps.tooltip, + autoFocus: false, + custom: [], +} + +const PreviewPropTypes = { + showSkinTones: PropTypes.bool, + title: PropTypes.string.isRequired, + emoji: PropTypes.string.isRequired, + emojiProps: PropTypes.object.isRequired, + skinsProps: PropTypes.object.isRequired, +} + +const PreviewDefaultProps = { + showSkinTones: true, + onChange: () => {}, +} + + +const SearchPropTypes = { + onSearch: PropTypes.func, + maxResults: PropTypes.number, + emojisToShowFilter: PropTypes.func, + autoFocus: PropTypes.bool, +} + +const SearchDefaultProps = { + onSearch: () => {}, + maxResults: 75, + emojisToShowFilter: null, + autoFocus: false, +} + +export { + CategoryPropTypes, + CategoryDefaultProps, + EmojiPropTypes, + EmojiDefaultProps, + PickerPropTypes, + PickerDefaultProps, + PreviewPropTypes, + PreviewDefaultProps, + SearchPropTypes, + SearchDefaultProps, +}