react-emojione-menu - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/components/emoji-categories.js

@@ -45,3 +45,7 @@ 'use strict';
 
-function EmojiCategories() {
+function EmojiCategories(_ref) {
+  var changeCategory = _ref.changeCategory,
+      category = _ref.category,
+      activeColor = _ref.activeColor;
+
   return _react2.default.createElement(
@@ -51,40 +55,56 @@ 'footer',
     _react2.default.createElement(
-      'a',
-      { href: '#recent' },
-      _react2.default.createElement(_iconRecent2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('recent');
+        } },
+      _react2.default.createElement(_iconRecent2.default, { color: category === 'recent' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#people' },
-      _react2.default.createElement(_iconPeople2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('people');
+        } },
+      _react2.default.createElement(_iconPeople2.default, { color: category === 'people' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#nature' },
-      _react2.default.createElement(_iconNature2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('nature');
+        } },
+      _react2.default.createElement(_iconNature2.default, { color: category === 'nature' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#food' },
-      _react2.default.createElement(_iconFood2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('food');
+        } },
+      _react2.default.createElement(_iconFood2.default, { color: category === 'food' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#activity' },
-      _react2.default.createElement(_iconActivity2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('activity');
+        } },
+      _react2.default.createElement(_iconActivity2.default, { color: category === 'activity' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#travel' },
-      _react2.default.createElement(_iconTravel2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('travel');
+        } },
+      _react2.default.createElement(_iconTravel2.default, { color: category === 'travel' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#objects' },
-      _react2.default.createElement(_iconObjects2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('objects');
+        } },
+      _react2.default.createElement(_iconObjects2.default, { color: category === 'objects' ? activeColor : null })
     ),
     _react2.default.createElement(
-      'a',
-      { href: '#symbols' },
-      _react2.default.createElement(_iconSymbols2.default, null)
+      'span',
+      { onClick: function onClick() {
+          return changeCategory('symbols');
+        } },
+      _react2.default.createElement(_iconSymbols2.default, { color: category === 'symbols' ? activeColor : null })
     )
@@ -94,3 +114,9 @@ );
 
+EmojiCategories.propTypes = {
+  changeCategory: _react.PropTypes.func.isRequired,
+  category: _react.PropTypes.string.isRequired,
+  activeColor: _react.PropTypes.string.isRequired
+};
+
 exports.default = EmojiCategories;
 module.exports = exports['default'];

dist/components/icons/icon-activity.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconActivity() {
+function IconActivity(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+    _react2.default.createElement('path', { d: 'M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z' })
   );
 }
 
+IconActivity.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconActivity;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-flags.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconFlags() {
+function IconFlags(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+    _react2.default.createElement('path', { d: 'M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z' })
   );
 }
 
+IconFlags.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconFlags;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-food.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconFood() {
+function IconFood(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.2-1.1-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+    _react2.default.createElement('path', { d: 'M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.2-1.1-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z' })
   );
 }
 
+IconFood.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconFood;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-nature.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconNature() {
+function IconNature(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M12 22c4.97 0 9-4.03 9-9-4.97 0-9 4.03-9 9zM5.6 10.25c0 1.38 1.12 2.5 2.5 2.5.53 0 1.01-.16 1.42-.44l-.02.19c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5l-.02-.19c.4.28.89.44 1.42.44 1.38 0 2.5-1.12 2.5-2.5 0-1-.59-1.85-1.43-2.25.84-.4 1.43-1.25 1.43-2.25 0-1.38-1.12-2.5-2.5-2.5-.53 0-1.01.16-1.42.44l.02-.19C14.5 2.12 13.38 1 12 1S9.5 2.12 9.5 3.5l.02.19c-.4-.28-.89-.44-1.42-.44-1.38 0-2.5 1.12-2.5 2.5 0 1 .59 1.85 1.43 2.25-.84.4-1.43 1.25-1.43 2.25zM12 5.5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zM3 13c0 4.97 4.03 9 9 9 0-4.97-4.03-9-9-9z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+    _react2.default.createElement('path', { d: 'M12 22c4.97 0 9-4.03 9-9-4.97 0-9 4.03-9 9zM5.6 10.25c0 1.38 1.12 2.5 2.5 2.5.53 0 1.01-.16 1.42-.44l-.02.19c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5l-.02-.19c.4.28.89.44 1.42.44 1.38 0 2.5-1.12 2.5-2.5 0-1-.59-1.85-1.43-2.25.84-.4 1.43-1.25 1.43-2.25 0-1.38-1.12-2.5-2.5-2.5-.53 0-1.01.16-1.42.44l.02-.19C14.5 2.12 13.38 1 12 1S9.5 2.12 9.5 3.5l.02.19c-.4-.28-.89-.44-1.42-.44-1.38 0-2.5 1.12-2.5 2.5 0 1 .59 1.85 1.43 2.25-.84.4-1.43 1.25-1.43 2.25zM12 5.5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zM3 13c0 4.97 4.03 9 9 9 0-4.97-4.03-9-9-9z' })
   );
 }
 
+IconNature.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconNature;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-objects.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconObjects() {
+function IconObjects(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none", opacity: ".1" }),
-    _react2.default.createElement("path", { d: "M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none', opacity: '.1' }),
+    _react2.default.createElement('path', { d: 'M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z' })
   );
 }
 
+IconObjects.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconObjects;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-people.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconPeople() {
+function IconPeople(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-10.06L14.06 11l1.06-1.06L16.18 11l1.06-1.06-2.12-2.12zm-4.12 0L9.94 11 11 9.94 8.88 7.82 6.76 9.94 7.82 11zM12 17.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" }),
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-10.06L14.06 11l1.06-1.06L16.18 11l1.06-1.06-2.12-2.12zm-4.12 0L9.94 11 11 9.94 8.88 7.82 6.76 9.94 7.82 11zM12 17.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z' }),
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' })
   );
 }
 
+IconPeople.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconPeople;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-recent.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,13 +14,21 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconRecent() {
+function IconRecent(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }),
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' }),
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+    _react2.default.createElement('path', { d: 'M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z' })
   );
 }
 
+IconRecent.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconRecent;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-symbols.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconSymbols() {
+function IconSymbols(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+    _react2.default.createElement('path', { d: 'M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z' })
   );
 }
 
+IconSymbols.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconSymbols;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/components/icons/icon-travel.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -14,12 +14,20 @@ var _react2 = _interopRequireDefault(_react);
 
-function IconTravel() {
+function IconTravel(_ref) {
+  var color = _ref.color;
+
+  var fill = color || '#B3B3B3';
+
   return _react2.default.createElement(
-    "svg",
-    { fill: "#B3B3B3", height: "24", viewBox: "0 0 24 24", width: "24" },
-    _react2.default.createElement("path", { d: "M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z" }),
-    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" })
+    'svg',
+    { fill: fill, height: '24', viewBox: '0 0 24 24', width: '24' },
+    _react2.default.createElement('path', { d: 'M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z' }),
+    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' })
   );
 }
 
+IconTravel.propTypes = {
+  color: _react.PropTypes.string
+};
+
 exports.default = IconTravel;
-module.exports = exports["default"];
+module.exports = exports['default'];

dist/index.js

@@ -69,6 +69,8 @@ 'use strict';
       tone: 'tone0',
-      storedEmojis: storedEmojis || []
+      storedEmojis: storedEmojis || [],
+      category: 'people'
     };
 
     _this.changeTone = _this.changeTone.bind(_this);
+    _this.changeCategory = _this.changeCategory.bind(_this);
     _this.sendEmoji = _this.sendEmoji.bind(_this);
@@ -86,2 +88,9 @@ return _this;
   }, {
+    key: 'changeCategory',
+    value: function changeCategory(category) {
+      this.setState({
+        category: category
+      });
+    }
+  }, {
     key: 'sendEmoji',
@@ -104,13 +113,21 @@ value: function sendEmoji(emoji) {
     value: function render() {
-      var _this2 = this;
-
       var _state = this.state,
           tone = _state.tone,
-          storedEmojis = _state.storedEmojis;
+          storedEmojis = _state.storedEmojis,
+          category = _state.category;
+      var activeColor = this.props.activeColor;
 
 
-      var categories = ['people', 'nature', 'food', 'activity', 'travel', 'objects', 'flags', 'symbols'];
+      var color = activeColor || '#62B3EC';
 
       var modifiers = _underscore2.default.where(_emoji2.default, { category: 'modifier' });
 
+      var filteredEmoji = _underscore2.default.chain(_emoji2.default).where({ category: category }).filter(function (emoji) {
+        if (emoji.title.includes('tone')) {
+          return emoji.title.includes(tone);
+        }
+
+        return true;
+      }).value();
+
       return _react2.default.createElement(
@@ -123,3 +140,3 @@ 'section',
           { className: 'emoji-categories' },
-          storedEmojis.length > 0 ? _react2.default.createElement(_emojiCategory2.default, {
+          storedEmojis.length > 0 && category === 'recent' ? _react2.default.createElement(_emojiCategory2.default, {
             emojis: storedEmojis,
@@ -129,20 +146,13 @@ category: 'recent',
           }) : null,
-          _underscore2.default.map(categories, function (category) {
-            var filteredEmoji = _underscore2.default.chain(_emoji2.default).where({ category: category }).filter(function (emoji) {
-              if (emoji.title.includes('tone')) {
-                return emoji.title.includes(tone);
-              }
-
-              return true;
-            }).value();
-
-            return _react2.default.createElement(_emojiCategory2.default, {
-              key: category,
-              emojis: filteredEmoji,
-              category: category,
-              sendEmoji: _this2.sendEmoji
-            });
-          })
+          category !== 'recent' ? _react2.default.createElement(_emojiCategory2.default, {
+            emojis: filteredEmoji,
+            category: category,
+            sendEmoji: this.sendEmoji
+          }) : null
         ),
-        _react2.default.createElement(_emojiCategories2.default, null)
+        _react2.default.createElement(_emojiCategories2.default, {
+          changeCategory: this.changeCategory,
+          category: category,
+          activeColor: color
+        })
       );
@@ -157,2 +167,3 @@ }
   svgSprites: _react.PropTypes.string,
+  activeColor: _react.PropTypes.string,
   sendEmoji: _react.PropTypes.func.isRequired
@@ -159,0 +170,0 @@ };

package.json

 {
   "name": "react-emojione-menu",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Emoji menu with React and emojione",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

606464

increased by0.44%

Lines of code

17487

increased by0.47%

No dependency changes