Example for horizontal compaction (react-grid-layout#1922)

* Example for horizontal compaction

* Fix label

* Rename 20-horizontal.jsx to 21-horizontal.jsx

---------

Co-authored-by: Samuel Reed <[email protected]>

Author: WarrenGreen

README.md

@@ -58,6 +58,7 @@ RGL is React-only and does not require jQuery.
 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)
+1. [Single Row Horizontal](https://react-grid-layout.github.io/react-grid-layout/examples/21-horizontal.html)
 
 #### Projects Using React-Grid-Layout
 

examples/vars.js

@@ -174,5 +174,12 @@ module.exports = [
     paragraphs: [
       "This shows a grid with all resizable handles enabled. See the prop `resizableHandles` on the grid and grid items in the README."
     ]
-  }
+  },
+  {
+    title: "Single Row Horizontal",
+    source: "horizontal",
+    paragraphs: [
+      "This demonstrates how to constrain the elements to a single row."
+    ]
+  },
 ];

test/examples/21-horizontal.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import _ from "lodash";
+import RGL, { WidthProvider } from "react-grid-layout";
+
+const ReactGridLayout = WidthProvider(RGL);
+
+export default class Horizontal extends React.PureComponent {
+  static defaultProps = {
+    className: "layout",
+    items: 5,
+    rowHeight: 5,
+    onLayoutChange: function() {},
+    cols: 12,
+    compactType: "horizontal",
+    maxRows: 1,
+    allowOverlap: false
+  };
+
+  constructor(props) {
+    super(props);
+
+    const layout = this.generateLayout();
+    this.state = { layout };
+  }
+
+  generateDOM() {
+    return _.map(_.range(this.props.items), function(i) {
+      return (
+        <div key={i}>
+          <span className="text">{i}</span>
+        </div>
+      );
+    });
+  }
+
+  generateLayout() {
+    const p = this.props;
+    return _.map(new Array(p.items), function(item, i) {
+      const y = 5;
+      return {
+        x: (i * 2) % 12,
+        y: Math.floor(i / 6) * y,
+        w: 2,
+        h: y,
+        i: i.toString()
+      };
+    });
+  }
+
+  onLayoutChange(layout) {
+    this.props.onLayoutChange(layout);
+  }
+
+  render() {
+    return (
+      <ReactGridLayout
+        layout={this.state.layout}
+        onLayoutChange={this.onLayoutChange}
+        useCSSTransforms={true}
+        allowOverlap={true}
+        {...this.props}
+      >
+        {this.generateDOM()}
+      </ReactGridLayout>
+    );
+  }
+}
+
+if (process.env.STATIC_EXAMPLES === true) {
+  import("../test-hook.jsx").then(fn => fn.default(Horizontal));
+}