react-grid-layout - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

lib/ReactGridLayout.jsx

@@ -16,4 +16,7 @@ 'use strict';
     breakpoints: React.PropTypes.object,
-    // # of cols
-    cols: React.PropTypes.number,
+    // # of cols. Can be specified as a single number, or a breakpoint -> cols map
+    cols: React.PropTypes.oneOfType([
+      React.PropTypes.object,
+      React.PropTypes.number
+    ]),
     // A selector for the draggable handler
@@ -26,3 +29,3 @@ handle: React.PropTypes.string,
     initialWidth: React.PropTypes.number,
-    // margin between items (x, y) in px
+    // margin between items [x, y] in px
     margin: React.PropTypes.array,
@@ -55,5 +58,9 @@ // Rows have a static height, but you can change this based on breakpoints if you like
   getInitialState() {
+    var breakpoint = this.getBreakpointFromWidth(this.props.initialWidth);
     return {
-      layout: this.generateLayout(this.props.initialLayout),
-      breakpoint: this.getBreakpointFromWidth(this.props.initialWidth),
+      layout: this.generateLayout(this.props.initialLayout, breakpoint),
+      // storage for layouts obsoleted by breakpoints
+      layouts: {},
+      breakpoint: breakpoint,
+      cols: this.getColsFromBreakpoint(breakpoint),
       width: this.props.initialWidth,
@@ -97,5 +104,6 @@ activeDrag: null
    * @param  {Array} initialLayout Layout passed in through props.
-   * @return {Array}                Working layout.
+   * @param  {String} breakpoint   Current responsive breakpoint.
+   * @return {Array}               Working layout.
    */
-  generateLayout(initialLayout) {
+  generateLayout(initialLayout, breakpoint) {
     var layout = [].concat(initialLayout || []);
@@ -110,3 +118,3 @@ layout = layout.map(function(l, i) {
     
-    layout = utils.correctBounds(layout, {w: this.props.cols});
+    layout = utils.correctBounds(layout, {cols: this.getColsFromBreakpoint(breakpoint)});
     return utils.compact(layout);
@@ -122,2 +130,11 @@ },
 
+  getColsFromBreakpoint(breakpoint) {
+    var cols = this.props.cols;
+    if (typeof cols === "number") return cols;
+    if (!cols[breakpoint]) {
+      throw new Error("ReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
+    }
+    return cols[breakpoint];
+  },
+
   /**
@@ -128,4 +145,20 @@ * On window resize, work through breakpoints and reset state with the new width & breakpoint.
     // Set breakpoint
-    var width = this.getDOMNode().offsetWidth;
-    this.setState({width: width, breakpoint: this.getBreakpointFromWidth(width)});
+    var newState = {
+      width: this.getDOMNode().offsetWidth
+    };
+    newState.breakpoint = this.getBreakpointFromWidth(newState.width);
+    newState.cols = this.getColsFromBreakpoint(newState.breakpoint);
+    
+    if (newState.cols !== this.state.cols) {
+      // Store the current layout
+      newState.layouts = this.state.layouts;
+      newState.layouts[this.state.breakpoint] = _.cloneDeep(this.state.layout);
+
+      // Find or generate the next layout
+      newState.layout = this.state.layouts[newState.breakpoint];
+      if (!newState.layout) {
+        newState.layout = utils.compact(utils.correctBounds(this.state.layout, {cols: newState.cols}));
+      }
+    }
+    this.setState(newState);
   },
@@ -202,3 +235,3 @@
         containerWidth={this.state.width}
-        cols={this.props.cols}
+        cols={this.state.cols}
         margin={this.props.margin}
@@ -231,3 +264,3 @@ rowHeight={this.props.rowHeight}
         containerWidth={this.state.width}
-        cols={this.props.cols}
+        cols={this.state.cols}
         margin={this.props.margin}
@@ -234,0 +267,0 @@ rowHeight={this.props.rowHeight}

lib/utils.js

@@ -51,3 +51,3 @@ 'use strict';
     return _.map(layout, function(l) {
-      if (l.x + l.w > bounds.w) l.x = bounds.w - l.w;
+      if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w;
       return l;
@@ -54,0 +54,0 @@ });

package.json

 {
   "name": "react-grid-layout",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A draggable and resizable grid layout with responsive breakpoints, for React.",
@@ -8,3 +8,3 @@ "main": "index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "./node_modules/.bin/webpack",
+    "build": "webpack",
     "dev-server": "echo 'Open http://localhost:4002'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base ."
@@ -11,0 +11,0 @@ },

README.md

@@ -17,4 +17,97 @@ ### React-Grid-Layout
 
-If you have a feature request, add it as an issue.
+If you have a feature request, please add it as an issue or make a pull request.
 
+#### Features
+
+* 100% React - no jQuery
+* Draggable widgets
+* Resizable widgets
+* Vertical auto-packing
+* Bounds checking for dragging and resizing
+* Layout can be serialized and restored
+* Responsive breakpoints
+* Separate layouts per responsive breakpoints
+
+
+#### Usage
+
+Use ReactGridLayout like any other component.
+
+```javascript
+
+render: function() {
+  // layout is an array of objects, see the demo
+  var initialLayout = getOrGenerateLayout(); 
+  return (
+    <ReactGridLayout className="layout" initialLayout={initialLayout} 
+      cols={12} rowHeight={30}>
+      <div key={1}>1</div>
+      <div key={2}>2</div>
+      <div key={3}>3</div>
+    </ReactGridLayout>
+  )
+}
+
+```
+
+
+#### Props
+
+RGL supports the following properties (see the source for the final word on this):
+
+```javascript
+// If true, the container height swells and contracts to fit contents
+autoSize: React.PropTypes.bool,
+
+// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
+breakpoints: React.PropTypes.object,
+
+// Can be specified as a single number or a {breakpoint: cols} map
+cols: React.PropTypes.oneOfType([
+  React.PropTypes.object,
+  React.PropTypes.number
+]),
+
+// A selector for the draggable handler
+handle: React.PropTypes.string,
+
+// Layout is an array of object with the format:
+// {x: Number, y: Number, w: Number, h: Number}
+initialLayout: React.PropTypes.array,
+
+// This allows setting this on the server side
+initialWidth: React.PropTypes.number,
+
+// margin between items [x, y] in px
+margin: React.PropTypes.array,
+
+// Rows have a static height, but you can change this based on breakpoints 
+// if you like
+rowHeight: React.PropTypes.number,
+
+// Flags.
+isDraggable: React.PropTypes.bool,
+isResizable: React.PropTypes.bool,
+
+// Callback so you can save the layout
+onLayoutChange: React.PropTypes.func
+```
+
+###### Defaults
+
+```javascript
+{
+  autoSize: true,
+  breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
+  cols: 10, 
+  rowHeight: 150,
+  initialWidth: 1280,
+  margin: [10, 10],
+  isDraggable: true,
+  isResizable: true,
+  onLayoutChange: function(){}
+}
+```
+
+
 #### Demos
@@ -36,2 +129,3 @@
 - [x] Resizable grid items
+- [x] Layouts per responsive breakpoint
 - [ ] Define grid attributes on children themselves (`_grid` key)

test/TestLayout.jsx

@@ -49,3 +49,3 @@ 'use strict';
     return _.map(this.state.layout, function(l) {
-      return <div className="layoutItem"><b>{l.i}</b>: [{l.x}, {l.y}, {l.w}, {l.h}]</div>;
+      return <div className="layoutItem" key={l.i}><b>{l.i}</b>: [{l.x}, {l.y}, {l.w}, {l.h}]</div>;
     });
@@ -52,0 +52,0 @@ },

webpack-dev-server.config.js

@@ -0,1 +1,3 @@
+var webpack = require("webpack");
+
 module.exports = {
@@ -19,2 +21,5 @@ context: __dirname,
     },
+    plugins: [
+      new webpack.optimize.DedupePlugin(),
+    ],
     debug: true,
@@ -21,0 +26,0 @@ devtool: "#inline-source-map",

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

35478

increased by16.05%

Number of package files

19

increased by5.56%

Lines of code

831

increased by9.06%

Number of lines in readme file

130

increased by261.11%

No dependency changes