From 8c50e283f64a4d2021760932c41607cc5fe94f70 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 31 Dec 2015 15:57:24 +0800 Subject: [PATCH 01/38] fix: FormItem should support long help message #785 --- components/form/FormItem.jsx | 1 + components/form/demo/mix.md | 4 ++-- style/components/form.less | 9 +++++---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index b1ac4660f2..724bbabae6 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -108,6 +108,7 @@ class FormItem extends React.Component { const itemClassName = { [`${prefixCls}-item`]: true, [`${prefixCls}-item-compact`]: this._isCompact(props.children), + [`${prefixCls}-item-with-help`]: !!props.help, }; return ( diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 6ecfd53f40..64ee51e626 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -120,13 +120,13 @@ const Demo = React.createClass({ + wrapperCol={{span: 16}} + help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长"> -

仅支持上传一张。

 diff --git a/style/components/form.less b/style/components/form.less index 5fb75dc1c3..8a9c884def 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -71,6 +71,10 @@ input[type="checkbox"] { margin-bottom: @form-item-margin-bottom; color: #666; + &.@{css-prefix}form-item-with-help { + margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base; + } + > label { color: @label-color; text-align: right; @@ -104,10 +108,7 @@ input[type="checkbox"] { } .@{css-prefix}form-explain { - position: absolute; - font-size: @font-size-base; - line-height: @line-height-base; - bottom: -@line-height-computed; + float: left; } From f4865e85d0369c14b789b918e55fc8a8c773532b Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Dec 2015 16:52:05 +0800 Subject: [PATCH 02/38] select item text overflow, close #796 --- style/components/select.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/components/select.less b/style/components/select.less index 7e2fefe422..cf273624e1 100644 --- a/style/components/select.less +++ b/style/components/select.less @@ -377,6 +377,8 @@ color: #666; white-space: nowrap; cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; overflow: hidden; transition: background 0.3s ease; From dc1455ecc44a16808c93cfe53e944d3e428f6d8e Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Dec 2015 17:34:04 +0800 Subject: [PATCH 03/38] Add dropdown submenu demo and style, close #797 --- components/dropdown/demo/sub-menu.md | 29 ++++++++++++++++ style/components/dropdown.less | 52 ++++++++++++++++++++-------- 2 files changed, 67 insertions(+), 14 deletions(-) create mode 100644 components/dropdown/demo/sub-menu.md diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md new file mode 100644 index 0000000000..841d9f86b8 --- /dev/null +++ b/components/dropdown/demo/sub-menu.md @@ -0,0 +1,29 @@ +# 多级菜单 + +- order: 5 + +传入的菜单里有多个层级。 + +--- + +````jsx +import { Menu, Dropdown, Icon } from 'antd'; +const SubMenu = Menu.SubMenu; + +const menu = + 第一个菜单项 + 第二个菜单项 + + 第三个菜单项 + 第四个菜单项 + +; + +ReactDOM.render( + + + 多级菜单 + + +, mountNode); +```` diff --git a/style/components/dropdown.less b/style/components/dropdown.less index 3aab30681a..87e940a718 100644 --- a/style/components/dropdown.less +++ b/style/components/dropdown.less @@ -30,7 +30,8 @@ } } - &-hidden { + &-hidden, + &-menu-hidden { display: none; } @@ -46,15 +47,11 @@ box-shadow: @box-shadow-base; background-clip: padding-box; border: 1px solid @border-color-base; - overflow: hidden; - > li { - margin: 0; - padding: 0; - } - - & > &-item { + &-item, + &-submenu-title { padding: 7px 15px; + margin: 0; clear: both; font-size: 12px; font-weight: normal; @@ -86,14 +83,12 @@ } } - &:last-child { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + &:first-child { + border-radius: @border-radius-base @border-radius-base 0 0; } - &:first-child { - border-top-left-radius: 3px; - border-top-right-radius: 3px; + &:last-child { + border-radius: 0 0 @border-radius-base @border-radius-base; } &-divider { @@ -103,6 +98,35 @@ line-height: 0; } } + + &-submenu-title:after { + font-family: "anticon" !important; + position: absolute; + content: "\e600"; + right: 15px; + color: #999; + .iconfont-size-under-12px(8px); + } + + &-submenu-vertical { + position: relative; + } + + &-submenu-vertical > & { + top: 0; + left: 100%; + position: absolute; + min-width: 100%; + margin-left: 4px; + } + + &-submenu:first-child &-submenu-title { + border-radius: @border-radius-base @border-radius-base 0 0; + } + + &-submenu:last-child &-submenu-title { + border-radius: 0 0 @border-radius-base @border-radius-base; + } } &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, From d79562075a8035ac0da2511bd0e7eb9921e8c389 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Dec 2015 17:36:37 +0800 Subject: [PATCH 04/38] update select demo --- components/select/demo/coordinate.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index 07b9e5224f..89f158977f 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -43,10 +43,10 @@ const App = React.createClass({ return ; }); return
- {provinceOptions} - {cityOptions}
; From ba51e65c3decb7534abd7a6a3153d9429a61a44c Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Dec 2015 17:55:45 +0800 Subject: [PATCH 05/38] Add animation for dropdown submenu, ref #797 --- components/dropdown/dropdown.jsx | 6 +++- components/menu/index.jsx | 54 ++++++++++++++++++-------------- style/components/dropdown.less | 1 + 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index adf393555a..1c44242cfa 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -9,8 +9,12 @@ export default React.createClass({ }; }, render: function () { + const { overlay, ...otherProps } = this.props; + const menu = React.cloneElement(overlay, { + openTransitionName: 'zoom-big', + }); return ( - + ); } }); diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 15c2208f5c..401cd45e6b 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -40,35 +40,43 @@ const AntMenu = React.createClass({ this.props.onClose(e); }, render() { - let openAnimation = ''; - switch (this.props.mode) { - case 'horizontal': - openAnimation = 'slide-up'; - break; - case 'vertical': - openAnimation = 'zoom-big'; - break; - case 'inline': - openAnimation = animation; - break; - default: + let openAnimation = this.props.openAnimation || this.props.openTransitionName; + if (!openAnimation) { + switch (this.props.mode) { + case 'horizontal': + openAnimation = 'slide-up'; + break; + case 'vertical': + openAnimation = 'zoom-big'; + break; + case 'inline': + openAnimation = animation; + break; + default: + } } - // 这组属性的目的是 - // 弹出型的菜单需要点击后立即关闭 - // 另外，弹出型的菜单的受控模式没有使用场景 - let props = { - openKeys: this.state.openKeys, - onClick: this.handleClick, - onOpen: this.handleOpenKeys, - onClose: this.handleCloseKeys, - }; + let props = {}; const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme; if (this.props.mode === 'inline') { - return ; + // 这组属性的目的是 + // 弹出型的菜单需要点击后立即关闭 + // 另外，弹出型的菜单的受控模式没有使用场景 + props = { + openKeys: this.state.openKeys, + onClick: this.handleClick, + onOpen: this.handleOpenKeys, + onClose: this.handleCloseKeys, + openAnimation, + className, + }; } else { - return ; + props = { + openTransitionName: openAnimation, + className, + }; } + return ; } }); diff --git a/style/components/dropdown.less b/style/components/dropdown.less index 87e940a718..3603f28376 100644 --- a/style/components/dropdown.less +++ b/style/components/dropdown.less @@ -118,6 +118,7 @@ position: absolute; min-width: 100%; margin-left: 4px; + transform-origin: 0 0; } &-submenu:first-child &-submenu-title { From 2ca31c7cacf4ef189fa4d3217a7773101c12e6fd Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Dec 2015 18:32:19 +0800 Subject: [PATCH 06/38] update jsfiddle link --- CONTRIBUTING.md | 2 +- docs/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7c6f5b9990..4dfa808ad4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,7 +32,7 @@ P.S. ## Providing a demo while reporting a bug -It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/9zrstuto/70/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug. +It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/0dso5y0x/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug. ## Tips about Feature Request diff --git a/docs/getting-started.md b/docs/getting-started.md index 19f2f15fe6..fdf69745fa 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -11,7 +11,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。 -- [antd JSFiddle](http://jsfiddle.net/9zrstuto/70/) +- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/) ## 标准开发 From 803a8d4ccc6125a5a8fcccc50b4236d747d9ee3a Mon Sep 17 00:00:00 2001 From: shouyong Date: Fri, 1 Jan 2016 10:35:11 +0800 Subject: [PATCH 07/38] =?UTF-8?q?=E4=BF=AE=E5=A4=8DDemo=E6=97=A0=E6=95=88?= =?UTF-8?q?=E7=9A=84BUG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DatePicker的onSelect接口变更为onChange。 --- docs/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index fdf69745fa..3284ffc4e1 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -63,7 +63,7 @@ const App = React.createClass({ }, render() { return
- +
当前日期：{this.state.date.toString()}
; } From f29dd1afa0c98f78d6fa7df35b97b5a51c7c5e01 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 15:08:50 +0800 Subject: [PATCH 08/38] fix site style --- site/static/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/site/static/style.css b/site/static/style.css index 51be095263..11b3e14765 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -584,6 +584,7 @@ footer ul li > a { .markdown pre { border-radius: 6px; + background: #f9f9f9; } .markdown pre code { From d39e5ca4bc3bd36ffdfdcbfce3f7d93752bdd978 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 16:09:58 +0800 Subject: [PATCH 09/38] fix site style --- site/static/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/static/style.css b/site/static/style.css index 11b3e14765..6f86ef9108 100644 --- a/site/static/style.css +++ b/site/static/style.css @@ -1711,11 +1711,12 @@ footer ul li > a { width: 48%; display: inline-block; vertical-align: top; - padding-right: 15px; + padding-right: 8px; } .code-boxes-col-2-1:last-child { padding-right: 0; + padding-left: 8px; } .code-box { From 092e2e1ac695071c3c7dfbe00ee250a6b95b8308 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 18:53:57 +0800 Subject: [PATCH 10/38] empty selectedRowKeys when dataSource changed, ref #793 --- components/table/index.jsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 0bcbcbbaba..13dc5c6102 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -91,18 +91,9 @@ let AntTable = React.createClass({ // 外界只有 dataSource 的变化会触发新请求 if ('dataSource' in nextProps && nextProps.dataSource !== this.props.dataSource) { - let selectedRowKeys = this.state.selectedRowKeys; - // 把不在当前页的选中项去掉 - let currentPageRowKeys = - this.getCurrentPageData(nextProps.dataSource).map( - (record, i) => this.getRecordKey(record, i) - ); - selectedRowKeys = selectedRowKeys.filter((key) => { - return currentPageRowKeys.indexOf(key) >= 0; - }); this.setState({ selectionDirty: false, - selectedRowKeys, + selectedRowKeys: [], }); } }, From 01468cdc541037b9ea40c809f62bcf143949605c Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 19:00:34 +0800 Subject: [PATCH 11/38] improve getDefaultSelection code implementation --- components/table/index.jsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 13dc5c6102..d851814730 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -67,19 +67,12 @@ let AntTable = React.createClass({ }, getDefaultSelection() { - let selectedRowKeys = []; - if (this.props.rowSelection && this.props.rowSelection.getCheckboxProps) { - let data = this.getCurrentPageData(); - data.filter((item) => { - if (this.props.rowSelection.getCheckboxProps) { - return this.props.rowSelection.getCheckboxProps(item).defaultChecked; - } - return true; - }).map((record, rowIndex) => { - selectedRowKeys.push(this.getRecordKey(record, rowIndex)); - }); + if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) { + return []; } - return selectedRowKeys; + return this.getCurrentPageData() + .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked) + .map((record, rowIndex) => this.getRecordKey(record, rowIndex)); }, componentWillReceiveProps(nextProps) { From b276ca65fca02afd34b20f071033555be5936f54 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 19:07:28 +0800 Subject: [PATCH 12/38] checkAll should be disabled when every checkbox is disabled --- components/table/index.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index d851814730..12dd5eb1e0 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -317,7 +317,14 @@ let AntTable = React.createClass({ className: 'ant-table-selection-column' }; } else { - let checkboxAll = ; + const checkboxAllDisabled = data.every(item => + this.props.rowSelection.getCheckboxProps && + this.props.rowSelection.getCheckboxProps(item).disabled); + const checkboxAll = ( + + ); selectionColumn = { key: 'selection-column', title: checkboxAll, From 27908bf42e7e4bf809d53a12adda9fe5503bdef0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 19:49:02 +0800 Subject: [PATCH 13/38] Fix disabled checkbox logic in table rowSelection --- components/table/index.jsx | 47 +++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 12dd5eb1e0..5af5afeabb 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -152,11 +152,8 @@ let AntTable = React.createClass({ }, handleSelect(record, rowIndex, e) { - let checked = e.target.checked; - let defaultSelection = []; - if (!this.state.selectionDirty) { - defaultSelection = this.getDefaultSelection(); - } + const checked = e.target.checked; + const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); let key = this.getRecordKey(record, rowIndex); if (checked) { @@ -180,11 +177,8 @@ let AntTable = React.createClass({ }, handleRadioSelect: function (record, rowIndex, e) { - let checked = e.target.checked; - let defaultSelection = []; - if (!this.state.selectionDirty) { - defaultSelection = this.getDefaultSelection(); - } + const checked = e.target.checked; + const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); let key = this.getRecordKey(record, rowIndex); selectedRowKeys = [key]; @@ -203,18 +197,29 @@ let AntTable = React.createClass({ }, handleSelectAllRow(e) { - let checked = e.target.checked; - let data = this.getCurrentPageData(); - let selectedRowKeys = checked ? data.filter((item) => { - if (this.props.rowSelection.getCheckboxProps) { - return !this.props.rowSelection.getCheckboxProps(item).disabled; - } - return true; - }).map((item, i) => { - return this.getRecordKey(item, i); - }) : []; + const checked = e.target.checked; + const data = this.getCurrentPageData(); + const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); + const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); + const changableRowKeys = data.filter(item => + !this.props.rowSelection.getCheckboxProps || + !this.props.rowSelection.getCheckboxProps(item).disabled + ).map((item, i) => this.getRecordKey(item, i)); + if (checked) { + changableRowKeys.forEach(key => { + if (selectedRowKeys.indexOf(key) < 0) { + selectedRowKeys.push(key); + } + }); + } else { + changableRowKeys.forEach(key => { + if (selectedRowKeys.indexOf(key) >= 0) { + selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1); + } + }); + } this.setState({ - selectedRowKeys: selectedRowKeys, + selectedRowKeys, selectionDirty: true }); if (this.props.rowSelection.onSelectAll) { From 28b75ce8da75d5b7600adfddccd36cf44068d08d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 20:08:30 +0800 Subject: [PATCH 14/38] Add rowSelection onChange, #786 --- components/table/demo/row-selection-props.md | 5 ++++- .../table/demo/row-selection-radio-props.md | 3 --- components/table/demo/row-selection.md | 3 +++ components/table/index.jsx | 19 +++++++++++++++++-- 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md index 7740a541a3..cfe6473a09 100644 --- a/components/table/demo/row-selection-props.md +++ b/components/table/demo/row-selection-props.md @@ -47,12 +47,15 @@ const rowSelection = { disabled: record.name === '胡彦祖' // 配置无法勾选的列 }; }, + onChange(selectedRowKeys) { + console.log('selectedRowKeys changed: ' + selectedRowKeys); + }, onSelect: function(record, selected, selectedRows) { console.log(record, selected, selectedRows); }, onSelectAll: function(selected, selectedRows) { console.log(selected, selectedRows); - } + }, }; ReactDOM.render( diff --git a/components/table/demo/row-selection-radio-props.md b/components/table/demo/row-selection-radio-props.md index d8fa9578dd..ac87677e68 100644 --- a/components/table/demo/row-selection-radio-props.md +++ b/components/table/demo/row-selection-radio-props.md @@ -51,9 +51,6 @@ const rowSelection = { onSelect: function(record, selected, selectedRows) { console.log(record, selected, selectedRows); }, - onSelectAll: function(selected, selectedRows) { - console.log(selected, selectedRows); - } }; function rowKey(record) { diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 17e2d59335..980f4bd019 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -41,6 +41,9 @@ const data = [{ // 通过 rowSelection 对象表明需要行选择 const rowSelection = { + onChange(selectedRowKeys) { + console.log('selectedRowKeys changed: ' + selectedRowKeys); + }, onSelect: function(record, selected, selectedRows) { console.log(record, selected, selectedRows); }, diff --git a/components/table/index.jsx b/components/table/index.jsx index 5af5afeabb..58e8e1811a 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -88,6 +88,9 @@ let AntTable = React.createClass({ selectionDirty: false, selectedRowKeys: [], }); + if (this.props.rowSelection && this.props.rowSelection.onChange) { + this.props.rowSelection.onChange([]); + } } }, @@ -164,7 +167,7 @@ let AntTable = React.createClass({ }); } this.setState({ - selectedRowKeys: selectedRowKeys, + selectedRowKeys, selectionDirty: true }); if (this.props.rowSelection.onSelect) { @@ -174,6 +177,9 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelect(record, checked, selectedRows); } + if (this.props.rowSelection.onChange) { + this.props.rowSelection.onChange(selectedRowKeys); + } }, handleRadioSelect: function (record, rowIndex, e) { @@ -183,7 +189,7 @@ let AntTable = React.createClass({ let key = this.getRecordKey(record, rowIndex); selectedRowKeys = [key]; this.setState({ - selectedRowKeys: selectedRowKeys, + selectedRowKeys, radioIndex: key, selectionDirty: true }); @@ -194,6 +200,9 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelect(record, checked, selectedRows); } + if (this.props.rowSelection.onChange) { + this.props.rowSelection.onChange(selectedRowKeys); + } }, handleSelectAllRow(e) { @@ -228,6 +237,9 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelectAll(checked, selectedRows); } + if (this.props.rowSelection.onChange) { + this.props.rowSelection.onChange(selectedRowKeys); + } }, handlePageChange(current) { @@ -244,6 +256,9 @@ let AntTable = React.createClass({ pagination }; this.setState(newState); + if (this.props.rowSelection && this.props.rowSelection.onChange) { + this.props.rowSelection.onChange([]); + } this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); }, From ceeae97eb83ba465d4afd3a8a6b09b80eba17855 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 20:18:38 +0800 Subject: [PATCH 15/38] Add rowSelection API documentation --- components/table/index.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/components/table/index.md b/components/table/index.md index c186449016..b07b50c560 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -54,9 +54,9 @@ const columns = [{ ### Table -| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------------|--------------------------|-----------------|---------------------|---------| -| rowSelection | 列表项是否可选择 | Object | | false | +| rowSelection | 列表项是否可选择 | Object | [配置项](#rowSelection) | null | | pagination | 分页器 | Object | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 | | | size | 正常或迷你类型 | String | `default` or `small`| default | | dataSource | 数据数组 | Array | | | @@ -87,6 +87,18 @@ const columns = [{ | width | 列宽度 | String or Number | | 无 | | className | 列的 className | String | | 无 | +### rowSelection + +选择功能的配置。 + +| 参数 | 说明 | 类型 | 默认值 | +|------------------|--------------------------|-----------------|---------------------|---------| +| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | +| onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | - | +| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - | +| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(record, selected, selectedRows) | - | + + ## 注意 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。 From ec4522ca320de523d769606f19182342b8017ec1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 20:41:18 +0800 Subject: [PATCH 16/38] update CHANGELOG.md --- CHANGELOG.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f5906507ed..a0887bb5dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,18 @@ --- +## 0.11.2 `fixing` + +- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。 +- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771) +- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。 +- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu) +- Table + - 新增 rowSelection.onChange 方法。 + - 更新 dataSource 时，选中项现在会被清空。 + - 修复一个全选框和禁用的选择项配合的问题。 +- 组件和文档的样式小调整。 + ## 0.11.1 `2015-12-29` - 修复一个 Table 无法修改 pageSize 的问题。 From 34f9ab05b0124ad23a4ec26893ffb6f455b70be0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 22:34:59 +0800 Subject: [PATCH 17/38] make selected item can be controlled, #793 --- .../table/demo/row-selection-and-operation.md | 83 +++++++++++++++++++ .../table/demo/row-selection-radio-props.md | 62 -------------- components/table/index.jsx | 54 ++++++------ 3 files changed, 110 insertions(+), 89 deletions(-) create mode 100644 components/table/demo/row-selection-and-operation.md delete mode 100644 components/table/demo/row-selection-radio-props.md diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md new file mode 100644 index 0000000000..45ca75545a --- /dev/null +++ b/components/table/demo/row-selection-and-operation.md @@ -0,0 +1,83 @@ +# 选择和操作 + +- order: 4 + +选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。 + +--- + +````jsx +import { Table, Button } from 'antd'; + +const columns = [{ + title: '姓名', + dataIndex: 'name', + render: function(text) { + return {text}; + } +}, { + title: '年龄', + dataIndex: 'age' +}, { + title: '住址', + dataIndex: 'address' +}]; + +const data = [{ + key: '1', + name: '胡彦斌', + age: 32, + address: '西湖区湖底公园1号' +}, { + key: '2', + name: '胡彦祖', + age: 42, + address: '西湖区湖底公园1号' +}, { + key: '3', + name: '李大嘴', + age: 32, + address: '西湖区湖底公园1号' +}]; + +const App = React.createClass({ + getInitialState() { + return { + selectedRowKeys: [], + loading: false, + }; + }, + start() { + this.setState({ loading: true }); + // 模拟 ajax 请求，完成后清空 + setTimeout(() => { + this.setState({ + selectedRowKeys: [], + loading: false, + }); + }, 1000); + }, + onSelectChange(selectedRowKeys) { + console.log('onSelectChange', selectedRowKeys) + this.setState({ selectedRowKeys }); + }, + render() { + const { loading, selectedRowKeys } = this.state; + const rowSelection = { + selectedRowKeys, + onChange: this.onSelectChange, + }; + const hasSelected = selectedRowKeys.length > 0; + return
+
+ + {hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''} +
+
+ ; + } +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/table/demo/row-selection-radio-props.md b/components/table/demo/row-selection-radio-props.md deleted file mode 100644 index ac87677e68..0000000000 --- a/components/table/demo/row-selection-radio-props.md +++ /dev/null @@ -1,62 +0,0 @@ -# 单选 - -- order: 4 - -配置单选框的默认属性。 - ---- - -````jsx -import { Table } from 'antd'; - -const columns = [{ - title: '姓名', - dataIndex: 'name', - render: function(text) { - return {text}; - } -}, { - title: '年龄', - dataIndex: 'age' -}, { - title: '住址', - dataIndex: 'address' -}]; -const data = [{ - id: '1', - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号' -}, { - id: '2', - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号' -}, { - id: '3', - name: '李大嘴', - age: 32, - address: '西湖区湖底公园1号' -}]; - -// 通过 rowSelection 对象表明需要行选择 -const rowSelection = { - type: 'radio', - getCheckboxProps: function(record) { - return { - defaultChecked: record.name === '李大嘴', // 配置默认勾选的列 - disabled: record.name === '胡彦祖' // 配置无法勾选的列 - }; - }, - onSelect: function(record, selected, selectedRows) { - console.log(record, selected, selectedRows); - }, -}; - -function rowKey(record) { - return record.id; -} - -ReactDOM.render(
-, mountNode); -```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 58e8e1811a..c2c0e73049 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -23,7 +23,7 @@ let AntTable = React.createClass({ getInitialState() { return { // 减少状态 - selectedRowKeys: [], + selectedRowKeys: this.props.selectedRowKeys || [], filters: {}, selectionDirty: false, sortColumn: '', @@ -81,16 +81,29 @@ let AntTable = React.createClass({ pagination: objectAssign({}, this.state.pagination, nextProps.pagination) }); } - // 外界只有 dataSource 的变化会触发新请求 + // dataSource 的变化会清空选中项 if ('dataSource' in nextProps && nextProps.dataSource !== this.props.dataSource) { this.setState({ selectionDirty: false, - selectedRowKeys: [], }); - if (this.props.rowSelection && this.props.rowSelection.onChange) { - this.props.rowSelection.onChange([]); - } + this.setSelectedRowKeys([]); + } + if (nextProps.rowSelection && + 'selectedRowKeys' in nextProps.rowSelection) { + this.setState({ + selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [], + }); + } + }, + + setSelectedRowKeys(selectedRowKeys) { + if (this.props.rowSelection && + !('selectedRowKeys' in this.props.rowSelection)) { + this.setState({ selectedRowKeys }); + } + if (this.props.rowSelection && this.props.rowSelection.onChange) { + this.props.rowSelection.onChange(selectedRowKeys); } }, @@ -146,11 +159,11 @@ let AntTable = React.createClass({ } }); const newState = { - selectedRowKeys: [], selectionDirty: false, filters }; this.setState(newState); + this.setSelectedRowKeys([]); this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); }, @@ -167,9 +180,9 @@ let AntTable = React.createClass({ }); } this.setState({ - selectedRowKeys, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { let data = this.getCurrentPageData(); let selectedRows = data.filter((row, i) => { @@ -177,9 +190,6 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelect(record, checked, selectedRows); } - if (this.props.rowSelection.onChange) { - this.props.rowSelection.onChange(selectedRowKeys); - } }, handleRadioSelect: function (record, rowIndex, e) { @@ -189,10 +199,10 @@ let AntTable = React.createClass({ let key = this.getRecordKey(record, rowIndex); selectedRowKeys = [key]; this.setState({ - selectedRowKeys, radioIndex: key, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { let data = this.getCurrentPageData(); let selectedRows = data.filter((row, i) => { @@ -200,9 +210,6 @@ let AntTable = React.createClass({ }); this.props.rowSelection.onSelect(record, checked, selectedRows); } - if (this.props.rowSelection.onChange) { - this.props.rowSelection.onChange(selectedRowKeys); - } }, handleSelectAllRow(e) { @@ -228,18 +235,15 @@ let AntTable = React.createClass({ }); } this.setState({ - selectedRowKeys, - selectionDirty: true + selectionDirty: true, }); + this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelectAll) { let selectedRows = data.filter((row, i) => { return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; }); this.props.rowSelection.onSelectAll(checked, selectedRows); } - if (this.props.rowSelection.onChange) { - this.props.rowSelection.onChange(selectedRowKeys); - } }, handlePageChange(current) { @@ -250,15 +254,11 @@ let AntTable = React.createClass({ pagination.current = pagination.current || 1; } const newState = { - // 防止内存泄漏，只维持当页 - selectedRowKeys: [], selectionDirty: false, pagination }; this.setState(newState); - if (this.props.rowSelection && this.props.rowSelection.onChange) { - this.props.rowSelection.onChange([]); - } + this.setSelectedRowKeys([]); this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState))); }, From 76aa90f67bf311b87cd25b92baabc8013e970f30 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 22:38:19 +0800 Subject: [PATCH 18/38] update document for table selection change --- CHANGELOG.md | 2 +- .../table/demo/row-selection-and-operation.md | 14 +++++--------- components/table/index.md | 3 ++- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a0887bb5dd..21e268b690 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ - 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。 - Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu) - Table - - 新增 rowSelection.onChange 方法。 + - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。 - 更新 dataSource 时，选中项现在会被清空。 - 修复一个全选框和禁用的选择项配合的问题。 - 组件和文档的样式小调整。 diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 45ca75545a..377bfea5c8 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -12,32 +12,29 @@ import { Table, Button } from 'antd'; const columns = [{ title: '姓名', dataIndex: 'name', - render: function(text) { - return {text}; - } }, { title: '年龄', - dataIndex: 'age' + dataIndex: 'age', }, { title: '住址', - dataIndex: 'address' + dataIndex: 'address', }]; const data = [{ key: '1', name: '胡彦斌', age: 32, - address: '西湖区湖底公园1号' + address: '西湖区湖底公园1号', }, { key: '2', name: '胡彦祖', age: 42, - address: '西湖区湖底公园1号' + address: '西湖区湖底公园1号', }, { key: '3', name: '李大嘴', age: 32, - address: '西湖区湖底公园1号' + address: '西湖区湖底公园1号', }]; const App = React.createClass({ @@ -58,7 +55,6 @@ const App = React.createClass({ }, 1000); }, onSelectChange(selectedRowKeys) { - console.log('onSelectChange', selectedRowKeys) this.setState({ selectedRowKeys }); }, render() { diff --git a/components/table/index.md b/components/table/index.md index b07b50c560..c69d94ef09 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -93,8 +93,9 @@ const columns = [{ | 参数 | 说明 | 类型 | 默认值 | |------------------|--------------------------|-----------------|---------------------|---------| -| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | +| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | [] | | onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | - | +| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | | onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - | | onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(record, selected, selectedRows) | - | From cf65eade1f994ac7197732bdfe9ccb34ab2bec8e Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 22:39:24 +0800 Subject: [PATCH 19/38] fix react family version --- CHANGELOG.md | 1 + package.json | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21e268b690..b71fb50308 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - 更新 dataSource 时，选中项现在会被清空。 - 修复一个全选框和禁用的选择项配合的问题。 - 组件和文档的样式小调整。 +- 修复 `0.11.1`版本 对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。 ## 0.11.1 `2015-12-29` diff --git a/package.json b/package.json index fb87c352fe..8cd25af515 100644 --- a/package.json +++ b/package.json @@ -99,10 +99,10 @@ "lodash": "^3.10.0", "nico-jsx": "~0.7.0", "pre-commit": "1.x", - "react": "~0.14.5", - "react-addons-test-utils": "~0.14.5", + "react": "0.14.x", + "react-addons-test-utils": "0.14.x", "react-copy-to-clipboard": "^3.0.4", - "react-dom": "~0.14.5", + "react-dom": "0.14.x", "react-router": "~1.0.3", "react-stateless-wrapper": "~1.0.2", "reqwest": "~2.0.5", From 7866f177cc1aab7b2f208de00ee9efa1950fea4d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 22:51:26 +0800 Subject: [PATCH 20/38] update table selection demo --- .../table/demo/row-selection-and-operation.md | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 377bfea5c8..eb23cc632c 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -4,6 +4,8 @@ 选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。 +不支持跨页选择，选中项只限当页，换页后将会清空。 + --- ````jsx @@ -20,22 +22,15 @@ const columns = [{ dataIndex: 'address', }]; -const data = [{ - key: '1', - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号', -}, { - key: '2', - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号', -}, { - key: '3', - name: '李大嘴', - age: 32, - address: '西湖区湖底公园1号', -}]; +const data = []; +for (let i = 0; i < 46; i++) { + data.push({ + key: i, + name: '李大嘴' + i, + age: 32, + address: '西湖区湖底公园' + i + '号' + }); +} const App = React.createClass({ getInitialState() { @@ -55,6 +50,7 @@ const App = React.createClass({ }, 1000); }, onSelectChange(selectedRowKeys) { + console.log('selectedRowKeys changed: ' + selectedRowKeys); this.setState({ selectedRowKeys }); }, render() { From a570b25e0a0402c7faf37de83ac3ddb83ecff0d1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 1 Jan 2016 22:55:25 +0800 Subject: [PATCH 21/38] update table API doc --- components/table/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/table/index.md b/components/table/index.md index c69d94ef09..baf7ccfc9f 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -93,6 +93,7 @@ const columns = [{ | 参数 | 说明 | 类型 | 默认值 | |------------------|--------------------------|-----------------|---------------------|---------| +| type | 多选/单选，`checkbox` or `radio` | String | `checkbox` | | selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | [] | | onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | - | | getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | From 77a59bbd76da370e3a0da7676507aacbe0a2c3f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:16:02 +0800 Subject: [PATCH 22/38] add tree-select --- components/tree-select/demo/basic.md | 55 ++++++++++++++ components/tree-select/demo/enhance.md | 99 ++++++++++++++++++++++++++ components/tree-select/index.jsx | 57 +++++++++++++++ components/tree-select/index.md | 28 ++++++++ index.js | 1 + package.json | 3 +- 6 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 components/tree-select/demo/basic.md create mode 100644 components/tree-select/demo/enhance.md create mode 100644 components/tree-select/index.jsx create mode 100644 components/tree-select/index.md diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md new file mode 100644 index 0000000000..211f7b4cf8 --- /dev/null +++ b/components/tree-select/demo/basic.md @@ -0,0 +1,55 @@ +# 基本 + +- order: 0 + +最简单的用法。 + +--- + +````jsx +import { TreeSelect } from 'antd'; +const TreeNode = TreeSelect.TreeNode; + +const Demo = React.createClass({ + getInitialState() { + return { + value: '1', + }; + }, + onChange(e) { + let value; + if (e.target) { + value = e.target.value; + } else { + value = e; + } + this.setState({value}); + }, + render() { + return ( +
+

Single Select

+ + + + + + + + sss} /> + + + +
+ ); + }, +}); + +ReactDOM.render( + +, document.getElementById('components-tree-select-demo-basic')); +```` diff --git a/components/tree-select/demo/enhance.md b/components/tree-select/demo/enhance.md new file mode 100644 index 0000000000..f6a3096996 --- /dev/null +++ b/components/tree-select/demo/enhance.md @@ -0,0 +1,99 @@ +# 更多功能 + +- order: 1 + +更多功能。 + +--- + +````jsx +import { TreeSelect } from 'antd'; +const TreeNode = TreeSelect.TreeNode; + +const x = 5; +const y = 3; +const z = 2; +const gData = []; +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({title: key, key: key}); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const __level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(__level, key, tns[index].children); + }); +}; +generateData(z); + +const Demo = React.createClass({ + getInitialState() { + return { + value: [], + }; + }, + onDeselect(selectedValue) { + console.log('onDeselect', selectedValue); + const newVal = [...this.state.value]; + newVal.splice(newVal.indexOf(selectedValue), 1); + this.setState({ + value: newVal, + }); + }, + onSelect(selectedKey, node, selectedKeys) { + console.log('selected: ', selectedKey, selectedKeys); + this.setState({ + value: selectedKeys, + }); + }, + onCheck(checkedKey, node, checkedKeys) { + console.log('onCheck:', checkedKey); + this.setState({ + value: checkedKeys, + }); + }, + render() { + const loop = data => { + return data.map((item) => { + if (item.children) { + return {loop(item.children)}; + } + return ; + }); + }; + const treeProps = { + showIcon: false, + showLine: true, + checkable: true, + defaultCheckedKeys: this.state.value, + defaultSelectedKeys: this.state.value, + // selectedKeys: this.state.value, + // checkedKeys: this.state.value, + // onCheck: this.onCheck, + }; + return (
+

more

+ + {loop(gData)} + +
); + }, +}); + +ReactDOM.render(
+ +
+, document.getElementById('components-tree-select-demo-enhance')); +```` diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx new file mode 100644 index 0000000000..aea1760da6 --- /dev/null +++ b/components/tree-select/index.jsx @@ -0,0 +1,57 @@ +import React from 'react'; +import TreeSelect, { TreeNode } from 'rc-tree-select'; +import classNames from 'classnames'; +import assign from 'object-assign'; +import animation from '../common/openAnimation'; + +const AntTreeSelect = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-select', + transitionName: 'slide-up', + optionLabelProp: 'value', + choiceTransitionName: 'zoom', + showSearch: false, + size: 'default' + }; + }, + render() { + const props = this.props; + let { + size, className, combobox, notFoundContent + } = this.props; + + const cls = classNames({ + 'ant-select-lg': size === 'large', + 'ant-select-sm': size === 'small', + [className]: !!className, + }); + + if (combobox) { + notFoundContent = null; + } + + const treeProps = { + prefixCls: 'ant-tree', + checkable: false, + showIcon: false, + openAnimation: animation + }; + assign(treeProps, props.treeProps); + + let checkable = treeProps.checkable; + if (checkable) { + treeProps.checkable = ; + } + + return ( + + ); + } +}); + +AntTreeSelect.TreeNode = TreeNode; +export default AntTreeSelect; diff --git a/components/tree-select/index.md b/components/tree-select/index.md new file mode 100644 index 0000000000..3e4cf4e5e1 --- /dev/null +++ b/components/tree-select/index.md @@ -0,0 +1,28 @@ +# TreeSelect + +- category: Components +- chinese: 树选择控件 +- type: 表单 + +--- + +## 何时使用 + +当需要从树控件中灵活地筛选数据时 + +## API + +### Tree props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|multiple | 是否支持多选 | bool | false | +|[select-props](http://ant.design/components/select/#select-props) | the same as select props | || +|treeProps | 和tree props相同（除了onSelect、onCheck） | | [tree-props](http://ant.design/components/tree/#tree-props) | + +### TreeNode props + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------------------------------------|------------|--------| +|value | default as optionFilterProp | String | 'value' | +|[treenode-props](http://ant.design/components/tree/#treenode-props) |和 treeNode props 相同||| diff --git a/index.js b/index.js index 0b5a8bbbbc..0b37921669 100644 --- a/index.js +++ b/index.js @@ -29,6 +29,7 @@ const antd = { Alert: require('./components/alert'), Validation: require('./components/validation'), Tree: require('./components/tree'), + TreeSelect: require('./components/tree-select'), Upload: require('./components/upload'), Badge: require('./components/badge'), Menu: require('./components/menu'), diff --git a/package.json b/package.json index 8cd25af515..72a7dc3c03 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ "rc-tabs": "~5.5.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", - "rc-tree": "~0.19.0", + "rc-tree": "^0.21.2", + "rc-tree-select": "~0.2.1", "rc-trigger": "~1.0.6", "rc-upload": "~1.7.0", "rc-util": "~3.0.1", From 59b999c9edbc86eabe5759d12a8dae54019bf531 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 28 Dec 2015 19:19:02 +0800 Subject: [PATCH 23/38] fix demo --- components/tree-select/demo/basic.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index 211f7b4cf8..01b94d91e2 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -37,10 +37,10 @@ const Demo = React.createClass({ - + - - sss} /> + + sss} key="random3" /> From c09332ce1d28cb4acd59cfdc8fcade89c0291105 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Tue, 29 Dec 2015 15:33:09 +0800 Subject: [PATCH 24/38] up demo --- components/tree-select/demo/basic.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index 01b94d91e2..e395225ae8 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -13,7 +13,7 @@ const TreeNode = TreeSelect.TreeNode; const Demo = React.createClass({ getInitialState() { return { - value: '1', + value: 'leaf1', }; }, onChange(e) { @@ -30,14 +30,14 @@ const Demo = React.createClass({

Single Select

- - + + sss} key="random3" /> From 9ee150b35997c64d5e9db93846b52a60589f5739 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 29 Dec 2015 20:38:31 +0800 Subject: [PATCH 25/38] up deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 72a7dc3c03..fe1e17a729 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "rc-steps": "~1.4.1", "rc-switch": "~1.3.1", "rc-table": "~3.7.1", - "rc-tabs": "~5.5.0", + "rc-tabs": "~5.6.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", "rc-tree": "^0.21.2", From ca840b22201563ec9a438332f7c9a5d9cbd39f43 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 29 Dec 2015 20:38:31 +0800 Subject: [PATCH 26/38] up deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fe1e17a729..5c3d4e1920 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.11.1", + "version": "0.12.0-alpha1", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 096c7d58d198235f83d0592673a4c5cef1e7f18e Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 11:46:13 +0800 Subject: [PATCH 27/38] Add cascade --- components/cascader/demo/basic.md | 43 ++++++++++++ components/cascader/demo/custom-trigger.md | 53 ++++++++++++++ components/cascader/demo/hover.md | 49 +++++++++++++ components/cascader/index.jsx | 53 ++++++++++++++ components/cascader/index.md | 15 ++++ index.js | 1 + package.json | 2 + style/components/cascader.less | 80 ++++++++++++++++++++++ style/components/index.less | 1 + 9 files changed, 297 insertions(+) create mode 100644 components/cascader/demo/basic.md create mode 100644 components/cascader/demo/custom-trigger.md create mode 100644 components/cascader/demo/hover.md create mode 100644 components/cascader/index.jsx create mode 100644 components/cascader/index.md create mode 100644 style/components/cascader.less diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md new file mode 100644 index 0000000000..fd2f89066c --- /dev/null +++ b/components/cascader/demo/basic.md @@ -0,0 +1,43 @@ +# 基本 + +- order: 0 + +省市级联。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + children: [{ + value: 'xihu', + label: '西湖', + }], + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + children: [{ + value: 'zhonghuamen', + label: '中华门', + }], + }], +}]; + +function onChange(value) { + console.log(value); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md new file mode 100644 index 0000000000..ddc07c01a1 --- /dev/null +++ b/components/cascader/demo/custom-trigger.md @@ -0,0 +1,53 @@ +# 可以自定义显示 + +- order: 1 + +切换按钮和结果分开。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + }], +}]; + +const CitySwitcher = React.createClass({ + getInitialState() { + return { + text: '未选择', + }; + }, + onChange(value, selectedOptions) { + this.setState({ + text: selectedOptions.map(o => o.label).join(', '), + }); + }, + render() { + return ( + + {this.state.text} +   + + 切换城市 + + + ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md new file mode 100644 index 0000000000..f9e51caa30 --- /dev/null +++ b/components/cascader/demo/hover.md @@ -0,0 +1,49 @@ +# 移入展开 + +- order: 2 + +通过移入展开下级菜单，点击完成选择。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + children: [{ + value: 'xihu', + label: '西湖', + }], + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + children: [{ + value: 'zhonghuamen', + label: '中华门', + }], + }], +}]; + +function onChange(value) { + console.log(value); +} + +// 只展示最后一项 +function displayRender(label) { + return label[label.length - 1]; +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx new file mode 100644 index 0000000000..369fc104cd --- /dev/null +++ b/components/cascader/index.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import Cascader from 'rc-cascader'; +import Input from '../input'; +import arrayTreeFilter from 'array-tree-filter'; + +class AntCascader extends React.Component { + constructor(props) { + super(props); + this.state = { + value: [], + }; + [ + 'handleChange', + 'getLabel', + ].forEach((method) => this[method] = this[method].bind(this)); + } + handleChange(value, selectedOptions) { + this.setState({ value }); + this.props.onChange(value, selectedOptions); + } + getLabel() { + const { options, displayRender } = this.props; + const label = arrayTreeFilter(options, (o, level) => o.value === this.state.value[level]) + .map(o => o.label); + return displayRender(label); + } + render() { + const { prefixCls, children, placeholder, style } = this.props; + return ( + + {children || + } + + ); + } +} + +AntCascader.defaultProps = { + prefixCls: 'ant-cascader', + placeholder: '请选择', + transitionName: 'slide-up', + onChange() {}, + options: [], + displayRender(label) { + return label.join(' / '); + }, +}; + +export default AntCascader; diff --git a/components/cascader/index.md b/components/cascader/index.md new file mode 100644 index 0000000000..bab13eff65 --- /dev/null +++ b/components/cascader/index.md @@ -0,0 +1,15 @@ +# Cascader + +- category: Components +- chinese: 级联选择 +- type: 表单 + +--- + +级联选择框。 + +## 何时使用 + + +## API + diff --git a/index.js b/index.js index 0b37921669..3d0a4f5fe4 100644 --- a/index.js +++ b/index.js @@ -44,6 +44,7 @@ const antd = { Calendar: require('./components/calendar'), TimePicker: require('./components/time-picker'), Transfer: require('./components/transfer'), + Cascader: require('./components/cascader'), }; antd.version = require('./package.json').version; diff --git a/package.json b/package.json index 5c3d4e1920..9ac2c52069 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ ], "license": "MIT", "dependencies": { + "array-tree-filter": "~1.0.0", "classnames": "~2.2.0", "css-animation": "1.1.x", "gregorian-calendar": "~4.1.0", @@ -39,6 +40,7 @@ "object-assign": "~4.0.1", "rc-animate": "~2.0.2", "rc-calendar": "~5.2.0", + "rc-cascader": "~0.3.0", "rc-checkbox": "~1.1.1", "rc-collapse": "~1.4.4", "rc-dialog": "~5.2.2", diff --git a/style/components/cascader.less b/style/components/cascader.less new file mode 100644 index 0000000000..e79f6089f7 --- /dev/null +++ b/style/components/cascader.less @@ -0,0 +1,80 @@ +.ant-cascader { + font-size: @font-size-base; + &-input { + width: 172px; + display: block; + } + &-menus { + font-size: 12px; + overflow: hidden; + background: #fff; + position: absolute; + border: 1px solid @border-color-base; + border-radius: @border-radius-base; + box-shadow: @box-shadow-base; + &-hidden { + display: none; + } + &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, + &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { + animation-name: antSlideUpIn; + } + + &.slide-up-enter.slide-up-enter-active&-placement-topLeft, + &.slide-up-appear.slide-up-appear-active&-placement-topLeft { + animation-name: antSlideDownIn; + } + + &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { + animation-name: antSlideUpOut; + } + + &.slide-up-leave.slide-up-leave-active&-placement-topLeft { + animation-name: antSlideDownOut; + } + } + &-menu { + float: left; + width: 111px; + height: 180px; + list-style: none; + margin: 0; + padding: 0; + border-right: 1px solid @border-color-split; + &:last-child { + border-right-color: transparent; + margin-right: -1px; + } + } + &-menu-item { + height: 32px; + line-height: 32px; + padding: 0 16px; + cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.3s ease; + &:hover { + background: tint(@primary-color, 90%); + } + &-active { + background: tint(@primary-color, 80%); + &:hover { + background: tint(@primary-color, 80%); + } + } + &-expand { + position: relative; + &:after { + content: '\e600'; + font-family: 'anticon'; + .iconfont-size-under-12px(8px); + color: #999; + position: absolute; + right: 15px; + line-height: 32px; + } + } + } +} diff --git a/style/components/index.less b/style/components/index.less index 0048394171..ed1ad82834 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -38,3 +38,4 @@ @import "calendar"; @import "timepicker"; @import "transfer"; +@import "cascader"; From 461495d46d67d5eb5a3f61d21d1139331654968b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 18:24:21 +0800 Subject: [PATCH 28/38] update cascader document --- components/cascader/demo/basic.md | 2 +- components/cascader/index.md | 17 +++++++++++++++++ components/select/demo/coordinate.md | 2 ++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md index fd2f89066c..445f039f4f 100644 --- a/components/cascader/demo/basic.md +++ b/components/cascader/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -省市级联。 +省市区级联。 --- diff --git a/components/cascader/index.md b/components/cascader/index.md index bab13eff65..91648eb24a 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -8,8 +8,25 @@ 级联选择框。 + ## 何时使用 +- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 +- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。 +- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。 ## API +```html + +``` + +| 参数 | 说明 | 类型 | 默认值 | +|------|------|------|--------| +| options | 可选项数据源 | object | - | +| defaultValue | 默认的选中项 | array |[] | +| value | 指定选中项 | array | - | +| onChange | 选择完成后的回调 | `function(value, selectedOptions)` | - | +| displayRender | 选择后展示的渲染函数 | `function(label)`` | `function(label) { return label.join(' / ') }` | +| style | 自定义样式 | string | - | +| popupClassName | 自定义浮层类名 | string | - | diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index 89f158977f..9505a04464 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -4,6 +4,8 @@ 省市联动是典型的例子。 +推荐使用 [cascader](/components/cascader/) 组件。 + --- ````jsx From 057eae84c578cdaf0080819a58ced9a8afc7089e Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 18:27:46 +0800 Subject: [PATCH 29/38] update cascader api --- components/cascader/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/cascader/index.md b/components/cascader/index.md index 91648eb24a..92c76c37cc 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -30,3 +30,4 @@ | displayRender | 选择后展示的渲染函数 | `function(label)`` | `function(label) { return label.join(' / ') }` | | style | 自定义样式 | string | - | | popupClassName | 自定义浮层类名 | string | - | +| placeholder | 输入框占位文本 | string | '请选择' | From a4a235cd67242230b744c42beed390664f27dd38 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 18:31:48 +0800 Subject: [PATCH 30/38] Add prop size for cascader --- components/cascader/index.jsx | 10 ++++++++-- components/cascader/index.md | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index 369fc104cd..775631031a 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import Cascader from 'rc-cascader'; import Input from '../input'; import arrayTreeFilter from 'array-tree-filter'; +import classNames from 'classnames'; class AntCascader extends React.Component { constructor(props) { @@ -25,12 +26,16 @@ class AntCascader extends React.Component { return displayRender(label); } render() { - const { prefixCls, children, placeholder, style } = this.props; + const { prefixCls, children, placeholder, style, size } = this.props; + const sizeCls = classNames({ + 'ant-input-lg': size === 'large', + 'ant-input-sm': size === 'small', + }); return ( {children || } @@ -48,6 +53,7 @@ AntCascader.defaultProps = { displayRender(label) { return label.join(' / '); }, + size: 'default', }; export default AntCascader; diff --git a/components/cascader/index.md b/components/cascader/index.md index 92c76c37cc..4d9ce58c3f 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -31,3 +31,4 @@ | style | 自定义样式 | string | - | | popupClassName | 自定义浮层类名 | string | - | | placeholder | 输入框占位文本 | string | '请选择' | +| size | 输入框大小，可选 `large` `default` `small` | string | `default` | From d37bcfa82f3a48667250d728cf7e3d234c778876 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 21:18:27 +0800 Subject: [PATCH 31/38] Add clear icon --- components/cascader/demo/default-value.md | 43 ++++++++++++++++++ components/cascader/index.jsx | 53 +++++++++++++++++++---- package.json | 2 +- style/components/cascader.less | 26 +++++++++++ 4 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 components/cascader/demo/default-value.md diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md new file mode 100644 index 0000000000..db4ea4eee0 --- /dev/null +++ b/components/cascader/demo/default-value.md @@ -0,0 +1,43 @@ +# 默认值 + +- order: 0 + +默认值通过数组的方式指定。 + +--- + +````jsx +import { Cascader } from 'antd'; + +const options = [{ + value: 'zhejiang', + label: '浙江', + children: [{ + value: 'hangzhou', + label: '杭州', + children: [{ + value: 'xihu', + label: '西湖', + }], + }], +}, { + value: 'jiangsu', + label: '江苏', + children: [{ + value: 'nanjing', + label: '南京', + children: [{ + value: 'zhonghuamen', + label: '中华门', + }], + }], +}]; + +function onChange(value) { + console.log(value); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index 775631031a..d68271a104 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import Cascader from 'rc-cascader'; import Input from '../input'; +import Icon from '../icon'; import arrayTreeFilter from 'array-tree-filter'; import classNames from 'classnames'; @@ -8,15 +9,33 @@ class AntCascader extends React.Component { constructor(props) { super(props); this.state = { - value: [], + value: props.value || props.defaultValue || [], + popupVisible: false, }; [ 'handleChange', + 'handlePopupVisibleChange', + 'setValue', 'getLabel', + 'clearSelection', ].forEach((method) => this[method] = this[method].bind(this)); } + componentWillReceiveProps(nextProps) { + if ('value' in nextProps) { + this.setState({ value: nextProps.value }); + } + } handleChange(value, selectedOptions) { - this.setState({ value }); + this.setValue(value, selectedOptions); + } + handlePopupVisibleChange(popupVisible) { + this.setState({ popupVisible }); + this.props.onPopupVisibleChange(popupVisible); + } + setValue(value, selectedOptions = []) { + if (!('value' in this.props)) { + this.setState({ value }); + } this.props.onChange(value, selectedOptions); } getLabel() { @@ -25,20 +44,37 @@ class AntCascader extends React.Component { .map(o => o.label); return displayRender(label); } + clearSelection(e) { + e.preventDefault(); + this.setValue([]); + this.setState({ popupVisible: false }); + } render() { const { prefixCls, children, placeholder, style, size } = this.props; const sizeCls = classNames({ 'ant-input-lg': size === 'large', 'ant-input-sm': size === 'small', }); + const clearIcon = this.state.value.length > 0 ? + : null; return ( - + {children || - } + + + {clearIcon} + + } ); } @@ -54,6 +90,7 @@ AntCascader.defaultProps = { return label.join(' / '); }, size: 'default', + onPopupVisibleChange() {}, }; export default AntCascader; diff --git a/package.json b/package.json index 9ac2c52069..07c6dea9b8 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "object-assign": "~4.0.1", "rc-animate": "~2.0.2", "rc-calendar": "~5.2.0", - "rc-cascader": "~0.3.0", + "rc-cascader": "~0.4.0", "rc-checkbox": "~1.1.1", "rc-collapse": "~1.4.4", "rc-dialog": "~5.2.2", diff --git a/style/components/cascader.less b/style/components/cascader.less index e79f6089f7..e2063faba6 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -4,6 +4,32 @@ width: 172px; display: block; } + &-picker { + position: relative; + display: inline-block; + &-clear { + opacity: 0; + visibility: hidden; + position: absolute; + right: 8px; + top: 50%; + font-size: 12px; + color: #ccc; + width: 12px; + height: 12px; + margin-top: -6px; + line-height: 12px; + cursor: pointer; + transition: color 0.3s ease, opacity 0.15s ease; + &:hover { + color: #999; + } + } + &:hover &-clear { + opacity: 1; + visibility: visible; + } + } &-menus { font-size: 12px; overflow: hidden; From 553fb4d05c74d1a8d06e5a68c8c658a0fdea3f3f Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 29 Dec 2015 22:34:23 +0800 Subject: [PATCH 32/38] Add arrow style --- components/cascader/index.jsx | 6 ++++++ style/components/cascader.less | 33 ++++++++++++++++++++++++++++++--- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index d68271a104..448766707a 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -46,6 +46,7 @@ class AntCascader extends React.Component { } clearSelection(e) { e.preventDefault(); + e.stopPropagation(); this.setValue([]); this.setState({ popupVisible: false }); } @@ -59,6 +60,10 @@ class AntCascader extends React.Component { : null; + const arrowCls = classNames({ + [`${prefixCls}-picker-arrow`]: true, + [`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible, + }); return ( {clearIcon} + } diff --git a/style/components/cascader.less b/style/components/cascader.less index e2063faba6..dfc2b9d7b9 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -1,17 +1,23 @@ -.ant-cascader { +@cascader-prefix-cls: ant-cascader; + +.@{cascader-prefix-cls} { font-size: @font-size-base; &-input { width: 172px; display: block; + cursor: pointer; } &-picker { position: relative; display: inline-block; + cursor: pointer; + &-clear { opacity: 0; - visibility: hidden; position: absolute; right: 8px; + z-index: 1; + background: #fff; top: 50%; font-size: 12px; color: #ccc; @@ -25,9 +31,30 @@ color: #999; } } + &:hover &-clear { opacity: 1; - visibility: visible; + } + + // arrow + &-arrow { + position: absolute; + top: 50%; + right: 8px; + width: 12px; + height: 12px; + margin-top: -6px; + line-height: 12px; + .iconfont-size-under-12px(8px); + &:before { + transition: transform 0.2s ease; + } + &&-expand { + .ie-rotate(2); + &:before { + .rotate(180deg); + } + } } } &-menus { From 14d9e7ce803b1f6fa3f4f505b734cf63659beaa7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Dec 2015 14:21:15 +0800 Subject: [PATCH 33/38] upgrade rc-cascader version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 07c6dea9b8..578c5bbd6b 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "object-assign": "~4.0.1", "rc-animate": "~2.0.2", "rc-calendar": "~5.2.0", - "rc-cascader": "~0.4.0", + "rc-cascader": "~0.5.0", "rc-checkbox": "~1.1.1", "rc-collapse": "~1.4.4", "rc-dialog": "~5.2.2", From e2144a1d67cb9d2d84475e5b529f72d3fd13a6d1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Dec 2015 11:49:17 +0800 Subject: [PATCH 34/38] fix overflow menu --- style/components/cascader.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/cascader.less b/style/components/cascader.less index dfc2b9d7b9..b21524bf36 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -94,6 +94,7 @@ margin: 0; padding: 0; border-right: 1px solid @border-color-split; + overflow: auto; &:last-child { border-right-color: transparent; margin-right: -1px; From 78a6a8e8aa107589e3718fc33d8a9242a12de30b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Thu, 31 Dec 2015 14:38:35 +0800 Subject: [PATCH 35/38] big change --- components/tree-select/demo/basic.md | 2 +- components/tree-select/demo/enhance.md | 42 +- components/tree-select/index.jsx | 20 +- components/tree-select/index.md | 31 +- package.json | 4 +- style/components/index.less | 1 + style/components/treeSelect.less | 580 +++++++++++++++++++++++++ 7 files changed, 632 insertions(+), 48 deletions(-) create mode 100644 style/components/treeSelect.less diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index e395225ae8..4562aade6f 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -32,7 +32,7 @@ const Demo = React.createClass({ diff --git a/components/tree-select/demo/enhance.md b/components/tree-select/demo/enhance.md index f6a3096996..cd6e59543a 100644 --- a/components/tree-select/demo/enhance.md +++ b/components/tree-select/demo/enhance.md @@ -10,9 +10,9 @@ import { TreeSelect } from 'antd'; const TreeNode = TreeSelect.TreeNode; -const x = 5; -const y = 3; -const z = 2; +const x = 3; +const y = 2; +const z = 1; const gData = []; const generateData = (_level, _preKey, _tns) => { const preKey = _preKey || '0'; @@ -40,27 +40,19 @@ generateData(z); const Demo = React.createClass({ getInitialState() { return { - value: [], + value: ['0-0'], }; }, - onDeselect(selectedValue) { - console.log('onDeselect', selectedValue); - const newVal = [...this.state.value]; - newVal.splice(newVal.indexOf(selectedValue), 1); - this.setState({ - value: newVal, - }); - }, onSelect(selectedKey, node, selectedKeys) { console.log('selected: ', selectedKey, selectedKeys); this.setState({ value: selectedKeys, }); }, - onCheck(checkedKey, node, checkedKeys) { - console.log('onCheck:', checkedKey); + onChange(value) { + console.log('selected ' + value); this.setState({ - value: checkedKeys, + value: value, }); }, render() { @@ -72,20 +64,18 @@ const Demo = React.createClass({ return ; }); }; - const treeProps = { - showIcon: false, - showLine: true, - checkable: true, - defaultCheckedKeys: this.state.value, - defaultSelectedKeys: this.state.value, - // selectedKeys: this.state.value, - // checkedKeys: this.state.value, - // onCheck: this.onCheck, + const tProps = { + // defaultValue: this.state.value, + value: this.state.value, + onChange: this.onChange, + onSelect: this.onSelect, + multiple: true, + // treeCheckable: true, + treeDefaultExpandAll: true, }; return (

more

- + {loop(gData)}
); diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index aea1760da6..56e1d5ccc0 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,13 +1,13 @@ import React from 'react'; import TreeSelect, { TreeNode } from 'rc-tree-select'; import classNames from 'classnames'; -import assign from 'object-assign'; -import animation from '../common/openAnimation'; +// import assign from 'object-assign'; +// import animation from '../common/openAnimation'; const AntTreeSelect = React.createClass({ getDefaultProps() { return { - prefixCls: 'ant-select', + prefixCls: 'ant-tree-select', transitionName: 'slide-up', optionLabelProp: 'value', choiceTransitionName: 'zoom', @@ -31,22 +31,14 @@ const AntTreeSelect = React.createClass({ notFoundContent = null; } - const treeProps = { - prefixCls: 'ant-tree', - checkable: false, - showIcon: false, - openAnimation: animation - }; - assign(treeProps, props.treeProps); - - let checkable = treeProps.checkable; + let checkable = props.treeCheckable; if (checkable) { - treeProps.checkable = ; + checkable = ; } return ( ); diff --git a/components/tree-select/index.md b/components/tree-select/index.md index 3e4cf4e5e1..8f389fc216 100644 --- a/components/tree-select/index.md +++ b/components/tree-select/index.md @@ -16,13 +16,34 @@ | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -|multiple | 是否支持多选 | bool | false | -|[select-props](http://ant.design/components/select/#select-props) | the same as select props | || -|treeProps | 和tree props相同（除了onSelect、onCheck） | | [tree-props](http://ant.design/components/tree/#tree-props) | +| value | 指定当前选中的条目 | string/Array | 无 | +| defaultValue | 指定默认选中的条目 | string/Array | 无 | +| multiple | 支持多选 | boolean | false | +| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false | +| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 | +| onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 | +| allowClear | 显示清除按钮 | boolean | false | +| onSearch | 文本框值变化时回调 | function(value: String) | | +| placeholder | 选择框默认文字 | string | 无 | +| searchPlaceholder | 搜索框默认文字 | string | 无 | +| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | +| combobox | 输入框自动提示模式 | boolean | false | +| size | 选择框大小，可选 `large` `small` | String | default | +| showSearch | 在下拉中显示搜索框 | boolean | false | +| disabled | 是否禁用 | boolean | false | +| treeDefaultExpandAll | 默认展开所有树节点 | bool | false | +| treeCheckable | 显示checkbox | bool | false | +| filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - | +| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | String | 'value' | +| treeNodeLabelProp | 作为显示的prop设置 | String | 'value' | +| loadData | 异步加载数据 | function(node) | - | ### TreeNode props | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|------------|--------| -|value | default as optionFilterProp | String | 'value' | -|[treenode-props](http://ant.design/components/tree/#treenode-props) |和 treeNode props 相同||| +| disabled | 是否禁用 | Boolean | false | +| key | 此项必须设置 | String | | +| value | 默认根据此属性值进行筛选 | String | - | +| title | 树节点显示的内容 | String | '---' | +| isLeaf | 是否是叶子节点 | bool | false | diff --git a/package.json b/package.json index 578c5bbd6b..e364158444 100644 --- a/package.json +++ b/package.json @@ -61,8 +61,8 @@ "rc-tabs": "~5.6.0", "rc-time-picker": "~1.0.0", "rc-tooltip": "~3.3.0", - "rc-tree": "^0.21.2", - "rc-tree-select": "~0.2.1", + "rc-tree": "^0.23.1", + "rc-tree-select": "^0.3.3", "rc-trigger": "~1.0.6", "rc-upload": "~1.7.0", "rc-util": "~3.0.1", diff --git a/style/components/index.less b/style/components/index.less index ed1ad82834..14107786b5 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -27,6 +27,7 @@ @import "tag"; @import "alert"; @import "tree"; +@import "treeSelect"; @import "carousel/slick"; @import "carousel/slick-theme"; @import "upload"; diff --git a/style/components/treeSelect.less b/style/components/treeSelect.less new file mode 100644 index 0000000000..6bf36e14f3 --- /dev/null +++ b/style/components/treeSelect.less @@ -0,0 +1,580 @@ +@tree-select-tree-prefix-cls: ant-tree-select-tree; +.antCheckboxFn(@checkbox-prefix-cls: ant-tree-select-tree-checkbox); +@import "../mixins/iconfont"; +.antTreeSwitcherIcon() { + position: relative; + &:after { + .iconfont-size-under-12px(6px); + content: '\e611'; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + position: absolute; + top: 10px; + right: 4px; + color: #666; + transition: transform .3s ease; + } +} +.@{tree-select-tree-prefix-cls} { + margin: 0; + padding: 5px; + font-size: 12px; + li { + padding: 0; + margin: 0; + list-style: none; + white-space: nowrap; + outline: 0; + ul { + margin: 0; + padding: 0 0 0 18px; + } + a { + display: inline-block; + padding: 1px 4px; + border-radius: 2px; + margin: 0; + cursor: pointer; + height: 20px; + text-decoration: none; + vertical-align: top; + color: #666; + } + span { + &.@{tree-select-tree-prefix-cls}-checkbox { + margin: 3px 4px 0 0; + } + &.@{tree-select-tree-prefix-cls}-switcher-noop, + &.@{tree-select-tree-prefix-cls}-switcher, + &.@{tree-select-tree-prefix-cls}-iconEle { + line-height: 0; + margin: 0; + width: 16px; + height: 18px; + display: inline-block; + vertical-align: middle; + border: 0 none; + cursor: pointer; + outline: none; + } + &.@{tree-select-tree-prefix-cls}-icon_loading { + &:after { + content: '\e6a1'; + display: inline-block; + font-family: 'anticon'; + font-weight: bold; + .animation(loadingCircle 1s infinite linear); + margin-top: 8px; + } + } + &.@{tree-select-tree-prefix-cls}-switcher { + &-disabled { + background: #fff; + position: relative; + &:after { + content: '-'; + position: absolute; + top: 8px; + left: 6px; + color: gray; + } + } + &.@{tree-select-tree-prefix-cls}-roots_open, + &.@{tree-select-tree-prefix-cls}-center_open, + &.@{tree-select-tree-prefix-cls}-bottom_open, + &.@{tree-select-tree-prefix-cls}-noline_open { + .antTreeSwitcherIcon(); + } + &.@{tree-select-tree-prefix-cls}-roots_close, + &.@{tree-select-tree-prefix-cls}-center_close, + &.@{tree-select-tree-prefix-cls}-bottom_close, + &.@{tree-select-tree-prefix-cls}-noline_close { + .antTreeSwitcherIcon(); + .ie-rotate(3); + &:after { + transform: rotate(270deg) scale(0.5); + } + } + } + } + } + &-child-tree { + display: none; + &-open { + display: block; + } + } + &-treenode-disabled { + >span, + >a { + color: gray; + } + } + &-node-selected { + background-color: tint(@primary-color, 90%); + } + &-icon__open { + margin-right: 2px; + vertical-align: top; + } + &-icon__close { + margin-right: 2px; + vertical-align: top; + } +} + + +@tree-select-prefix-cls: ant-tree-select; + +@duration: .3s; + +@import "../mixins/iconfont"; +//mixin +.selection__clear() { + cursor: pointer; + float: right; + font-weight: bold; +} + +.@{tree-select-prefix-cls} { + box-sizing: border-box; + display: inline-block; + margin: 0; + position: relative; + vertical-align: middle; + color: #666; + font-size: @font-size-base; + + > ul > li > a { + padding: 0; + background-color: #fff; + } + + // arrow + &-arrow { + .iconfont-mixin(); + position: absolute; + top: 50%; + right: 8px; + line-height: 1; + margin-top: -5px; + .iconfont-size-under-12px(8px); + + * { + display: none; + } + + &:before { + content: '\e603'; + transition: transform 0.2s ease; + } + } + + &-selection { + outline: none; + user-select: none; + + box-sizing: border-box; + display: block; + + background-color: #fff; + border-radius: @border-radius-base; + border: 1px solid #d9d9d9; + .transition(all .3s @ease-in-out); + + &:hover { + .hover; + } + &:active { + .active; + } + } + + &-disabled { + color: #ccc; + } + + &-disabled &-selection { + &:hover, + &:active { + border-color: #d9d9d9; + } + } + + &-disabled &-selection--single { + cursor: not-allowed; + } + + &-selection--single { + height: 28px; + cursor: pointer; + + .@{tree-select-prefix-cls}-selection__rendered { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 8px; + padding-right: 24px; + line-height: 26px; + } + + .@{tree-select-prefix-cls}-selection__clear { + .selection__clear(); + } + + .@{tree-select-prefix-cls}-selection__placeholder { + color: #ccc; + } + } + + &-lg { + .ant-select-selection--single { + height: 32px; + .ant-select-selection__rendered { + line-height: 30px; + } + } + + .ant-select-selection--multiple { + min-height: 32px; + .ant-select-selection__rendered { + li { + height: 24px; + .ant-select-selection__choice__content { + font-size: 14px; + line-height: 24px; + } + } + } + } + } + + &-sm { + .ant-select-selection--single { + height: 22px; + .ant-select-selection__rendered { + line-height: 20px; + } + } + .ant-select-selection--multiple { + min-height: 22px; + .ant-select-selection__rendered { + li { + height: 14px; + .ant-select-selection__choice__content { + line-height: 14px; + position: relative; + top: -3px; + } + .ant-select-selection__choice__remove { + position: relative; + top: -4px; + } + } + } + } + } + + &-disabled &-selection__choice__remove { + color: #ccc; + cursor: default; + &:hover { + color: #ccc; + } + } + + &-search__field__wrap { + display: inline-block; + position: relative; + } + + &-search__field__placeholder { + position: absolute; + top: 0; + left: 3px; + color: #aaa; + } + + &-search--inline { + float: left; + + .@{tree-select-prefix-cls}-search__field__wrap { + width: 100%; + } + + .@{tree-select-prefix-cls}-search__field { + border: 0; + font-size: 100%; + background: transparent; + outline: 0; + } + > i { + float: right; + } + } + + &-selection--multiple { + min-height: 28px; + cursor: text; + + .@{tree-select-prefix-cls}-search__field__placeholder { + top: 6px; + left: 10px; + } + + .@{tree-select-prefix-cls}-search--inline { + width: auto; + .@{tree-select-prefix-cls}-search__field { + width: 0.75em; + } + } + + .@{tree-select-prefix-cls}-selection__rendered { + overflow: hidden; + text-overflow: ellipsis; + padding-left: 6px; + padding-bottom: 4px; + } + + .@{tree-select-prefix-cls}-selection__clear { + .selection__clear(); + margin-top: 5px; + margin-right: 10px; + } + + > ul > li { + margin-top: 4px; + height: 20px; + line-height: 20px; + } + + .@{tree-select-prefix-cls}-selection__choice { + background-color: #f3f3f3; + border-radius: 4px; + cursor: default; + float: left; + padding: 0 15px; + margin-right: 4px; + max-width: 99%; + position: relative; + overflow: hidden; + transition: padding @duration @ease-in-out; + padding: 0 20px 0 10px; + } + + .@{tree-select-prefix-cls}-selection__choice__content { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + transition: margin @duration @ease-in-out; + } + + .@{tree-select-prefix-cls}-selection__choice__remove { + .iconfont-mixin(); + color: #999; + line-height: 20px; + cursor: pointer; + display: inline-block; + font-weight: bold; + transition: all 0.3s @ease-in-out; + .iconfont-size-under-12px(8px); + position: absolute; + right: 4px; + padding: 0 0 0 8px; + &:hover { + color: #404040; + } + &:before { + content: "\e62d"; + } + } + } + + &-open { + .@{tree-select-prefix-cls}-arrow { + .ie-rotate(2); + -ms-transform: rotate(180deg); + &:before { + .rotate(180deg); + } + } + .@{tree-select-prefix-cls}-selection { + .active(); + } + } + + &-combobox { + .@{tree-select-prefix-cls}-arrow { + display: none; + } + .@{tree-select-prefix-cls}-search--inline { + height: 100%; + float: none; + } + .@{tree-select-prefix-cls}-search__field__placeholder { + left: 10px; + cursor: text; + } + .@{tree-select-prefix-cls}-search__field__wrap { + width: 100%; + height: 100%; + } + .@{tree-select-prefix-cls}-search__field { + padding: 0 10px; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + } + .@{tree-select-prefix-cls}-selection__rendered { + padding: 0; + height: 100%; + } + } +} + +.@{tree-select-prefix-cls}-dropdown { + &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, + &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { + animation-name: antSlideUpIn; + } + + &.slide-up-enter.slide-up-enter-active&-placement-topLeft, + &.slide-up-appear.slide-up-appear-active&-placement-topLeft { + animation-name: antSlideDownIn; + } + + &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { + animation-name: antSlideUpOut; + } + + &.slide-up-leave.slide-up-leave-active&-placement-topLeft { + animation-name: antSlideDownOut; + } + + &-hidden { + display: none; + } + + background-color: white; + border: 1px solid #d9d9d9; + box-shadow: @box-shadow-base; + border-radius: @border-radius-base; + box-sizing: border-box; + z-index: 1070; + left: -9999px; + top: -9999px; + position: absolute; + outline: none; + overflow: hidden; + font-size: @font-size-base; + + &-menu { + outline: none; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + max-height: 250px; + overflow: auto; + + &-item-group-list { + margin: 0; + padding: 0; + + > .@{tree-select-prefix-cls}-dropdown-menu-item { + padding-left: 24px; + } + } + + &-item-group-title { + color: #999; + line-height: 1.5; + padding: 8px 15px; + } + + &-item { + position: relative; + display: block; + padding: 7px 15px; + font-weight: normal; + color: #666; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + transition: background 0.3s ease; + + &:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + &:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + &:hover, + &-active { + background-color: tint(@primary-color, 90%); + } + + &-selected { + background-color: tint(@primary-color, 80%); + &:hover { + background-color: tint(@primary-color, 80%); + } + } + + &-disabled { + color: #ccc; + cursor: not-allowed; + + &:hover { + color: #ccc; + background-color: #fff; + cursor: not-allowed; + } + } + + &-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + background-color: #e5e5e5; + line-height: 0; + } + } + } + + &-container-open, + &-open { + .@{tree-select-prefix-cls}-dropdown { + display: block; + } + } + + .@{tree-select-prefix-cls}-dropdown-search { + display: block; + padding: 4px; + .@{tree-select-prefix-cls}-search__field__placeholder { + left: 7px; + top: 5px; + } + .@{tree-select-prefix-cls}-search__field__wrap { + width: 100%; + } + .@{tree-select-prefix-cls}-search__field { + padding: 4px 7px; + width: 100%; + box-sizing: border-box; + border: 1px solid #d9d9d9; + border-radius: 4px; + outline: none; + } + &.@{tree-select-prefix-cls}-search--hide { + display: none; + } + } +} From 3df3e8ebd100e7861497bbf8a303c047289e4ad8 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 31 Dec 2015 15:03:14 +0800 Subject: [PATCH 36/38] beta1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e364158444..93697070a4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.0-alpha1", + "version": "0.12.0-beta1", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 7be38406da3238fe0d2ad8fbe0eb1718c142b38b Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 31 Dec 2015 17:17:10 +0800 Subject: [PATCH 37/38] fix select css --- package.json | 2 +- style/components/form.less | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 93697070a4..b91bfbf839 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.0-beta1", + "version": "0.12.0-beta2", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", diff --git a/style/components/form.less b/style/components/form.less index 8a9c884def..6e9466140d 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -170,7 +170,8 @@ form { margin-right: 8px; } - .@{calendar-prefix-cls}-picker { + .@{calendar-prefix-cls}-picker, + .@{select-prefix-cls} { width: 100%; } } From 92c56889a334dacbcc763ffa5614aabd8c9f5a99 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 2 Jan 2016 01:26:40 +0800 Subject: [PATCH 38/38] Fix inline menu click problem in 0.11.1 --- CHANGELOG.md | 3 ++- components/menu/index.jsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b71fb50308..d41e9f2086 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,8 +14,9 @@ - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。 - 更新 dataSource 时，选中项现在会被清空。 - 修复一个全选框和禁用的选择项配合的问题。 +- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。 +- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。 - 组件和文档的样式小调整。 -- 修复 `0.11.1`版本 对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。 ## 0.11.1 `2015-12-29` diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 401cd45e6b..ccad718e30 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -58,7 +58,7 @@ const AntMenu = React.createClass({ let props = {}; const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme; - if (this.props.mode === 'inline') { + if (this.props.mode !== 'inline') { // 这组属性的目的是 // 弹出型的菜单需要点击后立即关闭 // 另外，弹出型的菜单的受控模式没有使用场景 @@ -67,12 +67,12 @@ const AntMenu = React.createClass({ onClick: this.handleClick, onOpen: this.handleOpenKeys, onClose: this.handleCloseKeys, - openAnimation, + openTransitionName: openAnimation, className, }; } else { props = { - openTransitionName: openAnimation, + openAnimation, className, }; }