Dependency updates, including <Draggable> v1.

STRML · STRML · commit 0482f21ee931 · 2015-11-08T21:14:21.000-06:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,30 @@
+{
+  "root": true,
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "extends": "eslint:recommended",
+  "rules": {
+    "strict": 0,
+    "quotes": [0, "single"],
+    "curly": [1, "multi-line"],
+    "camelcase": 0,
+    "comma-dangle": 0,
+    "dot-notation": 0,
+    "no-console": 0,
+    "no-use-before-define": [1, "nofunc"],
+    "no-underscore-dangle": 0,
+    "no-unused-vars": 0,
+    "new-cap": 0,
+    "react/jsx-uses-vars": 1,
+    "semi": [1, "always"]
+  },
+  env: {
+    "browser": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "jsx": true
+  }
+}
diff --git a/.jshintignore b/.jshintignore
diff --git a/.jshintrc b/.jshintrc
diff --git a/README.md b/README.md
@@ -30,9 +30,11 @@ render: function() {
     </ResizableBox>
   );
 }
+```
 
+### <Resizable> Options
 
-### Options
+```js
 {
 // Functions
 onResizeStop: React.PropTypes.func,
@@ -47,3 +49,20 @@ handleSize: React.PropTypes.array,
 draggableOpts: React.PropTypes.object
 }
 ```
+
+### <ResizableBox> Options
+
+```js
+{
+lockAspectRatio: React.PropTypes.bool, // Preserves aspect
+
+// Constaints coords, pass [x,y]
+minConstraints: React.PropTypes.arrayOf(React.PropTypes.number),
+maxConstraints: React.PropTypes.arrayOf(React.PropTypes.number),
+
+// Initial width/height - otherwise use CSS
+height: React.PropTypes.number,
+width: React.PropTypes.number
+}
+```
+```
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,7 @@
+Blocking issues to release with react-draggable v1
+
+- [x] Basic Resizable functionality
+- [x] Basic ResizableBox functionality
+- [ ] Grid Snapping
+- [ ] Min/Max Constraints
+- [x] Aspect Ratios
diff --git a/build.sh b/build.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
 rm -rf ./build
-./node_modules/.bin/babel --stage 0 --out-dir ./build ./lib
+./node_modules/.bin/babel --out-dir ./build ./lib
 # More cross-platform compatible than `rename`
 find ./build -type f -name '*.jsx' -exec sh -c 'mv -f $0 ${0%.jsx}.js' {} \;
diff --git a/css/styles.css b/css/styles.css
@@ -1,7 +1,7 @@
 .react-resizable {
   position: relative;
 }
-.react-resizable-handle.react-draggable {
+.react-resizable-handle {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -14,11 +14,4 @@
   background-origin: content-box;
   box-sizing: border-box;
   cursor: se-resize;
-  /* Since this handle is absolutely positioned, we don't want the
-     draggable transforms to actually move it */
-  transform: none !important;
-  -webkit-transform: none !important;
-  -ms-transform: none !important;
-  -o-transform: none !important;
-  -moz-transform: none !important;
 }
diff --git a/examples/1.html b/examples/1.html
@@ -36,12 +36,12 @@
         display: block;
       }
     </style>
-    <script src="http://localhost:4002/bundle.js"></script>
+    <script src="/bundle.js"></script>
     <title>React-Resizable</title>
   </head>
   <body>
     <h3>React-Resizable Demo</h3>
-    <p>React-resizable is a simple component that you wrap your existing components inside. It 
+    <p>React-resizable is a simple component that you wrap your existing components inside. It
     gives those components resize handles.
     </p>
     <p><a href="https://github.com/STRML/react-resizable">View project on GitHub</a></p>
diff --git a/lib/Resizable.jsx b/lib/Resizable.jsx
@@ -1,13 +1,11 @@
 'use strict';
 var React = require('react');
-var Draggable = require('react-draggable');
-var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
+var DraggableCore = require('react-draggable').DraggableCore;
 var assign = require('object-assign');
 var cloneElement = require('./cloneElement');
 
 var Resizable = module.exports = React.createClass({
   displayName: 'Resizable',
-  mixins: [PureRenderMixin],
 
   propTypes: {
     // Require that one and only one child be present.
@@ -31,22 +29,21 @@ var Resizable = module.exports = React.createClass({
     };
   },
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       bounds: this.constraintsToBounds(),
-      initialWidth: this.props.width,
-      initialHeight: this.props.height
+      width: this.props.width,
+      height: this.props.height
     };
   },
 
-  componentWillReceiveProps: function(props) {
+  componentWillReceiveProps(props: Object) {
     if (!this.state.resizing) {
       this.setState({
-        initialWidth: props.width,
-        initialHeight: props.height,
+        width: props.width,
+        height: props.height,
         bounds: this.constraintsToBounds()
       });
-      this.refs.draggable.resetState();
     }
   },
 
@@ -62,22 +59,25 @@ var Resizable = module.exports = React.createClass({
     };
   },
 
-
   /**
    * Wrapper around drag events to provide more useful data.
    *
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler(handlerName) {
+  resizeHandler(handlerName: string) {
     var me = this;
     return function(e, {node, position}) {
-      me.props[handlerName] && me.props[handlerName](e, {node, size: calcWH(me.state, position)});
+      let width = me.state.width + position.deltaX, height = me.state.height + position.deltaY;
+      console.log(position);
+      me.props[handlerName] && me.props[handlerName](e, {node, size: {width, height}});
 
       if (handlerName === 'onResizeStart') {
         me.setState({resizing: true});
       } else if (handlerName === 'onResizeStop') {
         me.setState({resizing: false});
+      } else {
+        me.setState({width, height});
       }
     };
   },
@@ -92,7 +92,7 @@ var Resizable = module.exports = React.createClass({
     return cloneElement(p.children, assign({}, p, {
       children: [
         p.children.props.children,
-        <Draggable
+        <DraggableCore
           {...p.draggableOpts}
           ref="draggable"
           onStop={this.resizeHandler('onResizeStop')}
@@ -101,18 +101,8 @@ var Resizable = module.exports = React.createClass({
           bounds={this.state.bounds}
           >
           <span className="react-resizable-handle" />
-        </Draggable>
+        </DraggableCore>
       ]
     }));
   }
 });
-
-/**
- * Parse left and top coordinates.
- * @param  {Number} options.left Left coordinate.
- * @param  {Number} options.top  Top coordinate.
- * @return {Object}              Coordinates
- */
-function calcWH({initialWidth, initialHeight}, {left, top}) {
-  return {width: initialWidth + left, height: initialHeight + top};
-}
diff --git a/lib/ResizableBox.jsx b/lib/ResizableBox.jsx
@@ -1,15 +1,18 @@
 'use strict';
 var React = require('react');
+var PropTypes = React.PropTypes;
 var Resizable = require('./Resizable');
-var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
 
 // An example use of Resizable.
 var ResizableBox = module.exports = React.createClass({
   displayName: 'ResizableBox',
-  mixins: [PureRenderMixin],
 
   propTypes: {
-    lockAspectRatio: React.PropTypes.bool
+    lockAspectRatio: PropTypes.bool,
+    minConstraints: PropTypes.arrayOf(PropTypes.number),
+    maxConstraints: PropTypes.arrayOf(PropTypes.number),
+    height: PropTypes.number,
+    width: PropTypes.number
   },
 
   getDefaultProps() {
@@ -44,7 +47,7 @@ var ResizableBox = module.exports = React.createClass({
   },
 
   // If you do this, be careful of constraints
-  preserveAspectRatio(width, height) {
+  preserveAspectRatio(width: number, height: number) {
     var [min, max] = [this.props.minConstraints, this.props.maxConstraints];
 
     height = width / this.state.aspectRatio;
diff --git a/lib/cloneElement.js b/lib/cloneElement.js
@@ -3,12 +3,13 @@
 var assign = require('object-assign');
 var React = require('react');
 
-module.exports = function cloneElement(element, props) {
+// React.addons.cloneWithProps look-alike that merges style & className.
+module.exports = function cloneElement(element: React.Component, props: Object) {
   if (props.style && element.props.style) {
     props.style = assign({}, element.props.style, props.style);
   }
   if (props.className && element.props.className) {
-    props.className  = element.props.className + ' ' + props.className;
+    props.className = element.props.className + ' ' + props.className;
   }
   return React.cloneElement(element, props);
-}
+};
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "build": "bash build.sh",
     "build-example": "webpack",
     "dev": "echo 'Open http://localhost:4002/examples/1.html'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "validate": "npm ls"
   },
   "repository": {
     "type": "git",
@@ -27,28 +28,32 @@
   },
   "homepage": "https://github.com/STRML/react-resizable",
   "devDependencies": {
-    "babel": "^5.0.1",
-    "babel-core": "^5.0.1",
-    "babel-loader": "^5.0.0",
-    "css-loader": "^0.9.1",
-    "jshint": "^2.6.3",
-    "lodash": "^3.6.0",
-    "pre-commit": "^1.0.6",
-    "precommit-hook": "^2.0.1",
-    "react": "^0.13.1",
-    "react-hot-loader": "^1.2.4",
-    "style-loader": "^0.9.0",
-    "webpack": "^1.7.3",
-    "webpack-dev-server": "^1.8.0"
+    "babel": "^5.8.29",
+    "babel-core": "^5.8.29",
+    "babel-eslint": "^4.1.3",
+    "babel-loader": "^5.3.2",
+    "babel-plugin-typecheck": "^1.3.0",
+    "css-loader": "^0.21.0",
+    "eslint": "^1.7.3",
+    "eslint-plugin-react": "^3.6.3",
+    "lodash": "^3.10.1",
+    "pre-commit": "^1.1.2",
+    "react": "^0.14.0",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.1"
   },
   "dependencies": {
-    "object-assign": "^2.0.0",
-    "react-draggable": "^0.8.1"
+    "object-assign": "^4.0.1",
+    "react-draggable": "^1.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "precommit": [
-    "lint"
+  "pre-commit": [
+    "lint",
+    "validate",
+    "test"
   ]
 }
diff --git a/test/TestLayout.jsx b/test/TestLayout.jsx
@@ -1,7 +1,5 @@
 'use strict';
-var React = require('react/addons');
-typeof window !== "undefined" && (window.React = React); // for devtools
-typeof window !== "undefined" && (window.Perf = React.addons.Perf); // for devtools
+var React = require('react');
 var _ = require('lodash');
 var ResizableBox = require('../lib/ResizableBox.jsx');
 var Resizable = require('../lib/Resizable.jsx');
@@ -15,7 +13,7 @@ var TestLayout = module.exports = React.createClass({
   },
 
   onClick() {
-    this.setState({width: 200, height: 200})
+    this.setState({width: 200, height: 200});
   },
 
   onResize(event, {element, size}) {
diff --git a/test/test.js b/test/test.js
@@ -1,7 +1,8 @@
 'use strict';
 var Layout = require('./TestLayout.jsx');
 var React = require('react');
-document.addEventListener("DOMContentLoaded", function(event) { 
+var ReactDOM = require('react-dom');
+document.addEventListener("DOMContentLoaded", function(event) {
   var contentDiv = document.getElementById('content');
-  React.render(React.createElement(Layout), contentDiv);
+  ReactDOM.render(React.createElement(Layout), contentDiv);
 });
