From 94baec171dc894e204c805b47d5da2c90a11d827 Mon Sep 17 00:00:00 2001 From: kennybll Date: Fri, 30 Nov 2018 09:17:45 -0500 Subject: [PATCH 01/47] Add sprite support --- docs/bundle.js | 128 ++++++++++++++++----------- docs/index.js | 11 +++ src/components/emoji/nimble-emoji.js | 20 ++++- src/index.js | 4 +- 4 files changed, 106 insertions(+), 57 deletions(-) diff --git a/docs/bundle.js b/docs/bundle.js index 7fe6646..40c5106 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -412,6 +412,27 @@ process.umask = function() { return 0; }; /***/ }), /* 8 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +var _Object = Object; + +/* harmony default export */ __webpack_exports__["a"] = (_Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; +}); + +/***/ }), +/* 9 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; @@ -452,27 +473,6 @@ emptyFunction.thatReturnsArgument = function (arg) { module.exports = emptyFunction; -/***/ }), -/* 9 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -var _Object = Object; - -/* harmony default export */ __webpack_exports__["a"] = (_Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; -}); - /***/ }), /* 10 */ /***/ (function(module, exports, __webpack_require__) { @@ -538,13 +538,15 @@ module.exports = invariant; /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(3); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils__ = __webpack_require__(13); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data__ = __webpack_require__(16); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__ = __webpack_require__(17); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(8); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(0); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types__ = __webpack_require__(3); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_prop_types__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils__ = __webpack_require__(13); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_data__ = __webpack_require__(16); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_shared_props__ = __webpack_require__(17); + @@ -558,7 +560,7 @@ var _getData = function _getData(props) { var set = props.set; var data = props.data; - return Object(__WEBPACK_IMPORTED_MODULE_2__utils__["b" /* getData */])(emoji, skin, set, data); + return Object(__WEBPACK_IMPORTED_MODULE_3__utils__["b" /* getData */])(emoji, skin, set, data); }; var _getPosition = function _getPosition(props) { @@ -578,7 +580,7 @@ var _getSanitizedData = function _getSanitizedData(props) { var set = props.set; var data = props.data; - return Object(__WEBPACK_IMPORTED_MODULE_2__utils__["c" /* getSanitizedData */])(emoji, skin, set, data); + return Object(__WEBPACK_IMPORTED_MODULE_3__utils__["c" /* getSanitizedData */])(emoji, skin, set, data); }; var _handleClick = function _handleClick(e, props) { @@ -633,7 +635,7 @@ var _convertStyleToCSS = function _convertStyleToCSS(style) { var NimbleEmoji = function NimbleEmoji(props) { if (props.data.compressed) { - Object(__WEBPACK_IMPORTED_MODULE_3__utils_data__["b" /* uncompress */])(props.data); + Object(__WEBPACK_IMPORTED_MODULE_4__utils_data__["b" /* uncompress */])(props.data); } for (var k in NimbleEmoji.defaultProps) { @@ -675,7 +677,7 @@ var NimbleEmoji = function NimbleEmoji(props) { if (props.native && unified) { className += ' emoji-mart-emoji-native'; style = { fontSize: props.size }; - children = Object(__WEBPACK_IMPORTED_MODULE_2__utils__["f" /* unifiedToNative */])(unified); + children = Object(__WEBPACK_IMPORTED_MODULE_3__utils__["f" /* unifiedToNative */])(unified); if (props.forceSize) { style.display = 'inline-block'; @@ -687,10 +689,20 @@ var NimbleEmoji = function NimbleEmoji(props) { style = { width: props.size, height: props.size, - display: 'inline-block', - backgroundImage: 'url(' + imageUrl + ')', - backgroundSize: 'contain' + display: 'inline-block' }; + if (data.spriteUrl) { + style = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, style, { + backgroundImage: 'url(' + data.spriteUrl + ')', + backgroundSize: 100 * props.sheetColumns + '% ' + 100 * props.sheetRows + '%', + backgroundPosition: _getPosition(props) + }); + } else { + style = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, style, { + backgroundImage: 'url(' + imageUrl + ')', + backgroundSize: 'contain' + }); + } } else { var setHasEmoji = data['has_img_' + props.set] == undefined || data['has_img_' + props.set]; @@ -716,7 +728,7 @@ var NimbleEmoji = function NimbleEmoji(props) { style = _convertStyleToCSS(style); return '' + (children || '') + ''; } else { - return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement( + return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement( 'span', { key: props.emoji.id || props.emoji, @@ -732,7 +744,7 @@ var NimbleEmoji = function NimbleEmoji(props) { title: title, className: className }, - __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement( + __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement( 'span', { style: style }, children @@ -741,7 +753,7 @@ var NimbleEmoji = function NimbleEmoji(props) { } }; -NimbleEmoji.defaultProps = __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__["a" /* EmojiDefaultProps */]; +NimbleEmoji.defaultProps = __WEBPACK_IMPORTED_MODULE_5__utils_shared_props__["a" /* EmojiDefaultProps */]; /* harmony default export */ __webpack_exports__["a"] = (NimbleEmoji); @@ -1090,7 +1102,7 @@ module.exports = emptyObject; -var emptyFunction = __webpack_require__(8); +var emptyFunction = __webpack_require__(9); /** * Similar to invariant but only logs a warning if the condition is not met. @@ -1945,7 +1957,7 @@ function get(perLine) { * @typechecks */ -var emptyFunction = __webpack_require__(8); +var emptyFunction = __webpack_require__(9); /** * Upstream version of event listener. Does not take into account specific @@ -2236,7 +2248,7 @@ module.exports = function (it) { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(8); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(4); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__); @@ -3087,7 +3099,7 @@ var search = { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(8); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(4); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__); @@ -3440,7 +3452,7 @@ Skins.defaultProps = { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(9); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(8); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__src_polyfills_objectGetPrototypeOf__ = __webpack_require__(4); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__); @@ -3478,6 +3490,16 @@ var CUSTOM_EMOJIS = [{ short_names: ['shipit', 'squirrel'], keywords: ['github'], imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7' +}, { + name: 'Test Flag', + short_names: ['test'], + keywords: ['test', 'flag'], + spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png', + sheet_x: 1, + sheet_y: 1, + size: 64, + sheetColumns: 52, + sheetRows: 52 }]; var Example = function (_React$Component) { @@ -3572,7 +3594,7 @@ __WEBPACK_IMPORTED_MODULE_7_react_dom___default.a.render(__WEBPACK_IMPORTED_MODU This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ -var f=__webpack_require__(12),p=__webpack_require__(14);__webpack_require__(10);var r=__webpack_require__(8); +var f=__webpack_require__(12),p=__webpack_require__(14);__webpack_require__(10);var r=__webpack_require__(9); function t(a){for(var b=arguments.length-1,d="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,e=0;e { width: props.size, height: props.size, display: 'inline-block', - backgroundImage: `url(${imageUrl})`, - backgroundSize: 'contain', + } + if (data.spriteUrl) { + style = { + ...style, + backgroundImage: `url(${data.spriteUrl})`, + backgroundSize: `${100 * props.sheetColumns}% ${100 * + props.sheetRows}%`, + backgroundPosition: _getPosition(props), + } + } else { + style = { + ...style, + backgroundImage: `url(${imageUrl})`, + backgroundSize: 'contain', + } } } else { let setHasEmoji = @@ -149,7 +162,8 @@ const NimbleEmoji = (props) => { props.set, props.sheetSize, )})`, - backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`, + backgroundSize: `${100 * props.sheetColumns}% ${100 * + props.sheetRows}%`, backgroundPosition: _getPosition(props), } } diff --git a/src/index.js b/src/index.js index 7df17f8..57d4bfb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ export { default as emojiIndex } from './utils/emoji-index/emoji-index' -export { default as NimbleEmojiIndex } from './utils/emoji-index/nimble-emoji-index' +export { + default as NimbleEmojiIndex, +} from './utils/emoji-index/nimble-emoji-index' export { default as store } from './utils/store' export { default as frequently } from './utils/frequently' From 2ff225b13111c95f175ee0b9fcf4868ad053e78c Mon Sep 17 00:00:00 2001 From: kennybll Date: Fri, 30 Nov 2018 09:27:55 -0500 Subject: [PATCH 02/47] Add to README.md for support of spritesheets --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5207216..9d584f3 100644 --- a/README.md +++ b/README.md @@ -220,7 +220,7 @@ Following the `dangerouslySetInnerHTML` example above, make sure the wrapping `s ``` ## Custom emojis -You can provide custom emojis which will show up in their own category. +You can provide custom emojis which will show up in their own category. You can either use a single image as imageUrl or use a spritesheet as shown in the second object. ```js import { Picker } from 'emoji-mart' @@ -234,6 +234,19 @@ const customEmojis = [ keywords: ['github'], imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' }, + { + name: 'Test Flag', + short_names: ['test'], + text: '', + emoticons: [], + keywords: ['test', 'flag'], + spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png', + sheet_x: 1, + sheet_y: 1, + size: 64, + sheetColumns: 52, + sheetRows: 52, + }, ] From 7c2e2a840bdd48c3c9935dac4208115cbcf6006d Mon Sep 17 00:00:00 2001 From: Etienne Lemay Date: Mon, 3 Dec 2018 17:15:08 -0500 Subject: [PATCH 03/47] Release v2.9.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b4b81ae..e242b3f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "emoji-mart", - "version": "2.9.1", + "version": "2.9.2", "description": "Customizable Slack-like emoji picker for React", "main": "dist/index.js", "module": "dist-es/index.js", From e975284b2956dd5abe7f3007dfce6688cdab32a0 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 18 Dec 2018 10:13:20 -0800 Subject: [PATCH 04/47] fix: fix native emoji on Linux fixes #255 --- css/emoji-mart.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 8456e23..12daf72 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -153,7 +153,7 @@ } .emoji-mart-emoji-native { - font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji"; + font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "EmojiOne Color", "Android Emoji"; } .emoji-mart-no-results { From 9b9410e70c05ecee00b00f88972930a13357f505 Mon Sep 17 00:00:00 2001 From: Ryann Date: Thu, 17 Jan 2019 09:25:22 -0600 Subject: [PATCH 05/47] forces emoji's not to break line closes issue #252 --- src/components/emoji/nimble-emoji.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js index 0d52943..8b19c6d 100644 --- a/src/components/emoji/nimble-emoji.js +++ b/src/components/emoji/nimble-emoji.js @@ -120,6 +120,7 @@ const NimbleEmoji = (props) => { style.display = 'inline-block' style.width = props.size style.height = props.size + style.wordBreak = 'keep-all' } } else if (custom) { className += ' emoji-mart-emoji-custom' From 17db4cc913ba66465fb298ea7bc79bca838ceb3a Mon Sep 17 00:00:00 2001 From: Dimitri Wijesinghe Date: Wed, 13 Feb 2019 14:56:42 -0500 Subject: [PATCH 06/47] Fixed bug where selecting the first emoji search result with the ENTER key ignores skin-tone selection. --- src/components/picker/nimble-picker.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 24c0ff4..da79a4a 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types' import * as icons from '../../svgs' import store from '../../utils/store' import frequently from '../../utils/frequently' -import { deepMerge, measureScrollbar } from '../../utils' +import { deepMerge, measureScrollbar, getSanitizedData } from '../../utils' import { uncompress } from '../../utils/data' import { PickerPropTypes, PickerDefaultProps } from '../../utils/shared-props' @@ -396,7 +396,12 @@ export default class NimblePicker extends React.PureComponent { if ( this.SEARCH_CATEGORY.emojis && - (emoji = this.SEARCH_CATEGORY.emojis[0]) + (emoji = getSanitizedData( + this.SEARCH_CATEGORY.emojis[0], + this.state.skin, + this.props.set, + this.props.data, + )) ) { this.handleEmojiSelect(emoji) } From f60220870e797fdf8fb87e49041bc60584408143 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 18 Dec 2018 11:24:52 -0800 Subject: [PATCH 07/47] fix: allow prop-types to be removed in production fixes #257 --- .babelrc | 1 - README.md | 26 +++++++++++++ package.json | 1 - src/components/anchors.js | 2 +- src/components/category.js | 2 +- src/components/emoji/emoji.js | 5 ++- src/components/emoji/nimble-emoji.js | 8 +++- src/components/not-found.js | 2 +- src/components/picker/nimble-picker.js | 5 ++- src/components/picker/picker.js | 5 ++- src/components/preview.js | 2 +- src/components/search.js | 2 +- src/components/skins-dot.js | 2 +- src/components/skins-emoji.js | 2 +- src/components/skins.js | 2 +- src/utils/shared-default-props.js | 46 +++++++++++++++++++++++ src/utils/shared-props.js | 52 +------------------------- yarn.lock | 9 +---- 18 files changed, 97 insertions(+), 77 deletions(-) create mode 100644 src/utils/shared-default-props.js diff --git a/.babelrc b/.babelrc index d240a0b..11c2e5f 100644 --- a/.babelrc +++ b/.babelrc @@ -23,7 +23,6 @@ "transform-object-rest-spread", "transform-runtime", - "transform-react-remove-prop-types", [ "transform-define", "scripts/define.js" ], diff --git a/README.md b/README.md index 9d584f3..6fe8891 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index e242b3f..d1e6e2b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/anchors.js b/src/components/anchors.js index 5008d6b..b468ce3 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -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, diff --git a/src/components/category.js b/src/components/category.js index dcd6b73..760be3d 100644 --- a/src/components/category.js +++ b/src/components/category.js @@ -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, diff --git a/src/components/emoji/emoji.js b/src/components/emoji/emoji.js index b74cae9..dbe727e 100644 --- a/src/components/emoji/emoji.js +++ b/src/components/emoji/emoji.js @@ -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 diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js index 8b19c6d..6e8c326 100644 --- a/src/components/emoji/nimble-emoji.js +++ b/src/components/emoji/nimble-emoji.js @@ -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 diff --git a/src/components/not-found.js b/src/components/not-found.js index 46c8af6..a1cbe33 100644 --- a/src/components/not-found.js +++ b/src/components/not-found.js @@ -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, diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 24c0ff4..14cc218 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -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, } diff --git a/src/components/picker/picker.js b/src/components/picker/picker.js index a96f090..8d68269 100644 --- a/src/components/picker/picker.js +++ b/src/components/picker/picker.js @@ -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 } diff --git a/src/components/preview.js b/src/components/preview.js index e9ab5ae..23ee8d6 100644 --- a/src/components/preview.js +++ b/src/components/preview.js @@ -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, diff --git a/src/components/search.js b/src/components/search.js index fc8f31d..19992dd 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -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, diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js index c9efece..74dbc4a 100644 --- a/src/components/skins-dot.js +++ b/src/components/skins-dot.js @@ -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, diff --git a/src/components/skins-emoji.js b/src/components/skins-emoji.js index 8de2d19..5624a26 100644 --- a/src/components/skins-emoji.js +++ b/src/components/skins-emoji.js @@ -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, diff --git a/src/components/skins.js b/src/components/skins.js index dd2b96f..8fd5154 100644 --- a/src/components/skins.js +++ b/src/components/skins.js @@ -30,7 +30,7 @@ export default class Skins extends React.PureComponent { } } -Skins.propTypes = { +Skins.propTypes /* remove-proptypes */ = { onChange: PropTypes.func, skin: PropTypes.number.isRequired, } diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js new file mode 100644 index 0000000..489869b --- /dev/null +++ b/src/utils/shared-default-props.js @@ -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 } diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js index 8a83752..74d7507 100644 --- a/src/utils/shared-props.js +++ b/src/utils/shared-props.js @@ -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 } diff --git a/yarn.lock b/yarn.lock index fb5d38e..e9b68d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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= From e8b4cfd4a892ba42a5e7080ec57031c51beb5779 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Thu, 7 Mar 2019 18:47:45 -0800 Subject: [PATCH 08/47] docs: add more explicit dev docs fixes #227 --- README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6fe8891..30cbec0 100644 --- a/README.md +++ b/README.md @@ -392,12 +392,20 @@ Then add to your `.babelrc`: 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 -$ yarn start -$ yarn storybook + +```bash +yarn build ``` +In two separate tabs: + +```bash +yarn start +yarn storybook +``` + +The storybook is hosted at `localhost:6006`, and the code will be built on-the-fly. + ## 🎩 Hat tips! Powered by [iamcal/emoji-data](https://github.com/iamcal/emoji-data) and inspired by [iamcal/js-emoji](https://github.com/iamcal/js-emoji).
🙌🏼  [Cal Henderson](https://github.com/iamcal). From caba7d0b3499fc1872b538774ce1ab372954da3f Mon Sep 17 00:00:00 2001 From: Kaylee Mann Date: Fri, 8 Mar 2019 14:00:50 +0900 Subject: [PATCH 09/47] Show preview panel when showPreview is false but showSkinTones is true. This is necessary in order to be able to show skin tone picker even when one desires for the mouseover preview to be invisible. This is an important case because mouseover displays must be disabled in order to enable single click emoji typing on iOS without disabling the skin tone picker. --- src/components/picker/nimble-picker.js | 3 ++- src/components/preview.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 24c0ff4..6f9c2e5 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -560,7 +560,7 @@ export default class NimblePicker extends React.PureComponent { })} - {showPreview && ( + {(showPreview || showSkinTones) && (
Date: Fri, 8 Mar 2019 14:13:17 +0900 Subject: [PATCH 10/47] Add "prepare" script so that emoji-mart can be installed from git. --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e242b3f..f958930 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,8 @@ "prepublishOnly": "npm run build", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", - "prettier": "prettier --write \"{src,scripts,spec}/**/*.js\"" + "prettier": "prettier --write \"{src,scripts,spec}/**/*.js\"", + "prepare": "npm run build:dist" }, "size-limit": [ { From 28c05b2861c03ebf5bf72eca206a1308513e9873 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Fri, 8 Mar 2019 09:00:00 -0800 Subject: [PATCH 11/47] fix: fix babel-runtime not found fixes #228 --- .babelrc | 4 +++- src/polyfills/classCallCheck.js | 5 +++++ src/polyfills/keys.js | 38 +++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/polyfills/classCallCheck.js create mode 100644 src/polyfills/keys.js diff --git a/.babelrc b/.babelrc index 11c2e5f..fe082af 100644 --- a/.babelrc +++ b/.babelrc @@ -34,7 +34,9 @@ "babel-runtime/helpers/extends": "./src/polyfills/extends", "babel-runtime/helpers/inherits": "./src/polyfills/inherits", "babel-runtime/helpers/createClass": "./src/polyfills/createClass", - "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn" + "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", + "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", + "babel-runtime/core-js/object/keys": "./src/polyfills/keys" } } ] diff --git a/src/polyfills/classCallCheck.js b/src/polyfills/classCallCheck.js new file mode 100644 index 0000000..aa83175 --- /dev/null +++ b/src/polyfills/classCallCheck.js @@ -0,0 +1,5 @@ +export default function(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError('Cannot call a class as a function') + } +} diff --git a/src/polyfills/keys.js b/src/polyfills/keys.js new file mode 100644 index 0000000..b683766 --- /dev/null +++ b/src/polyfills/keys.js @@ -0,0 +1,38 @@ +// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !{ toString: null }.propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor', + ], + dontEnumsLength = dontEnums.length + +export default function(obj) { + if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { + throw new TypeError('Object.keys called on non-object') + } + + var result = [], + prop, + i + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop) + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]) + } + } + } + return result +} From b1be15578750504d7c78fd8c90e78aada150a78d Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 18 Dec 2018 13:54:21 -0800 Subject: [PATCH 12/47] feat: add slim builds for modern browsers fixes #259 --- .babelrc | 73 +++++++++++++++++++++++++++------------------------- .gitignore | 1 + README.md | 28 +++++++++++++++++++- package.json | 7 ++--- 4 files changed, 70 insertions(+), 39 deletions(-) diff --git a/.babelrc b/.babelrc index fe082af..14f50df 100644 --- a/.babelrc +++ b/.babelrc @@ -2,47 +2,50 @@ "presets": ["react"], "plugins": [ "check-es2015-constants", - "transform-es2015-arrow-functions", - "transform-es2015-block-scoped-functions", - "transform-es2015-block-scoping", - "transform-es2015-classes", - "transform-es2015-computed-properties", - "transform-es2015-destructuring", - "transform-es2015-duplicate-keys", - "transform-es2015-for-of", - "transform-es2015-function-name", - "transform-es2015-literals", - "transform-es2015-object-super", - "transform-es2015-parameters", - "transform-es2015-shorthand-properties", - "transform-es2015-spread", - "transform-es2015-sticky-regex", - "transform-es2015-template-literals", - "transform-es2015-unicode-regex", - "transform-regenerator", - "transform-object-rest-spread", - "transform-runtime", [ "transform-define", "scripts/define.js" - ], - [ - "module-resolver", - { - "alias": { - "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf", - "babel-runtime/helpers/extends": "./src/polyfills/extends", - "babel-runtime/helpers/inherits": "./src/polyfills/inherits", - "babel-runtime/helpers/createClass": "./src/polyfills/createClass", - "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", - "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", - "babel-runtime/core-js/object/keys": "./src/polyfills/keys" - } - } ] ], "env": { - "cjs": { + "legacy-es": { + "plugins": [ + "transform-es2015-arrow-functions", + "transform-es2015-block-scoped-functions", + "transform-es2015-block-scoping", + "transform-es2015-classes", + "transform-es2015-computed-properties", + "transform-es2015-destructuring", + "transform-es2015-duplicate-keys", + "transform-es2015-for-of", + "transform-es2015-function-name", + "transform-es2015-literals", + "transform-es2015-object-super", + "transform-es2015-parameters", + "transform-es2015-shorthand-properties", + "transform-es2015-spread", + "transform-es2015-sticky-regex", + "transform-es2015-template-literals", + "transform-es2015-unicode-regex", + "transform-regenerator", + "transform-runtime", + [ + "module-resolver", + { + "alias": { + "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf", + "babel-runtime/helpers/extends": "./src/polyfills/extends", + "babel-runtime/helpers/inherits": "./src/polyfills/inherits", + "babel-runtime/helpers/createClass": "./src/polyfills/createClass", + "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", + "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", + "babel-runtime/core-js/object/keys": "./src/polyfills/keys" + } + } + ] + ] + }, + "legacy-cjs": { "plugins": [ "transform-es2015-modules-commonjs" ] diff --git a/.gitignore b/.gitignore index 90717de..a45ab12 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,6 @@ node_modules/ dist/ dist-es/ +dist-modern/ stats.json report.html diff --git a/README.md b/README.md index 30cbec0..0087e4c 100644 --- a/README.md +++ b/README.md @@ -365,7 +365,33 @@ 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 + +## Optimizing for production + +### Modern/ES builds + +**Emoji Mart** comes in three flavors: + +``` +dist +dist-es +dist-modern +``` + +- `dist` is the standard build with the highest level of compatibility. +- `dist-es` is the same, but uses ES modules for better tree-shaking. +- `dist-modern` removes features not needed in modern evergreen browsers (i.e. latest Chrome, Edge, Firefox, and Safari). + +The default builds are `dist` and `dist-es`. (In Webpack, one or the other will be chosen based on your [resolve main fields](https://webpack.js.org/configuration/resolve/#resolve-mainfields).) +If you want to use `dist-modern`, you must explicitly import it: + +```js +import { Picker } from 'emoji-mart/dist-modern/index.js' +``` + +Using something like Babel, you can transpile the modern build to suit your own needs. + +### Removing prop-types 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): diff --git a/package.json b/package.json index 8362817..fe2edfe 100644 --- a/package.json +++ b/package.json @@ -61,9 +61,10 @@ "scripts": { "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:dist": "npm run build:cjs && npm run build:es && npm run build:modern", + "build:cjs": "BABEL_ENV=legacy-cjs babel src --out-dir dist --copy-files", + "build:es": "BABEL_ENV=legacy-es babel src --out-dir dist-es --copy-files", + "build:modern": "babel src --out-dir dist-modern --copy-files", "build:docs": "cp css/emoji-mart.css docs && webpack --config ./docs/webpack.config.js", "build": "npm run clean && npm run build:dist", "watch": "BABEL_ENV=cjs babel src --watch --out-dir dist --copy-files", From c13b730dbe75c34eb6ee4391715ca4041011dc93 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 9 Mar 2019 09:16:18 -0800 Subject: [PATCH 13/47] tweak babelrc to use runtime helpers for Object.assign --- .babelrc | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/.babelrc b/.babelrc index 14f50df..c3452a5 100644 --- a/.babelrc +++ b/.babelrc @@ -3,6 +3,21 @@ "plugins": [ "check-es2015-constants", "transform-object-rest-spread", + "transform-runtime", + [ + "module-resolver", + { + "alias": { + "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf", + "babel-runtime/helpers/extends": "./src/polyfills/extends", + "babel-runtime/helpers/inherits": "./src/polyfills/inherits", + "babel-runtime/helpers/createClass": "./src/polyfills/createClass", + "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", + "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", + "babel-runtime/core-js/object/keys": "./src/polyfills/keys" + } + } + ], [ "transform-define", "scripts/define.js" ] @@ -27,22 +42,7 @@ "transform-es2015-sticky-regex", "transform-es2015-template-literals", "transform-es2015-unicode-regex", - "transform-regenerator", - "transform-runtime", - [ - "module-resolver", - { - "alias": { - "babel-runtime/core-js/object/get-prototype-of": "./src/polyfills/objectGetPrototypeOf", - "babel-runtime/helpers/extends": "./src/polyfills/extends", - "babel-runtime/helpers/inherits": "./src/polyfills/inherits", - "babel-runtime/helpers/createClass": "./src/polyfills/createClass", - "babel-runtime/helpers/possibleConstructorReturn": "./src/polyfills/possibleConstructorReturn", - "babel-runtime/helpers/classCallCheck": "./src/polyfills/classCallCheck", - "babel-runtime/core-js/object/keys": "./src/polyfills/keys" - } - } - ] + "transform-regenerator" ] }, "legacy-cjs": { From d20f60cba1aa0f3adc4fe81ff3f7b1aefee3ce66 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 9 Mar 2019 09:20:46 -0800 Subject: [PATCH 14/47] fix: add prop-types to dependencies --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8362817..421b582 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "url": "https://github.com/missive/emoji-mart/issues" }, "homepage": "https://github.com/missive/emoji-mart", - "dependencies": {}, + "dependencies": { + "prop-types": "^15.6.0" + }, "peerDependencies": { "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0" }, @@ -51,7 +53,6 @@ "karma-webpack": "^2.0.4", "mkdirp": "0.5.1", "prettier": "1.11.1", - "prop-types": "^15.6.0", "react": "^16.0.0", "react-dom": "^16.0.0", "rimraf": "2.5.2", From 5052ecd399d206541f56501aa7b1b3226fc44ea1 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 9 Mar 2019 13:03:00 -0800 Subject: [PATCH 15/47] fix: improve search/clear a11y fixes #221 --- README.md | 1 + css/emoji-mart.css | 21 ++++++++++++++--- src/components/picker/nimble-picker.js | 1 + src/components/search.js | 31 +++++++++++++++++++++----- 4 files changed, 46 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 30cbec0..fc13c58 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,7 @@ import { Picker } from 'emoji-mart' #### I18n ```js search: 'Search', +clear: 'Clear', // Accessible label on "clear" button notfound: 'No Emoji Found', skintext: 'Choose your default skin tone', categories: { diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 12daf72..d4ddbeb 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -100,14 +100,15 @@ border-radius: 5px; border: 1px solid #d9d9d9; outline: 0; + -webkit-appearance: none; } .emoji-mart-search-icon { position: absolute; - top: 9px; - right: 16px; + top: 7px; + right: 11px; z-index: 2; - padding: 0; + padding: 2px 5px 1px; border: none; background: none; } @@ -369,3 +370,17 @@ .emoji-mart-skin-tone-4 { background-color: #bf8f68 } .emoji-mart-skin-tone-5 { background-color: #9b643d } .emoji-mart-skin-tone-6 { background-color: #594539 } + +/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ +.emoji-mart-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + + diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js index 1b8c120..bcbf100 100644 --- a/src/components/picker/nimble-picker.js +++ b/src/components/picker/nimble-picker.js @@ -18,6 +18,7 @@ import { PickerDefaultProps } from '../../utils/shared-default-props' const I18N = { search: 'Search', + clear: 'Clear', // Accessible label on "clear" button notfound: 'No Emoji Found', skintext: 'Choose your default skin tone', categories: { diff --git a/src/components/search.js b/src/components/search.js index 19992dd..871aeda 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -4,12 +4,15 @@ import PropTypes from 'prop-types' import { search as icons } from '../svgs' import NimbleEmojiIndex from '../utils/emoji-index/nimble-emoji-index' +let id = 0 + export default class Search extends React.PureComponent { constructor(props) { super(props) this.state = { icon: icons.search, isSearching: false, + id: ++id } this.data = props.data @@ -59,28 +62,46 @@ export default class Search extends React.PureComponent { } } + clearIfNotSearching () { + const { isSearching } = this.state + if (!isSearching) { + this.clear() + } + } + setRef(c) { this.input = c } render() { - var { i18n, autoFocus } = this.props - var { icon, isSearching } = this.state + const { i18n, autoFocus } = this.props + const { icon, id } = this.state + + let inputId = `emoji-mart-search-${id}` return (
+ {/* + * Use a