From 17b9d85f449d3f4dba0c31509fe9552639eac718 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 11:07:50 +0800 Subject: [PATCH 01/37] update demo title --- components/table/demo/paging-columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/demo/paging-columns.md b/components/table/demo/paging-columns.md index 2fba457418..0ef7a84bfd 100644 --- a/components/table/demo/paging-columns.md +++ b/components/table/demo/paging-columns.md @@ -1,4 +1,4 @@ -# 滚屏分页的列 +# 横向滚屏表格 - order: 16 From 1e26289da779fc118d2c88330aae2f910ee837f5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 14:41:14 +0800 Subject: [PATCH 02/37] fix site style --- site/static/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index e27355f998..aea3d05ec8 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -415,7 +415,6 @@ footer ul li > a { transition: all 0.3s ease; } - .aside-container li[open=open] h4:after { -webkit-transform: scale(0.6) rotate(180deg); transform: scale(0.6) rotate(180deg); @@ -922,6 +921,7 @@ footer ul li > a { margin: 0.5em 0; padding-right: 25px; width: 100%; + word-break: break-word; } .code-box .collapse { From 7ea67b6e372c6475809e71a37e0e253571e0e7ab Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 16:31:33 +0800 Subject: [PATCH 03/37] stable sort in table http://jsperf.com/chrome-stable-sort --- components/table/index.jsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 4f90e94fcf..b494282082 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -136,19 +136,18 @@ let AntTable = React.createClass({ } } if (typeof column.sorter === 'function') { - sorter = function (...args) { - let result = column.sorter.apply(this, args); - if (sortOrder === 'ascend') { - return result; - } else if (sortOrder === 'descend') { - return -result; + sorter = (a, b) => { + let result = column.sorter(a, b); + if (result !== 0) { + return (sortOrder === 'descend') ? -result : result; } + return a.index - b.index; }; } const newState = { sortOrder, sortColumn, - sorter + sorter, }; this.setState(newState); this.props.onChange.apply(this, this.prepareParamsArguments( @@ -495,9 +494,7 @@ let AntTable = React.createClass({ }, findColumn(myKey) { - return this.props.columns.filter((c) => { - return this.getColumnKey(c) === myKey; - })[0]; + return this.props.columns.filter(c => this.getColumnKey(c) === myKey)[0]; }, getCurrentPageData(dataSource) { @@ -530,6 +527,10 @@ let AntTable = React.createClass({ let data = dataSource || this.props.dataSource; // 排序 if (state.sortOrder && state.sorter) { + data = data.slice(0); + for (let i = 0; i < data.length; i++) { + data[i].index = i; + } data = data.sort(state.sorter); } // 筛选 From d2cf85b87bacb661bc98efea9b011f25931d2bf5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 17:12:56 +0800 Subject: [PATCH 04/37] Fix allowClear of TreeSelect, close #1084 --- components/tree-select/demo/basic.md | 1 + components/tree-select/index.jsx | 2 - style/components/select.less | 61 +++++++++++++++------------- style/components/treeSelect.less | 16 ++------ 4 files changed, 38 insertions(+), 42 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index f85d997e68..eafa83d778 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -26,6 +26,7 @@ const Demo = React.createClass({ value={this.state.value} dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="请选择" + allowClear treeDefaultExpandAll onChange={this.onChange}> diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index b98d99e7b9..a7efb1d64a 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,7 +1,6 @@ import React from 'react'; import TreeSelect, { TreeNode } from 'rc-tree-select'; import classNames from 'classnames'; -// import animation from '../common/openAnimation'; const AntTreeSelect = React.createClass({ getDefaultProps() { @@ -10,7 +9,6 @@ const AntTreeSelect = React.createClass({ transitionName: 'slide-up', choiceTransitionName: 'zoom', showSearch: false, - // openAnimation: animation, }; }, render() { diff --git a/style/components/select.less b/style/components/select.less index 07562e020f..88860d7c64 100644 --- a/style/components/select.less +++ b/style/components/select.less @@ -4,6 +4,37 @@ @import "../mixins/iconfont"; +.selection__clear() { + display: inline-block; + font-style: normal; + vertical-align: baseline; + text-align: center; + text-transform: none; + text-rendering: auto; + opacity: 0; + position: absolute; + right: 8px; + z-index: 1; + background: #fff; + 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; + &:before { + display: block; + font-family: "anticon" !important; + content: "\E631"; + } + &:hover { + color: #999; + } +} + .@{select-prefix-cls} { box-sizing: border-box; display: inline-block; @@ -53,39 +84,13 @@ &:hover { .hover; } + &:active { .active; } &__clear { - display: inline-block; - font-style: normal; - vertical-align: baseline; - text-align: center; - text-transform: none; - text-rendering: auto; - opacity: 0; - position: absolute; - right: 8px; - z-index: 1; - background: #fff; - 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; - &:before { - display: block; - font-family: "anticon" !important; - content: "\E631"; - } - &:hover { - color: #999; - } + .selection__clear(); } &:hover &__clear { diff --git a/style/components/treeSelect.less b/style/components/treeSelect.less index 6039862750..93e3d9f5f0 100644 --- a/style/components/treeSelect.less +++ b/style/components/treeSelect.less @@ -115,12 +115,6 @@ @duration: .3s; @import "../mixins/iconfont"; -//mixin -.selection__clear() { - cursor: pointer; - float: right; - font-weight: bold; -} .@{tree-select-prefix-cls} { box-sizing: border-box; @@ -216,6 +210,10 @@ .selection__clear(); } + &:hover .@{tree-select-prefix-cls}-selection__clear { + opacity: 1; + } + .@{tree-select-prefix-cls}-selection__placeholder { color: #ccc; } @@ -345,12 +343,6 @@ padding-bottom: 4px; } - .@{tree-select-prefix-cls}-selection__clear { - .selection__clear(); - margin-top: 5px; - margin-right: 10px; - } - > ul > li { margin-top: 4px; height: 20px; From 870b7ade34714e8f799869cb079ebfd212c3bc0f Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 17:15:46 +0800 Subject: [PATCH 05/37] Fix radio group className --- components/radio/group.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/radio/group.jsx b/components/radio/group.jsx index 113b470690..f731af8369 100644 --- a/components/radio/group.jsx +++ b/components/radio/group.jsx @@ -17,6 +17,7 @@ export default React.createClass({ return { prefixCls: 'ant-radio-group', disabled: false, + size: 'default', onChange() { }, }; From 052d0ac1220723946159e16eb00c28f8c2e6e5fa Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 18:13:16 +0800 Subject: [PATCH 06/37] Fix tree select size style --- components/tree-select/index.jsx | 10 +- style/components/treeSelect.less | 504 ++----------------------------- 2 files changed, 23 insertions(+), 491 deletions(-) diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index a7efb1d64a..f261129d82 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; const AntTreeSelect = React.createClass({ getDefaultProps() { return { - prefixCls: 'ant-tree-select', + prefixCls: 'ant-select', transitionName: 'slide-up', choiceTransitionName: 'zoom', showSearch: false, @@ -14,12 +14,12 @@ const AntTreeSelect = React.createClass({ render() { const props = this.props; let { - size, className, combobox, notFoundContent + size, className, combobox, notFoundContent, prefixCls } = this.props; const cls = classNames({ - 'ant-tree-select-lg': size === 'large', - 'ant-tree-select-sm': size === 'small', + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', [className]: !!className, }); @@ -29,7 +29,7 @@ const AntTreeSelect = React.createClass({ let checkable = props.treeCheckable; if (checkable) { - checkable = ; + checkable = ; } return ( diff --git a/style/components/treeSelect.less b/style/components/treeSelect.less index 93e3d9f5f0..5574cb14d9 100644 --- a/style/components/treeSelect.less +++ b/style/components/treeSelect.less @@ -1,8 +1,9 @@ -@tree-select-tree-prefix-cls: ant-tree-select-tree; -.antCheckboxFn(@checkbox-prefix-cls: ant-tree-select-tree-checkbox); +@select-tree-prefix-cls: ant-select-tree; @import "../mixins/iconfont"; -.@{tree-select-tree-prefix-cls} { +.antCheckboxFn(@checkbox-prefix-cls: ant-select-tree-checkbox); + +.@{select-tree-prefix-cls} { margin: 0; padding: 8px; font-size: 12px; @@ -35,16 +36,16 @@ &:hover { background-color: tint(@primary-color, 90%); } - &.@{tree-select-tree-prefix-cls}-node-selected { + &.@{select-tree-prefix-cls}-node-selected { background-color: tint(@primary-color, 80%); } } span { - &.@{tree-select-tree-prefix-cls}-checkbox { + &.@{select-tree-prefix-cls}-checkbox { margin: 2px 4px 0 0; } - &.@{tree-select-tree-prefix-cls}-switcher, - &.@{tree-select-tree-prefix-cls}-iconEle { + &.@{select-tree-prefix-cls}-switcher, + &.@{select-tree-prefix-cls}-iconEle { margin: 0; width: 16px; height: 16px; @@ -55,7 +56,7 @@ cursor: pointer; outline: none; } - &.@{tree-select-tree-prefix-cls}-icon_loading { + &.@{select-tree-prefix-cls}-icon_loading { &:after { content: '\e6a1'; display: inline-block; @@ -65,17 +66,17 @@ margin-top: 8px; } } - &.@{tree-select-tree-prefix-cls}-switcher { - &.@{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 { + &.@{select-tree-prefix-cls}-switcher { + &.@{select-tree-prefix-cls}-roots_open, + &.@{select-tree-prefix-cls}-center_open, + &.@{select-tree-prefix-cls}-bottom_open, + &.@{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 { + &.@{select-tree-prefix-cls}-roots_close, + &.@{select-tree-prefix-cls}-center_close, + &.@{select-tree-prefix-cls}-bottom_close, + &.@{select-tree-prefix-cls}-noline_close { .antTreeSwitcherIcon(); .ie-rotate(3); &:after { @@ -108,472 +109,3 @@ vertical-align: top; } } - - -@tree-select-prefix-cls: ant-tree-select; - -@duration: .3s; - -@import "../mixins/iconfont"; - -.@{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 @border-color-base; - .transition(all .3s @ease-in-out); - - &:hover { - .hover; - } - &:active { - .active; - } - } - - &-disabled { - color: #ccc; - } - - &-disabled &-selection { - background: #f4f4f4; - cursor: not-allowed; - &:hover, - &:active { - border-color: @border-color-base; - } - } - - &-disabled &-selection--multiple &-selection__choice { - background: #e9e9e9; - color: #999; - padding-right: 10px; - &__remove { - display: none; - } - } - - &-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(); - } - - &:hover .@{tree-select-prefix-cls}-selection__clear { - opacity: 1; - } - - .@{tree-select-prefix-cls}-selection__placeholder { - color: #ccc; - } - } - - &-lg { - .@{tree-select-prefix-cls}-selection--single { - height: 32px; - .@{tree-select-prefix-cls}-selection__rendered { - line-height: 30px; - } - } - - .@{tree-select-prefix-cls}-selection--multiple { - min-height: 32px; - - .@{tree-select-prefix-cls}-search__field__placeholder { - left: 10px; - margin-top: 4px; - font-size: 14px; - line-height: 24px; - height: 24px; - } - - .@{tree-select-prefix-cls}-selection__rendered { - li { - height: 22px; - .@{tree-select-prefix-cls}-selection__choice__content { - font-size: 14px; - line-height: 22px; - } - } - } - } - } - - &-sm { - .@{tree-select-prefix-cls}-selection { - border-radius: @border-radius-sm; - } - .@{tree-select-prefix-cls}-selection--single { - height: 22px; - .@{tree-select-prefix-cls}-selection__rendered { - line-height: 20px; - } - } - .@{tree-select-prefix-cls}-selection--multiple { - min-height: 22px; - .@{tree-select-prefix-cls}-selection__rendered { - li { - height: 14px; - .@{tree-select-prefix-cls}-selection__choice__content { - line-height: 10px; - font-size: 8px; - position: relative; - top: -3px; - } - .@{tree-select-prefix-cls}-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 { - left: 10px; - margin-top: 4px; - height: 20px; - line-height: 20px; - } - - .@{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; - } - - > 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 @border-color-base; - 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 @border-color-base; - border-radius: 4px; - outline: none; - } - &.@{tree-select-prefix-cls}-search--hide { - display: none; - } - } -} From 49536539474a0df578e2dce25946abdf8d47e420 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 26 Feb 2016 18:32:52 +0800 Subject: [PATCH 07/37] update doc --- docs/react/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 2041a97814..b9ca914184 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -138,7 +138,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 ## 自行构建 -如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试，可以参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js)。 +如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.htm)。 ### 改变主色系 From 86b5c6eeccaf254af14ea6822cad708b898f5833 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 28 Feb 2016 00:16:32 +0800 Subject: [PATCH 08/37] Fix some style --- components/radio/group.jsx | 12 ++++++------ style/components/inputNumber.less | 1 - 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/radio/group.jsx b/components/radio/group.jsx index f731af8369..1ca8021c62 100644 --- a/components/radio/group.jsx +++ b/components/radio/group.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; function getCheckedValue(children) { let value = null; @@ -17,7 +18,6 @@ export default React.createClass({ return { prefixCls: 'ant-radio-group', disabled: false, - size: 'default', onChange() { }, }; @@ -77,10 +77,10 @@ export default React.createClass({ } return radio; }); - return ( -
- {children} -
- ); + const classString = classNames({ + [props.prefixCls]: true, + [`${props.prefixCls}-${props.size}`]: props.size, + }); + return
{children}
; }, }); diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less index 6b8759550a..5a1c6af2d0 100644 --- a/style/components/inputNumber.less +++ b/style/components/inputNumber.less @@ -110,7 +110,6 @@ input { height: 32px; line-height: 32px; - font-size: 14px; } .@{input-number-prefix-cls}-handler-up-inner { From 5f8baf1bfd32ce6fe3a6444675d04d06465e92c5 Mon Sep 17 00:00:00 2001 From: ecofe <150641329@qq.com> Date: Mon, 29 Feb 2016 16:52:53 +0800 Subject: [PATCH 09/37] modify md file (dropdownStyle) --- components/tree-select/demo/basic.md | 2 +- components/tree-select/demo/treeData.md | 2 +- components/tree-select/index.md | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index eafa83d778..7077395235 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -24,7 +24,7 @@ const Demo = React.createClass({ return ( Date: Mon, 29 Feb 2016 18:02:05 +0800 Subject: [PATCH 10/37] Fix onClick in dropdown button, close #1097 --- components/dropdown/demo/dropdown-button.md | 24 +++++++------- components/dropdown/dropdown-button.jsx | 36 +++++++++++---------- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md index bd164a7aa6..c4fddb9d7d 100644 --- a/components/dropdown/demo/dropdown-button.md +++ b/components/dropdown/demo/dropdown-button.md @@ -10,22 +10,24 @@ import { Menu, Dropdown } from 'antd'; const DropdownButton = Dropdown.Button; +function handleButtonClick() { + console.log('click button'); +} + +function handleMenuClick(e) { + console.log('click', e); +} + const menu = ( - - - 第一个菜单项 - - - 第二个菜单项 - - - 第三个菜单项 - + + 第一个菜单项 + 第二个菜单项 + 第三个菜单项 ); ReactDOM.render( - + 某功能按钮 , mountNode); diff --git a/components/dropdown/dropdown-button.jsx b/components/dropdown/dropdown-button.jsx index c722d62820..675f97c5c9 100644 --- a/components/dropdown/dropdown-button.jsx +++ b/components/dropdown/dropdown-button.jsx @@ -3,32 +3,34 @@ import Button from '../button'; import Icon from '../icon'; import Dropdown from './dropdown'; const ButtonGroup = Button.Group; - -const align = { - points: ['tr', 'br'], - overlay: { - adjustX: 1, - adjustY: 1, - }, - offset: [0, 4], - targetOffset: [0, 0], -}; +import classNames from 'classnames'; export default React.createClass({ getDefaultProps() { return { - align, + align: { + points: ['tr', 'br'], + overlay: { + adjustX: 1, + adjustY: 1, + }, + offset: [0, 4], + targetOffset: [0, 0], + }, type: 'default', }; }, render() { + const { type, overlay, trigger, align, children, className, ...restProps } = this.props; + const cls = classNames({ + 'ant-dropdown-button': true, + className: !!className, + }); return ( - - - - + + From 05d38115d898dc0e508efb918601f3f77e210c92 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Mar 2016 13:49:39 +0800 Subject: [PATCH 11/37] upgrade react-slick to 0.11 close #529 & close #1009 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c7b705cdf9..ee8829fe46 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "rc-trigger": "~1.1.1", "rc-upload": "~1.8.0", "rc-util": "~3.1.2", - "react-slick": "^0.10.0", + "react-slick": "^0.11.0", "velocity-animate": "~1.2.2", "warning": "~2.1.0" }, From e1a5c20d26e170de94e5070f0aaf2770079545ab Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Mar 2016 16:43:16 +0800 Subject: [PATCH 12/37] Fix tab nav button disabled style --- style/components/tabs.less | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/style/components/tabs.less b/style/components/tabs.less index 5b9dbdee07..fd16c54d47 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -65,6 +65,12 @@ background-color: transparent; position: absolute; text-align: center; + color: #999; + transition: color 0.3s ease; + + &:hover { + color: #666; + } &-icon { position: relative; @@ -87,9 +93,11 @@ } &-tab-btn-disabled { - cursor: default; - color: #ccc; - pointer-events: none; + cursor: not-allowed; + &, + &:hover { + color: #ccc; + } } &-tab-next { From 7ce38e39b62be41021038f0d50f3000dfccfbdab Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Mar 2016 17:01:03 +0800 Subject: [PATCH 13/37] Fix CheckboxGroup value, close #1101 --- components/checkbox/Group.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index e90d13e63b..e9b353856d 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -34,7 +34,7 @@ export default React.createClass({ }, toggleOption(option) { const optionIndex = this.state.value.indexOf(option); - const value = this.state.value; + const value = [...this.state.value]; if (optionIndex === - 1) { value.push(option); } else { From ca2fca024abaf7f55c0eca2aa374cf5fa5765225 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Mar 2016 17:52:07 +0800 Subject: [PATCH 14/37] fix child null bug in FormItem --- components/form/FormItem.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index b48b029f8b..db90cddde3 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -131,10 +131,9 @@ class FormItem extends React.Component { renderChildren() { const props = this.props; const children = React.Children.map(props.children, (child) => { - if (typeof child.type === 'function' && !child.props.size) { + if (child && typeof child.type === 'function' && !child.props.size) { return React.cloneElement(child, { size: 'large' }); } - return child; }); return [ From 991eb76953ff4805e3cf44e12e69c2d6df4d8ac9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Mar 2016 18:07:40 +0800 Subject: [PATCH 15/37] upgrade rc-select ant rc-trigger, improve combobox select experience --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ee8829fe46..06236b0086 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "rc-progress": "~1.0.4", "rc-queue-anim": "~0.11.2", "rc-radio": "~2.0.0", - "rc-select": "~5.9.1", + "rc-select": "~5.10.0", "rc-slider": "~3.3.0", "rc-steps": "~1.4.1", "rc-switch": "~1.3.2", @@ -64,7 +64,7 @@ "rc-tooltip": "~3.3.1", "rc-tree": "~1.1.0", "rc-tree-select": "~1.1.1", - "rc-trigger": "~1.1.1", + "rc-trigger": "~1.2.0", "rc-upload": "~1.8.0", "rc-util": "~3.1.2", "react-slick": "^0.11.0", From 0b2e7a69260f8509efdff44da6ea556bbbe2101a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 1 Mar 2016 18:19:46 +0800 Subject: [PATCH 16/37] upgrade deps --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 06236b0086..8911a9d9c6 100644 --- a/package.json +++ b/package.json @@ -43,9 +43,9 @@ "rc-cascader": "~0.9.0", "rc-checkbox": "~1.3.0", "rc-collapse": "~1.4.4", - "rc-dialog": "~5.3.1", + "rc-dialog": "~5.4.0", "rc-dropdown": "~1.4.3", - "rc-form": "~0.13.0", + "rc-form": "~0.14.0", "rc-form-validation": "~2.5.0", "rc-input-number": "~2.4.1", "rc-menu": "~4.10.2", @@ -58,7 +58,7 @@ "rc-slider": "~3.3.0", "rc-steps": "~1.4.1", "rc-switch": "~1.3.2", - "rc-table": "~3.10.1", + "rc-table": "~3.11.0", "rc-tabs": "~5.7.0", "rc-time-picker": "~1.1.0", "rc-tooltip": "~3.3.1", From 4381de2e11d266e379e4b3a727b0b1533c0e3a56 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 11:46:36 +0800 Subject: [PATCH 17/37] update pagination style --- style/components/pagination.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/pagination.less b/style/components/pagination.less index 25a4b8d466..b9fe5a1936 100644 --- a/style/components/pagination.less +++ b/style/components/pagination.less @@ -229,12 +229,12 @@ width: 30px; height: 24px; text-align: center; + transition: border-color 0.3s ease; &:hover { border-color: @primary-color; } } - } } From 218b7bb39c3ebd537970bf8b7c32196779788f98 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 12:13:26 +0800 Subject: [PATCH 18/37] upgrade deps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8911a9d9c6..2ed90b84ac 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "rc-input-number": "~2.4.1", "rc-menu": "~4.10.2", "rc-notification": "~1.3.1", - "rc-pagination": "~1.4.0", + "rc-pagination": "~1.5.1", "rc-progress": "~1.0.4", "rc-queue-anim": "~0.11.2", "rc-radio": "~2.0.0", @@ -58,7 +58,7 @@ "rc-slider": "~3.3.0", "rc-steps": "~1.4.1", "rc-switch": "~1.3.2", - "rc-table": "~3.11.0", + "rc-table": "~3.11.1", "rc-tabs": "~5.7.0", "rc-time-picker": "~1.1.0", "rc-tooltip": "~3.3.1", From e8ce54f864893cb3ad9fe35d5eb194ef071812e3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 12:16:58 +0800 Subject: [PATCH 19/37] update doc for defaultPageSize --- components/pagination/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/pagination/index.md b/components/pagination/index.md index 5374736a2b..06b47a3476 100644 --- a/components/pagination/index.md +++ b/components/pagination/index.md @@ -24,7 +24,8 @@ | current | 当前页数 | Number | 无 | | defaultCurrent | 默认的当前页数 | Number | 1 | | total | 数据总数 | Number | 0 | -| pageSize | 每页条数 | Number | 10 | +| defaultPageSize | 初始的每页条数 | Number | 10 | +| pageSize | 每页条数 | Number | | | onChange | 页码改变的回调，参数是改变后的页码 | Function | noop | | showSizeChanger | 是否可以改变 pageSize | Bool | false | | pageSizeOptions | 指定每页可以显示多少条 | Array | ['10', '20', '30', '40'] | From 3738eb3b73da3ae21c014f8dba4195ca1b1b8bc0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 14:47:42 +0800 Subject: [PATCH 20/37] update code style --- components/table/demo/expand.md | 12 ++---------- components/table/index.jsx | 12 ++++++------ 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md index 1ec2559d0c..08465a1e00 100644 --- a/components/table/demo/expand.md +++ b/components/table/demo/expand.md @@ -9,19 +9,11 @@ ````jsx import { Table } from 'antd'; -function renderAction() { - return 删除; -} - -function expandedRowRender(record) { - return

{record.description}

; -} - const columns = [ { title: '姓名', dataIndex: 'name', key: 'name' }, { title: '年龄', dataIndex: 'age', key: 'age' }, { title: '住址', dataIndex: 'address', key: 'address' }, - { title: '操作', dataIndex: '', key: 'x', render: renderAction } + { title: '操作', dataIndex: '', key: 'x', render: () => 删除 } ]; const data = [ @@ -32,7 +24,7 @@ const data = [ ReactDOM.render(

{record.description}

} dataSource={data} className="table" /> , mountNode); diff --git a/components/table/index.jsx b/components/table/index.jsx index b494282082..b14f0dd818 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -553,12 +553,12 @@ let AntTable = React.createClass({ }, render() { - let data = this.getCurrentPageData(); + const data = this.getCurrentPageData(); let columns = this.renderRowSelection(); - let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; - let locale = objectAssign({}, defaultLocale, this.props.locale); + const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; + const locale = objectAssign({}, defaultLocale, this.props.locale); - let classString = classNames({ + const classString = classNames({ [`ant-table-${this.props.size}`]: true, 'ant-table-bordered': this.props.bordered, [this.props.className]: !!this.props.className, @@ -595,10 +595,10 @@ let AntTable = React.createClass({ if (this.props.loading) { // if there is no pagination or no data, // the height of spin should decrease by half of pagination - let paginationPatchClass = (this.hasPagination() && data && data.length !== 0) + const paginationPatchClass = (this.hasPagination() && data && data.length !== 0) ? 'ant-table-with-pagination' : 'ant-table-without-pagination'; - let spinClassName = `${paginationPatchClass} ant-table-spin-holder`; + const spinClassName = `${paginationPatchClass} ant-table-spin-holder`; table = {table}; } return ( From 82fff19ab84003359273a5ce619a794afd33a7ec Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 15:10:13 +0800 Subject: [PATCH 21/37] Fix some DatePicker style --- style/components/datepicker/Calendar.less | 3 ++- style/components/datepicker/RangePicker.less | 11 +++++++---- style/components/datepicker/TimePicker.less | 3 ++- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less index 79cc271c8c..78526cc48a 100644 --- a/style/components/datepicker/Calendar.less +++ b/style/components/datepicker/Calendar.less @@ -153,7 +153,7 @@ display: block; margin: 0 auto; color: #666; - border-radius: 4px; + border-radius: @border-radius-sm; width: 20px; height: 20px; line-height: 18px; @@ -167,6 +167,7 @@ background: tint(@primary-color, 90%); cursor: pointer; } + &:active { color: #fff; background: tint(@primary-color, 20%); diff --git a/style/components/datepicker/RangePicker.less b/style/components/datepicker/RangePicker.less index dc8e929888..e3ae488238 100644 --- a/style/components/datepicker/RangePicker.less +++ b/style/components/datepicker/RangePicker.less @@ -66,11 +66,12 @@ } .@{calendar-prefix-cls}-input { border: 1px solid @border-color-base; - border-radius: @border-radius-base; + border-radius: @border-radius-sm; } .@{calendar-prefix-cls}-input, .@{css-prefix}time-picker-input { - padding: 1px 7px; + .input; + border-radius: @border-radius-sm; height: @input-height-sm; width: 96px; } @@ -121,9 +122,11 @@ } .@{calendar-prefix-cls}-ok-btn { position: static; - margin: 7px 9px 9px; + height: 22px; + margin: 8px; } .@{calendar-prefix-cls}-today-btn { - margin: 9px; + margin: 8px 12px; + height: 22px; } } diff --git a/style/components/datepicker/TimePicker.less b/style/components/datepicker/TimePicker.less index 5ea3de3e9d..f7a4b15961 100644 --- a/style/components/datepicker/TimePicker.less +++ b/style/components/datepicker/TimePicker.less @@ -17,7 +17,8 @@ .@{calendar-prefix-cls}-input, .@{timepicker-prefix-cls}-input { .input; - height: 22px; + border-radius: @border-radius-sm; + height: @input-height-sm; width: 96px; margin-right: 6px; } From f9aed154649c8f046ac25abee12838c7db5fcca0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 15:20:52 +0800 Subject: [PATCH 22/37] remove inline form-item width 100% --- style/components/form.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/style/components/form.less b/style/components/form.less index 118fa536f7..90bbf942d9 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -256,10 +256,6 @@ form { vertical-align: middle; } - .@{calendar-prefix-cls}-picker-input { - width: 100%!important; - } - .@{css-prefix}form-text { display: inline-block; } From d618691bc1ecc3a70338f4ae1dfe70fda0c32963 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 15:34:01 +0800 Subject: [PATCH 23/37] update site style --- site/static/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index aea3d05ec8..2b7d5d505b 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1441,9 +1441,9 @@ a.entry-link:hover .anticon-smile { float: none; width: 100%; } - .preview-image-box { padding-left: 0; + margin: 10px 0; } } From 8070e05de1d1891d883ffe2cd635ef83ac022a00 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 15:45:37 +0800 Subject: [PATCH 24/37] update demo --- components/date-picker/demo/time.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 164565ef36..81de2d224c 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -14,6 +14,6 @@ function onChange(value) { } ReactDOM.render( - + , mountNode); ```` From 9b09e54df5388adcc3864c7d72cd264a5eab1a60 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 16:01:36 +0800 Subject: [PATCH 25/37] Fix columns[0] undefined bug in Table --- components/table/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index b14f0dd818..29c56dba80 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -374,8 +374,7 @@ let AntTable = React.createClass({ className: 'ant-table-selection-column' }; } - if (columns[0] && - columns[0].key === 'selection-column') { + if (columns[0] && columns[0].key === 'selection-column') { columns[0] = selectionColumn; } else { columns.unshift(selectionColumn); @@ -587,7 +586,7 @@ let AntTable = React.createClass({ data={data} columns={columns} className={classString} - expandIconColumnIndex={columns[0].key === 'selection-column' ? 1 : 0} + expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0} expandIconAsCell={expandIconAsCell} /> {emptyText} From a058ebc37256bd8f3d5a6512b6776b371485d9eb Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 2 Mar 2016 17:11:12 +0800 Subject: [PATCH 26/37] Fix Input className, close #1103 --- components/form/demo/horizontal-form.md | 10 ++++---- components/input/index.jsx | 34 ++++++++++--------------- style/components/form.less | 3 --- 3 files changed, 18 insertions(+), 29 deletions(-) diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md index 7e6bd219ca..2685c7021e 100644 --- a/components/form/demo/horizontal-form.md +++ b/components/form/demo/horizontal-form.md @@ -1,4 +1,4 @@ -# 水平排列的表单 +# 典型表单 - order: 2 @@ -37,10 +37,10 @@ let Demo = React.createClass({ label="您的性别：" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}> - - 男的 - 女的 - + + 男的 + 女的 + { - return `${prefixCls}-${s}`; - }).join(' '); -} - function ieGT9() { if (typeof document === undefined) { return false; @@ -44,8 +38,8 @@ Group.propTypes = { class Input extends React.Component { renderLabledInput(children) { const props = this.props; - const wrapperClassName = prefixClsFn(props.prefixCls, 'input-group'); - const addonClassName = prefixClsFn(wrapperClassName, 'addon'); + const wrapperClassName = `${props.prefixCls}-group`; + const addonClassName = `${wrapperClassName}-addon`; const addonBefore = props.addonBefore ? ( {props.addonBefore} @@ -59,9 +53,10 @@ class Input extends React.Component { ) : null; const className = classNames({ - [`${props.prefixCls}-input-wrapper`]: true, + [`${props.prefixCls}-wrapper`]: true, [wrapperClassName]: (addonBefore || addonAfter), }); + return ( {addonBefore} @@ -74,16 +69,17 @@ class Input extends React.Component { renderInput() { const props = assign({}, this.props); const prefixCls = props.prefixCls; - let inputClassName = prefixClsFn(prefixCls, 'input'); if (!props.type) { return props.children; } - switch (props.size) { - case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break; - case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break; - default: - } + const inputClassName = classNames({ + [prefixCls]: true, + [`${prefixCls}-sm`]: props.size === 'small', + [`${prefixCls}-lg`]: props.size === 'large', + [props.className]: !!props.className, + }); + let placeholder = props.placeholder; if (placeholder && ieGT9()) { placeholder = null; @@ -93,12 +89,8 @@ class Input extends React.Component { } switch (props.type) { case 'textarea': - return ( -