@egjs/react-flicking - npm Package Compare versions

Comparing version 4.10.0 to 4.10.1

declaration/Flicking.d.ts

@@ -16,3 +16,3 @@ import * as React from "react";
     private _renderEmitter;
-    private _currentState;
+    private _prevProps;
     get reactPanels(): (StrictPanel | NonStrictPanel | HTMLDivElement)[];
@@ -25,3 +25,4 @@ get renderEmitter(): Component<{
     componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: this["props"]): boolean;
+    shouldComponentUpdate(nextProps: Readonly<Partial<FlickingProps & FlickingOptions>>): boolean;
+    beforeRender(): void;
     componentDidUpdate(): void;
@@ -32,2 +33,3 @@ render(): JSX.Element;
     private _checkPlugins;
+    private _hasSameChildren;
     private _getChildren;
@@ -34,0 +36,0 @@ private _getViewportSlot;

dist/flicking.cjs.js

@@ -68,2 +68,12 @@ /*
 };
+function __rest(s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
 function __decorate(decorators, target, key, desc) {
@@ -473,10 +483,2 @@ var c = arguments.length,
 
-var LifeCycleState;
-
-(function (LifeCycleState) {
-  LifeCycleState[LifeCycleState["BEFORE_UPDATE"] = 0] = "BEFORE_UPDATE";
-  LifeCycleState[LifeCycleState["RENDER"] = 1] = "RENDER";
-  LifeCycleState[LifeCycleState["UPDATED"] = 2] = "UPDATED";
-})(LifeCycleState || (LifeCycleState = {}));
-
 var Flicking =
@@ -492,4 +494,4 @@ /*#__PURE__*/
     _this._renderEmitter = new Component();
-    _this._currentState = LifeCycleState.BEFORE_UPDATE;
     _this._panels = _this._createPanelRefs(props, _this._getChildren());
+    _this._prevProps = _this.props;
     return _this;
@@ -529,3 +531,2 @@ }
     this._vanillaFlicking = flicking;
-    this._currentState = LifeCycleState.UPDATED;
 
@@ -538,2 +539,3 @@ var children = this._getChildren();
     this._pluginsDiffer = new ListDiffer();
+    this._prevProps = this.props;
 
@@ -557,17 +559,11 @@ this._bindEvents();
     var vanillaFlicking = this._vanillaFlicking;
-    var props = this.props; // Ignore updates before init, they will be updated after "ready" event's force update
-
+    var prevProps = this.props;
     if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
+    if (!this._hasSameChildren(prevProps, nextProps)) return true;
 
-    if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {
-      var nextChildren = this._getChildren(nextProps.children);
+    nextProps.children;
+        var restProps = __rest(nextProps, ["children"]);
 
-      this._panels = this._createPanelRefs(nextProps, nextChildren);
-      this._diffResult = this._jsxDiffer.update(nextChildren);
-    }
-
-    this._currentState = LifeCycleState.BEFORE_UPDATE;
-
-    for (var key in nextProps) {
-      if (props[key] !== nextProps[key]) {
+    for (var key in restProps) {
+      if (prevProps[key] !== nextProps[key]) {
         return true;
@@ -580,2 +576,17 @@ }
 
+  __proto.beforeRender = function () {
+    var vanillaFlicking = this._vanillaFlicking;
+    var nextProps = this.props;
+    var prevProps = this._prevProps; // Ignore updates before init, they will be updated after "ready" event's force update
+
+    if (!vanillaFlicking || !vanillaFlicking.initialized) return;
+
+    if (!this._hasSameChildren(prevProps, nextProps)) {
+      var nextChildren = this._getChildren(nextProps.children);
+
+      this._panels = this._createPanelRefs(nextProps, nextChildren);
+      this._diffResult = this._jsxDiffer.update(nextChildren);
+    }
+  };
+
   __proto.componentDidUpdate = function () {
@@ -590,3 +601,2 @@ var flicking = this._vanillaFlicking;
     flicking.camera.updateOffset();
-    this._currentState = LifeCycleState.UPDATED;
     if (!diffResult || !flicking.initialized) return;
@@ -607,3 +617,3 @@ VanillaFlicking.sync(flicking, diffResult, this.reactPanels);
     var flicking = this._vanillaFlicking;
-    this._currentState = LifeCycleState.RENDER;
+    this.beforeRender();
 
@@ -643,2 +653,3 @@ for (var name in props) {
     var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
+    this._prevProps = props;
     return React.createElement(Viewport, __assign({}, attributes, {
@@ -710,2 +721,20 @@ className: viewportClasses.join(" "),
 
+  __proto._hasSameChildren = function (prevProps, nextProps) {
+    var prevChildren = this._getChildren(prevProps.children);
+
+    var nextChildren = this._getChildren(nextProps.children);
+
+    if (prevChildren.length !== nextChildren.length) return false;
+    var same = prevChildren.every(function (child, idx) {
+      var nextChild = nextChildren[idx];
+
+      if (child.key && nextChild.key) {
+        return child.key === nextChild.key;
+      } else {
+        return child === nextChild;
+      }
+    });
+    return same;
+  };
+
   __proto._getChildren = function (children) {
@@ -712,0 +741,0 @@ var _this = this;

dist/flicking.esm.js

@@ -68,2 +68,12 @@ /*
 };
+function __rest(s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
 function __decorate(decorators, target, key, desc) {
@@ -473,10 +483,2 @@ var c = arguments.length,
 
-var LifeCycleState;
-
-(function (LifeCycleState) {
-  LifeCycleState[LifeCycleState["BEFORE_UPDATE"] = 0] = "BEFORE_UPDATE";
-  LifeCycleState[LifeCycleState["RENDER"] = 1] = "RENDER";
-  LifeCycleState[LifeCycleState["UPDATED"] = 2] = "UPDATED";
-})(LifeCycleState || (LifeCycleState = {}));
-
 var Flicking =
@@ -492,4 +494,4 @@ /*#__PURE__*/
     _this._renderEmitter = new Component();
-    _this._currentState = LifeCycleState.BEFORE_UPDATE;
     _this._panels = _this._createPanelRefs(props, _this._getChildren());
+    _this._prevProps = _this.props;
     return _this;
@@ -529,3 +531,2 @@ }
     this._vanillaFlicking = flicking;
-    this._currentState = LifeCycleState.UPDATED;
 
@@ -538,2 +539,3 @@ var children = this._getChildren();
     this._pluginsDiffer = new ListDiffer();
+    this._prevProps = this.props;
 
@@ -557,17 +559,11 @@ this._bindEvents();
     var vanillaFlicking = this._vanillaFlicking;
-    var props = this.props; // Ignore updates before init, they will be updated after "ready" event's force update
-
+    var prevProps = this.props;
     if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
+    if (!this._hasSameChildren(prevProps, nextProps)) return true;
 
-    if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {
-      var nextChildren = this._getChildren(nextProps.children);
+    nextProps.children;
+        var restProps = __rest(nextProps, ["children"]);
 
-      this._panels = this._createPanelRefs(nextProps, nextChildren);
-      this._diffResult = this._jsxDiffer.update(nextChildren);
-    }
-
-    this._currentState = LifeCycleState.BEFORE_UPDATE;
-
-    for (var key in nextProps) {
-      if (props[key] !== nextProps[key]) {
+    for (var key in restProps) {
+      if (prevProps[key] !== nextProps[key]) {
         return true;
@@ -580,2 +576,17 @@ }
 
+  __proto.beforeRender = function () {
+    var vanillaFlicking = this._vanillaFlicking;
+    var nextProps = this.props;
+    var prevProps = this._prevProps; // Ignore updates before init, they will be updated after "ready" event's force update
+
+    if (!vanillaFlicking || !vanillaFlicking.initialized) return;
+
+    if (!this._hasSameChildren(prevProps, nextProps)) {
+      var nextChildren = this._getChildren(nextProps.children);
+
+      this._panels = this._createPanelRefs(nextProps, nextChildren);
+      this._diffResult = this._jsxDiffer.update(nextChildren);
+    }
+  };
+
   __proto.componentDidUpdate = function () {
@@ -590,3 +601,2 @@ var flicking = this._vanillaFlicking;
     flicking.camera.updateOffset();
-    this._currentState = LifeCycleState.UPDATED;
     if (!diffResult || !flicking.initialized) return;
@@ -607,3 +617,3 @@ sync(flicking, diffResult, this.reactPanels);
     var flicking = this._vanillaFlicking;
-    this._currentState = LifeCycleState.RENDER;
+    this.beforeRender();
 
@@ -643,2 +653,3 @@ for (var name in props) {
     var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
+    this._prevProps = props;
     return React.createElement(Viewport, __assign({}, attributes, {
@@ -710,2 +721,20 @@ className: viewportClasses.join(" "),
 
+  __proto._hasSameChildren = function (prevProps, nextProps) {
+    var prevChildren = this._getChildren(prevProps.children);
+
+    var nextChildren = this._getChildren(nextProps.children);
+
+    if (prevChildren.length !== nextChildren.length) return false;
+    var same = prevChildren.every(function (child, idx) {
+      var nextChild = nextChildren[idx];
+
+      if (child.key && nextChild.key) {
+        return child.key === nextChild.key;
+      } else {
+        return child === nextChild;
+      }
+    });
+    return same;
+  };
+
   __proto._getChildren = function (children) {
@@ -712,0 +741,0 @@ var _this = this;

dist/flicking.umd.js

@@ -66,2 +66,12 @@ /*
     };
+    function __rest(s, e) {
+      var t = {};
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+      }
+      return t;
+    }
     function __decorate(decorators, target, key, desc) {
@@ -471,10 +481,2 @@ var c = arguments.length,
 
-    var LifeCycleState;
-
-    (function (LifeCycleState) {
-      LifeCycleState[LifeCycleState["BEFORE_UPDATE"] = 0] = "BEFORE_UPDATE";
-      LifeCycleState[LifeCycleState["RENDER"] = 1] = "RENDER";
-      LifeCycleState[LifeCycleState["UPDATED"] = 2] = "UPDATED";
-    })(LifeCycleState || (LifeCycleState = {}));
-
     var Flicking =
@@ -490,4 +492,4 @@ /*#__PURE__*/
         _this._renderEmitter = new Component();
-        _this._currentState = LifeCycleState.BEFORE_UPDATE;
         _this._panels = _this._createPanelRefs(props, _this._getChildren());
+        _this._prevProps = _this.props;
         return _this;
@@ -527,3 +529,2 @@ }
         this._vanillaFlicking = flicking;
-        this._currentState = LifeCycleState.UPDATED;
 
@@ -536,2 +537,3 @@ var children = this._getChildren();
         this._pluginsDiffer = new ListDiffer();
+        this._prevProps = this.props;
 
@@ -555,17 +557,11 @@ this._bindEvents();
         var vanillaFlicking = this._vanillaFlicking;
-        var props = this.props; // Ignore updates before init, they will be updated after "ready" event's force update
-
+        var prevProps = this.props;
         if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
+        if (!this._hasSameChildren(prevProps, nextProps)) return true;
 
-        if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {
-          var nextChildren = this._getChildren(nextProps.children);
+        nextProps.children;
+            var restProps = __rest(nextProps, ["children"]);
 
-          this._panels = this._createPanelRefs(nextProps, nextChildren);
-          this._diffResult = this._jsxDiffer.update(nextChildren);
-        }
-
-        this._currentState = LifeCycleState.BEFORE_UPDATE;
-
-        for (var key in nextProps) {
-          if (props[key] !== nextProps[key]) {
+        for (var key in restProps) {
+          if (prevProps[key] !== nextProps[key]) {
             return true;
@@ -578,2 +574,17 @@ }
 
+      __proto.beforeRender = function () {
+        var vanillaFlicking = this._vanillaFlicking;
+        var nextProps = this.props;
+        var prevProps = this._prevProps; // Ignore updates before init, they will be updated after "ready" event's force update
+
+        if (!vanillaFlicking || !vanillaFlicking.initialized) return;
+
+        if (!this._hasSameChildren(prevProps, nextProps)) {
+          var nextChildren = this._getChildren(nextProps.children);
+
+          this._panels = this._createPanelRefs(nextProps, nextChildren);
+          this._diffResult = this._jsxDiffer.update(nextChildren);
+        }
+      };
+
       __proto.componentDidUpdate = function () {
@@ -588,3 +599,2 @@ var flicking = this._vanillaFlicking;
         flicking.camera.updateOffset();
-        this._currentState = LifeCycleState.UPDATED;
         if (!diffResult || !flicking.initialized) return;
@@ -605,3 +615,3 @@ VanillaFlicking.sync(flicking, diffResult, this.reactPanels);
         var flicking = this._vanillaFlicking;
-        this._currentState = LifeCycleState.RENDER;
+        this.beforeRender();
 
@@ -641,2 +651,3 @@ for (var name in props) {
         var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
+        this._prevProps = props;
         return React.createElement(Viewport, __assign({}, attributes, {
@@ -708,2 +719,20 @@ className: viewportClasses.join(" "),
 
+      __proto._hasSameChildren = function (prevProps, nextProps) {
+        var prevChildren = this._getChildren(prevProps.children);
+
+        var nextChildren = this._getChildren(nextProps.children);
+
+        if (prevChildren.length !== nextChildren.length) return false;
+        var same = prevChildren.every(function (child, idx) {
+          var nextChild = nextChildren[idx];
+
+          if (child.key && nextChild.key) {
+            return child.key === nextChild.key;
+          } else {
+            return child === nextChild;
+          }
+        });
+        return same;
+      };
+
       __proto._getChildren = function (children) {
@@ -710,0 +739,0 @@ var _this = this;

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -5,0 +5,0 @@ "main": "dist/flicking.cjs.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

212321

increased by4.04%

Lines of code

2827

increased by3.33%

No dependency changes