react-resizable-box - npm Package Compare versions

Comparing version 2.0.0-rc.1 to 2.0.0-rc.2

lib/index.js

@@ -75,4 +75,4 @@ 'use strict';
       isResizing: false,
-      width: width,
-      height: height,
+      width: typeof width === 'undefined' ? 'auto' : width,
+      height: typeof height === 'undefined' ? 'auto' : height,
       direction: 'right',
@@ -115,3 +115,6 @@ original: {
 
-      if (width !== this.props.width) this.setState({ width: width });
+      var newWidth = typeof this.props.width === 'undefined' ? 'auto' : this.props.width;
+      if (width !== newWidth) {
+        this.setState({ width: newWidth });
+      }
       if (height !== this.props.height) this.setState({ height: height });
@@ -173,7 +176,8 @@ }
       var _props = this.props,
+          lockAspectRatio = _props.lockAspectRatio,
           minWidth = _props.minWidth,
-          maxWidth = _props.maxWidth,
-          minHeight = _props.minHeight,
-          maxHeight = _props.maxHeight,
-          lockAspectRatio = _props.lockAspectRatio;
+          minHeight = _props.minHeight;
+      var _props2 = this.props,
+          maxWidth = _props2.maxWidth,
+          maxHeight = _props2.maxHeight;
 
@@ -200,2 +204,24 @@ var ratio = original.height / original.width;
 
+      if (this.props.bounds === 'parent') {
+        var parent = this.resizable.parentNode;
+        if (parent instanceof HTMLElement) {
+          var boundWidth = parent.offsetWidth + (parent.offsetLeft - this.resizable.offsetLeft);
+          var boundHeight = parent.offsetHeight + (parent.offsetTop - this.resizable.offsetTop);
+          maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth;
+          maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight;
+        }
+      } else if (this.props.bounds === 'window') {
+        if (typeof window !== 'undefined') {
+          var _boundWidth = window.innerWidth - this.resizable.offsetLeft;
+          var _boundHeight = window.innerHeight - this.resizable.offsetTop;
+          maxWidth = maxWidth && maxWidth < _boundWidth ? maxWidth : _boundWidth;
+          maxHeight = maxHeight && maxHeight < _boundHeight ? maxHeight : _boundHeight;
+        }
+      } else if (this.props.bounds && this.props.bounds instanceof HTMLElement) {
+        var _boundWidth2 = this.props.bounds.offsetWidth + (this.props.bounds.offsetLeft - this.resizable.offsetLeft);
+        var _boundHeight2 = this.props.bounds.offsetHeight + (this.props.bounds.offsetTop - this.resizable.offsetTop);
+        maxWidth = maxWidth && maxWidth < _boundWidth2 ? maxWidth : _boundWidth2;
+        maxHeight = maxHeight && maxHeight < _boundHeight2 ? maxHeight : _boundHeight2;
+      }
+
       var computedMinWidth = typeof minWidth === 'undefined' || minWidth < 0 ? 0 : minWidth;
@@ -217,4 +243,9 @@ var computedMaxWidth = typeof maxWidth === 'undefined' || maxWidth < 0 ? newWidth : maxWidth;
       }
-      newWidth = snap(newWidth, this.props.grid[0]);
-      newHeight = snap(newHeight, this.props.grid[1]);
+      if (this.props.grid) {
+        newWidth = snap(newWidth, this.props.grid[0]);
+      }
+      if (this.props.grid) {
+        newHeight = snap(newHeight, this.props.grid[1]);
+      }
+
       this.setState({
@@ -268,7 +299,8 @@ width: width !== 'auto' ? newWidth : 'auto',
 
-      var _props2 = this.props,
-          enable = _props2.enable,
-          handlerStyles = _props2.handlerStyles,
-          handlerClasses = _props2.handlerClasses;
+      var _props3 = this.props,
+          enable = _props3.enable,
+          handlerStyles = _props3.handlerStyles,
+          handlerClasses = _props3.handlerClasses;
 
+      if (!enable) return null;
       return Object.keys(enable).map(function (dir) {
@@ -293,5 +325,5 @@ if (enable[dir] !== false) {
       var userSelect = this.state.isResizing ? userSelectNone : userSelectAuto;
-      var _props3 = this.props,
-          style = _props3.style,
-          className = _props3.className;
+      var _props4 = this.props,
+          style = _props4.style,
+          className = _props4.className;
 
@@ -358,4 +390,2 @@ return _react2.default.createElement(
   },
-  width: 'auto',
-  height: 'auto',
   style: {},
@@ -362,0 +392,0 @@ grid: [1, 1],

package.json

 {
   "name": "react-resizable-box",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "build:flow-gen": "flow gen-flow-files src/index.js --out-dir lib && flow gen-flow-files src/resizer.js --out-dir lib",
+    "flow:gen": "flow gen-flow-files src/index.js --out-dir lib && flow gen-flow-files src/resizer.js --out-dir lib",
     "watch": "watchify --extension=js -o docs/dist/bundle.js docs/src/index.js",
@@ -14,3 +14,3 @@ "compile": "babel -d lib/ src/",
     "flow": "flow",
-    "prepublish": "npm run compile && npm run build:flow-gen"
+    "prepublish": "npm run compile && npm run flow:gen"
   },
@@ -17,0 +17,0 @@ "repository": {

README.md

@@ -10,2 +10,13 @@ # react-resizable-box
 
+## Table of Contents
+
+- [Demo](#Demo)
+- [Install](#install)
+- [Usage](#usage)
+- [Props](#props)
+- [Method](#method)
+- [Test](#test)
+- [Changelog](#changelog)
+- [License](#license)
+
 ## Demo
@@ -17,10 +28,9 @@
 
+## Install
 
-## Installation
-
-```sh
-npm i react-resizable-box
+``` sh
+$ npm install --save react-resizable-box
 ```
 
-## Overview
+## Usage
 
@@ -31,3 +41,3 @@ ### Basic
 <Resizable
-  customClass="item"
+  className="item"
   width={320}
@@ -40,97 +50,69 @@ height={200}
 
-### With min/max width and height
+## Props
 
-``` javascript
-<Resizable
-  customClass="item"
-  width={320}
-  height={200}
-  minWidth={160}
-  minHeight={160}
-  maxWidth={480}
-  maxHeight={480}
->
-  min size is 160px x 160px, max size is 480px x 480px.
-</Resizable>
-```
+#### `className?: string;`
 
-## Props
+The `className` property is used to set the custom `className` of a resizable component.
 
-#### `width`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 
+#### `style?: any;`
 
-The `width` property is used to set the width of a resizable component.   
-For example, you can set `300`, `'300px'`, `50%`.     
-If ommited, set `'auto'`.    
+The `style` property is used to set the custom `style` of a resizable component.
 
+#### `width?: (number | string);`
 
-#### `height`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+The `width` property is used to set the initial width of a resizable component.   
+For example, you can set `300`, `'300px'`, `50%`.     
+If omitted, set `'auto'`.    
 
+#### `height?: (number | string);`
 
-The `height` property is used to set the width of a resizable component.    
+The `height` property is used to set the initial height of a resizable component.    
 For example, you can set `300`, `'300px'`, `50%`.    
-If ommited, set `'auto'`.    
+If omitted, set `'auto'`.    
 
+#### `minWidth?: number;`
 
-#### `minWidth`: PropTypes.number
-
-
 The `minWidth` property is used to set the minimum width of a resizable component.
 
+#### `minHeight?: number;`
 
-#### `minHeight`: PropTypes.number
-
-
 The `minHeight` property is used to set the minimum height of a resizable component.
 
+#### `maxWidth?: number;`
 
-#### `maxWidth`: PropTypes.number
-
-
 The `maxWidth` property is used to set the maximum width of a resizable component.
 
+#### `maxHeight?: number`;
 
-#### `maxHeight`: PropTypes.number
+The `maxHeight` property is used to set the maximum height of a resizable component.
 
+#### `grid?: Array<number>;`
 
-The `maxheight` property is used to set the maximum height of a resizable component.
-
-
-#### `grid`: PropTypes.arrayOf(PropTypes.number)
-
-
 The `grid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`.
 
-#### `lockAspectRatio`: PropTypes.bool
+#### `lockAspectRatio?: boolean;`
 
 The `lockAspectRatio` property is used to lock aspect ratio.
-If ommited, set `false`.
+If omitted, set `false`.
 
+#### `bounds?: ('window' | 'parent' | HTMLElement);`
 
-#### `customClass`: PropTypes.string
+Specifies resize boundaries.
 
+#### `handlerStyles?: HandlersStyles;`
 
-The `customClass` property is used to set the custom `className` of a resizable component.
+The `handleStyles` property is used to override the style of one or more resize handlers.
+Only the axis you specify will have its handler style replaced.
+If you specify a value for `right` it will completely replace the styles for the `right` resize handler,
+but other handler will still use the default styles.
 
+#### `handlerClasses?: HandlersClassName;`
 
-#### `customStyle`: Proptypes.object
+The `handlerClasses` property is used to set the className of one or more resize handlers.
 
+#### `enable?: ?Enable;`
 
-The `customStyle` property is used to set the custom `classStyle` of a resizable component.
+The `enable` property is used to set the resizable permission of a resizable component.
 
-
-#### `handleStyle`: PropTypes.shape({ top: PropTypes.object, right: PropTypes.object, bottom: PropTypes.object, left: PropTypes.object, topRight: PropTypes.object, bottomRight: PropTypes.object, bottomLeft: PropTypes.object, topLeft: PropTypes.object })
-
-
-The `handleStyle` property is used to override the style of one or more resize handles.
-Only the axis you specify will have its handle style replaced.
-If you specify a value for `right` it will completely replace the styles for the `right` resize handle,
-but other handle will still use the default styles.
-
-
-#### `isResizable`: PropTypes.shape({ top: PropTypes.bool, right: PropTypes.bool, bottom: PropTypes.bool, left: PropTypes.bool, topRight: PropTypes.bool, bottomRight: PropTypes.bool, bottomLeft: PropTypes.bool, topLeft: PropTypes.bool })
-
-
-The `isResizable` property is used to set the resizable permission of a resizable component.
-
 The permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.
@@ -140,74 +122,52 @@ If omitted, all resizer are enabled.
 
+#### `onResizeStart?: ResizeStartCallBack;`
 
-#### `onClick`: PropTypes.func
+`ResizeStartCallBack` type is below.
 
+```
+type ResizeStartCallBack = (
+  e: SyntheticMouseEvent | SyntheticTouchEvent,
+  dir: Direction,
+  refToElement: HTMLElement,
+) => void;
+```
 
-Calls when resizable component clicked.
+Calls when resizable component resize start.
 
+#### `onResize?: Callback;`
 
-#### `onTouchStart`: PropTypes.func
+### Basic
 
+`Callback` type is below.
 
-Calls when resizable component touched.
+```
+type Callback = (
+  event: MouseEvent | TouchEvent,
+  direction: Direction,
+  refToElement: HTMLElement,
+  delta: NumberSize,
+) => void;
+```
 
+Calls when resizable component resizing.
 
-#### `onDoubleClick`: PropTypes.func
+#### `onResizeStop?: Callback;`
 
+`Callback` type is below.
 
-Calls when resizable component double clicked.
+```
+type Callback = (
+  event: MouseEvent | TouchEvent,
+  direction: Direction,
+  refToElement: HTMLElement,
+  delta: NumberSize,
+) => void;
+```
 
+Calls when resizable component resize startStop.
 
-#### `onResizeStart`: PropTypes.func
+#### `extendsProps?: any;`
 
-
-Calls when resizable component resize starts.
-Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`, `event: object`)
-
-- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
-- styleSize: `{ width, height }`
-  - this argument is {width, height} of getComputedStyle.
-- clientSize: `{ width, height }`
-  - this argument is `clientWidth` and `clientHeight`.
-- event: `mouse down event`
-
-
-#### `onResize`: PropTypes.func
-
-
-Calls when resizable component resize.
-Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`, `delta: object`)
-
-- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
-- styleSize: `{ width, height }`
-  - this argument is {width, height} of getComputedStyle.
-- clientSize: `{ width, height }`
-  - this argument is `clientWidth` and `clientHeight`.
-- delta: `{ width, height }`
-  - this delta width and height by resize. 
-  
-For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'right' 20px, this callback is called with `('right', { width: 120, height: 200 }, { width: 160, height: 240 }, {width: 20, height: 0})`
-
-
-#### `onResizeStop`: PropTypes.func
-
-
-Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`, `delta: object`)
-
-- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
-- styleSize: `{ width, height }`
-  - this argument is {width, height} of getComputedStyle.
-- clientSize: `{ width, height }`
-  - this argument is `clientWidth` and `clientHeight`.
-- delta: `{ width, height }`
-  - this delta width and height by resize. 
-  
-For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'right' 20px, this callback is called with `('right', { width: 120, height: 200 }, { width: 160, height: 240 }, {width: 20, height: 0})`
-
-#### `extendsProps`: PropTypes.object
-
 This property is used to pass the other props to the component.
 
-
-
-
 e.g.
@@ -221,6 +181,5 @@
 
-<Resizable {...extendsProps} />
+<Resizable extendsProps={extendsProps} />
 ```
 
-
 ## method
@@ -256,3 +215,2 @@
 
-
 ## Test
@@ -266,2 +224,15 @@
 
+#### v2.0.0-rc.2
+
+- Use `flowtype`.
+- Change callback args.
+- Change some props name.
+  - isResizable => enable.
+  - customClass => className.
+  - customStyle => style.
+  - handleStyle => handlerStyles.
+  - handleClass => handlerClasses.
+- Add bounds feature.
+- Fix min/max size checker when aspect ratio locked.
+
 #### v1.8.4
@@ -316,94 +287,7 @@
 
-
 #### v1.3.0
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 - Add `userSelect: none` when resize get srated.
 - Add shouldComponentUpdate.
-- Add hander custom className.
+- Add handler custom className.
 
@@ -448,2 +332,3 @@ #### v1.2.0
 
+
 ## License
@@ -453,3 +338,3 @@
 
-Copyright (c) 2016 @Bokuweb
+Copyright (c) 2017 bokuweb
 
@@ -456,0 +341,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

439

increased by6.81%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

40941

decreased by-0.12%

Number of lines in readme file

335

decreased by-25.56%

No dependency changes