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

package/dist/flicking.esm.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.11.3-beta.2
+version: 4.10.3-beta.0
 */
 import * as React from 'react';
 import React__default from 'react';
@@ -14,7 +14,7 @@ import VanillaFlicking__default, { getFlickingAttached, ExternalRenderer, Virtua
 export * from '@egjs/flicking';
 import { findDOMNode } from 'react-dom';
 
-/******************************************************************************
+/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -28,8 +28,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
 
+/* global Reflect, Promise */
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -38,29 +38,38 @@ var extendStatics = function (d, b) {
   } || 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]];
   }
@@ -68,8 +77,8 @@ function __rest(s, e) {
 }
 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;
 }
@@ -79,6 +88,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
       resolve(value);
     });
   }
+
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -87,6 +97,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
         reject(e);
       }
     }
+
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -94,26 +105,28 @@ function __awaiter(thisArg, _arguments, P, generator) {
         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];
-      },
-      trys: [],
-      ops: []
+    label: 0,
+    sent: function () {
+      if (t[0] & 1) throw t[1];
+      return t[1];
     },
-    f,
-    y,
-    t,
-    g;
+    trys: [],
+    ops: []
+  },
+      f,
+      y,
+      t,
+      g;
   return g = {
     next: verb(0),
     "throw": verb(1),
@@ -121,59 +134,78 @@ function __generator(thisArg, body) {
   }, 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 (g && (g = 0, op[0] && (_ = 0)), _) try {
+
+    while (_) 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];
@@ -181,6 +213,7 @@ function __generator(thisArg, body) {
     } finally {
       f = t = 0;
     }
+
     if (op[0] & 5) throw op[1];
     return {
       value: op[0] ? op[1] : void 0,
@@ -225,19 +258,27 @@ var DEFAULT_PROPS = {
   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 = getFlickingAttached(this._flicking);
         reactFlicking = this._reactFlicking;
@@ -245,10 +286,11 @@ var ReactRenderer = /*#__PURE__*/function (_super) {
         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();
@@ -256,19 +298,28 @@ var ReactRenderer = /*#__PURE__*/function (_super) {
       });
     });
   };
+
   __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();
@@ -279,30 +330,34 @@ var ReactRenderer = /*#__PURE__*/function (_super) {
       });
     });
   };
-  __proto.destroy = function () {
-    _super.prototype.destroy.call(this);
-    this._reactFlicking.renderEmitter.off("render");
-  };
+
   __proto._collectPanels = function () {
     var flicking = 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;
 }(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 () {
@@ -318,30 +373,40 @@ var StrictPanel = /*#__PURE__*/function (_super) {
     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 () {
@@ -357,30 +422,37 @@ var NonStrictPanel = /*#__PURE__*/function (_super) {
     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);
 
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
  */
 var ViewportSlot = React__default.memo(function (props) {
   return React__default.createElement(React__default.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 () {
@@ -396,26 +468,36 @@ var ReactElementProvider = /*#__PURE__*/function () {
     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 () {
@@ -433,6 +515,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+
   __proto.componentDidMount = function () {
     var props = this.props;
     var rendererOptions = {
@@ -446,103 +529,123 @@ var Flicking = /*#__PURE__*/function (_super) {
       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;
     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__default.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: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
@@ -558,8 +661,10 @@ var Flicking = /*#__PURE__*/function (_super) {
       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 ? range(panelsPerView + 1).map(function () {
       return React.createRef();
@@ -567,8 +672,10 @@ var Flicking = /*#__PURE__*/function (_super) {
       return React.createRef();
     });
   };
+
   __proto._bindEvents = function () {
     var _this = this;
+
     var flicking = this._vanillaFlicking;
     Object.keys(EVENTS).forEach(function (eventKey) {
       var eventName = EVENTS[eventKey];
@@ -583,13 +690,16 @@ var Flicking = /*#__PURE__*/function (_super) {
       _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];
     }));
@@ -597,10 +707,12 @@ var Flicking = /*#__PURE__*/function (_super) {
       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 {
@@ -609,32 +721,40 @@ var Flicking = /*#__PURE__*/function (_super) {
     });
     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;
@@ -655,9 +775,12 @@ var Flicking = /*#__PURE__*/function (_super) {
       });
     });
   };
+
   __proto._getPanels = function () {
     var _this = this;
+
     var origChildren = this._getChildren();
+
     var vanillaFlicking = this._vanillaFlicking;
     var diffResult = this._diffResult;
     var children = vanillaFlicking && vanillaFlicking.initialized ? diffResult ? getRenderingPanels(vanillaFlicking, diffResult) : getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren)) : origChildren;
@@ -673,20 +796,25 @@ var Flicking = /*#__PURE__*/function (_super) {
       }, child);
     });
   };
+
   __proto._isFragment = function (child) {
     if (child.type) {
       return child.type === React.Fragment;
     }
+
     return child === React.Fragment;
   };
+
   Flicking.defaultProps = DEFAULT_PROPS;
+
   __decorate([withFlickingMethods], Flicking.prototype, "_vanillaFlicking", void 0);
+
   return Flicking;
 }(React.Component);
 
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
  */
 
 export { ViewportSlot, Flicking as default };