react-grid-layout - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

build/ReactGridLayout.js

@@ -30,11 +30,5 @@ 'use strict';
       var layout = props.initialLayout;
-      var subProps = ['x', 'y', 'w', 'h'];
-      if (!Array.isArray(layout)) throw new Error("InitialLayout must be an array!");
-      for (var i = 0, len = layout.length; i < len; i++) {
-        for (var j = 0; j < subProps.length; j++) {
-          if (typeof layout[i][subProps[j]] !== 'number') {
-            throw new Error('ReactGridLayout: initialLayout[' + i + '].' + subProps[j] + ' must be a Number!');
-          }
-        }
-      }
+      // I hope you're setting the on the grid items
+      if (layout === undefined) return; 
+      utils.validateLayout(layout, 'initialLayout');
     },
@@ -51,2 +45,4 @@ // This allows setting this on the server side
     isResizable: React.PropTypes.bool,
+    // If false, will not 
+    listenToWindowResize: React.PropTypes.bool,
 
@@ -67,2 +63,3 @@ // Callback so you can save the layout
       isResizable: true,
+      listenToWindowResize: true,
       onLayoutChange: function(){}
@@ -86,6 +83,14 @@ };
   componentDidMount:function() {
-    window.addEventListener('resize', this.onWindowResize);
+    if (this.props.listenToWindowResize) {
+      window.addEventListener('resize', this.onWindowResize);
+    }
     this.onWindowResize();
   },
 
+  componentWillReceiveProps:function(nextProps) {
+    // This allows you to set the width manually if you like.
+    // Use manual width changes in combination with `listenToWindowResize: false`
+    if (nextProps.width) this.onWidthChange(nextProps.width);
+  },
+
   componentWillUnmount:function() {
@@ -127,13 +132,34 @@ window.removeEventListener('resize', this.onWindowResize);
   generateLayout:function(initialLayout, breakpoint) {
-    var layout = [].concat(initialLayout || []);
-    layout = layout.map(function(l, i) {
-      l.i = i;
-      return l;
-    });
-    if (layout.length !== this.props.children.length) {
-      // Fill in the blanks
+    var layout;
+    // If no layout is supplied, look for `_grid` properties on children. 
+    if (!initialLayout) {
+      layout = this.props.children.map(function(child, i) {
+        var g = child.props._grid;
+        if (g) {
+          utils.validateLayout([g], 'ReactGridLayout.child');
+          return {
+            w: g.w, h: g.h, x: g.x, y: g.y, i: i
+          };
+        }
+      })
+      // Remove empties
+      .filter(function(val) { return val !== undefined; });
+    } else {
+      layout = [].concat(initialLayout || []);
+      layout = layout.map(function(l, i) {
+        l.i = i;
+        return l;
+      });
     }
+
+    // Fill in the blanks
+    while (layout.length !== this.props.children.length) {
+      layout.push({w: 1, h: 1, x: 0, y: 0, i: layout.length - 1});
+    }
     
+    // Correct the layout
     layout = utils.correctBounds(layout, {cols: this.getColsFromBreakpoint(breakpoint)});
-    return utils.compact(layout);
+    layout = utils.compact(layout);
+
+    return layout;
   },
@@ -170,9 +196,15 @@
   /**
-   * On window resize, work through breakpoints and reset state with the new width & breakpoint.
+   * On window resize, update width.
    */
   onWindowResize:function() {
-    // Set breakpoint
-    var newState = {
-      width: this.getDOMNode().offsetWidth
-    };
+    this.onWidthChange(this.getDOMNode().offsetWidth);
+  },
+
+  /**
+   * When the width changes work through breakpoints and reset state with the new width & breakpoint.
+   * Width changes are necessary to figure out the widget widths.
+   */
+  onWidthChange:function(width) {
+    // Set new breakpoint
+    var newState = {width: width};
     newState.breakpoint = this.getBreakpointFromWidth(newState.width);
@@ -179,0 +211,0 @@ newState.cols = this.getColsFromBreakpoint(newState.breakpoint);

build/utils.js

 'use strict';
+
 var utils = module.exports = {
@@ -152,4 +153,2 @@
   moveElementAwayFromCollision: function moveElementAwayFromCollision(layout, collidesWith, itemToMove) {
-    var fakeItem = _.extend({}, itemToMove, {y: 0});
-
     var sorted = utils.getLayoutItemsByRowCol(layout);
@@ -159,9 +158,10 @@ var itemsBefore = sorted.slice(0, sorted.indexOf(itemToMove)).concat(collidesWith);
     // While the item collides with any of the items before it, move it down.
+    itemToMove.y = 0;
     var collisions;
     do {
-      collisions = utils.layoutItemCollidesWith(itemsBefore, fakeItem);
-      if (collisions.length) fakeItem.y = collisions[0].y + collisions[0].h;
+      collisions = utils.layoutItemCollidesWith(itemsBefore, itemToMove);
+      if (collisions.length) itemToMove.y = collisions[0].y + collisions[0].h;
     } while(collisions.length);
 
-    return utils.moveElement(layout, itemToMove, undefined, fakeItem.y);
+    return utils.moveElement(layout, itemToMove, undefined, itemToMove.y);
   },
@@ -176,3 +176,22 @@
     return num * 100 + '%';
+  },
+
+  /**
+   * Validate a layout. Throws errors.
+   * @param  {Array}  layout        Array of layout items.
+   * @param  {String} [contextName] Context name for errors.
+   * @throw  {Error}                Validation error.
+   */
+  validateLayout: function(layout, contextName) {
+    contextName = contextName || "Layout";
+    var subProps = ['x', 'y', 'w', 'h'];
+    if (!Array.isArray(layout)) throw new Error(contextName + " must be an array!");
+    for (var i = 0, len = layout.length; i < len; i++) {
+      for (var j = 0; j < subProps.length; j++) {
+        if (typeof layout[i][subProps[j]] !== 'number') {
+          throw new Error('ReactGridLayout: " + contextName + "[' + i + '].' + subProps[j] + ' must be a Number!');
+        }
+      }
+    }
   }
 };

package.json

 {
   "name": "react-grid-layout",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -52,3 +52,21 @@ ### React-Grid-Layout
 
+You can also set layout properties directly on the children:
 
+
+```javascript
+
+render: function() {
+  // layout is an array of objects, see the demo
+  return (
+    <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>
+    </ReactGridLayout>
+  )
+}
+
+```
+
+
 #### Props
@@ -118,2 +136,3 @@
 1. [Messy Layout Autocorrect](https://strml.github.io/react-grid-layout/examples/3-messy.html)
+1. [Layout defined on children](https://strml.github.io/react-grid-layout/examples/4-grid-property.html)
 
@@ -131,2 +150,2 @@ ----
 - [x] Layouts per responsive breakpoint
-- [ ] Define grid attributes on children themselves (`_grid` key)
+- [x] Define grid attributes on children themselves (`_grid` key)

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

35627

increased by6.59%

Lines of code

825

increased by5.91%

Number of lines in readme file

149

increased by14.62%

No dependency changes