re-resizable - npm Package Compare versions

Comparing version 6.9.14 to 6.9.15

lib/index.d.ts

@@ -86,3 +86,3 @@ import * as React from 'react';
     scale?: number;
-    resizeRatio?: number;
+    resizeRatio?: number | [number, number];
 }
@@ -89,0 +89,0 @@ interface State {

lib/index.es5.js

@@ -175,4 +175,11 @@ 'use strict';
 };
+/**
+ * transform T | [T, T] to [T, T]
+ * @param val
+ * @returns
+ */
+var normalizeToPair = function (val) { return (Array.isArray(val) ? val : [val, val]); };
 var definedProps = [
     'as',
+    'ref',
     'style',
@@ -500,5 +507,5 @@ 'className',
         var scale = this.props.scale || 1;
-        var resizeRatio = this.props.resizeRatio || 1;
-        var _a = this.state, direction = _a.direction, original = _a.original;
-        var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth;
+        var _a = normalizeToPair(this.props.resizeRatio || 1), resizeRatioX = _a[0], resizeRatioY = _a[1];
+        var _b = this.state, direction = _b.direction, original = _b.original;
+        var _c = this.props, lockAspectRatio = _c.lockAspectRatio, lockAspectRatioExtraHeight = _c.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _c.lockAspectRatioExtraWidth;
         var newWidth = original.width;
@@ -509,3 +516,3 @@ var newHeight = original.height;
         if (hasDirection('right', direction)) {
-            newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
+            newWidth = original.width + ((clientX - original.x) * resizeRatioX) / scale;
             if (lockAspectRatio) {
@@ -516,3 +523,3 @@ newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
         if (hasDirection('left', direction)) {
-            newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
+            newWidth = original.width - ((clientX - original.x) * resizeRatioX) / scale;
             if (lockAspectRatio) {
@@ -523,3 +530,3 @@ newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
         if (hasDirection('bottom', direction)) {
-            newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
+            newHeight = original.height + ((clientY - original.y) * resizeRatioY) / scale;
             if (lockAspectRatio) {
@@ -530,3 +537,3 @@ newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
         if (hasDirection('top', direction)) {
-            newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
+            newHeight = original.height - ((clientY - original.y) * resizeRatioY) / scale;
             if (lockAspectRatio) {
@@ -533,0 +540,0 @@ newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;

lib/index.js

@@ -108,4 +108,11 @@ var __extends = (this && this.__extends) || (function () {
 };
+/**
+ * transform T | [T, T] to [T, T]
+ * @param val
+ * @returns
+ */
+var normalizeToPair = function (val) { return (Array.isArray(val) ? val : [val, val]); };
 var definedProps = [
     'as',
+    'ref',
     'style',
@@ -433,5 +440,5 @@ 'className',
         var scale = this.props.scale || 1;
-        var resizeRatio = this.props.resizeRatio || 1;
-        var _a = this.state, direction = _a.direction, original = _a.original;
-        var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth;
+        var _a = normalizeToPair(this.props.resizeRatio || 1), resizeRatioX = _a[0], resizeRatioY = _a[1];
+        var _b = this.state, direction = _b.direction, original = _b.original;
+        var _c = this.props, lockAspectRatio = _c.lockAspectRatio, lockAspectRatioExtraHeight = _c.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _c.lockAspectRatioExtraWidth;
         var newWidth = original.width;
@@ -442,3 +449,3 @@ var newHeight = original.height;
         if (hasDirection('right', direction)) {
-            newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale;
+            newWidth = original.width + ((clientX - original.x) * resizeRatioX) / scale;
             if (lockAspectRatio) {
@@ -449,3 +456,3 @@ newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
         if (hasDirection('left', direction)) {
-            newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale;
+            newWidth = original.width - ((clientX - original.x) * resizeRatioX) / scale;
             if (lockAspectRatio) {
@@ -456,3 +463,3 @@ newHeight = (newWidth - extraWidth) / this.ratio + extraHeight;
         if (hasDirection('bottom', direction)) {
-            newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale;
+            newHeight = original.height + ((clientY - original.y) * resizeRatioY) / scale;
             if (lockAspectRatio) {
@@ -463,3 +470,3 @@ newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;
         if (hasDirection('top', direction)) {
-            newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale;
+            newHeight = original.height - ((clientY - original.y) * resizeRatioY) / scale;
             if (lockAspectRatio) {
@@ -466,0 +473,0 @@ newWidth = (newHeight - extraHeight) * this.ratio + extraWidth;

package.json

 {
   "name": "re-resizable",
-  "version": "6.9.14",
+  "version": "6.9.15",
   "description": "Resizable component for React.",
@@ -5,0 +5,0 @@ "title": "re-resizable",

README.md

@@ -150,6 +150,8 @@ <p align="center"><img src ="https://github.com/bokuweb/re-resizable/blob/master/logo.png?raw=true" /></p>
 
-#### `resizeRatio?: number | string;`
+#### `resizeRatio?: number | [number, number];`
 
 The `resizeRatio` property is used to set the number of pixels the resizable component scales by compared to the number of pixels the mouse/touch moves. Defaults to `1` (for a 1:1 ratio). The number set is the left side of the ratio, `2` will give a 2:1 ratio.
 
+For [number, number] means [resizeRatioX, resizeRatioY], more precise control.
+
 #### `lockAspectRatio?: boolean | number;`
@@ -156,0 +158,0 @@

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

Number of lines in readme file

321

increased by0.63%

Worsened metrics

Total package byte prevSize

97211

decreased by-36.57%

Number of package files

9

decreased by-18.18%

Lines of code

1885

decreased by-34.8%

No dependency changes