diff --git a/components/button/index.md b/components/button/index.md index 8c56ba45f7..380a648be5 100644 --- a/components/button/index.md +++ b/components/button/index.md @@ -13,7 +13,7 @@ 标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。 -## 如何使用 +## API - 通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:`type` -> `shape` -> `size` -> `loading` -> `disabled` diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index a4d44ecaa6..c547ca98ae 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -39,6 +39,8 @@ function createPicker(TheCalendar) { onSelect: null, // 向前兼容 onChange() {}, // onChange 可用于 Validator locale: {}, + // 自动换方向有很多视觉和交互问题 + // 需求不是很大,和设计师协商后不做 placement: { points: ['tl', 'tl'], overflow: { adjustX: 0, adjustY: 0 }, @@ -84,13 +86,13 @@ function createPicker(TheCalendar) { return date; } } - return null; + return undefined; }, // remove input readonly warning handleInputChange() {}, handleChange(value) { this.setState({ value }); - const timeValue = value ? new Date(value.getTime()) : null; + const timeValue = value ? new Date(value.getTime()) : undefined; // onSelect 为向前兼容. if (this.props.onSelect) { require('util-deprecate')(this.props.onSelect, 'onSelect property of Datepicker is deprecated, use onChange instead')(timeValue); @@ -134,13 +136,14 @@ function createPicker(TheCalendar) { onChange={this.handleChange}> { ({value}) => { - return ([, - ]); + return + + + ; } } diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md new file mode 100644 index 0000000000..40b38b3443 --- /dev/null +++ b/components/table/demo/colspan-rowspan.md @@ -0,0 +1,121 @@ +# 表格行/列合并 + +- order: 13 + +表头只支持列合并,使用 column 里的 colSpan 进行设置。 + +表格支持行/列合并,可以指定内容对齐方式,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。 + +--- + +````jsx +import { Table } from 'antd'; + +// 事例表中第四行合并了五列,除了第一列设置 colSpan = 5 外 +// 其他列的第四行 colSpan = 0 (被合并掉,不会渲染) +const renderContent = function(value, row, index) { + let obj = { + children: value, + props: {} + } + if (index === 4) { + obj.props.colSpan = 0; + } + return obj; +}; + +const columns = [{ + title: '姓名', + dataIndex: 'name', + render: function(text, row, index) { + if (index < 4) { + return {text}; + } else { + return { + children: {text}, + props: { + align: 'center', + colSpan: 5 + } + } + } + } +}, { + title: '年龄', + dataIndex: 'age', + render: renderContent +}, { + title: '家庭电话', + colSpan: 2, + dataIndex: 'tel', + render: function(value, row, index) { + let obj = { + children: value, + props:{} + } + // 第三列的第三行行合并 + if (index === 2) { + obj.props.rowSpan = 2; + } + + // 第三列的第四行被合并没了,设置 rowSpan = 0 直接不用渲染 + if (index === 3) { + obj.props.rowSpan = 0; + } + + if (index === 4) { + obj.props.colSpan = 0; + } + return obj; + } +}, { + title: '手机号', + colSpan: 0, + dataIndex: 'phone', + render: renderContent +}, { + title: '住址', + dataIndex: 'address', + render: renderContent +}]; + +const data = [{ + key: '1', + name: '胡彦斌', + age: 32, + tel: '0571-22098909', + phone: 18889898989, + address: '西湖区湖底公园1号' +}, { + key: '2', + name: '胡彦祖', + tel: '0571-22098333', + phone: 18889898888, + age: 42, + address: '西湖区湖底公园1号' +}, { + key: '3', + name: '李大嘴', + age: 32, + tel: '0575-22098909', + phone: 18900010002, + address: '西湖区湖底公园1号' +}, { + key: '4', + name: '李夫人', + age: 18, + tel: '0575-22098909', + phone: 18900010002, + address: '西湖区湖底公园1号' +}, { + key: '5', + name: '习大大', + age: 18, + tel: '0575-22098909', + phone: 18900010002, + address: '西湖区湖底公园1号' + }]; + +ReactDOM.render( +, document.getElementById('components-table-demo-colspan-rowspan')); +```` diff --git a/components/table/index.md b/components/table/index.md index 4f851d3045..d5999568a0 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -78,8 +78,9 @@ var dataSource = new Table.DataSource({ |------------|----------------------------|-----------------|---------------------|---------| | title | 列头显示文字 | String or React.Element | | | | dataIndex | 列数据在 data 中对应的 key | String | | | +| colSpan | 表头列合并,设置为0时,不渲染 | Number | | | | key | React 需要的 key | String | | | -| render | 生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引 | Function(text, record, index) {} | | | +| render | 生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引,@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} | | | | filters | 表头的筛选菜单项 | Array | | | | onFilter | 本地模式下,确定筛选的运行函数 | Function | | | | sorter | 排序函数,本地模式下为一个函数,远程模式下为布尔值 | Function or Boolean | | 无 | diff --git a/components/tabs/demo/add.md b/components/tabs/demo/add.md index 705de2cce2..3b050261ff 100644 --- a/components/tabs/demo/add.md +++ b/components/tabs/demo/add.md @@ -1,85 +1,105 @@ -# 添加 +# 动态的页签 - order: 4 -演示添加删除功能。 +演示添加删除和附加操作。 --- ````jsx -import { Tabs, Button, Icon } from 'antd'; +import { Tabs, Button, Icon, message } from 'antd'; const TabPane = Tabs.TabPane; -var index = 0; +let index = 0; const closeStyle = { position: 'absolute', - top: 0, - right: -10, -}; -var addStyle = { - pointerEvents: 'auto', - color: 'black', + top: 8, + right: -9, }; -var Test = React.createClass({ +const addStyle = { + pointerEvents: 'auto', + color: '#2db7f5', + position: 'absolute', + top: 8, + left: 0, + marginLeft: -8, +}; + +const Test = React.createClass({ getInitialState() { return { tabs: [{ title: 'title ' + index, content: 'content ' + index, + index: index }], - activeKey: 'title ' + index + activeKey: index.toString() }; }, - remove(title, e) { + remove(index, e) { e.stopPropagation(); - if(this.state.tabs.length === 1) { - antd.message.error('仅剩一个,不能删除'); + let tabs = this.state.tabs; + let activeKey = this.state.activeKey; + let foundIndex = 0; + + if(tabs.length === 1) { + message.error('仅剩一个,不能删除'); return; } - var foundIndex = 0; - var tabs = this.state.tabs.filter(function (t, index) { - if (t.title !== title) { + + const newTabs = tabs.filter(tab => { + if (tab.index !== index) { return true; } else { foundIndex = index; return false; } }); - var activeKey = this.state.activeKey; - if (activeKey === title) { - if (foundIndex) { - foundIndex--; - } - activeKey = tabs[foundIndex].title; + + if (activeKey === index) { + activeKey = tabs[foundIndex - 1].index; } - this.setState({tabs, activeKey}) + + this.setState({ + tabs: newTabs, activeKey + }); }, add() { - index++; + index += 1; this.setState({ tabs: this.state.tabs.concat({ - title: 'title '+index, - content: 'content '+index, - }) + title: 'title ' + index, + content: 'content ' + index, + index: index, + }), + activeKey: index.toString(), }); }, onChange(activeKey) { - this.setState({activeKey}); + console.log(activeKey); + this.setState({ activeKey }); }, render() { - return 其它操作}> - { - this.state.tabs.map((t)=>{ - return {t.title} }> - {t.content} - ; - }).concat(} />) - } - + const addBtn = ; + const operations = ; + return ( + + { + this.state.tabs.map(tab => ( + + {tab.title} + + + }>{tab.content} + )) + } + + + ); } }) diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index 5b6b8956c8..c28b1b67f8 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -7,8 +7,8 @@ --- ````jsx -var Tree = antd.Tree; -var TreeNode = Tree.TreeNode; +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; ReactDOM.render( diff --git a/components/tree/demo/checkbox.md b/components/tree/demo/checkbox.md index 2c000534a6..76c82e9438 100644 --- a/components/tree/demo/checkbox.md +++ b/components/tree/demo/checkbox.md @@ -7,8 +7,8 @@ --- ````jsx -var Tree = antd.Tree; -var TreeNode = Tree.TreeNode; +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; function handleCheck(info) { console.log('check: ', info); diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md new file mode 100644 index 0000000000..a85694093e --- /dev/null +++ b/components/tree/demo/dynamic.md @@ -0,0 +1,80 @@ +# 异步数据加载 + +- order: 3 + +异步加载数据 + +--- + +````jsx +import { Tree } from 'antd'; +const TreeNode = Tree.TreeNode; + +const asyncTree = [ + {name: "pNode 01", key: "0-0"}, +]; + +const generateTreeNodes = () => { + const arr = [ + {name: "伯约", key: "0-0-0"}, + ]; + return arr; +} + +const TreeDemo = React.createClass({ + timeout(duration = 0) { + return new Promise((resolve, reject) => { + setTimeout(resolve.bind(this), duration); + }) + }, + getInitialState() { + return { + treeData: [] + }; + }, + componentDidMount() { + this.timeout(1000).then(() => { + this.setState({ + treeData: asyncTree + }); + return asyncTree; + }); + }, + handleSelect(info) { + console.log('selected', info); + }, + handleDataLoaded(treeNode) { + return this.timeout(1000).then(() => { + const child = generateTreeNodes(); + const treeData = [...this.state.treeData]; + treeData.forEach((item) => { + if (item.key === treeNode.props.eventKey) { + item.children = child; + } + }); + this.setState({treeData}); + return child; + }); + }, + render() { + const loop = (data) => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } else { + return ; + } + }) + }; + const parseTreeNode = data => loop(data); + let treeNodes = parseTreeNode(this.state.treeData); + return ( + + {treeNodes} + + ) + } +}) + +ReactDOM.render(, document.getElementById('components-tree-demo-dynamic')); +```` diff --git a/components/tree/demo/special.md b/components/tree/demo/special.md index 9262ee17f3..cd9e2d606e 100644 --- a/components/tree/demo/special.md +++ b/components/tree/demo/special.md @@ -7,9 +7,8 @@ --- ````jsx -var Tree = antd.Tree; -var TreeNode = Tree.TreeNode; -var Button = antd.Button; +import { Tree, Button } from 'antd'; +const TreeNode = Tree.TreeNode; class TreeDemo extends React.Component { constructor(props) { diff --git a/components/tree/index.md b/components/tree/index.md index c850733327..28301382ec 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -24,6 +24,7 @@ |defaultSelectedKeys | 默认选中的树节点 | String[] | [] | |onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | |onSelect | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys,event}) | - | +|onDataLoaded | 异步加载数据 | function(node)| - | ### TreeNode props diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index b3c550492f..cec526233a 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -4,30 +4,19 @@ import Icon from '../iconfont'; const prefixCls = 'ant-upload'; - export default React.createClass({ getDefaultProps() { return { items: [] }; }, - getInitialState() { - return { - items: this.props.items - }; - }, - componentWillReceiveProps(nextProps) { - if ('items' in nextProps) { - this.setState({ - items: nextProps.items - }); - } - }, + handleClose(file) { this.props.onRemove(file); }, + render() { - let list = this.state.items.map((file) => { + let list = this.props.items.map((file) => { let statusIcon = file.status === 'done' ? : ; diff --git a/docs/getting-started.md b/docs/getting-started.md index 1c61ae868f..b1880b6c4c 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -13,7 +13,7 @@ Ant Design React 致力于提供给程序员愉悦的开发体验。 ### 1. 安装命令行工具 ```bash -$ npm install antd-bin -g +$ npm install antd-init -g ``` [更多使用说明](https://github.com/ant-design/antd-bin#使用说明)。 @@ -24,7 +24,7 @@ $ npm install antd-bin -g ```bash $ mkdir antd-demo && cd antd-demo -$ antd init +$ antd-init $ npm install ``` diff --git a/package.json b/package.json index de80d37ebf..c4118e3c8e 100644 --- a/package.json +++ b/package.json @@ -55,10 +55,10 @@ "rc-slider": "~1.5.0", "rc-steps": "~1.4.0", "rc-switch": "~1.2.0", - "rc-table": "~3.3.0", + "rc-table": "~3.4.0", "rc-tabs": "~5.4.3", "rc-tooltip": "~3.0.1", - "rc-tree": "~0.16.2", + "rc-tree": "~0.18.1", "rc-upload": "~1.6.4", "rc-util": "~2.0.3", "react-slick": "~0.8.0", diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less index 5043b62603..dc09cb2b55 100644 --- a/style/components/datepicker/Calendar.less +++ b/style/components/datepicker/Calendar.less @@ -90,6 +90,7 @@ border: 0; width: 100%; cursor: auto; + outline: 0; } &-week-number { @@ -156,6 +157,7 @@ padding: 0; background: transparent; text-align: center; + transition: background 0.3s ease; &:hover { background: tint(@primary-color, 90%); @@ -233,6 +235,35 @@ margin: 0 0 0 8px; } + .@{calendar-prefix-cls}-clear-btn { + position: absolute; + right: 6px; + text-indent: -99px; + overflow: hidden; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + top: 6px; + margin: 0; + } + + .@{calendar-prefix-cls}-clear-btn:after { + content: "\e620"; + font-family: "anticon"; + font-size: 12px; + color: #aaa; + display: inline-block; + line-height: 1; + width: 20px; + text-indent: 43px; + transition: color 0.3s ease; + } + + .@{calendar-prefix-cls}-clear-btn:hover:after { + color: #666; + } + .@{calendar-prefix-cls}-ok-btn { .btn; .btn-primary; diff --git a/style/components/datepicker/DecadePanel.less b/style/components/datepicker/DecadePanel.less index b43e5bc9ec..0903100732 100644 --- a/style/components/datepicker/DecadePanel.less +++ b/style/components/datepicker/DecadePanel.less @@ -39,6 +39,7 @@ line-height: 24px; padding: 0 6px; border-radius: 4px; + transition: background 0.3s ease; &:hover { background: tint(@primary-color, 90%); diff --git a/style/components/datepicker/MonthPanel.less b/style/components/datepicker/MonthPanel.less index 9207437a6d..3ef789e370 100644 --- a/style/components/datepicker/MonthPanel.less +++ b/style/components/datepicker/MonthPanel.less @@ -39,6 +39,7 @@ line-height: 24px; padding: 0 6px; border-radius: 4px; + transition: background 0.3s ease; &:hover { background: tint(@primary-color, 90%); diff --git a/style/components/datepicker/TimePanel.less b/style/components/datepicker/TimePanel.less index f57f418ce8..6024b4bb7e 100644 --- a/style/components/datepicker/TimePanel.less +++ b/style/components/datepicker/TimePanel.less @@ -54,6 +54,7 @@ border-radius: 4px; margin: 0 auto; color: #666; + transition: background 0.3s ease; &:hover { background: tint(@primary-color, 90%); diff --git a/style/components/datepicker/YearPanel.less b/style/components/datepicker/YearPanel.less index 8d323d6ad7..ded66208c4 100644 --- a/style/components/datepicker/YearPanel.less +++ b/style/components/datepicker/YearPanel.less @@ -39,6 +39,7 @@ line-height: 24px; padding: 0 6px; border-radius: 4px; + transition: background 0.3s ease; &:hover { background: tint(@primary-color, 90%); diff --git a/style/components/tree.less b/style/components/tree.less index 5e986edfe5..830b58c38d 100644 --- a/style/components/tree.less +++ b/style/components/tree.less @@ -57,6 +57,16 @@ cursor: pointer; outline: none; } + &.@{tree-prefix-cls}-icon_loading { + &:after { + content: '\e610'; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + .animation(loadingCircle 1s infinite linear); + margin-top:8px; + } + } &.@{tree-prefix-cls}-switcher { &-disabled { background: #fff;