From 6344e9151bccf817d4baa7e51a7efd3999507ae7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 17:08:06 +0800 Subject: [PATCH 01/34] Add component tag --- components/tag/demo/basic.md | 17 +++++++++++++++++ components/tag/index.jsx | 29 +++++++++++++++++++++++++++++ index.js | 1 + 3 files changed, 47 insertions(+) create mode 100644 components/tag/demo/basic.md create mode 100644 components/tag/index.jsx diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md new file mode 100644 index 000000000..aae6d9700 --- /dev/null +++ b/components/tag/demo/basic.md @@ -0,0 +1,17 @@ +# 基本 + +- order: 0 + +标签。 + +--- + +````jsx +var Tag = antd.Tag; + +React.render(
+ 标签一 + 标签二 + 标签三 +
, document.getElementById('components-tag-demo-basic')); +```` diff --git a/components/tag/index.jsx b/components/tag/index.jsx new file mode 100644 index 000000000..e664f9fae --- /dev/null +++ b/components/tag/index.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +const prefixCls = 'ant-tag'; + +class AntTag extends React.Component { + destroy() { + let node = React.findDOMNode(this); + React.unmountComponentAtNode(node); + node.parentNode.removeChild(node); + this.props.onClose.call(this); + } + render() { + var close = this.props.closable ? + : ''; + return
+ + {this.props.children} + + {close} +
; + } +} + +AntTag.defaultProps = { + prefixCls: prefixCls, + closable: false, + onClose: function() {} +}; + +export default AntTag; diff --git a/index.js b/index.js index 78dad6240..704c3f730 100644 --- a/index.js +++ b/index.js @@ -19,6 +19,7 @@ var antd = { Switch: require('./components/switch'), Checkbox: require('./components/checkbox'), Table: require('./components/table'), + Tag: require('./components/tag'), Collapse: require('./components/collapse'), message: require('./components/message'), Slider: require('./components/slider'), From 2e0be628a75cf6ddf1be4bc6f4730d1148385779 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 20:03:10 +0800 Subject: [PATCH 02/34] update tag style --- components/tag/demo/basic.md | 10 +++-- components/tag/demo/colorful.md | 19 +++++++++ components/tag/index.jsx | 10 ++--- style/components/index.less | 1 + style/components/tag.less | 72 +++++++++++++++++++++++++++++++++ 5 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 components/tag/demo/colorful.md create mode 100644 style/components/tag.less diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index aae6d9700..31c306355 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -2,16 +2,20 @@ - order: 0 -标签。 +简单的标签展示，添加 closable 表示可关闭。 --- ````jsx var Tag = antd.Tag; +function onClose() { + console.log(this.props.children); +} + React.render(
- 标签一 - 标签二 + 标签一 + 标签二 标签三
, document.getElementById('components-tag-demo-basic')); ```` diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md new file mode 100644 index 000000000..b387c25cb --- /dev/null +++ b/components/tag/demo/colorful.md @@ -0,0 +1,19 @@ +# 各种类型 + +四种颜色的标签。 + +- order: 1 + +--- + +````jsx +var Tag = antd.Tag; + +React.render(
+ 蓝色 + 绿色 + 黄色 + 红色 +
, document.getElementById('components-tag-demo-colorful')); +```` + diff --git a/components/tag/index.jsx b/components/tag/index.jsx index e664f9fae..80f04e9ce 100644 --- a/components/tag/index.jsx +++ b/components/tag/index.jsx @@ -9,12 +9,12 @@ class AntTag extends React.Component { this.props.onClose.call(this); } render() { - var close = this.props.closable ? + let close = this.props.closable ? : ''; - return
- - {this.props.children} - + let colorClass = this.props.prefixCls + '-' + this.props.color; + + return
+ {close}
; } diff --git a/style/components/index.less b/style/components/index.less index 81ac64f5f..995f7f9bc 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -24,3 +24,4 @@ @import "divider"; @import "slider"; @import "radio"; +@import "tag"; diff --git a/style/components/tag.less b/style/components/tag.less new file mode 100644 index 000000000..fad7eee02 --- /dev/null +++ b/style/components/tag.less @@ -0,0 +1,72 @@ +@import "../mixins/index"; +@tagPrefixClass: ~"@{css-prefix}tag"; + +.@{tagPrefixClass} { + display: inline-block; + line-height: 22px; + height: 22px; + padding: 0 8px; + border-radius: 20px; + background: #f3f3f3; + font-size: @font-size-base; + margin-right: 4px; + margin-bottom: 8px; + transition: all 0.3s ease; + vertical-align: middle; + opacity: 0.85; + + &:hover { + opacity: 1; + } + + &, + a, + a:hover { + color: @text-color; + } + + .anticon-cross { + .iconfont-size-under-12px(7px); + cursor: pointer; + font-weight: bold; + margin-left: 3px; + position: relative; + top: -1px; + color: #6666; + transition: all 0.3s ease; + opacity: 0.66; + + &:hover { + opacity: 1; + } + } + + &-blue, + &-green, + &-yellow, + &-red { + &, + a, + a:hover, + .anticon-cross, + .anticon-cross:hover { + color: #fff; + } + } + + &-blue { + background: @primary-color; + } + + &-green { + background: @success-color; + } + + &-yellow { + background: @warning-color; + } + + &-red { + background: @error-color; + } +} From 09c0bd7c4b65a9f0cfa1d8c7afd54b80aaf021fb Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jul 2015 20:15:25 +0800 Subject: [PATCH 03/34] update tag demo and document --- components/tag/demo/basic.md | 7 ++++--- components/tag/index.md | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index 31c306355..2886bbd05 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -14,8 +14,9 @@ function onClose() { } React.render(
- 标签一 - 标签二 - 标签三 + 标签一 + 标签二 + 标签三 + 标签四（链接）
, document.getElementById('components-tag-demo-basic')); ```` diff --git a/components/tag/index.md b/components/tag/index.md index 5a2d7fde2..6261d1372 100644 --- a/components/tag/index.md +++ b/components/tag/index.md @@ -4,3 +4,19 @@ - chinese: 标签 --- + +进行标记和分类的小标签。 + +## 何时使用 + +- 用于标记事物的属性和维度。 +- 进行分类。 + +## API + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|----------------|--------------------------------|------------|---------|--------| +| href | 链接的地址，会传给 a 标签 | string | | false | +| closable | 标签是否可以关闭 | boolean | | false | +| onClose | 组合时根据此项判定checked | function | | 无 | +| color | 标签的色彩 | string | blue green yellow red | 无 | From 4c0cbd846cf7eb3ae4ca7e50c7a477132e85f11d Mon Sep 17 00:00:00 2001 From: yiminghe Date: Wed, 29 Jul 2015 16:49:05 +0800 Subject: [PATCH 04/34] fix tabs anim --- style/components/tabs.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/components/tabs.less b/style/components/tabs.less index 9f8a3150e..7fa2ca390 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -197,6 +197,7 @@ } &-slide-horizontal-backward-enter { + display: block !important; transform: translateX(-100%); } @@ -206,6 +207,7 @@ } &-slide-horizontal-backward-leave { + display: block !important; position: absolute; top: 0; left: 0; @@ -220,6 +222,7 @@ } &-slide-horizontal-forward-enter { + display: block !important; transform: translateX(100%); } @@ -229,6 +232,7 @@ } &-slide-horizontal-forward-leave { + display: block !important; position: absolute; transform: translateX(0); top: 0; From 3c47cf20390f6372a8f2adfb0db102519edfaa2d Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Jul 2015 20:13:42 +0800 Subject: [PATCH 05/34] set event as onClose argument --- components/tag/demo/basic.md | 2 +- components/tag/index.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index 2886bbd05..a5ba2d374 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -9,7 +9,7 @@ ````jsx var Tag = antd.Tag; -function onClose() { +function onClose(e) { console.log(this.props.children); } diff --git a/components/tag/index.jsx b/components/tag/index.jsx index 80f04e9ce..61389d89c 100644 --- a/components/tag/index.jsx +++ b/components/tag/index.jsx @@ -2,11 +2,11 @@ import React from 'react'; const prefixCls = 'ant-tag'; class AntTag extends React.Component { - destroy() { + destroy(e) { let node = React.findDOMNode(this); React.unmountComponentAtNode(node); node.parentNode.removeChild(node); - this.props.onClose.call(this); + this.props.onClose.call(this, e); } render() { let close = this.props.closable ? From a85586844c00ea9a48e913606030dfd28999f945 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Wed, 29 Jul 2015 22:20:05 +0800 Subject: [PATCH 06/34] progress bar style --- components/progress/demo/line-mini.md | 6 +-- components/progress/index.jsx | 78 +++++++++++++-------------- style/components/progress.less | 49 ++++++++++++----- 3 files changed, 78 insertions(+), 55 deletions(-) diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 265f8fc28..453bbb944 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -11,9 +11,9 @@ var Progress = antd.Progress.Line; React.render(
- - - + + +
, document.getElementById('components-progress-demo-line-mini')); ```` diff --git a/components/progress/index.jsx b/components/progress/index.jsx index 1c380a8fc..b1443e9bc 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -1,65 +1,69 @@ -import {Line as Progressline, Circle as Progresscircle} from 'rc-progress'; +import {Circle as Progresscircle} from 'rc-progress'; import React from 'react'; import assign from 'object-assign'; +const prefixCls = 'ant-progress'; + +const statusColorMap = { + 'normal': '#3FC7FA', + 'exception': '#FE8C6A', + 'success': '#85D262' +}; + var Line = React.createClass({ + propTypes: { + percent: function(props, propName){ + if ( props[propName] < 0 && props[propName] > 100) { + return new Error('Validation failed!'); + } + }, + strokeWidth: React.PropTypes.string + }, getDefaultProps() { return { - width: 300, percent: 0, - strokeWidth: 3, + strokeWidth: '10px', status: 'normal' // exception }; }, render() { - var statusColorMap = { - 'normal': '#3FC7FA', - 'exception': '#FE8C6A', - 'success': '#85D262' - }; - var props = assign({}, this.props); if (parseInt(props.percent) === 100) { props.status = 'success'; } - var style = { - 'width': props.width - }; - var fontSize = (props.width / 100 * props.strokeWidth); - var iconStyle = { - 'fontSize': (fontSize < 12) ? 12 : fontSize - }; - var textStyle = { - 'color': statusColorMap[props.status] - }; var progressInfo; if (props.status === 'exception') { progressInfo = ( - - + + ); } else if (props.status === 'success') { progressInfo = ( - - + + ); } else { progressInfo = ( - {props.percent}% + {props.percent}% ); } + var persentStyle = { + width: props.percent + '%', + height: props.strokeWidth + }; return ( -
-
- -
+
{progressInfo} +
+
+
+
+
); } @@ -75,12 +79,6 @@ var Circle = React.createClass({ }; }, render() { - var statusColorMap = { - 'normal': '#3FC7FA', - 'exception': '#FE8C6A', - 'success': '#85D262' - }; - var props = assign({}, this.props); if (parseInt(props.percent) === 100) { @@ -100,25 +98,25 @@ var Circle = React.createClass({ var progressInfo; if (props.status === 'exception') { progressInfo = ( - + ); } else if (props.status === 'success') { progressInfo = ( - + ); } else { progressInfo = ( - {props.percent}% + {props.percent}% ); } return ( -
-
+
+
{progressInfo} diff --git a/style/components/progress.less b/style/components/progress.less index d87c9084d..3b6ea0774 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -1,32 +1,57 @@ @prefixProgressClass: ant-progress; +@statusNormal: #3FC7FA; +@statusException: #FE8C6A; +@statusSuccess: #85D262; .@{prefixProgressClass} { - &-line-wrap, - &-circle-wrap { - display: inline-block; - } - &-line-wrap { + width: 100%; font-size: 12px; + position: relative; + } + &-line-outer { + margin-right: 45px; } &-line-inner { display: inline-block; - - svg { - vertical-align: middle; - } + width: 100%; + background-color: #E9E9E9; + border-radius: 100px; + margin-right: 45px; + } + &-line-bg { + border-radius: 100px; + background-color: @statusNormal; } - &-line-text { - display: inline-block; + position: absolute; + bottom: 0; + right: 0; + width: 35px; + text-align: left; font-size: 1em; margin-left: 10px; - line-height: 1; .anticon { font-size: 12px; } } + &-line-wrap.status-exception { + .@{prefixProgressClass}-line-bg { + background-color: @statusException; + } + .@{prefixProgressClass}-line-text { + color: @statusException; + } + } + &-line-wrap.status-success { + .@{prefixProgressClass}-line-bg { + background-color: @statusSuccess; + } + .@{prefixProgressClass}-line-text { + color: @statusSuccess; + } + } &-circle-inner { From ef3f753470ab5ea9061286ebc44dc64939392ee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Wed, 29 Jul 2015 23:32:24 +0800 Subject: [PATCH 07/34] progress bar style --- components/progress/demo/line-mini.md | 5 ++++- components/progress/index.jsx | 22 +++++----------------- style/components/progress.less | 14 ++++++++++++++ 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 453bbb944..0a4851425 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -8,9 +8,12 @@ ````jsx var Progress = antd.Progress.Line; +var style = { + width: "170px" +} React.render( -
+
diff --git a/components/progress/index.jsx b/components/progress/index.jsx index b1443e9bc..59fdbafb5 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -11,14 +11,6 @@ const statusColorMap = { }; var Line = React.createClass({ - propTypes: { - percent: function(props, propName){ - if ( props[propName] < 0 && props[propName] > 100) { - return new Error('Validation failed!'); - } - }, - strokeWidth: React.PropTypes.string - }, getDefaultProps() { return { percent: 0, @@ -87,24 +79,20 @@ var Circle = React.createClass({ var style = { 'width': props.width, - 'height': props.width - }; - var wrapStyle = { + 'height': props.width, 'fontSize': props.width * 0.16 + 6 - }; - var textStyle = { - 'color': statusColorMap[props.status] + }; var progressInfo; if (props.status === 'exception') { progressInfo = ( - + ); } else if (props.status === 'success') { progressInfo = ( - + ); @@ -115,7 +103,7 @@ var Circle = React.createClass({ } return ( -
+
diff --git a/style/components/progress.less b/style/components/progress.less index 3b6ea0774..422e3081c 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -4,6 +4,10 @@ @statusSuccess: #85D262; .@{prefixProgressClass} { + &-line-wrap, + &-circle-wrap { + display: inline-block; + } &-line-wrap { width: 100%; font-size: 12px; @@ -72,4 +76,14 @@ font-size: 14/12em; } } + &-circle-wrap.status-exception { + .@{prefixProgressClass}-circle-text { + color: @statusException; + } + } + &-circle-wrap.status-success { + .@{prefixProgressClass}-circle-text { + color: @statusSuccess; + } + } } From fc69971f9917dac60927365b3e95221dce661982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Wed, 29 Jul 2015 23:36:27 +0800 Subject: [PATCH 08/34] =?UTF-8?q?progress=20bar=20=E5=92=8C=20progress=20c?= =?UTF-8?q?ircle=20api=E5=88=86=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/progress/index.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/progress/index.md b/components/progress/index.md index dbf6293d9..a8d96b280 100644 --- a/components/progress/index.md +++ b/components/progress/index.md @@ -16,7 +16,7 @@ * 当需要显示一个操作完成的百分比时。 -## API +## Progress Bar API | 参数 | 说明 | 类型 | 默认值 | |----------|---------------|----------|-------------| @@ -26,5 +26,14 @@ | width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null | +## Progress Circle API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|---------------|----------|-------------| +| percent | 百分比 | number | 0 | +| status | 状态，有两个值normal、exception | string | normal | +| strokeWidth | 进度条线宽度，单位是px | number | 1 | + + From 43c53f1d8d605b0fa15f4ae81c51caff3955ab1c Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 30 Jul 2015 11:15:03 +0800 Subject: [PATCH 09/34] loading button should be unhandlable --- components/button/demo/loading.md | 3 --- style/components/button.less | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index a818b92e8..9f5a314be 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -21,9 +21,6 @@ var App = React.createClass({ render() { var loadingClass = this.state.loading ? 'ant-btn-loading' : ''; return
- diff --git a/style/components/button.less b/style/components/button.less index c51664f37..cd358e755 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -44,6 +44,8 @@ &-loading { padding-right: 31px; + pointer-events: none; + opacity: 0.75; &:after { font-family: anticon; .animation(loadingCircle 1s infinite linear); From b607ab32cf6e6185e3b0507ddd17d0d7d491b6ac Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 30 Jul 2015 11:47:46 +0800 Subject: [PATCH 10/34] support config message top globally --- components/message/demo/success.md | 1 + components/message/index.jsx | 10 +++++++++- components/message/index.md | 15 +++++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/components/message/demo/success.md b/components/message/demo/success.md index 4df02f515..47fc24b7a 100644 --- a/components/message/demo/success.md +++ b/components/message/demo/success.md @@ -8,6 +8,7 @@ ````jsx var message = antd.message; + var success = function() { message.success('这是一条成功的提示'); }; diff --git a/components/message/index.jsx b/components/message/index.jsx index b038d3c71..165871f81 100644 --- a/components/message/index.jsx +++ b/components/message/index.jsx @@ -2,12 +2,15 @@ import React from 'react'; import Notification from 'rc-notification'; let defaultDuration = 1.5; +let top; function getMessageInstance() { return Notification.newInstance({ prefixCls: 'ant-message', transitionName: 'move-up', - style: {} // 覆盖原来的样式 + style: { + top: top + } // 覆盖原来的样式 }); } @@ -37,5 +40,10 @@ export default { }, error(content, duration) { notice(content, duration, 'error'); + }, + config(options) { + if (options.top) { + top = options.top; + } } }; diff --git a/components/message/index.md b/components/message/index.md index 3ceebbf79..245beb24a 100644 --- a/components/message/index.md +++ b/components/message/index.md @@ -25,3 +25,18 @@ |------------|----------------|----------------------------|--------------| | content | 提示内容 | React.Element or String | 无 | | duration | 自动关闭的延时 | number | 1.5 | + + +还提供了一个全局配置方法： + +- `message.config(options)` + +```js +message.config({ + top: 100 +}); +``` + +| 参数 | 说明 | 类型 | 默认值 | +|------------|--------------------|----------------------------|--------------| +| top | 消息距离顶部的位置 | Number | 24px | From 32997409686135ed00dbaee0524ecd4616da1a31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Thu, 30 Jul 2015 14:26:41 +0800 Subject: [PATCH 11/34] =?UTF-8?q?progress=20bar=20=E5=92=8C=20progress=20c?= =?UTF-8?q?ircle=20api=E5=88=86=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/progress/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/progress/index.jsx b/components/progress/index.jsx index 59fdbafb5..048b96244 100644 --- a/components/progress/index.jsx +++ b/components/progress/index.jsx @@ -81,7 +81,6 @@ var Circle = React.createClass({ 'width': props.width, 'height': props.width, 'fontSize': props.width * 0.16 + 6 - }; var progressInfo; if (props.status === 'exception') { From df16cc2118f9d5b3b61a905ae0253f807f659c9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Thu, 30 Jul 2015 15:07:38 +0800 Subject: [PATCH 12/34] progress bar active --- components/progress/demo/line-mini.md | 1 + components/progress/demo/line.md | 1 + style/components/progress.less | 47 +++++++++++++++++++++++---- 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 0a4851425..639cec731 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -15,6 +15,7 @@ var style = { React.render(
+
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 90895477a..97b49cca2 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -12,6 +12,7 @@ var Progress = antd.Progress.Line; React.render(
+
diff --git a/style/components/progress.less b/style/components/progress.less index 422e3081c..5ca00947a 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -25,7 +25,7 @@ } &-line-bg { border-radius: 100px; - background-color: @statusNormal; + background-color: @primary-color; } &-line-text { position: absolute; @@ -40,24 +40,38 @@ font-size: 12px; } } + &-line-wrap.status-active { + .@{prefixProgressClass}-line-bg:before { + content: ""; + opacity: 0; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #fff; + border-radius: 10px; + -webkit-animation: progress-active 2s ease infinite; + animation: progress-active 2s ease infinite; + } + } &-line-wrap.status-exception { .@{prefixProgressClass}-line-bg { - background-color: @statusException; + background-color: @error-color; } .@{prefixProgressClass}-line-text { - color: @statusException; + color: @error-color; } } &-line-wrap.status-success { .@{prefixProgressClass}-line-bg { - background-color: @statusSuccess; + background-color: @success-color; } .@{prefixProgressClass}-line-text { - color: @statusSuccess; + color: @success-color; } } - &-circle-inner { position: relative; line-height: 1; @@ -87,3 +101,24 @@ } } } + +@-webkit-keyframes progress-active { + 0% { + opacity: .3; + width: 0; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes progress-active { + 0% { + opacity: .3; + width: 0; + } + 100% { + opacity: 0; + width: 100%; + } +} From 5f1fad2a1892c6002ecbd2f7aa9dc7f24f95a762 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= Date: Thu, 30 Jul 2015 15:14:00 +0800 Subject: [PATCH 13/34] progress bar active --- components/progress/index.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/components/progress/index.md b/components/progress/index.md index a8d96b280..c6e5a2239 100644 --- a/components/progress/index.md +++ b/components/progress/index.md @@ -16,23 +16,23 @@ * 当需要显示一个操作完成的百分比时。 -## Progress Bar API - -| 参数 | 说明 | 类型 | 默认值 | -|----------|---------------|----------|-------------| -| percent | 百分比 | number | 0 | -| status | 状态，有两个值normal、exception | string | normal | -| strokeWidth | 进度条线宽度，单位是进度条画布宽度的百分比 | number | 1 | -| width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null | - - ## Progress Circle API | 参数 | 说明 | 类型 | 默认值 | |----------|---------------|----------|-------------| | percent | 百分比 | number | 0 | | status | 状态，有两个值normal、exception | string | normal | -| strokeWidth | 进度条线宽度，单位是px | number | 1 | +| strokeWidth | 进度条线的宽度，单位是进度条画布宽度的百分比 | number | 1 | +| width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null | + + +## Progress Bar API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|---------------|----------|-------------| +| percent | 百分比 | number | 0 | +| status | 状态，有两个值normal、exception、active三种状态 | string | normal | +| strokeWidth | 进度条线的宽度，单位是px | number | 1 | From 8f39e43f7237a74bcd699bed8945cbc923f4b285 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 30 Jul 2015 15:33:45 +0800 Subject: [PATCH 14/34] improve components search dropdown style --- scripts/demo.js | 5 ++--- site/templates/layout.html | 2 +- static/style.css | 19 ++++++++++++++++++- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index 7994f981e..302a55521 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -18,7 +18,7 @@ $(function () { return ; }); }, @@ -34,12 +34,11 @@ $(function () { }, render() { - return ; } }); diff --git a/site/templates/layout.html b/site/templates/layout.html index 60276c01a..d6082bead 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -78,7 +78,7 @@ {% block scripts %}{% endblock %} -
+ onClick={this.handleClearFilters}> 清空 ; } }); + +export default FilterMenu; diff --git a/components/table/index.jsx b/components/table/index.jsx index 357d4b56f..9ff5e5f37 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -6,22 +6,33 @@ import Checkbox from '../checkbox'; import FilterMenu from './filterMenu'; import Pagination from '../pagination'; import objectAssign from 'object-assign'; +import equals from 'is-equal-shallow'; + +function noop() { +} + +function defaultResolve(data) { + return data || []; +} export default React.createClass({ getInitialState() { - this.initDataSource(this.props.dataSource); - - let noPagination = (this.props.pagination === false); - let pagination = this.initPagination(this.props.pagination); - return { + // 减少状态 selectedRowKeys: [], - loading: false, - pagination: pagination, - noPagination: noPagination, - data: [] + // only for remote + data: [], + filters: {}, + loading: !this.isLocalDataSource(), + sortColumn: '', + sortOrder: '', + sorter: null, + pagination: this.hasPagination() ? objectAssign({ + pageSize: 10 + }, this.props.pagination) : {} }; }, + getDefaultProps() { return { prefixCls: 'ant-table', @@ -30,43 +41,42 @@ export default React.createClass({ size: 'normal' }; }, - componentWillReceiveProps(nextProps) { - if ('pagination' in nextProps) { - let noPagination = (nextProps.pagination === false); + + componentWillReceiveProps(nextProps){ + if (('pagination' in nextProps) && nextProps.pagination !== false) { this.setState({ - pagination: this.initPagination(nextProps.pagination), - noPagination: noPagination + pagination: objectAssign({}, this.state.pagination, nextProps.pagination) }); } - if ('dataSource' in nextProps) { - this.initDataSource(nextProps.dataSource); + if (!this.isLocalDataSource()) { + if (!equals(nextProps, this.props)) { + this.setState({ + selectedRowKeys: [], + loading: true + }, this.fetch); + } + } + if (nextProps.columns !== this.props.columns) { this.setState({ - data: nextProps.dataSource + filters: {} }); } }, - initDataSource(dataSource) { - // 支持两种模式 - if (Array.isArray(dataSource)) { - this.mode = 'local'; - // 保留原来的数据 - this.originDataSource = dataSource.slice(0); - } else { - this.mode = 'remote'; - this.dataSource = objectAssign({ - resolve: function(data) { - return data || []; - }, - getParams: function() {}, - getPagination: function() {} - }, dataSource); + hasPagination(pagination){ + if (pagination === undefined) { + pagination = this.props.pagination; } + return pagination !== false; }, - initPagination(pagination) { + isLocalDataSource(){ + return Array.isArray(this.props.dataSource); + }, + getRemoteDataSource(){ return objectAssign({ - pageSize: 10, - total: this.props.dataSource.length - }, pagination); + resolve: defaultResolve, + getParams: noop, + getPagination: noop + }, this.props.dataSource); }, toggleSortOrder(order, column) { let sortColumn = this.state.sortColumn; @@ -89,8 +99,8 @@ export default React.createClass({ sortColumn.className = 'ant-table-column-sort'; } } - if (this.mode === 'local') { - sorter = function() { + if (this.isLocalDataSource()) { + sorter = function () { let result = column.sorter.apply(this, arguments); if (sortOrder === 'ascend') { return result; @@ -99,87 +109,94 @@ export default React.createClass({ } }; } - this.setState({ + this.fetch({ sortOrder: sortOrder, sortColumn: sortColumn, sorter: sorter - }, this.fetch); + }); }, - handleFilter(column) { - let columnIndex = this.props.columns.indexOf(column); - let filterFns = []; - if (this.mode === 'local') { - filterFns[columnIndex] = function(record) { - if (column.selectedFilters.length === 0) { - return true; - } - return column.selectedFilters.some(function(value) { - return column.onFilter.call(this, value, record); - }); - }; - } - this.setState({ - filterFns: filterFns - }, this.fetch); + handleFilter(column, filters) { + filters = objectAssign({}, this.state.filters, { + [this.getColumnKey(column)]: filters + }); + this.fetch({ + selectedRowKeys: [], + filters: filters + }); }, - handleSelect(rowIndex, e) { + handleSelect(record, rowIndex, e) { let checked = e.target.checked; + let selectedRowKeys = this.state.selectedRowKeys.concat(); + let key = this.getRecordKey(record, rowIndex); if (checked) { - this.state.selectedRowKeys.push(rowIndex); + selectedRowKeys.push(this.getRecordKey(record, rowIndex)); } else { - this.state.selectedRowKeys = this.state.selectedRowKeys.filter(function(i) { - return rowIndex !== i; + selectedRowKeys = selectedRowKeys.filter((i) => { + return key !== i; }); } this.setState({ - selectedRowKeys: this.state.selectedRowKeys + selectedRowKeys: selectedRowKeys }); if (this.props.rowSelection.onSelect) { - let currentRow = this.state.data[rowIndex - 1]; - let selectedRows = this.state.data.filter((row, i) => { - return this.state.selectedRowKeys.indexOf(i + 1) >= 0; + let data = this.getCurrentPageData(); + let selectedRows = data.filter((row, i) => { + return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; }); - this.props.rowSelection.onSelect(currentRow, checked, selectedRows); + this.props.rowSelection.onSelect(record, checked, selectedRows); } }, handleSelectAllRow(e) { let checked = e.target.checked; - let selectedRowKeys = checked ? this.state.data.map(function(item, i) { - return i + 1; - }) : []; + let data = this.getCurrentPageData(); + let selectedRowKeys = checked ? data.map((item, i) => { + return this.getRecordKey(item, i); + }) : []; this.setState({ selectedRowKeys: selectedRowKeys }); if (this.props.rowSelection.onSelectAll) { - let selectedRows = this.state.data.filter((row, i) => { - return selectedRowKeys.indexOf(i + 1) >= 0; + let selectedRows = data.filter((row, i) => { + return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; }); this.props.rowSelection.onSelectAll(checked, selectedRows); } }, handlePageChange(current) { - let pagination = this.state.pagination || {}; + let pagination = objectAssign({}, this.state.pagination); if (current) { pagination.current = current; } else { pagination.current = pagination.current || 1; } - this.setState({ + this.fetch({ + // 防止内存泄漏，只维持当页 + selectedRowKeys: [], pagination: pagination - }, this.fetch); + }); }, renderSelectionCheckBox(value, record, index) { - let rowIndex = index + 1; // 从 1 开始 + let rowIndex = this.getRecordKey(record, index); // 从 1 开始 let checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0; - return ; + return ; + }, + getRecordKey(record, index){ + return record.key || index; }, renderRowSelection() { - var columns = this.props.columns; + let columns = this.props.columns.concat(); if (this.props.rowSelection) { - let checked = this.state.data.every(function(item, i) { - return this.state.selectedRowKeys.indexOf(i + 1) >= 0; - }, this); - let checkboxAll = ; + let data = this.getCurrentPageData(); + let checked; + if (!data.length) { + checked = false; + } else { + checked = data.every((item, i) => { + let key = this.getRecordKey(item, i); + return this.state.selectedRowKeys.indexOf(key) >= 0; + }); + } + let checkboxAll = ; let selectionColumn = { key: 'selection-column', title: checkboxAll, @@ -188,7 +205,7 @@ export default React.createClass({ className: 'ant-table-selection-column' }; if (columns[0] && - columns[0].key === 'selection-column') { + columns[0].key === 'selection-column') { columns[0] = selectionColumn; } else { columns.unshift(selectionColumn); @@ -196,22 +213,32 @@ export default React.createClass({ } return columns; }, - renderColumnsDropdown() { - return this.props.columns.map((column) => { - if (!column.originTitle) { - column.originTitle = column.title; - } + + getCurrentPageData(){ + return this.isLocalDataSource() ? this.getLocalDataPaging() : this.state.data; + }, + + getColumnKey(column){ + return column.key || column.dataIndex; + }, + + renderColumnsDropdown(columns) { + return columns.map((column) => { + column = objectAssign({}, column); + let key = this.getColumnKey(column); let filterDropdown, menus, sortButton; if (column.filters && column.filters.length > 0) { - column.selectedFilters = column.selectedFilters || []; - menus = ; + let colFilters = this.state.filters[key] || []; + menus = ; let dropdownSelectedClass = ''; - if (column.selectedFilters && column.selectedFilters.length > 0) { + if (colFilters.length > 0) { dropdownSelectedClass = 'ant-table-filter-selected'; } filterDropdown = + closeOnSelect={false} + overlay={menus}> ; } @@ -220,20 +247,21 @@ export default React.createClass({ sortButton =
+ title="升序排序" + onClick={this.toggleSortOrder.bind(this, 'ascend', column)}> + title="降序排序" + onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
; } + let originalTitle = column.title; column.title = [ - column.originTitle, + originalTitle, sortButton, filterDropdown ]; @@ -242,129 +270,165 @@ export default React.createClass({ }, renderPagination() { // 强制不需要分页 - if (this.state.noPagination) { - return ''; + if (!this.hasPagination()) { + return null; } let classString = 'ant-table-pagination'; if (this.props.size === 'small') { classString += ' mini'; } + let total; + if (this.isLocalDataSource()) { + total = this.getLocalData().length; + } return ; }, - prepareParamsArguments() { + prepareParamsArguments(state) { // 准备筛选、排序、分页的参数 let pagination; let filters = {}; let sorter = {}; - pagination = this.state.pagination; - this.props.columns.forEach(function(column) { - if (column.dataIndex && column.selectedFilters && - column.selectedFilters.length > 0) { - filters[column.dataIndex] = column.selectedFilters; + pagination = state.pagination; + this.props.columns.forEach((column) => { + let colFilters = state.filters[this.getColumnKey(column)] || []; + if (colFilters.length > 0) { + filters[this.getColumnKey(column)] = colFilters; } }); - if (this.state.sortColumn && this.state.sortOrder && - this.state.sortColumn.dataIndex) { - sorter.field = this.state.sortColumn.dataIndex; - sorter.order = this.state.sortOrder; + if (state.sortColumn && + state.sortOrder && + state.sortColumn.dataIndex) { + sorter.field = state.sortColumn.dataIndex; + sorter.order = state.sortOrder; } return [pagination, filters, sorter]; }, - fetch() { - if (this.mode === 'remote') { + + fetch(newState) { + if (this.isLocalDataSource()) { + if (newState) { + this.setState(newState); + } + } else { + let state = objectAssign({}, this.state, newState); + if (newState || !this.state.loading) { + this.setState(objectAssign({ + loading: true + }, newState)); + } // remote 模式使用 this.dataSource - let dataSource = this.dataSource; - this.setState({ - loading: true - }); + let dataSource = this.getRemoteDataSource(); jQuery.ajax({ url: dataSource.url, - data: dataSource.getParams.apply(this, this.prepareParamsArguments()) || {}, + data: dataSource.getParams.apply(this, this.prepareParamsArguments(state)) || {}, headers: dataSource.headers, dataType: 'json', success: (result) => { if (this.isMounted()) { let pagination = objectAssign( - this.state.pagination, + state.pagination, dataSource.getPagination.call(this, result) ); this.setState({ + loading: false, data: dataSource.resolve.call(this, result), - pagination: pagination, - loading: false + pagination: pagination }); } }, error: () => { this.setState({ - loading: false + loading: false, + data: [] }); } }); - } else { - let data = this.props.dataSource; - let current, pageSize; - // 如果没有分页的话，默认全部展示 - if (this.state.noPagination) { - pageSize = Number.MAX_VALUE; - current = 1; - } else { - pageSize = this.state.pagination.pageSize; - current = this.state.pagination.current; - } - // 排序 - if (this.state.sortOrder && this.state.sorter) { - data = data.sort(this.state.sorter); - } else { - data = this.originDataSource.slice(); - } - // 筛选 - if (this.state.filterFns) { - this.state.filterFns.forEach(function(filterFn) { - if (typeof filterFn === 'function') { - data = data.filter(filterFn); - } - }); - } - // 分页 - // --- - // 当数据量少于每页数量时，直接设置数据 - // 否则进行读取分页数据 - if (data.length > pageSize || pageSize === Number.MAX_VALUE) { - data = data.filter(function(item, i) { - if (i >= (current - 1) * pageSize && - i < current * pageSize) { - return item; - } - }); - } - // 完成数据 - this.setState({ - data: data - }); } }, - componentDidMount() { - this.handlePageChange(); - }, - render() { - this.props.columns = this.renderRowSelection(); - var classString = ''; - if (this.state.loading) { + findColumn(myKey){ + return this.props.columns.filter((c) => { + return this.getColumnKey(c) === myKey; + })[0]; + }, + + getLocalDataPaging(){ + let data = this.getLocalData(); + let current, pageSize; + let state = this.state; + // 如果没有分页的话，默认全部展示 + if (!this.hasPagination()) { + pageSize = Number.MAX_VALUE; + current = 1; + } else { + pageSize = state.pagination.pageSize; + current = state.pagination.current; + } + // 分页 + // --- + // 当数据量少于每页数量时，直接设置数据 + // 否则进行读取分页数据 + if (data.length > pageSize || pageSize === Number.MAX_VALUE) { + data = data.filter((item, i) => { + if (i >= (current - 1) * pageSize && + i < current * pageSize) { + return item; + } + }); + } + return data; + }, + + getLocalData(){ + let state = this.state; + let data = this.props.dataSource; + // 排序 + if (state.sortOrder && state.sorter) { + data = data.sort(state.sorter); + } + // 筛选 + if (state.filters) { + Object.keys(state.filters).forEach((columnKey) => { + let col = this.findColumn(columnKey); + let values = state.filters[columnKey] || []; + data = data.filter((record) => { + return values.some((v)=> { + return col.onFilter(v, record); + }); + }); + }); + } + return data; + }, + + componentDidMount() { + if (!this.isLocalDataSource()) { + this.fetch(); + } + }, + + render() { + let data = this.getCurrentPageData(); + let columns = this.renderRowSelection(); + let classString = ''; + if (this.state.loading && this.isLocalDataSource()) { classString += ' ant-table-loading'; } if (this.props.size === 'small') { classString += ' ant-table-small'; } - + columns = this.renderColumnsDropdown(columns); return
- +
{this.renderPagination()} ; } From a0d416d4a11d35969d8e5b7d8a748c3cb650b1e7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 31 Jul 2015 11:28:49 +0800 Subject: [PATCH 29/34] code style --- components/table/index.jsx | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 9ff5e5f37..8fcb90fca 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -42,7 +42,7 @@ export default React.createClass({ }; }, - componentWillReceiveProps(nextProps){ + componentWillReceiveProps(nextProps) { if (('pagination' in nextProps) && nextProps.pagination !== false) { this.setState({ pagination: objectAssign({}, this.state.pagination, nextProps.pagination) @@ -62,22 +62,26 @@ export default React.createClass({ }); } }, - hasPagination(pagination){ + + hasPagination(pagination) { if (pagination === undefined) { pagination = this.props.pagination; } return pagination !== false; }, - isLocalDataSource(){ + + isLocalDataSource() { return Array.isArray(this.props.dataSource); }, - getRemoteDataSource(){ + + getRemoteDataSource() { return objectAssign({ resolve: defaultResolve, getParams: noop, getPagination: noop }, this.props.dataSource); }, + toggleSortOrder(order, column) { let sortColumn = this.state.sortColumn; let sortOrder = this.state.sortOrder; @@ -115,6 +119,7 @@ export default React.createClass({ sorter: sorter }); }, + handleFilter(column, filters) { filters = objectAssign({}, this.state.filters, { [this.getColumnKey(column)]: filters @@ -124,6 +129,7 @@ export default React.createClass({ filters: filters }); }, + handleSelect(record, rowIndex, e) { let checked = e.target.checked; let selectedRowKeys = this.state.selectedRowKeys.concat(); @@ -146,6 +152,7 @@ export default React.createClass({ this.props.rowSelection.onSelect(record, checked, selectedRows); } }, + handleSelectAllRow(e) { let checked = e.target.checked; let data = this.getCurrentPageData(); @@ -162,6 +169,7 @@ export default React.createClass({ this.props.rowSelection.onSelectAll(checked, selectedRows); } }, + handlePageChange(current) { let pagination = objectAssign({}, this.state.pagination); if (current) { @@ -175,14 +183,17 @@ export default React.createClass({ pagination: pagination }); }, + renderSelectionCheckBox(value, record, index) { let rowIndex = this.getRecordKey(record, index); // 从 1 开始 let checked = this.state.selectedRowKeys.indexOf(rowIndex) >= 0; return ; }, - getRecordKey(record, index){ + + getRecordKey(record, index) { return record.key || index; }, + renderRowSelection() { let columns = this.props.columns.concat(); if (this.props.rowSelection) { @@ -214,11 +225,11 @@ export default React.createClass({ return columns; }, - getCurrentPageData(){ + getCurrentPageData() { return this.isLocalDataSource() ? this.getLocalDataPaging() : this.state.data; }, - getColumnKey(column){ + getColumnKey(column) { return column.key || column.dataIndex; }, @@ -268,6 +279,7 @@ export default React.createClass({ return column; }); }, + renderPagination() { // 强制不需要分页 if (!this.hasPagination()) { @@ -287,6 +299,7 @@ export default React.createClass({ pageSize={10} {...this.state.pagination} />; }, + prepareParamsArguments(state) { // 准备筛选、排序、分页的参数 let pagination; @@ -350,13 +363,13 @@ export default React.createClass({ } }, - findColumn(myKey){ + findColumn(myKey) { return this.props.columns.filter((c) => { return this.getColumnKey(c) === myKey; })[0]; }, - getLocalDataPaging(){ + getLocalDataPaging() { let data = this.getLocalData(); let current, pageSize; let state = this.state; @@ -383,7 +396,7 @@ export default React.createClass({ return data; }, - getLocalData(){ + getLocalData() { let state = this.state; let data = this.props.dataSource; // 排序 From 988bdf09bc727e36f5d201e1b78dd5cd72ac4735 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 31 Jul 2015 11:54:46 +0800 Subject: [PATCH 30/34] =?UTF-8?q?=E7=A9=BA=E7=9A=84=E7=AD=9B=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E5=BA=94=E8=AF=A5=E8=BF=94=E5=9B=9E=E5=85=A8=E9=87=8F?= =?UTF-8?q?=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/index.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/table/index.jsx b/components/table/index.jsx index 8fcb90fca..fbdd7b98a 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -408,6 +408,9 @@ export default React.createClass({ Object.keys(state.filters).forEach((columnKey) => { let col = this.findColumn(columnKey); let values = state.filters[columnKey] || []; + if (values.length === 0) { + return; + } data = data.filter((record) => { return values.some((v)=> { return col.onFilter(v, record); From 7d0413fbb63f4025b30323fa4309139374866f56 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 31 Jul 2015 12:41:29 +0800 Subject: [PATCH 31/34] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=8E=92=E5=BA=8F=E5=A4=B4=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E5=A4=B1=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/index.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index fbdd7b98a..e271d88d3 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -235,7 +235,6 @@ export default React.createClass({ renderColumnsDropdown(columns) { return columns.map((column) => { - column = objectAssign({}, column); let key = this.getColumnKey(column); let filterDropdown, menus, sortButton; if (column.filters && column.filters.length > 0) { @@ -270,9 +269,11 @@ export default React.createClass({ ; } - let originalTitle = column.title; + if (!column.originalTitle) { + column.originalTitle = column.title; + } column.title = [ - originalTitle, + column.originalTitle, sortButton, filterDropdown ]; From e80a0d843bf7ca38b01b4bc340e1b9163c7ae67a Mon Sep 17 00:00:00 2001 From: jljsj Date: Fri, 31 Jul 2015 13:56:33 +0800 Subject: [PATCH 32/34] updata spec motion --- spec/easing.md | 59 +- spec/motion.md | 16 +- spec/page-transition.md | 26 +- static/motion.js | 1390 +++++++++++++++++++++------------------ 4 files changed, 792 insertions(+), 699 deletions(-) diff --git a/spec/easing.md b/spec/easing.md index 156de9864..7af691127 100644 --- a/spec/easing.md +++ b/spec/easing.md @@ -1,7 +1,7 @@ -# 缓动函数 +# 自然运动 - category: 动画 -- order: 1 +- order: 0 --- @@ -20,9 +20,11 @@ 动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。 +> 以下图形，红色线与圆环为不推荐示例，蓝色为推荐示例。 + #### 自然缓动 -不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数。 +不要用直线缓动Linear做物体位移或出入动画的缓动；注：Linear函数可做循环动画函数。 如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。 @@ -32,17 +34,17 @@ -上图所示缓动函数：红 `Linear`，蓝 `easeInOutQuad`。 +上图所示缓动函数：红 `Linear`，蓝 `ease-in-out`。 #### 出入动画 -不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调，反相只出不进也一样。 +不要做单向动画，进场后不做出场，直接消失元素或回到原点，会造成整体效果不协调和用户视觉上的闪现或其它不好的效果。 所以有动画的进场必须要有动画的出场，包括导航上的动画。 @@ -51,13 +53,13 @@ new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455 -上图所示缓动函数：红 `easeInOutQuad`，蓝 `easeInOutCubic`。 +上图所示缓动函数：红 `ease-in-out`，蓝 `ease-in-out-cubic`。 ##### 场外出入 @@ -72,14 +74,14 @@ mask:false,exposure:"top"}); -上图所示缓动函数：红 `easeOutQuad` `easeOutQuad`，蓝 `easeOutCubic` `easeInCubic`。 +上图所示缓动函数：红 `ease-out` `ease-out`，蓝 `ease-out-cubic` `ease-in-cubic`。 示例组件：[Message 全局提示](/components/message/)，[Dropdown 下拉菜单](/components/dropdown/)。 @@ -91,35 +93,36 @@ mask:true，exposure:"bottom"}); 2. 如球类物体掉地上的后，反弹几次后停止。 - - 曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换。 - 弹性动画最好结合alpha。 +> 慎用Bounce或Elastic，这两种适用在特殊元素下，一般back即可满足页面上元素的弹动; +
-上图所示缓动函数：红 `easeOutBounce` `easeInOutQuad`，蓝 `easeOutBack` `easeInBack`。 +上图所示缓动函数：绿 `easeOutBounce` `easeOutElastic`(css需自配)， 蓝 `ease-out-back` `ease-in-back`。 ## 缓动函数 -Ant Design 提供了一套缓动函数规范动画行为。 +Ant Design 提供了一套缓动函数规范动画行为供组件使用。 -|名称 |参数 |说明与适用 | +|名称 |参数 |说明 | |-------------------|------------------------------------------|---------------------------| -|@ease-out | `cubic-bezier(0.215,0.61,0.355,1);` |默认后缓动；适合元素展开时； | -|@ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动；适合元素关闭时； | -|@ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` |默认前后缓动；适合元素移动； | -|@ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` |结束回动；适合弹出框出现时； | -|@ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` |开始回动；适合弹出框关闭； | +|@ease-out | `cubic-bezier(0.215,0.61,0.355,1);` |默认后缓动； | +|@ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动； | +|@ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` |默认前后缓动； | +|@ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` |结束回动； | +|@ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` |开始回动； | |@ease-in-out-back | `cubic-bezier(0.68,-0.55,0.27,1.55);` |前后回动； | -|@ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` |圆形后缓动；适合元素展开时； | -|@ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` |圆形前缓动；适合元素关闭时； | -|@ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` |圆形缓动；适合元素移动； | +|@ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` |圆形后缓动； | +|@ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` |圆形前缓动； | +|@ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` |圆形前后缓动； | diff --git a/spec/motion.md b/spec/motion.md index 1cbe4e33e..0853d71c9 100644 --- a/spec/motion.md +++ b/spec/motion.md @@ -1,7 +1,7 @@ # 组件动画 - category: 动画 -- order: 0 +- order: 2 --- @@ -206,7 +206,7 @@ var Test = React.createClass({ })); return
-
栗子
+
@@ -220,22 +220,22 @@ React.render(, document.getElementById('components-motion-demo-basic'));