@egjs/react-flicking - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

declaration/Flicking.d.ts

 import { FlickingOptions } from "@egjs/flicking";
 import * as React from "react";
 import { FlickingProps, FlickingType } from "./types";
+import { ChildrenDiffResult } from "@egjs/children-differ";
 declare class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
@@ -12,5 +13,6 @@ static defaultProps: FlickingProps;
     private pluginsDiffer;
+    private jsxDiffer;
     constructor(props: Partial<FlickingProps & FlickingOptions>);
     render(): JSX.Element;
-    onUpdate: (result: import("@egjs/list-differ").DiffResult<HTMLElement>) => void;
+    onUpdate: (result: ChildrenDiffResult<HTMLElement>) => void;
     componentDidMount(): void;
@@ -21,2 +23,3 @@ componentWillUnmount(): void;
     private renderPanels;
+    private getChildren;
 }
@@ -23,0 +26,0 @@ interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> {

declaration/types.d.ts

 /// <reference types="react" />
-import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods } from "@egjs/flicking";
+import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent } from "@egjs/flicking";
 import NativeFlicking from "@egjs/flicking";
@@ -21,3 +21,4 @@ export declare type ParametersType<T, R> = T extends (...params: infer U) => any ? (...params: U) => R : never;
     onNeedPanel: (e: NeedPanelEvent) => any;
+    onVisibleChange: (e: VisibleChangeEvent) => any;
     [key: string]: any;
 }

dist/flicking.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.0.0
+version: 3.1.0
 */
@@ -106,3 +106,4 @@ 'use strict';
   onSelect: function (e) {},
-  onChange: function (e) {}
+  onChange: function (e) {},
+  onVisibleChange: function (e) {}
 };
@@ -129,6 +130,2 @@
     _this.onUpdate = function (result) {
-      if (typeof _this.props.lastIndex === "number") {
-        _this.setLastIndex(_this.props.lastIndex);
-      }
-
       _this.flicking.sync(result);
@@ -179,3 +176,6 @@
 
-    this.flicking = new NativeFlicking(reactDom.findDOMNode(this), this.options).on({
+    this.flicking = new NativeFlicking(reactDom.findDOMNode(this), __assign({}, this.options, {
+      framework: "react",
+      frameworkVersion: React.version
+    })).on({
       moveStart: function (e) {
@@ -207,4 +207,13 @@ return _this.props.onMoveStart(e);
         return _this.props.onRestore(e);
+      },
+      visibleChange: function (e) {
+        _this.props.onVisibleChange(e);
+
+        _this.forceUpdate();
       }
     });
+    var children = this.getChildren();
+    this.jsxDiffer = new ListDiffer(children.map(function (child) {
+      return "" + child.key;
+    }));
 
@@ -217,2 +226,6 @@ if (this.props.status) {
     this.checkCloneCount();
+
+    if (this.props.renderOnlyVisible) {
+      this.forceUpdate();
+    }
   };
@@ -253,21 +266,51 @@
   __proto.renderPanels = function () {
-    var cloneCount = this.state.cloneCount;
-    var children = React.Children.toArray(this.props.children);
-    var arr = children.slice();
+    var renderOnlyVisible = this.props.renderOnlyVisible;
+    var flicking = this.flicking;
+    var reactChildren = this.getChildren();
+    var panels;
 
-    var _loop_1 = function (i) {
-      arr = arr.concat(children.map(function (el) {
-        return React.createElement(CloneComponent, {
-          key: "clone" + i + el.key
-        }, el);
+    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 = reactChildren.slice();
 
-    for (var i = 0; i < cloneCount; ++i) {
-      _loop_1(i);
+      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 arr;
+    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;
+  };
+
   Flicking.defaultProps = FLICKING_PROPS;
@@ -274,0 +317,0 @@

dist/flicking.esm.js

@@ -7,6 +7,6 @@ /*
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.0.0
+version: 3.1.0
 */
 import NativeFlicking, { DEFAULT_OPTIONS, withFlickingMethods } from '@egjs/flicking';
-import { Component, createElement, Children } from 'react';
+import { Component, createElement, version, Children } from 'react';
 import { findDOMNode } from 'react-dom';
@@ -104,3 +104,4 @@ import ChildrenDiffer from '@egjs/react-children-differ';
   onSelect: function (e) {},
-  onChange: function (e) {}
+  onChange: function (e) {},
+  onVisibleChange: function (e) {}
 };
@@ -127,6 +128,2 @@
     _this.onUpdate = function (result) {
-      if (typeof _this.props.lastIndex === "number") {
-        _this.setLastIndex(_this.props.lastIndex);
-      }
-
       _this.flicking.sync(result);
@@ -177,3 +174,6 @@
 
-    this.flicking = new NativeFlicking(findDOMNode(this), this.options).on({
+    this.flicking = new NativeFlicking(findDOMNode(this), __assign({}, this.options, {
+      framework: "react",
+      frameworkVersion: version
+    })).on({
       moveStart: function (e) {
@@ -205,4 +205,13 @@ return _this.props.onMoveStart(e);
         return _this.props.onRestore(e);
+      },
+      visibleChange: function (e) {
+        _this.props.onVisibleChange(e);
+
+        _this.forceUpdate();
       }
     });
+    var children = this.getChildren();
+    this.jsxDiffer = new ListDiffer(children.map(function (child) {
+      return "" + child.key;
+    }));
 
@@ -215,2 +224,6 @@ if (this.props.status) {
     this.checkCloneCount();
+
+    if (this.props.renderOnlyVisible) {
+      this.forceUpdate();
+    }
   };
@@ -251,21 +264,51 @@
   __proto.renderPanels = function () {
-    var cloneCount = this.state.cloneCount;
-    var children = Children.toArray(this.props.children);
-    var arr = children.slice();
+    var renderOnlyVisible = this.props.renderOnlyVisible;
+    var flicking = this.flicking;
+    var reactChildren = this.getChildren();
+    var panels;
 
-    var _loop_1 = function (i) {
-      arr = arr.concat(children.map(function (el) {
-        return createElement(CloneComponent, {
-          key: "clone" + i + el.key
-        }, el);
+    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 = reactChildren.slice();
 
-    for (var i = 0; i < cloneCount; ++i) {
-      _loop_1(i);
+      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 arr;
+    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;
+  };
+
   Flicking.defaultProps = FLICKING_PROPS;
@@ -272,0 +315,0 @@

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "3.0.0",
-  "description": "A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side.",
+  "version": "3.1.0",
+  "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
   "main": "dist/flicking.cjs.js",
@@ -11,5 +11,6 @@ "module": "dist/flicking.esm.js",
   "dependencies": {
-    "@egjs/flicking": "^3.2.0",
-    "@egjs/list-differ": "^0.0.1",
-    "@egjs/react-children-differ": "^0.0.2"
+    "@egjs/children-differ": "^1.0.0",
+    "@egjs/flicking": "^3.4.0",
+    "@egjs/list-differ": "^1.0.0",
+    "@egjs/react-children-differ": "^1.0.0"
   },
@@ -16,0 +17,0 @@ "devDependencies": {

README.md

@@ -80,2 +80,3 @@ <h1 align=center>
   moveType = {{type: "snap", count: 1}}
+  collectStatistics = {true}
 >
@@ -88,3 +89,11 @@ <div>panel 0</div>
 
+## Collect statistics
 
+Flicking applies Google Analytics (GA) to collect which features are useful to users. For example, the use of the `freeScroll` option, or the value of the `gap` option, and so on. Statistics also DO NOT contain any information that can identify an individual. Statistics on the usage will serve as basis for making better products. To disable GA, set the `collectStatistics` option to `false` as follows:
+
+```jsx
+<Flicking collectStatistics = {false}/>
+```
+
+
 ## 📦 Packages
@@ -91,0 +100,0 @@ You can use all plugins just like native @egjs/flicking.

src/react-flicking/consts.ts

@@ -1,2 +0,2 @@
-import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent } from "@egjs/flicking";
+import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent } from "@egjs/flicking";
 import { FlickingProps } from "./types";
@@ -17,2 +17,3 @@
   onChange: (e: ChangeEvent) => {},
+  onVisibleChange: (e: VisibleChangeEvent) => {},
 };

src/react-flicking/types.ts

@@ -1,2 +0,2 @@
-import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods } from "@egjs/flicking";
+import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent } from "@egjs/flicking";
 import NativeFlicking from "@egjs/flicking";
@@ -24,3 +24,4 @@
   onNeedPanel: (e: NeedPanelEvent) => any;
+  onVisibleChange: (e: VisibleChangeEvent) => any;
   [key: string]: any;
 }

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

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

Lines of code

2442

increased by5.26%

Number of lines in readme file

139

increased by6.92%

Worsened metrics

Total package byte prevSize

120001

decreased by-72.56%

Dependency count

4

increased by33.33%

Number of package files

55

decreased by-1.79%

Dependency changes

• + Added@egjs/children-differ@^1.0.0

• + Added@egjs/children-differ@1.0.1(transitive)

• + Added@egjs/react-children-differ@1.0.1(transitive)

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

• - Removed@egjs/list-differ@0.0.1(transitive)

• - Removed@egjs/react-children-differ@0.0.2(transitive)

• Updated@egjs/flicking@^3.4.0

• Updated@egjs/list-differ@^1.0.0

• Updated@egjs/react-children-differ@^1.0.0