Merge branch 'master' into gh-pages

Author: STRML

.babelrc

@@ -1,7 +1,10 @@
 {
   "presets": [
-    "es2015-loose",
+    ["es2015", {loose: true}],
     "stage-1",
     "react"
+  ],
+  "plugins": [
+    "transform-flow-comments"
   ]
 }

.eslintrc

@@ -30,6 +30,7 @@
   "globals": {
     // For Flow
     "ReactElement",
-    "ReactClass"
+    "ReactClass",
+    "SyntheticEvent"
   }
 }

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,23 @@
+### 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
+http://www.webpackbin.com/41YFBvekG.
+Paste a link here to your working reproduction.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,6 @@
+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.

CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+### 1.6.0 (Jan 23, 2017)
+
+- Feature: Allow restricting by axis. (#40, thanks @dnissley-al)
+
+### 1.5.0 (Jan 23, 2017)
+
+- Bugfix: Persist SyntheticEvents when needed (#45, #46)
+- Feature: Add componentWillReceiveProps to `<ResizableBox>` (#44, thanks @JoaoMosmann)
+
+### 1.4.6 (Dec 30, 2016)
+
+- Removed unused ref from `<Resizable>`.
+- Added development lockfile.
+
+### 1.4.5 (Sep 30, 2016)
+
+- Fix bad publish
+
+### 1.4.4 (Sep 30, 2016)
+
+- Bugfix: Minor flow errors
+
+### 1.4.3 (Sep 27, 2016)
+
+- Bugfix: Don't pass `onResize` in `<ResizableBox>`.
+- Bugfix: Fix new Flow errors (type parameters no longer optional).
+
+### 1.4.2 (July 1, 2016)
+
+- Bugfix: Don't pass unknown props to underlying DOM element. Fixes React 15.2.0 warnings.
+
+### 1.4.1 (May 23, 2016)
+
+- Bugfix: Resizable handle should have a `key` when injected. Fixes React warnings on custom components.
+
+### 1.4.0 (May 20, 2016)
+
+- Update to React-Draggable v2, which changed callback data structure.
+
+### 1.3.4 (May 17, 2016)
+
+- Bugfix: Slack was not being reset on resizeStop. Fixes #34, #36.
+- Added `flow-bin` to devDeps.
+
+### 1.3.3 (Apr 19, 2016)
+
+- Enhancement: Add Flow comments.
+
 ### 1.3.2 (Apr 8, 2016)
 
 - Bugfix: Prevent `width` and `height` from leaking to the underlying DOM element and being written.

README.md

@@ -12,18 +12,26 @@ See the example and associated code in [TestLayout](/test/TestLayout.jsx) and
 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.
 
-You can pass options directly to the underlying `Draggable` instance by using the prop `draggableOpts`.
+You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.
 See the [demo](/test/TestLayout.jsx) for more on this.
 
+### Installation
+
+Using [npm](https://www.npmjs.com/):
+
+    $ npm install --save react-resizable
 
 ### Usage
 
-```javascript
-var Resizable = require('react-resizable').Resizable; // or,
-var ResizableBox = require('react-resizable').ResizableBox;
+```js
+const Resizable = require('react-resizable').Resizable; // or,
+const ResizableBox = require('react-resizable').ResizableBox;
+
+// ES6
+import { Resizable, ResizableBox } from 'react-resizable';
 
-...
-render: function() {
+// ...
+render() {
   return (
     <ResizableBox width={200} height={200} draggableOpts={{...}}
         minConstraints={[100, 100]} maxConstraints={[300, 300]}>
@@ -33,37 +41,24 @@ render: function() {
 }
 ```
 
-### `<Resizable>` Options
+### Props
 
-```js
-{
-// Functions
-onResizeStop: React.PropTypes.func,
-onResizeStart: React.PropTypes.func,
-onResize: React.PropTypes.func,
-
-width: React.PropTypes.number.isRequired,
-height: React.PropTypes.number.isRequired,
-// If you change this, be sure to update your css
-handleSize: React.PropTypes.array,
-// These will be passed wholesale to react-draggable
-draggableOpts: React.PropTypes.object
-}
-```
-
-### `<ResizableBox>` Options
+These props apply to both `<Resizable>` and `<ResizableBox>`.
 
 ```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
-}
-```
+  children: React.Element<any>,
+  width: number,
+  height: number,
+  // If you change this, be sure to update your css
+  handleSize: [number, number] = [10, 10],
+  lockAspectRatio: boolean = false,
+  axis: 'both' | 'x' | 'y' | 'none' = 'both',
+  minConstraints: [number, number] = [10, 10],
+  maxConstraints: [number, number] = [Infinity, Infinity],
+  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
+  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
+  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
+  draggableOpts?: ?Object
+};
 ```

build.sh

@@ -1,5 +1,12 @@
-#!/bin/bash
+#!/bin/bash -ex
 rm -rf ./build
+
+# Simple babel run
 ./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' {} \;
+
+# Gen flow configs
+# When https://github.com/facebook/flow/issues/2830 et al are fixed we can use this, but not until then
+# find ./lib -type f -name '*.js' -exec sh -c "$BIN/flow gen-flow-files \$0 --out-dir build" {} \;
+
+# Copy original source as js.flow; flow will pick them up
+find ./lib -type f -name '*.js' -exec sh -c 'cp $0 build/$(basename $0).flow' {} \;

examples/1.html

@@ -8,8 +8,14 @@
       #content {
         width: 100%;
         background: #eee;
+        padding-bottom: 200px;
+      }
+      .layoutRoot {
+        display: flex;
+        flex-wrap: wrap;
       }
       .box {
+        display: inline-block;
         background: #ccc;
         border: 1px solid black;
         text-align: center;
@@ -18,6 +24,7 @@
         margin-bottom: 10px;
         overflow: hidden;
         position: relative;
+        margin: 20px;
       }
       .box .text {
         text-align: center;