@egjs/react-flicking - npm Package Compare versions

Comparing version 4.1.0-beta.1 to 4.1.0

declaration/Flicking.d.ts

@@ -26,6 +26,3 @@ import * as React from "react";
     private _getChildren;
-    private _getAlignAppliedChildren;
     private _unpackFragment;
-    private _getCameraAlign;
-    private _parseAlign;
 }
@@ -32,0 +29,0 @@ interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking {

declaration/types.d.ts

@@ -1,2 +0,3 @@
-import { SelectEvent, NeedPanelEvent, VisibleChangeEvent, HoldStartEvent, HoldEndEvent, MoveStartEvent, MoveEvent, MoveEndEvent, WillChangeEvent, ChangedEvent, WillRestoreEvent, RestoredEvent, ReadyEvent, BeforeResizeEvent, AfterResizeEvent, ReachEdgeEvent, Plugin } from "@egjs/flicking";
+import ReactFlicking from "./Flicking";
+import { SelectEvent, NeedPanelEvent, VisibleChangeEvent, HoldStartEvent, HoldEndEvent, MoveStartEvent, MoveEvent, MoveEndEvent, WillChangeEvent, ChangedEvent, WillRestoreEvent, RestoredEvent, ReadyEvent, BeforeResizeEvent, AfterResizeEvent, ReachEdgeEvent, PanelChangeEvent, Plugin } from "@egjs/flicking";
 export interface FlickingProps {
@@ -7,19 +8,20 @@ viewportTag: keyof JSX.IntrinsicElements;
     useFindDOMNode: boolean;
-    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;
-    onNeedPanel: (e: NeedPanelEvent) => any;
-    onVisibleChange: (e: VisibleChangeEvent) => any;
-    onReachEdge: (e: ReachEdgeEvent) => any;
+    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;
 }

dist/flicking.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-flicking
-version: 4.0.0-snapshot
+version: 4.1.0
 */
@@ -241,3 +241,4 @@ 'use strict';
   onVisibleChange: function (e) {},
-  onReachEdge: function (e) {}
+  onReachEdge: function (e) {},
+  onPanelChange: function (e) {}
 };
@@ -420,5 +421,2 @@
   __proto._getElement = function () {
-    console.log(React.cloneElement(React.Children.only(this.props.children), {
-      ref: this._elRef
-    }));
     return React.cloneElement(React.Children.only(this.props.children), {
@@ -547,2 +545,6 @@ ref: this._elRef
       }));
+    }, _a[VanillaFlicking.EVENTS.PANEL_CHANGE] = function (e) {
+      return props.onPanelChange(__assign(__assign({}, e), {
+        currentTarget: _this
+      }));
     }, _a));
@@ -609,3 +611,2 @@ flicking.once(VanillaFlicking.EVENTS.READY, function () {
     var flicking = this._vanillaFlicking;
-    var initialized = this._diffResult && flicking && flicking.initialized;
 
@@ -629,9 +630,3 @@ for (var name_1 in props) {
 
-    var cameraStyle = {};
-
-    if (!initialized) {
-      cameraStyle.transform = "translate(" + this._getCameraAlign() + ")";
-    }
-
-    var children = initialized ? VanillaFlicking.getRenderingPanels(flicking, this._diffResult) : this._getAlignAppliedChildren(this._getChildren());
+    var children = this._diffResult && flicking && flicking.initialized ? VanillaFlicking.getRenderingPanels(flicking, this._diffResult) : this._getChildren();
     var panels = this.props.useFindDOMNode ? children.map(function (child, idx) {
@@ -654,4 +649,3 @@ return React.createElement(NonStrictPanelComponent, {
     }), React.createElement(Camera, {
-      className: "flicking-camera",
-      style: cameraStyle
+      className: "flicking-camera"
     }, panels));
@@ -690,16 +684,2 @@ };
 
-  __proto._getAlignAppliedChildren = function (children) {
-    var _this = this;
-
-    var align = this.props.align || "center";
-    var panelAlign = typeof align === "object" ? align.panel : align;
-    return children.map(function (child) {
-      return React.cloneElement(child, {
-        style: {
-          transform: "translate(-" + _this._parseAlign(panelAlign)
-        }
-      });
-    });
-  };
-
   __proto._unpackFragment = function (child) {
@@ -713,24 +693,2 @@ var _this = this;
 
-  __proto._getCameraAlign = function () {
-    var align = this.props.align || "center";
-    var cameraAlign = typeof align === "object" ? align.camera : align;
-    return this._parseAlign(cameraAlign);
-  };
-
-  __proto._parseAlign = function (align) {
-    switch (align) {
-      case VanillaFlicking.ALIGN.PREV:
-        return "0%";
-
-      case VanillaFlicking.ALIGN.CENTER:
-        return "50%";
-
-      case VanillaFlicking.ALIGN.NEXT:
-        return "100%";
-
-      default:
-        return align.toString();
-    }
-  };
-
   Flicking.defaultProps = DEFAULT_PROPS;
@@ -737,0 +695,0 @@

dist/flicking.esm.js

@@ -7,7 +7,7 @@ /*
 repository: https://github.com/naver/egjs-flicking
-version: 4.0.0-snapshot
+version: 4.1.0
 */
 import * as React from 'react';
 import ListDiffer from '@egjs/list-differ';
-import VanillaFlicking__default, { ExternalPanel, ExternalRenderer, EVENTS, sync, getRenderingPanels, ALIGN, withFlickingMethods } from '@egjs/flicking';
+import VanillaFlicking__default, { ExternalPanel, ExternalRenderer, EVENTS, sync, getRenderingPanels, withFlickingMethods } from '@egjs/flicking';
 export * from '@egjs/flicking';
@@ -240,3 +240,4 @@ import { isFragment } from 'react-is';
   onVisibleChange: function (e) {},
-  onReachEdge: function (e) {}
+  onReachEdge: function (e) {},
+  onPanelChange: function (e) {}
 };
@@ -419,5 +420,2 @@
   __proto._getElement = function () {
-    console.log(React.cloneElement(React.Children.only(this.props.children), {
-      ref: this._elRef
-    }));
     return React.cloneElement(React.Children.only(this.props.children), {
@@ -546,2 +544,6 @@ ref: this._elRef
       }));
+    }, _a[EVENTS.PANEL_CHANGE] = function (e) {
+      return props.onPanelChange(__assign(__assign({}, e), {
+        currentTarget: _this
+      }));
     }, _a));
@@ -608,3 +610,2 @@ flicking.once(EVENTS.READY, function () {
     var flicking = this._vanillaFlicking;
-    var initialized = this._diffResult && flicking && flicking.initialized;
 
@@ -628,9 +629,3 @@ for (var name_1 in props) {
 
-    var cameraStyle = {};
-
-    if (!initialized) {
-      cameraStyle.transform = "translate(" + this._getCameraAlign() + ")";
-    }
-
-    var children = initialized ? getRenderingPanels(flicking, this._diffResult) : this._getAlignAppliedChildren(this._getChildren());
+    var children = this._diffResult && flicking && flicking.initialized ? getRenderingPanels(flicking, this._diffResult) : this._getChildren();
     var panels = this.props.useFindDOMNode ? children.map(function (child, idx) {
@@ -653,4 +648,3 @@ return React.createElement(NonStrictPanelComponent, {
     }), React.createElement(Camera, {
-      className: "flicking-camera",
-      style: cameraStyle
+      className: "flicking-camera"
     }, panels));
@@ -689,16 +683,2 @@ };
 
-  __proto._getAlignAppliedChildren = function (children) {
-    var _this = this;
-
-    var align = this.props.align || "center";
-    var panelAlign = typeof align === "object" ? align.panel : align;
-    return children.map(function (child) {
-      return React.cloneElement(child, {
-        style: {
-          transform: "translate(-" + _this._parseAlign(panelAlign)
-        }
-      });
-    });
-  };
-
   __proto._unpackFragment = function (child) {
@@ -712,24 +692,2 @@ var _this = this;
 
-  __proto._getCameraAlign = function () {
-    var align = this.props.align || "center";
-    var cameraAlign = typeof align === "object" ? align.camera : align;
-    return this._parseAlign(cameraAlign);
-  };
-
-  __proto._parseAlign = function (align) {
-    switch (align) {
-      case ALIGN.PREV:
-        return "0%";
-
-      case ALIGN.CENTER:
-        return "50%";
-
-      case ALIGN.NEXT:
-        return "100%";
-
-      default:
-        return align.toString();
-    }
-  };
-
   Flicking.defaultProps = DEFAULT_PROPS;
@@ -736,0 +694,0 @@

package.json

 {
   "name": "@egjs/react-flicking",
-  "version": "4.1.0-beta.1",
+  "version": "4.1.0",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
@@ -19,3 +19,3 @@ "main": "dist/flicking.cjs.js",
   "dependencies": {
-    "@egjs/flicking": "^4.0.0",
+    "@egjs/flicking": "^4.1.0",
     "@egjs/list-differ": "^1.0.0",
@@ -39,3 +39,2 @@ "react-is": "^17.0.2"
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
@@ -42,0 +41,0 @@ "rollup": "^2.45.2",

src/react-flicking/consts.ts

@@ -21,3 +21,4 @@ /*
   AfterResizeEvent,
-  ReachEdgeEvent
+  ReachEdgeEvent,
+  PanelChangeEvent
 } from "@egjs/flicking";
@@ -47,3 +48,4 @@
   onVisibleChange: (e: VisibleChangeEvent) => {},
-  onReachEdge: (e: ReachEdgeEvent) => {}
+  onReachEdge: (e: ReachEdgeEvent) => {},
+  onPanelChange: (e: PanelChangeEvent) => {}
 };

src/react-flicking/types.ts

@@ -5,2 +5,3 @@ /*
  */
+import ReactFlicking from "./Flicking";
 import {
@@ -23,2 +24,3 @@ SelectEvent,
   ReachEdgeEvent,
+  PanelChangeEvent,
   Plugin
@@ -32,19 +34,20 @@ } from "@egjs/flicking";
   useFindDOMNode: boolean;
-  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;
-  onNeedPanel: (e: NeedPanelEvent) => any;
-  onVisibleChange: (e: VisibleChangeEvent) => any;
-  onReachEdge: (e: ReachEdgeEvent) => any;
+  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;
 }

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

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

Improved metrics

Dev dependency count

18

decreased by-5.26%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

70457

decreased by-3.89%

Lines of code

1697

decreased by-5.51%

Published versions last year

23

decreased by-4.17%

Dependency changes

• Updated@egjs/flicking@^4.1.0