react-resizable-box - npm Package Compare versions

Comparing version 0.4.2 to 1.0.0

lib/index.js

@@ -103,3 +103,4 @@ 'use strict';
       if (!isActive) return;
-      if (direction.indexOf('x') !== -1) {
+
+      if (/right/i.test(direction)) {
         newWidth = original.width + clientX - original.x;
@@ -111,9 +112,23 @@ var min = minWidth < 0 || typeof minWidth === 'undefined' ? 0 : minWidth;
       }
-      if (direction.indexOf('y') !== -1) {
+      if (/left/i.test(direction)) {
+        newWidth = original.width - clientX + original.x;
+        var _min = minWidth < 0 || typeof minWidth === 'undefined' ? 0 : minWidth;
+        var _max = maxWidth < 0 || typeof maxWidth === 'undefined' ? newWidth : maxWidth;
+        newWidth = clamp(newWidth, _min, _max);
+        this.setState({ width: newWidth });
+      }
+      if (/bottom/i.test(direction)) {
         newHeight = original.height + clientY - original.y;
-        var _min = minHeight < 0 || typeof minHeight === 'undefined' ? 0 : minHeight;
-        var _max = maxHeight < 0 || typeof maxHeight === 'undefined' ? newHeight : maxHeight;
-        newHeight = clamp(newHeight, _min, _max);
+        var _min2 = minHeight < 0 || typeof minHeight === 'undefined' ? 0 : minHeight;
+        var _max2 = maxHeight < 0 || typeof maxHeight === 'undefined' ? newHeight : maxHeight;
+        newHeight = clamp(newHeight, _min2, _max2);
         this.setState({ height: newHeight });
       }
+      if (/top/i.test(direction)) {
+        newHeight = original.height - clientY + original.y;
+        var _min3 = minHeight < 0 || typeof minHeight === 'undefined' ? 0 : minHeight;
+        var _max3 = maxHeight < 0 || typeof maxHeight === 'undefined' ? newHeight : maxHeight;
+        newHeight = clamp(newHeight, _min3, _max3);
+        this.setState({ height: newHeight });
+      }
       var resizable = this.refs.resizable;
@@ -167,5 +182,2 @@ this.props.onResize(direction, {
     value: function getBoxSize() {
-      if (typeof window.getComputedStyle === 'undefined') {
-        throw new Error('This browser not support window.getComputedStyle');
-      }
       var style = window.getComputedStyle(this.refs.resizable, null);
@@ -199,18 +211,35 @@ var width = ~ ~style.getPropertyValue('width').replace('px', '');
   }, {
-    key: 'render',
-    value: function render() {
-      var style = this.getBoxStyle();
+    key: 'renderResizer',
+    value: function renderResizer() {
+      var _this3 = this;
+
       var _props2 = this.props;
       var isResizable = _props2.isResizable;
-      var onClick = _props2.onClick;
-      var customStyle = _props2.customStyle;
       var handleStyle = _props2.handleStyle;
-      var customClass = _props2.customClass;
-      var onMouseDown = _props2.onMouseDown;
-      var onDoubleClick = _props2.onDoubleClick;
-      var onTouchStart = _props2.onTouchStart;
 
-      var onResizeStartX = this.onResizeStart.bind(this, 'x');
-      var onResizeStartY = this.onResizeStart.bind(this, 'y');
-      var onResizeStartXY = this.onResizeStart.bind(this, 'xy');
+      return Object.keys(isResizable).map(function (dir) {
+        var onResizeStart = _this3.onResizeStart.bind(_this3, dir);
+        if (isResizable[dir] !== false) {
+          return _react2.default.createElement(_resizer2.default, {
+            key: dir,
+            type: dir,
+            onResizeStart: onResizeStart,
+            replaceStyles: handleStyle[dir]
+          });
+        }
+        return null;
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var style = this.getBoxStyle();
+      var _props3 = this.props;
+      var onClick = _props3.onClick;
+      var customStyle = _props3.customStyle;
+      var customClass = _props3.customClass;
+      var onMouseDown = _props3.onMouseDown;
+      var onDoubleClick = _props3.onDoubleClick;
+      var onTouchStart = _props3.onTouchStart;
+
       return _react2.default.createElement(
@@ -228,5 +257,3 @@ 'div',
         this.props.children,
-        isResizable.x !== false ? _react2.default.createElement(_resizer2.default, { type: 'x', onResizeStart: onResizeStartX, replaceStyles: handleStyle.x }) : null,
-        isResizable.y !== false ? _react2.default.createElement(_resizer2.default, { type: 'y', onResizeStart: onResizeStartY, replaceStyles: handleStyle.y }) : null,
-        isResizable.xy !== false ? _react2.default.createElement(_resizer2.default, { type: 'xy', onResizeStart: onResizeStartXY, replaceStyles: handleStyle.xy }) : null
+        this.renderResizer()
       );
@@ -250,10 +277,20 @@ }
   handleStyle: _react.PropTypes.shape({
-    x: _react.PropTypes.object,
-    y: _react.PropTypes.object,
-    xy: _react.PropTypes.object
+    top: _react.PropTypes.object,
+    right: _react.PropTypes.object,
+    bottom: _react.PropTypes.object,
+    left: _react.PropTypes.object,
+    topRight: _react.PropTypes.object,
+    bottomRight: _react.PropTypes.object,
+    bottomLeft: _react.PropTypes.object,
+    topLeft: _react.PropTypes.object
   }),
   isResizable: _react.PropTypes.shape({
-    x: _react.PropTypes.bool,
-    y: _react.PropTypes.bool,
-    xy: _react.PropTypes.bool
+    top: _react.PropTypes.bool,
+    right: _react.PropTypes.bool,
+    bottom: _react.PropTypes.bool,
+    left: _react.PropTypes.bool,
+    topRight: _react.PropTypes.bool,
+    bottomRight: _react.PropTypes.bool,
+    bottomLeft: _react.PropTypes.bool,
+    topLeft: _react.PropTypes.bool
   }),
@@ -278,3 +315,6 @@ customClass: _react.PropTypes.string,
   },
-  isResizable: { x: true, y: true, xy: true },
+  isResizable: {
+    top: true, right: true, bottom: true, left: true,
+    topRight: true, bottomRight: true, bottomLeft: true, topLeft: true
+  },
   customStyle: {},
@@ -281,0 +321,0 @@ handleStyle: {}

lib/resizer.js

@@ -27,10 +27,17 @@ 'use strict';
   },
-  x: {
+  top: {
+    width: '100%',
+    height: '10px',
+    top: '-5px',
+    left: 0,
+    cursor: 'row-resize'
+  },
+  right: {
     width: '10px',
     height: '100%',
-    top: '0',
+    top: '0px',
     right: '-5px',
     cursor: 'col-resize'
   },
-  y: {
+  bottom: {
     width: '100%',
@@ -42,3 +49,10 @@ height: '10px',
   },
-  xy: {
+  left: {
+    width: '10px',
+    height: '100%',
+    top: '0px',
+    left: '-5px',
+    cursor: 'col-resize'
+  },
+  topRight: {
     width: '20px',
@@ -48,4 +62,28 @@ height: '20px',
     right: '-10px',
+    top: '-10px',
+    cursor: 'sw-resize'
+  },
+  bottomRight: {
+    width: '20px',
+    height: '20px',
+    position: 'absolute',
+    right: '-10px',
     bottom: '-10px',
     cursor: 'nw-resize'
+  },
+  bottomLeft: {
+    width: '20px',
+    height: '20px',
+    position: 'absolute',
+    left: '-10px',
+    bottom: '-10px',
+    cursor: 'ne-resize'
+  },
+  topLeft: {
+    width: '20px',
+    height: '20px',
+    position: 'absolute',
+    left: '-10px',
+    top: '-10px',
+    cursor: 'se-resize'
   }
@@ -91,5 +129,5 @@ };
   onResizeStart: _react.PropTypes.func,
-  type: _react.PropTypes.oneOf(['x', 'y', 'xy']).isRequired,
+  type: _react.PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft']).isRequired,
   replaceStyles: _react.PropTypes.object
 };
 exports.default = Resizer;

package.json

 {
   "name": "react-resizable-box",
-  "version": "0.4.2",
+  "version": "1.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -57,2 +57,3 @@ # react-resizable-box
 
+
 The `width` property is used to set the width of a resizable component.   
@@ -62,4 +63,6 @@ For example, you can set `300`, `'300px'`, `50%`.
 
+
 #### `height`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 
+
 The `height` property is used to set the width of a resizable component.    
@@ -69,67 +72,93 @@ For example, you can set `300`, `'300px'`, `50%`.
 
+
 #### `minWidth`: PropTypes.number
 
+
 The `minWidth` property is used to set the minimum width of a resizable component.
 
+
 #### `minHeight`: PropTypes.number
 
+
 The `minHeight` property is used to set the minimum height of a resizable component.
 
+
 #### `maxWidth`: PropTypes.number
 
+
 The `maxWidth` property is used to set the maximum width of a resizable component.
 
+
 #### `maxHeight`: PropTypes.number
 
+
 The `maxheight` property is used to set the maximum height of a resizable component.
 
+
 #### `customClass`: PropTypes.string
 
+
 The `customClass` property is used to set the custom `className` of a resizable component.
 
+
 #### customStyle: Proptypes.object
 
+
 The `customStyle` property is used to set the custom `classStyle` of a resizable component.
 
-#### handleStyle: PropTypes.shape({ x: PropTypes.object, y: PropTypes.object, xy: PropTypes.object })
 
+#### 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 `x` it will completely replace the styles for the X resize handle,
-but the `y` and `xy` handle will still use the default styles.
+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({ x: PropTypes.bool, y: PropTypes.bool, xy: PropTypes.bool })
 
+#### `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 `x`, `y`, `xy` direction resizing.
-If omitted, `x`, `y`, `xy` direction resizing is enabled.
-If you want to permit only x direction resizing, set `{ x:true, y:false, xy:false }`. 
+The permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.
+If omitted, all resizer are enabled.
+If you want to permit only right direction resizing, set `{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }`. 
 
+
 #### `onClick`: PropTypes.func
 
+
 Calls when resizable component clicked.
 
+
 #### `onTouchStart`: PropTypes.func
 
+
 Calls when resizable component touched.
 
+
 #### `onDoubleClick`: PropTypes.func
 
+
 Calls when resizable component double clicked.
 
+
 #### `onResizeStart`: PropTypes.func
 
+
 Calls when resizable component resize starts.
 Calls back with (`direction: string`, `event: object`)
 
-- direction: `x` or `y` or `xy`
+- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
 - event: `mouse down event`
 
+
 #### `onResize`: PropTypes.func
 
+
 Calls when resizable component resize.
 Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`)
 
-- direction: `x` or `y` or `xy`
+- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
 - getComputedStyleSize: `{ width, height }`
@@ -140,9 +169,11 @@ - this argument is {width, height} of getComputedStyle.
   
-For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'x', this callback is called with `('x', { width: 100, height: 200 }, { width: 140, height: 240 })`
+For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'right', this callback is called with `('right', { width: 100, height: 200 }, { width: 140, height: 240 })`
 
+
 #### `onResizeStop`: PropTypes.func
 
+
 Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`)
 
-- direction: `x` or `y` or `xy`
+- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
 - getComputedStyleSize: `{ width, height }`
@@ -153,4 +184,5 @@ - this argument is {width, height} of getComputedStyle.
   
-For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'x', this callback is called with `('x', { width: 100, height: 200 }, { width: 140, height: 240 })`
+For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'right', this callback is called with `('right', { width: 100, height: 200 }, { width: 140, height: 240 })`
 
+
 ## Test
@@ -164,2 +196,11 @@
 
+#### v1.0.0
+
+- Rename and add resizer.
+
+#### v0.4.2
+
+- Support react v15
+- ESLint run when push  
+
 #### v0.4.1
@@ -166,0 +207,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

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

Total package byte prevSize

25725

increased by10.95%

Lines of code

402

increased by22.94%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

219

increased by23.03%

No dependency changes