react-grid-layout component

dashboard.jsx

'use strict';
var React = require('react/addons');
var _ = require('lodash');
var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;

var Dashboard = React.createClass({
  mixins: [React.addons.PureRenderMixin],

  getDefaultProps() {
    return {
      className: "layout",
      rowHeight: 30,
      cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}
    };
  },

  getInitialState() {
    return {
      layouts: {lg: this.generateLayout()},
      currentLayout: [],
      currentBreakpoint: 'lg'
    };
  },

  generateDOM() {
    return _.map(this.state.layouts.lg, function(l, i) {
      return (
        <div key={i} className={l.static ? 'static' : ''}>
          {l.static ? 
            <span className="text" title="This item is static and cannot be removed or resized.">Static - {i}</span>
            : <span className="text">{i}</span>
          }
        </div>);
    });
  },

  generateLayout() {
    var p = this.props;
    return _.map(_.range(0, 25), function(item, i) {
      var y = _.result(p, 'y') || Math.ceil(Math.random() * 4) + 1;
      return {x: _.random(0, 5) * 2 % 12, y: Math.floor(i / 6) * y, w: 2, h: y, i: i, static: Math.random() < 0.05};
    });
  },

  onBreakpointChange(breakpoint) {
    this.setState({
      currentBreakpoint: breakpoint
    });
  },

  onLayoutChange(layout) {
    this.setState({
      currentLayout: layout
    });
  },

  onNewLayout() {
    this.setState({
      layouts: {lg: this.generateLayout()}
    });
  },

  render() {
    return (
      <div>
        <div>Current Breakpoint: {this.state.currentBreakpoint} ({this.props.cols[this.state.currentBreakpoint]} columns)</div>
        <button onClick={this.onNewLayout}>Generate New Layout</button>
        <ResponsiveReactGridLayout 
            layouts={this.state.layouts}
            onBreakpointChange={this.onBreakpointChange}
            onLayoutChange={this.onLayoutChange}
            {...this.props}>
          {this.generateDOM()}
        </ResponsiveReactGridLayout>
      </div>
    );
  }
});

module.exports = Dashboard;

index.jsx

var Dashboard = require("./dashboard");

require('./style.css');

module.exports = Dashboard;

mainRoutes.jsx

var React = require("react");
var Router = require("react-router");
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;

// polyfill
if(!Object.assign)
	Object.assign = React.__spread;

// export routes
module.exports = (
	<Route name="app" path="/" handler={require("./Application")}>
        <Route name="dashboard" path="/dashboard" handler={require("./Dashboard")} />
		<Route name="some-page" path="/some-page" handler={require("./SomePage")} />
		<Route name="todolist" path="/:list" handler={require("./TodoList")} />
		<Route name="todoitem" path="/todo/:item" handler={require("./TodoItem")} />
		<DefaultRoute name="home" handler={require("./Home")} />
	</Route>
);

style.css

.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
}
.react-grid-item.resizing {
  z-index: 1;
}
.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
}
.react-draggable {
  position: relative;
}
.react-draggable-active {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.react-grid-resize-handle {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  line-height: 28px;
  font-size: 20px;
  text-align: right;
  cursor: se-resize;
}
.react-grid-item:hover .react-grid-resize-handle {
  opacity: 1;
}

#dashboard {
  width: 100%;
}
.react-grid-layout {
  background: #eee;
}
.layoutJSON {
  background: #ddd;
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
}
.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}
.react-grid-item:not(.react-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}
.react-grid-item.resizing {
  opacity: 0.9;
}
.react-grid-item.static {
  background: #cce;
}
.react-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 24px;
}
.react-grid-item .minMax {
  font-size: 12px;
}
.react-grid-item .add {
  cursor: pointer;
}

.react-draggable {
	position: relative;
}

.react-draggable-active {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}