@egjs/react-flicking - npm Package Compare versions

Comparing version 4.0.3 to 4.1.0-beta.1

declaration/Flicking.d.ts

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

dist/flicking.cjs.js

@@ -418,2 +418,5 @@ /*
   __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), {
@@ -603,2 +606,3 @@ ref: this._elRef
     var flicking = this._vanillaFlicking;
+    var initialized = this._diffResult && flicking && flicking.initialized;
 
@@ -622,3 +626,9 @@ for (var name_1 in props) {
 
-    var children = this._diffResult && flicking && flicking.initialized ? VanillaFlicking.getRenderingPanels(flicking, this._diffResult) : this._getChildren();
+    var cameraStyle = {};
+
+    if (!initialized) {
+      cameraStyle.transform = "translate(" + this._getCameraAlign() + ")";
+    }
+
+    var children = initialized ? VanillaFlicking.getRenderingPanels(flicking, this._diffResult) : this._getAlignAppliedChildren(this._getChildren());
     var panels = this.props.useFindDOMNode ? children.map(function (child, idx) {
@@ -641,3 +651,4 @@ return React.createElement(NonStrictPanelComponent, {
     }), React.createElement(Camera, {
-      className: "flicking-camera"
+      className: "flicking-camera",
+      style: cameraStyle
     }, panels));
@@ -676,2 +687,16 @@ };
 
+  __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) {
@@ -685,2 +710,24 @@ 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;
@@ -687,0 +734,0 @@

dist/flicking.esm.js

@@ -11,3 +11,3 @@ /*
 import ListDiffer from '@egjs/list-differ';
-import VanillaFlicking__default, { ExternalPanel, ExternalRenderer, EVENTS, sync, getRenderingPanels, withFlickingMethods } from '@egjs/flicking';
+import VanillaFlicking__default, { ExternalPanel, ExternalRenderer, EVENTS, sync, getRenderingPanels, ALIGN, withFlickingMethods } from '@egjs/flicking';
 export * from '@egjs/flicking';
@@ -418,2 +418,5 @@ import { isFragment } from 'react-is';
   __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), {
@@ -603,2 +606,3 @@ ref: this._elRef
     var flicking = this._vanillaFlicking;
+    var initialized = this._diffResult && flicking && flicking.initialized;
 
@@ -622,3 +626,9 @@ for (var name_1 in props) {
 
-    var children = this._diffResult && flicking && flicking.initialized ? getRenderingPanels(flicking, this._diffResult) : this._getChildren();
+    var cameraStyle = {};
+
+    if (!initialized) {
+      cameraStyle.transform = "translate(" + this._getCameraAlign() + ")";
+    }
+
+    var children = initialized ? getRenderingPanels(flicking, this._diffResult) : this._getAlignAppliedChildren(this._getChildren());
     var panels = this.props.useFindDOMNode ? children.map(function (child, idx) {
@@ -641,3 +651,4 @@ return React.createElement(NonStrictPanelComponent, {
     }), React.createElement(Camera, {
-      className: "flicking-camera"
+      className: "flicking-camera",
+      style: cameraStyle
     }, panels));
@@ -676,2 +687,16 @@ };
 
+  __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) {
@@ -685,2 +710,24 @@ 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;
@@ -687,0 +734,0 @@

package.json

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

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

Total package byte prevSize

73308

increased by5.76%

Lines of code

1796

increased by7.03%

Worsened metrics

Dev dependency count

19

increased by5.56%

Number of low quality alerts

1

increased byInfinity%

No dependency changes