feat: Add grid. (#58)

* feat: Add grid.

* Combine Row and Col together.

docs/content/components/clearfix.mdx

@@ -0,0 +1,46 @@
+---
+title: Clearfix 清除修订
+date: 2019-08-16
+author: lijianxin1202
+---
+清除修订，使高度不同的列在换行时下一行处在同一基准线
+
+## 使用方式
+一般在列高度不同时使用
+
+## 基本用法
+不加 Clearfix 时，在 sm (768px ≤ width < 992px)。视图下显示不正确。
+```jsx
+<Grid>
+  <Row className="show-grid">
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, </Col>
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit amet, consectetuer </Col>
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus </Col>
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit </Col>
+  </Row>
+</Grid>
+```
+
+加上 Clearfix, 可修订问题，栏目清除正确。
+```jsx
+<Grid>
+  <Row className="show-grid">
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, </Col>
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit amet, consectetuer </Col>
+    <Clearfix visibleSmBlock><code>&lt;{'Clearfix visibleSmBlock'} /&gt;</code></Clearfix>
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus </Col>
+    <Col sm={12} md={6}><code>&lt;{'Col sm={12} md={6}'} /&gt;</code><br/>Lorem ipsum dolor sit </Col>
+  </Row>
+</Grid>
+```
+
+## API
+
+| 参数    | 类型                      | 默认值 | 说明     |
+| ------- | ------------------------- | ------ | -------- |
+| componentClass | elementType | 'div' | 使用一个此组件提供的定制化样式。 |
+| visibleXsBlock | boolean | | 极小设备上使用 clearfix，相当于增加样式 visible-xs-block |
+| visibleSmBlock | boolean | | 小型设备上使用 clearfix，相当于增加样式 visible-sm-block |
+| visibleMdBlock | boolean | | 中型设备上使用 clearfix，相当于增加样式 visible-md-block |
+| visibleLgBlock | boolean | | 大型设备上使用 clearfix，相当于增加样式 visible-lg-block |
+| bsClass | string | 'row' | 定义组件基础 CSS 及前缀。通常改变 bsClass 目的是为组件提供新的、非 Bootstrap 自带样式。 |

docs/content/components/grid.mdx

@@ -0,0 +1,85 @@
+---
+title: Grid 布局系统
+date: 2019-08-22
+author: lijianxin1202
+---
+使用行列进行布局
+
+## 使用方式
+进行表格布局时使用
+
+## 基本用法
+
+```jsx
+<Grid>
+  <Row className="show-grid">
+    <Col xs={24} md={16}>
+      <code>{'<Col xs={24} md={16} />'};</code>
+    </Col>
+    <Col xs={12} md={8}>
+      <code>{'<Col xs={12} md={8} />'}</code>
+    </Col>
+  </Row>
+
+  <Row className="show-grid">
+    <Col xs={12} md={8}>
+      <code>{'<Col xs={12} md={8} />'}</code>
+    </Col>
+    <Col xs={12} md={8}>
+      <code>{'<Col xs={12} md={8} />'}</code>
+    </Col>
+    <Col xsHidden md={8}>
+      <code>{'<Col xsHidden md={8} />'}</code>
+    </Col>
+  </Row>
+
+  <Row className="show-grid">
+    <Col xs={12} xsOffset={12}>
+      <code>{'<Col xs={12} xsOffset={12} />'}</code>
+    </Col>
+  </Row>
+
+  <Row className="show-grid">
+    <Col md={12} mdPush={12}>
+      <code>{'<Col md={12} mdPush={12} />'}</code>
+    </Col>
+    <Col md={12} mdPull={12}>
+      <code>{'<Col md={12} mdPull={12} />'}</code>
+    </Col>
+  </Row>
+</Grid>
+```
+
+## API
+### Col
+
+| 参数    | 类型                      | 默认值 | 说明     |
+| ------- | ------------------------- | ------ | -------- |
+| componentClass | elementType | 'div' | 使用一个此组件提供的定制化样式。 |
+| xs | number | | 极小设备(<768px)上列的跨度，对应于样式前缀 col-xs- |
+| sm | number | | 小型设备(≥768px)上列的跨度，对应于样式前缀 col-sm- |
+| md | number | | 中型设备(≥992px)上列的跨度，对应于样式前缀 col-md- |
+| lg | number | | 大型设备(≥1200px)上列的跨度，对应于样式前缀 col-lg- |
+| xsHidden | boolean | | 极小设备上隐藏列，对应于样式前缀 hidden-xs |
+| smHidden | boolean | | 小型设备上隐藏列，对应于样式前缀 hidden-sm |
+| mdHidden | boolean | | 中型设备上隐藏列，对应于样式前缀 hidden-md |
+| lgHidden | boolean | | 大型设备上隐藏列，对应于样式前缀 hidden-lg |
+| xsOffset | number | | 极小设备上右移列数，对应于样式前缀 col-xs-offset- |
+| smOffset | number | | 小型设备上右移列数，对应于样式前缀 col-sm-offset- |
+| mdOffset | number | | 中型设备上右移列数，对应于样式前缀 col-md-offset- |
+| lgOffset | number | | 大型设备上右移列数，对应于样式前缀 col-lg-offset- |
+| xsPush | number | | 极小设备上右移列数（对下一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| smPush | number | | 小型设备上右移列数（对下一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| mdPush | number | | 中型设备上右移列数（对下一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| lgPush | number | | 大型设备上右移列数（对下一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| xsPull | number | | 极小设备上左移列数（对前一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| smPull | number | | 小型设备上右移列数（对前一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| mdPull | number | | 中型设备上右移列数（对前一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| lgPull | number | | 大型设备上右移列数（对前一列位置无影响），，对应于样式前缀 col-xs-pull- |
+| bsClass | string | 'col' | 定义组件基础 CSS 及前缀。通常改变 bsClass 目的是为组件提供新的、非 Bootstrap 自带样式。 |
+
+### Row
+| 参数    | 类型                      | 默认值 | 说明     |
+| ------- | ------------------------- | ------ | -------- |
+| componentClass | elementType | 'div' | 使用一个此组件提供的定制化样式。 |
+| bsClass | string | 'row' | 定义组件基础 CSS 及前缀。通常改变 bsClass 目的是为组件提供新的、非 Bootstrap 自带样式。 |

docs/src/components/Playground/style.scss

@@ -166,5 +166,16 @@
         margin-bottom: 8px;
       }
     }
+    .container {
+      width: auto;
+    }
+    .show-grid [class^=col-] {
+      background-color: #eee;
+      background-color: rgba(86,61,124,.15);
+      border: 1px solid #ddd;
+      border: 1px solid rgba(86,61,124,.2);
+      padding-bottom: 10px;
+      padding-top: 10px;
+    }
   }
 }

src/components/Tree/index.tsx

@@ -9,8 +9,10 @@ function renderTreeNodes(data: TreeData[]) {
   return data.map(item => {
     const filterProps = pick(item, ['title', 'disabled', 'key']);
     if (item.children) {
+      // @ts-ignore
       return <TreeNode {...filterProps}>{renderTreeNodes(item.children)}</TreeNode>;
     } else {
+      // @ts-ignore
       return <TreeNode {...filterProps} />;
     }
   });
@@ -19,6 +21,7 @@ function renderTreeNodes(data: TreeData[]) {
 const Tree: React.FC<TreeProps> = props => {
   const { data, checkable, prefixCls } = props;
   return (
+    // @ts-ignore
     <RcTree
       {...props}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}

src/components/index.tsx

@@ -17,11 +17,13 @@ import Tree from './Tree';
 import DatePicker from './DatePicker';
 import Panel from './Panel';
 import UsageBar from './UsageBar';
-import { MenuItem, Navbar, NavDropdown, NavItem, Well, PanelGroup } from 'react-bootstrap';
+import { Col, Clearfix, MenuItem, Navbar, NavDropdown, NavItem, Row, Well, PanelGroup } from 'react-bootstrap';
 
 export {
   Alert,
   Badge,
+  Col,
+  Clearfix,
   Dropdown,
   DropdownButton,
   Icon,
@@ -33,6 +35,7 @@ export {
   NavItem,
   Navigation,
   RangePicker,
+  Row,
   Steps,
   SubMenu,
   Switch,