parent
bae7afb282
commit
f60220870e
1
.babelrc
1
.babelrc
|
@ -23,7 +23,6 @@
|
||||||
|
|
||||||
"transform-object-rest-spread",
|
"transform-object-rest-spread",
|
||||||
"transform-runtime",
|
"transform-runtime",
|
||||||
"transform-react-remove-prop-types",
|
|
||||||
[
|
[
|
||||||
"transform-define", "scripts/define.js"
|
"transform-define", "scripts/define.js"
|
||||||
],
|
],
|
||||||
|
|
26
README.md
26
README.md
|
@ -365,6 +365,32 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
|
||||||
## Not opinionated
|
## Not opinionated
|
||||||
**Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji.
|
**Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji.
|
||||||
|
|
||||||
|
## Removing prop-types in production
|
||||||
|
|
||||||
|
To remove [prop-types](https://github.com/facebook/prop-types) in production, use [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install --save-dev babel-plugin-transform-react-remove-prop-types
|
||||||
|
```
|
||||||
|
|
||||||
|
Then add to your `.babelrc`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
"plugins": [
|
||||||
|
[
|
||||||
|
"transform-react-remove-prop-types",
|
||||||
|
{
|
||||||
|
"removeImport": true,
|
||||||
|
"additionalLibraries": [
|
||||||
|
"../../utils/shared-props"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
You'll also need to ensure that Babel is transpiling `emoji-mart`, e.g. [by not excluding `node_modules` in `babel-loader`](https://github.com/babel/babel-loader#usage).
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
```sh
|
```sh
|
||||||
$ yarn build
|
$ yarn build
|
||||||
|
|
|
@ -36,7 +36,6 @@
|
||||||
"babel-plugin-transform-define": "^1.3.0",
|
"babel-plugin-transform-define": "^1.3.0",
|
||||||
"babel-plugin-transform-es2015-destructuring": "6.9.0",
|
"babel-plugin-transform-es2015-destructuring": "6.9.0",
|
||||||
"babel-plugin-transform-object-rest-spread": "6.8.0",
|
"babel-plugin-transform-object-rest-spread": "6.8.0",
|
||||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.8",
|
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-plugin-transform-runtime": "^6.23.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",
|
||||||
|
|
|
@ -63,7 +63,7 @@ export default class Anchors extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Anchors.propTypes = {
|
Anchors.propTypes /* remove-proptypes */ = {
|
||||||
categories: PropTypes.array,
|
categories: PropTypes.array,
|
||||||
onAnchorClick: PropTypes.func,
|
onAnchorClick: PropTypes.func,
|
||||||
icons: PropTypes.object,
|
icons: PropTypes.object,
|
||||||
|
|
|
@ -211,7 +211,7 @@ export default class Category extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Category.propTypes = {
|
Category.propTypes /* remove-proptypes */ = {
|
||||||
emojis: PropTypes.array,
|
emojis: PropTypes.array,
|
||||||
hasStickyPosition: PropTypes.bool,
|
hasStickyPosition: PropTypes.bool,
|
||||||
name: PropTypes.string.isRequired,
|
name: PropTypes.string.isRequired,
|
||||||
|
|
|
@ -3,7 +3,8 @@ import React from 'react'
|
||||||
import data from '../../../data/all.json'
|
import data from '../../../data/all.json'
|
||||||
import NimbleEmoji from './nimble-emoji'
|
import NimbleEmoji from './nimble-emoji'
|
||||||
|
|
||||||
import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props'
|
import { EmojiPropTypes } from '../../utils/shared-props'
|
||||||
|
import { EmojiDefaultProps } from '../../utils/shared-default-props'
|
||||||
|
|
||||||
const Emoji = (props) => {
|
const Emoji = (props) => {
|
||||||
for (let k in Emoji.defaultProps) {
|
for (let k in Emoji.defaultProps) {
|
||||||
|
@ -15,7 +16,7 @@ const Emoji = (props) => {
|
||||||
return NimbleEmoji({ ...props })
|
return NimbleEmoji({ ...props })
|
||||||
}
|
}
|
||||||
|
|
||||||
Emoji.propTypes = EmojiPropTypes
|
Emoji.propTypes /* remove-proptypes */ = EmojiPropTypes
|
||||||
Emoji.defaultProps = { ...EmojiDefaultProps, data }
|
Emoji.defaultProps = { ...EmojiDefaultProps, data }
|
||||||
|
|
||||||
export default Emoji
|
export default Emoji
|
||||||
|
|
|
@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
|
||||||
|
|
||||||
import { getData, getSanitizedData, unifiedToNative } from '../../utils'
|
import { getData, getSanitizedData, unifiedToNative } from '../../utils'
|
||||||
import { uncompress } from '../../utils/data'
|
import { uncompress } from '../../utils/data'
|
||||||
import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props'
|
import { EmojiPropTypes } from '../../utils/shared-props'
|
||||||
|
import { EmojiDefaultProps } from '../../utils/shared-default-props'
|
||||||
|
|
||||||
const _getData = (props) => {
|
const _getData = (props) => {
|
||||||
var { emoji, skin, set, data } = props
|
var { emoji, skin, set, data } = props
|
||||||
|
@ -191,7 +192,10 @@ const NimbleEmoji = (props) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
NimbleEmoji.propTypes = { ...EmojiPropTypes, data: PropTypes.object.isRequired }
|
NimbleEmoji.propTypes /* remove-proptypes */ = {
|
||||||
|
...EmojiPropTypes,
|
||||||
|
data: PropTypes.object.isRequired,
|
||||||
|
}
|
||||||
NimbleEmoji.defaultProps = EmojiDefaultProps
|
NimbleEmoji.defaultProps = EmojiDefaultProps
|
||||||
|
|
||||||
export default NimbleEmoji
|
export default NimbleEmoji
|
||||||
|
|
|
@ -26,7 +26,7 @@ export default class NotFound extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
NotFound.propTypes = {
|
NotFound.propTypes /* remove-proptypes */ = {
|
||||||
notFound: PropTypes.func.isRequired,
|
notFound: PropTypes.func.isRequired,
|
||||||
notFoundString: PropTypes.string.isRequired,
|
notFoundString: PropTypes.string.isRequired,
|
||||||
emojiProps: PropTypes.object.isRequired,
|
emojiProps: PropTypes.object.isRequired,
|
||||||
|
|
|
@ -8,12 +8,13 @@ import store from '../../utils/store'
|
||||||
import frequently from '../../utils/frequently'
|
import frequently from '../../utils/frequently'
|
||||||
import { deepMerge, measureScrollbar } from '../../utils'
|
import { deepMerge, measureScrollbar } from '../../utils'
|
||||||
import { uncompress } from '../../utils/data'
|
import { uncompress } from '../../utils/data'
|
||||||
import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props'
|
import { PickerPropTypes } from '../../utils/shared-props'
|
||||||
|
|
||||||
import Anchors from '../anchors'
|
import Anchors from '../anchors'
|
||||||
import Category from '../category'
|
import Category from '../category'
|
||||||
import Preview from '../preview'
|
import Preview from '../preview'
|
||||||
import Search from '../search'
|
import Search from '../search'
|
||||||
|
import { PickerDefaultProps } from '../../utils/shared-default-props'
|
||||||
|
|
||||||
const I18N = {
|
const I18N = {
|
||||||
search: 'Search',
|
search: 'Search',
|
||||||
|
@ -592,7 +593,7 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
NimblePicker.propTypes = {
|
NimblePicker.propTypes /* remove-proptypes */ = {
|
||||||
...PickerPropTypes,
|
...PickerPropTypes,
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,8 @@ import React from 'react'
|
||||||
import data from '../../../data/all.json'
|
import data from '../../../data/all.json'
|
||||||
import NimblePicker from './nimble-picker'
|
import NimblePicker from './nimble-picker'
|
||||||
|
|
||||||
import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props'
|
import { PickerPropTypes } from '../../utils/shared-props'
|
||||||
|
import { PickerDefaultProps } from '../../utils/shared-default-props'
|
||||||
|
|
||||||
export default class Picker extends React.PureComponent {
|
export default class Picker extends React.PureComponent {
|
||||||
render() {
|
render() {
|
||||||
|
@ -11,5 +12,5 @@ export default class Picker extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Picker.propTypes = PickerPropTypes
|
Picker.propTypes /* remove-proptypes */ = PickerPropTypes
|
||||||
Picker.defaultProps = { ...PickerDefaultProps, data }
|
Picker.defaultProps = { ...PickerDefaultProps, data }
|
||||||
|
|
|
@ -113,7 +113,7 @@ export default class Preview extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Preview.propTypes = {
|
Preview.propTypes /* remove-proptypes */ = {
|
||||||
showSkinTones: PropTypes.bool,
|
showSkinTones: PropTypes.bool,
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
emoji: PropTypes.string.isRequired,
|
emoji: PropTypes.string.isRequired,
|
||||||
|
|
|
@ -89,7 +89,7 @@ export default class Search extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Search.propTypes = {
|
Search.propTypes /* remove-proptypes */ = {
|
||||||
onSearch: PropTypes.func,
|
onSearch: PropTypes.func,
|
||||||
maxResults: PropTypes.number,
|
maxResults: PropTypes.number,
|
||||||
emojisToShowFilter: PropTypes.func,
|
emojisToShowFilter: PropTypes.func,
|
||||||
|
|
|
@ -39,7 +39,7 @@ export default class SkinsDot extends Skins {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SkinsDot.propTypes = {
|
SkinsDot.propTypes /* remove-proptypes */ = {
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
skin: PropTypes.number.isRequired,
|
skin: PropTypes.number.isRequired,
|
||||||
i18n: PropTypes.object,
|
i18n: PropTypes.object,
|
||||||
|
|
|
@ -58,7 +58,7 @@ export default class SkinsEmoji extends Skins {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
SkinsEmoji.propTypes = {
|
SkinsEmoji.propTypes /* remove-proptypes */ = {
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
skin: PropTypes.number.isRequired,
|
skin: PropTypes.number.isRequired,
|
||||||
emojiProps: PropTypes.object.isRequired,
|
emojiProps: PropTypes.object.isRequired,
|
||||||
|
|
|
@ -30,7 +30,7 @@ export default class Skins extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Skins.propTypes = {
|
Skins.propTypes /* remove-proptypes */ = {
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
skin: PropTypes.number.isRequired,
|
skin: PropTypes.number.isRequired,
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
const EmojiDefaultProps = {
|
||||||
|
skin: 1,
|
||||||
|
set: 'apple',
|
||||||
|
sheetSize: 64,
|
||||||
|
sheetColumns: 52,
|
||||||
|
sheetRows: 52,
|
||||||
|
native: false,
|
||||||
|
forceSize: false,
|
||||||
|
tooltip: false,
|
||||||
|
backgroundImageFn: (set, sheetSize) =>
|
||||||
|
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
|
||||||
|
onOver: () => {},
|
||||||
|
onLeave: () => {},
|
||||||
|
onClick: () => {},
|
||||||
|
}
|
||||||
|
|
||||||
|
const PickerDefaultProps = {
|
||||||
|
onClick: () => {},
|
||||||
|
onSelect: () => {},
|
||||||
|
onSkinChange: () => {},
|
||||||
|
emojiSize: 24,
|
||||||
|
perLine: 9,
|
||||||
|
i18n: {},
|
||||||
|
style: {},
|
||||||
|
title: 'Emoji Mart™',
|
||||||
|
emoji: 'department_store',
|
||||||
|
color: '#ae65c5',
|
||||||
|
set: EmojiDefaultProps.set,
|
||||||
|
skin: null,
|
||||||
|
defaultSkin: EmojiDefaultProps.skin,
|
||||||
|
native: EmojiDefaultProps.native,
|
||||||
|
sheetSize: EmojiDefaultProps.sheetSize,
|
||||||
|
backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
|
||||||
|
emojisToShowFilter: null,
|
||||||
|
showPreview: true,
|
||||||
|
showSkinTones: true,
|
||||||
|
emojiTooltip: EmojiDefaultProps.tooltip,
|
||||||
|
autoFocus: false,
|
||||||
|
custom: [],
|
||||||
|
skinEmoji: '',
|
||||||
|
notFound: () => {},
|
||||||
|
notFoundEmoji: 'sleuth_or_spy',
|
||||||
|
icons: {},
|
||||||
|
}
|
||||||
|
|
||||||
|
export { PickerDefaultProps, EmojiDefaultProps }
|
|
@ -26,22 +26,6 @@ const EmojiPropTypes = {
|
||||||
emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
const EmojiDefaultProps = {
|
|
||||||
skin: 1,
|
|
||||||
set: 'apple',
|
|
||||||
sheetSize: 64,
|
|
||||||
sheetColumns: 52,
|
|
||||||
sheetRows: 52,
|
|
||||||
native: false,
|
|
||||||
forceSize: false,
|
|
||||||
tooltip: false,
|
|
||||||
backgroundImageFn: (set, sheetSize) =>
|
|
||||||
`https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
|
|
||||||
onOver: () => {},
|
|
||||||
onLeave: () => {},
|
|
||||||
onClick: () => {},
|
|
||||||
}
|
|
||||||
|
|
||||||
const PickerPropTypes = {
|
const PickerPropTypes = {
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
onSelect: PropTypes.func,
|
onSelect: PropTypes.func,
|
||||||
|
@ -81,38 +65,4 @@ const PickerPropTypes = {
|
||||||
icons: PropTypes.object,
|
icons: PropTypes.object,
|
||||||
}
|
}
|
||||||
|
|
||||||
const PickerDefaultProps = {
|
export { EmojiPropTypes, PickerPropTypes }
|
||||||
onClick: () => {},
|
|
||||||
onSelect: () => {},
|
|
||||||
onSkinChange: () => {},
|
|
||||||
emojiSize: 24,
|
|
||||||
perLine: 9,
|
|
||||||
i18n: {},
|
|
||||||
style: {},
|
|
||||||
title: 'Emoji Mart™',
|
|
||||||
emoji: 'department_store',
|
|
||||||
color: '#ae65c5',
|
|
||||||
set: EmojiDefaultProps.set,
|
|
||||||
skin: null,
|
|
||||||
defaultSkin: EmojiDefaultProps.skin,
|
|
||||||
native: EmojiDefaultProps.native,
|
|
||||||
sheetSize: EmojiDefaultProps.sheetSize,
|
|
||||||
backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
|
|
||||||
emojisToShowFilter: null,
|
|
||||||
showPreview: true,
|
|
||||||
showSkinTones: true,
|
|
||||||
emojiTooltip: EmojiDefaultProps.tooltip,
|
|
||||||
autoFocus: false,
|
|
||||||
custom: [],
|
|
||||||
skinEmoji: '',
|
|
||||||
notFound: () => {},
|
|
||||||
notFoundEmoji: 'sleuth_or_spy',
|
|
||||||
icons: {},
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
EmojiPropTypes,
|
|
||||||
EmojiDefaultProps,
|
|
||||||
PickerPropTypes,
|
|
||||||
PickerDefaultProps,
|
|
||||||
}
|
|
||||||
|
|
|
@ -1345,13 +1345,6 @@ babel-plugin-transform-react-jsx@6.24.1, babel-plugin-transform-react-jsx@^6.24.
|
||||||
babel-plugin-syntax-jsx "^6.8.0"
|
babel-plugin-syntax-jsx "^6.8.0"
|
||||||
babel-runtime "^6.22.0"
|
babel-runtime "^6.22.0"
|
||||||
|
|
||||||
babel-plugin-transform-react-remove-prop-types@^0.4.8:
|
|
||||||
version "0.4.8"
|
|
||||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.8.tgz#0aff04bc1d6564ec49cf23bcffb99c11881958db"
|
|
||||||
integrity sha1-Cv8EvB1lZOxJzyO8/7mcEYgZWNs=
|
|
||||||
dependencies:
|
|
||||||
babel-traverse "^6.25.0"
|
|
||||||
|
|
||||||
babel-plugin-transform-regenerator@6.24.1:
|
babel-plugin-transform-regenerator@6.24.1:
|
||||||
version "6.24.1"
|
version "6.24.1"
|
||||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
|
resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
|
||||||
|
@ -1677,7 +1670,7 @@ babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.7.0:
|
||||||
babylon "^6.18.0"
|
babylon "^6.18.0"
|
||||||
lodash "^4.17.4"
|
lodash "^4.17.4"
|
||||||
|
|
||||||
babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0, babel-traverse@^6.7.2:
|
babel-traverse@^6.24.1, babel-traverse@^6.26.0, babel-traverse@^6.7.2:
|
||||||
version "6.26.0"
|
version "6.26.0"
|
||||||
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
|
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
|
||||||
integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
|
integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
|
||||||
|
|
Loading…
Reference in New Issue