Return emojis with skin tone from store on nimble search

release
Peder Johnsen 2019-03-23 15:17:37 +00:00
parent 8bea0331ff
commit 51a0879ec1
6 changed files with 14861 additions and 9 deletions

14813
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -522,6 +522,7 @@ export default class NimblePicker extends React.PureComponent {
ref={this.setSearchRef}
onSearch={this.handleSearch}
data={this.data}
set={set}
i18n={this.i18n}
emojisToShowFilter={emojisToShowFilter}
include={include}

View File

@ -17,7 +17,7 @@ export default class Search extends React.PureComponent {
}
this.data = props.data
this.emojiIndex = new NimbleEmojiIndex(this.data)
this.emojiIndex = new NimbleEmojiIndex(this.data, props.set)
this.setRef = this.setRef.bind(this)
this.clear = this.clear.bind(this)
this.handleKeyUp = this.handleKeyUp.bind(this)

View File

@ -1,13 +1,15 @@
import { getData, getSanitizedData, intersect } from '..'
import { uncompress } from '../data'
import store from '../store'
export default class NimbleEmojiIndex {
constructor(data) {
constructor(data, set) {
if (data.compressed) {
uncompress(data)
}
this.data = data || {}
this.set = set || null
this.originalPool = {}
this.index = {}
this.emojis = {}
@ -20,7 +22,7 @@ export default class NimbleEmojiIndex {
buildIndex() {
for (let emoji in this.data.emojis) {
let emojiData = this.data.emojis[emoji],
{ short_names, emoticons } = emojiData,
{ short_names, emoticons, skin_variations } = emojiData,
id = short_names[0]
if (emoticons) {
@ -33,7 +35,16 @@ export default class NimbleEmojiIndex {
})
}
this.emojis[id] = getSanitizedData(id, null, null, this.data)
// If skin variations include them
if (skin_variations) {
this.emojis[id] = {}
for (let skinTone = 1; skinTone <= 6; skinTone++) {
this.emojis[id][skinTone] = getSanitizedData({id, skin: skinTone}, skinTone, this.set, this.data)
}
} else {
this.emojis[id] = getSanitizedData(id, null, this.set, this.data)
}
this.originalPool[id] = emojiData
}
}
@ -70,6 +81,8 @@ export default class NimbleEmojiIndex {
if (this.customEmojisList != custom)
this.addCustomToPool(custom, this.originalPool)
const skinTone = store.get('skin') || 1;
maxResults || (maxResults = 75)
include || (include = [])
exclude || (exclude = [])
@ -79,7 +92,7 @@ export default class NimbleEmojiIndex {
if (value.length) {
if (value == '-' || value == '-1') {
return [this.emojis['-1']]
return [this.emojis['-1'][skinTone]]
}
var values = value.toLowerCase().split(/[\s|,|\-|_]+/),
@ -148,7 +161,11 @@ export default class NimbleEmojiIndex {
let score = subIndex + 1
if (sub == id) score = 0
aIndex.results.push(this.emojis[id])
if (this.emojis[id] && this.emojis[id][skinTone]) {
aIndex.results.push(this.emojis[id][skinTone])
} else {
aIndex.results.push(this.emojis[id])
}
aIndex.pool[id] = emoji
scores[id] = score

View File

@ -104,7 +104,7 @@ function getData(emoji, skin, set, data) {
emojiData.emoticons || (emojiData.emoticons = [])
emojiData.variations || (emojiData.variations = [])
if (emojiData.skin_variations && skin > 1 && set) {
if (emojiData.skin_variations && skin > 1) {
emojiData = JSON.parse(_JSON.stringify(emojiData))
var skinKey = SKINS[skin - 1],
@ -115,11 +115,11 @@ function getData(emoji, skin, set, data) {
}
if (
(set &&
variationData[`has_img_${set}`] == undefined ||
variationData[`has_img_${set}`]
variationData[`has_img_${set}`]) || !set
) {
emojiData.skin_tone = skin
for (let k in variationData) {
let v = variationData[k]
emojiData[k] = v

View File

@ -214,3 +214,24 @@ storiesOf('Headless Search', module)
</div>
)
})
.add('Skin tone', () => {
let results = emojiIndex.search(text('Search', 'thumbs'), {
custom: CUSTOM_EMOJIS,
})
if (!results) {
return null
}
return (
<div>
{results.map((emoji) => {
return (
<span key={emoji.id} style={{ marginLeft: '1.4em' }}>
<Emoji native={true} emoji={emoji} size={48} />
</span>
)
})}
</div>
)
})