@egjs/react-flicking 4.3.0 → 4.4.2

package/dist/flicking.cjs.js

@@ -4,14 +4,14 @@ name: @egjs/react-flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 4.3.0
+version: 4.4.2
 */
 'use strict';
 
 var React = require('react');
+var Component = require('@egjs/component');
 var ListDiffer = require('@egjs/list-differ');
 var VanillaFlicking = require('@egjs/flicking');
-var reactIs = require('react-is');
 var reactDom = require('react-dom');
 
 /*! *****************************************************************************
@@ -227,7 +227,6 @@ var DEFAULT_PROPS = {
   plugins: [],
   useFindDOMNode: false,
   hideBeforeInit: false,
-  firstPanelSize: undefined,
   onReady: function (e) {},
   onBeforeResize: function (e) {},
   onAfterResize: function (e) {},
@@ -247,41 +246,9 @@ var DEFAULT_PROPS = {
   onPanelChange: function (e) {}
 };
 
-var ReactPanel = function (_super) {
-  __extends(ReactPanel, _super);
-
-  function ReactPanel() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-
-  var __proto = ReactPanel.prototype;
-  Object.defineProperty(__proto, "element", {
-    get: function () {
-      return this._externalComponent.element;
-    },
-    enumerable: false,
-    configurable: true
-  });
-  Object.defineProperty(__proto, "rendered", {
-    get: function () {
-      return !this._externalComponent.hide;
-    },
-    enumerable: false,
-    configurable: true
-  });
-
-  __proto.markForShow = function () {
-    this._externalComponent.hide = false;
-  };
-
-  __proto.markForHide = function () {
-    this._externalComponent.hide = true;
-  };
-
-  return ReactPanel;
-}(VanillaFlicking.ExternalPanel);
-
-var ReactRenderer = function (_super) {
+var ReactRenderer =
+/*#__PURE__*/
+function (_super) {
   __extends(ReactRenderer, _super);
 
   function ReactRenderer(options) {
@@ -296,21 +263,18 @@ var ReactRenderer = function (_super) {
 
   __proto.render = function () {
     return __awaiter(this, void 0, void 0, function () {
-      var flicking, reactFlicking;
+      var flicking, reactFlicking, strategy;
       return __generator(this, function (_a) {
-        flicking = this._flicking;
+        flicking = VanillaFlicking.getFlickingAttached(this._flicking);
         reactFlicking = this._reactFlicking;
-        if (!flicking || !reactFlicking.mounted) return [2
-        /*return*/
-        ];
-
-        this._updateRenderingPanels();
-
+        strategy = this._strategy;
+        strategy.updateRenderingPanels(flicking);
+        strategy.renderPanels(flicking);
         return [2
         /*return*/
         , new Promise(function (resolve) {
-          reactFlicking.setRenderCallback(resolve);
-          reactFlicking.setState({});
+          reactFlicking.renderEmitter.once("render", resolve);
+          reactFlicking.forceUpdate();
         })];
       });
     });
@@ -320,163 +284,232 @@ var ReactRenderer = function (_super) {
     return __awaiter(this, void 0, void 0, function () {
       var reactFlicking;
       return __generator(this, function (_a) {
-        reactFlicking = this._reactFlicking;
-        if (!reactFlicking.mounted) return [2
-        /*return*/
-        ];
-
-        this._panels.forEach(function (panel) {
-          return panel.markForShow();
-        });
-
-        return [2
-        /*return*/
-        , new Promise(function (resolve) {
-          reactFlicking.setRenderCallback(resolve);
-          reactFlicking.setState({});
-        })];
+        switch (_a.label) {
+          case 0:
+            reactFlicking = this._reactFlicking;
+            return [4
+            /*yield*/
+            , _super.prototype.forceRenderAllPanels.call(this)];
+
+          case 1:
+            _a.sent();
+
+            return [2
+            /*return*/
+            , new Promise(function (resolve) {
+              reactFlicking.renderEmitter.once("render", resolve);
+              reactFlicking.forceUpdate();
+            })];
+        }
       });
     });
   };
 
   __proto._collectPanels = function () {
-    var _this = this;
-
-    var align = this._getPanelAlign();
-
-    var children = this._reactFlicking.reactPanels;
-    this._panels = children.map(function (panelComponent, index) {
-      return new ReactPanel({
-        flicking: _this._flicking,
-        index: index,
-        align: align,
-        externalComponent: panelComponent
-      });
-    });
+    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 new ReactPanel(__assign({
-      externalComponent: externalComponent
-    }, options));
+    return this._strategy.createPanel(externalComponent, options);
   };
 
   return ReactRenderer;
 }(VanillaFlicking.ExternalRenderer);
 
-var NonStrictPanelComponent = function (_super) {
-  __extends(NonStrictPanelComponent, _super);
+var StrictPanel =
+/*#__PURE__*/
+function (_super) {
+  __extends(StrictPanel, _super);
 
-  function NonStrictPanelComponent() {
+  function StrictPanel() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.hide = false;
+    _this._hide = false;
+    _this._elRef = React.createRef();
     return _this;
   }
 
-  var __proto = NonStrictPanelComponent.prototype;
-  Object.defineProperty(__proto, "element", {
+  var __proto = StrictPanel.prototype;
+  Object.defineProperty(__proto, "nativeElement", {
     get: function () {
-      return reactDom.findDOMNode(this);
+      return this._elRef.current;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "rendered", {
+    get: function () {
+      return !this._hide;
     },
     enumerable: false,
     configurable: true
   });
 
   __proto.render = function () {
-    return this.hide ? React.createElement(React.Fragment, null) : this.props.children;
+    return this._hide ? React.createElement(React.Fragment, null) : this._getElement();
+  };
+
+  __proto.show = function () {
+    this._hide = false;
+  };
+
+  __proto.hide = function () {
+    this._hide = true;
   };
 
-  return NonStrictPanelComponent;
+  __proto._getElement = function () {
+    return React.cloneElement(React.Children.only(this.props.children), {
+      ref: this._elRef
+    });
+  };
+
+  return StrictPanel;
 }(React.Component);
 
-var StrictPanelComponent = function (_super) {
-  __extends(StrictPanelComponent, _super);
+var NonStrictPanel =
+/*#__PURE__*/
+function (_super) {
+  __extends(NonStrictPanel, _super);
 
-  function StrictPanelComponent() {
+  function NonStrictPanel() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.hide = false;
-    _this._elRef = React.createRef();
+    _this._hide = false;
     return _this;
   }
 
-  var __proto = StrictPanelComponent.prototype;
-  Object.defineProperty(__proto, "element", {
+  var __proto = NonStrictPanel.prototype;
+  Object.defineProperty(__proto, "nativeElement", {
     get: function () {
-      return this._elRef.current;
+      return reactDom.findDOMNode(this);
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "rendered", {
+    get: function () {
+      return !this._hide;
     },
     enumerable: false,
     configurable: true
   });
 
   __proto.render = function () {
-    return this.hide ? React.createElement(React.Fragment, null) : this._getElement();
+    return this._hide ? React.createElement(React.Fragment, null) : this.props.children;
   };
 
-  __proto._getElement = function () {
-    return React.cloneElement(React.Children.only(this.props.children), {
-      ref: this._elRef
-    });
+  __proto.show = function () {
+    this._hide = false;
+  };
+
+  __proto.hide = function () {
+    this._hide = true;
   };
 
-  return StrictPanelComponent;
+  return NonStrictPanel;
 }(React.Component);
 
-var ViewportSlot = function (_a) {
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+var ViewportSlot = React.memo(function (_a) {
   var children = _a.children;
   return React.createElement(React.Fragment, null, children);
-};
+});
 
-var Flicking = function (_super) {
+var ReactElementProvider =
+/*#__PURE__*/
+function () {
+  function ReactElementProvider(el) {
+    this._el = el;
+  }
+
+  var __proto = ReactElementProvider.prototype;
+  Object.defineProperty(__proto, "element", {
+    get: function () {
+      return this._el.nativeElement;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "rendered", {
+    get: function () {
+      return this._el.rendered;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  __proto.show = function () {
+    this._el.show();
+  };
+
+  __proto.hide = function () {
+    this._el.hide();
+  };
+
+  return ReactElementProvider;
+}();
+
+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 =
+/*#__PURE__*/
+function (_super) {
   __extends(Flicking, _super);
 
   function Flicking(props) {
     var _this = _super.call(this, props) || this;
 
     _this._panels = [];
-    _this._panels = _this._getChildren().map(function () {
-      return React.createRef();
-    });
+    _this._renderEmitter = new Component();
+    _this._currentState = LifeCycleState.BEFORE_UPDATE;
+    _this._panels = _this._createPanelRefs(props, _this._getChildren());
     return _this;
   }
 
   var __proto = Flicking.prototype;
-  Object.defineProperty(__proto, "mounted", {
+  Object.defineProperty(__proto, "reactPanels", {
     get: function () {
-      return this._mounted;
+      return this._panels.map(function (panel) {
+        return panel.current;
+      });
     },
     enumerable: false,
     configurable: true
   });
-  Object.defineProperty(__proto, "reactPanels", {
+  Object.defineProperty(__proto, "renderEmitter", {
     get: function () {
-      return this._panels.map(function (panel) {
-        return panel.current;
-      });
+      return this._renderEmitter;
     },
     enumerable: false,
     configurable: true
   });
 
-  __proto.setRenderCallback = function (callback) {
-    this._renderCallback = callback;
-  };
-
   __proto.componentDidMount = function () {
-    this._mounted = true;
     var props = this.props;
+    var rendererOptions = {
+      reactFlicking: this,
+      align: props.align,
+      strategy: props.virtual && props.panelsPerView > 0 ? new VanillaFlicking.VirtualRenderingStrategy() : new VanillaFlicking.NormalRenderingStrategy({
+        providerCtor: ReactElementProvider
+      })
+    };
     var flicking = new VanillaFlicking(this._viewportElement, __assign(__assign({}, props), {
-      renderExternal: {
-        renderer: ReactRenderer,
-        rendererOptions: {
-          reactFlicking: this
-        }
-      }
+      externalRenderer: new ReactRenderer(rendererOptions)
     }));
     this._vanillaFlicking = flicking;
-
-    this._bindEvents();
+    this._currentState = LifeCycleState.UPDATED;
 
     var children = this._getChildren();
 
@@ -485,55 +518,67 @@ var Flicking = function (_super) {
     });
     this._pluginsDiffer = new ListDiffer();
 
+    this._bindEvents();
+
     this._checkPlugins();
+
+    if (props.status) {
+      flicking.setStatus(props.status);
+    }
   };
 
   __proto.componentWillUnmount = function () {
-    this._mounted = false;
+    var _a;
 
-    this._vanillaFlicking.destroy();
+    (_a = this._vanillaFlicking) === null || _a === void 0 ? void 0 : _a.destroy();
   };
 
   __proto.shouldComponentUpdate = function (nextProps) {
-    var children = this._getChildren(nextProps.children);
+    var props = this.props;
 
-    var diffResult = this._jsxDiffer.update(children);
+    if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {
+      var nextChildren = this._getChildren(nextProps.children);
 
-    this._panels = children.map(function () {
-      return React.createRef();
-    });
-    this._diffResult = diffResult;
-    return true;
+      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]) {
+        return true;
+      }
+    }
+
+    return false;
   };
 
   __proto.componentDidUpdate = function () {
     var flicking = this._vanillaFlicking;
+    var renderEmitter = this._renderEmitter;
     var diffResult = this._diffResult;
 
     this._checkPlugins();
 
-    this._renderCallback && this._renderCallback();
+    renderEmitter.trigger("render");
+    this._currentState = LifeCycleState.UPDATED;
     if (!diffResult || !flicking.initialized) return;
     VanillaFlicking.sync(flicking, diffResult, this.reactPanels);
-
-    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
-      this.setState({});
-    }
-
     this._diffResult = null;
   };
 
   __proto.render = function () {
     var _this = this;
 
-    var _a;
+    var _a, _b;
 
     var props = this.props;
     var Viewport = props.viewportTag;
     var Camera = props.cameraTag;
     var attributes = {};
     var flicking = this._vanillaFlicking;
-    var initialized = this._diffResult && flicking && flicking.initialized;
+    this._currentState = LifeCycleState.RENDER;
 
     for (var name in props) {
       if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
@@ -541,6 +586,7 @@ var Flicking = function (_super) {
       }
     }
 
+    var initialized = flicking && flicking.initialized;
     var viewportClasses = ["flicking-viewport"];
     var isHorizontal = flicking ? flicking.horizontal : (_a = props.horizontal) !== null && _a !== void 0 ? _a : true;
 
@@ -561,18 +607,7 @@ var Flicking = function (_super) {
         transform: VanillaFlicking.getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
       }
     } : {};
-    var children = initialized ? VanillaFlicking.getRenderingPanels(flicking, this._diffResult) : this._getChildren();
-    var panels = this.props.useFindDOMNode ? children.map(function (child, idx) {
-      return React.createElement(NonStrictPanelComponent, {
-        key: child.key,
-        ref: _this._panels[idx]
-      }, child);
-    }) : children.map(function (child, idx) {
-      return React.createElement(StrictPanelComponent, {
-        key: child.key,
-        ref: _this._panels[idx]
-      }, child);
-    });
+    var panels = !!props.virtual && ((_b = props.panelsPerView) !== null && _b !== void 0 ? _b : -1) > 0 ? this._getVirtualPanels() : this._getPanels();
     return React.createElement(Viewport, __assign({}, attributes, {
       className: viewportClasses.join(" "),
       ref: function (e) {
@@ -583,6 +618,17 @@ var Flicking = function (_super) {
     }, 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();
+    }) : children.map(function () {
+      return React.createRef();
+    });
+  };
+
   __proto._bindEvents = function () {
     var _this = this;
 
@@ -602,19 +648,18 @@ var Flicking = function (_super) {
   };
 
   __proto._checkPlugins = function () {
-    var _a, _b;
+    var flicking = this._vanillaFlicking;
 
-    var _c = this._pluginsDiffer.update(this.props.plugins),
-        list = _c.list,
-        added = _c.added,
-        removed = _c.removed,
-        prevList = _c.prevList;
+    var _a = this._pluginsDiffer.update(this.props.plugins),
+        list = _a.list,
+        added = _a.added,
+        removed = _a.removed,
+        prevList = _a.prevList;
 
-    (_a = this._vanillaFlicking).addPlugins.apply(_a, added.map(function (index) {
+    flicking.addPlugins.apply(flicking, added.map(function (index) {
       return list[index];
     }));
-
-    (_b = this._vanillaFlicking).removePlugins.apply(_b, removed.map(function (index) {
+    flicking.removePlugins.apply(flicking, removed.map(function (index) {
       return prevList[index];
     }));
   };
@@ -629,7 +674,7 @@ var Flicking = function (_super) {
     return React.Children.toArray(children).filter(function (child) {
       return child.type !== ViewportSlot;
     }).reduce(function (all, child) {
-      return __spreadArray(__spreadArray([], all), _this._unpackFragment(child));
+      return __spreadArray(__spreadArray([], all, true), _this._unpackFragment(child), true);
     }, []);
   };
 
@@ -642,11 +687,66 @@ var Flicking = function (_super) {
   __proto._unpackFragment = function (child) {
     var _this = this;
 
-    return reactIs.isFragment(child) ? React.Children.toArray(child.props.children).reduce(function (allChilds, fragChild) {
-      return __spreadArray(__spreadArray([], allChilds), _this._unpackFragment(fragChild));
+    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;
+    var panelsPerView = this.props.panelsPerView;
+    var flicking = this._vanillaFlicking;
+    var initialized = flicking && flicking.initialized;
+    var renderingIndexes = initialized ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking) : VanillaFlicking.range(panelsPerView + 1);
+    var firstPanel = flicking && flicking.panels[0];
+    var size = firstPanel ? flicking.horizontal ? {
+      width: firstPanel.size
+    } : {
+      height: firstPanel.size
+    } : {};
+    return renderingIndexes.map(function (idx) {
+      return React.createElement("div", {
+        key: idx,
+        "data-element-index": idx,
+        ref: _this._panels[idx],
+        className: panelClass,
+        style: size
+      });
+    });
+  };
+
+  __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;
+    return this.props.useFindDOMNode ? children.map(function (child, idx) {
+      return React.createElement(NonStrictPanel, {
+        key: child.key,
+        ref: _this._panels[idx]
+      }, child);
+    }) : children.map(function (child, idx) {
+      return React.createElement(StrictPanel, {
+        key: child.key,
+        ref: _this._panels[idx]
+      }, 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);
@@ -654,6 +754,10 @@ var Flicking = function (_super) {
   return Flicking;
 }(React.Component);
 
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
 Flicking.ViewportSlot = ViewportSlot;
 
 module.exports = Flicking;