From 1bb76f4090e998a2d650af2d998388a2455a895a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 14 Apr 2016 16:35:29 +0800 Subject: [PATCH] docs: design demo to code --- docs/pattern/classic.md | 8 -- docs/pattern/table/demo/data-select-all.md | 134 +++++++++++++++++++ docs/pattern/table/demo/data-select-paged.md | 131 ++++++++++++++++++ docs/pattern/table/demo/edit-directly.md | 107 +++++++++++++++ docs/pattern/{table.md => table/index.md} | 34 +---- docs/spec/layout/demo/ceiling.md | 1 - docs/spec/layout/demo/top-aside.md | 6 +- docs/spec/layout/demo/top.md | 4 +- scripts/build-website.js | 22 +++ site/common/styles/markdown.less | 2 +- site/entry/index.jsx | 2 + 11 files changed, 404 insertions(+), 47 deletions(-) delete mode 100644 docs/pattern/classic.md create mode 100644 docs/pattern/table/demo/data-select-all.md create mode 100644 docs/pattern/table/demo/data-select-paged.md create mode 100644 docs/pattern/table/demo/edit-directly.md rename docs/pattern/{table.md => table/index.md} (73%) create mode 100755 scripts/build-website.js diff --git a/docs/pattern/classic.md b/docs/pattern/classic.md deleted file mode 100644 index 15859615f..000000000 --- a/docs/pattern/classic.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -order: 0 -disabled: true -chinese: 典型页面 -english: Classic ---- - -敬请期待。 diff --git a/docs/pattern/table/demo/data-select-all.md b/docs/pattern/table/demo/data-select-all.md new file mode 100644 index 000000000..8321ea6f6 --- /dev/null +++ b/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 = ( + + 操作1 + 操作2 + + ); + + this.columns = [{ + title: '数据库名称', + dataIndex: 'database', + key: 'database', + }, { + title: '详情', + dataIndex: 'detail', + key: 'detail', + }, { + title: '操作', + key: 'operation', + render() { + return ( + + 删除 + + + 更多 + + + ); + }, + }]; + 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 ? + 清除所选内容 : + + 选择全部 {props.dataSource.length} 项 + ; + const tips = !state.allSelected ? + `已选当前页 ${state.selectedRowKeys.length} 项。` : + `已选择全部 ${props.dataSource.length}项。`; + const message = {tips}{operation}; + + return ( +
+ { state.showAlert ? : null } + + + ); + } +} + +ReactDOM.render(, mountNode); +``` + +```css +.icon-more { + font-size: 9px; +} +``` diff --git a/docs/pattern/table/demo/data-select-paged.md b/docs/pattern/table/demo/data-select-paged.md new file mode 100644 index 000000000..3bfc1868e --- /dev/null +++ b/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 ( + + 操作1 + + 更多 + + ); + }, + }]; + 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 ( + this.handleCloseTag(key)}> + { content } + + ); + }); + message.push(清空); + + const rowSelection = { + selectedRowKeys: state.selectedRowKeys, + onChange: this.handleSelected, + }; + + return ( +
+ { message.length > 1 ? : null } +
+ + ); + } +} + +ReactDOM.render( + , + mountNode +); +``` + +```css +.paged-table .ant-alert { + position: relative; + padding-right: 35px; +} +.clear-all { + position: absolute; + top: 8px; + right: 8px; + line-height: 22px; +} +``` diff --git a/docs/pattern/table/demo/edit-directly.md b/docs/pattern/table/demo/edit-directly.md new file mode 100644 index 000000000..f4a220a39 --- /dev/null +++ b/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 {number}; + }, + }, { + title: '买家', + dataIndex: 'customer', + key: 'customer', + render: (customer, record) => { + return ( + + ); + } + }, { + title: '详情', + dataIndex: 'detail', + key: 'detail', + render: (detail, record) => { + return ( + this.handleEdit(record.key, 'detail', e.target.value)} + /> + ); + } + }, { + title: '加急', + dataIndex: 'emergency', + key: 'emergency', + render: (emergency, record) => { + return ( + 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 ( +
+ ); + } +} + +ReactDOM.render( + ); +``` + +```css +.customer-selector { + width: 100%; +} +``` diff --git a/docs/pattern/table.md b/docs/pattern/table/index.md similarity index 73% rename from docs/pattern/table.md rename to docs/pattern/table/index.md index a31a548cf..7a6601d1a 100644 --- a/docs/pattern/table.md +++ b/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)。 -### 全选数据 - -状态一 - -状态二：点击 Table 顶部的复选框，出现『Alert』 - -状态三：点击『选择全部』后 - -当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。 - -### 跨页选数据 - -状态一：选中一行数据 - -状态二：切换分页后，记录所选的项目 - -状态三：在其他页中再选择一项，多记录一项选择 - -状态四：用户可以在记录条直接取消选择 - -状态五：表格选择框同步取消选择 - -当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。 - ### 固定按钮组 顶部固定示例 @@ -112,12 +88,6 @@ english: Table 适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。 -### 直接编辑 - -直接编辑示例 - -适用在易编辑性高于易读性时。 - ### 悬浮层编辑 悬浮层编辑示例 diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md index 97822900d..afbc0ea0a 100644 --- a/docs/spec/layout/demo/ceiling.md +++ b/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( diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md index 6fe494f1c..37daf3895 100644 --- a/docs/spec/layout/demo/top-aside.md +++ b/docs/spec/layout/demo/top-aside.md @@ -17,7 +17,7 @@ ReactDOM.render(
+ defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }}> 导航一 导航二 导航三 @@ -27,7 +27,7 @@ ReactDOM.render(
+ defaultSelectedKeys={['1']} style={{ marginLeft: 124 }}> 二级导航 二级导航 二级导航 @@ -67,7 +67,7 @@ ReactDOM.render(
-
内容区域
+
内容区域
diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md index f7e3ead9f..9820bd0d6 100644 --- a/docs/spec/layout/demo/top.md +++ b/docs/spec/layout/demo/top.md @@ -20,7 +20,7 @@ ReactDOM.render(
+ defaultSelectedKeys={['2']} style={{ lineHeight: '64px' }}> 导航一 导航二 导航三 @@ -30,7 +30,7 @@ ReactDOM.render(
+ defaultSelectedKeys={['1']} style={{ marginLeft: 124 }}> 二级导航 二级导航 二级导航 diff --git a/scripts/build-website.js b/scripts/build-website.js new file mode 100755 index 000000000..3d2423fe2 --- /dev/null +++ b/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'); diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less index 4d2df1639..7cbdbe271 100644 --- a/site/common/styles/markdown.less +++ b/site/common/styles/markdown.less @@ -57,7 +57,7 @@ margin: 1em 0; } -.markdown ul > li { +.markdown ul:not(.ant-pagination) > li { list-style: circle; } diff --git a/site/entry/index.jsx b/site/entry/index.jsx index 58a556b9b..0c1c3de10 100644 --- a/site/entry/index.jsx +++ b/site/entry/index.jsx @@ -64,6 +64,8 @@ ReactDOM.render( { utils.generateIndex(pattern) } + { utils.generateIndex(spec) }