@egjs/react-flicking 4.11.3-beta.3 → 4.11.3-beta.4

package/dist/flicking.umd.js

@@ -4,7 +4,7 @@ name: @egjs/react-flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 4.10.3-beta.0
+version: 4.11.3-beta.4
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@egjs/component'), require('@egjs/list-differ'), require('@egjs/flicking'), require('react-dom')) :
@@ -12,7 +12,7 @@ version: 4.10.3-beta.0
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ReactFlicking = factory(global.React, global.Component, global.eg.ListDiffer, global.Flicking, global.ReactDOM));
 })(this, (function (React, Component, ListDiffer, VanillaFlicking, reactDom) { 'use strict';
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -26,8 +26,8 @@ version: 4.10.3-beta.0
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-
     /* global Reflect, Promise */
+
     var extendStatics = function (d, b) {
       extendStatics = Object.setPrototypeOf || {
         __proto__: []
@@ -36,38 +36,29 @@ version: 4.10.3-beta.0
       } || function (d, b) {
         for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       };
-
       return extendStatics(d, b);
     };
-
     function __extends(d, b) {
       if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
       extendStatics(d, b);
-
       function __() {
         this.constructor = d;
       }
-
       d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
     var __assign = function () {
       __assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
           s = arguments[i];
-
           for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
-
         return t;
       };
-
       return __assign.apply(this, arguments);
     };
     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]];
       }
@@ -75,8 +66,8 @@ version: 4.10.3-beta.0
     }
     function __decorate(decorators, target, key, desc) {
       var c = arguments.length,
-          r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-          d;
+        r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+        d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
@@ -86,7 +77,6 @@ version: 4.10.3-beta.0
           resolve(value);
         });
       }
-
       return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) {
           try {
@@ -95,7 +85,6 @@ version: 4.10.3-beta.0
             reject(e);
           }
         }
-
         function rejected(value) {
           try {
             step(generator["throw"](value));
@@ -103,28 +92,26 @@ version: 4.10.3-beta.0
             reject(e);
           }
         }
-
         function step(result) {
           result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
         }
-
         step((generator = generator.apply(thisArg, _arguments || [])).next());
       });
     }
     function __generator(thisArg, body) {
       var _ = {
-        label: 0,
-        sent: function () {
-          if (t[0] & 1) throw t[1];
-          return t[1];
+          label: 0,
+          sent: function () {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+          },
+          trys: [],
+          ops: []
         },
-        trys: [],
-        ops: []
-      },
-          f,
-          y,
-          t,
-          g;
+        f,
+        y,
+        t,
+        g;
       return g = {
         next: verb(0),
         "throw": verb(1),
@@ -132,78 +119,59 @@ version: 4.10.3-beta.0
       }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
         return this;
       }), g;
-
       function verb(n) {
         return function (v) {
           return step([n, v]);
         };
       }
-
       function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
           if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
           if (y = 0, t) op = [op[0] & 2, t.value];
-
           switch (op[0]) {
             case 0:
             case 1:
               t = op;
               break;
-
             case 4:
               _.label++;
               return {
                 value: op[1],
                 done: false
               };
-
             case 5:
               _.label++;
               y = op[1];
               op = [0];
               continue;
-
             case 7:
               op = _.ops.pop();
-
               _.trys.pop();
-
               continue;
-
             default:
               if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
                 _ = 0;
                 continue;
               }
-
               if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
                 _.label = op[1];
                 break;
               }
-
               if (op[0] === 6 && _.label < t[1]) {
                 _.label = t[1];
                 t = op;
                 break;
               }
-
               if (t && _.label < t[2]) {
                 _.label = t[2];
-
                 _.ops.push(op);
-
                 break;
               }
-
               if (t[2]) _.ops.pop();
-
               _.trys.pop();
-
               continue;
           }
-
           op = body.call(thisArg, _);
         } catch (e) {
           op = [6, e];
@@ -211,7 +179,6 @@ version: 4.10.3-beta.0
         } finally {
           f = t = 0;
         }
-
         if (op[0] & 5) throw op[1];
         return {
           value: op[0] ? op[1] : void 0,
@@ -256,27 +223,19 @@ version: 4.10.3-beta.0
       onPanelChange: function (e) {}
     };
 
-    var ReactRenderer =
-    /*#__PURE__*/
-    function (_super) {
+    var ReactRenderer = /*#__PURE__*/function (_super) {
       __extends(ReactRenderer, _super);
-
       function ReactRenderer(options) {
         var _this = _super.call(this, options) || this;
-
         _this._reactFlicking = options.reactFlicking;
         return _this;
-      } // eslint-disable-next-line @typescript-eslint/require-await
-
-
+      }
+      // eslint-disable-next-line @typescript-eslint/require-await
       var __proto = ReactRenderer.prototype;
-
       __proto.render = function () {
         return __awaiter(this, void 0, void 0, function () {
           var flicking, reactFlicking, strategy;
-
           var _this = this;
-
           return __generator(this, function (_a) {
             flicking = VanillaFlicking.getFlickingAttached(this._flicking);
             reactFlicking = this._reactFlicking;
@@ -284,11 +243,10 @@ version: 4.10.3-beta.0
             this._rendering = true;
             strategy.updateRenderingPanels(flicking);
             strategy.renderPanels(flicking);
-            return [2
-            /*return*/
-            , new Promise(function (resolve) {
+            return [2 /*return*/, new Promise(function (resolve) {
               reactFlicking.renderEmitter.once("render", function () {
                 _this._rendering = false;
+                _this._afterRender();
                 resolve();
               });
               reactFlicking.forceUpdate();
@@ -296,28 +254,19 @@ version: 4.10.3-beta.0
           });
         });
       };
-
       __proto.forceRenderAllPanels = function () {
         return __awaiter(this, void 0, void 0, function () {
           var reactFlicking;
-
           var _this = this;
-
           return __generator(this, function (_a) {
             switch (_a.label) {
               case 0:
                 reactFlicking = this._reactFlicking;
                 this._rendering = true;
-                return [4
-                /*yield*/
-                , _super.prototype.forceRenderAllPanels.call(this)];
-
+                return [4 /*yield*/, _super.prototype.forceRenderAllPanels.call(this)];
               case 1:
                 _a.sent();
-
-                return [2
-                /*return*/
-                , new Promise(function (resolve) {
+                return [2 /*return*/, new Promise(function (resolve) {
                   reactFlicking.renderEmitter.once("render", function () {
                     _this._rendering = false;
                     resolve();
@@ -328,34 +277,30 @@ version: 4.10.3-beta.0
           });
         });
       };
-
+      __proto.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this._reactFlicking.renderEmitter.off("render");
+      };
       __proto._collectPanels = function () {
         var flicking = VanillaFlicking.getFlickingAttached(this._flicking);
         var reactFlicking = this._reactFlicking;
         var reactPanels = reactFlicking.reactPanels;
         this._panels = this._strategy.collectPanels(flicking, reactPanels);
       };
-
       __proto._createPanel = function (externalComponent, options) {
         return this._strategy.createPanel(externalComponent, options);
       };
-
       return ReactRenderer;
     }(VanillaFlicking.ExternalRenderer);
 
-    var StrictPanel =
-    /*#__PURE__*/
-    function (_super) {
+    var StrictPanel = /*#__PURE__*/function (_super) {
       __extends(StrictPanel, _super);
-
       function StrictPanel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-
         _this._hide = false;
         _this._elRef = React.createRef();
         return _this;
       }
-
       var __proto = StrictPanel.prototype;
       Object.defineProperty(__proto, "nativeElement", {
         get: function () {
@@ -371,40 +316,30 @@ version: 4.10.3-beta.0
         enumerable: false,
         configurable: true
       });
-
       __proto.render = function () {
         return this._hide ? React.createElement(React.Fragment, null) : this._getElement();
       };
-
       __proto.show = function () {
         this._hide = false;
       };
-
       __proto.hide = function () {
         this._hide = true;
       };
-
       __proto._getElement = function () {
         return React.cloneElement(React.Children.only(this.props.children), {
           ref: this._elRef
         });
       };
-
       return StrictPanel;
     }(React.Component);
 
-    var NonStrictPanel =
-    /*#__PURE__*/
-    function (_super) {
+    var NonStrictPanel = /*#__PURE__*/function (_super) {
       __extends(NonStrictPanel, _super);
-
       function NonStrictPanel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-
         _this._hide = false;
         return _this;
       }
-
       var __proto = NonStrictPanel.prototype;
       Object.defineProperty(__proto, "nativeElement", {
         get: function () {
@@ -420,19 +355,15 @@ version: 4.10.3-beta.0
         enumerable: false,
         configurable: true
       });
-
       __proto.render = function () {
         return this._hide ? React.createElement(React.Fragment, null) : this.props.children;
       };
-
       __proto.show = function () {
         this._hide = false;
       };
-
       __proto.hide = function () {
         this._hide = true;
       };
-
       return NonStrictPanel;
     }(React.Component);
 
@@ -444,13 +375,10 @@ version: 4.10.3-beta.0
       return React.createElement(React.Fragment, null, props.children);
     });
 
-    var ReactElementProvider =
-    /*#__PURE__*/
-    function () {
+    var ReactElementProvider = /*#__PURE__*/function () {
       function ReactElementProvider(el) {
         this._el = el;
       }
-
       var __proto = ReactElementProvider.prototype;
       Object.defineProperty(__proto, "element", {
         get: function () {
@@ -466,36 +394,26 @@ version: 4.10.3-beta.0
         enumerable: false,
         configurable: true
       });
-
       __proto.show = function () {
         this._el.show();
       };
-
       __proto.hide = function () {
         this._el.hide();
       };
-
       return ReactElementProvider;
     }();
 
-    var Flicking =
-    /*#__PURE__*/
-    function (_super) {
+    var Flicking = /*#__PURE__*/function (_super) {
       __extends(Flicking, _super);
-
       function Flicking(props) {
         var _this = _super.call(this, props) || this;
-
         _this._panels = [];
         _this._renderEmitter = new Component();
-
         var children = _this._getChildren();
-
         _this._panels = _this._createPanelRefs(props, children);
         _this._prevChildren = children;
         return _this;
       }
-
       var __proto = Flicking.prototype;
       Object.defineProperty(__proto, "reactPanels", {
         get: function () {
@@ -513,7 +431,6 @@ version: 4.10.3-beta.0
         enumerable: false,
         configurable: true
       });
-
       __proto.componentDidMount = function () {
         var props = this.props;
         var rendererOptions = {
@@ -527,123 +444,103 @@ version: 4.10.3-beta.0
           externalRenderer: new ReactRenderer(rendererOptions)
         }));
         this._vanillaFlicking = flicking;
-
         var children = this._getChildren();
-
         this._jsxDiffer = new ListDiffer(children, function (panel) {
           return panel.key;
         });
         this._pluginsDiffer = new ListDiffer();
         this._prevChildren = children;
-
         this._bindEvents();
-
         this._checkPlugins();
-
         if (props.status) {
           flicking.setStatus(props.status);
         }
       };
-
       __proto.componentWillUnmount = function () {
         var _a;
-
         (_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
       };
-
       __proto.shouldComponentUpdate = function (nextProps) {
         var vanillaFlicking = this._vanillaFlicking;
         var prevProps = this.props;
         if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
-
         var children = nextProps.children,
-            restProps = __rest(nextProps, ["children"]);
-
+          restProps = __rest(nextProps, ["children"]);
         for (var key in restProps) {
           if (prevProps[key] !== nextProps[key]) {
             return true;
           }
         }
-
         var prevChildren = this._prevChildren;
-
         var nextChildren = this._getChildren(children);
-
         if (nextProps.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) return true;
         return false;
       };
-
       __proto.beforeRender = function () {
         var vanillaFlicking = this._vanillaFlicking;
         var props = this.props;
-        var prevChildren = this._prevChildren; // Ignore updates before init, they will be updated after "ready" event's force update
+        var prevChildren = this._prevChildren;
+        // Ignore updates before init, they will be updated after "ready" event's force update
         // Also, prevent updates when another update is already queued.
         // This usually happens when render() called twice without calling componentDidMount, like in the case of React.StrictMode.
-
         if (!vanillaFlicking || !vanillaFlicking.initialized || this._diffResult) return;
-
         var nextChildren = this._getChildren(props.children);
-
         if (props.renderOnSameKey || !this._hasSameChildren(prevChildren, nextChildren)) {
           this._panels = this._createPanelRefs(props, nextChildren);
           this._diffResult = this._jsxDiffer.update(nextChildren);
           this._prevChildren = nextChildren;
         }
       };
-
       __proto.componentDidUpdate = function () {
         var flicking = this._vanillaFlicking;
         var renderEmitter = this._renderEmitter;
         var diffResult = this._diffResult;
-
         this._checkPlugins();
-
         renderEmitter.trigger("render");
         flicking.camera.updateOffset();
+        // Omit 'virtual', as it can't have any setter
+        var _a = this.props;
+          _a.virtual;
+          var props = __rest(_a, ["virtual"]);
+        for (var key in props) {
+          if (key in flicking && flicking[key] !== props[key]) {
+            flicking[key] = props[key];
+          }
+        }
         if (!diffResult || !flicking.initialized) return;
         VanillaFlicking.sync(flicking, diffResult, this.reactPanels);
         this._diffResult = null;
       };
-
       __proto.render = function () {
         var _this = this;
-
         var _a, _b;
-
         var props = this.props;
         var Viewport = props.viewportTag;
         var Camera = props.cameraTag;
         var attributes = {};
         var flicking = this._vanillaFlicking;
         this.beforeRender();
-
         for (var name in props) {
           if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
             attributes[name] = props[name];
           }
         }
-
         var initialized = flicking && flicking.initialized;
         var viewportClasses = ["flicking-viewport"];
         var cameraClasses = ["flicking-camera"];
         var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true;
-
         if (!isHorizontal) {
           viewportClasses.push("vertical");
         }
-
         if (props.hideBeforeInit && !initialized) {
           viewportClasses.push("flicking-hidden");
         }
-
         if (attributes.className) {
           viewportClasses.push(attributes.className);
         }
-
         if (props.cameraClass) {
           cameraClasses.push(props.cameraClass);
         }
-
         var cameraProps = !initialized && props.firstPanelSize ? {
           style: {
             transform: VanillaFlicking.getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
@@ -659,10 +556,8 @@ version: 4.10.3-beta.0
           className: cameraClasses.join(" ")
         }, cameraProps), panels), this._getViewportSlot());
       };
-
       __proto._createPanelRefs = function (props, children) {
         var _a;
-
         var panelsPerView = (_a = props.panelsPerView) !== null && _a !== void 0 ? _a : -1;
         return panelsPerView > 0 && !!props.virtual ? VanillaFlicking.range(panelsPerView + 1).map(function () {
           return React.createRef();
@@ -670,10 +565,8 @@ version: 4.10.3-beta.0
           return React.createRef();
         });
       };
-
       __proto._bindEvents = function () {
         var _this = this;
-
         var flicking = this._vanillaFlicking;
         Object.keys(VanillaFlicking.EVENTS).forEach(function (eventKey) {
           var eventName = VanillaFlicking.EVENTS[eventKey];
@@ -688,16 +581,13 @@ version: 4.10.3-beta.0
           _this.forceUpdate();
         });
       };
-
       __proto._checkPlugins = function () {
         var flicking = this._vanillaFlicking;
-
         var _a = this._pluginsDiffer.update(this.props.plugins),
-            list = _a.list,
-            added = _a.added,
-            removed = _a.removed,
-            prevList = _a.prevList;
-
+          list = _a.list,
+          added = _a.added,
+          removed = _a.removed,
+          prevList = _a.prevList;
         flicking.addPlugins.apply(flicking, added.map(function (index) {
           return list[index];
         }));
@@ -705,12 +595,10 @@ version: 4.10.3-beta.0
           return prevList[index];
         }));
       };
-
       __proto._hasSameChildren = function (prevChildren, nextChildren) {
         if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
         var same = prevChildren.every(function (child, idx) {
           var nextChild = nextChildren[idx];
-
           if (child.key && nextChild.key) {
             return child.key === nextChild.key;
           } else {
@@ -719,40 +607,32 @@ version: 4.10.3-beta.0
         });
         return same;
       };
-
       __proto._getChildren = function (children) {
         var _this = this;
-
         if (children === void 0) {
           children = this.props.children;
         }
-
         return React.Children.toArray(children).filter(function (child) {
           return child.type !== ViewportSlot;
         }).reduce(function (all, child) {
           return __spreadArray(__spreadArray([], all, true), _this._unpackFragment(child), true);
         }, []);
       };
-
       __proto._getViewportSlot = function () {
         return React.Children.toArray(this.props.children).filter(function (child) {
           return child.type === ViewportSlot;
         });
       };
-
       __proto._unpackFragment = function (child) {
         var _this = this;
-
         return this._isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) {
           return __spreadArray(__spreadArray([], allChilds, true), _this._unpackFragment(fragChild), true);
         }, []) : [child];
       };
-
       __proto._getVirtualPanels = function () {
         var _this = this;
-
         var _a = this.props.virtual.panelClass,
-            panelClass = _a === void 0 ? "flicking-panel" : _a;
+          panelClass = _a === void 0 ? "flicking-panel" : _a;
         var panelsPerView = this.props.panelsPerView;
         var flicking = this._vanillaFlicking;
         var initialized = flicking && flicking.initialized;
@@ -773,12 +653,9 @@ version: 4.10.3-beta.0
           });
         });
       };
-
       __proto._getPanels = function () {
         var _this = this;
-
         var origChildren = this._getChildren();
-
         var vanillaFlicking = this._vanillaFlicking;
         var diffResult = this._diffResult;
         var children = vanillaFlicking && vanillaFlicking.initialized ? diffResult ? VanillaFlicking.getRenderingPanels(vanillaFlicking, diffResult) : VanillaFlicking.getRenderingPanels(vanillaFlicking, ListDiffer.diff(origChildren, origChildren)) : origChildren;
@@ -794,19 +671,14 @@ version: 4.10.3-beta.0
           }, child);
         });
       };
-
       __proto._isFragment = function (child) {
         if (child.type) {
           return child.type === React.Fragment;
         }
-
         return child === React.Fragment;
       };
-
       Flicking.defaultProps = DEFAULT_PROPS;
-
       __decorate([VanillaFlicking.withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0);
-
       return Flicking;
     }(React.Component);