@egjs/react-flicking - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2

declaration/Clone.d.ts

@@ -0,0 +0,0 @@ import { Component } from "react";

declaration/consts.d.ts

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

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>> {
@@ -13,6 +12,9 @@ static defaultProps: FlickingProps;
     private pluginsDiffer;
+    private childrenDiffer;
     private jsxDiffer;
+    private containerElement;
+    private cameraElement;
     constructor(props: Partial<FlickingProps & FlickingOptions>);
     render(): JSX.Element;
-    onUpdate: (result: ChildrenDiffResult<HTMLElement>) => void;
+    componentDidUpdate(): void;
     componentDidMount(): void;
@@ -24,2 +26,3 @@ componentWillUnmount(): void;
     private getChildren;
+    private getElements;
 }
@@ -26,0 +29,0 @@ interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> {

declaration/index.d.ts

 import Flicking from "./Flicking";
 export default Flicking;
 export * from "./types";

declaration/types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

dist/flicking.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.2.1
+version: 3.2.2
 */
@@ -14,5 +14,4 @@ 'use strict';
 var React = require('react');
-var reactDom = require('react-dom');
-var ChildrenDiffer = require('@egjs/react-children-differ');
 var ListDiffer = require('@egjs/list-differ');
+var ChildrenDiffer = require('@egjs/children-differ');
 
@@ -130,11 +129,2 @@ /*! *****************************************************************************
     _this.pluginsDiffer = new ListDiffer();
-
-    _this.onUpdate = function (result) {
-      _this.flicking.sync(result);
-
-      _this.checkPlugins();
-
-      _this.checkCloneCount();
-    };
-
     var options = _this.options;
@@ -154,2 +144,4 @@
   __proto.render = function () {
+    var _this = this;
+
     var props = this.props;
@@ -172,15 +164,28 @@ /* tslint:disable:naming-convention */
 
-    return React.createElement(Tag, __assign({}, attributes), React.createElement(Viewport, {
+    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"
-    }, React.createElement(ChildrenDiffer, {
-      onUpdate: this.onUpdate
-    }, this.renderPanels()))));
+      className: classPrefix + "-camera",
+      ref: function (e) {
+        e && (_this.cameraElement = e);
+      }
+    }, this.renderPanels())));
   };
 
+  __proto.componentDidUpdate = function () {
+    var result = this.childrenDiffer.update(this.getElements());
+    this.flicking.sync(result);
+    this.checkPlugins();
+    this.checkCloneCount();
+  };
+
   __proto.componentDidMount = function () {
     var _this = this;
 
-    this.flicking = new NativeFlicking(reactDom.findDOMNode(this), __assign({}, this.options, {
+    this.childrenDiffer = new ChildrenDiffer(this.getElements());
+    this.flicking = new NativeFlicking(this.containerElement, __assign({}, this.options, {
       framework: "react",
@@ -321,2 +326,6 @@ frameworkVersion: React.version
 
+  __proto.getElements = function () {
+    return this.cameraElement.children;
+  };
+
   Flicking.defaultProps = FLICKING_PROPS;
@@ -323,0 +332,0 @@

dist/flicking.esm.js

@@ -7,9 +7,8 @@ /*
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.2.1
+version: 3.2.2
 */
 import NativeFlicking, { DEFAULT_OPTIONS, withFlickingMethods } from '@egjs/flicking';
 import { Component, createElement, version, Children } from 'react';
-import { findDOMNode } from 'react-dom';
-import ChildrenDiffer from '@egjs/react-children-differ';
 import ListDiffer from '@egjs/list-differ';
+import ChildrenDiffer from '@egjs/children-differ';
 
@@ -127,11 +126,2 @@ /*! *****************************************************************************
     _this.pluginsDiffer = new ListDiffer();
-
-    _this.onUpdate = function (result) {
-      _this.flicking.sync(result);
-
-      _this.checkPlugins();
-
-      _this.checkCloneCount();
-    };
-
     var options = _this.options;
@@ -151,2 +141,4 @@
   __proto.render = function () {
+    var _this = this;
+
     var props = this.props;
@@ -169,15 +161,28 @@ /* tslint:disable:naming-convention */
 
-    return createElement(Tag, __assign({}, attributes), createElement(Viewport, {
+    return createElement(Tag, __assign({}, attributes, {
+      ref: function (e) {
+        e && (_this.containerElement = e);
+      }
+    }), createElement(Viewport, {
       className: classPrefix + "-viewport"
     }, createElement(Camera, {
-      className: classPrefix + "-camera"
-    }, createElement(ChildrenDiffer, {
-      onUpdate: this.onUpdate
-    }, this.renderPanels()))));
+      className: classPrefix + "-camera",
+      ref: function (e) {
+        e && (_this.cameraElement = e);
+      }
+    }, this.renderPanels())));
   };
 
+  __proto.componentDidUpdate = function () {
+    var result = this.childrenDiffer.update(this.getElements());
+    this.flicking.sync(result);
+    this.checkPlugins();
+    this.checkCloneCount();
+  };
+
   __proto.componentDidMount = function () {
     var _this = this;
 
-    this.flicking = new NativeFlicking(findDOMNode(this), __assign({}, this.options, {
+    this.childrenDiffer = new ChildrenDiffer(this.getElements());
+    this.flicking = new NativeFlicking(this.containerElement, __assign({}, this.options, {
       framework: "react",
@@ -318,2 +323,6 @@ frameworkVersion: version
 
+  __proto.getElements = function () {
+    return this.cameraElement.children;
+  };
+
   Flicking.defaultProps = FLICKING_PROPS;
@@ -320,0 +329,0 @@

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -11,6 +11,5 @@ "main": "dist/flicking.cjs.js",
   "dependencies": {
-    "@egjs/children-differ": "^1.0.0",
+    "@egjs/children-differ": "^1.0.1",
     "@egjs/flicking": "^3.4.7",
-    "@egjs/list-differ": "^1.0.0",
-    "@egjs/react-children-differ": "^1.0.0"
+    "@egjs/list-differ": "^1.0.0"
   },
@@ -17,0 +16,0 @@ "devDependencies": {

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

Dependency count

3

decreased by-25%

Lines of code

2494

increased by1.26%

Worsened metrics

Total package byte prevSize

123477

decreased by-72.59%

Number of package files

55

decreased by-1.79%

Dependency changes

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

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

• Updated@egjs/children-differ@^1.0.1