@egjs/react-flicking 4.10.0 → 4.10.2-beta.0

package/README.md

@@ -42,14 +42,15 @@ npm install --save @egjs/react-flicking
 import Flicking, { MoveEvent, WillChangeEvent } from "@egjs/react-flicking";
 
 <Flicking
-  viewportTag = "div"
-  cameraTag = "div"
-  cameraClass = ""
-  align = "center"
-  onMove = {(e: MoveEvent) => {}}
-  onWillChange = {(e: WillChangeEvent) => {}}
-  horizontal = {true}
-  circular = {true}
+  viewportTag="div"
+  cameraTag="div"
+  cameraClass=""
+  renderOnSameKey={false}
+  align="center"
+  onMove={(e: MoveEvent) => {}}
+  onWillChange={(e: WillChangeEvent) => {}}
+  horizontal={true}
+  circular={true}
 >
   <div>panel 0</div>
   <div>panel 1</div>
@@ -57,6 +58,14 @@ import Flicking, { MoveEvent, WillChangeEvent } from "@egjs/react-flicking";
 </Flicking>
 ```
 
+## ✨ React exclusive options
+- viewportTag: HTML tag for `.flicking-viewport` element. (default: **"div"**)
+- cameraTag: HTML tag for `.flicking-camera` element. (default: **"div"**)
+- cameraClass: `className` for `.flicking-camera` element. (default: **""**)
+- renderOnSameKey: Whether to always render children even they have the same keys (default: **false**)
+  - Flicking doesn't rerender when children have same length & keys for performance by default.
+  - If you have to bypass this behavior, like when you have to update panel's innerHTML without changing the list of child elements, you can either set this option to `true`, or you can call Flicking component's `forceUpdate()`.
+
 ## 📦 Packages
 You can use all plugins just like native @egjs/flicking.
 

package/declaration/Flicking.d.ts

@@ -1,39 +1,41 @@
-import * as React from "react";
-import Component from "@egjs/component";
-import VanillaFlicking, { FlickingOptions } from "@egjs/flicking";
-import { FlickingProps } from "./types";
-import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
-declare class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
-    static defaultProps: FlickingProps;
-    private _vanillaFlicking;
-    private _panels;
-    private _pluginsDiffer;
-    private _jsxDiffer;
-    private _viewportElement;
-    private _diffResult;
-    private _renderEmitter;
-    private _currentState;
-    get reactPanels(): (StrictPanel | NonStrictPanel | HTMLDivElement)[];
-    get renderEmitter(): Component<{
-        render: void;
-    }>;
-    constructor(props: Partial<FlickingProps & FlickingOptions>);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: this["props"]): boolean;
-    componentDidUpdate(): void;
-    render(): JSX.Element;
-    private _createPanelRefs;
-    private _bindEvents;
-    private _checkPlugins;
-    private _getChildren;
-    private _getViewportSlot;
-    private _unpackFragment;
-    private _getVirtualPanels;
-    private _getPanels;
-    private _isFragment;
-}
-interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking {
-}
-export default Flicking;
+import * as React from "react";
+import Component from "@egjs/component";
+import VanillaFlicking, { FlickingOptions } from "@egjs/flicking";
+import { FlickingProps } from "./types";
+import StrictPanel from "./StrictPanel";
+import NonStrictPanel from "./NonStrictPanel";
+declare class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
+    static defaultProps: FlickingProps;
+    private _vanillaFlicking;
+    private _panels;
+    private _pluginsDiffer;
+    private _jsxDiffer;
+    private _viewportElement;
+    private _diffResult;
+    private _renderEmitter;
+    private _prevChildren;
+    get reactPanels(): (StrictPanel | NonStrictPanel | HTMLDivElement)[];
+    get renderEmitter(): Component<{
+        render: void;
+    }>;
+    constructor(props: Partial<FlickingProps & FlickingOptions>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: Readonly<Partial<FlickingProps & FlickingOptions>>): boolean;
+    beforeRender(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+    private _createPanelRefs;
+    private _bindEvents;
+    private _checkPlugins;
+    private _hasSameChildren;
+    private _getChildren;
+    private _getViewportSlot;
+    private _unpackFragment;
+    private _getVirtualPanels;
+    private _getPanels;
+    private _isFragment;
+}
+interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking {
+}
+export default Flicking;

package/declaration/NonStrictPanel.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
-declare class NonStrictPanel extends React.Component<{
-    children?: React.ReactElement;
-}> {
-    private _hide;
-    get nativeElement(): HTMLElement;
-    get rendered(): boolean;
-    render(): JSX.Element | undefined;
-    show(): void;
-    hide(): void;
-}
-export default NonStrictPanel;
+import * as React from "react";
+declare class NonStrictPanel extends React.Component<{
+    children?: React.ReactElement;
+}> {
+    private _hide;
+    get nativeElement(): HTMLElement;
+    get rendered(): boolean;
+    render(): JSX.Element | undefined;
+    show(): void;
+    hide(): void;
+}
+export default NonStrictPanel;

package/declaration/ReactElementProvider.d.ts

@@ -1,12 +1,12 @@
-import { ElementProvider } from "@egjs/flicking";
-import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
-declare class ReactElementProvider implements ElementProvider {
-    private _el;
-    get element(): HTMLElement;
-    get rendered(): boolean;
-    constructor(el: StrictPanel | NonStrictPanel);
-    show(): void;
-    hide(): void;
-}
-export default ReactElementProvider;
+import { ElementProvider } from "@egjs/flicking";
+import StrictPanel from "./StrictPanel";
+import NonStrictPanel from "./NonStrictPanel";
+declare class ReactElementProvider implements ElementProvider {
+    private _el;
+    get element(): HTMLElement;
+    get rendered(): boolean;
+    constructor(el: StrictPanel | NonStrictPanel);
+    show(): void;
+    hide(): void;
+}
+export default ReactElementProvider;

package/declaration/ReactRenderer.d.ts

@@ -1,16 +1,16 @@
-import { ExternalRenderer, PanelOptions, RendererOptions } from "@egjs/flicking";
-import ReactFlicking from "./Flicking";
-import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
-export interface ReactRendererOptions extends RendererOptions {
-    reactFlicking: ReactFlicking;
-}
-declare class ReactRenderer extends ExternalRenderer {
-    protected _reactFlicking: ReactFlicking;
-    constructor(options: ReactRendererOptions);
-    render(): Promise<void>;
-    forceRenderAllPanels(): Promise<void>;
-    protected _collectPanels(): void;
-    protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions): import("@egjs/flicking/declaration/core/panel/Panel").default;
-}
-export default ReactRenderer;
+import { ExternalRenderer, PanelOptions, RendererOptions } from "@egjs/flicking";
+import ReactFlicking from "./Flicking";
+import StrictPanel from "./StrictPanel";
+import NonStrictPanel from "./NonStrictPanel";
+export interface ReactRendererOptions extends RendererOptions {
+    reactFlicking: ReactFlicking;
+}
+declare class ReactRenderer extends ExternalRenderer {
+    protected _reactFlicking: ReactFlicking;
+    constructor(options: ReactRendererOptions);
+    render(): Promise<void>;
+    forceRenderAllPanels(): Promise<void>;
+    protected _collectPanels(): void;
+    protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions): import("@egjs/flicking/declaration/core/panel/Panel").default;
+}
+export default ReactRenderer;

package/declaration/StrictPanel.d.ts

@@ -1,14 +1,14 @@
-import * as React from "react";
-declare class StrictPanel extends React.Component<{
-    children?: React.ReactElement;
-}> {
-    private _hide;
-    private _elRef;
-    get nativeElement(): HTMLElement;
-    get rendered(): boolean;
-    render(): JSX.Element;
-    show(): void;
-    hide(): void;
-    private _getElement;
-}
-export default StrictPanel;
+import * as React from "react";
+declare class StrictPanel extends React.Component<{
+    children?: React.ReactElement;
+}> {
+    private _hide;
+    private _elRef;
+    get nativeElement(): HTMLElement;
+    get rendered(): boolean;
+    render(): JSX.Element;
+    show(): void;
+    hide(): void;
+    private _getElement;
+}
+export default StrictPanel;

package/declaration/ViewportSlot.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
-declare const ViewportSlot: React.MemoExoticComponent<(props: {
-    children?: ReactNode;
-}) => JSX.Element>;
-export default ViewportSlot;
+import React, { ReactNode } from "react";
+declare const ViewportSlot: React.MemoExoticComponent<(props: {
+    children?: ReactNode;
+}) => JSX.Element>;
+export default ViewportSlot;

package/declaration/consts.d.ts

@@ -1,2 +1,2 @@
-import { FlickingProps } from "./types";
-export declare const DEFAULT_PROPS: FlickingProps;
+import { FlickingProps } from "./types";
+export declare const DEFAULT_PROPS: FlickingProps;

package/declaration/index.d.ts

@@ -1,6 +1,6 @@
-import Flicking from "./Flicking";
-import ViewportSlot from "./ViewportSlot";
-export * from "@egjs/flicking";
-export * from "./types";
-export { ViewportSlot };
-export default Flicking;
+import Flicking from "./Flicking";
+import ViewportSlot from "./ViewportSlot";
+export * from "@egjs/flicking";
+export * from "./types";
+export { ViewportSlot };
+export default Flicking;

package/declaration/index.umd.d.ts

@@ -1,2 +1,2 @@
-import Flicking from "./Flicking";
-export default Flicking;
+import Flicking from "./Flicking";
+export default Flicking;

package/declaration/types.d.ts

@@ -1,31 +1,32 @@
-/// <reference types="react" />
-import ReactFlicking from "./Flicking";
-import { SelectEvent, NeedPanelEvent, VisibleChangeEvent, HoldStartEvent, HoldEndEvent, MoveStartEvent, MoveEvent, MoveEndEvent, WillChangeEvent, ChangedEvent, WillRestoreEvent, RestoredEvent, ReadyEvent, BeforeResizeEvent, AfterResizeEvent, ReachEdgeEvent, PanelChangeEvent, Plugin, Status } from "@egjs/flicking";
-export interface FlickingProps {
-    viewportTag: keyof JSX.IntrinsicElements;
-    cameraTag: keyof JSX.IntrinsicElements;
-    cameraClass: string;
-    plugins: Plugin[];
-    status?: Status;
-    useFindDOMNode: boolean;
-    hideBeforeInit: boolean;
-    firstPanelSize?: string;
-    onReady: (e: ReadyEvent<ReactFlicking>) => any;
-    onBeforeResize: (e: BeforeResizeEvent<ReactFlicking>) => any;
-    onAfterResize: (e: AfterResizeEvent<ReactFlicking>) => any;
-    onHoldStart: (e: HoldStartEvent<ReactFlicking>) => any;
-    onHoldEnd: (e: HoldEndEvent<ReactFlicking>) => any;
-    onMoveStart: (e: MoveStartEvent<ReactFlicking>) => any;
-    onMove: (e: MoveEvent<ReactFlicking>) => any;
-    onMoveEnd: (e: MoveEndEvent<ReactFlicking>) => any;
-    onWillChange: (e: WillChangeEvent<ReactFlicking>) => any;
-    onChanged: (e: ChangedEvent<ReactFlicking>) => any;
-    onWillRestore: (e: WillRestoreEvent<ReactFlicking>) => any;
-    onRestored: (e: RestoredEvent<ReactFlicking>) => any;
-    onSelect: (e: SelectEvent<ReactFlicking>) => any;
-    onNeedPanel: (e: NeedPanelEvent<ReactFlicking>) => any;
-    onVisibleChange: (e: VisibleChangeEvent<ReactFlicking>) => any;
-    onReachEdge: (e: ReachEdgeEvent<ReactFlicking>) => any;
-    onPanelChange: (e: PanelChangeEvent<ReactFlicking>) => any;
-    [key: string]: any;
-}
+/// <reference types="react" />
+import ReactFlicking from "./Flicking";
+import { SelectEvent, NeedPanelEvent, VisibleChangeEvent, HoldStartEvent, HoldEndEvent, MoveStartEvent, MoveEvent, MoveEndEvent, WillChangeEvent, ChangedEvent, WillRestoreEvent, RestoredEvent, ReadyEvent, BeforeResizeEvent, AfterResizeEvent, ReachEdgeEvent, PanelChangeEvent, Plugin, Status } from "@egjs/flicking";
+export interface FlickingProps {
+    viewportTag: keyof JSX.IntrinsicElements;
+    cameraTag: keyof JSX.IntrinsicElements;
+    cameraClass: string;
+    renderOnSameKey: boolean;
+    plugins: Plugin[];
+    status?: Status;
+    useFindDOMNode: boolean;
+    hideBeforeInit: boolean;
+    firstPanelSize?: string;
+    onReady: (e: ReadyEvent<ReactFlicking>) => any;
+    onBeforeResize: (e: BeforeResizeEvent<ReactFlicking>) => any;
+    onAfterResize: (e: AfterResizeEvent<ReactFlicking>) => any;
+    onHoldStart: (e: HoldStartEvent<ReactFlicking>) => any;
+    onHoldEnd: (e: HoldEndEvent<ReactFlicking>) => any;
+    onMoveStart: (e: MoveStartEvent<ReactFlicking>) => any;
+    onMove: (e: MoveEvent<ReactFlicking>) => any;
+    onMoveEnd: (e: MoveEndEvent<ReactFlicking>) => any;
+    onWillChange: (e: WillChangeEvent<ReactFlicking>) => any;
+    onChanged: (e: ChangedEvent<ReactFlicking>) => any;
+    onWillRestore: (e: WillRestoreEvent<ReactFlicking>) => any;
+    onRestored: (e: RestoredEvent<ReactFlicking>) => any;
+    onSelect: (e: SelectEvent<ReactFlicking>) => any;
+    onNeedPanel: (e: NeedPanelEvent<ReactFlicking>) => any;
+    onVisibleChange: (e: VisibleChangeEvent<ReactFlicking>) => any;
+    onReachEdge: (e: ReachEdgeEvent<ReactFlicking>) => any;
+    onPanelChange: (e: PanelChangeEvent<ReactFlicking>) => any;
+    [key: string]: any;
+}

package/dist/flicking.cjs.js

@@ -65,6 +65,16 @@ var __assign = function () {
 
   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]];
+  }
+  return t;
+}
 function __decorate(decorators, target, key, desc) {
   var c = arguments.length,
       r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
@@ -225,6 +235,7 @@ var DEFAULT_PROPS = {
   viewportTag: "div",
   cameraTag: "div",
   cameraClass: "",
+  renderOnSameKey: false,
   plugins: [],
   useFindDOMNode: false,
   hideBeforeInit: false,
@@ -427,9 +438,9 @@ function (_super) {
   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.memo(function (props) {
   return React.createElement(React.Fragment, null, props.children);
@@ -469,14 +480,6 @@ function () {
   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) {
@@ -487,8 +490,11 @@ function (_super) {
 
     _this._panels = [];
     _this._renderEmitter = new Component();
-    _this._currentState = LifeCycleState.BEFORE_UPDATE;
-    _this._panels = _this._createPanelRefs(props, _this._getChildren());
+
+    var children = _this._getChildren();
+
+    _this._panels = _this._createPanelRefs(props, children);
+    _this._prevChildren = children;
     return _this;
   }
 
@@ -523,7 +529,6 @@ function (_super) {
       externalRenderer: new ReactRenderer(rendererOptions)
     }));
     this._vanillaFlicking = flicking;
-    this._currentState = LifeCycleState.UPDATED;
 
     var children = this._getChildren();
 
@@ -531,6 +536,7 @@ function (_super) {
       return panel.key;
     });
     this._pluginsDiffer = new ListDiffer();
+    this._prevChildren = children;
 
     this._bindEvents();
 
@@ -549,28 +555,42 @@ function (_super) {
 
   __proto.shouldComponentUpdate = function (nextProps) {
     var vanillaFlicking = this._vanillaFlicking;
-    var props = this.props; // Ignore updates before init, they will be updated after "ready" event's force update
-
+    var prevProps = this.props;
     if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
 
-    if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {
-      var nextChildren = this._getChildren(nextProps.children);
-
-      this._panels = this._createPanelRefs(nextProps, nextChildren);
-      this._diffResult = this._jsxDiffer.update(nextChildren);
-    }
-
-    this._currentState = LifeCycleState.BEFORE_UPDATE;
+    var children = nextProps.children,
+        restProps = __rest(nextProps, ["children"]);
 
-    for (var key in nextProps) {
-      if (props[key] !== nextProps[key]) {
+    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
+
+    if (!vanillaFlicking || !vanillaFlicking.initialized) 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;
@@ -580,7 +600,6 @@ function (_super) {
 
     renderEmitter.trigger("render");
     flicking.camera.updateOffset();
-    this._currentState = LifeCycleState.UPDATED;
     if (!diffResult || !flicking.initialized) return;
     VanillaFlicking.sync(flicking, diffResult, this.reactPanels);
     this._diffResult = null;
@@ -596,7 +615,7 @@ function (_super) {
     var Camera = props.cameraTag;
     var attributes = {};
     var flicking = this._vanillaFlicking;
-    this._currentState = LifeCycleState.RENDER;
+    this.beforeRender();
 
     for (var name in props) {
       if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
@@ -697,6 +716,21 @@ function (_super) {
     }));
   };
 
+  __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];
+      console.log(child, nextChild);
+
+      if (child.key && nextChild.key) {
+        return child.key === nextChild.key;
+      } else {
+        return child === nextChild;
+      }
+    });
+    return same;
+  };
+
   __proto._getChildren = function (children) {
     var _this = this;
 
@@ -787,9 +821,9 @@ function (_super) {
   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
  */
 Flicking.ViewportSlot = ViewportSlot;