docs: design demo to code

docs/pattern/classic.md

@@ -1,8 +0,0 @@
----
-order: 0
-disabled: true
-chinese: 典型页面
-english: Classic
----
-
-敬请期待。

docs/pattern/table/demo/data-select-all.md

@@ -0,0 +1,134 @@
+---
+order: 0
+title: 全选数据
+---
+
+当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
+
+```jsx
+import { Table, Alert, Dropdown, Menu, Icon } from 'antd';
+
+const mockData = [];
+for (let i = 1; i < 100; i++) {
+  mockData.push({
+    database: `Ant-Dlist-${i}`,
+    detail: '我是内容我是内容我是内容',
+    key: i,
+  });
+}
+
+class PagedTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedRowKeys: [],
+      showAlert: false,
+      allSelected: false,
+    };
+
+    ['handleSelected', 'handleSelectAll',
+     'handleSelectAllRecords', 'handleClearAllRecords'].forEach((method) => {
+       this[method] = this[method].bind(this);
+     });
+
+    const menu = (
+      <Menu>
+        <Menu.Item>操作1</Menu.Item>
+        <Menu.Item>操作2</Menu.Item>
+      </Menu>
+    );
+
+    this.columns = [{
+      title: '数据库名称',
+      dataIndex: 'database',
+      key: 'database',
+    }, {
+      title: '详情',
+      dataIndex: 'detail',
+      key: 'detail',
+    }, {
+      title: '操作',
+      key: 'operation',
+      render() {
+        return (
+          <span>
+            <a>删除</a>
+            <span className="ant-divider"></span>
+            <Dropdown overlay={menu}>
+              <a>更多 <Icon className="icon-more" type="down" /></a>
+            </Dropdown>
+          </span>
+        );
+      },
+    }];
+    this.pagination = {
+      total: mockData.length,
+      showQuickJumper: true,
+      pageSize: 5,
+      defaultCurrent: 6,
+    };
+  }
+
+  handleSelected(selectedRowKeys) {
+    this.setState({ selectedRowKeys });
+  }
+
+  handleSelectAll(selected) {
+    this.setState({ showAlert: selected });
+  }
+
+  handleSelectAllRecords() {
+    const selectedRowKeys = this.props.dataSource.map((record) => record.key);
+    this.setState({
+      allSelected: true,
+      selectedRowKeys,
+    });
+  }
+
+  handleClearAllRecords() {
+    this.setState({
+      showAlert: false,
+      allSelected: false,
+      selectedRowKeys: [],
+    });
+  }
+
+  render() {
+    const props = this.props;
+    const state = this.state;
+    const rowSelection = {
+      selectedRowKeys: state.selectedRowKeys,
+      onChange: this.handleSelected,
+      onSelectAll: this.handleSelectAll,
+    };
+
+    const operation = state.allSelected ?
+      <a onClick={this.handleClearAllRecords}>清除所选内容</a> :
+      <a onClick={this.handleSelectAllRecords}>
+        选择全部 {props.dataSource.length} 项
+      </a>;
+    const tips = !state.allSelected ?
+      `已选当前页 ${state.selectedRowKeys.length} 项。` :
+      `已选择全部 ${props.dataSource.length}项。`;
+    const message = <span>{tips}{operation}</span>;
+
+    return (
+      <div>
+        { state.showAlert ? <Alert type="info" showIcon message={message} /> : null }
+        <Table columns={this.columns} pagination={this.pagination}
+          rowSelection={rowSelection}
+          dataSource={props.dataSource} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<PagedTable dataSource={mockData} />, mountNode);
+```
+
+```css
+.icon-more {
+  font-size: 9px;
+}
+```

docs/pattern/table/demo/data-select-paged.md

@@ -0,0 +1,131 @@
+---
+order: 1
+title: 跨页选数据
+---
+
+当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
+
+```jsx
+import { Table, Alert, Tag } from 'antd';
+
+const mockData = [];
+for (let i = 1; i < 100; i++) {
+  mockData.push({
+    database: `Ant-Dlist-${i}`,
+    detail: '我是内容我是内容我是内容',
+    key: i,
+  });
+}
+
+class PagedTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedRowKeys: [],
+    };
+
+    this.handleSelected = this.handleSelected.bind(this);
+    this.handleClearAll = this.handleClearAll.bind(this);
+
+    // columns 在 constructor 中初始化，保证其可以访问 `this`，同时不会重复生成
+    this.columns = [{
+      title: '数据库名称',
+      dataIndex: 'database',
+      key: 'database',
+    }, {
+      title: '详情',
+      dataIndex: 'detail',
+      key: 'detail',
+    }, {
+      title: '操作',
+      key: 'operation',
+      render() {
+        return (
+          <span>
+            <a>操作1</a>
+            <span className="ant-divider"></span>
+            <a>更多</a>
+          </span>
+        );
+      },
+    }];
+    this.pagination = {
+      total: mockData.length,
+      showQuickJumper: true,
+      pageSize: 5,
+      defaultCurrent: 6,
+    };
+  }
+
+  handleSelected(selectedRowKeys) {
+    this.setState({ selectedRowKeys });
+  }
+
+  handleCloseTag(removedKey) {
+    const selectedRowKeys = this.state.selectedRowKeys
+      .filter((selectedKey) => selectedKey !== removedKey);
+    this.setState({ selectedRowKeys });
+  }
+
+  handleClearAll() {
+    this.setState({ selectedRowKeys: [] });
+  }
+
+  getSelectedRecords() {
+    const selectedRowKeys = this.state.selectedRowKeys;
+    return this.props.dataSource
+      .filter((record) => selectedRowKeys.indexOf(record.key) > -1);
+  }
+
+  render() {
+    const props = this.props;
+    const state = this.state;
+
+    const message = this.getSelectedRecords()
+      .map((record) => {
+        const key = record.key;
+        const content = record.database;
+        return (
+          <Tag color="blue" key={key}
+            closable onClose={() => this.handleCloseTag(key)}>
+            { content }
+          </Tag>
+        );
+      });
+    message.push(<a className="clear-all" onClick={this.handleClearAll} key="clear">清空</a>);
+
+    const rowSelection = {
+      selectedRowKeys: state.selectedRowKeys,
+      onChange: this.handleSelected,
+    };
+
+    return (
+      <div className="paged-table">
+        { message.length > 1 ? <Alert type="info" message={message} /> : null }
+        <Table columns={this.columns} pagination={this.pagination}
+          rowSelection={rowSelection}
+          dataSource={props.dataSource} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <PagedTable dataSource={mockData} />,
+  mountNode
+);
+```
+
+```css
+.paged-table .ant-alert {
+  position: relative;
+  padding-right: 35px;
+}
+.clear-all {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  line-height: 22px;
+}
+```

docs/pattern/table/demo/edit-directly.md

@@ -0,0 +1,107 @@
+---
+order: 0
+title: 直接编辑
+---
+
+适用在易编辑性高于易读性时。
+
+```jsx
+import { Table, Select, Input, Switch } from 'antd';
+const Option = Select.Option;
+
+const mockData = [{
+  businessNumber: '1234567890',
+  customer: '林外',
+  detail: '这个一个描述描述描述描述描述',
+  emergency: true,
+  key: 0,
+}];
+
+const mockCustomerList = ['林外', '本杰'];
+
+class EditableTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.columns = [{
+      title: '订单编号',
+      dataIndex: 'businessNumber',
+      key: 'businessNumber',
+      render(number) {
+        return <a>{number}</a>;
+      },
+    }, {
+      title: '买家',
+      dataIndex: 'customer',
+      key: 'customer',
+      render: (customer, record) => {
+        return (
+          <Select className="customer-selector" defaultValue={customer}
+            onChange={(value) => this.handleEdit(record.key, 'customer', value)}
+          >
+            {
+              props.customerList.map((c, i) =>
+                <Option value={c} key={i}>{c}</Option>)
+            }
+          </Select>
+        );
+      }
+    }, {
+      title: '详情',
+      dataIndex: 'detail',
+      key: 'detail',
+      render: (detail, record) => {
+        return (
+          <Input type="text" defaultValue={detail}
+            onChange={(e) => this.handleEdit(record.key, 'detail', e.target.value)}
+          />
+        );
+      }
+    }, {
+      title: '加急',
+      dataIndex: 'emergency',
+      key: 'emergency',
+      render: (emergency, record) => {
+        return (
+          <Switch checkedChildren="Y" unCheckedChildren="N"
+            defaultChecked={emergency}
+            onChange={(value) => this.handleEdit(record.key, 'emergency', value)}
+          />
+        );
+      }
+    }];
+  }
+
+  handleEdit(key, field, value) {
+    const recordToBeEdited = this.props.dataSource
+      .find((record) => record.key === key);
+    const editedRecord = {
+      ...recordToBeEdited,
+      [field]: value,
+    };
+
+    // Send edited data to server in real world.
+    console.log(editedRecord);
+  }
+
+  render() {
+    const props = this.props;
+    return (
+      <Table columns={this.columns} pagination={false} bordered
+        dataSource={props.dataSource} />
+    );
+  }
+}
+
+ReactDOM.render(
+  <EditableTable
+    dataSource={mockData}
+    customerList={mockCustomerList}
+  />);
+```
+
+```css
+.customer-selector {
+  width: 100%;
+}
+```

docs/pattern/table/index.md

@@ -1,7 +1,7 @@
 ---
 order: 4
-chinese: 表格
-english: Table
+english: 表格
+cols: 1
 ---
 
 表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
@@ -68,30 +68,6 @@ english: Table
 
 参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。
 
-### 全选数据
-
-<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
-
-<img class="preview-img" align="right" alt="状态二：点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
-
-<img class="preview-img" align="right" alt="状态三：点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
-
-当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
-
-### 跨页选数据
-
-<img class="preview-img" align="right" alt="状态一：选中一行数据" src="https://os.alipayobjects.com/rmsportal/OcIWSystreURrPV.png">
-
-<img class="preview-img" align="right" alt="状态二：切换分页后，记录所选的项目" src="https://os.alipayobjects.com/rmsportal/HuzwUWDzXszOkEI.png">
-
-<img class="preview-img" align="right" alt="状态三：在其他页中再选择一项，多记录一项选择" src="https://os.alipayobjects.com/rmsportal/yCjrxTSElzNUsFn.png">
-
-<img class="preview-img" align="right" alt="状态四：用户可以在记录条直接取消选择" src="https://os.alipayobjects.com/rmsportal/jtepHsDPApPnQlD.png">
-
-<img class="preview-img" align="right" alt="状态五：表格选择框同步取消选择" src="https://os.alipayobjects.com/rmsportal/OAVQZqxPyuAWvTh.png">
-
-当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
-
 ### 固定按钮组
 
 <img class="preview-img" align="right" alt="顶部固定示例" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
@@ -112,12 +88,6 @@ english: Table
 
 适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
 
-### 直接编辑
-
-<img class="preview-img" align="right" alt="直接编辑示例" description="用户输入后，系统需要及时保存数据。" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
-
-适用在易编辑性高于易读性时。
-
 ### 悬浮层编辑
 
 <img class="preview-img" align="right" alt="悬浮层编辑示例" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">

docs/spec/layout/demo/ceiling.md

@@ -8,7 +8,6 @@ title: 吊顶规范
 吊顶背景深色，高度 `30px`，和浅色调的主导航配合使用。
 
 ````jsx
-import { Menu, Breadcrumb } from 'antd';
 import BrowserDemo from 'site/component/BrowserDemo';
 
 ReactDOM.render(

docs/spec/layout/demo/top-aside.md

@@ -17,7 +17,7 @@ ReactDOM.render(
         <div className="ant-layout-wrapper">
           <div className="ant-layout-logo"></div>
           <Menu theme="dark" mode="horizontal"
-            defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
+            defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }}>
             <Menu.Item key="1">导航一</Menu.Item>
             <Menu.Item key="2">导航二</Menu.Item>
             <Menu.Item key="3">导航三</Menu.Item>
@@ -27,7 +27,7 @@ ReactDOM.render(
       <div className="ant-layout-subheader">
         <div className="ant-layout-wrapper">
           <Menu mode="horizontal"
-            defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
+            defaultSelectedKeys={['1']} style={{ marginLeft: 124 }}>
             <Menu.Item key="1">二级导航</Menu.Item>
             <Menu.Item key="2">二级导航</Menu.Item>
             <Menu.Item key="3">二级导航</Menu.Item>
@@ -67,7 +67,7 @@ ReactDOM.render(
           </aside>
           <div className="ant-layout-content">
             <div style={{ height: 240 }}>
-              <div style={{clear: 'both'}}>内容区域</div>
+              <div style={{ clear: 'both' }}>内容区域</div>
             </div>
           </div>
         </div>

docs/spec/layout/demo/top.md

@@ -20,7 +20,7 @@ ReactDOM.render(
         <div className="ant-layout-wrapper">
           <div className="ant-layout-logo"></div>
           <Menu theme="dark" mode="horizontal"
-            defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
+            defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }}>
             <Menu.Item key="1">导航一</Menu.Item>
             <Menu.Item key="2">导航二</Menu.Item>
             <Menu.Item key="3">导航三</Menu.Item>
@@ -30,7 +30,7 @@ ReactDOM.render(
       <div className="ant-layout-subheader">
         <div className="ant-layout-wrapper">
           <Menu mode="horizontal"
-            defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
+            defaultSelectedKeys={['1']} style={{ marginLeft: 124 }}>
             <Menu.Item key="1">二级导航</Menu.Item>
             <Menu.Item key="2">二级导航</Menu.Item>
             <Menu.Item key="3">二级导航</Menu.Item>

scripts/build-website.js

@@ -0,0 +1,22 @@
+#! /usr/bin/env node
+
+/* eslint strict: 0 */
+'use strict';
+
+// Ensure that data directory exist.
+require('mkdirp').sync('./_data');
+
+const buildDemosList = require('./build-demos-list');
+buildDemosList(['./components', './docs'], './_data/demos-list.js');
+
+const buildCommon = require('./build-common');
+buildCommon([
+  './components',
+  './docs/react',
+  './docs/pattern',
+  './CHANGELOG.md',
+], './_data/react-components.js');
+buildCommon('./docs/practice', './_data/practice.js');
+buildCommon('./docs/pattern', './_data/pattern.js');
+buildCommon('./docs/spec', './_data/spec.js');
+buildCommon('./docs/resource', './_data/resource.js');

site/common/styles/markdown.less

@@ -57,7 +57,7 @@
   margin: 1em 0;
 }
 
-.markdown ul > li {
+.markdown ul:not(.ant-pagination) > li {
   list-style: circle;
 }
 

site/entry/index.jsx

@@ -64,6 +64,8 @@ ReactDOM.render(
         { utils.generateIndex(pattern) }
         <Route path=":children"
           component={utils.getChildrenWrapper(pattern)} />
+        <Route path="table/:children"
+          component={utils.getChildrenWrapper(pattern)} />
       </Route>
       <Route path="docs/spec" component={Spec}>
         { utils.generateIndex(spec) }