mirrors
/
emoji-mart-lazyload
mirror of https://github.com/mashirozx/emoji-mart.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into custom-emojis

nolan/hinaloe-test
Etienne Lemay 2017-05-27 11:26:59 -04:00
parent 346e398d6e f4bbee1ecd
commit 1b77cb8244
15 changed files with 776 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -26,7 +26,7 @@ import { Picker } from 'emoji-mart'
| ---- | :------: | ------- | ----------- | | ---- | :------: | ------- | ----------- |
| **autoFocus** | | `false` | Auto focus the search input when mounted | | **autoFocus** | | `false` | Auto focus the search input when mounted |
| **color** | | `#ae65c5` | The top bar anchors select and hover color | | **color** | | `#ae65c5` | The top bar anchors select and hover color |
| **emoji** | | `department_store` | The emoji shown when no emojis are hovered | | **emoji** | | `department_store` | The emoji shown when no emojis are hovered, set to an empty string to show nothing |
| **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. | | **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). | | **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |
| **custom** | | `[]` | [Custom emojis](#custom-emojis) | | **custom** | | `[]` | [Custom emojis](#custom-emojis) |

12
css/emoji-mart.css
View File

@ -18,11 +18,16 @@
padding: 6px; padding: 6px;
} }
.emoji-mart-bar {
border: 0 solid #d9d9d9;
}
.emoji-mart-bar:first-child { .emoji-mart-bar:first-child {
border-bottom-width: 1px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.emoji-mart-bar:last-child { .emoji-mart-bar:last-child {
border-top-width: 1px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
@ -74,16 +79,17 @@
overflow-y: scroll; overflow-y: scroll;
height: 270px; height: 270px;
padding: 0 6px 6px 6px; padding: 0 6px 6px 6px;
border: solid #d9d9d9;
border-width: 1px 0;
} }
.emoji-mart-search { .emoji-mart-search {
margin-top: 6px;
padding: 0 6px;
}
.emoji-mart-search input {
font-size: 16px; font-size: 16px;
display: block; display: block;
width: 100%; width: 100%;
padding: .2em .6em; padding: .2em .6em;
margin-top: 6px;
border-radius: 25px; border-radius: 25px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
outline: 0; outline: 0;

143
example/index.js
View File

@ -18,6 +18,18 @@ const CUSTOM_EMOJIS = [
} }
] ]
const CATEGORIES = [
'recent',
'people',
'nature',
'foods',
'activity',
'places',
'objects',
'symbols',
'flags',
]
class Example extends React.Component { class Example extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -25,25 +37,49 @@ class Example extends React.Component {
emojiSize: 24, emojiSize: 24,
perLine: 9, perLine: 9,
skin: 1, skin: 1,
native: false, native: true,
set: 'apple', set: 'apple',
hidden: false, hidden: false,
currentEmoji: 'thumbsup',
autoFocus: false,
include: [],
exclude: [],
} }
} }
handleInput(e) { handleInput(e) {
var { currentTarget } = e, var { currentTarget } = e,
{ value, type, checked } = currentTarget, { type } = currentTarget,
key = currentTarget.getAttribute('data-key'), key = currentTarget.getAttribute('data-key'),
mount = currentTarget.getAttribute('data-mount'),
state = {} state = {}
if (type == 'checkbox') { if (type == 'checkbox') {
state[key] = checked var { checked } = currentTarget,
value = currentTarget.getAttribute('data-value')
if (value) {
if (checked) {
state[key] = this.state[key].concat(value)
} else { } else {
state[key] = this.state[key].filter((item) => { return item != value })
}
} else {
state[key] = checked
}
} else {
var { value } = currentTarget
state[key] = parseInt(value) state[key] = parseInt(value)
} }
if (mount) {
this.setState({ hidden: true }, () => {
state.hidden = false
this.setState(state) this.setState(state)
})
} else {
this.setState(state)
}
} }
render() { render() {
@ -61,19 +97,25 @@ class Example extends React.Component {
</div> </div>
<div className="row"> <div className="row">
{['apple', 'google', 'twitter', 'emojione'].map((set) => { {['native', 'apple', 'google', 'twitter', 'emojione'].map((set) => {
var props = { disabled: set == this.state.set } var props = { disabled: !this.state.native && set == this.state.set }
if (set == 'native' && this.state.native) {
props.disabled = true
}
return <button return <button
key={set} key={set}
value={set} value={set}
onClick={() => this.setState({ set: set })} onClick={() => {
if (set == 'native') {
this.setState({ native: true })
} else {
this.setState({ set: set, native: false })
}
}}
{...props}> {...props}>
<Emoji {set}
set={set}
size={24}
emoji='grinning'
/>
</button> </button>
})} })}
</div> </div>
@ -94,14 +136,37 @@ class Example extends React.Component {
<Operator>import</Operator> &#123;Picker&#125; <Operator>from</Operator> <String>'emoji-mart'</String> <Operator>import</Operator> &#123;Picker&#125; <Operator>from</Operator> <String>'emoji-mart'</String>
<br /> <br />
<br /><Operator>&lt;</Operator><Variable>Picker</Variable> <br /><Operator>&lt;</Operator><Variable>Picker</Variable>
<br /> emojiSize<Operator>=</Operator>&#123;<Variable>{this.state.emojiSize}</Variable>&#125; <input type='range' data-key='emojiSize' onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} /> <br /> emojiSize<Operator>=</Operator>&#123;<Variable>{this.state.emojiSize}</Variable>&#125; <input type='range' data-key='emojiSize' data-mount={true} onChange={this.handleInput.bind(this)} min='16' max='64' value={this.state.emojiSize} />
<br /> perLine<Operator>=</Operator>&#123;<Variable>{this.state.perLine}</Variable>&#125; {this.state.perLine < 10 ? ' ' : ' '} <input type='range' data-key='perLine' onChange={this.handleInput.bind(this)} min='7' max='16' value={this.state.perLine} /> <br /> perLine<Operator>=</Operator>&#123;<Variable>{this.state.perLine}</Variable>&#125; {this.state.perLine < 10 ? ' ' : ' '} <input type='range' data-key='perLine' onChange={this.handleInput.bind(this)} min='7' max='16' value={this.state.perLine} />
<br /> skin<Operator>=</Operator>&#123;<Variable>{this.state.skin}</Variable>&#125; <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} /> <br /> skin<Operator>=</Operator>&#123;<Variable>{this.state.skin}</Variable>&#125; <input type='range' data-key='skin' onChange={this.handleInput.bind(this)} min='1' max='6' value={this.state.skin} />
<br /> native<Operator>=</Operator>&#123;<Variable>{this.state.native ? 'true' : 'false'}</Variable>&#125;{this.state.native ? ' ' : ''} <input type='checkbox' data-key='native' onChange={this.handleInput.bind(this)} value={this.state.native} />
<br /> set<Operator>=</Operator><String>'{this.state.set}'</String> <br /> set<Operator>=</Operator><String>'{this.state.set}'</String>
<br /> custom<Operator>=</Operator>&#123;<Variable>{'[…]'}</Variable>&#125; <br /> custom<Operator>=</Operator>&#123;<Variable>{'[…]'}</Variable>&#125;
<br /> onClick<Operator>=</Operator>&#123;(<Variable>emoji</Variable>) => console.log(<Variable>emoji</Variable>)&#125; <br /> autoFocus<Operator>=</Operator>&#123;<Variable>{this.state.autoFocus ? 'true' : 'false'}</Variable>&#125;{this.state.autoFocus ? ' ' : ''} <input type='checkbox' data-key='autoFocus' data-mount={true} onChange={this.handleInput.bind(this)} checked={this.state.autoFocus} />
<br /><Operator>/&gt;</Operator> <div style={{ opacity: this.state.exclude.length ? 0.6 : 1 }}> include<Operator>=</Operator>&#91;
{[0, 2, 4, 6, 8].map((i) => {
let category1 = CATEGORIES[i],
category2 = CATEGORIES[i + 1]
return <div key={i}>
<label style={{ width: '200px', display: 'inline-block' }}> <input type='checkbox' data-key='include' data-value={category1} data-mount={true} onChange={this.handleInput.bind(this)} disabled={this.state.exclude.length} /> <String>'{category1}'</String></label>
{category2 && <label><input type='checkbox' data-key='include' data-value={category2} data-mount={true} onChange={this.handleInput.bind(this)} disabled={this.state.exclude.length} /> <String>'{category2}'</String></label>}
</div>
})}
  &#93;
</div>
<div style={{ opacity: this.state.include.length ? 0.6 : 1 }}> exclude<Operator>=</Operator>&#91;
{[0, 2, 4, 6, 8].map((i) => {
let category1 = CATEGORIES[i],
category2 = CATEGORIES[i + 1]
return <div key={i}>
<label style={{ width: '200px', display: 'inline-block' }}> <input type='checkbox' data-key='exclude' data-value={category1} data-mount={true} onChange={this.handleInput.bind(this)} disabled={this.state.include.length} /> <String>'{category1}'</String></label>
{category2 && <label><input type='checkbox' data-key='exclude' data-value={category2} data-mount={true} onChange={this.handleInput.bind(this)} disabled={this.state.include.length} /> <String>'{category2}'</String></label>}
</div>
})}
  &#93;
</div>
<Operator>/&gt;</Operator>
</pre> </pre>
{!this.state.hidden && {!this.state.hidden &&
@ -112,7 +177,13 @@ class Example extends React.Component {
native={this.state.native} native={this.state.native}
set={this.state.set} set={this.state.set}
custom={CUSTOM_EMOJIS} custom={CUSTOM_EMOJIS}
onClick={(emoji) => console.log(emoji)} autoFocus={this.state.autoFocus}
include={this.state.include}
exclude={this.state.exclude}
onClick={(emoji) => {
this.setState({ currentEmoji: emoji.id })
console.log(emoji)
}}
/> />
} }
@ -133,11 +204,11 @@ class Example extends React.Component {
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 60 }}> <span style={{ display: 'inline-block', marginTop: 60 }}>
<Emoji {Emoji({
emoji='thumbsup' emoji: this.state.currentEmoji,
size={64} size: 64,
set={this.state.set} set: this.state.set,
/> })}
</span> </span>
</div> </div>
@ -156,11 +227,11 @@ class Example extends React.Component {
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 40 }}> <span style={{ display: 'inline-block', marginTop: 40 }}>
<Emoji {Emoji({
emoji=':thumbsup:' emoji: `:${this.state.currentEmoji}:`,
size={64} size: 64,
set={this.state.set} set: this.state.set,
/> })}
</span> </span>
</div> </div>
@ -179,11 +250,11 @@ class Example extends React.Component {
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 40 }}> <span style={{ display: 'inline-block', marginTop: 40 }}>
<Emoji {Emoji({
emoji=':thumbsup::skin-tone-3:' emoji: `:${this.state.currentEmoji}::skin-tone-3:`,
size={64} size: 64,
set={this.state.set} set: this.state.set,
/> })}
</span> </span>
</div> </div>
@ -203,11 +274,11 @@ class Example extends React.Component {
</pre> </pre>
<span style={{ display: 'inline-block', marginTop: 60 }}> <span style={{ display: 'inline-block', marginTop: 60 }}>
<Emoji {Emoji({
emoji=':thumbsup::skin-tone-3:' emoji: `:${this.state.currentEmoji}::skin-tone-3:`,
size={64} size: 64,
native={true} native: true,
/> })}
</span> </span>
</div> </div>
</div> </div>

9
package.json
View File

@ -29,8 +29,8 @@
"babel-plugin-transform-object-rest-spread": "6.8.0", "babel-plugin-transform-object-rest-spread": "6.8.0",
"babel-preset-es2015": "6.6.0", "babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0", "babel-preset-react": "6.5.0",
"emoji-datasource": "2.4.4", "emoji-datasource": "^3.0.0",
"emojilib": "2.0.2", "emojilib": "^2.2.1",
"inflection": "1.10.0", "inflection": "1.10.0",
"jasmine-core": "^2.5.2", "jasmine-core": "^2.5.2",
"karma": "^1.4.0", "karma": "^1.4.0",
@ -40,9 +40,8 @@
"karma-webpack": "^2.0.2", "karma-webpack": "^2.0.2",
"mkdirp": "0.5.1", "mkdirp": "0.5.1",
"prop-types": "^15.5.8", "prop-types": "^15.5.8",
"react": "15.2.0", "react": "^15.5.4",
"react-addons-test-utils": "15.2.0", "react-dom": "^15.5.4",
"react-dom": "15.2.0",
"rimraf": "2.5.2", "rimraf": "2.5.2",
"svg-inline-loader": "0.4.1", "svg-inline-loader": "0.4.1",
"svg-inline-react": "1.0.2", "svg-inline-react": "1.0.2",

25
src/components/category.js
View File

@ -125,24 +125,23 @@ export default class Category extends React.Component {
</div> </div>
{emojis && emojis.map((emoji) => {emojis && emojis.map((emoji) =>
<Emoji Emoji({
key={emoji.id || emoji} emoji: emoji,
emoji={emoji} ...emojiProps
{...emojiProps} })
/>
)} )}
{emojis && !emojis.length && {emojis && !emojis.length &&
<div> <div>
<div> <div>
<Emoji {Emoji({
{...emojiProps} ...emojiProps,
size={38} size: 38,
emoji='sleuth_or_spy' emoji: 'sleuth_or_spy',
onOver={null} onOver: null,
onLeave={null} onLeave: null,
onClick={null} onClick: null,
/> })}
</div> </div>
<div className='emoji-mart-no-results-label'> <div className='emoji-mart-no-results-label'>

104
src/components/emoji.js
View File

@ -4,113 +4,101 @@ import data from '../../data'
import { getData, getSanitizedData, unifiedToNative } from '../utils' import { getData, getSanitizedData, unifiedToNative } from '../utils'
const SHEET_COLUMNS = 41 const SHEET_COLUMNS = 49
export default class Emoji extends React.Component { const _getPosition = (props) => {
constructor(props) { var { sheet_x, sheet_y } = _getData(props),
super(props)
this.hasSkinVariations = !!this.getData().skin_variations
}
shouldComponentUpdate(nextProps) {
return (
this.hasSkinVariations && nextProps.skin != this.props.skin ||
nextProps.size != this.props.size ||
nextProps.native != this.props.native ||
nextProps.set != this.props.set ||
nextProps.emoji != this.props.emoji
)
}
getPosition() {
var { sheet_x, sheet_y } = this.getData(),
multiply = 100 / (SHEET_COLUMNS - 1) multiply = 100 / (SHEET_COLUMNS - 1)
return `${multiply * sheet_x}% ${multiply * sheet_y}%` return `${multiply * sheet_x}% ${multiply * sheet_y}%`
} }
getData() { const _getData = (props) => {
var { emoji, skin, set } = this.props var { emoji, skin, set } = props
return getData(emoji, skin, set) return getData(emoji, skin, set)
} }
getSanitizedData() { const _getSanitizedData = (props) => {
var { emoji, skin, set } = this.props var { emoji, skin, set } = props
return getSanitizedData(emoji, skin, set) return getSanitizedData(emoji, skin, set)
} }
handleClick(e) { const _handleClick = (e, props) => {
if (!this.props.onClick) { return } if (!props.onClick) { return }
var { onClick } = this.props, var { onClick } = props,
emoji = this.getSanitizedData() emoji = _getSanitizedData(props)
onClick(emoji, e) onClick(emoji, e)
} }
handleOver(e) { const _handleOver = (e, props) => {
if (!this.props.onOver) { return } if (!props.onOver) { return }
var { onOver } = this.props, var { onOver } = props,
emoji = this.getSanitizedData() emoji = _getSanitizedData(props)
onOver(emoji, e) onOver(emoji, e)
} }
handleLeave(e) { const _handleLeave = (e, props) => {
if (!this.props.onLeave) { return } if (!props.onLeave) { return }
var { onLeave } = this.props, var { onLeave } = props,
emoji = this.getSanitizedData() emoji = _getSanitizedData(props)
onLeave(emoji, e) onLeave(emoji, e)
} }
render() { const Emoji = (props) => {
var { set, size, sheetSize, native, forceSize, onOver, onLeave, backgroundImageFn } = this.props, for (let k in Emoji.defaultProps) {
{ unified, custom, imageUrl } = this.getData(), if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
props[k] = Emoji.defaultProps[k]
}
}
var { unified, custom, imageUrl } = _getData(props),
style = {}, style = {},
children = this.props.children children = props.children
if (!unified && !custom) { if (!unified && !custom) {
return null return null
} }
if (native && unified) { if (props.native && unified) {
style = { fontSize: size } style = { fontSize: props.size }
children = unifiedToNative(unified) children = unifiedToNative(unified)
if (forceSize) { if (props.forceSize) {
style.display = 'inline-block' style.display = 'inline-block'
style.width = size style.width = props.size
style.height = size style.height = props.size
} }
} else if (custom) { } else if (custom) {
style = { style = {
width: size, width: props.size,
height: size, height: props.size,
display: 'inline-block', display: 'inline-block',
backgroundImage: `url(${imageUrl})`, backgroundImage: `url(${imageUrl})`,
backgroundSize: '100%' backgroundSize: '100%',
} }
} else { } else {
style = { style = {
width: size, width: props.size,
height: size, height: props.size,
display: 'inline-block', display: 'inline-block',
backgroundImage: `url(${backgroundImageFn(set, sheetSize)})`, backgroundImage: `url(${props.backgroundImageFn(props.set, props.sheetSize)})`,
backgroundSize: `${100 * SHEET_COLUMNS}%`, backgroundSize: `${100 * SHEET_COLUMNS}%`,
backgroundPosition: this.getPosition(), backgroundPosition: _getPosition(props),
} }
} }
return <span return <span
onClick={this.handleClick.bind(this)} key={props.emoji.id || props.emoji}
onMouseEnter={this.handleOver.bind(this)} onClick={(e) => _handleClick(e, props)}
onMouseLeave={this.handleLeave.bind(this)} onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)}
className='emoji-mart-emoji'> className='emoji-mart-emoji'>
<span style={style}>{children}</span> <span style={style}>{children}</span>
</span> </span>
} }
}
Emoji.propTypes = { Emoji.propTypes = {
onOver: PropTypes.func, onOver: PropTypes.func,
@ -135,8 +123,10 @@ Emoji.defaultProps = {
sheetSize: 64, sheetSize: 64,
native: false, native: false,
forceSize: false, forceSize: false,
backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource@${EMOJI_DATASOURCE_VERSION}/sheet_${set}_${sheetSize}.png`), backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets/${sheetSize}.png`),
onOver: (() => {}), onOver: (() => {}),
onLeave: (() => {}), onLeave: (() => {}),
onClick: (() => {}), onClick: (() => {}),
} }
export default Emoji

12
src/components/picker.js
View File

@ -58,8 +58,8 @@ export default class Picker extends React.Component {
} }
for (let category of data.categories) { for (let category of data.categories) {
let isIncluded = props.include == undefined ? true : props.include.indexOf(category.name.toLowerCase()) > -1 let isIncluded = props.include && props.include.length ? props.include.indexOf(category.name.toLowerCase()) > -1 : true
let isExcluded = props.exclude == undefined ? false : props.exclude.indexOf(category.name.toLowerCase()) > -1 let isExcluded = props.exclude && props.exclude.length ? props.exclude.indexOf(category.name.toLowerCase()) > -1 : false
if (!isIncluded || isExcluded) { continue } if (!isIncluded || isExcluded) { continue }
if (props.emojisToShowFilter) { if (props.emojisToShowFilter) {
@ -86,8 +86,8 @@ export default class Picker extends React.Component {
} }
} }
let includeRecent = props.include == undefined ? true : props.include.indexOf('recent') > -1 let includeRecent = props.include && props.include.length ? props.include.indexOf('recent') > -1 : true
let excludeRecent = props.exclude == undefined ? false : props.exclude.indexOf('recent') > -1 let excludeRecent = props.exclude && props.exclude.length ? props.exclude.indexOf('recent') > -1 : false
if (includeRecent && !excludeRecent) { if (includeRecent && !excludeRecent) {
this.categories.unshift(RECENT_CATEGORY) this.categories.unshift(RECENT_CATEGORY)
} }
@ -261,6 +261,8 @@ export default class Picker extends React.Component {
} }
this.forceUpdate() this.forceUpdate()
this.refs.scroll.scrollTop = 0
this.handleScroll()
} }
handleAnchorClick(category, i) { handleAnchorClick(category, i) {
@ -326,7 +328,6 @@ export default class Picker extends React.Component {
/> />
</div> </div>
<div ref="scroll" className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
<Search <Search
ref='search' ref='search'
onSearch={this.handleSearch.bind(this)} onSearch={this.handleSearch.bind(this)}
@ -338,6 +339,7 @@ export default class Picker extends React.Component {
autoFocus={autoFocus} autoFocus={autoFocus}
/> />
<div ref="scroll" className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
{this.getCategories().map((category, i) => { {this.getCategories().map((category, i) => {
return <Category return <Category
ref={`category-${i}`} ref={`category-${i}`}

2
src/components/pickerSpec.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import TestUtils from 'react-addons-test-utils'; import TestUtils from 'react-dom/test-utils';
import Picker from './picker'; import Picker from './picker';
const { const {

18
src/components/preview.js
View File

@ -29,11 +29,11 @@ export default class Preview extends React.Component {
return <div className='emoji-mart-preview'> return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'> <div className='emoji-mart-preview-emoji'>
<Emoji {Emoji({
key={emoji.id} key: emoji.id,
emoji={emoji} emoji: emoji,
{...emojiProps} ...emojiProps,
/> })}
</div> </div>
<div className='emoji-mart-preview-data'> <div className='emoji-mart-preview-data'>
@ -53,10 +53,10 @@ export default class Preview extends React.Component {
} else { } else {
return <div className='emoji-mart-preview'> return <div className='emoji-mart-preview'>
<div className='emoji-mart-preview-emoji'> <div className='emoji-mart-preview-emoji'>
<Emoji {idleEmoji && idleEmoji.length && Emoji({
emoji={idleEmoji} emoji: idleEmoji,
{...emojiProps} ...emojiProps,
/> })}
</div> </div>
<div className='emoji-mart-preview-data'> <div className='emoji-mart-preview-data'>

5
src/components/search.js
View File

@ -23,14 +23,15 @@ export default class Search extends React.Component {
render() { render() {
var { i18n, autoFocus } = this.props var { i18n, autoFocus } = this.props
return <input return <div className='emoji-mart-search'>
<input
ref='input' ref='input'
type='text' type='text'
onChange={this.handleChange.bind(this)} onChange={this.handleChange.bind(this)}
placeholder={i18n.search} placeholder={i18n.search}
className='emoji-mart-search'
autoFocus={autoFocus} autoFocus={autoFocus}
/> />
</div>
} }
} }

4
src/components/skins.js
View File

@ -16,8 +16,10 @@ export default class Skins extends React.Component {
if (!this.state.opened) { if (!this.state.opened) {
this.setState({ opened: true }) this.setState({ opened: true })
} else { } else {
onChange(skin)
this.setState({ opened: false }) this.setState({ opened: false })
if (skin != this.props.skin) {
onChange(skin)
}
} }
} }

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

@ -6,6 +6,8 @@ import { getData, getSanitizedData, intersect } from '.'
var index = {} var index = {}
var emojisList = {} var emojisList = {}
var emoticonsList = {} var emoticonsList = {}
var previousInclude = null
var previousExclude = null
for (let emoji in data.emojis) { for (let emoji in data.emojis) {
let emojiData = data.emojis[emoji], let emojiData = data.emojis[emoji],
@ -40,6 +42,10 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
pool = data.emojis pool = data.emojis
if (value.length) { if (value.length) {
if (value == '-' || value == '-1') {
return [emojisList['-1']]
}
var values = value.toLowerCase().split(/[\s|,|\-|_]+/), var values = value.toLowerCase().split(/[\s|,|\-|_]+/),
allResults = [] allResults = []
@ -50,15 +56,23 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
if ((include && include.length) || (exclude && exclude.length)) { if ((include && include.length) || (exclude && exclude.length)) {
pool = {} pool = {}
if (previousInclude != include.sort().join(',') || previousExclude != exclude.sort().join(',')) {
previousInclude = include.sort().join(',')
previousExclude = exclude.sort().join(',')
index = {}
}
for (let category of data.categories) { for (let category of data.categories) {
let isIncluded = include == undefined ? true : include.indexOf(category.name.toLowerCase()) > -1 let isIncluded = include && include.length ? include.indexOf(category.name.toLowerCase()) > -1 : true
let isExcluded = exclude == undefined ? false : exclude.indexOf(category.name.toLowerCase()) > -1 let isExcluded = exclude && exclude.length ? exclude.indexOf(category.name.toLowerCase()) > -1 : false
if (!isIncluded || isExcluded) { continue } if (!isIncluded || isExcluded) { continue }
for (let emojiId of category.emojis) { for (let emojiId of category.emojis) {
pool[emojiId] = data.emojis[emojiId] pool[emojiId] = data.emojis[emojiId]
} }
} }
} else if (previousInclude || previousExclude) {
index = {}
} }
allResults = values.map((value) => { allResults = values.map((value) => {
@ -66,10 +80,6 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
aIndex = index, aIndex = index,
length = 0 length = 0
if (value == '-' || value == '-1') {
return [emojisList['-1']]
}
for (let char of value.split('')) { for (let char of value.split('')) {
length++ length++

10
src/utils/frequently.js
View File

@ -20,11 +20,12 @@ const DEFAULTS = [
] ]
let frequently = store.get('frequently') let frequently = store.get('frequently')
let defaults = {}
function add(emoji) { function add(emoji) {
var { id } = emoji var { id } = emoji
frequently || (frequently = {}) frequently || (frequently = defaults)
frequently[id] || (frequently[id] = 0) frequently[id] || (frequently[id] = 0)
frequently[id] += 1 frequently[id] += 1
@ -34,10 +35,11 @@ function add(emoji) {
function get(perLine) { function get(perLine) {
if (!frequently) { if (!frequently) {
frequently = {} defaults = {}
Array(perLine).fill('').forEach((_, i) => { return Array(perLine).fill('').map((_, i) => {
frequently[DEFAULTS[i]] = perLine - i defaults[DEFAULTS[i]] = perLine - i
return DEFAULTS[i]
}) })
} }

3
src/utils/index.js
View File

@ -99,8 +99,7 @@ function getData(emoji, skin, set) {
emojiData = JSON.parse(JSON.stringify(emojiData)) emojiData = JSON.parse(JSON.stringify(emojiData))
var skinKey = SKINS[skin - 1], var skinKey = SKINS[skin - 1],
variationKey = `${emojiData.unified}-${skinKey}`, variationData = emojiData.skin_variations[skinKey]
variationData = emojiData.skin_variations[variationKey]
if (!variationData.variations && emojiData.variations) { if (!variationData.variations && emojiData.variations) {
delete emojiData.variations delete emojiData.variations

989
yarn.lock
View File

File diff suppressed because it is too large Load Diff