From a51626ae79383bd21df3e912ee46afd3aa468a1d Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Tue, 19 Jul 2016 12:27:24 -0400 Subject: [PATCH] Move some reusable logic into utils --- src/components/category.js | 2 +- src/components/emoji.js | 99 +++++++++++++------------------------- src/components/picker.js | 1 + src/components/preview.js | 9 ++-- src/utils/emoji-index.js | 4 +- src/utils/index.js | 71 +++++++++++++++++++++++++++ 6 files changed, 116 insertions(+), 70 deletions(-) diff --git a/src/components/category.js b/src/components/category.js index 6d341a9..6108ccb 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -138,7 +138,7 @@ export default class Category extends React.Component { {emojis && emojis.map((emoji) => diff --git a/src/components/emoji.js b/src/components/emoji.js index ed227fc..65fda24 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -1,18 +1,15 @@ import React from 'react' import data from '../../data' +import {getData, getSanitizedData} from '../utils' + const SHEET_COLUMNS = 41 -const SKINS = [ - '1F3FA', '1F3FB', '1F3FC', - '1F3FD', '1F3FE', '1F3FF', -] export default class Emoji extends React.Component { constructor(props) { super(props) - var emojiData = this.getEmojiData() - this.hasSkinVariations = !!emojiData.skin_variations + this.hasSkinVariations = !!this.getData().skin_variations } shouldComponentUpdate(nextProps) { @@ -23,79 +20,51 @@ export default class Emoji extends React.Component { ) } - getEmojiData() { - var { emoji, skin, sheetURL } = this.props, - emojiData = emoji - - if (typeof emoji == 'string') { - emojiData = data.emojis[emoji] - } - - if (this.hasSkinVariations && skin > 1) { - emojiData = JSON.parse(JSON.stringify(emojiData)) - - var skinKey = SKINS[skin - 1], - variationKey = `${emojiData.unified}-${skinKey}`, - variationData = emojiData.skin_variations[variationKey], - kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/), - kit = kitMatches[0] - - if (variationData[`has_img_${kit}`]) { - emojiData.skin_tone = skin - - for (let k in variationData) { - let v = variationData[k] - emojiData[k] = v - } - } - } - - return emojiData - } - - getPosition(emojiData) { - var { sheet_x, sheet_y } = emojiData, + getPosition() { + var { sheet_x, sheet_y } = this.getData(), multiply = 100 / (SHEET_COLUMNS - 1) return `${multiply * sheet_x}% ${multiply * sheet_y}%` } - getNative(emojiData) { - var { unified } = emojiData, - unicodes = unified.split('-'), - codePoints = unicodes.map((u) => `0x${u}`) - - return String.fromCodePoint(...codePoints) + getData() { + var { emoji, skin, sheetURL } = this.props + return getData(emoji, skin, sheetURL) } - handleClick(emojiData) { + getSanitizedData() { + var { emoji, skin, sheetURL } = this.props + return getSanitizedData(emoji, skin, sheetURL) + } + + handleClick() { var { onClick } = this.props, - { name, short_names, skin_tone, emoticons, unified } = emojiData, - id = short_names[0], - colons = `:${id}:` + emoji = this.getSanitizedData() - if (skin_tone) { - colons += `:skin-tone-${skin_tone}:` - } + onClick(emoji) + } - onClick({ - id, - name, - colons, - emoticons, - skin: skin_tone || 1, - native: this.getNative(emojiData), - }) + handleOver() { + var { onOver } = this.props, + emoji = this.getSanitizedData() + + onOver(emoji) + } + + handleLeave() { + var { onLeave } = this.props, + emoji = this.getSanitizedData() + + onLeave(emoji) } render() { - var { sheetURL, size, onOver, onLeave } = this.props, - emojiData = this.getEmojiData() + var { sheetURL, size, onOver, onLeave } = this.props return this.handleClick(emojiData)} - onMouseEnter={() => onOver(emojiData)} - onMouseLeave={() => onLeave(emojiData)} + onClick={this.handleClick.bind(this)} + onMouseEnter={this.handleOver.bind(this)} + onMouseLeave={this.handleLeave.bind(this)} className='emoji-picker-emoji'> diff --git a/src/components/picker.js b/src/components/picker.js index 6483ee3..e091151 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -260,6 +260,7 @@ export default class Picker extends React.Component { emoji={emoji} emojiProps={{ size: 38, + skin: skin, sheetURL: sheetURL, }} skinsProps={{ diff --git a/src/components/preview.js b/src/components/preview.js index b311373..10087b7 100644 --- a/src/components/preview.js +++ b/src/components/preview.js @@ -1,5 +1,7 @@ import React from 'react' + import {Emoji, Skins} from '.' +import {getData} from '../utils' export default class Preview extends React.Component { constructor(props) { @@ -12,7 +14,8 @@ export default class Preview extends React.Component { { emojiProps, skinsProps, title, emoji: idleEmoji } = this.props if (emoji) { - var { emoticons } = emoji, + var emojiData = getData(emoji), + { emoticons } = emojiData, knownEmoticons = [], listedEmoticons = [] @@ -26,7 +29,7 @@ export default class Preview extends React.Component { return
@@ -35,7 +38,7 @@ export default class Preview extends React.Component {
{emoji.name}
- {emoji.short_names.map((short_name) => + {emojiData.short_names.map((short_name) => :{short_name}: )}
diff --git a/src/utils/emoji-index.js b/src/utils/emoji-index.js index fab2464..9e91818 100644 --- a/src/utils/emoji-index.js +++ b/src/utils/emoji-index.js @@ -1,6 +1,8 @@ import lunr from 'lunr' import data from '../../data' +import {getSanitizedData} from '.' + var emoticonsList = [] var index = lunr(function() { @@ -36,7 +38,7 @@ function search(value, maxResults = 75) { if (value.length) { results = index.search(tokenize(value)).map((result) => - data.emojis[result.ref] + getSanitizedData(result.ref) ) results = results.slice(0, maxResults) diff --git a/src/utils/index.js b/src/utils/index.js index 4ee45a1..81ec31a 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,3 +1,74 @@ +import data from '../../data' + +const SKINS = [ + '1F3FA', '1F3FB', '1F3FC', + '1F3FD', '1F3FE', '1F3FF', +] + +function unifiedToNative(unified) { + var unicodes = unified.split('-'), + codePoints = unicodes.map((u) => `0x${u}`) + + return String.fromCodePoint(...codePoints) +} + +function sanitize(emoji) { + var { name, short_names, skin_tone, emoticons, unified } = emoji, + id = short_names[0], + colons = `:${id}:` + + if (skin_tone) { + colons += `:skin-tone-${skin_tone}:` + } + + return { + id, + name, + colons, + emoticons, + skin: skin_tone || 1, + native: unifiedToNative(unified), + } +} + +function getSanitizedData() { + return sanitize(getData(...arguments)) +} + +function getData(emoji, skin, sheetURL) { + var emojiData = {} + + if (typeof emoji == 'string') { + emojiData = data.emojis[emoji] + } else if (emoji.id) { + emojiData = data.emojis[emoji.id] + skin || (skin = emoji.skin) + } + + if (emojiData.skin_variations && skin > 1 && sheetURL) { + emojiData = JSON.parse(JSON.stringify(emojiData)) + + var skinKey = SKINS[skin - 1], + variationKey = `${emojiData.unified}-${skinKey}`, + variationData = emojiData.skin_variations[variationKey], + kitMatches = sheetURL.match(/(apple|google|twitter|emojione)/), + kit = kitMatches[0] + + if (variationData[`has_img_${kit}`]) { + emojiData.skin_tone = skin + + for (let k in variationData) { + let v = variationData[k] + emojiData[k] = v + } + } + } + + return emojiData +} + export {default as store} from './store' export {default as emojiIndex} from './emoji-index' export {default as frequently} from './frequently' + +export { getData, getSanitizedData }