@egjs/react-flicking - npm Package Compare versions

Comparing version 3.7.1 to 4.0.0-beta.1

declaration/consts.d.ts

 import { FlickingProps } from "./types";
-export declare const FLICKING_PROPS: FlickingProps;
+export declare const DEFAULT_PROPS: FlickingProps;

declaration/Flicking.d.ts

@@ -1,29 +0,24 @@
-import { FlickingOptions } from "@egjs/flicking";
 import * as React from "react";
-import { FlickingProps, FlickingType } from "./types";
+import NativeFlicking, { FlickingOptions } from "@egjs/flicking";
+import "@egjs/flicking/dist/flicking.css";
+import { FlickingProps } from "./types";
 declare class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
     static defaultProps: FlickingProps;
-    state: {
-        cloneCount: number;
-    };
-    private flicking?;
-    private options;
-    private pluginsDiffer;
-    private childrenDiffer;
-    private jsxDiffer;
-    private containerElement;
-    private cameraElement;
+    private _nativeFlicking;
+    private _panels;
+    private _pluginsDiffer;
+    private _jsxDiffer;
+    private _viewportElement;
+    private _diffResult;
     constructor(props: Partial<FlickingProps & FlickingOptions>);
-    render(): JSX.Element;
-    componentDidUpdate(): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    private checkPlugins;
-    private checkCloneCount;
-    private renderPanels;
-    private getChildren;
-    private getElements;
+    shouldComponentUpdate(nextProps: this["props"]): boolean;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+    private _checkPlugins;
+    private _getChildren;
 }
-interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> {
+interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, NativeFlicking {
 }
 export default Flicking;

declaration/types.d.ts

@@ -1,25 +0,23 @@
-/// <reference types="react" />
-import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent } from "@egjs/flicking";
-import NativeFlicking from "@egjs/flicking";
-export declare type ParametersType<T, R> = T extends (...params: infer U) => any ? (...params: U) => R : never;
-export declare type FlickingType<T> = {
-    [key in keyof FlickingMethods]: FlickingMethods[key] extends (...params: any[]) => NativeFlicking ? ParametersType<FlickingMethods[key], T> : FlickingMethods[key];
-};
+import { SelectEvent, NeedPanelEvent, VisibleChangeEvent, HoldStartEvent, HoldEndEvent, MoveStartEvent, MoveEvent, MoveEndEvent, WillChangeEvent, ChangedEvent, WillRestoreEvent, RestoredEvent, ReadyEvent, BeforeResizeEvent, AfterResizeEvent, ReachEdgeEvent } from "@egjs/flicking";
 export interface FlickingProps {
-    tag: keyof JSX.IntrinsicElements;
     viewportTag: keyof JSX.IntrinsicElements;
     cameraTag: keyof JSX.IntrinsicElements;
-    status?: FlickingStatus;
-    plugins: Plugin[];
-    onHoldStart: (e: FlickingEvent) => any;
-    onHoldEnd: (e: FlickingEvent) => any;
-    onMoveStart: (e: FlickingEvent) => any;
-    onMove: (e: FlickingEvent) => any;
-    onMoveEnd: (e: FlickingEvent) => any;
-    onRestore: (e: FlickingEvent) => any;
+    plugins: any[];
+    onReady: (e: ReadyEvent) => any;
+    onBeforeResize: (e: BeforeResizeEvent) => any;
+    onAfterResize: (e: AfterResizeEvent) => any;
+    onHoldStart: (e: HoldStartEvent) => any;
+    onHoldEnd: (e: HoldEndEvent) => any;
+    onMoveStart: (e: MoveStartEvent) => any;
+    onMove: (e: MoveEvent) => any;
+    onMoveEnd: (e: MoveEndEvent) => any;
+    onWillChange: (e: WillChangeEvent) => any;
+    onChanged: (e: ChangedEvent) => any;
+    onWillRestore: (e: WillRestoreEvent) => any;
+    onRestored: (e: RestoredEvent) => any;
     onSelect: (e: SelectEvent) => any;
-    onChange: (e: ChangeEvent) => any;
     onNeedPanel: (e: NeedPanelEvent) => any;
     onVisibleChange: (e: VisibleChangeEvent) => any;
+    onReachEdge: (e: ReachEdgeEvent) => any;
     [key: string]: any;
 }

dist/flicking.cjs.js

 /*
 Copyright (c) 2015-present NAVER Corp.
-name: @egjs/react-flicking
+name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
-repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.7.1
+repository: https://github.com/naver/egjs-flicking
+version: 4.0.0-beta.2
 */
 'use strict';
 
-var NativeFlicking = require('@egjs/flicking');
 var React = require('react');
 var ListDiffer = require('@egjs/list-differ');
-var ChildrenDiffer = require('@egjs/children-differ');
+var NativeFlicking = require('@egjs/flicking');
+require('@egjs/flicking/dist/flicking.css');
 
@@ -38,3 +38,3 @@ /*! *****************************************************************************
   } || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
   };
@@ -46,2 +46,3 @@
 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);
@@ -75,30 +76,9 @@
 }
-function __spreadArrays() {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+function __spreadArray(to, from) {
+  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
 
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
-
-  return r;
+  return to;
 }
 
-var CloneComponent =
-/*#__PURE__*/
-function (_super) {
-  __extends(CloneComponent, _super);
-
-  function CloneComponent() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-
-  var __proto = CloneComponent.prototype;
-
-  __proto.render = function () {
-    return this.props.children;
-  };
-
-  return CloneComponent;
-}(React.Component);
-
-var FLICKING_PROPS = {
-  tag: "div",
+var DEFAULT_PROPS = {
   viewportTag: "div",
@@ -108,12 +88,18 @@ cameraTag: "div",
   plugins: [],
-  onNeedPanel: function (e) {},
+  onReady: function (e) {},
+  onBeforeResize: function (e) {},
+  onAfterResize: function (e) {},
+  onHoldStart: function (e) {},
+  onHoldEnd: function (e) {},
   onMoveStart: function (e) {},
   onMove: function (e) {},
   onMoveEnd: function (e) {},
-  onHoldStart: function (e) {},
-  onHoldEnd: function (e) {},
-  onRestore: function (e) {},
+  onWillChange: function (e) {},
+  onChanged: function (e) {},
+  onWillRestore: function (e) {},
+  onRestored: function (e) {},
   onSelect: function (e) {},
-  onChange: function (e) {},
-  onVisibleChange: function (e) {}
+  onNeedPanel: function (e) {},
+  onVisibleChange: function (e) {},
+  onReachEdge: function (e) {}
 };
@@ -124,24 +110,9 @@
 function (_super) {
-  __extends(Flicking, _super); // life cycle
+  __extends(Flicking, _super);
 
-
   function Flicking(props) {
     var _this = _super.call(this, props) || this;
 
-    _this.state = {
-      cloneCount: 0
-    };
-    _this.options = __assign(__assign({}, NativeFlicking.DEFAULT_OPTIONS), {
-      renderExternal: true
-    }); // differ
-
-    _this.pluginsDiffer = new ListDiffer();
-    var options = _this.options;
-
-    for (var name in props) {
-      if (name in NativeFlicking.DEFAULT_OPTIONS) {
-        options[name] = props[name];
-      }
-    }
-
+    _this._panels = [];
+    _this._panels = __spreadArray([], _this._getChildren(_this.props.children));
     return _this;
@@ -152,110 +123,123 @@ }
 
-  __proto.render = function () {
+  __proto.componentDidMount = function () {
+    var _a;
+
     var _this = this;
 
     var props = this.props;
-    /* tslint:disable:naming-convention */
+    var flicking = new NativeFlicking(this._viewportElement, __assign(__assign({}, props), {
+      renderExternal: true
+    })).on((_a = {}, _a[NativeFlicking.EVENTS.READY] = function (e) {
+      return props.onReady(e);
+    }, _a[NativeFlicking.EVENTS.BEFORE_RESIZE] = function (e) {
+      return props.onBeforeResize(e);
+    }, _a[NativeFlicking.EVENTS.AFTER_RESIZE] = function (e) {
+      return props.onAfterResize(e);
+    }, _a[NativeFlicking.EVENTS.HOLD_START] = function (e) {
+      return props.onHoldStart(e);
+    }, _a[NativeFlicking.EVENTS.HOLD_END] = function (e) {
+      return props.onHoldEnd(e);
+    }, _a[NativeFlicking.EVENTS.MOVE_START] = function (e) {
+      return props.onMoveStart(e);
+    }, _a[NativeFlicking.EVENTS.MOVE] = function (e) {
+      return props.onMove(e);
+    }, _a[NativeFlicking.EVENTS.MOVE_END] = function (e) {
+      return props.onMoveEnd(e);
+    }, _a[NativeFlicking.EVENTS.WILL_CHANGE] = function (e) {
+      return props.onWillChange(e);
+    }, _a[NativeFlicking.EVENTS.CHANGED] = function (e) {
+      return props.onChanged(e);
+    }, _a[NativeFlicking.EVENTS.WILL_RESTORE] = function (e) {
+      return props.onWillRestore(e);
+    }, _a[NativeFlicking.EVENTS.RESTORED] = function (e) {
+      return props.onRestored(e);
+    }, _a[NativeFlicking.EVENTS.SELECT] = function (e) {
+      return props.onSelect(e);
+    }, _a[NativeFlicking.EVENTS.NEED_PANEL] = function (e) {
+      return props.onNeedPanel(e);
+    }, _a[NativeFlicking.EVENTS.VISIBLE_CHANGE] = function (e) {
+      props.onVisibleChange(e);
 
-    var Tag = props.tag;
-    var Viewport = props.viewportTag;
-    var Camera = props.cameraTag;
-    /* tslint:enable:naming-convention */
+      if (flicking.renderOnlyVisible) {
+        _this.setState({});
+      }
+    }, _a[NativeFlicking.EVENTS.REACH_EDGE] = function (e) {
+      return props.onReachEdge(e);
+    }, _a));
 
-    var classPrefix = props.classPrefix;
-    var attributes = {};
-
-    for (var name in props) {
-      if (!(name in FLICKING_PROPS) && !(name in NativeFlicking.DEFAULT_OPTIONS)) {
-        attributes[name] = props[name];
-      }
+    if (props.circular) {
+      flicking.renderer.elementManipulator.on("orderChanged", function () {
+        _this.setState({});
+      });
     }
 
-    return React.createElement(Tag, __assign({}, attributes, {
-      ref: function (e) {
-        e && (_this.containerElement = e);
-      }
-    }), React.createElement(Viewport, {
-      className: classPrefix + "-viewport"
-    }, React.createElement(Camera, {
-      className: classPrefix + "-camera",
-      ref: function (e) {
-        e && (_this.cameraElement = e);
-      }
-    }, this.renderPanels())));
+    this._nativeFlicking = flicking;
+
+    var children = this._getChildren(this.props.children);
+
+    this._jsxDiffer = new ListDiffer(children, function (panel) {
+      return panel.key;
+    });
+    this._pluginsDiffer = new ListDiffer();
+
+    this._checkPlugins();
+
+    this.setState({});
   };
 
-  __proto.componentDidUpdate = function () {
-    var result = this.childrenDiffer.update(this.getElements());
-    this.flicking.sync(result);
-    this.checkPlugins();
-    this.checkCloneCount();
+  __proto.componentWillUnmount = function () {
+    this._nativeFlicking.destroy();
   };
 
-  __proto.componentDidMount = function () {
-    var _this = this;
+  __proto.shouldComponentUpdate = function (nextProps) {
+    var children = this._getChildren(nextProps.children);
 
-    this.childrenDiffer = new ChildrenDiffer(this.getElements());
-    this.flicking = new NativeFlicking(this.containerElement, __assign(__assign({}, this.options), {
-      framework: "react",
-      frameworkVersion: React.version
-    })).on({
-      moveStart: function (e) {
-        return _this.props.onMoveStart(e);
-      },
-      move: function (e) {
-        return _this.props.onMove(e);
-      },
-      moveEnd: function (e) {
-        return _this.props.onMoveEnd(e);
-      },
-      holdStart: function (e) {
-        return _this.props.onHoldStart(e);
-      },
-      holdEnd: function (e) {
-        return _this.props.onHoldEnd(e);
-      },
-      select: function (e) {
-        return _this.props.onSelect(e);
-      },
-      needPanel: function (e) {
-        return _this.props.onNeedPanel(e);
-      },
-      change: function (e) {
-        return _this.props.onChange(e);
-      },
-      restore: function (e) {
-        return _this.props.onRestore(e);
-      },
-      visibleChange: function (e) {
-        _this.props.onVisibleChange(e);
+    var diffResult = this._jsxDiffer.update(children);
 
-        _this.forceUpdate();
-      }
-    });
-    var children = this.getChildren();
-    this.jsxDiffer = new ListDiffer(children.map(function (child) {
-      return "" + child.key;
-    }));
+    var flicking = this._nativeFlicking;
+    this._diffResult = diffResult;
+    this._panels = NativeFlicking.getRenderingPanels(flicking, diffResult);
+    return true;
+  };
 
-    if (this.props.status) {
-      this.setStatus(this.props.status);
-    }
+  __proto.componentDidUpdate = function () {
+    var flicking = this._nativeFlicking;
+    var diffResult = this._diffResult;
+    if (!diffResult) return;
+    NativeFlicking.sync(flicking, diffResult);
 
-    this.checkPlugins();
-    this.checkCloneCount();
+    this._checkPlugins();
 
-    if (this.props.renderOnlyVisible) {
-      this.forceUpdate();
+    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
+      this.setState({});
     }
   };
 
-  __proto.componentWillUnmount = function () {
-    this.destroy({
-      preserveUI: true
-    });
-  }; // private
+  __proto.render = function () {
+    var _this = this;
 
+    var props = this.props;
+    var Viewport = props.viewportTag;
+    var Camera = props.cameraTag;
+    var attributes = {};
 
-  __proto.checkPlugins = function () {
-    var _a = this.pluginsDiffer.update(this.props.plugins),
+    for (var name_1 in props) {
+      if (!(name_1 in DEFAULT_PROPS) && !(name_1 in NativeFlicking.prototype)) {
+        attributes[name_1] = props[name_1];
+      }
+    }
+
+    var viewportClassName = attributes.className ? attributes.className + " flicking-viewport" : "flicking-viewport";
+    return React.createElement(Viewport, __assign({}, attributes, {
+      className: viewportClassName,
+      ref: function (e) {
+        e && (_this._viewportElement = e);
+      }
+    }), React.createElement(Camera, {
+      className: "flicking-camera"
+    }, this._panels));
+  };
+
+  __proto._checkPlugins = function () {
+    var _a = this._pluginsDiffer.update(this.props.plugins),
         list = _a.list,
@@ -266,6 +250,7 @@ added = _a.added,
 
-    this.flicking.addPlugins(added.map(function (index) {
+    this._nativeFlicking.addPlugins(added.map(function (index) {
       return list[index];
     }));
-    this.flicking.removePlugins(removed.map(function (index) {
+
+    this._nativeFlicking.removePlugins(removed.map(function (index) {
       return prevList[index];
@@ -275,70 +260,15 @@ }));
 
-  __proto.checkCloneCount = function () {
-    var cloneCount = this.flicking.getCloneCount();
-
-    if (this.state.cloneCount !== cloneCount) {
-      this.setState({
-        cloneCount: cloneCount
+  __proto._getChildren = function (children) {
+    var childs = React.Children.toArray(children);
+    return childs.map(function (child) {
+      return React.cloneElement(child, {
+        key: child.key
       });
-    }
+    });
   };
 
-  __proto.renderPanels = function () {
-    var renderOnlyVisible = this.props.renderOnlyVisible;
-    var flicking = this.flicking;
-    var reactChildren = this.getChildren();
-    var panels;
+  Flicking.defaultProps = DEFAULT_PROPS;
 
-    if (flicking && renderOnlyVisible) {
-      var diffResult = this.jsxDiffer.update(reactChildren.map(function (child) {
-        return "" + child.key;
-      }));
-      var panelCnt_1 = reactChildren.length;
-      flicking.beforeSync(diffResult);
-      var indexesToRender = flicking.getRenderingIndexes(diffResult);
-      panels = indexesToRender.map(function (index) {
-        if (index >= panelCnt_1) {
-          var relativeIndex = index % panelCnt_1;
-          var cloneIndex = Math.floor(index / panelCnt_1) - 1;
-          var origEl = reactChildren[relativeIndex];
-          return React.createElement(CloneComponent, {
-            key: "clone" + cloneIndex + origEl.key
-          }, origEl);
-        } else {
-          return reactChildren[index];
-        }
-      });
-    } else {
-      var cloneCount = this.state.cloneCount;
-      panels = __spreadArrays(reactChildren);
+  __decorate([NativeFlicking.withFlickingMethods], Flicking.prototype, "_nativeFlicking", void 0);
 
-      var _loop_1 = function (i) {
-        panels = panels.concat(reactChildren.map(function (el) {
-          return React.createElement(CloneComponent, {
-            key: "clone" + i + el.key
-          }, el);
-        }));
-      };
-
-      for (var i = 0; i < cloneCount; ++i) {
-        _loop_1(i);
-      }
-    }
-
-    return panels;
-  };
-
-  __proto.getChildren = function () {
-    var children = React.Children.toArray(this.props.children).slice();
-    return typeof this.props.lastIndex === "number" ? children.slice(0, this.props.lastIndex + 1) : children;
-  };
-
-  __proto.getElements = function () {
-    return this.cameraElement.children;
-  };
-
-  Flicking.defaultProps = FLICKING_PROPS;
-
-  __decorate([NativeFlicking.withFlickingMethods], Flicking.prototype, "flicking", void 0);
-
   return Flicking;
@@ -345,0 +275,0 @@ }(React.Component);

dist/flicking.esm.js

 /*
 Copyright (c) 2015-present NAVER Corp.
-name: @egjs/react-flicking
+name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
-repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.7.1
+repository: https://github.com/naver/egjs-flicking
+version: 4.0.0-beta.2
 */
-import NativeFlicking, { DEFAULT_OPTIONS, withFlickingMethods } from '@egjs/flicking';
-import { Component, createElement, version, Children } from 'react';
+import * as React from 'react';
 import ListDiffer from '@egjs/list-differ';
-import ChildrenDiffer from '@egjs/children-differ';
+import NativeFlicking, { EVENTS, getRenderingPanels, sync, withFlickingMethods } from '@egjs/flicking';
+import '@egjs/flicking/dist/flicking.css';
 
@@ -36,3 +36,3 @@ /*! *****************************************************************************
   } || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
   };
@@ -44,2 +44,3 @@
 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);
@@ -73,30 +74,9 @@
 }
-function __spreadArrays() {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+function __spreadArray(to, from) {
+  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
 
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
-
-  return r;
+  return to;
 }
 
-var CloneComponent =
-/*#__PURE__*/
-function (_super) {
-  __extends(CloneComponent, _super);
-
-  function CloneComponent() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-
-  var __proto = CloneComponent.prototype;
-
-  __proto.render = function () {
-    return this.props.children;
-  };
-
-  return CloneComponent;
-}(Component);
-
-var FLICKING_PROPS = {
-  tag: "div",
+var DEFAULT_PROPS = {
   viewportTag: "div",
@@ -106,12 +86,18 @@ cameraTag: "div",
   plugins: [],
-  onNeedPanel: function (e) {},
+  onReady: function (e) {},
+  onBeforeResize: function (e) {},
+  onAfterResize: function (e) {},
+  onHoldStart: function (e) {},
+  onHoldEnd: function (e) {},
   onMoveStart: function (e) {},
   onMove: function (e) {},
   onMoveEnd: function (e) {},
-  onHoldStart: function (e) {},
-  onHoldEnd: function (e) {},
-  onRestore: function (e) {},
+  onWillChange: function (e) {},
+  onChanged: function (e) {},
+  onWillRestore: function (e) {},
+  onRestored: function (e) {},
   onSelect: function (e) {},
-  onChange: function (e) {},
-  onVisibleChange: function (e) {}
+  onNeedPanel: function (e) {},
+  onVisibleChange: function (e) {},
+  onReachEdge: function (e) {}
 };
@@ -122,24 +108,9 @@
 function (_super) {
-  __extends(Flicking, _super); // life cycle
+  __extends(Flicking, _super);
 
-
   function Flicking(props) {
     var _this = _super.call(this, props) || this;
 
-    _this.state = {
-      cloneCount: 0
-    };
-    _this.options = __assign(__assign({}, DEFAULT_OPTIONS), {
-      renderExternal: true
-    }); // differ
-
-    _this.pluginsDiffer = new ListDiffer();
-    var options = _this.options;
-
-    for (var name in props) {
-      if (name in DEFAULT_OPTIONS) {
-        options[name] = props[name];
-      }
-    }
-
+    _this._panels = [];
+    _this._panels = __spreadArray([], _this._getChildren(_this.props.children));
     return _this;
@@ -150,110 +121,123 @@ }
 
-  __proto.render = function () {
+  __proto.componentDidMount = function () {
+    var _a;
+
     var _this = this;
 
     var props = this.props;
-    /* tslint:disable:naming-convention */
+    var flicking = new NativeFlicking(this._viewportElement, __assign(__assign({}, props), {
+      renderExternal: true
+    })).on((_a = {}, _a[EVENTS.READY] = function (e) {
+      return props.onReady(e);
+    }, _a[EVENTS.BEFORE_RESIZE] = function (e) {
+      return props.onBeforeResize(e);
+    }, _a[EVENTS.AFTER_RESIZE] = function (e) {
+      return props.onAfterResize(e);
+    }, _a[EVENTS.HOLD_START] = function (e) {
+      return props.onHoldStart(e);
+    }, _a[EVENTS.HOLD_END] = function (e) {
+      return props.onHoldEnd(e);
+    }, _a[EVENTS.MOVE_START] = function (e) {
+      return props.onMoveStart(e);
+    }, _a[EVENTS.MOVE] = function (e) {
+      return props.onMove(e);
+    }, _a[EVENTS.MOVE_END] = function (e) {
+      return props.onMoveEnd(e);
+    }, _a[EVENTS.WILL_CHANGE] = function (e) {
+      return props.onWillChange(e);
+    }, _a[EVENTS.CHANGED] = function (e) {
+      return props.onChanged(e);
+    }, _a[EVENTS.WILL_RESTORE] = function (e) {
+      return props.onWillRestore(e);
+    }, _a[EVENTS.RESTORED] = function (e) {
+      return props.onRestored(e);
+    }, _a[EVENTS.SELECT] = function (e) {
+      return props.onSelect(e);
+    }, _a[EVENTS.NEED_PANEL] = function (e) {
+      return props.onNeedPanel(e);
+    }, _a[EVENTS.VISIBLE_CHANGE] = function (e) {
+      props.onVisibleChange(e);
 
-    var Tag = props.tag;
-    var Viewport = props.viewportTag;
-    var Camera = props.cameraTag;
-    /* tslint:enable:naming-convention */
+      if (flicking.renderOnlyVisible) {
+        _this.setState({});
+      }
+    }, _a[EVENTS.REACH_EDGE] = function (e) {
+      return props.onReachEdge(e);
+    }, _a));
 
-    var classPrefix = props.classPrefix;
-    var attributes = {};
-
-    for (var name in props) {
-      if (!(name in FLICKING_PROPS) && !(name in DEFAULT_OPTIONS)) {
-        attributes[name] = props[name];
-      }
+    if (props.circular) {
+      flicking.renderer.elementManipulator.on("orderChanged", function () {
+        _this.setState({});
+      });
     }
 
-    return createElement(Tag, __assign({}, attributes, {
-      ref: function (e) {
-        e && (_this.containerElement = e);
-      }
-    }), createElement(Viewport, {
-      className: classPrefix + "-viewport"
-    }, createElement(Camera, {
-      className: classPrefix + "-camera",
-      ref: function (e) {
-        e && (_this.cameraElement = e);
-      }
-    }, this.renderPanels())));
+    this._nativeFlicking = flicking;
+
+    var children = this._getChildren(this.props.children);
+
+    this._jsxDiffer = new ListDiffer(children, function (panel) {
+      return panel.key;
+    });
+    this._pluginsDiffer = new ListDiffer();
+
+    this._checkPlugins();
+
+    this.setState({});
   };
 
-  __proto.componentDidUpdate = function () {
-    var result = this.childrenDiffer.update(this.getElements());
-    this.flicking.sync(result);
-    this.checkPlugins();
-    this.checkCloneCount();
+  __proto.componentWillUnmount = function () {
+    this._nativeFlicking.destroy();
   };
 
-  __proto.componentDidMount = function () {
-    var _this = this;
+  __proto.shouldComponentUpdate = function (nextProps) {
+    var children = this._getChildren(nextProps.children);
 
-    this.childrenDiffer = new ChildrenDiffer(this.getElements());
-    this.flicking = new NativeFlicking(this.containerElement, __assign(__assign({}, this.options), {
-      framework: "react",
-      frameworkVersion: version
-    })).on({
-      moveStart: function (e) {
-        return _this.props.onMoveStart(e);
-      },
-      move: function (e) {
-        return _this.props.onMove(e);
-      },
-      moveEnd: function (e) {
-        return _this.props.onMoveEnd(e);
-      },
-      holdStart: function (e) {
-        return _this.props.onHoldStart(e);
-      },
-      holdEnd: function (e) {
-        return _this.props.onHoldEnd(e);
-      },
-      select: function (e) {
-        return _this.props.onSelect(e);
-      },
-      needPanel: function (e) {
-        return _this.props.onNeedPanel(e);
-      },
-      change: function (e) {
-        return _this.props.onChange(e);
-      },
-      restore: function (e) {
-        return _this.props.onRestore(e);
-      },
-      visibleChange: function (e) {
-        _this.props.onVisibleChange(e);
+    var diffResult = this._jsxDiffer.update(children);
 
-        _this.forceUpdate();
-      }
-    });
-    var children = this.getChildren();
-    this.jsxDiffer = new ListDiffer(children.map(function (child) {
-      return "" + child.key;
-    }));
+    var flicking = this._nativeFlicking;
+    this._diffResult = diffResult;
+    this._panels = getRenderingPanels(flicking, diffResult);
+    return true;
+  };
 
-    if (this.props.status) {
-      this.setStatus(this.props.status);
-    }
+  __proto.componentDidUpdate = function () {
+    var flicking = this._nativeFlicking;
+    var diffResult = this._diffResult;
+    if (!diffResult) return;
+    sync(flicking, diffResult);
 
-    this.checkPlugins();
-    this.checkCloneCount();
+    this._checkPlugins();
 
-    if (this.props.renderOnlyVisible) {
-      this.forceUpdate();
+    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
+      this.setState({});
     }
   };
 
-  __proto.componentWillUnmount = function () {
-    this.destroy({
-      preserveUI: true
-    });
-  }; // private
+  __proto.render = function () {
+    var _this = this;
 
+    var props = this.props;
+    var Viewport = props.viewportTag;
+    var Camera = props.cameraTag;
+    var attributes = {};
 
-  __proto.checkPlugins = function () {
-    var _a = this.pluginsDiffer.update(this.props.plugins),
+    for (var name_1 in props) {
+      if (!(name_1 in DEFAULT_PROPS) && !(name_1 in NativeFlicking.prototype)) {
+        attributes[name_1] = props[name_1];
+      }
+    }
+
+    var viewportClassName = attributes.className ? attributes.className + " flicking-viewport" : "flicking-viewport";
+    return React.createElement(Viewport, __assign({}, attributes, {
+      className: viewportClassName,
+      ref: function (e) {
+        e && (_this._viewportElement = e);
+      }
+    }), React.createElement(Camera, {
+      className: "flicking-camera"
+    }, this._panels));
+  };
+
+  __proto._checkPlugins = function () {
+    var _a = this._pluginsDiffer.update(this.props.plugins),
         list = _a.list,
@@ -264,6 +248,7 @@ added = _a.added,
 
-    this.flicking.addPlugins(added.map(function (index) {
+    this._nativeFlicking.addPlugins(added.map(function (index) {
       return list[index];
     }));
-    this.flicking.removePlugins(removed.map(function (index) {
+
+    this._nativeFlicking.removePlugins(removed.map(function (index) {
       return prevList[index];
@@ -273,74 +258,19 @@ }));
 
-  __proto.checkCloneCount = function () {
-    var cloneCount = this.flicking.getCloneCount();
-
-    if (this.state.cloneCount !== cloneCount) {
-      this.setState({
-        cloneCount: cloneCount
+  __proto._getChildren = function (children) {
+    var childs = React.Children.toArray(children);
+    return childs.map(function (child) {
+      return React.cloneElement(child, {
+        key: child.key
       });
-    }
+    });
   };
 
-  __proto.renderPanels = function () {
-    var renderOnlyVisible = this.props.renderOnlyVisible;
-    var flicking = this.flicking;
-    var reactChildren = this.getChildren();
-    var panels;
+  Flicking.defaultProps = DEFAULT_PROPS;
 
-    if (flicking && renderOnlyVisible) {
-      var diffResult = this.jsxDiffer.update(reactChildren.map(function (child) {
-        return "" + child.key;
-      }));
-      var panelCnt_1 = reactChildren.length;
-      flicking.beforeSync(diffResult);
-      var indexesToRender = flicking.getRenderingIndexes(diffResult);
-      panels = indexesToRender.map(function (index) {
-        if (index >= panelCnt_1) {
-          var relativeIndex = index % panelCnt_1;
-          var cloneIndex = Math.floor(index / panelCnt_1) - 1;
-          var origEl = reactChildren[relativeIndex];
-          return createElement(CloneComponent, {
-            key: "clone" + cloneIndex + origEl.key
-          }, origEl);
-        } else {
-          return reactChildren[index];
-        }
-      });
-    } else {
-      var cloneCount = this.state.cloneCount;
-      panels = __spreadArrays(reactChildren);
+  __decorate([withFlickingMethods], Flicking.prototype, "_nativeFlicking", void 0);
 
-      var _loop_1 = function (i) {
-        panels = panels.concat(reactChildren.map(function (el) {
-          return createElement(CloneComponent, {
-            key: "clone" + i + el.key
-          }, el);
-        }));
-      };
-
-      for (var i = 0; i < cloneCount; ++i) {
-        _loop_1(i);
-      }
-    }
-
-    return panels;
-  };
-
-  __proto.getChildren = function () {
-    var children = Children.toArray(this.props.children).slice();
-    return typeof this.props.lastIndex === "number" ? children.slice(0, this.props.lastIndex + 1) : children;
-  };
-
-  __proto.getElements = function () {
-    return this.cameraElement.children;
-  };
-
-  Flicking.defaultProps = FLICKING_PROPS;
-
-  __decorate([withFlickingMethods], Flicking.prototype, "flicking", void 0);
-
   return Flicking;
-}(Component);
+}(React.Component);
 
 export default Flicking;
 //# sourceMappingURL=flicking.esm.js.map

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "3.7.1",
+  "version": "4.0.0-beta.1",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -10,5 +10,11 @@ "main": "dist/flicking.cjs.js",
   "types": "declaration/index.d.ts",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "rollup -c && npm run declaration",
+    "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
   "dependencies": {
-    "@egjs/children-differ": "^1.0.1",
-    "@egjs/flicking": "^3.8.2",
+    "@egjs/flicking": "^4.0.0-beta.2",
     "@egjs/list-differ": "^1.0.0"
@@ -28,3 +34,4 @@ },
     "react-scripts": "3.0.1",
-    "typescript": "^3.9.7"
+    "rollup": "^2.45.2",
+    "typescript": "^4.2.2"
   },
@@ -46,9 +53,2 @@ "repository": {
   "license": "MIT",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "rollup -c && npm run declaration",
-    "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
   "eslintConfig": {
@@ -55,0 +55,0 @@ "extends": "react-app"

rollup.config.js

@@ -1,2 +0,2 @@
-const buildHelper = require("@egjs/build-helper");
+const buildHelper = require("../../config/build-helper");
 
@@ -3,0 +3,0 @@ const defaultOptions = {

src/react-flicking/consts.ts

@@ -1,6 +0,23 @@
-import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent } from "@egjs/flicking";
+import {
+  SelectEvent,
+  NeedPanelEvent,
+  VisibleChangeEvent,
+  HoldStartEvent,
+  HoldEndEvent,
+  MoveStartEvent,
+  MoveEvent,
+  MoveEndEvent,
+  WillChangeEvent,
+  ChangedEvent,
+  WillRestoreEvent,
+  RestoredEvent,
+  ReadyEvent,
+  BeforeResizeEvent,
+  AfterResizeEvent,
+  ReachEdgeEvent
+} from "@egjs/flicking";
+
 import { FlickingProps } from "./types";
 
-export const FLICKING_PROPS: FlickingProps = {
-  tag: "div",
+export const DEFAULT_PROPS: FlickingProps = {
   viewportTag: "div",
@@ -10,12 +27,18 @@ cameraTag: "div",
   plugins: [],
+  onReady: (e: ReadyEvent) => {},
+  onBeforeResize: (e: BeforeResizeEvent) => {},
+  onAfterResize: (e: AfterResizeEvent) => {},
+  onHoldStart: (e: HoldStartEvent) => {},
+  onHoldEnd: (e: HoldEndEvent) => {},
+  onMoveStart: (e: MoveStartEvent) => {},
+  onMove: (e: MoveEvent) => {},
+  onMoveEnd: (e: MoveEndEvent) => {},
+  onWillChange: (e: WillChangeEvent) => {},
+  onChanged: (e: ChangedEvent) => {},
+  onWillRestore: (e: WillRestoreEvent) => {},
+  onRestored: (e: RestoredEvent) => {},
+  onSelect: (e: SelectEvent) => {},
   onNeedPanel: (e: NeedPanelEvent) => {},
-  onMoveStart: (e: FlickingEvent) => {},
-  onMove: (e: FlickingEvent) => {},
-  onMoveEnd: (e: FlickingEvent) => {},
-  onHoldStart: (e: FlickingEvent) => {},
-  onHoldEnd: (e: FlickingEvent) => {},
-  onRestore: (e: FlickingEvent) => {},
-  onSelect: (e: SelectEvent) => {},
-  onChange: (e: ChangeEvent) => {},
   onVisibleChange: (e: VisibleChangeEvent) => {},
+  onReachEdge: (e: ReachEdgeEvent) => {}
 };

src/react-flicking/types.ts

@@ -1,28 +0,41 @@
-import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent } from "@egjs/flicking";
-import NativeFlicking from "@egjs/flicking";
+import {
+  SelectEvent,
+  NeedPanelEvent,
+  VisibleChangeEvent,
+  HoldStartEvent,
+  HoldEndEvent,
+  MoveStartEvent,
+  MoveEvent,
+  MoveEndEvent,
+  WillChangeEvent,
+  ChangedEvent,
+  WillRestoreEvent,
+  RestoredEvent,
+  ReadyEvent,
+  BeforeResizeEvent,
+  AfterResizeEvent,
+  ReachEdgeEvent
+} from "@egjs/flicking";
 
-export type ParametersType<T, R> = T extends (...params: infer U) => any ? (...params: U) => R : never;
-export type FlickingType<T> = {
-  [key in keyof FlickingMethods]:
-    FlickingMethods[key] extends (...params: any[]) => NativeFlicking ?
-    ParametersType<FlickingMethods[key], T> : FlickingMethods[key]
-};
-
 export interface FlickingProps {
-  tag: keyof JSX.IntrinsicElements;
   viewportTag: keyof JSX.IntrinsicElements;
   cameraTag: keyof JSX.IntrinsicElements;
-  status?: FlickingStatus;
-  plugins: Plugin[];
-  onHoldStart: (e: FlickingEvent) => any;
-  onHoldEnd: (e: FlickingEvent) => any;
-  onMoveStart: (e: FlickingEvent) => any;
-  onMove: (e: FlickingEvent) => any;
-  onMoveEnd: (e: FlickingEvent) => any;
-  onRestore: (e: FlickingEvent) => any;
+  plugins: any[];
+  onReady: (e: ReadyEvent) => any;
+  onBeforeResize: (e: BeforeResizeEvent) => any;
+  onAfterResize: (e: AfterResizeEvent) => any;
+  onHoldStart: (e: HoldStartEvent) => any;
+  onHoldEnd: (e: HoldEndEvent) => any;
+  onMoveStart: (e: MoveStartEvent) => any;
+  onMove: (e: MoveEvent) => any;
+  onMoveEnd: (e: MoveEndEvent) => any;
+  onWillChange: (e: WillChangeEvent) => any;
+  onChanged: (e: ChangedEvent) => any;
+  onWillRestore: (e: WillRestoreEvent) => any;
+  onRestored: (e: RestoredEvent) => any;
   onSelect: (e: SelectEvent) => any;
-  onChange: (e: ChangeEvent) => any;
   onNeedPanel: (e: NeedPanelEvent) => any;
   onVisibleChange: (e: VisibleChangeEvent) => any;
+  onReachEdge: (e: ReachEdgeEvent) => any;
   [key: string]: any;
 }

tsconfig.json

@@ -13,2 +13,3 @@ {
     "esModuleInterop": true,
+    "importHelpers": true,
     "experimentalDecorators": true,
@@ -15,0 +16,0 @@ "suppressImplicitAnyIndexErrors": true,

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

94644

decreased by-25.11%

Dev dependency count

13

increased by8.33%

Number of package files

54

decreased by-1.82%

Lines of code

2397

decreased by-4.27%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@cfcs/core@0.1.0(transitive)

• + Added@egjs/axes@3.9.1(transitive)

• + Added@egjs/flicking@4.11.4(transitive)

• - Removed@egjs/children-differ@^1.0.1

• - Removed@egjs/axes@2.8.0(transitive)

• - Removed@egjs/children-differ@1.0.1(transitive)

• - Removed@egjs/component@2.2.2(transitive)

• - Removed@egjs/flicking@3.9.3(transitive)

• - Removed@egjs/hammerjs@2.0.17(transitive)

• - Removed@types/hammerjs@2.0.46(transitive)

• Updated@egjs/flicking@^4.0.0-beta.2