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 fix-useless-rerenders

nolan/hinaloe-test
Etienne Lemay 2017-09-30 11:38:34 -04:00
parent 22d1a0375d 045c77631d
commit 3024f9e190
24 changed files with 149 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,3 @@
node_modules/ node_modules/
data/data.js
dist/ dist/
bundle.js bundle.js

3
README.md
View File

@ -219,7 +219,8 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
## Development ## Development
```sh ```sh
$ yarn run build:data $ yarn run build:data
$ yarn storybook $ yarn start
$ yarn run storybook
``` ```
## 🎩 Hat tips! ## 🎩 Hat tips!

11
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "emoji-mart", "name": "emoji-mart",
"version": "1.0.1", "version": "2.0.1",
"description": "Customizable Slack-like emoji picker for React", "description": "Customizable Slack-like emoji picker for React",
"main": "dist/index.js", "main": "dist/index.js",
"repository": { "repository": {
@ -61,13 +61,12 @@
"webpack": "^3.6.0" "webpack": "^3.6.0"
}, },
"scripts": { "scripts": {
"clean": "rimraf data/data.js dist/", "clean": "rm -rf dist/",
"clean:dist": "rm -rf dist/",
"build:data": "node scripts/build-data", "build:data": "node scripts/build-data",
"build:dist": "npm run clean:dist && babel src --out-dir dist --copy-files --ignore webpack.config.js", "build:dist": "npm run clean && babel src --out-dir dist --copy-files --ignore webpack.config.js",
"build": "npm run build:data && npm run build:dist", "build": "npm run build:dist && npm run build:data",
"watch": "babel src --watch --out-dir dist --copy-files --ignore webpack.config.js", "watch": "babel src --watch --out-dir dist --copy-files --ignore webpack.config.js",
"start": "npm run storybook", "start": "npm run watch",
"stats": "webpack --config ./src/webpack.config.js --json > stats.json", "stats": "webpack --config ./src/webpack.config.js --json > stats.json",
"react:clean": "rimraf node_modules/{react,react-dom,react-addons-test-utils}", "react:clean": "rimraf node_modules/{react,react-dom,react-addons-test-utils}",
"react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14 --save-dev", "react:14": "npm run react:clean && npm i react@^0.14 react-dom@^0.14 react-addons-test-utils@^0.14 --save-dev",

14
scripts/build-data.js
View File

@ -134,13 +134,13 @@ emojiData.forEach((datum) => {
}) })
var flags = data.categories[categoriesIndex['Flags']] var flags = data.categories[categoriesIndex['Flags']]
flags.emojis.sort() flags.emojis = flags.emojis.filter((flag) => {
// Until browsers support Flag UN
if (flag == 'flag-un') return
return true
}).sort()
mkdirp('data', (err) => { const stringified = JSON.stringify(data).replace(/\"([A-Za-z_]+)\":/g, '$1:')
fs.writeFile('dist/data/data.js', `module.exports = ${stringified}`, (err) => {
if (err) throw err if (err) throw err
const stringified = JSON.stringify(data).replace(/\"([A-Za-z_]+)\":/g, '$1:')
fs.writeFile('data/data.js', `module.exports = ${stringified}`, (err) => {
if (err) throw err
})
}) })

7
src/components/anchors.js
View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import * as SVGs from '../svgs' import SVGs from '../svgs'
export default class Anchors extends React.PureComponent { export default class Anchors extends React.PureComponent {
constructor(props) { constructor(props) {
@ -32,8 +32,7 @@ export default class Anchors extends React.PureComponent {
return <div className='emoji-mart-anchors'> return <div className='emoji-mart-anchors'>
{categories.map((category, i) => { {categories.map((category, i) => {
var { name, anchor } = category, var { name, anchor } = category,
isSelected = name == selected, isSelected = name == selected
SVGElement = SVGs[name]
if (anchor === false) { if (anchor === false) {
return null return null
@ -48,7 +47,7 @@ export default class Anchors extends React.PureComponent {
className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`} className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
style={{ color: isSelected ? color : null }} style={{ color: isSelected ? color : null }}
> >
<SVGElement /> <div dangerouslySetInnerHTML={{ __html: SVGs[name] }}></div>
<span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span> <span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
</span> </span>
) )

11
src/components/emoji.js
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import data from '../../data' import data from '../data'
import { getData, getSanitizedData, unifiedToNative } from '../utils' import { getData, getSanitizedData, unifiedToNative } from '../utils'
@ -56,13 +56,15 @@ const Emoji = (props) => {
var { unified, custom, imageUrl } = _getData(props), var { unified, custom, imageUrl } = _getData(props),
style = {}, style = {},
children = props.children children = props.children,
className = 'emoji-mart-emoji'
if (!unified && !custom) { if (!unified && !custom) {
return null return null
} }
if (props.native && unified) { if (props.native && unified) {
className += ' emoji-mart-emoji-native'
style = { fontSize: props.size } style = { fontSize: props.size }
children = unifiedToNative(unified) children = unifiedToNative(unified)
@ -72,12 +74,13 @@ const Emoji = (props) => {
style.height = props.size style.height = props.size
} }
} else if (custom) { } else if (custom) {
className += ' emoji-mart-emoji-custom'
style = { style = {
width: props.size, width: props.size,
height: props.size, height: props.size,
display: 'inline-block', display: 'inline-block',
backgroundImage: `url(${imageUrl})`, backgroundImage: `url(${imageUrl})`,
backgroundSize: '100%', backgroundSize: 'contain',
} }
} else { } else {
let setHasEmoji = _getData(props)[`has_img_${props.set}`] let setHasEmoji = _getData(props)[`has_img_${props.set}`]
@ -101,7 +104,7 @@ const Emoji = (props) => {
onClick={(e) => _handleClick(e, props)} onClick={(e) => _handleClick(e, props)}
onMouseEnter={(e) => _handleOver(e, props)} onMouseEnter={(e) => _handleOver(e, props)}
onMouseLeave={(e) => _handleLeave(e, props)} onMouseLeave={(e) => _handleLeave(e, props)}
className='emoji-mart-emoji'> className={className}>
<span style={style}>{children}</span> <span style={style}>{children}</span>
</span> </span>
} }

8
src/components/picker.js
View File

@ -2,12 +2,11 @@ import '../vendor/raf-polyfill'
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import measureScrollbar from 'measure-scrollbar' import data from '../data'
import data from '../../data'
import store from '../utils/store' import store from '../utils/store'
import frequently from '../utils/frequently' import frequently from '../utils/frequently'
import { deepMerge } from '../utils' import { deepMerge, measureScrollbar } from '../utils'
import { Anchors, Category, Emoji, Preview, Search } from '.' import { Anchors, Category, Emoji, Preview, Search } from '.'
@ -62,7 +61,7 @@ export default class Picker extends React.PureComponent {
this.hideRecent = true this.hideRecent = true
if (props.include != undefined) { if (props.include != undefined) {
data.categories.sort((a, b) => { allCategories.sort((a, b) => {
let aName = a.name.toLowerCase() let aName = a.name.toLowerCase()
let bName = b.name.toLowerCase() let bName = b.name.toLowerCase()
@ -203,6 +202,7 @@ export default class Picker extends React.PureComponent {
component.forceUpdate() component.forceUpdate()
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
if (!this.scroll) return
component.memoizeSize() component.memoizeSize()
if (maxMargin == component.maxMargin) return if (maxMargin == component.maxMargin) return

8
data/index.js → src/data/index.js
View File

@ -1,5 +1,5 @@
var buildSearch = require('../src/utils/build-search') import buildSearch from '../utils/build-search'
var data = require('./data') import data from './data'
function uncompress (list) { function uncompress (list) {
for (var short_name in list) { for (var short_name in list) {
@ -21,12 +21,10 @@ function uncompress (list) {
keywords: datum.keywords, keywords: datum.keywords,
emoticons: datum.emoticons emoticons: datum.emoticons
}) })
datum.search = datum.search.join(',')
} }
} }
uncompress(data.emojis) uncompress(data.emojis)
uncompress(data.skins) uncompress(data.skins)
module.exports = data export default data

1
src/svgs/activity.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 828 B

7
src/svgs/custom.svg
View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<g transform="translate(2.000000, 1.000000)">
<rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5"></rect>
<rect id="Rectangle" transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect>
<rect id="Rectangle" transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 549 B

1
src/svgs/flags.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 260 B

1
src/svgs/foods.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 949 B

62
src/svgs/index.js
View File

@ -1,10 +1,52 @@
export { default as Activity } from './activity.svg' const SVGs = {
export { default as Flags } from './flags.svg' Activity: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
export { default as Foods } from './foods.svg' <path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"/>
export { default as Nature } from './nature.svg' </svg>`,
export { default as Objects } from './objects.svg'
export { default as People } from './people.svg' Custom: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
export { default as Places } from './places.svg' <g transform="translate(2.000000, 1.000000)">
export { default as Recent } from './recent.svg' <rect id="Rectangle" x="8" y="0" width="3" height="21" rx="1.5"></rect>
export { default as Symbols } from './symbols.svg' <rect id="Rectangle" transform="translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect>
export { default as Custom } from './custom.svg' <rect id="Rectangle" transform="translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) " x="8.343" y="0.049" width="3" height="21" rx="1.5"></rect>
</g>
</svg>`,
Flags: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"/>
</svg>`,
Foods: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"/>
</svg>`,
Nature: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"/>
<path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"/>
</svg>`,
Objects: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"/>
<path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"/>
</svg>`,
People: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/>
<path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"/>
</svg>`,
Places: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"/>
<path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"/>
</svg>`,
Recent: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"/>
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/>
</svg>`,
Symbols: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
<path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76"/>
</svg>`,
}
export default SVGs

1
src/svgs/nature.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"/><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

1
src/svgs/objects.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"/><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

1
src/svgs/people.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 422 B

1
src/svgs/places.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"/><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

1
src/svgs/recent.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"/><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 292 B

1
src/svgs/symbols.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

2
src/utils/build-search.js
View File

@ -22,5 +22,5 @@ module.exports = data => {
addToSearch(data.keywords, false) addToSearch(data.keywords, false)
addToSearch(data.emoticons, false) addToSearch(data.emoticons, false)
return search return search.join(',')
} }

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

@ -1,11 +1,10 @@
import data from '../../data' import data from '../data'
import { getData, getSanitizedData, uniq } from '.' import { getData, getSanitizedData, uniq } from '.'
var originalPool = {}
var index = {} var index = {}
var emojisList = {} var emojisList = {}
var emoticonsList = {} var emoticonsList = {}
var previousInclude = []
var previousExclude = []
for (let emoji in data.emojis) { for (let emoji in data.emojis) {
let emojiData = data.emojis[emoji], let emojiData = data.emojis[emoji],
@ -23,27 +22,29 @@ for (let emoji in data.emojis) {
} }
emojisList[id] = getSanitizedData(id) emojisList[id] = getSanitizedData(id)
originalPool[id] = emojiData
}
function addCustomToPool(custom, pool) {
custom.forEach((emoji) => {
let emojiId = emoji.id || emoji.short_names[0]
if (emojiId && !pool[emojiId]) {
pool[emojiId] = getData(emoji)
emojisList[emojiId] = getSanitizedData(emoji)
}
})
} }
function search(value, { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {}) { function search(value, { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {}) {
addCustomToPool(custom, originalPool)
maxResults || (maxResults = 75) maxResults || (maxResults = 75)
include || (include = []) include || (include = [])
exclude || (exclude = []) exclude || (exclude = [])
custom.forEach(emoji => {
data.emojis[emoji.id] = getData(emoji)
emojisList[emoji.id] = getSanitizedData(emoji)
})
if (custom.length) {
data.categories.push({
name: 'Custom',
emojis: custom.map(emoji => emoji.id)
})
}
var results = null, var results = null,
pool = data.emojis pool = originalPool
if (value.length) { if (value.length) {
if (value == '-' || value == '-1') { if (value == '-' || value == '-1') {
@ -60,12 +61,6 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
if (include.length || exclude.length) { if (include.length || exclude.length) {
pool = {} pool = {}
if (previousInclude != include.sort().join(',') || previousExclude != exclude.sort().join(',')) {
previousInclude = include.sort().join(',')
previousExclude = exclude.sort().join(',')
index = {}
}
data.categories.forEach(category => { data.categories.forEach(category => {
let isIncluded = include && include.length ? include.indexOf(category.name.toLowerCase()) > -1 : true let isIncluded = include && include.length ? include.indexOf(category.name.toLowerCase()) > -1 : true
let isExcluded = exclude && exclude.length ? exclude.indexOf(category.name.toLowerCase()) > -1 : false let isExcluded = exclude && exclude.length ? exclude.indexOf(category.name.toLowerCase()) > -1 : false
@ -75,8 +70,14 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo
category.emojis.forEach(emojiId => pool[emojiId] = data.emojis[emojiId]) category.emojis.forEach(emojiId => pool[emojiId] = data.emojis[emojiId])
}) })
} else if (previousInclude.length || previousExclude.length) {
index = {} 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)
}
}
} }
allResults = values.map((value) => { allResults = values.map((value) => {

42
src/utils/index.js
View File

@ -1,5 +1,5 @@
import buildSearch from './build-search' import buildSearch from './build-search'
import data from '../../data' import data from '../data'
import stringFromCodePoint from '../polyfills/stringFromCodePoint' import stringFromCodePoint from '../polyfills/stringFromCodePoint'
const _JSON = JSON const _JSON = JSON
@ -73,17 +73,6 @@ function getData(emoji, skin, set) {
if (data.emojis.hasOwnProperty(emoji)) { if (data.emojis.hasOwnProperty(emoji)) {
emojiData = data.emojis[emoji] emojiData = data.emojis[emoji]
} }
} else if (emoji.custom) {
emojiData = emoji
emojiData.search = buildSearch({
short_names: emoji.short_names,
name: emoji.name,
keywords: emoji.keywords,
emoticons: emoji.emoticons
})
emojiData.search = emojiData.search.join(',')
} else if (emoji.id) { } else if (emoji.id) {
if (data.short_names.hasOwnProperty(emoji.id)) { if (data.short_names.hasOwnProperty(emoji.id)) {
emoji.id = data.short_names[emoji.id] emoji.id = data.short_names[emoji.id]
@ -95,6 +84,15 @@ function getData(emoji, skin, set) {
} }
} }
if (!Object.keys(emojiData).length) {
emojiData = emoji
emojiData.custom = true
if (!emojiData.search) {
emojiData.search = buildSearch(emoji)
}
}
emojiData.emoticons || (emojiData.emoticons = []) emojiData.emoticons || (emojiData.emoticons = [])
emojiData.variations || (emojiData.variations = []) emojiData.variations || (emojiData.variations = [])
@ -163,11 +161,29 @@ function deepMerge(a, b) {
return o return o
} }
// https://github.com/sonicdoe/measure-scrollbar
function measureScrollbar() {
const div = document.createElement('div')
div.style.width = '100px'
div.style.height = '100px'
div.style.overflow = 'scroll'
div.style.position = 'absolute'
div.style.top = '-9999px'
document.body.appendChild(div)
const scrollbarWidth = div.offsetWidth - div.clientWidth
document.body.removeChild(div)
return scrollbarWidth
}
export { export {
getData, getData,
getSanitizedData, getSanitizedData,
uniq, uniq,
intersect, intersect,
deepMerge, deepMerge,
unifiedToNative unifiedToNative,
measureScrollbar
} }

17
stories/index.js
View File

@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean, number, select, color } from '@storybook/addon-knobs'; import { withKnobs, text, boolean, number, select, color } from '@storybook/addon-knobs';
import { Picker, Emoji, emojiIndex } from '../src'; import { Picker, Emoji, emojiIndex } from '../dist';
import '../css/emoji-mart.css'; import '../css/emoji-mart.css';
const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'] const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
@ -55,10 +55,15 @@ storiesOf('Emoji', module)
storiesOf('Headless Search', module) storiesOf('Headless Search', module)
.addDecorator(withKnobs) .addDecorator(withKnobs)
.add('default', () => ( .add('default', () => {
<div> let results = emojiIndex.search(text('Search', 'christmas'), { custom: CUSTOM_EMOJIS })
{emojiIndex.search(text('Search', 'christmas')).map((o) => { if (!results) { return null }
return <span style={{ fontSize: '2em', marginLeft: '.2em' }}>{o.native}</span>
return <div>
{results.map((emoji) => {
return <span key={emoji.id} style={{ marginLeft: '1.4em' }}>
<Emoji native={true} emoji={emoji} size={48} />
</span>
})} })}
</div> </div>
)); });

4
yarn.lock
View File

@ -3879,10 +3879,6 @@ md5.js@^1.3.4:
hash-base "^3.0.0" hash-base "^3.0.0"
inherits "^2.0.1" inherits "^2.0.1"
measure-scrollbar@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/measure-scrollbar/-/measure-scrollbar-1.0.0.tgz#a7b1019155671192c1a8587ea49669af4f75833d"
media-typer@0.3.0: media-typer@0.3.0:
version "0.3.0" version "0.3.0"
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"