react-grid-layout - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

build/components/WidthProvider.js

@@ -25,4 +25,6 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // @noflow
+// Intentional; Flow can't handle the bind on L20
 
+
 /*
@@ -48,5 +50,3 @@ * A simple HOC that provides facility for listening to container resizes.
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
-        width: 1280,
-        offsetY: 0,
-        offsetX: 0
+        width: 1280
       }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -58,12 +58,11 @@ }
       value: function componentDidMount() {
-        var _this2 = this;
+        var node = _reactDom2.default.findDOMNode(this);
+        // Bind here so we have the same reference when removing the listener on unmount.
+        this.onWindowResize = this._onWindowResize.bind(this, node);
 
-        var node = _reactDom2.default.findDOMNode(this);
-        window.addEventListener('resize', function () {
-          return _this2.onWindowResize(node);
-        });
+        window.addEventListener('resize', this.onWindowResize);
         // This is intentional. Once to properly set the breakpoint and resize the elements,
         // and again to compensate for any scrollbar that appeared because of the first step.
-        this.onWindowResize(node);
-        this.onWindowResize(node);
+        this.onWindowResize();
+        this.onWindowResize();
       }
@@ -76,11 +75,5 @@ }, {
     }, {
-      key: 'onWindowResize',
-      value: function onWindowResize(node) {
-        var _node$getBoundingClie = node.getBoundingClientRect();
-
-        var top = _node$getBoundingClie.top;
-        var left = _node$getBoundingClie.left;
-        var width = _node$getBoundingClie.width;
-
-        this.setState({ offsetY: top, offsetX: left, width: width });
+      key: '_onWindowResize',
+      value: function _onWindowResize(node, _event) {
+        this.setState({ width: node.offsetWidth });
       }
@@ -87,0 +80,0 @@ }, {

build/GridItem.js

@@ -68,2 +68,3 @@ 'use strict';
     value: function calcPosition(x, y, w, h) {
+      var state = arguments.length <= 4 || arguments[4] === undefined ? {} : arguments[4];
       var _props = this.props;
@@ -75,19 +76,20 @@ var margin = _props.margin;
 
+      // E.g. if margin is 10 on each side and container is 600 wide, usable width is 580
 
-      var width = containerWidth - margin[0];
+      var rawWidth = containerWidth - (cols + 1) * margin[0]; // The space available for items (without margin)
       var out = {
-        left: Math.round(width * (x / cols) + margin[0]),
-        top: Math.round(rowHeight * y + margin[1]),
-        width: Math.round(width * (w / cols) - margin[0]),
-        height: Math.round(h * rowHeight - margin[1])
+        left: Math.round(rawWidth * (x / cols)) + (x + 1) * margin[0],
+        width: Math.round(rawWidth * (w / cols)) + (w - 1) * margin[0],
+        top: Math.round(rowHeight * y + (y + 1 * margin[1])),
+        height: Math.round(rowHeight * h + (h - 1 * margin[1]))
       };
 
-      if (this.state.resizing) {
-        out.width = this.state.resizing.width;
-        out.height = this.state.resizing.height;
+      if (state.resizing) {
+        out.width = state.resizing.width;
+        out.height = state.resizing.height;
       }
 
-      if (this.state.dragging) {
-        out.top = this.state.dragging.top;
-        out.left = this.state.dragging.left;
+      if (state.dragging) {
+        out.top = state.dragging.top;
+        out.left = state.dragging.left;
       }
@@ -390,3 +392,3 @@
 
-      var pos = this.calcPosition(x, y, w, h);
+      var pos = this.calcPosition(x, y, w, h, this.state);
       var child = _react2.default.Children.only(this.props.children);
@@ -393,0 +395,0 @@

build/ReactGridLayout.js

@@ -70,3 +70,3 @@ 'use strict';
       // Allow parent to set layout directly.
-      if (!(0, _lodash2.default)(nextProps.layout, this.state.layout)) {
+      if (!(0, _lodash2.default)(nextProps.layout, this.props.layout)) {
         this.setState({
@@ -76,4 +76,3 @@ layout: (0, _utils.synchronizeLayoutWithChildren)(nextProps.layout, nextProps.children, nextProps.cols, nextProps.verticalCompact)
         // Call back so we can store the layout
-        // Do it only when a resize/drag is not active, otherwise there are way too many callbacks
-        if (!this.state.activeDrag) this.props.onLayoutChange(this.state.layout);
+        this.props.onLayoutChange(this.state.layout);
       }
@@ -187,6 +186,8 @@ // If children change, regenerate the layout.
       this.setState({
+        activeDrag: null,
         layout: (0, _utils.compact)(layout, this.props.verticalCompact),
-        activeDrag: null,
         oldDragItem: null
       });
+
+      this.props.onLayoutChange(this.state.layout);
     }
@@ -246,7 +247,10 @@ }, {
 
+      // Set state
       this.setState({
+        activeDrag: null,
         layout: (0, _utils.compact)(layout, this.props.verticalCompact),
-        activeDrag: null,
         oldResizeItem: null
       });
+
+      this.props.onLayoutChange(this.state.layout);
     }
@@ -267,4 +271,2 @@
       var width = _props.width;
-      var offsetX = _props.offsetX;
-      var offsetY = _props.offsetY;
       var cols = _props.cols;
@@ -288,4 +290,2 @@ var margin = _props.margin;
           containerWidth: width,
-          offsetX: offsetX,
-          offsetY: offsetY,
           cols: cols,
@@ -315,4 +315,2 @@ margin: margin,
       var width = _props2.width;
-      var offsetX = _props2.offsetX;
-      var offsetY = _props2.offsetY;
       var cols = _props2.cols;
@@ -334,4 +332,2 @@ var margin = _props2.margin;
           containerWidth: width,
-          offsetX: offsetX,
-          offsetY: offsetY,
           cols: cols,
@@ -392,6 +388,8 @@ margin: margin,
   style: _react2.default.PropTypes.object,
-  width: _react2.default.PropTypes.number.isRequired,
-  offsetY: _react2.default.PropTypes.number.isRequired,
-  offsetX: _react2.default.PropTypes.number.isRequired,
 
+  // This can be set explicitly. If it is not set, it will automatically
+  // be set to the container width. Note that resizes will *not* cause this to adjust.
+  // If you need that behavior, use WidthProvider.
+  width: _react2.default.PropTypes.number,
+
   // If true, the container height swells and contracts to fit contents
@@ -411,3 +409,3 @@ autoSize: _react2.default.PropTypes.bool,
   // layout is an array of object with the format:
-  // {x: Number, y: Number, w: Number, h: Number, i: Number}
+  // {x: Number, y: Number, w: Number, h: Number, i: String}
   layout: function layout(props) {
@@ -437,4 +435,3 @@ var layout = props.layout;
 
-  // Callback so you can save the layout.
-  // Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
+  // Callback so you can save the layout. Calls after each drag & resize stops.
   onLayoutChange: _react2.default.PropTypes.func,
@@ -441,0 +438,0 @@

build/ResponsiveReactGridLayout.js

@@ -56,2 +56,6 @@ 'use strict';
 
+  // This should only include propTypes needed in this code; RGL itself
+  // will do validation of the rest props passed to it.
+
+
   _createClass(ResponsiveReactGridLayout, [{
@@ -114,3 +118,3 @@ key: 'generateInitialState',
     key: 'onWidthChange',
-    value: function onWidthChange(width, breakpoint) {
+    value: function onWidthChange(width, newBreakpoint) {
       var _props2 = this.props;
@@ -123,23 +127,28 @@ var breakpoints = _props2.breakpoints;
 
-      var colNo = (0, _responsiveUtils.getColsFromBreakpoint)(breakpoint, cols);
+      var lastBreakpoint = this.state.breakpoint;
 
-      // Store the current layout
-      var layouts = this.props.layouts;
-      layouts[breakpoint] = JSON.parse(JSON.stringify(this.state.layout));
+      // Breakpoint change
+      if (lastBreakpoint !== newBreakpoint) {
 
-      // Find or generate a new one.
-      var layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(layouts, breakpoints, breakpoint, breakpoint, colNo, verticalLayout);
+        // Store the current layout
+        var layouts = this.props.layouts;
+        layouts[lastBreakpoint] = JSON.parse(JSON.stringify(this.state.layout));
 
-      // This adds missing items.
-      layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, colNo, verticalCompact);
+        // Find or generate a new one.
+        var newCols = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
+        var _layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(layouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, verticalLayout);
 
-      // Store this new layout as well.
-      layouts[breakpoint] = layout;
+        // This adds missing items.
+        _layout = (0, _utils.synchronizeLayoutWithChildren)(_layout, this.props.children, newCols, verticalCompact);
 
-      // callbacks
-      this.props.onLayoutChange(layout, layouts);
-      this.props.onBreakpointChange(breakpoint, colNo);
-      this.props.onWidthChange(width, this.props.margin, colNo);
+        // Store this new layout as well.
+        layouts[newBreakpoint] = _layout;
 
-      this.setState({ breakpoint: breakpoint, layout: layout, cols: colNo });
+        // callbacks
+        this.props.onLayoutChange(_layout, layouts);
+        this.props.onBreakpointChange(newBreakpoint, newCols);
+        this.props.onWidthChange(width, this.props.margin, newCols);
+
+        this.setState({ breakpoint: newBreakpoint, layout: _layout, cols: newCols });
+      }
     }
@@ -179,2 +188,3 @@ }, {
 ResponsiveReactGridLayout.propTypes = {
+
   //
@@ -202,5 +212,6 @@ // Basic props
   },
+
+  // The width of this component.
+  // Required in this propTypes stanza because generateInitialState() will fail without it.
   width: _react2.default.PropTypes.number.isRequired,
-  offsetY: _react2.default.PropTypes.number.isRequired,
-  offsetX: _react2.default.PropTypes.number.isRequired,
 
@@ -207,0 +218,0 @@ //

build/utils.js

@@ -360,3 +360,3 @@ 'use strict';
       if (!isProduction) {
-        validateLayout([g], 'ReactGridLayout.child');
+        validateLayout([g], 'ReactGridLayout.children');
       }
@@ -396,10 +396,14 @@ // Validated; add it to the layout. Bottom 'y' possible is the bottom of the layout.
   for (var _i10 = 0, len = layout.length; _i10 < len; _i10++) {
+    var item = layout[_i10];
     for (var j = 0; j < subProps.length; j++) {
-      if (typeof layout[_i10][subProps[j]] !== 'number') {
-        throw new Error('ReactGridLayout: ' + contextName + '[' + _i10 + '].' + subProps[j] + ' must be a Number!');
+      if (typeof item[subProps[j]] !== 'number') {
+        throw new Error('ReactGridLayout: ' + contextName + '[' + _i10 + '].' + subProps[j] + ' must be a number!');
       }
     }
-    if (layout[_i10].static !== undefined && typeof layout[_i10].static !== 'boolean') {
-      throw new Error('ReactGridLayout: ' + contextName + '[' + _i10 + '].static must be a Boolean!');
+    if (item.i && typeof item.i !== 'string') {
+      throw new Error('ReactGridLayout: ' + contextName + '[' + _i10 + '].i must be a string!');
     }
+    if (item.static !== undefined && typeof item.static !== 'boolean') {
+      throw new Error('ReactGridLayout: ' + contextName + '[' + _i10 + '].static must be a boolean!');
+    }
   }
@@ -406,0 +410,0 @@ }

CHANGELOG.md

@@ -0,1 +1,14 @@
+0.10.2
+------
+
+- Bugfix: <RGL> would synchronize children with layout if the layout in props didn't match the state;
+  this was meant to be a hook for the developer to supply a new layout. The incorrect check could cause the
+  layout to reset if the parent rerendered. The check is now between the layout in nextProps and props.
+- Bugfix: Fixed a lot of resizing layout bugs; most of the fixes are in react-resizable.
+- Bugfix: Fixed incorrect typecheck on LayoutItem.i.
+- Bugfix: Make onLayoutChange fire appropriately (#155).
+- Bugfix: Fix `<ResponsiveGridLayout>` not properly reverting when sizing the page up (#154).
+- Remove unused `offsetX` and `offsetY` from layouts.
+- Dependency updates.
+
 0.10.1
@@ -9,2 +22,14 @@ ------
 
+This long-awaited release provides React 0.14 compatibility and a rewrite of the underlying
+`<Draggable>` functionality.
+
+**Breaking changes:**
+
+- `ListensToWidth` replaced with `WidthProvider` which must wrap
+  `<ResponsiveReactGridLayout>` and `<ReactGridLayout>` to provide width data. See doc for example.
+- Prop `initialWidth` renamed to `width`.
+- Grid Layout keys must be type of string now.
+
+Other changes:
+
 - *Finally* compatible with React 0.14! Big thanks to @menelike for his help.
@@ -84,4 +109,6 @@ - Upgraded to Babel 6.
 
-> Breaking changes: `ReactGridLayout.props.handle` renamed to `ReactGridLayout.props.draggableHandle`.
+**Breaking changes:**
 
+- `ReactGridLayout.props.handle` renamed to `ReactGridLayout.props.draggableHandle`.
+
 > This version contains a CSS update. This fixes a visual bug where you may see items quickly reset position
@@ -91,2 +118,4 @@ and animate back to their original position on load, when you are using CSS transforms. To fix this bug,
 
+Other changes:
+
 - Fixed #19 (bad new item placement with css transforms).
@@ -93,0 +122,0 @@ - Fixed some placement inconsistencies while RGL is mounting, with css transforms and percentages.

package.json

 {
   "name": "react-grid-layout",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -37,4 +37,4 @@ "main": "index.js",
     "lodash.isequal": "^4.0.0",
-    "react-draggable": "^1.2.0",
-    "react-resizable": "^1.0.1"
+    "react-draggable": "^1.3.1",
+    "react-resizable": "^1.2.0"
   },
@@ -48,3 +48,3 @@ "peerDependencies": {
     "babel-core": "^6.x",
-    "babel-eslint": "^4.1.5",
+    "babel-eslint": "^4.1.8",
     "babel-loader": "^6.x",
@@ -56,7 +56,7 @@ "babel-plugin-react-transform": "^2.0.0",
     "babel-preset-stage-1": "^6.5.0",
-    "css-loader": "^0.23.0",
-    "ejs": "^2.3.4",
-    "eslint": "^1.9.0",
-    "eslint-plugin-react": "^3.9.0",
-    "exports-loader": "^0.6.2",
+    "css-loader": "^0.23.1",
+    "ejs": "^2.4.1",
+    "eslint": "^1.10.3",
+    "eslint-plugin-react": "^3.16.1",
+    "exports-loader": "^0.6.3",
     "imports-loader": "^0.6.5",
@@ -70,7 +70,7 @@ "jsxhint": "^0.15.1",
     "react-hot-loader": "^1.3.0",
-    "react-transform-hmr": "^1.0.1",
+    "react-transform-hmr": "^1.0.2",
     "style-loader": "^0.13.0",
     "valiquire": "^0.3.0",
-    "webpack": "^1.12.6",
-    "webpack-dev-server": "^1.12.1"
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
   },
@@ -77,0 +77,0 @@ "publishConfig": {

README.md

@@ -97,5 +97,5 @@ # React-Grid-Layout
     <ReactGridLayout className="layout" cols={12} rowHeight={30}>
-      <div key={1} _grid={{x: 0, y: 0, w: 1, h: 2}}>1</div>
-      <div key={2} _grid={{x: 1, y: 0, w: 1, h: 2}}>2</div>
-      <div key={3} _grid={{x: 2, y: 0, w: 1, h: 2}}>3</div>
+      <div key="1" _grid={{x: 0, y: 0, w: 1, h: 2}}>1</div>
+      <div key="2" _grid={{x: 1, y: 0, w: 1, h: 2}}>2</div>
+      <div key="3" _grid={{x: 2, y: 0, w: 1, h: 2}}>3</div>
     </ReactGridLayout>
@@ -124,5 +124,5 @@ )
       cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
-      <div key={1}>1</div>
-      <div key={2}>2</div>
-      <div key={3}>3</div>
+      <div key={"1"}>1</div>
+      <div key={"2"}>2</div>
+      <div key={"3"}>3</div>
     </ResponsiveReactGridLayout>
@@ -141,6 +141,32 @@ )
 
-#### Compatibility
+#### Providing grid width
 
+Both `<ResponsiveReactGridLayout>` and `<ReactGridLayout>` take `width` to calculate
+positions on drag events. In simple cases a HOC `<WidthProvider>` can be used to automatically determine
+width upon initialization and window resize events.
 
+```javascript
+var WidthProvider = require('react-grid-layout').WidthProvider;
+var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
+ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);
 
+//...
+render: function() {
+  // {lg: layout1, md: layout2, ...}
+  var layouts = getLayoutsFromSomewhere();
+  return (
+    <ResponsiveReactGridLayout className="layout" layouts={layouts}
+      breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+      cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+      <div key={"1"}>1</div>
+      <div key={"2"}>2</div>
+      <div key={"3"}>3</div>
+    </ResponsiveReactGridLayout>
+  )
+}
+```
+
+This allows you to easily replace `<WidthProvider>` with your own Provider HOC if you need more sophisticated logic.
+
+
 #### Grid Layout Props
@@ -181,3 +207,3 @@
 // This allows setting the initial width on the server side.
-initialWidth: React.PropTypes.number,
+width: React.PropTypes.number.isRequired,
 
@@ -209,3 +235,3 @@ // Margin between items [x, y] in px.
 // Callback so you can save the layout.
-// Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
+// Calls back with (currentLayout) after every drag or resize stop.
 onLayoutChange: React.PropTypes.func,
@@ -319,3 +345,2 @@
   rowHeight: 150,
-  initialWidth: 1280,
   margin: [10, 10],
@@ -322,0 +347,0 @@ minH: 1,

webpack-examples.config.js

@@ -18,3 +18,3 @@ 'use strict';
       loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?optional=runtime'}
+        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'}
       ]
@@ -21,0 +21,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

Improved metrics

Total package byte prevSize

94326

increased by2.98%

Number of package files

26

increased by8.33%

Number of lines in readme file

368

increased by7.29%

Dependency changes

• Updatedreact-draggable@^1.3.1

• Updatedreact-resizable@^1.2.0