import GridLayout from 'react-grid-layout';

class MyFirstGrid extends React.Component {
  render() {
    // layout（布局） 为 一个具有多对象数组, 你可以看看Demo展示集合，里面有更完整的用法
    var layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ];
    return (
      <GridLayout
        className="layout"
        layout={layout}
        cols={12}
        rowHeight={30}
        width={1200}
      >
        <div key="a">a</div>
        <div key="b">b</div>
        <div key="c">c</div>
      </GridLayout>
    );
  }
}

import GridLayout from 'react-grid-layout';

class MyFirstGrid extends React.Component {
  render() {
    return (
      <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>
          a
        </div>
        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>
          b
        </div>
        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>
          c
        </div>
      </GridLayout>
    );
  }
}

import {Responsive as ResponsiveGridLayout} from 'react-grid-layout';

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    var layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
      >
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    );
  }
}

import {Responsive, WidthProvider} from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    var layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
      >
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    );
  }
}

//
// 基础 props
//

// 设置 初始 width 在服务器端.
// 必须的，除非使用 HOC <WidthProvider> 或 类似的
width: number,

// 如果为 true ，容器高度会膨胀，并紧凑以适应内容物。
autoSize: ?boolean = true,

// 此布局中的列数。
cols: ?number = 12,

// 一个CSS选择器， 不能拖放
// 例如: draggableCancel:'.MyNonDraggableAreaClassName'
// 若你忘了加上 `.` ，那么就不会工作
draggableCancel: ?string = '',

// 一个CSS选择器， 能拖放处理.
// 例如: draggableHandle:'.MyDragHandleClassName'
// 若你忘了加上 `.` ，那么就不会工作
draggableHandle: ?string = '',

// 如果是 true, 这个布局 垂直紧凑
verticalCompact: ?boolean = true,

// 紧凑类型.
compactType: ?('vertical' | 'horizontal') = 'vertical';

// Layout 是由一定格式的对象所组成的数组:
// {x: number, y: number, w: number, h: number}
// layout的索引，必须匹配，用在每个组件项上的 key。
// 如果 你选择使用自定义的 keys, 你可以指定为，在 layout
// 数组中对象的 keys ，像这样( i 就是 key ):
// {i: string, x: number, y: number, w: number, h: number}
layout: ?array = null, // 如果 不提供, 那使用 children 的 data-grid props

// [x, y]项与项之间的 Margin ，px 单位.
margin: ?[number, number] = [10, 10],

// 容器 [x, y] 里面的 Padding ，px 单位.
containerPadding: ?[number, number] = margin,

// Rows 具有一个 静态 height, 但
// 如果你喜欢的话，你可以基于 breakpoints，改变它.
rowHeight: ?number = 150,

//
// 标志
//
isDraggable: ?boolean = true,
isResizable: ?boolean = true,
// 使用 CSS3 translate() 代替 position top/left.
// 会让性能提升 6 倍
useCSSTransforms: ?boolean = true,

// 若 true，当其被拖(放)起来时，网格项不会改变 position。
preventCollision: ?boolean = false;

//
// 回调函数
//

// 因为 回调函数， 所以你可以保存 layout.
// 在每次 drag 或 resize stop事件之后，用 (currentLayout) 回调。
onLayoutChange: (layout: Layout) => void,

//
// 所有下面的回调函数，都有同样的函数参数签名 (layout, oldItem, newItem, placeholder, e, element).
// 'start' 和 'stop' 函数会给它们的参数 'placeholder'， 传递 `undefined`。
//
type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
                     placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;

// 开始拖动时，调用。
onDragStart: ItemCallback,
// 每次拖动时，调用。
onDrag: ItemCallback,
// 拖动完成后，调用。
onDragStop: ItemCallback,
// 开始调整大小时，调用。
onResizeStart: ItemCallback,
// 当发生调整大小移动时，调用。
onResize: ItemCallback,
// 当调整大小完成后，调用。
onResizeStop: ItemCallback

// {name: pxVal}, 例如： {lg: 1200, md: 996, sm: 768, xs: 480}
// 断点名称是任意的，但必须在 cols和 layouts 对象中，匹配。
breakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
#
// cols 的 #。这是一个断点 -> cols 的 map，例如：{lg: 12, md: 10, ...}
cols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},

// 布局是将断点，映射到布局的对象。
// 例如： {lg: Layout, md: Layout, ...}
layouts: {[key: $Keys<breakpoints>]: Layout}

//
// 回调
//

// 使用断点和新 # 列回调
onBreakpointChange: (newBreakpoint: string, newCols: number) => void,

// 回调，以便保存布局。
// 所有布局都由断点，打上key。
onLayoutChange: (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void,

// 当宽度更改时回调，以便根据需要，修改布局。
onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) => void;

{

  // 一个 字符串，对应组件的 key
  i: string,

  // 在 grid 单元中的所有, 不是 像素(px)
  x: number,
  y: number,
  w: number,
  h: number,
  minW: ?number = 0,
  maxW: ?number = Infinity,
  minH: ?number = 0,
  maxH: ?number = Infinity,

  // 如果为 true, 等于`isDraggable: false, isResizable: false`.
  static: ?boolean = false,
  // 如果为 false, 则不能拖放 draggable. 被 `static` 覆盖.
  isDraggable: ?boolean = true,
  // 如果为 false, 则不能调整大小 resizable. 被 `static` 覆盖.
  isResizable: ?boolean = true
}