react-resizable 1.9.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+### 1.10.1 (Nov 25, 2019)
+
+> Note: 1.10.0 was a mis-publish.
+
+- Feat: Add `transformScale` prop [#115](https://github.com/STRML/react-resizable/pull/115)
+- Bugfix: Resolve `getDerivedStateFromProps` dev warning [#117](https://github.com/STRML/react-resizable/pull/117)
+
 ### 1.9.0 (Oct 24, 2019)
 
 - Fix resize with north/south handles when `lockAspectRatio=true` [#106](https://github.com/STRML/react-resizable/pull/106)

package/build/Resizable.js

@@ -128,7 +128,9 @@ function (_React$Component) {
       var node = _ref2.node,
           deltaX = _ref2.deltaX,
           deltaY = _ref2.deltaY;
-      // Axis restrictions
+      deltaX /= _this2.props.transformScale;
+      deltaY /= _this2.props.transformScale; // Axis restrictions
+
       var canDragX = (_this2.props.axis === 'both' || _this2.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
       var canDragY = (_this2.props.axis === 'both' || _this2.props.axis === 'y') && ['e', 'w'].indexOf(axis) === -1; // reverse delta if using top or left drag handles
 
@@ -219,7 +221,8 @@ function (_React$Component) {
         onResizeStop = _this$props.onResizeStop,
         onResizeStart = _this$props.onResizeStart,
         resizeHandles = _this$props.resizeHandles,
-        p = _objectWithoutPropertiesLoose(_this$props, ["children", "draggableOpts", "width", "height", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles"]);
+        transformScale = _this$props.transformScale,
+        p = _objectWithoutPropertiesLoose(_this$props, ["children", "draggableOpts", "width", "height", "handleSize", "lockAspectRatio", "axis", "minConstraints", "maxConstraints", "onResize", "onResizeStop", "onResizeStart", "resizeHandles", "transformScale"]);
 
     var className = p.className ? p.className + " react-resizable" : 'react-resizable'; // What we're doing here is getting the child of this element, and cloning it with this element's props.
     // We are then defining its children as:
@@ -271,6 +274,7 @@ _defineProperty(Resizable, "propTypes", {
   // 'se' - Southeast handle (bottom-right)
   // 'ne' - Northeast handle (top-center)
   resizeHandles: _propTypes.default.arrayOf(_propTypes.default.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+  transformScale: _propTypes.default.number,
   // If true, will only allow width/height to move in lockstep
   lockAspectRatio: _propTypes.default.bool,
   // Restricts resizing to a particular axis (default: 'both')
@@ -296,5 +300,6 @@ _defineProperty(Resizable, "defaultProps", {
   axis: 'both',
   minConstraints: [20, 20],
   maxConstraints: [Infinity, Infinity],
-  resizeHandles: ['se']
+  resizeHandles: ['se'],
+  transformScale: 1
 });

package/build/Resizable.js.flow

@@ -36,7 +36,8 @@ export type Props = {
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object,
-  resizeHandles: ResizeHandle[]
+  resizeHandles: ResizeHandle[],
+  transformScale: number,
 };
 
 export default class Resizable extends React.Component<Props, State> {
@@ -73,6 +74,7 @@ export default class Resizable extends React.Component<Props, State> {
     // 'se' - Southeast handle (bottom-right)
     // 'ne' - Northeast handle (top-center)
     resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+    transformScale: PropTypes.number,
 
     // If true, will only allow width/height to move in lockstep
     lockAspectRatio: PropTypes.bool,
@@ -103,7 +105,8 @@ export default class Resizable extends React.Component<Props, State> {
     axis: 'both',
     minConstraints: [20, 20],
     maxConstraints: [Infinity, Infinity],
-    resizeHandles: ['se']
+    resizeHandles: ['se'],
+    transformScale: 1
   };
 
   state: State = {
@@ -172,6 +175,8 @@ export default class Resizable extends React.Component<Props, State> {
    */
   resizeHandler(handlerName: string, axis: ResizeHandle): Function {
     return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
+      deltaX /= this.props.transformScale;
+      deltaY /= this.props.transformScale;
 
       // Axis restrictions
       const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
@@ -232,7 +237,7 @@ export default class Resizable extends React.Component<Props, State> {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, resizeHandles, ...p} = this.props;
+        onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`:

package/build/ResizableBox.js

@@ -72,6 +72,8 @@ function (_React$Component) {
         propsHeight: props.height
       };
     }
+
+    return null;
   };
 
   var _proto = ResizableBox.prototype;

package/build/ResizableBox.js.flow

@@ -38,6 +38,7 @@ export default class ResizableBox extends React.Component<ResizableProps, State>
         propsHeight: props.height,
       };
     }
+    return null;
   }
 
   onResize = (e: SyntheticEvent<>, data: ResizeCallbackData) => {

package/index.html

@@ -0,0 +1,15 @@
+<html>
+<head>
+  <style>
+    body {
+      background: darkblue;
+      color: white;
+      font-size: 32px;
+    }
+  </style>
+</head>
+<body>
+Hello! This is a website wow
+<div style="background-color: black; width: 200px; height: 200px">BOX</div>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
   "scripts": {

package/.github/ISSUE_TEMPLATE.md

@@ -1,23 +0,0 @@
-### Thanks for opening an issue!
-
-Please select the type of issue you're reporting. For questions.
-
-- [ ] Bug
-- [ ] Feature Request
-- [ ] Question
-
-### Problem Report
-
-> Please describe the problem here.
-
-#### System Info
-
-Node Version:
-Browser:
-OS:
-
-#### Reproduction
-
-If this is a bug report, please provide a reproduction of the issue by going to
-https://codesandbox.io/s/9229wz40yo?fontsize=14.
-Paste a link here to your working reproduction.

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +0,0 @@
-Thanks for submitting a pull request to React-Resizable!
-
-Please reference an open issue. If one has not been created, please create one along with a failing example or test case.
-
-Please do not commit built files (`/dist`) to pull requests. They are built only at release.