Fix/example indexing (react-grid-layout#2054)

* wip

* fix(example): redo indexing, fix bootstrap example, additional propTypes checks

Fixes react-grid-layout#2036

Makefile

@@ -5,6 +5,7 @@ DIST = ./dist
 BUILD = ./build
 LIB = ./lib
 TEST = ./test
+EXAMPLES = ./examples/*.{js,html}
 MIN = $(DIST)/react-grid-layout.min.js
 MIN_MAP = $(DIST)/react-grid-layout.min.js.map
 
@@ -16,6 +17,9 @@ build: clean build-js $(MIN)
 clean:
 	rm -rf $(BUILD) $(DIST)
 
+clean-example:
+	rm -rf $(EXAMPLES)
+
 dev:
 	@$(EXEC) webpack serve --config webpack-dev-server.config.js \
 	  --hot --progress
@@ -32,16 +36,15 @@ build-js:
 	@$(EXEC) babel --out-dir $(BUILD) $(LIB)
 
 # Will build for use on github pages. Full url of page is
-# https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html
+# https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html
 # so the CONTENT_BASE should adapt.
-build-example:
+build-example: build clean-example
 	@$(EXEC) webpack --config webpack-examples.config.js
-	env CONTENT_BASE="/react-grid-layout/examples/" node ./examples/generate.js
+	env CONTENT_BASE="/react-grid-layout/examples/" node ./examples/util/generate.js
 
 # Note: this doesn't hot reload, you need to re-run to update files.
 # TODO fix that
-view-example:
-	env CONTENT_BASE="/react-grid-layout/examples/" node ./examples/generate.js
+view-example: build-example
 	@$(EXEC) webpack serve --config webpack-examples.config.js --progress
 
 # FIXME flow is usually global

README.md

@@ -37,24 +37,24 @@ RGL is React-only and does not require jQuery.
 
 ## Demos
 
-1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)
-1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html)
-1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/2-no-dragging.html)
-1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/3-messy.html)
-1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/4-grid-property.html)
-1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/5-static-elements.html)
-1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
-1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/7-localstorage.html)
-1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/8-localstorage-responsive.html)
-1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/9-min-max-wh.html)
+1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html)
+1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/01-basic.html)
+1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/02-no-dragging.html)
+1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/03-messy.html)
+1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/04-grid-property.html)
+1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/05-static-elements.html)
+1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/06-dynamic-add-remove.html)
+1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/07-localstorage.html)
+1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/08-localstorage-responsive.html)
+1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/09-min-max-wh.html)
 1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html)
 1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html)
 1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html)
 1. [Error Case](https://react-grid-layout.github.io/react-grid-layout/examples/13-error-case.html)
 1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html)
 1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html)
 1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html)
-1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
+1. [Responsive Bootstrap-style Layout](https://react-grid-layout.github.io/react-grid-layout/examples/17-responsive-bootstrap-style.html)
 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
 1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
 1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html)
@@ -301,13 +301,11 @@ draggableHandle: ?string = '',
 // Compaction type.
 compactType: ?('vertical' | 'horizontal' | null) = 'vertical';
 
-// Layout is an array of object with the format:
-// {x: number, y: number, w: number, h: number}
+// Layout is an array of objects with the format:
 // The index into the layout must match the key used on each item component.
 // 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 data-grid props on children
+// array objects using the `i` prop.
+layout: ?Array<{i?: string, x: number, y: number, w: number, h: number}> = null, // If not provided, use data-grid props on children
 
 // Margin between items [x, y] in px.
 margin: ?[number, number] = [10, 10],

examples/generate.js → examples/util/generate.js

@@ -1,9 +1,10 @@
 "use strict";
 const fs = require("fs");
 const ejs = require("ejs");
+const path = require("path");
 const data = require("./vars");
 const tpl = fs.readFileSync(__dirname + "/template.ejs").toString();
-const version = require('../package.json').version;
+const version = require('../../package.json').version;
 
 const base = process.env.CONTENT_BASE;
 if (typeof base !== "string") {
@@ -15,11 +16,14 @@ const banner =
 
 data.forEach(function(datum, i) {
   datum.base = base.replace(/\/$/, ""); // trim trailing slash
-  datum.index = i;
+  datum.index = (i).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false});
   datum.banner = banner;
   datum.previous = data[i - 1];
   datum.next = data[i + 1];
   datum.version = version;
+});
+
+data.forEach(function(datum, i) {
   const html = ejs.render(tpl, datum);
-  fs.writeFileSync(__dirname + "/" + i + "-" + datum.source + ".html", html);
+  fs.writeFileSync(path.resolve(__dirname, '..', `${datum.index}-${datum.source}.html`), html);
 });

examples/template.ejs → examples/util/template.ejs

@@ -19,12 +19,12 @@
       <li><a href="https://github.com/react-grid-layout/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/react-grid-layout/react-grid-layout/blob/master/test/examples/<%= index %>-<%= source %>.jsx">View this example's source</a></li>
     <%_ if (previous) { -%>
-      <li><a href="<%= index - 1 %>-<%= previous.source %>.html"><b>⇠</b> View the previous example: "<%= previous.title %>"</a></li>
+      <li><a href="<%= previous.index %>-<%= previous.source %>.html"><b>⇠</b> View the previous example: "<%= previous.title %>"</a></li>
     <%_ } else { -%>
       <li><b>⇠</b></li>
     <%_ } -%>
     <%_ if (next) { -%>
-      <li><a href="<%= index + 1 %>-<%= next.source %>.html"><b>⇢ </b>View the next example: "<%= next.title %>"</a></li>
+      <li><a href="<%= next.index %>-<%= next.source %>.html"><b>⇢ </b>View the next example: "<%= next.title %>"</a></li>
     <%_ } -%>
     </ul>
     <%_ for(var i = 0; i < paragraphs.length; i++) { -%>

examples/vars.js → examples/util/vars.js

@@ -148,10 +148,10 @@ module.exports = [
     ]
   },
   {
-    title: "Resizable Handles",
-    source: "resizable-handles",
+    title: "Bootstrap-style Responsive Grid",
+    source: "responsive-bootstrap-style",
     paragraphs: [
-      "This demonstrates how to implement resizable handles for any corner."
+      "This demonstrates how to use ResponsiveGridLayout to create a Bootstrap-style responsive grid."
     ]
   },
   {

index.html

@@ -1,6 +1,6 @@
 <html>
   <head>
     <!-- Redirect for github pages -->
-    <meta http-equiv="refresh" content="0; URL=examples/0-showcase.html" />
+    <meta http-equiv="refresh" content="0; URL=examples/00-showcase.html" />
   </head>
 </html>

lib/utils.js

@@ -944,18 +944,21 @@ export function validateLayout(
   for (let i = 0, len = layout.length; i < len; i++) {
     const item = layout[i];
     for (let j = 0; j < subProps.length; j++) {
-      if (typeof item[subProps[j]] !== "number") {
+      const key = subProps[j];
+      const value = item[key];
+      if (typeof value !== "number" || Number.isNaN(value)) {
         throw new Error(
-          "ReactGridLayout: " +
-            contextName +
-            "[" +
-            i +
-            "]." +
-            subProps[j] +
-            " must be a number!"
+          `ReactGridLayout: ${contextName}[${i}].${key} must be a number! Received: ${value} (${typeof value})`
         );
       }
     }
+    if (typeof item.i !== "undefined" && typeof item.i !== "string") {
+      throw new Error(
+        `ReactGridLayout: ${contextName}[${i}].i must be a string! Received: ${
+          item.i
+        } (${typeof item.i})`
+      );
+    }
   }
 }
 

test/dev-hook.jsx

@@ -1,6 +1,6 @@
 import "react-hot-loader";
 import { hot } from "react-hot-loader/root";
-import DevLayout from "./examples/0-showcase.jsx";
+import DevLayout from "./examples/00-showcase.jsx";
 import makeLayout from "./test-hook";
 
 const Layout = makeLayout(DevLayout);

test/examples/17-responsive-bootstrap-style.jsx

@@ -13,27 +13,49 @@ export default class BootstrapStyleLayout extends React.PureComponent {
     items: 20,
     rowHeight: 30,
     onLayoutChange: function() {},
-    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
+    cols: {lg: 12, md: 12, sm: 12, xs: 12, xxs: 12}
+  };
+
+  state = {
+    layouts: this.generateLayouts()
   };
 
   onLayoutChange(layout) {
     this.props.onLayoutChange(layout);
   }
 
+  generateDOM() {
+    return [...Array(this.props.items)].map((_, i) => (
+      <div key={i}>
+        <span className="text">{i}</span>
+      </div>
+    ));
+  }
+
+  // Create responsive layouts. Similar to bootstrap, increase the pseudo width as
+  // the viewport shrinks
+  generateLayouts() {
+    const times = [...Array(this.props.items)];
+    const widths = {lg: 3, md: 4, sm: 6, xs: 12, xxs: 12};
+    return Object.keys(widths).reduce((memo, breakpoint) => {
+      const width = widths[breakpoint];
+      const cols = this.props.cols[breakpoint];
+      memo[breakpoint] = [
+        // You can set y to 0, the collision algo will figure it out.
+        ...times.map((_, i) => ({x: (i * width) % cols, y: 0, w: width, h: 4, i: String(i)}))
+      ];
+      return memo;
+    }, {});
+  }
+
   render() {
     return (
       <ResponsiveReactGridLayout
         onLayoutChange={this.onLayoutChange}
         {...this.props}
+        layouts={this.state.layouts}
       >
-        <div
-          data-grid={{
-            w: { lg: 6, md: 5, sm: 3, xs: 4, xxs: 2 },
-            h: { lg: 4, xxs: 3 }
-          }}
-        >
-          0
-        </div>
+        {this.generateDOM()}
       </ResponsiveReactGridLayout>
     );
   }

test/spec/lifecycle-test.js

@@ -8,8 +8,8 @@ import ReactGridLayout from "../../lib/ReactGridLayout";
 import { calcGridItemPosition } from "../../lib/calculateUtils";
 import GridItem from "../../lib/GridItem";
 import ResponsiveReactGridLayout from "../../lib/ResponsiveReactGridLayout";
-import BasicLayout from "../examples/1-basic";
-import ShowcaseLayout from "../examples/0-showcase";
+import BasicLayout from "../examples/01-basic";
+import ShowcaseLayout from "../examples/00-showcase";
 import DroppableLayout from "../examples/15-drag-from-outside";
 import ResizableLayout from "../examples/20-resizable-handles";
 import deepFreeze from "../util/deepFreeze";

test/test-hook.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "style-loader!css-loader!../css/styles.css";
-import "style-loader!css-loader!../examples/example-styles.css";
+import "style-loader!css-loader!../examples/util/example-styles.css";
 typeof window !== "undefined" && (window.React = React); // for devtools
 
 export default function makeLayout(Layout) {

webpack-examples.config.js

@@ -44,7 +44,7 @@ module.exports = {
   devServer: {
     compress: true,
     port: 4002,
-    open: "/react-grid-layout/examples/0-showcase.html",
+    open: "/react-grid-layout/examples/00-showcase.html",
     client: {
       overlay: true
     },