treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add data property to any components that import data.js, and use that under the hood

release
Dave Cilley 2018-03-28 17:30:47 -04:00
parent 19d875e88b
commit 892096ea27
16 changed files with 458 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/category.js
View File

@ -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 {
</div>
{emojis &&
emojis.map((emoji) => Emoji({ emoji: emoji, ...emojiProps }))}
emojis.map((emoji) => NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps }))}
{emojis &&
!emojis.length && (
<div>
<div>
{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

64
src/components/emoji.js
View File

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

15
src/components/index.js
View File

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

13
src/components/parent-category.js Normal file
View File

@ -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 <NimbleCategory {...this.props} {...this.state}/>
}
}
Category.propTypes = { ...CategoryPropTypes }
Category.defaultProps = { ...CategoryDefaultProps, data }

13
src/components/parent-emoji.js Normal file
View File

@ -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 <NimbleEmoji {...this.props} {...this.state}/>
}
}
Emoji.propTypes = EmojiPropTypes
Emoji.defaultProps = { ...EmojiDefaultProps, data }

15
src/components/parent-picker.js Normal file
View File

@ -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 <NimblePicker {...this.props} {...this.state}/>
}
}
Picker.propTypes = PickerPropTypes
Picker.defaultProps = { ...PickerDefaultProps, data }

13
src/components/parent-preview.js Normal file
View File

@ -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 <NimblePreview {...this.props} {...this.state}/>
}
}
Preview.propTypes = PreviewPropTypes
Preview.defaultProps = { ...PreviewDefaultProps, data }

13
src/components/parent-search.js Normal file
View File

@ -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 <NimbleSearch {...this.props} {...this.state}/>
}
}
Search.propTypes = SearchPropTypes
Search.defaultProps = { ...SearchDefaultProps, data }

82
src/components/picker.js
View File

@ -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 {
<div className="emoji-mart-bar">
<Anchors
ref={this.setAnchorsRef}
data={this.data}
i18n={this.i18n}
color={color}
categories={this.categories}
@ -481,9 +483,10 @@ export default class Picker extends React.PureComponent {
/>
</div>
<Search
<NimbleSearch
ref={this.setSearchRef}
onSearch={this.handleSearch}
data={this.data}
i18n={this.i18n}
emojisToShowFilter={emojisToShowFilter}
include={include}
@ -499,7 +502,7 @@ export default class Picker extends React.PureComponent {
>
{this.getCategories().map((category, i) => {
return (
<Category
<NimbleCategory
ref={this.setCategoryRef.bind(this, `category-${i}`)}
key={category.name}
id={category.id}
@ -508,6 +511,7 @@ export default class Picker extends React.PureComponent {
perLine={perLine}
native={native}
hasStickyPosition={this.hasStickyPosition}
data={this.data}
i18n={this.i18n}
recent={
category.id == this.RECENT_CATEGORY.id ? recent : undefined
@ -537,8 +541,9 @@ export default class Picker extends React.PureComponent {
{showPreview && (
<div className="emoji-mart-bar">
<Preview
<NimblePreview
ref={this.setPreviewRef}
data={this.data}
title={title}
emoji={emoji}
showSkinTones={showSkinTones}
@ -562,62 +567,5 @@ export default class Picker extends React.PureComponent {
}
}
Picker.propTypes = {
onClick: PropTypes.func,
onSelect: 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: Emoji.propTypes.set,
skin: Emoji.propTypes.skin,
native: PropTypes.bool,
backgroundImageFn: Emoji.propTypes.backgroundImageFn,
sheetSize: Emoji.propTypes.sheetSize,
emojisToShowFilter: PropTypes.func,
showPreview: PropTypes.bool,
showSkinTones: PropTypes.bool,
emojiTooltip: Emoji.propTypes.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,
}),
),
}
Picker.defaultProps = {
onClick: () => {},
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 }

27
src/components/preview.js
View File

@ -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 (
<div className="emoji-mart-preview">
<div className="emoji-mart-preview-emoji">
{Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })}
{NimbleEmoji({ key: emoji.id, emoji: emoji, data: this.data, ...emojiProps })}
</div>
<div className="emoji-mart-preview-data">
@ -66,7 +69,7 @@ export default class Preview extends React.PureComponent {
<div className="emoji-mart-preview-emoji">
{idleEmoji &&
idleEmoji.length &&
Emoji({ emoji: idleEmoji, ...emojiProps })}
NimbleEmoji({ emoji: idleEmoji, data: this.data, ...emojiProps })}
</div>
<div className="emoji-mart-preview-data">
@ -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

24
src/components/search.js
View File

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

2
src/index.js
View File

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

303
src/utils/emoji-index.js
View File

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

5
src/utils/index.js
View File

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

12
src/utils/parent-emoji-index.js Normal file
View File

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

153
src/utils/shared-props.js Normal file
View File

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