Skip to content

Commit

Permalink
Restructure data and components
Browse files Browse the repository at this point in the history
  • Loading branch information
EtienneLem committed Apr 30, 2018
1 parent 2f5fe61 commit 2e97b1f
Show file tree
Hide file tree
Showing 33 changed files with 365 additions and 340 deletions.
1 change: 0 additions & 1 deletion .gitignore
Expand Up @@ -3,4 +3,3 @@ dist/
dist-es/
stats.json
report.html
/src/data/data.js
65 changes: 39 additions & 26 deletions README.md
Expand Up @@ -73,32 +73,36 @@ categories: {
#### Sheet sizes
Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves files published to [npm](https://www.npmjs.com).

| Set | sheetSize | Size |
| --------- | --------- | -------- |
| apple | 16 | 334 KB |
| apple | 20 | 459 KB |
| apple | 32 | 1.08 MB |
| apple | 64 | 2.94 MB |
| emojione | 16 | 315 KB |
| emojione | 20 | 435 KB |
| emojione | 32 | 1020 KB |
| emojione | 64 | 2.33 MB |
| facebook | 16 | 322 KB |
| facebook | 20 | 439 KB |
| facebook | 32 | 1020 KB |
| facebook | 64 | 2.5 MB |
| google | 16 | 301 KB |
| google | 20 | 409 KB |
| google | 32 | 907 KB |
| google | 64 | 2.17 MB |
| messenger | 16 | 325 KB |
| messenger | 20 | 449 MB |
| messenger | 32 | 1.05 MB |
| messenger | 64 | 2.69 MB |
| twitter | 16 | 288 KB |
| twitter | 20 | 389 KB |
| twitter | 32 | 839 KB |
| twitter | 64 | 1.82 MB |
| Set | Size (`sheetSize: 16`) | Size (`sheetSize: 20`) | Size (`sheetSize: 32`) | Size (`sheetSize: 64`) |
| --------- | ---------------------- | ---------------------- | ---------------------- | ---------------------- |
| apple | 334 KB | 459 KB | 1.08 MB | 2.94 MB |
| emojione | 315 KB | 435 KB | 1020 KB | 2.33 MB |
| facebook | 322 KB | 439 KB | 1020 KB | 2.50 MB |
| google | 301 KB | 409 KB | 907 KB | 2.17 MB |
| messenger | 325 KB | 449 MB | 1.05 MB | 2.69 MB |
| twitter | 288 KB | 389 KB | 839 KB | 1.82 MB |

#### Datasets
While all sets are available by default, you may want to include only a single set data to reduce the size of your bundle.

| Set | Size |
| --------- | ------ |
| all | 551 KB |
| apple | 465 KB |
| emojione | 226 KB |
| facebook | 405 KB |
| google | 450 KB |
| messenger | 197 KB |
| twitter | 466 KB |

To use these data files (or any other custom data), use the `NimblePicker` component:

```js
import data from 'emoji-mart/data/messenger.json'
import { NimblePicker } from 'emoji-mart'

<NimblePicker set='messenger' data={data} />
```

#### Examples of `emoji` object:
```js
Expand Down Expand Up @@ -240,6 +244,15 @@ emojiIndex.search('christmas').map((o) => o.native)
// => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
```

### With custom data
```js
import data from 'emoji-mart/datasets/messenger'
import { NimbleEmojiIndex } from 'emoji-mart'

let emojiIndex = new NimbleEmojiIndex(data)
emojiIndex.search('christmas')
```

## Storage
By default EmojiMart will store user chosen skin and frequently used emojis in `localStorage`. That can however be overwritten should you want to store these in your own storage.

Expand Down
1 change: 1 addition & 0 deletions data/all.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions data/apple.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions data/emojione.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions data/facebook.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions data/google.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions data/messenger.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions data/twitter.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Expand Up @@ -60,13 +60,13 @@
"webpack": "^3.6.0"
},
"scripts": {
"clean": "rm -rf dist/ dist-es/ src/data/data.js",
"clean": "rm -rf dist/ dist-es/",
"build:data": "node scripts/build-data",
"build:dist": "npm run build:cjs && npm run build:es",
"build:cjs": "BABEL_ENV=cjs babel src --out-dir dist --copy-files",
"build:es": "babel src --out-dir dist-es --copy-files",
"build:docs": "cp css/emoji-mart.css docs && webpack --config ./docs/webpack.config.js",
"build": "npm run clean && npm run build:data && npm run build:dist",
"build": "npm run clean && npm run build:dist",
"watch": "BABEL_ENV=cjs babel src --watch --out-dir dist --copy-files",
"start": "npm run watch",
"stats": "webpack --config ./spec/webpack.config.js --json > spec/stats.json",
Expand Down
115 changes: 7 additions & 108 deletions scripts/build-data.js
@@ -1,112 +1,11 @@
var fs = require('fs'),
emojiData = require('emoji-datasource'),
emojiLib = require('emojilib'),
inflection = require('inflection'),
mkdirp = require('mkdirp')
const build = require('./build')
const sets = ['apple', 'emojione', 'facebook', 'google', 'messenger', 'twitter']

var data = { categories: [], emojis: {}, skins: {}, aliases: {} },
categoriesIndex = {}
build({ output: 'data/all.json' })

var categories = [
['Smileys & People', 'people'],
['Animals & Nature', 'nature'],
['Food & Drink', 'foods'],
['Activities', 'activity'],
['Travel & Places', 'places'],
['Objects', 'objects'],
['Symbols', 'symbols'],
['Flags', 'flags'],
]

categories.forEach((category, i) => {
let [name, id] = category
data.categories[i] = { id: id, name: name, emojis: [] }
categoriesIndex[name] = i
})

emojiData.sort((a, b) => {
var aTest = a.sort_order || a.short_name,
bTest = b.sort_order || b.short_name

return aTest - bTest
})

emojiData.forEach((datum) => {
var category = datum.category,
keywords = [],
categoryIndex

if (!datum.category) {
throw new Error('“' + datum.short_name + '” doesn’t have a category')
}

datum.name || (datum.name = datum.short_name.replace(/\-/g, ' '))
datum.name = inflection.titleize(datum.name || '')

if (!datum.name) {
throw new Error('“' + datum.short_name + '” doesn’t have a name')
}

datum.emoticons = datum.texts || []
datum.text = datum.text || ''
delete datum.texts

if (emojiLib.lib[datum.short_name]) {
datum.keywords = emojiLib.lib[datum.short_name].keywords
}

if (datum.category == 'Skin Tones') {
data.skins[datum.short_name] = datum
} else {
categoryIndex = categoriesIndex[category]
data.categories[categoryIndex].emojis.push(datum.short_name)
data.emojis[datum.short_name] = datum
}

datum.short_names.forEach((short_name, i) => {
if (i == 0) {
return
}

data.aliases[short_name] = datum.short_name
sets.forEach((set) => {
build({
output: `data/${set}.json`,
sets: [set],
})

datum.short_names = datum.short_names.filter((i) => i !== datum.short_name)
datum.sheet = [datum.sheet_x, datum.sheet_y]

if (datum.text === '') delete datum.text
if (datum.added_in === '6.0') delete datum.added_in

delete datum.docomo
delete datum.au
delete datum.softbank
delete datum.google
delete datum.image
delete datum.short_name
delete datum.category
delete datum.sort_order
delete datum.sheet_x
delete datum.sheet_y

for (let key in datum) {
let value = datum[key]

if (Array.isArray(value) && !value.length) {
delete datum[key]
}
}
})

var flags = data.categories[categoriesIndex['Flags']]
flags.emojis = flags.emojis
.filter((flag) => {
// Until browsers support Flag UN
if (flag == 'flag-un') return
return true
})
.sort()

const stringified = JSON.stringify(data).replace(/\"([A-Za-z_]+)\":/g, '$1:')
fs.writeFile('src/data/data.js', `export default ${stringified}`, (err) => {
if (err) throw err
})
124 changes: 124 additions & 0 deletions scripts/build.js
@@ -0,0 +1,124 @@
var fs = require('fs'),
emojiLib = require('emojilib'),
inflection = require('inflection'),
mkdirp = require('mkdirp')

var { compress } = require('../src/utils/data')

var categories = [
['Smileys & People', 'people'],
['Animals & Nature', 'nature'],
['Food & Drink', 'foods'],
['Activities', 'activity'],
['Travel & Places', 'places'],
['Objects', 'objects'],
['Symbols', 'symbols'],
['Flags', 'flags'],
]

var sets = ['apple', 'emojione', 'facebook', 'google', 'messenger', 'twitter']

module.exports = (options) => {
delete require.cache[require.resolve('emoji-datasource')]
var emojiData = require('emoji-datasource')

var data = { compressed: true, categories: [], emojis: {}, aliases: {} },
categoriesIndex = {}

categories.forEach((category, i) => {
let [name, id] = category
data.categories[i] = { id: id, name: name, emojis: [] }
categoriesIndex[name] = i
})

emojiData.sort((a, b) => {
var aTest = a.sort_order || a.short_name,
bTest = b.sort_order || b.short_name

return aTest - bTest
})

emojiData.forEach((datum) => {
var category = datum.category,
keywords = [],
categoryIndex

if (!datum.category) {
throw new Error('“' + datum.short_name + '” doesn’t have a category')
}

if (options.sets) {
var keepEmoji = false

options.sets.forEach((set) => {
if (keepEmoji) return
if (datum[`has_img_${set}`]) {
keepEmoji = true
}
})

if (!keepEmoji) {
return
}

sets.forEach((set) => {
if (options.sets.length == 1 || options.sets.indexOf(set) == -1) {
var key = `has_img_${set}`
delete datum[key]
}
})
}

datum.name || (datum.name = datum.short_name.replace(/\-/g, ' '))
datum.name = inflection.titleize(datum.name || '')

if (!datum.name) {
throw new Error('“' + datum.short_name + '” doesn’t have a name')
}

datum.emoticons = datum.texts || []
datum.text = datum.text || ''
delete datum.texts

if (emojiLib.lib[datum.short_name]) {
datum.keywords = emojiLib.lib[datum.short_name].keywords
}

if (datum.category != 'Skin Tones') {
categoryIndex = categoriesIndex[category]
data.categories[categoryIndex].emojis.push(datum.short_name)
data.emojis[datum.short_name] = datum
}

datum.short_names.forEach((short_name, i) => {
if (i == 0) {
return
}

data.aliases[short_name] = datum.short_name
})

delete datum.docomo
delete datum.au
delete datum.softbank
delete datum.google
delete datum.image
delete datum.category
delete datum.sort_order

compress(datum)
})

var flags = data.categories[categoriesIndex['Flags']]
flags.emojis = flags.emojis
.filter((flag) => {
// Until browsers support Flag UN
if (flag == 'flag-un') return
return true
})
.sort()

fs.writeFile(options.output, JSON.stringify(data), (err) => {
if (err) throw err
})
}
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'

import SVGs from '../../svgs'
import SVGs from '../svgs'

export default class Anchors extends React.PureComponent {
constructor(props) {
Expand Down
@@ -1,16 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'

import frequently from '../../utils/frequently'
import { getData } from '../../utils'
import { NimbleEmoji } from '..'
import frequently from '../utils/frequently'
import { getData } from '../utils'
import { NimbleEmoji } from '.'

import {
CategoryPropTypes,
CategoryDefaultProps,
} from '../../utils/shared-props'

export default class NimbleCategory extends React.Component {
export default class Category extends React.Component {
constructor(props) {
super(props)

Expand Down Expand Up @@ -217,8 +212,17 @@ export default class NimbleCategory extends React.Component {
}
}

NimbleCategory.propTypes = {
...CategoryPropTypes,
data: PropTypes.object.isRequired,
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.defaultProps = CategoryDefaultProps

0 comments on commit 2e97b1f

Please sign in to comment.