diff --git a/.gitignore b/.gitignore
index c503f72..90717de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
node_modules/
dist/
dist-es/
diff --git a/README.md b/README.md
index 57dc456..55e00d7 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
Emoji Mart is a Slack-like customizable
emoji picker component for React
Demo •
Changelog
-
+
Brought to you by the
Missive team
@@ -50,6 +50,9 @@ import { Picker } from 'emoji-mart'
| **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
| **style** | | | Inline styles applied to the root element. Useful for positioning |
| **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
+| **notFoundEmoji** | | `sleuth_or_spy` | The emoji shown when there are no search results |
+| **notFound** | | | [Not Found](#not-found) |
+| **icons** | | `{}` | [Custom icons](#custom-icons) |
#### I18n
```js
@@ -79,7 +82,7 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file
| 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 |
+| messenger | 325 KB | 449 KB | 1.05 MB | 2.69 MB |
| twitter | 288 KB | 389 KB | 839 KB | 1.82 MB |
#### Datasets
@@ -158,7 +161,7 @@ import { Emoji } from 'emoji-mart'
| **onClick** | | | Params: `(emoji, event) => {}` |
| **onLeave** | | | Params: `(emoji, event) => {}` |
| **onOver** | | | Params: `(emoji, event) => {}` |
-| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji) => {}` |
+| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` |
| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
@@ -176,8 +179,8 @@ To have the component render `:shrug:` you would need to:
set={'messenger'}
emoji={'shrug'}
size={24}
- fallback={(emoji) => {
- return `:${emoji.short_names[0]}:`
+ fallback={(emoji, props) => {
+ return emoji ? `:${emoji.short_names[0]}:` : props.emoji
}}
/>
```
@@ -234,6 +237,34 @@ const customEmojis = [
```
+## Not Found
+You can provide a custom Not Found object which will allow the appearance of the not found search results to change. In this case, we change the default 'sleuth_or_spy' emoji to Octocat when our search finds no results.
+
+```js
+import { Picker } from 'emoji-mart'
+
+const notFound = () =>
+
+
+```
+
+## Custom icons
+You can provide custom icons which will override the default icons.
+
+```js
+import { Picker } from 'emoji-mart'
+
+const customIcons = {
+ categories: {
+ recent: () => ,
+ foods: () => ,
+ people: () =>
+ }
+}
+
+
+```
+
## Headless search
The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index da6f36a..8456e23 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -72,9 +72,11 @@
max-width: 22px;
}
-.emoji-mart-anchors svg {
+.emoji-mart-anchors svg,
+.emoji-mart-anchors img {
fill: currentColor;
- max-height: 18px;
+ height: 18px;
+ width: 18px;
}
.emoji-mart-scroll {
@@ -87,17 +89,29 @@
.emoji-mart-search {
margin-top: 6px;
padding: 0 6px;
+ position: relative;
}
+
.emoji-mart-search input {
font-size: 16px;
display: block;
width: 100%;
- padding: .2em .6em;
- border-radius: 25px;
+ padding: 5px 25px 6px 10px;
+ border-radius: 5px;
border: 1px solid #d9d9d9;
outline: 0;
}
+.emoji-mart-search-icon {
+ position: absolute;
+ top: 9px;
+ right: 16px;
+ z-index: 2;
+ padding: 0;
+ border: none;
+ background: none;
+}
+
.emoji-mart-category .emoji-mart-emoji span {
z-index: 1;
position: relative;
@@ -138,12 +152,22 @@
font-size: 0;
}
+.emoji-mart-emoji-native {
+ font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
+}
+
.emoji-mart-no-results {
font-size: 14px;
text-align: center;
padding-top: 70px;
color: #858585;
}
+.emoji-mart-no-results-img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+}
.emoji-mart-no-results .emoji-mart-category-label {
display: none;
}
diff --git a/docs/bundle.js b/docs/bundle.js
index c685738..dc6d00b 100644
--- a/docs/bundle.js
+++ b/docs/bundle.js
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
-/******/ return __webpack_require__(__webpack_require__.s = 40);
+/******/ return __webpack_require__(__webpack_require__.s = 41);
/******/ })
/************************************************************************/
/******/ ([
@@ -81,9 +81,9 @@ return /******/ (function(modules) { // webpackBootstrap
/* WEBPACK VAR INJECTION */(function(process) {
if (process.env.NODE_ENV === 'production') {
- module.exports = __webpack_require__(41);
-} else {
module.exports = __webpack_require__(42);
+} else {
+ module.exports = __webpack_require__(43);
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
@@ -344,11 +344,11 @@ if (process.env.NODE_ENV !== 'production') {
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
- module.exports = __webpack_require__(54)(isValidElement, throwOnDirectAccess);
+ module.exports = __webpack_require__(55)(isValidElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
- module.exports = __webpack_require__(55)();
+ module.exports = __webpack_require__(56)();
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
@@ -454,6 +454,27 @@ 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__) {
"use strict";
@@ -512,27 +533,6 @@ function invariant(condition, format, a, b, c, d, e, f) {
module.exports = invariant;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
-/***/ }),
-/* 10 */
-/***/ (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;
-});
-
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
@@ -642,11 +642,10 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return deepMerge; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return unifiedToNative; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return measureScrollbar; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys__ = __webpack_require__(59);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_object_keys__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__data__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__polyfills_stringFromCodePoint__ = __webpack_require__(85);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__data__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__polyfills_stringFromCodePoint__ = __webpack_require__(86);
@@ -746,7 +745,7 @@ function getData(emoji, skin, set, data) {
emojiData.custom = true;
if (!emojiData.search) {
- emojiData.search = Object(__WEBPACK_IMPORTED_MODULE_1__data__["buildSearch"])(emoji);
+ emojiData.search = Object(__WEBPACK_IMPORTED_MODULE_1__data__["a" /* buildSearch */])(emoji);
}
}
@@ -842,6 +841,44 @@ function measureScrollbar() {
/***/ }),
/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__anchors__ = __webpack_require__(87);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__anchors__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__category__ = __webpack_require__(88);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_1__category__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__preview__ = __webpack_require__(89);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return __WEBPACK_IMPORTED_MODULE_2__preview__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__not_found__ = __webpack_require__(90);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_3__not_found__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__search__ = __webpack_require__(91);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return __WEBPACK_IMPORTED_MODULE_4__search__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__skins__ = __webpack_require__(92);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return __WEBPACK_IMPORTED_MODULE_5__skins__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__emoji_emoji__ = __webpack_require__(93);
+/* unused harmony reexport Emoji */
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__emoji_nimble_emoji__ = __webpack_require__(39);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_7__emoji_nimble_emoji__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__picker_picker__ = __webpack_require__(94);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_8__picker_picker__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__picker_nimble_picker__ = __webpack_require__(40);
+/* unused harmony reexport NimblePicker */
+
+
+
+
+
+
+
+
+
+
+
+
+
+/***/ }),
+/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -865,7 +902,7 @@ module.exports = emptyObject;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
-/* 14 */
+/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -934,9 +971,13 @@ module.exports = warning;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
-/* 15 */
-/***/ (function(module, exports) {
+/* 16 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return buildSearch; });
+/* unused harmony export compress */
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return uncompress; });
var mapping = {
name: 'a',
unified: 'b',
@@ -1042,41 +1083,6 @@ var uncompress = function uncompress(data) {
}
};
-module.exports = { buildSearch: buildSearch, compress: compress, uncompress: uncompress };
-
-/***/ }),
-/* 16 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__anchors__ = __webpack_require__(86);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__anchors__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__category__ = __webpack_require__(88);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_1__category__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__preview__ = __webpack_require__(89);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_2__preview__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__search__ = __webpack_require__(90);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return __WEBPACK_IMPORTED_MODULE_3__search__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__skins__ = __webpack_require__(91);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return __WEBPACK_IMPORTED_MODULE_4__skins__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__emoji_emoji__ = __webpack_require__(92);
-/* unused harmony reexport Emoji */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__emoji_nimble_emoji__ = __webpack_require__(38);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_6__emoji_nimble_emoji__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__picker_picker__ = __webpack_require__(93);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_7__picker_picker__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__picker_nimble_picker__ = __webpack_require__(39);
-/* unused harmony reexport NimblePicker */
-
-
-
-
-
-
-
-
-
-
/***/ }),
@@ -1154,7 +1160,10 @@ var PickerPropTypes = {
emoticons: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string),
keywords: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string),
imageUrl: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string.isRequired
- }))
+ })),
+ notFound: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.func,
+ notFoundEmoji: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
+ icons: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.object
};
var PickerDefaultProps = {
@@ -1179,7 +1188,10 @@ var PickerDefaultProps = {
showSkinTones: true,
emojiTooltip: EmojiDefaultProps.tooltip,
autoFocus: false,
- custom: []
+ custom: [],
+ notFound: function notFound() {},
+ notFoundEmoji: 'sleuth_or_spy',
+ icons: {}
};
@@ -1199,8 +1211,8 @@ var PickerDefaultProps = {
if (process.env.NODE_ENV !== 'production') {
- var invariant = __webpack_require__(9);
- var warning = __webpack_require__(14);
+ var invariant = __webpack_require__(10);
+ var warning = __webpack_require__(15);
var ReactPropTypesSecret = __webpack_require__(19);
var loggedTypeFailures = {};
}
@@ -1324,8 +1336,7 @@ module.exports = {"compressed":true,"categories":[{"id":"people","name":"Smileys
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_createClass__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2____ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__data__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__data__ = __webpack_require__(16);
@@ -1336,7 +1347,7 @@ var NimbleEmojiIndex = function () {
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, NimbleEmojiIndex);
if (data.compressed) {
- Object(__WEBPACK_IMPORTED_MODULE_3__data__["uncompress"])(data);
+ Object(__WEBPACK_IMPORTED_MODULE_3__data__["b" /* uncompress */])(data);
}
this.data = data || {};
@@ -1906,7 +1917,7 @@ module.exports = shallowEqual;
*
*/
-var isTextNode = __webpack_require__(45);
+var isTextNode = __webpack_require__(46);
/*eslint-disable no-bitwise */
@@ -2021,7 +2032,7 @@ module.exports = function (it) {
/***/ (function(module, exports, __webpack_require__) {
// to indexed object, toObject with fallback for non-array-like ES3 strings
-var IObject = __webpack_require__(65);
+var IObject = __webpack_require__(66);
var defined = __webpack_require__(35);
module.exports = function (it) {
return IObject(defined(it));
@@ -2044,14 +2055,216 @@ module.exports = function (it) {
/* 38 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "categories", function() { return categories; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "search", function() { return search; });
+/* 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__);
+
+
+var categories = {
+ activity: function activity() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ custom: function custom() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "g",
+ { transform: "translate(2.000000, 1.000000)" },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("rect", { id: "Rectangle", x: "8", y: "0", width: "3", height: "21", rx: "1.5" }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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"
+ }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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"
+ })
+ )
+ );
+ },
+
+ flags: function flags() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ foods: function foods() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ nature: function nature() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ objects: function objects() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ people: function people() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ places: function places() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ recent: function recent() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z" }),
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ },
+
+ symbols: function symbols() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ viewBox: "0 0 24 24",
+ width: "24",
+ height: "24"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("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" })
+ );
+ }
+};
+
+var search = {
+ search: function search() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ width: "13",
+ height: "13",
+ viewBox: "0 0 20 20",
+ opacity: "0.5"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" })
+ );
+ },
+
+ delete: function _delete() {
+ return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ width: "13",
+ height: "13",
+ viewBox: "0 0 20 20",
+ opacity: "0.5"
+ },
+ __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("path", { d: "M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" })
+ );
+ }
+};
+
+
+
+/***/ }),
+/* 39 */
+/***/ (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__(4);
/* 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__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__utils_data__);
+/* 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);
@@ -2142,7 +2355,7 @@ var _convertStyleToCSS = function _convertStyleToCSS(style) {
var NimbleEmoji = function NimbleEmoji(props) {
if (props.data.compressed) {
- Object(__WEBPACK_IMPORTED_MODULE_3__utils_data__["uncompress"])(props.data);
+ Object(__WEBPACK_IMPORTED_MODULE_3__utils_data__["b" /* uncompress */])(props.data);
}
for (var k in NimbleEmoji.defaultProps) {
@@ -2153,7 +2366,11 @@ var NimbleEmoji = function NimbleEmoji(props) {
var data = _getData(props);
if (!data) {
- return null;
+ if (props.fallback) {
+ return props.fallback(null, props);
+ } else {
+ return null;
+ }
}
var unified = data.unified;
@@ -2166,7 +2383,11 @@ var NimbleEmoji = function NimbleEmoji(props) {
var title = null;
if (!unified && !custom) {
- return null;
+ if (props.fallback) {
+ return props.fallback(data, props);
+ } else {
+ return null;
+ }
}
if (props.tooltip) {
@@ -2197,7 +2418,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
if (!setHasEmoji) {
if (props.fallback) {
- return props.fallback(data);
+ return props.fallback(data, props);
} else {
return null;
}
@@ -2247,30 +2468,31 @@ NimbleEmoji.defaultProps = __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__["a"
/* harmony default export */ __webpack_exports__["a"] = (NimbleEmoji);
/***/ }),
-/* 39 */
+/* 40 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__polyfills_createClass__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__polyfills_possibleConstructorReturn__ = __webpack_require__(6);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__polyfills_inherits__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill__ = __webpack_require__(94);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill__ = __webpack_require__(95);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6__vendor_raf_polyfill__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_prop_types__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_8_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils_store__ = __webpack_require__(28);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_frequently__ = __webpack_require__(29);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils_data__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils_data___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_12__utils_data__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__utils_shared_props__ = __webpack_require__(17);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14____ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__svgs__ = __webpack_require__(38);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_store__ = __webpack_require__(28);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__utils_frequently__ = __webpack_require__(29);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__utils_data__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__utils_shared_props__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15____ = __webpack_require__(13);
+
@@ -2326,13 +2548,14 @@ var NimblePicker = function (_React$PureComponent) {
};
if (props.data.compressed) {
- Object(__WEBPACK_IMPORTED_MODULE_12__utils_data__["uncompress"])(props.data);
+ Object(__WEBPACK_IMPORTED_MODULE_13__utils_data__["b" /* uncompress */])(props.data);
}
_this.data = props.data;
- _this.i18n = Object(__WEBPACK_IMPORTED_MODULE_11__utils__["a" /* deepMerge */])(I18N, props.i18n);
+ _this.i18n = Object(__WEBPACK_IMPORTED_MODULE_12__utils__["a" /* deepMerge */])(I18N, props.i18n);
+ _this.icons = Object(__WEBPACK_IMPORTED_MODULE_12__utils__["a" /* deepMerge */])(__WEBPACK_IMPORTED_MODULE_9__svgs__, props.icons);
_this.state = {
- skin: props.skin || __WEBPACK_IMPORTED_MODULE_9__utils_store__["a" /* default */].get('skin') || props.defaultSkin,
+ skin: props.skin || __WEBPACK_IMPORTED_MODULE_10__utils_store__["a" /* default */].get('skin') || props.defaultSkin,
firstRender: true
};
@@ -2432,7 +2655,7 @@ var NimblePicker = function (_React$PureComponent) {
value: function componentWillReceiveProps(props) {
if (props.skin) {
this.setState({ skin: props.skin });
- } else if (props.defaultSkin && !__WEBPACK_IMPORTED_MODULE_9__utils_store__["a" /* default */].get('skin')) {
+ } else if (props.defaultSkin && !__WEBPACK_IMPORTED_MODULE_10__utils_store__["a" /* default */].get('skin')) {
this.setState({ skin: props.defaultSkin });
}
}
@@ -2522,7 +2745,7 @@ var NimblePicker = function (_React$PureComponent) {
var _this3 = this;
this.props.onSelect(emoji);
- if (!this.hideRecent && !this.props.recent) __WEBPACK_IMPORTED_MODULE_10__utils_frequently__["a" /* default */].add(emoji);
+ if (!this.hideRecent && !this.props.recent) __WEBPACK_IMPORTED_MODULE_11__utils_frequently__["a" /* default */].add(emoji);
var component = this.categoryRefs['category-1'];
if (component) {
@@ -2670,7 +2893,7 @@ var NimblePicker = function (_React$PureComponent) {
this.setState(newState);
- __WEBPACK_IMPORTED_MODULE_9__utils_store__["a" /* default */].update(newState);
+ __WEBPACK_IMPORTED_MODULE_10__utils_store__["a" /* default */].update(newState);
onSkinChange(skin);
}
@@ -2767,8 +2990,10 @@ var NimblePicker = function (_React$PureComponent) {
var exclude = _props.exclude;
var recent = _props.recent;
var autoFocus = _props.autoFocus;
+ var notFound = _props.notFound;
+ var notFoundEmoji = _props.notFoundEmoji;
var skin = this.state.skin;
- var width = perLine * (emojiSize + 12) + 12 + 2 + Object(__WEBPACK_IMPORTED_MODULE_11__utils__["e" /* measureScrollbar */])();
+ var width = perLine * (emojiSize + 12) + 12 + 2 + Object(__WEBPACK_IMPORTED_MODULE_12__utils__["e" /* measureScrollbar */])();
return __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(
'div',
@@ -2780,16 +3005,17 @@ var NimblePicker = function (_React$PureComponent) {
__WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(
'div',
{ className: 'emoji-mart-bar' },
- __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["a" /* Anchors */], {
+ __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["a" /* Anchors */], {
ref: this.setAnchorsRef,
data: this.data,
i18n: this.i18n,
color: color,
categories: this.categories,
- onAnchorClick: this.handleAnchorClick
+ onAnchorClick: this.handleAnchorClick,
+ icons: this.icons
})
),
- __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["f" /* Search */], {
+ __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["g" /* Search */], {
ref: this.setSearchRef,
onSearch: this.handleSearch,
data: this.data,
@@ -2808,7 +3034,7 @@ var NimblePicker = function (_React$PureComponent) {
onScroll: this.handleScroll
},
this.getCategories().map(function (category, i) {
- return __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["b" /* Category */], {
+ return __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["b" /* Category */], {
ref: _this4.setCategoryRef.bind(_this4, 'category-' + i),
key: category.name,
id: category.id,
@@ -2833,14 +3059,16 @@ var NimblePicker = function (_React$PureComponent) {
onOver: _this4.handleEmojiOver,
onLeave: _this4.handleEmojiLeave,
onClick: _this4.handleEmojiClick
- }
+ },
+ notFound: notFound,
+ notFoundEmoji: notFoundEmoji
});
})
),
showPreview && __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(
'div',
{ className: 'emoji-mart-bar' },
- __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_14____["e" /* Preview */], {
+ __WEBPACK_IMPORTED_MODULE_7_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15____["f" /* Preview */], {
ref: this.setPreviewRef,
data: this.data,
title: title,
@@ -2869,15 +3097,15 @@ var NimblePicker = function (_React$PureComponent) {
/* harmony default export */ __webpack_exports__["a"] = (NimblePicker);
-NimblePicker.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, __WEBPACK_IMPORTED_MODULE_13__utils_shared_props__["c" /* PickerDefaultProps */]);
+NimblePicker.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, __WEBPACK_IMPORTED_MODULE_14__utils_shared_props__["c" /* PickerDefaultProps */]);
/***/ }),
-/* 40 */
+/* 41 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__src_polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -2886,9 +3114,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__src_polyfills_inherits__ = __webpack_require__(7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_dom__ = __webpack_require__(43);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_dom__ = __webpack_require__(44);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_dom___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_react_dom__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__src__ = __webpack_require__(56);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__src__ = __webpack_require__(57);
@@ -3007,7 +3235,7 @@ var Example = function (_React$Component) {
__WEBPACK_IMPORTED_MODULE_7_react_dom___default.a.render(__WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(Example, null), document.querySelector('div'));
/***/ }),
-/* 41 */
+/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -3020,7 +3248,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__(11),p=__webpack_require__(13);__webpack_require__(9);var r=__webpack_require__(8);
+var f=__webpack_require__(11),p=__webpack_require__(14);__webpack_require__(10);var r=__webpack_require__(8);
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 Array#indexOf
// true -> Array#includes
var toIObject = __webpack_require__(36);
-var toLength = __webpack_require__(68);
-var toAbsoluteIndex = __webpack_require__(69);
+var toLength = __webpack_require__(69);
+var toAbsoluteIndex = __webpack_require__(70);
module.exports = function (IS_INCLUDES) {
return function ($this, el, fromIndex) {
var O = toIObject($this);
@@ -23359,7 +23587,7 @@ module.exports = function (IS_INCLUDES) {
/***/ }),
-/* 68 */
+/* 69 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.15 ToLength
@@ -23371,7 +23599,7 @@ module.exports = function (it) {
/***/ }),
-/* 69 */
+/* 70 */
/***/ (function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__(37);
@@ -23384,18 +23612,18 @@ module.exports = function (index, length) {
/***/ }),
-/* 70 */
+/* 71 */
/***/ (function(module, exports, __webpack_require__) {
-var shared = __webpack_require__(71)('keys');
-var uid = __webpack_require__(72);
+var shared = __webpack_require__(72)('keys');
+var uid = __webpack_require__(73);
module.exports = function (key) {
return shared[key] || (shared[key] = uid(key));
};
/***/ }),
-/* 71 */
+/* 72 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(23);
@@ -23407,7 +23635,7 @@ module.exports = function (key) {
/***/ }),
-/* 72 */
+/* 73 */
/***/ (function(module, exports) {
var id = 0;
@@ -23418,7 +23646,7 @@ module.exports = function (key) {
/***/ }),
-/* 73 */
+/* 74 */
/***/ (function(module, exports) {
// IE 8- don't enum bug keys
@@ -23428,11 +23656,11 @@ module.exports = (
/***/ }),
-/* 74 */
+/* 75 */
/***/ (function(module, exports, __webpack_require__) {
// most Object methods by ES6 should accept primitives
-var $export = __webpack_require__(75);
+var $export = __webpack_require__(76);
var core = __webpack_require__(24);
var fails = __webpack_require__(27);
module.exports = function (KEY, exec) {
@@ -23444,13 +23672,13 @@ module.exports = function (KEY, exec) {
/***/ }),
-/* 75 */
+/* 76 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(23);
var core = __webpack_require__(24);
-var ctx = __webpack_require__(76);
-var hide = __webpack_require__(78);
+var ctx = __webpack_require__(77);
+var hide = __webpack_require__(79);
var PROTOTYPE = 'prototype';
var $export = function (type, name, source) {
@@ -23511,11 +23739,11 @@ module.exports = $export;
/***/ }),
-/* 76 */
+/* 77 */
/***/ (function(module, exports, __webpack_require__) {
// optional / simple context binding
-var aFunction = __webpack_require__(77);
+var aFunction = __webpack_require__(78);
module.exports = function (fn, that, length) {
aFunction(fn);
if (that === undefined) return fn;
@@ -23537,7 +23765,7 @@ module.exports = function (fn, that, length) {
/***/ }),
-/* 77 */
+/* 78 */
/***/ (function(module, exports) {
module.exports = function (it) {
@@ -23547,11 +23775,11 @@ module.exports = function (it) {
/***/ }),
-/* 78 */
+/* 79 */
/***/ (function(module, exports, __webpack_require__) {
-var dP = __webpack_require__(79);
-var createDesc = __webpack_require__(84);
+var dP = __webpack_require__(80);
+var createDesc = __webpack_require__(85);
module.exports = __webpack_require__(26) ? function (object, key, value) {
return dP.f(object, key, createDesc(1, value));
} : function (object, key, value) {
@@ -23561,12 +23789,12 @@ module.exports = __webpack_require__(26) ? function (object, key, value) {
/***/ }),
-/* 79 */
+/* 80 */
/***/ (function(module, exports, __webpack_require__) {
-var anObject = __webpack_require__(80);
-var IE8_DOM_DEFINE = __webpack_require__(81);
-var toPrimitive = __webpack_require__(83);
+var anObject = __webpack_require__(81);
+var IE8_DOM_DEFINE = __webpack_require__(82);
+var toPrimitive = __webpack_require__(84);
var dP = Object.defineProperty;
exports.f = __webpack_require__(26) ? Object.defineProperty : function defineProperty(O, P, Attributes) {
@@ -23583,7 +23811,7 @@ exports.f = __webpack_require__(26) ? Object.defineProperty : function definePro
/***/ }),
-/* 80 */
+/* 81 */
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(25);
@@ -23594,16 +23822,16 @@ module.exports = function (it) {
/***/ }),
-/* 81 */
+/* 82 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = !__webpack_require__(26) && !__webpack_require__(27)(function () {
- return Object.defineProperty(__webpack_require__(82)('div'), 'a', { get: function () { return 7; } }).a != 7;
+ return Object.defineProperty(__webpack_require__(83)('div'), 'a', { get: function () { return 7; } }).a != 7;
});
/***/ }),
-/* 82 */
+/* 83 */
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(25);
@@ -23616,7 +23844,7 @@ module.exports = function (it) {
/***/ }),
-/* 83 */
+/* 84 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.1 ToPrimitive(input [, PreferredType])
@@ -23634,7 +23862,7 @@ module.exports = function (it, S) {
/***/ }),
-/* 84 */
+/* 85 */
/***/ (function(module, exports) {
module.exports = function (bitmap, value) {
@@ -23648,7 +23876,7 @@ module.exports = function (bitmap, value) {
/***/ }),
-/* 85 */
+/* 86 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -23694,7 +23922,7 @@ var _String = String;
});
/***/ }),
-/* 86 */
+/* 87 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -23708,9 +23936,6 @@ var _String = String;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__svgs__ = __webpack_require__(87);
-
-
@@ -23740,20 +23965,6 @@ var Anchors = function (_React$PureComponent) {
}
Object(__WEBPACK_IMPORTED_MODULE_2__polyfills_createClass__["a" /* default */])(Anchors, [{
- key: 'getSVG',
- value: function getSVG(id) {
- this.SVGs || (this.SVGs = {});
-
- if (this.SVGs[id]) {
- return this.SVGs[id];
- } else {
- var svg = '';
-
- this.SVGs[id] = svg;
- return svg;
- }
- }
- }, {
key: 'handleClick',
value: function handleClick(e) {
var index = e.currentTarget.getAttribute('data-index');
@@ -23771,9 +23982,9 @@ var Anchors = function (_React$PureComponent) {
var _props2 = this.props;
var categories = _props2.categories;
- var onAnchorClick = _props2.onAnchorClick;
var color = _props2.color;
var i18n = _props2.i18n;
+ var icons = _props2.icons;
var selected = this.state.selected;
@@ -23800,7 +24011,11 @@ var Anchors = function (_React$PureComponent) {
className: 'emoji-mart-anchor ' + (isSelected ? 'emoji-mart-anchor-selected' : ''),
style: { color: isSelected ? color : null }
},
- __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement('div', { dangerouslySetInnerHTML: { __html: _this2.getSVG(id) } }),
+ __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(
+ 'div',
+ { className: 'emoji-mart-anchor-icon' },
+ icons.categories[id]()
+ ),
__WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement('span', {
className: 'emoji-mart-anchor-bar',
style: { backgroundColor: color }
@@ -23819,44 +24034,16 @@ var Anchors = function (_React$PureComponent) {
Anchors.defaultProps = {
categories: [],
- onAnchorClick: function onAnchorClick() {}
+ onAnchorClick: function onAnchorClick() {},
+ icons: {}
};
-/***/ }),
-/* 87 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-var SVGs = {
- activity: "",
-
- custom: "",
-
- flags: "",
-
- foods: "",
-
- nature: "",
-
- objects: "",
-
- people: "",
-
- places: "",
-
- recent: "",
-
- symbols: ""
-};
-
-/* harmony default export */ __webpack_exports__["a"] = (SVGs);
-
/***/ }),
/* 88 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -23869,7 +24056,7 @@ var SVGs = {
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_prop_types__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_frequently__ = __webpack_require__(29);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10____ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10____ = __webpack_require__(13);
@@ -24060,6 +24247,8 @@ var Category = function (_React$Component) {
var hasStickyPosition = _props3.hasStickyPosition;
var emojiProps = _props3.emojiProps;
var i18n = _props3.i18n;
+ var notFound = _props3.notFound;
+ var notFoundEmoji = _props3.notFoundEmoji;
var emojis = this.getEmojis();
var labelStyles = {};
var labelSpanStyles = {};
@@ -24085,7 +24274,7 @@ var Category = function (_React$Component) {
'div',
{
ref: this.setContainerRef,
- className: 'emoji-mart-category ' + (emojis && !emojis.length ? 'emoji-mart-no-results' : ''),
+ className: 'emoji-mart-category',
style: containerStyles
},
__WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
@@ -24104,28 +24293,13 @@ var Category = function (_React$Component) {
emojis && emojis.map(function (emoji) {
return Object(__WEBPACK_IMPORTED_MODULE_10____["c" /* NimbleEmoji */])(Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({ emoji: emoji, data: _this3.data }, emojiProps));
}),
- emojis && !emojis.length && __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
- 'div',
- null,
- __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
- 'div',
- null,
- Object(__WEBPACK_IMPORTED_MODULE_10____["c" /* NimbleEmoji */])(Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({
- data: this.data
- }, emojiProps, {
- size: 38,
- emoji: 'sleuth_or_spy',
- onOver: null,
- onLeave: null,
- onClick: null
- }))
- ),
- __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
- 'div',
- { className: 'emoji-mart-no-results-label' },
- i18n.notfound
- )
- )
+ emojis && !emojis.length && __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_10____["d" /* NotFound */], {
+ i18n: i18n,
+ notFound: notFound,
+ notFoundEmoji: notFoundEmoji,
+ data: this.data,
+ emojiProps: emojiProps
+ })
);
}
}]);
@@ -24146,7 +24320,7 @@ Category.defaultProps = {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -24158,7 +24332,7 @@ Category.defaultProps = {
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_prop_types__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9____ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9____ = __webpack_require__(13);
@@ -24279,7 +24453,7 @@ var Preview = function (_React$PureComponent) {
showSkinTones && __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
'div',
{ className: 'emoji-mart-preview-skins' },
- __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_9____["g" /* Skins */], skinsProps)
+ __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_9____["h" /* Skins */], skinsProps)
)
);
}
@@ -24301,6 +24475,81 @@ Preview.defaultProps = {
/* 90 */
/***/ (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_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__polyfills_createClass__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__polyfills_possibleConstructorReturn__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__polyfills_inherits__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7_prop_types__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8____ = __webpack_require__(13);
+
+
+
+
+
+
+
+
+
+
+var NotFound = function (_React$PureComponent) {
+ Object(__WEBPACK_IMPORTED_MODULE_5__polyfills_inherits__["a" /* default */])(NotFound, _React$PureComponent);
+
+ function NotFound() {
+ __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default()(this, NotFound);
+
+ return Object(__WEBPACK_IMPORTED_MODULE_4__polyfills_possibleConstructorReturn__["a" /* default */])(this, (NotFound.__proto__ || Object(__WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__["a" /* default */])(NotFound)).apply(this, arguments));
+ }
+
+ Object(__WEBPACK_IMPORTED_MODULE_3__polyfills_createClass__["a" /* default */])(NotFound, [{
+ key: 'render',
+ value: function render() {
+ var _props = this.props;
+ var data = _props.data;
+ var emojiProps = _props.emojiProps;
+ var i18n = _props.i18n;
+ var notFound = _props.notFound;
+ var notFoundEmoji = _props.notFoundEmoji;
+
+
+ var component = notFound && notFound() || __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
+ 'div',
+ { className: 'emoji-mart-no-results' },
+ Object(__WEBPACK_IMPORTED_MODULE_8____["c" /* NimbleEmoji */])(Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({
+ data: data
+ }, emojiProps, {
+ size: 38,
+ emoji: notFoundEmoji,
+ onOver: null,
+ onLeave: null,
+ onClick: null
+ })),
+ __WEBPACK_IMPORTED_MODULE_6_react___default.a.createElement(
+ 'div',
+ { className: 'emoji-mart-no-results-label' },
+ i18n.notfound
+ )
+ );
+
+ return component;
+ }
+ }]);
+
+ return NotFound;
+}(__WEBPACK_IMPORTED_MODULE_6_react___default.a.PureComponent);
+
+/* harmony default export */ __webpack_exports__["a"] = (NotFound);
+
+/***/ }),
+/* 91 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
@@ -24312,7 +24561,9 @@ Preview.defaultProps = {
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_emoji_index_nimble_emoji_index__ = __webpack_require__(22);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__svgs__ = __webpack_require__(38);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_emoji_index_nimble_emoji_index__ = __webpack_require__(22);
+
@@ -24331,17 +24582,30 @@ var Search = function (_React$PureComponent) {
var _this = Object(__WEBPACK_IMPORTED_MODULE_3__polyfills_possibleConstructorReturn__["a" /* default */])(this, (Search.__proto__ || Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_objectGetPrototypeOf__["a" /* default */])(Search)).call(this, props));
+ _this.state = {
+ icon: __WEBPACK_IMPORTED_MODULE_7__svgs__["search"].search,
+ isSearching: false
+ };
+
_this.data = props.data;
- _this.emojiIndex = new __WEBPACK_IMPORTED_MODULE_7__utils_emoji_index_nimble_emoji_index__["a" /* default */](_this.data);
+ _this.emojiIndex = new __WEBPACK_IMPORTED_MODULE_8__utils_emoji_index_nimble_emoji_index__["a" /* default */](_this.data);
_this.setRef = _this.setRef.bind(_this);
_this.handleChange = _this.handleChange.bind(_this);
+ _this.clear = _this.clear.bind(_this);
+ _this.handleKeyUp = _this.handleKeyUp.bind(_this);
return _this;
}
Object(__WEBPACK_IMPORTED_MODULE_2__polyfills_createClass__["a" /* default */])(Search, [{
- key: 'handleChange',
- value: function handleChange() {
- var value = this.input.value;
+ key: 'search',
+ value: function search(value) {
+ if (value == '') this.setState({
+ icon: __WEBPACK_IMPORTED_MODULE_7__svgs__["search"].search,
+ isSearching: false
+ });else this.setState({
+ icon: __WEBPACK_IMPORTED_MODULE_7__svgs__["search"].delete,
+ isSearching: true
+ });
this.props.onSearch(this.emojiIndex.search(value, {
emojisToShowFilter: this.props.emojisToShowFilter,
@@ -24351,22 +24615,39 @@ var Search = function (_React$PureComponent) {
custom: this.props.custom
}));
}
+ }, {
+ key: 'clear',
+ value: function clear() {
+ if (this.input.value == '') return;
+ this.input.value = '';
+ this.search('');
+ }
+ }, {
+ key: 'handleChange',
+ value: function handleChange() {
+ this.search(this.input.value);
+ }
+ }, {
+ key: 'handleKeyUp',
+ value: function handleKeyUp(e) {
+ if (e.keyCode === 13) {
+ this.clear();
+ }
+ }
}, {
key: 'setRef',
value: function setRef(c) {
this.input = c;
}
- }, {
- key: 'clear',
- value: function clear() {
- this.input.value = '';
- }
}, {
key: 'render',
value: function render() {
var _props = this.props;
var i18n = _props.i18n;
var autoFocus = _props.autoFocus;
+ var _state = this.state;
+ var icon = _state.icon;
+ var isSearching = _state.isSearching;
return __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(
@@ -24378,7 +24659,17 @@ var Search = function (_React$PureComponent) {
onChange: this.handleChange,
placeholder: i18n.search,
autoFocus: autoFocus
- })
+ }),
+ __WEBPACK_IMPORTED_MODULE_5_react___default.a.createElement(
+ 'button',
+ {
+ className: 'emoji-mart-search-icon',
+ onClick: this.clear,
+ onKeyUp: this.handleKeyUp,
+ disabled: !isSearching
+ },
+ icon()
+ )
);
}
}]);
@@ -24397,7 +24688,7 @@ Search.defaultProps = {
};
/***/ }),
-/* 91 */
+/* 92 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -24503,16 +24794,16 @@ Skins.defaultProps = {
};
/***/ }),
-/* 92 */
+/* 93 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
/* 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__data_all_json__ = __webpack_require__(21);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__data_all_json___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__data_all_json__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__nimble_emoji__ = __webpack_require__(38);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__nimble_emoji__ = __webpack_require__(39);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__ = __webpack_require__(17);
@@ -24538,11 +24829,11 @@ Emoji.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a"
/* unused harmony default export */ var _unused_webpack_default_export = (Emoji);
/***/ }),
-/* 93 */
+/* 94 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -24553,7 +24844,7 @@ Emoji.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a"
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__data_all_json__ = __webpack_require__(21);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__data_all_json___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7__data_all_json__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__nimble_picker__ = __webpack_require__(39);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__nimble_picker__ = __webpack_require__(40);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__utils_shared_props__ = __webpack_require__(17);
@@ -24592,7 +24883,7 @@ var Picker = function (_React$PureComponent) {
Picker.defaultProps = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, __WEBPACK_IMPORTED_MODULE_9__utils_shared_props__["c" /* PickerDefaultProps */], { data: __WEBPACK_IMPORTED_MODULE_7__data_all_json___default.a });
/***/ }),
-/* 94 */
+/* 95 */
/***/ (function(module, exports) {
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
diff --git a/docs/emoji-mart.css b/docs/emoji-mart.css
index 93e62d7..8db71f1 100644
--- a/docs/emoji-mart.css
+++ b/docs/emoji-mart.css
@@ -72,9 +72,11 @@
max-width: 22px;
}
-.emoji-mart-anchors svg {
+.emoji-mart-anchors svg,
+.emoji-mart-anchors img {
fill: currentColor;
- max-height: 18px;
+ height: 18px;
+ width: 18px;
}
.emoji-mart-scroll {
@@ -87,17 +89,29 @@
.emoji-mart-search {
margin-top: 6px;
padding: 0 6px;
+ position: relative;
}
+
.emoji-mart-search input {
font-size: 16px;
display: block;
width: 100%;
- padding: .2em .6em;
- border-radius: 25px;
+ padding: 5px 25px 6px 10px;
+ border-radius: 5px;
border: 1px solid #d9d9d9;
outline: 0;
}
+.emoji-mart-search-icon {
+ position: absolute;
+ top: 9px;
+ right: 16px;
+ z-index: 2;
+ padding: 0;
+ border: none;
+ background: none;
+}
+
.emoji-mart-category .emoji-mart-emoji span {
z-index: 1;
position: relative;
@@ -138,12 +152,22 @@
font-size: 0;
}
+.emoji-mart-emoji-native {
+ font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji";
+}
+
.emoji-mart-no-results {
font-size: 14px;
text-align: center;
padding-top: 70px;
color: #858585;
}
+.emoji-mart-no-results-img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+}
.emoji-mart-no-results .emoji-mart-category-label {
display: none;
}
diff --git a/package.json b/package.json
index 4290d34..5388859 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "emoji-mart",
- "version": "2.6.1",
+ "version": "2.7.0",
"description": "Customizable Slack-like emoji picker for React",
"main": "dist/index.js",
"module": "dist-es/index.js",
diff --git a/scripts/build.js b/scripts/build.js
index 580b7ff..b8dc5ef 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -3,7 +3,7 @@ var fs = require('fs'),
inflection = require('inflection'),
mkdirp = require('mkdirp')
-var { compress } = require('../src/utils/data')
+var { compress } = require('../dist/utils/data')
var categories = [
['Smileys & People', 'people'],
diff --git a/src/components/anchors.js b/src/components/anchors.js
index e620387..5008d6b 100644
--- a/src/components/anchors.js
+++ b/src/components/anchors.js
@@ -1,8 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import SVGs from '../svgs'
-
export default class Anchors extends React.PureComponent {
constructor(props) {
super(props)
@@ -18,21 +16,6 @@ export default class Anchors extends React.PureComponent {
this.handleClick = this.handleClick.bind(this)
}
- getSVG(id) {
- this.SVGs || (this.SVGs = {})
-
- if (this.SVGs[id]) {
- return this.SVGs[id]
- } else {
- let svg = ``
-
- this.SVGs[id] = svg
- return svg
- }
- }
-
handleClick(e) {
var index = e.currentTarget.getAttribute('data-index')
var { categories, onAnchorClick } = this.props
@@ -41,7 +24,7 @@ export default class Anchors extends React.PureComponent {
}
render() {
- var { categories, onAnchorClick, color, i18n } = this.props,
+ var { categories, color, i18n, icons } = this.props,
{ selected } = this.state
return (
@@ -65,7 +48,9 @@ export default class Anchors extends React.PureComponent {
}`}
style={{ color: isSelected ? color : null }}
>
-
+
+ {icons.categories[id]()}
+
{},
+ icons: {},
}
diff --git a/src/components/category.js b/src/components/category.js
index 890fbc5..dccf99e 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import frequently from '../utils/frequently'
import { getData } from '../utils'
-import { NimbleEmoji } from '.'
+import { NimbleEmoji, NotFound } from '.'
export default class Category extends React.Component {
constructor(props) {
@@ -144,7 +144,15 @@ export default class Category extends React.Component {
}
render() {
- var { id, name, hasStickyPosition, emojiProps, i18n } = this.props,
+ var {
+ id,
+ name,
+ hasStickyPosition,
+ emojiProps,
+ i18n,
+ notFound,
+ notFoundEmoji,
+ } = this.props,
emojis = this.getEmojis(),
labelStyles = {},
labelSpanStyles = {},
@@ -169,9 +177,7 @@ export default class Category extends React.Component {
return (
-
- {NimbleEmoji({
- data: this.data,
- ...emojiProps,
- size: 38,
- emoji: 'sleuth_or_spy',
- onOver: null,
- onLeave: null,
- onClick: null,
- })}
-
-
-
{i18n.notfound}
-
+
)}
)
@@ -220,6 +218,8 @@ Category.propTypes = {
perLine: PropTypes.number.isRequired,
emojiProps: PropTypes.object.isRequired,
recent: PropTypes.arrayOf(PropTypes.string),
+ notFound: PropTypes.func,
+ notFoundEmoji: PropTypes.string.isRequired,
}
Category.defaultProps = {
diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 2cc2652..765a68c 100644
--- a/src/components/emoji/nimble-emoji.js
+++ b/src/components/emoji/nimble-emoji.js
@@ -5,8 +5,6 @@ import { getData, getSanitizedData, unifiedToNative } from '../../utils'
import { uncompress } from '../../utils/data'
import { EmojiPropTypes, EmojiDefaultProps } from '../../utils/shared-props'
-const SHEET_COLUMNS = 52
-
const _getData = (props) => {
var { emoji, skin, set, data } = props
return getData(emoji, skin, set, data)
@@ -14,9 +12,10 @@ const _getData = (props) => {
const _getPosition = (props) => {
var { sheet_x, sheet_y } = _getData(props),
- multiply = 100 / (SHEET_COLUMNS - 1)
+ multiplyX = 100 / (props.sheetColumns - 1),
+ multiplyY = 100 / (props.sheetRows - 1)
- return `${multiply * sheet_x}% ${multiply * sheet_y}%`
+ return `${multiplyX * sheet_x}% ${multiplyY * sheet_y}%`
}
const _getSanitizedData = (props) => {
@@ -87,7 +86,11 @@ const NimbleEmoji = (props) => {
let data = _getData(props)
if (!data) {
- return null
+ if (props.fallback) {
+ return props.fallback(null, props)
+ } else {
+ return null
+ }
}
let { unified, custom, short_names, imageUrl } = data,
@@ -97,7 +100,11 @@ const NimbleEmoji = (props) => {
title = null
if (!unified && !custom) {
- return null
+ if (props.fallback) {
+ return props.fallback(data, props)
+ } else {
+ return null
+ }
}
if (props.tooltip) {
@@ -129,7 +136,7 @@ const NimbleEmoji = (props) => {
if (!setHasEmoji) {
if (props.fallback) {
- return props.fallback(data)
+ return props.fallback(data, props)
} else {
return null
}
@@ -142,7 +149,7 @@ const NimbleEmoji = (props) => {
props.set,
props.sheetSize,
)})`,
- backgroundSize: `${100 * SHEET_COLUMNS}%`,
+ backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`,
backgroundPosition: _getPosition(props),
}
}
diff --git a/src/components/index.js b/src/components/index.js
index 6b02d17..9c4c019 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,7 @@
export { default as Anchors } from './anchors'
export { default as Category } from './category'
export { default as Preview } from './preview'
+export { default as NotFound } from './not-found'
export { default as Search } from './search'
export { default as Skins } from './skins'
export { default as SkinsEmoji } from './skins-emoji'
diff --git a/src/components/not-found.js b/src/components/not-found.js
new file mode 100644
index 0000000..7ffda01
--- /dev/null
+++ b/src/components/not-found.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { NimbleEmoji } from '.'
+
+export default class NotFound extends React.PureComponent {
+ render() {
+ const { data, emojiProps, i18n, notFound, notFoundEmoji } = this.props
+
+ const component = (notFound && notFound()) || (
+
+ {NimbleEmoji({
+ data: data,
+ ...emojiProps,
+ size: 38,
+ emoji: notFoundEmoji,
+ onOver: null,
+ onLeave: null,
+ onClick: null,
+ })}
+
{i18n.notfound}
+
+ )
+
+ return component
+ }
+}
+
+NotFound.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 bbb6026..3960fee 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -3,6 +3,7 @@ import '../../vendor/raf-polyfill'
import React from 'react'
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'
@@ -49,6 +50,7 @@ export default class NimblePicker extends React.PureComponent {
this.data = props.data
this.i18n = deepMerge(I18N, props.i18n)
+ this.icons = deepMerge(icons, props.icons)
this.state = {
skin: props.skin || store.get('skin') || props.defaultSkin,
firstRender: true,
@@ -454,6 +456,8 @@ export default class NimblePicker extends React.PureComponent {
emojiSize,
set,
sheetSize,
+ sheetColumns,
+ sheetRows,
style,
title,
emoji,
@@ -469,6 +473,8 @@ export default class NimblePicker extends React.PureComponent {
recent,
autoFocus,
skinIcon,
+ notFound,
+ notFoundEmoji,
} = this.props,
{ skin } = this.state,
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
@@ -487,6 +493,7 @@ export default class NimblePicker extends React.PureComponent {
color={color}
categories={this.categories}
onAnchorClick={this.handleAnchorClick}
+ icons={this.icons}
/>
@@ -534,6 +541,8 @@ export default class NimblePicker extends React.PureComponent {
size: emojiSize,
set: set,
sheetSize: sheetSize,
+ sheetColumns: sheetColumns,
+ sheetRows: sheetRows,
forceSize: native,
tooltip: emojiTooltip,
backgroundImageFn: backgroundImageFn,
@@ -541,6 +550,8 @@ export default class NimblePicker extends React.PureComponent {
onLeave: this.handleEmojiLeave,
onClick: this.handleEmojiClick,
}}
+ notFound={notFound}
+ notFoundEmoji={notFoundEmoji}
/>
)
})}
diff --git a/src/components/search.js b/src/components/search.js
index 21f3cdb..fc8f31d 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -1,20 +1,36 @@
import React from 'react'
import PropTypes from 'prop-types'
+import { search as icons } from '../svgs'
import NimbleEmojiIndex from '../utils/emoji-index/nimble-emoji-index'
export default class Search extends React.PureComponent {
constructor(props) {
super(props)
+ this.state = {
+ icon: icons.search,
+ isSearching: false,
+ }
this.data = props.data
this.emojiIndex = new NimbleEmojiIndex(this.data)
this.setRef = this.setRef.bind(this)
this.handleChange = this.handleChange.bind(this)
+ this.clear = this.clear.bind(this)
+ this.handleKeyUp = this.handleKeyUp.bind(this)
}
- handleChange() {
- var value = this.input.value
+ search(value) {
+ if (value == '')
+ this.setState({
+ icon: icons.search,
+ isSearching: false,
+ })
+ else
+ this.setState({
+ icon: icons.delete,
+ isSearching: true,
+ })
this.props.onSearch(
this.emojiIndex.search(value, {
@@ -27,16 +43,29 @@ export default class Search extends React.PureComponent {
)
}
+ clear() {
+ if (this.input.value == '') return
+ this.input.value = ''
+ this.search('')
+ }
+
+ handleChange() {
+ this.search(this.input.value)
+ }
+
+ handleKeyUp(e) {
+ if (e.keyCode === 13) {
+ this.clear()
+ }
+ }
+
setRef(c) {
this.input = c
}
- clear() {
- this.input.value = ''
- }
-
render() {
var { i18n, autoFocus } = this.props
+ var { icon, isSearching } = this.state
return (
@@ -47,6 +76,14 @@ export default class Search extends React.PureComponent {
placeholder={i18n.search}
autoFocus={autoFocus}
/>
+
)
}
diff --git a/src/svgs/index.js b/src/svgs/index.js
index 877ce15..5f1a024 100644
--- a/src/svgs/index.js
+++ b/src/svgs/index.js
@@ -1,23 +1,166 @@
-const SVGs = {
- activity: ``,
+import React from 'react'
- custom: ``,
+const categories = {
+ activity: () => (
+
+ ),
- flags: ``,
+ custom: () => (
+
+ ),
- foods: ``,
+ flags: () => (
+
+ ),
- nature: ``,
+ foods: () => (
+
+ ),
- objects: ``,
+ nature: () => (
+
+ ),
- people: ``,
+ objects: () => (
+
+ ),
- places: ``,
+ people: () => (
+
+ ),
- recent: ``,
+ places: () => (
+
+ ),
- symbols: ``,
+ recent: () => (
+
+ ),
+
+ symbols: () => (
+
+ ),
}
-export default SVGs
+const search = {
+ search: () => (
+
+ ),
+
+ delete: () => (
+
+ ),
+}
+
+export { categories, search }
diff --git a/src/utils/data.js b/src/utils/data.js
index 00e7623..4ad17ca 100644
--- a/src/utils/data.js
+++ b/src/utils/data.js
@@ -103,4 +103,4 @@ const uncompress = (data) => {
}
}
-module.exports = { buildSearch, compress, uncompress }
+export { buildSearch, compress, uncompress }
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index 454a921..820d99c 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -12,6 +12,8 @@ const EmojiPropTypes = {
tooltip: PropTypes.bool,
skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
+ sheetColumns: PropTypes.number,
+ sheetRows: PropTypes.number,
set: PropTypes.oneOf([
'apple',
'google',
@@ -28,6 +30,8 @@ const EmojiDefaultProps = {
skin: 1,
set: 'apple',
sheetSize: 64,
+ sheetColumns: 52,
+ sheetRows: 52,
native: false,
forceSize: false,
tooltip: false,
@@ -72,6 +76,9 @@ const PickerPropTypes = {
}),
),
skinIcon: PropTypes.string,
+ notFound: PropTypes.func,
+ notFoundEmoji: PropTypes.string,
+ icons: PropTypes.object,
}
const PickerDefaultProps = {
@@ -98,6 +105,9 @@ const PickerDefaultProps = {
autoFocus: false,
custom: [],
skinIcon: '',
+ notFound: () => {},
+ notFoundEmoji: 'sleuth_or_spy',
+ icons: {},
}
export {
diff --git a/stories/index.js b/stories/index.js
index e6a3188..a6ba2c9 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -1,11 +1,18 @@
-import React from 'react';
+import React from 'react'
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs, text, boolean, number, select, color } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import {
+ withKnobs,
+ text,
+ boolean,
+ number,
+ select,
+ color,
+} from '@storybook/addon-knobs'
-import { Picker, Emoji, emojiIndex } from '../dist';
-import '../css/emoji-mart.css';
+import { Picker, Emoji, emojiIndex } from '../dist'
+import '../css/emoji-mart.css'
const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
const CUSTOM_EMOJIS = [
@@ -13,14 +20,14 @@ const CUSTOM_EMOJIS = [
name: 'Octocat',
short_names: ['octocat'],
keywords: ['github'],
- imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
+ imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7',
},
{
name: 'Squirrel',
short_names: ['shipit', 'squirrel'],
keywords: ['github'],
- imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
- }
+ imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7',
+ },
]
storiesOf('Picker', module)
@@ -36,19 +43,150 @@ storiesOf('Picker', module)
perLine={number('Per line', 9)}
title={text('Idle text', 'Your Title Here')}
emoji={text('Idle emoji', 'department_store')}
+ notFoundEmoji={text('Not found emoji', 'sleuth_or_spy')}
defaultSkin={number('Default skin tone', 1)}
color={color('Highlight color', '#ae65c5')}
showPreview={boolean('Show preview', true)}
showSkinTones={boolean('Show skin tones', true)}
custom={CUSTOM_EMOJIS}
- />))
- .add('custom-skin-icon', () => (
-
- ));
+ />
+ ))
+ .add('with a custom not found image', () => (
+ (
+
+ )}
+ />
+ ))
+ .add('with a custom not found SVG', () => (
+ (
+
+ )}
+ />
+ ))
+ .add('with-custom-icons', () => (
+ (
+
+ ),
+ people: () => (
+
+ ),
+ nature: () => (
+
+ ),
+ foods: () => (
+
+ ),
+ activity: () => (
+
+ ),
+ places: () => (
+
+ ),
+ objects: () => (
+
+ ),
+ symbols: () => (
+
+ ),
+ flags: () => (
+
+ ),
+ custom: () => (
+
+ ),
+ },
+ }}
+ />
+ ))
+ .add('custom-skin-icon', () => (
+
+ ))
storiesOf('Emoji', module)
.addDecorator(withKnobs)
@@ -60,23 +198,31 @@ storiesOf('Emoji', module)
size={number('Emoji size', 64)}
skin={number('Skin tone', 1)}
html={boolean('HTML', false)}
- fallback={(emoji) => {
- return `:${emoji.short_names[0]}:`
+ fallback={(emoji, props) => {
+ return emoji ? `:${emoji.short_names[0]}:` : props.emoji
}}
/>
- ));
+ ))
storiesOf('Headless Search', module)
.addDecorator(withKnobs)
.add('default', () => {
- let results = emojiIndex.search(text('Search', 'christmas'), { custom: CUSTOM_EMOJIS })
- if (!results) { return null }
+ let results = emojiIndex.search(text('Search', 'christmas'), {
+ custom: CUSTOM_EMOJIS,
+ })
+ if (!results) {
+ return null
+ }
- return
- {results.map((emoji) => {
- return
-
-
- })}
-
- });
+ return (
+
+ {results.map((emoji) => {
+ return (
+
+
+
+ )
+ })}
+
+ )
+ })