interweave-emoji - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# 1.3.0 - 10/23/17
+#### 🚀 New
+* Updated `withEmojiData` to refresh data if props change.
+
+#### 🐞 Fixed
+* Passing custom `emoijs` to `withEmojiData` will no longer mutate official data in `EmojiData`.
+
 # 1.2.0 - 10/12/17
@@ -2,0 +9,0 @@ #### 🚀 New

lib/withEmojiData.js

@@ -54,10 +54,13 @@ 'use strict';
 
+var _shapes = require('./shapes');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var loaded = {}; /**
-                  * @copyright   2016, Miles Johnson
-                  * @license     https://opensource.org/licenses/MIT
-                  * 
-                  */
+/**
+ * @copyright   2016, Miles Johnson
+ * @license     https://opensource.org/licenses/MIT
+ * 
+ */
 
+var loaded = {};
 var promise = {};
@@ -75,4 +78,4 @@
 
-  return _temp2 = _class = function (_React$Component) {
-    (0, _inherits3.default)(EmojiDataLoader, _React$Component);
+  return _temp2 = _class = function (_React$PureComponent) {
+    (0, _inherits3.default)(EmojiDataLoader, _React$PureComponent);
 
@@ -98,4 +101,7 @@ function EmojiDataLoader() {
       value: function componentWillMount() {
-        var _this2 = this;
-
+        this.loadEmojis(this.props);
+      }
+    }, {
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
         var _props = this.props,
@@ -107,15 +113,26 @@ compact = _props.compact,
 
-        var data = this.getDataInstance();
 
+        if (nextProps.compact !== compact || nextProps.emojis !== emojis || nextProps.locale !== locale || nextProps.version !== version) {
+          this.loadEmojis(nextProps);
+        }
+      }
+    }, {
+      key: 'getDataInstance',
+      value: function getDataInstance() {
+        return _EmojiData2.default.getInstance(this.props.locale);
+      }
+    }, {
+      key: 'loadEmojis',
+      value: function loadEmojis(props) {
+        var _this2 = this;
+
+        var compact = props.compact,
+            locale = props.locale,
+            version = props.version;
+
         if (loaded[locale]) {
-          this.setState({
-            emojis: data.getData()
-          });
-        } else if (emojis.length > 0) {
-          this.loadData(emojis);
+          this.setEmojis(props.emojis);
         } else if (promise[locale]) {
           promise[locale].then(function () {
-            _this2.setState({
-              emojis: data.getData()
-            });
+            _this2.setEmojis(props.emojis);
           }).catch(function (error) {
@@ -126,3 +143,6 @@ throw error;
           promise[locale] = (0, _emojibase.fetchFromCDN)(locale + '/' + (compact ? 'compact' : 'data') + '.json', version).then(function (response) {
-            _this2.loadData(response);
+            loaded[locale] = true;
+
+            _this2.getDataInstance().parseEmojiData(response);
+            _this2.setEmojis(props.emojis);
           }).catch(function (error) {
@@ -134,14 +154,9 @@ throw error;
     }, {
-      key: 'getDataInstance',
-      value: function getDataInstance() {
-        return _EmojiData2.default.getInstance(this.props.locale);
-      }
-    }, {
-      key: 'loadData',
-      value: function loadData(data) {
+      key: 'setEmojis',
+      value: function setEmojis() {
+        var emojis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
         this.setState({
-          emojis: this.getDataInstance().parseEmojiData(Array.isArray(data) ? data : JSON.parse(data))
+          emojis: emojis.length > 0 ? emojis : this.getDataInstance().getData()
         });
-
-        loaded[this.props.locale] = true;
       }
@@ -158,15 +173,17 @@ }, {
 
-        var emojiSource = {
-          compact: compact,
-          locale: locale,
-          version: version
-        };
 
-        return _react2.default.createElement(Component, (0, _extends3.default)({}, props, { emojis: this.state.emojis, emojiSource: emojiSource }));
+        return _react2.default.createElement(Component, (0, _extends3.default)({}, props, {
+          emojis: this.state.emojis,
+          emojiSource: {
+            compact: compact,
+            locale: locale,
+            version: version
+          }
+        }));
       }
     }]);
     return EmojiDataLoader;
-  }(_react2.default.Component), _class.propTypes = {
+  }(_react2.default.PureComponent), _class.propTypes = {
     compact: _propTypes2.default.bool,
-    emojis: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.object)]),
+    emojis: _propTypes2.default.arrayOf(_shapes.EmojiShape),
     locale: _propTypes2.default.oneOf(_constants.SUPPORTED_LOCALES),
@@ -173,0 +190,0 @@ version: _propTypes2.default.string

package.json

 {
   "name": "interweave-emoji",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Emoji support for Interweave.",
@@ -24,11 +24,11 @@ "keywords": [
     "emojibase": "^1.4.0",
-    "interweave": "^8.0.0",
+    "interweave": "^8.0.1",
     "react": "^15.3.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@milesj/build-tool-config": "^0.31.0",
+    "@milesj/build-tool-config": "^0.35.0",
     "emojibase": "^1.4.2",
-    "interweave": "^8.0.0",
+    "interweave": "^8.0.1",
     "react": "^16.0.0"
   }
 }

src/Emoji.js

@@ -64,3 +64,3 @@ /**
 
-  render() {
+  render(): React$Node {
     const data = EmojiData.getInstance(this.props.emojiSource.locale);
@@ -67,0 +67,0 @@ const {

src/EmojiData.js

@@ -22,8 +22,13 @@ /**
   EMOJIS: { [hexcode: string]: Emoji } = {};
+
   EMOTICON_TO_HEXCODE: { [emoticon: string]: string } = {};
+
   SHORTCODE_TO_HEXCODE: { [shortcode: string]: string } = {};
+
   UNICODE_TO_HEXCODE: { [unicode: string]: string } = {};
 
   data: Emoji[] = [];
+
   flatData: Emoji[] = [];
+
   locale: string = 'en';
@@ -38,3 +43,3 @@
    */
-  static getInstance(locale: string) {
+  static getInstance(locale: string): EmojiData {
     if (!instances[locale]) {
@@ -41,0 +46,0 @@ instances[locale] = new EmojiData(locale);

src/EmojiMatcher.js

@@ -30,2 +30,3 @@ /**
   data: EmojiData;
+
   options: EmojiOptions;
@@ -163,2 +164,3 @@
         // Only count towards emojis
+        // $FlowIgnore Portals are finnicky
         if (item && item.type === Emoji) {
@@ -165,0 +167,0 @@ count += 1;

src/withEmojiData.js

@@ -14,2 +14,3 @@ /**
 import EmojiData from './EmojiData';
+import { EmojiShape } from './shapes';
 
@@ -43,9 +44,9 @@ import type { Emoji } from 'emojibase'; // eslint-disable-line
 ): React$ComponentType<EmojiDataLoaderProps> {
-  return class EmojiDataLoader extends React.Component<EmojiDataLoaderProps, EmojiDataLoaderState> {
+  return class EmojiDataLoader extends React.PureComponent<
+    EmojiDataLoaderProps,
+    EmojiDataLoaderState,
+  > {
     static propTypes = {
       compact: PropTypes.bool,
-      emojis: PropTypes.oneOfType([
-        PropTypes.string, // JSON
-        PropTypes.arrayOf(PropTypes.object),
-      ]),
+      emojis: PropTypes.arrayOf(EmojiShape),
       locale: PropTypes.oneOf(SUPPORTED_LOCALES),
@@ -67,2 +68,6 @@ version: PropTypes.string,
     componentWillMount() {
+      this.loadEmojis(this.props);
+    }
+
+    componentWillReceiveProps(nextProps: EmojiDataLoaderProps) {
       const {
@@ -74,14 +79,30 @@ compact,
       } = this.props;
-      const data = this.getDataInstance();
 
+      if (
+        nextProps.compact !== compact ||
+        nextProps.emojis !== emojis ||
+        nextProps.locale !== locale ||
+        nextProps.version !== version
+      ) {
+        this.loadEmojis(nextProps);
+      }
+    }
+
+    /**
+     * Create or return the data instance.
+     */
+    getDataInstance(): EmojiData {
+      return EmojiData.getInstance(this.props.locale);
+    }
+
+    /**
+     * Load and parse emoji data from the CDN or use the provided dataset.
+     */
+    loadEmojis(props: EmojiDataLoaderProps) {
+      const { compact, locale, version } = props;
+
       // Abort as we've already loaded data
       if (loaded[locale]) {
-        this.setState({
-          emojis: data.getData(),
-        });
+        this.setEmojis(props.emojis);
 
-      // Load data if it was manually passed
-      } else if (emojis.length > 0) {
-        this.loadData(emojis);
-
       // Or hook into the promise if we're loading
@@ -91,5 +112,3 @@ } else if (promise[locale]) {
           .then(() => {
-            this.setState({
-              emojis: data.getData(),
-            });
+            this.setEmojis(props.emojis);
           })
@@ -104,3 +123,8 @@ .catch((error) => {
           .then((response) => {
-            this.loadData(response);
+            loaded[locale] = true;
+
+            // Parse the data and make it available through our data layer.
+            // We should do this first so that the custom emojis can hook into it.
+            this.getDataInstance().parseEmojiData(response);
+            this.setEmojis(props.emojis);
           })
@@ -114,19 +138,9 @@ .catch((error) => {
     /**
-     * Create or return the data instance.
+     * Set a list of emojis. If a list of custom emoji data has been passed,
+     * use it instead of the parsed data.
      */
-    getDataInstance(): EmojiData {
-      return EmojiData.getInstance(this.props.locale);
-    }
-
-    /**
-     * Parse emoji data and make it available to Interweave
-     */
-    loadData(data: string | Emoji[]) {
+    setEmojis(emojis: Emoji[] = []) {
       this.setState({
-        emojis: this.getDataInstance().parseEmojiData(
-          Array.isArray(data) ? data : JSON.parse(data),
-        ),
+        emojis: (emojis.length > 0) ? emojis : this.getDataInstance().getData(),
       });
-
-      loaded[this.props.locale] = true;
     }
@@ -137,3 +151,3 @@
      */
-    render() {
+    render(): React$Node {
       const {
@@ -146,10 +160,13 @@ compact,
       } = this.props;
-      const emojiSource = {
-        compact,
-        locale,
-        version,
-      };
 
       return (
-        <Component {...props} emojis={this.state.emojis} emojiSource={emojiSource} />
+        <Component
+          {...props}
+          emojis={this.state.emojis}
+          emojiSource={{
+            compact,
+            locale,
+            version,
+          }}
+        />
       );
@@ -156,0 +173,0 @@ }

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

253440

increased by0.47%

Lines of code

1236

increased by2.49%

Worsened metrics

Number of package files

17

decreased by-5.56%

No dependency changes