parent
bae7afb282
commit
f60220870e
1
.babelrc
1
.babelrc
|
@ -23,7 +23,6 @@
|
|||
|
||||
"transform-object-rest-spread",
|
||||
"transform-runtime",
|
||||
"transform-react-remove-prop-types",
|
||||
[
|
||||
"transform-define", "scripts/define.js"
|
||||
],
|
||||
|
|
26
README.md
26
README.md
|
@ -365,6 +365,32 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
|
|||
## 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.
|
||||
|
||||
## 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
|
||||
```sh
|
||||
$ yarn build
|
||||
|
|
|
@ -36,7 +36,6 @@
|
|||
"babel-plugin-transform-define": "^1.3.0",
|
||||
"babel-plugin-transform-es2015-destructuring": "6.9.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-preset-es2015": "6.6.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,
|
||||
onAnchorClick: PropTypes.func,
|
||||
icons: PropTypes.object,
|
||||
|
|
|
@ -211,7 +211,7 @@ export default class Category extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
Category.propTypes = {
|
||||
Category.propTypes /* remove-proptypes */ = {
|
||||
emojis: PropTypes.array,
|
||||
hasStickyPosition: PropTypes.bool,
|
||||
name: PropTypes.string.isRequired,
|
||||
|
|
|
@ -3,7 +3,8 @@ import React from 'react'
|
|||
import data from '../../../data/all.json'
|
||||
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) => {
|
||||
for (let k in Emoji.defaultProps) {
|
||||
|
@ -15,7 +16,7 @@ const Emoji = (props) => {
|
|||
return NimbleEmoji({ ...props })
|
||||
}
|
||||
|
||||
Emoji.propTypes = EmojiPropTypes
|
||||
Emoji.propTypes /* remove-proptypes */ = EmojiPropTypes
|
||||
Emoji.defaultProps = { ...EmojiDefaultProps, data }
|
||||
|
||||
export default Emoji
|
||||
|
|
|
@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
|
|||
|
||||
import { getData, getSanitizedData, unifiedToNative } from '../../utils'
|
||||
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) => {
|
||||
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
|
||||
|
||||
export default NimbleEmoji
|
||||
|
|
|
@ -26,7 +26,7 @@ export default class NotFound extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
NotFound.propTypes = {
|
||||
NotFound.propTypes /* remove-proptypes */ = {
|
||||
notFound: PropTypes.func.isRequired,
|
||||
notFoundString: PropTypes.string.isRequired,
|
||||
emojiProps: PropTypes.object.isRequired,
|
||||
|
|
|
@ -8,12 +8,13 @@ import store from '../../utils/store'
|
|||
import frequently from '../../utils/frequently'
|
||||
import { deepMerge, measureScrollbar } from '../../utils'
|
||||
import { uncompress } from '../../utils/data'
|
||||
import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props'
|
||||
import { PickerPropTypes } from '../../utils/shared-props'
|
||||
|
||||
import Anchors from '../anchors'
|
||||
import Category from '../category'
|
||||
import Preview from '../preview'
|
||||
import Search from '../search'
|
||||
import { PickerDefaultProps } from '../../utils/shared-default-props'
|
||||
|
||||
const I18N = {
|
||||
search: 'Search',
|
||||
|
@ -592,7 +593,7 @@ export default class NimblePicker extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
NimblePicker.propTypes = {
|
||||
NimblePicker.propTypes /* remove-proptypes */ = {
|
||||
...PickerPropTypes,
|
||||
data: PropTypes.object.isRequired,
|
||||
}
|
||||
|
|
|
@ -3,7 +3,8 @@ import React from 'react'
|
|||
import data from '../../../data/all.json'
|
||||
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 {
|
||||
render() {
|
||||
|
@ -11,5 +12,5 @@ export default class Picker extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
Picker.propTypes = PickerPropTypes
|
||||
Picker.propTypes /* remove-proptypes */ = PickerPropTypes
|
||||
Picker.defaultProps = { ...PickerDefaultProps, data }
|
||||
|
|
|
@ -113,7 +113,7 @@ export default class Preview extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
Preview.propTypes = {
|
||||
Preview.propTypes /* remove-proptypes */ = {
|
||||
showSkinTones: PropTypes.bool,
|
||||
title: 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,
|
||||
maxResults: PropTypes.number,
|
||||
emojisToShowFilter: PropTypes.func,
|
||||
|
|
|
@ -39,7 +39,7 @@ export default class SkinsDot extends Skins {
|
|||
}
|
||||
}
|
||||
|
||||
SkinsDot.propTypes = {
|
||||
SkinsDot.propTypes /* remove-proptypes */ = {
|
||||
onChange: PropTypes.func,
|
||||
skin: PropTypes.number.isRequired,
|
||||
i18n: PropTypes.object,
|
||||
|
|
|
@ -58,7 +58,7 @@ export default class SkinsEmoji extends Skins {
|
|||
}
|
||||
}
|
||||
|
||||
SkinsEmoji.propTypes = {
|
||||
SkinsEmoji.propTypes /* remove-proptypes */ = {
|
||||
onChange: PropTypes.func,
|
||||
skin: PropTypes.number.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,
|
||||
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,
|
||||
}
|
||||
|
||||
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 = {
|
||||
onClick: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
|
@ -81,38 +65,4 @@ const PickerPropTypes = {
|
|||
icons: PropTypes.object,
|
||||
}
|
||||
|
||||
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 {
|
||||
EmojiPropTypes,
|
||||
EmojiDefaultProps,
|
||||
PickerPropTypes,
|
||||
PickerDefaultProps,
|
||||
}
|
||||
export { EmojiPropTypes, PickerPropTypes }
|
||||
|
|
|
@ -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-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:
|
||||
version "6.24.1"
|
||||
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"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
|
||||
integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
|
||||
|
|
Loading…
Reference in New Issue