react-resizable - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/Resizable.jsx

@@ -30,36 +30,11 @@ 'use strict';
   minConstraints() {
-    return this.parseConstraints(this.props.minConstraints, this.props.handleSize[0]) || this.props.handleSize;
+    return parseConstraints(this.props.minConstraints, this.props.handleSize[0]) || this.props.handleSize;
   },
 
   maxConstraints() {
-    return this.parseConstraints(this.props.maxConstraints, this.props.handleSize[1]);
+    return parseConstraints(this.props.maxConstraints, this.props.handleSize[1]);
   },
 
-  /**
-   * Constraints must be subtracted by the size of the handle to work properly.
-   * This has a side-effect of effectively limiting the minimum size to the handleSize,
-   * which IMO is fine.
-   * @param  {Array} constraints Constraints array.
-   * @param  {Array} handleSize  Handle size array.
-   * @return {Array}             Transformed constraints.
-   */
-  parseConstraints(constraints, handleSize) {
-    if (!constraints) return;
-    return constraints.map(function(c) {
-      return c - handleSize;
-    });
-  },
 
   /**
-   * Given left and top coords of the handle, figure out the width and height of the box.
-   * @param  {Number} options.left Left coord.
-   * @param  {Number} options.top  Top coord.
-   * @return {Object}              Width & height (px).
-   */
-  calcWH({left, top}) {
-    var s = this.props.handleSize;
-    return {width: left + s[0], height: top + s[1]};
-  },
-
-  /**
    * Wrapper around drag events to provide more useful data.
@@ -73,18 +48,6 @@ *
     return function(e, {element, position}) {
-      this.props[handlerName] && this.props[handlerName](e, {element, size: this.calcWH(position)});
+      me.props[handlerName] && me.props[handlerName](e, {element, size: calcWH(position, me.props.handleSize)});
     };
   },
 
-  onResizeStart(e, {element, position}) {
-    this.props.onResizeStart && this.props.onResizeStart(e, {element, size: this.calcWH(position)});
-  },
-
-  onResize(e, {element, position}) {
-    this.props.onResize && this.props.onResize(e, {element, size: this.calcWH(position)});
-  },
-
-  onResizeStop(e, {element, position}) {
-    this.props.onResizeStop && this.props.onResizeStop(e, {element, size: this.calcWH(position)});
-  },
-
   render() {
@@ -98,4 +61,3 @@ var p = this.props;
     return React.addons.cloneWithProps(p.children, assign({}, p, {
-      // Array.isArray() check fixes react-hot-loader, doesn't seem to have other consequences
-      children: Array.isArray(p.children) ? p.children : [
+      children: [
         p.children.props.children,
@@ -105,9 +67,9 @@ <Draggable
           moveOnStartChange={true}
-          onStop={this.onResizeStop}
-          onStart={this.onResizeStart}
-          onDrag={this.onResize}
+          onStop={this.resizeHandler('onResizeStop')}
+          onStart={this.resizeHandler('onResizeStart')}
+          onDrag={this.resizeHandler('onResize')}
           minConstraints={this.minConstraints()}
           maxConstraints={this.maxConstraints()}
           >
-          <span className="react-resizable-handle">⌟</span>
+          <span className="react-resizable-handle" />
         </Draggable>
@@ -118,1 +80,27 @@ ]
 });
+
+/**
+ * Parse left and top coordinates; we have to add the handle size to get the full picture.
+ * @param  {Number} options.left Left coordinate.
+ * @param  {Number} options.top  Top coordinate.
+ * @param  {Array}  handleSize   Handle data.
+ * @return {Object}              Coordinates
+ */
+function calcWH({left, top}, handleSize) {
+  return {width: left + handleSize[0], height: top + handleSize[1]};
+}
+
+/**
+ * Constraints must be subtracted by the size of the handle to work properly.
+ * This has a side-effect of effectively limiting the minimum size to the handleSize,
+ * which IMO is fine.
+ * @param  {Array} constraints Constraints array.
+ * @param  {Array} handleSize  Handle size array.
+ * @return {Array}             Transformed constraints.
+ */
+function parseConstraints(constraints, handleSize) {
+  if (!constraints) return;
+  return constraints.map(function(c) {
+    return c - handleSize;
+  });
+}

package.json

 {
   "name": "react-resizable",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A component that is resizable with handles.",
@@ -8,3 +8,3 @@ "main": "index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "./node_modules/.bin/webpack",
+    "build": "webpack .",
     "dev-server": "echo 'Open http://localhost:4002/examples/1.html'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base ."
@@ -11,0 +11,0 @@ },

README.md

@@ -12,3 +12,6 @@ ### React-Resizable
 
+Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
+problems with handle placement and visibility.
 
+
 ### Usage
@@ -15,0 +18,0 @@

test/TestLayout.jsx

@@ -16,7 +16,10 @@ 'use strict';
         <ResizableBox className="box" width={200} height={200}>
-          Resizable box, starting at 200x200, no constraints
+          <span className="text">Resizable box, starting at 200x200, no constraints</span>
         </ResizableBox>
         <ResizableBox className="box" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
-          Resizable box, starting at 200x200. Min size is 150x150, max is 500x300.
+          <span className="text">Resizable box, starting at 200x200. Min size is 150x150, max is 500x300.</span>
         </ResizableBox>
+        <ResizableBox className="box box3" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
+          <span className="text">Resizable box with a handle that only appears on hover.</span>
+        </ResizableBox>
       </div>
@@ -23,0 +26,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

12215

14.78%

Number of lines in readme file

30

11.11%

Worsened metrics

Lines of code

239

-1.24%

No dependency changes