Merge pull request #1 from STRML/master

Merge master

.babelrc

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

.eslintrc

@@ -31,7 +31,7 @@
     "react/jsx-no-undef": 2, // warn when using undefined components (why is this not default?)
     "react/jsx-uses-react": 1, // marks `React` as consumed by any jsx el (squelched unused)
     "react/jsx-uses-vars": 1, // marks any vars in jsx as used
-    "react/wrap-multilines": 1, // require parens around multiline jsx
+    "react/jsx-wrap-multilines": 1, // require parens around multiline jsx
     "semi": [1, "always"]
   },
   env: {
@@ -45,6 +45,7 @@
   "globals": {
     // For Flow
     "ReactElement",
-    "ReactClass"
+    "ReactClass",
+    "$PropertyType"
   }
 }

.flowconfig

@@ -9,6 +9,7 @@
 index.js
 
 [libs]
+interfaces/
 
 [options]
 suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowFixMe.*

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,10 @@
+Thanks for submitting an issue to RGL!
+
+Please mark the type of this issue:
+
+- [ ] Bug
+- [ ] Feature Request
+- [ ] Question
+
+If you have a question or bug report, please use the [WebpackBin Template](http://www.webpackbin.com/EJF48h_rz)
+to demonstrate. It is much easier for us to help you if you do.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,6 @@
+Thanks for submitting a pull request to RGL!
+
+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.

.npmignore

@@ -2,3 +2,12 @@ lib/
 test/
 examples/
 dist/
+yarn.lock
+.github
+*.config.js
+Makefile
+*.sh
+*.*.json
+__tests__/
+index-dev.js
+index.html

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - "6"
+  - "7"
+script:
+  - make build test
+cache: yarn
+

CHANGELOG.md

@@ -1,5 +1,117 @@
 # Changelog
 
+0.14.1 (Feb 20, 2017)
+----
+
+#### Fixes:
+
+- Fixed a minor Flow type issue when a `classnames` typedef is present.
+- Fixed a scoping issue when running `make build-example`.
+
+0.14.0 (Feb 13, 2017)
+-----
+
+#### Features:
+
+- New test suite - thanks @nikolas
+- Dev Dependency updates
+- Committed yarn.lock
+- Added `react-draggable` classname to draggable grid items.
+
+0.13.9 (Oct 13, 2016)
+-----
+
+#### Fixes:
+
+- Fixed sorting of layout items, which could be different in IE if two items have the same x & y coordinate.
+  - See [#369](https://github.com/STRML/react-grid-layout/issues/369).
+
+0.13.8 (Oct 13, 2016)
+-----
+
+#### Fixes:
+
+- Fixed breakage introduced in `0.13.7` when items are added without a layout or `data-grid` property.
+  - See [#368](https://github.com/STRML/react-grid-layout/issues/368).
+
+0.13.7 (Oct 3, 2016)
+-----
+
+#### Fixes:
+
+- Fixed an error during layout sync if children was a keyed fragment or had nested arrays.
+- Fixed `onLayoutChange` being called when layout didn't change.
+- Fixed some issues with input layout items being modified in-place rather than cloned.
+- Minor typos.
+
+0.13.6 (Sep 26, 2016)
+-----
+
+#### Fixes:
+
+- Fixed missing HTMLElement in `onResize*` callbacks.
+
+0.13.5 (Sep 9, 2016)
+-----
+
+#### Fixes:
+
+- Fixed a few Flow typing errors in `WidthProvider`.
+
+0.13.4 (Sep 9, 2016)
+-----
+
+#### Fixes:
+
+- Fixed potential call to `ReactDOM.findDOMNode(this)` after unmount of `WidthProvider`.
+- Fixed an issue where layout items using `data-grid` could rearrange on mount depending on how they were ordered.
+  - See [#342](https://github.com/STRML/react-grid-layout/pull/342) for reference.
+
+0.13.3 (Aug 31, 2016)
+-----
+
+#### Fixes:
+
+- Fixed `lodash.isequal` import, which was ruined by case-insensitive HFS+ *shakes fist*
+
+0.13.2 (Aug 31, 2016)
+-----
+
+#### Fixes:
+
+- Diffing children in order to regenerate the layout now diffs the `key` props and their order.
+  - This will catch more changes, such as sorting, addition, and removal.
+- Only pass `className` and `style` to WidthProvider. Other props were not intended to be supported.
+  - I'm aware this could be a breaking change if you were relying on this bad behavior. If so, please
+    use your own `WidthProvider`-style HOC.
+- `babel-plugin-transform-flow-comments` had limited support for defining types like transpiled classes.
+  - This has been updated to instead copy source to `.js.flow` files, which preserves all type information.
+
+0.13.1 (Aug 16, 2016)
+-----
+
+#### Fixes:
+
+- Fix remaining `propTypes` warnings.
+
+0.13.0 (Aug 3, 2016)
+-----
+
+#### Changed:
+
+- Due to a change in React 15.2, passing the `_grid` property on DOM children generates an error.
+  To compensate, we now error on the same and suggest using `data-grid` instead. Simply change any use of
+  `_grid` to `data-grid`, or add your properties to the layout.
+
+#### Fixes:
+
+- Fix React 15.3 warning re: propTypes.
+
+0.12.7 (Jun 29, 2016)
+-----
+
+- Prevent extraenous rerenders in `<ResponsiveReactGridLayout>` by using deep equality on layouts.
+
 0.12.6 (Jun 5, 2016)
 -----
 

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Samuel Reed
+Copyright (c) 2016 Samuel Reed
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

Makefile

@@ -12,11 +12,11 @@ MIN_MAP = $(DIST)/react-grid-layout.min.js.map
 .PHONY: test dev lint build clean install link
 
 
+build: clean build-js copy-flow $(MIN)
+
 clean:
 	rm -rf $(BUILD) $(DIST)
 
-build: clean build-js $(MIN)
-
 dev:
 	echo 'Open http://localhost:4002'
 	@$(BIN)/webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .
@@ -32,18 +32,32 @@ dist/%.min.js: $(LIB) $(BIN)
 # find/exec is more cross-platform compatible than `rename`
 build-js:
 	@$(BIN)/babel --stage 0 --out-dir $(BUILD) $(LIB)
-	find $(BUILD) -type f -name '*.jsx' -exec sh -c 'mv -f $0 ${0%.jsx}.js' {} \;
 
 build-example:
-	webpack --config webpack-examples.config.js
+	@$(BIN)/webpack --config webpack-examples.config.js
 	node ./examples/generate.js
 
+# Copy original source as `.js.flow` for use with flow
+copy-flow:
+	# Create tmpdir & copy
+	$(eval TMP := $(shell mktemp -d))
+	cp -R $(LIB)/ $(TMP)
+	# Rename extensions
+	find $(TMP) -type f -name '*.js*' -exec sh -c 'mv -f "$$0" "$${0%.*}.js.flow"' {} \;
+	# Copy into build
+	cp -R $(TMP)/ $(BUILD)
+	# Remove tmpdir
+	rm -rf $(TMP)
+
 # FIXME flow is usually global
 lint:
-	flow
+	./node_modules/.bin/flow
 	@$(BIN)/eslint --ext .js,.jsx $(LIB) $(TEST)
 	@$(BIN)/valiquire $(LIB)
 
+test:
+	@$(BIN)/jest
+
 release-patch: build
 	@$(call release,patch)
 

README.md

@@ -1,5 +1,6 @@
 # React-Grid-Layout
 
+[![travis build](https://travis-ci.org/STRML/react-grid-layout.svg?branch=master)](https://travis-ci.org/STRML/react-grid-layout)
 [![npm package](https://img.shields.io/npm/v/react-grid-layout.svg?style=flat-square)](https://www.npmjs.org/package/react-grid-layout)
 [![npm downloads](https://img.shields.io/npm/dt/react-grid-layout.svg?maxAge=2592000)]()
 
@@ -14,7 +15,7 @@ RGL is React-only and does not require jQuery.
 ![BitMEX UI](http://i.imgur.com/oo1NT6c.gif)
 > GIF from production usage on [BitMEX.com](https://www.bitmex.com)
 
-[**[Demo](https://strml.github.io/react-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md)**]
+[**[Demo](https://strml.github.io/react-grid-layout/examples/0-showcase.html) | [Changelog](/CHANGELOG.md) | [WebpackBin Editable demo](http://www.webpackbin.com/EJF48h_rz)**]
 
 ## Table of Contents
 
@@ -52,6 +53,8 @@ RGL is React-only and does not require jQuery.
 - [Metabase](http://www.metabase.com/)
 - [HubSpot](http://www.hubspot.com)
 - [ComNetViz](http://www.grotto-networking.com/ComNetViz/ComNetViz.html)
+- [Stoplight](https://app.stoplight.io)
+- [Reflect](https://reflect.io)
 
 *Know of others? Create a PR to let me know!*
 
@@ -99,7 +102,7 @@ Use ReactGridLayout like any other component. The following example below will
 produce a grid with three items where:
 
 - users will not be able to drag or resize item `a`
-- item `b` will restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks
+- item `b` will be restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks
 - users will be able to freely drag and resize item `c`
 
 ```javascript
@@ -133,9 +136,9 @@ var MyFirstGrid = React.createClass({
   render: function () {
     return (
       <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
-        <div key="a" _grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
-        <div key="b" _grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
-        <div key="c" _grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
+        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
+        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
+        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
       </ReactGridLayout>
     )
   }
@@ -176,7 +179,7 @@ If the largest is provided, RGL will attempt to interpolate the rest.
 You will also need to provide a `width`, when using `<ResponsiveReactGridLayout>` it is suggested you use the HOC
 `WidthProvider` as per the instructions below.
 
-For the time being, it is not possible to supply responsive mappings via the `_grid` property on individual
+For the time being, it is not possible to supply responsive mappings via the `data-grid` property on individual
 items, but that is coming soon.
 
 ### Providing Grid Width
@@ -234,9 +237,14 @@ autoSize: ?boolean = true,
 // Number of columns in this layout.
 cols: ?number = 12,
 
-// A selector that will not be draggable.
+// A CSS selector for tags that will not be draggable.
+// For example: draggableCancel:'.MyNonDraggableAreaClassName'
+// If you forget the leading . it will not work.
 draggableCancel: ?string = '',
-// A selector for the draggable handler
+
+// A CSS selector for tags that will act as the draggable handle.
+// For example: draggableHandle:'.MyDragHandleClassName'
+// If you forget the leading . it will not work.
 draggableHandle: ?string = '',
 
 // If true, the layout will compact vertically
@@ -248,11 +256,14 @@ verticalCompact: ?boolean = true,
 // If you choose to use custom keys, you can specify that key in the layout
 // array objects like so:
 // {i: string, x: number, y: number, w: number, h: number}
-layout: ?array = null, // If not provided, use _grid props on children
+layout: ?array = null, // If not provided, use data-grid props on children
 
 // Margin between items [x, y] in px.
 margin: ?[number, number] = [10, 10],
 
+// Padding inside the container [x, y] in px
+containerPadding: ?[number, number] = margin,
+
 // Rows have a static height, but you can change this based on breakpoints
 // if you like.
 rowHeight: ?number = 150,
@@ -324,14 +335,14 @@ onBreakpointChange: (newBreakpoint: string, newCols: number) => void,
 onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints]: Layout}) => void,
 
 // Callback when the width changes, so you can modify the layout as needed.
-onWidthChange: (containerWidth: number, margin: [number, number], cols: number) => void;
+onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void;
 
 ```
 
 ### Grid Item Props
 
 RGL supports the following properties on grid items or layout items. When initializing a grid,
-build a layout array (as in the first example above), or attach this object as the `_grid` property
+build a layout array (as in the first example above), or attach this object as the `data-grid` property
 to each of your child elements (as in the second example).
 
 Note that if a grid item is provided but incomplete (missing one of `x, y, w, or h`), an error
@@ -376,6 +387,9 @@ will be draggable.
 
 If you have a feature request, please add it as an issue or make a pull request.
 
+If you have a bug to report, please reproduce the bug in [WebpackBin](http://www.webpackbin.com/VymTE3zWG) to help
+us easily isolate it.
+
 ## TODO List
 
 - [x] Basic grid layout
@@ -385,7 +399,7 @@ If you have a feature request, please add it as an issue or make a pull request.
 - [x] Live grid packing while dragging
 - [x] Resizable grid items
 - [x] Layouts per responsive breakpoint
-- [x] Define grid attributes on children themselves (`_grid` key)
+- [x] Define grid attributes on children themselves (`data-grid` key)
 - [x] Static elements
 - [x] Persistent id per item for predictable localstorage restores, even when # items changes
 - [x] Min/max w/h per item