Add example react-grid-layout#11

STRML · STRML · commit bdc7b35e41db · 2015-04-29T17:42:53.000-05:00
diff --git a/examples/0-showcase.html b/examples/0-showcase.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/1-basic.html b/examples/1-basic.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/10-dynamic-min-max-wh.html b/examples/10-dynamic-min-max-wh.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
@@ -16,7 +16,9 @@ <h3>React-Grid-Layout Demo 10 - Dynamic Minimum and Maximum Width/Height</h3>
     <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/10-dynamic-min-max-wh.jsx">View this example's source</a></li>
     
       <li><a href="9-min-max-wh.html">View the previous example: "Minimum and Maximum Width/Height"</a></li>
-            </ul>
+        
+      <li><a href="11-no-vertical-compact.html">View the next example: "No Vertical Compacting (Free Movement)"</a></li>
+        </ul>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/11-no-vertical-compact.html b/examples/11-no-vertical-compact.html
@@ -0,0 +1,21 @@
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
+-->
+<html>
+  <head>
+    <script src="http://localhost:4002/dist/commons.js"></script>
+    <script src="http://localhost:4002/dist/11-no-vertical-compact.bundle.js"></script>
+    <title>RGL Example 11 - No Vertical Compacting (Free Movement)</title>
+  </head>
+  <body>
+    <h3>React-Grid-Layout Demo 11 - No Vertical Compacting (Free Movement)</h3>
+           <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
+        <ul>
+    <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
+    <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/11-no-vertical-compact.jsx">View this example's source</a></li>
+    
+      <li><a href="10-dynamic-min-max-wh.html">View the previous example: "Dynamic Minimum and Maximum Width/Height"</a></li>
+            </ul>
+    <div id="content"></div>
+  </body>
+</html>
diff --git a/examples/2-no-dragging.html b/examples/2-no-dragging.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/3-messy.html b/examples/3-messy.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/4-grid-property.html b/examples/4-grid-property.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/5-static-elements.html b/examples/5-static-elements.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/6-dynamic-add-remove.html b/examples/6-dynamic-add-remove.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/7-localstorage.html b/examples/7-localstorage.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/8-localstorage-responsive.html b/examples/8-localstorage-responsive.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/9-min-max-wh.html b/examples/9-min-max-wh.html
@@ -1,5 +1,5 @@
-<!-- 
-  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. 
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>
diff --git a/examples/vars.js b/examples/vars.js
@@ -99,4 +99,12 @@ module.exports = [
       'and a min width of 2 if the height >= 3.'
     ]
   },
+  {
+    title: 'No Vertical Compacting (Free Movement)',
+    source: 'no-vertical-compact',
+    paragraphs: [
+      'You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the ' +
+      'property `verticalCompact` to `false` to achieve this effect.'
+    ]
+  },
 ];
diff --git a/test/examples/11-no-vertical-compact.jsx b/test/examples/11-no-vertical-compact.jsx
@@ -0,0 +1,66 @@
+'use strict';
+var React = require('react');
+var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
+var _ = require('lodash');
+var ReactGridLayout = require('react-grid-layout');
+
+var NoCompactingLayout = React.createClass({
+  mixins: [PureRenderMixin],
+
+  propTypes: {
+    onLayoutChange: React.PropTypes.func.isRequired
+  },
+
+  getDefaultProps() {
+    return {
+      className: "layout",
+      isDraggable: false,
+      isResizable: false,
+      items: 50,
+      cols: 12,
+      rowHeight: 30,
+      // This turns off compaction so you can place items wherever.
+      verticalCompact: false
+    };
+  },
+
+  getInitialState() {
+    var layout = this.generateLayout();
+    return {
+      layout: layout
+    };
+  },
+
+  generateDOM() {
+    return _.map(_.range(this.props.items), function(i) {
+      return (<div key={i}><span className="text">{i}</span></div>);
+    });
+  },
+
+  generateLayout() {
+    var p = this.props;
+    return _.map(new Array(p.items), function(item, i) {
+      var y = _.result(p, 'y') || Math.ceil(Math.random() * 4) + 1;
+      return {x: i * 2 % 12, y: Math.floor(i / 6) * y, w: 2, h: y, i: i};
+    });
+  },
+
+  onLayoutChange: function(layout) {
+    this.props.onLayoutChange(layout);
+  },
+
+  render() {
+    return (
+      <ReactGridLayout layout={this.state.layout} onLayoutChange={this.onLayoutChange}
+          {...this.props}>
+        {this.generateDOM()}
+      </ReactGridLayout>
+    );
+  }
+});
+
+module.exports = NoCompactingLayout;
+
+if (require.main === module) {
+  require('../test-hook.jsx')(module.exports);
+}

-Original file line number
+Diff line change
@@ @@ -1,5 +1,5 @@ @@
 -<!--
 -  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 +<!--
 +  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
 -->
 <html>
   <head>