From 7e2633a5dc99a2ba9944c5f3ad18596559f20437 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Nov 2015 15:41:36 +0800 Subject: [PATCH 0001/1555] update .si.yml --- .si.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.si.yml b/.si.yml index 3bdcfcf211..a80cc23236 100644 --- a/.si.yml +++ b/.si.yml @@ -3,4 +3,6 @@ before_deploy: - tnpm run just-deploy options: branch: 'master' - dist: '_site' \ No newline at end of file + dist: '_site' +thumb: 'https://t.alipayobjects.com/images/rmsweb/T1gqXjXdRfXXXXXXXX.png' +cname: 'antd.alipay.net' From fcdea2931be88f1553bb8d7292e23c185d270297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 1 Feb 2016 17:35:04 +0800 Subject: [PATCH 0002/1555] Add si.yml --- .si.yml | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .si.yml diff --git a/.si.yml b/.si.yml new file mode 100644 index 0000000000..aae55e7578 --- /dev/null +++ b/.si.yml @@ -0,0 +1,7 @@ +before_deploy: + tnpm install && tnpm update + tnpm run site +options: + dist: '.' +cname: 'antd.alipay.net' +thumb: 'https://t.alipayobjects.com/images/rmsweb/T1gqXjXdRfXXXXXXXX.png' \ No newline at end of file From 1c46bbe1a61186b881f7dee5af7f9af7c090eba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 17 Feb 2016 11:25:23 +0800 Subject: [PATCH 0003/1555] update si.yml --- .si.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.si.yml b/.si.yml index aae55e7578..3588dc42e9 100644 --- a/.si.yml +++ b/.si.yml @@ -1,7 +1,7 @@ before_deploy: - tnpm install && tnpm update - tnpm run site + - tnpm install && tnpm update + - tnpm run site options: dist: '.' cname: 'antd.alipay.net' -thumb: 'https://t.alipayobjects.com/images/rmsweb/T1gqXjXdRfXXXXXXXX.png' \ No newline at end of file +thumb: 'https://t.alipayobjects.com/images/rmsweb/T1gqXjXdRfXXXXXXXX.png' From 87d1843bffce156f5f557cdd1b73f59e3fd0d6f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 17 Feb 2016 20:09:45 +0800 Subject: [PATCH 0004/1555] update si.yml --- .si.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.si.yml b/.si.yml index 3588dc42e9..9b16a0eb33 100644 --- a/.si.yml +++ b/.si.yml @@ -2,6 +2,6 @@ before_deploy: - tnpm install && tnpm update - tnpm run site options: - dist: '.' + dist: '_site' cname: 'antd.alipay.net' thumb: 'https://t.alipayobjects.com/images/rmsweb/T1gqXjXdRfXXXXXXXX.png' From 27e879f444a08661e875584524ce0be4bef0a5b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 18 Feb 2016 11:31:49 +0800 Subject: [PATCH 0005/1555] support linkRender in breadcrumb, fix #1026 --- components/breadcrumb/index.jsx | 5 +++-- components/breadcrumb/index.md | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.jsx index f9e0f8bd23..34982815f4 100644 --- a/components/breadcrumb/index.jsx +++ b/components/breadcrumb/index.jsx @@ -35,6 +35,7 @@ const Breadcrumb = React.createClass({ return { prefixCls: 'ant-breadcrumb', separator: '/', + linkRender: (href, name) => {name}, }; }, propTypes: { @@ -48,7 +49,7 @@ const Breadcrumb = React.createClass({ }, render() { let crumbs; - const { separator, prefixCls, routes, params, children } = this.props; + const { separator, prefixCls, routes, params, children, linkRender } = this.props; if (routes && routes.length > 0) { const paths = []; crumbs = routes.map((route, i) => { @@ -71,7 +72,7 @@ const Breadcrumb = React.createClass({ if (i === routes.length - 1) { link = {name}; } else { - link = {name}; + link = linkRender(`/${paths.join('/')}`, name); } return {link}; }); diff --git a/components/breadcrumb/index.md b/components/breadcrumb/index.md index 34685f895b..116cc4351b 100644 --- a/components/breadcrumb/index.md +++ b/components/breadcrumb/index.md @@ -11,7 +11,7 @@ ## 何时使用 - 当系统拥有超过两级以上的层级结构时； -- 当需要告知用户“你在哪里”时； +- 当需要告知用户『你在哪里』时； - 当需要向上导航的功能时。 ## API @@ -32,6 +32,7 @@ | routes | router 的路由栈信息 | Array | | - | | params | 路由的参数 | Object | | - | | separator | 分隔符自定义 | String or Element | | '/' | +| linkRender | 自定义链接函数，和 react-router 配置使用 | Function(href, name) | | - | ### Breadcrumb.Item From 3068ec357b20a759c92318e99bcb26118c1ff8a0 Mon Sep 17 00:00:00 2001 From: swindme Date: Fri, 19 Feb 2016 20:20:45 +0800 Subject: [PATCH 0006/1555] feat: Spin add tip --- components/spin/demo/tip.md | 15 +++++++++++++++ components/spin/index.jsx | 13 ++++++++----- components/spin/index.md | 1 + style/components/spin.less | 6 ++++++ 4 files changed, 30 insertions(+), 5 deletions(-) create mode 100644 components/spin/demo/tip.md diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md new file mode 100644 index 0000000000..333af2e9f8 --- /dev/null +++ b/components/spin/demo/tip.md @@ -0,0 +1,15 @@ +# 自定义描述文案 + +- order: 4 + +自定义描述文案。 + +--- + +````jsx +import { Spin } from 'antd'; + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/spin/index.jsx b/components/spin/index.jsx index 355721c3f3..c2c8266513 100644 --- a/components/spin/index.jsx +++ b/components/spin/index.jsx @@ -20,7 +20,7 @@ const AntSpin = React.createClass({ }, render() { - const { className, size, prefixCls } = this.props; + const { className, size, prefixCls, tip } = this.props; let spinClassName = classNames({ [prefixCls]: true, @@ -33,13 +33,16 @@ const AntSpin = React.createClass({ let spinElement; if (!isCssAnimationSupported) { // not support for animation, just use text instead - spinElement =
加载中...
; + spinElement =
{tip || '加载中...'}
; } else { spinElement = (
- - - +
{tip}
+
+ + + +
); } diff --git a/components/spin/index.md b/components/spin/index.md index b605b259f3..c420475357 100644 --- a/components/spin/index.md +++ b/components/spin/index.md @@ -19,3 +19,4 @@ |------------|----------------|-------------|--------------| | size | enum | default | spin组件中点的大小，可选值为 small default large | | spining | boolean | true | 用于内嵌其他组件的模式，可以关闭 loading 效果 | +| tip | string | 无 | 自定义描述文案 | diff --git a/style/components/spin.less b/style/components/spin.less index 1fe2acb381..7f00eb0721 100644 --- a/style/components/spin.less +++ b/style/components/spin.less @@ -51,6 +51,12 @@ pointer-events: none; } + // tip + // ------------------------------ + &-tip { + color: @spin-dot-default; + } + // dots // ------------------------------ From f7ba2969f665f940fc4494e8693d8d4303ca8dd2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 21 Feb 2016 14:48:14 +0800 Subject: [PATCH 0007/1555] Make tip replace dot --- components/spin/demo/tip.md | 10 +++++++--- components/spin/index.jsx | 7 +++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md index 333af2e9f8..a9978d554d 100644 --- a/components/spin/demo/tip.md +++ b/components/spin/demo/tip.md @@ -2,14 +2,18 @@ - order: 4 -自定义描述文案。 +自定义描述文案，指定的 tip 文案会直接代替 `...`。 --- ````jsx -import { Spin } from 'antd'; +import { Spin, Alert } from 'antd'; ReactDOM.render( - + + + , mountNode); ```` diff --git a/components/spin/index.jsx b/components/spin/index.jsx index c2c8266513..2af710604b 100644 --- a/components/spin/index.jsx +++ b/components/spin/index.jsx @@ -6,13 +6,13 @@ const AntSpin = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-spin', - spining: true + spining: true, }; }, propTypes: { className: React.PropTypes.string, - size: React.PropTypes.oneOf(['small', 'default', 'large']) + size: React.PropTypes.oneOf(['small', 'default', 'large']), }, isNestedPattern() { @@ -31,13 +31,12 @@ const AntSpin = React.createClass({ }); let spinElement; - if (!isCssAnimationSupported) { + if (!isCssAnimationSupported || 'tip' in this.props) { // not support for animation, just use text instead spinElement =
{tip || '加载中...'}
; } else { spinElement = (
-
{tip}
From a5e1391d8fb53fb3febe2ecb2aad982b52c70483 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 19 Feb 2016 19:35:49 +0800 Subject: [PATCH 0008/1555] Add card --- components/card/demo/basic.md | 13 +++++++++++++ components/card/index.jsx | 19 +++++++++++++++++++ components/card/index.md | 25 +++++++++++++++++++++++++ index.js | 1 + style/components/card.less | 9 +++++++++ style/components/index.less | 1 + 6 files changed, 68 insertions(+) create mode 100644 components/card/demo/basic.md create mode 100644 components/card/index.jsx create mode 100644 components/card/index.md create mode 100644 style/components/card.less diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md new file mode 100644 index 0000000000..ead98b3cf1 --- /dev/null +++ b/components/card/demo/basic.md @@ -0,0 +1,13 @@ +# 基本卡片 + +- order: 0 + +包含标题、内容、操作区域。 + +--- + +````jsx +import { Card } from 'antd'; + +ReactDOM.render(更多}>卡片的内容, mountNode); +```` diff --git a/components/card/index.jsx b/components/card/index.jsx new file mode 100644 index 0000000000..99aef5f69b --- /dev/null +++ b/components/card/index.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import classNames from 'classnames'; + +export default props => { + const { prefixCls = 'ant-card', className, children, extra, title, ...other } = props; + const classString = classNames({ + [prefixCls]: true, + [className]: !!className, + }); + return ( +
+
+

{title}

+ {extra} +
+
{children}
+
+ ); +}; diff --git a/components/card/index.md b/components/card/index.md new file mode 100644 index 0000000000..389a30583f --- /dev/null +++ b/components/card/index.md @@ -0,0 +1,25 @@ +# Card + +- category: Components +- chinese: 卡片 +- type: 展示 + +--- + +通用卡片容器。 + +## 何时使用 + +最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。 + +```html +卡片内容 +``` + +## API + +### Select props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|----------------|----------|--------------| +| title | 卡片标题 | React.Element | 无 | diff --git a/index.js b/index.js index dc1f5d23d7..8d81517e75 100644 --- a/index.js +++ b/index.js @@ -45,6 +45,7 @@ const antd = { TimePicker: require('./components/time-picker'), Transfer: require('./components/transfer'), Cascader: require('./components/cascader'), + Card: require('./components/card'), }; module.exports = antd; diff --git a/style/components/card.less b/style/components/card.less new file mode 100644 index 0000000000..1f8ecdb866 --- /dev/null +++ b/style/components/card.less @@ -0,0 +1,9 @@ +@card-prefix-cls: ~"@{css-prefix}card"; +@number-prefix-cls: ~"@{css-prefix}scroll-number"; + +.@{card-prefix-cls} { + background: #fff; + padding: 24px; + border: 1px solid @border-color-base; + border-radius: @border-radius-sm; +} diff --git a/style/components/index.less b/style/components/index.less index 14107786b5..4d65531a05 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -40,3 +40,4 @@ @import "timepicker"; @import "transfer"; @import "cascader"; +@import "card"; From 845e28d32ea831bc97661db1ed4bb9e7e346f1ac Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 20 Feb 2016 16:40:18 +0800 Subject: [PATCH 0009/1555] Add Card style and demo --- components/card/demo/basic.md | 8 +++++-- components/card/demo/grid.md | 36 ++++++++++++++++++++++++++++++ components/card/demo/no-padding.md | 35 +++++++++++++++++++++++++++++ components/card/demo/simple.md | 17 ++++++++++++++ components/card/index.jsx | 15 ++++++++----- components/card/index.md | 9 ++++---- style/components/card.less | 32 ++++++++++++++++++++++++-- 7 files changed, 138 insertions(+), 14 deletions(-) create mode 100644 components/card/demo/grid.md create mode 100644 components/card/demo/no-padding.md create mode 100644 components/card/demo/simple.md diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md index ead98b3cf1..ac83036b03 100644 --- a/components/card/demo/basic.md +++ b/components/card/demo/basic.md @@ -1,4 +1,4 @@ -# 基本卡片 +# 典型卡片 - order: 0 @@ -9,5 +9,9 @@ ````jsx import { Card } from 'antd'; -ReactDOM.render(更多}>卡片的内容, mountNode); +ReactDOM.render( + 更多} style={{ width: 300 }}> + 卡片的内容 + +, mountNode); ```` diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md new file mode 100644 index 0000000000..33de59d1b2 --- /dev/null +++ b/components/card/demo/grid.md @@ -0,0 +1,36 @@ +# 栅格卡片 + +- order: 3 + +在系统概览页面常常和栅格进行配合。 + +--- + +````jsx +import { Card, Col, Row } from 'antd'; + +ReactDOM.render( + + + 卡片的内容 + + + 卡片的内容 + + + 卡片的内容 + + +, mountNode); +```` + +````css +/* 增加 16px 栅格间距 */ +.row { + margin-left: -8px; + margin-right: -8px; +} +.row > div { + padding: 0 8px; +} +```` diff --git a/components/card/demo/no-padding.md b/components/card/demo/no-padding.md new file mode 100644 index 0000000000..7946194e6f --- /dev/null +++ b/components/card/demo/no-padding.md @@ -0,0 +1,35 @@ +# 更灵活的内容展示 + +- order: 2 + +可以调整默认边距，设定宽度。 + +--- + +````jsx +import { Card } from 'antd'; + +ReactDOM.render( + +
+ +
+
+

欧美街拍

+

www.instagram.com

+
+ +, mountNode); +```` + +````css +.custom-image img { + display: block; +} +.custom-card { + padding: 10px 16px; +} +.custom-card p { + color: #999; +} +```` diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md new file mode 100644 index 0000000000..ad0dccbb22 --- /dev/null +++ b/components/card/demo/simple.md @@ -0,0 +1,17 @@ +# 简洁卡片 + +- order: 1 + +只包含内容区域。 + +--- + +````jsx +import { Card } from 'antd'; + +ReactDOM.render( + + 卡片的内容 + +, mountNode); +```` diff --git a/components/card/index.jsx b/components/card/index.jsx index 99aef5f69b..68eb87c602 100644 --- a/components/card/index.jsx +++ b/components/card/index.jsx @@ -2,18 +2,21 @@ import React from 'react'; import classNames from 'classnames'; export default props => { - const { prefixCls = 'ant-card', className, children, extra, title, ...other } = props; + const { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, ...other } = props; const classString = classNames({ [prefixCls]: true, [className]: !!className, }); + const head = title ? ( +
+

{title}

+
+ ) : null; return (
-
-

{title}

- {extra} -
-
{children}
+ {head} + {extra ?
{extra}
: null} +
{children}
); }; diff --git a/components/card/index.md b/components/card/index.md index 389a30583f..0a83490bdf 100644 --- a/components/card/index.md +++ b/components/card/index.md @@ -3,6 +3,7 @@ - category: Components - chinese: 卡片 - type: 展示 +- cols: 1 --- @@ -12,14 +13,14 @@ 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。 +## API + ```html 卡片内容 ``` -## API - -### Select props - | 参数 | 说明 | 类型 | 默认值 | |----------|----------------|----------|--------------| | title | 卡片标题 | React.Element | 无 | +| extra | 卡片右上角的操作区域 | React.Element | 无 | +| bodyStyle | 内容区域自定义样式 | Object | 无 | diff --git a/style/components/card.less b/style/components/card.less index 1f8ecdb866..66427425e8 100644 --- a/style/components/card.less +++ b/style/components/card.less @@ -3,7 +3,35 @@ .@{card-prefix-cls} { background: #fff; - padding: 24px; - border: 1px solid @border-color-base; border-radius: @border-radius-sm; + box-shadow: @box-shadow-base; + font-size: @font-size-base; + position: relative; + overflow: hidden; + + &-head { + height: 48px; + line-height: 48px; + border-bottom: 1px solid @border-color-split; + padding: 0 24px; + + &-title { + font-size: 14px; + display: inline-block; + text-overflow: ellipsis; + width: 100%; + overflow: hidden; + white-space: nowrap; + } + } + + &-extra { + position: absolute; + right: 24px; + top: 14px; + } + + &-body { + padding: 24px; + } } From cacb5725a25dfff8296ef275027fe772149a1950 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 22 Feb 2016 16:25:13 +0800 Subject: [PATCH 0010/1555] Add loading card --- components/card/demo/loading.md | 38 +++++++++++++++++++++++++++++++++ components/card/index.jsx | 16 +++++++++++++- style/components/card.less | 11 ++++++++++ 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 components/card/demo/loading.md diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md new file mode 100644 index 0000000000..6f60a35e91 --- /dev/null +++ b/components/card/demo/loading.md @@ -0,0 +1,38 @@ +# 预加载的卡片 + +- order: 4 + +数据读入前会有文本块样式。 + +--- + +````jsx +import { Card } from 'antd'; + +const App = React.createClass({ + getInitialState() { + return { + loading: true, + content: '', + }; + }, + componentDidMount() { + // mock loading + setTimeout(() => { + this.setState({ + loading: false, + content: '卡片的内容', + }); + }, 2000); + }, + render() { + return ( + + {this.state.content} + + ); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/card/index.jsx b/components/card/index.jsx index 68eb87c602..d37f0c905a 100644 --- a/components/card/index.jsx +++ b/components/card/index.jsx @@ -2,16 +2,30 @@ import React from 'react'; import classNames from 'classnames'; export default props => { - const { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, ...other } = props; + let { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, loading, ...other } = props; const classString = classNames({ [prefixCls]: true, [className]: !!className, + [`${prefixCls}-loading`]: loading, }); + + if (loading) { + children = ( +
+

███████████████████████

+

██████　███████████████████

+

██████████　███████████

+

█████　██████　█████████████

+
+ ); + } + const head = title ? (

{title}

) : null; + return (
{head} diff --git a/style/components/card.less b/style/components/card.less index 66427425e8..1df7e94967 100644 --- a/style/components/card.less +++ b/style/components/card.less @@ -34,4 +34,15 @@ &-body { padding: 24px; } + + &-loading &-body { + letter-spacing: -2px; + color: #eee; + font-size: 0.75rem; + } + + &-loading &-body p { + word-break: break-all; + line-height: 2; + } } From feaf02b406c39434d65c0f5237c7dc7fa04bf373 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Feb 2016 18:02:33 +0800 Subject: [PATCH 0011/1555] make Checkbox usage same as Radio --- components/checkbox/Group.jsx | 10 +++---- components/checkbox/demo/basic.md | 7 +++-- components/checkbox/demo/controller.md | 37 +++++++++++++------------- components/checkbox/index.jsx | 13 ++++++++- components/form/demo/form-controls.md | 36 +++++++++---------------- style/components/checkbox.less | 18 ++++++------- 6 files changed, 59 insertions(+), 62 deletions(-) diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index e90d13e63b..e741bbbd2a 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -51,12 +51,12 @@ export default React.createClass({
{ options.map(option => - + ) }
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md index b642019a4b..c19da248c9 100644 --- a/components/checkbox/demo/basic.md +++ b/components/checkbox/demo/basic.md @@ -13,8 +13,7 @@ function onChange(e) { console.log(`checked = ${e.target.checked}`); } -ReactDOM.render(, mountNode); +ReactDOM.render( + Checkbox +, mountNode); ```` diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md index ff636c333e..e84a0cc4ab 100644 --- a/components/checkbox/demo/controller.md +++ b/components/checkbox/demo/controller.md @@ -21,25 +21,24 @@ const App = React.createClass({ return (

- -

-

- - -

-
+ + {label} + +

+

+ + +

+
); }, toggleChecked() { diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index b04ab10b61..dca2cefda4 100644 --- a/components/checkbox/index.jsx +++ b/components/checkbox/index.jsx @@ -1,6 +1,7 @@ import RcCheckbox from 'rc-checkbox'; import React from 'react'; import Group from './Group'; +import classNames from 'classnames'; const Checkbox = React.createClass({ getDefaultProps() { @@ -9,7 +10,17 @@ const Checkbox = React.createClass({ }; }, render() { - return ; + const { prefixCls, style, children, className, ...restProps } = this.props; + const classString = classNames({ + [className]: !!className, + [`${prefixCls}-wrapper`]: true, + }); + return ( + + ); } }); diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md index d616e0ede6..74544df378 100644 --- a/components/form/demo/form-controls.md +++ b/components/form/demo/form-controls.md @@ -53,42 +53,30 @@ ReactDOM.render( label="Checkbox 多选框：" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} > - - - + 选项一 + 选项二 + 选项三（不可选） - - - + 选项一 + 选项二 + 选项三 - - A - B - C - D - + + A + B + C + D + , mountNode); diff --git a/style/components/checkbox.less b/style/components/checkbox.less index f0da1aefd2..842efe0d35 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -2,11 +2,10 @@ .antCheckboxFn(@checkbox-prefix-cls: ant-checkbox) { -@checkbox-wrap-prefix-cls: @checkbox-prefix-cls; -@checkbox-inner-prefix-cls: ~"@{checkbox-wrap-prefix-cls}-inner"; +@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner"; // 一般状态 -.@{checkbox-wrap-prefix-cls} { +.@{checkbox-prefix-cls} { white-space: nowrap; cursor: pointer; outline: none; @@ -66,7 +65,7 @@ } // 半选状态 -.@{checkbox-wrap-prefix-cls}-indeterminate { +.@{checkbox-prefix-cls}-indeterminate { .@{checkbox-inner-prefix-cls} { border-color: @primary-color; background-color: @primary-color; @@ -87,7 +86,7 @@ } } // 选中状态 -.@{checkbox-wrap-prefix-cls}-checked { +.@{checkbox-prefix-cls}-checked { &:hover { .@{checkbox-inner-prefix-cls} { @@ -116,9 +115,9 @@ } } -.@{checkbox-wrap-prefix-cls}-disabled { +.@{checkbox-prefix-cls}-disabled { - &.@{checkbox-wrap-prefix-cls}-checked { + &.@{checkbox-prefix-cls}-checked { &:hover { .@{checkbox-inner-prefix-cls} { @@ -157,11 +156,12 @@ } } -.@{checkbox-wrap-prefix-cls} + span { +.@{checkbox-prefix-cls}-wrapper + span, +.@{checkbox-prefix-cls} + span { margin-left: 8px; } -.@{checkbox-wrap-prefix-cls}-group { +.@{checkbox-prefix-cls}-group { font-size: @font-size-base; &-item { display: inline-block; From d1acaac78ce08ab2416a41364c5ee393fab27484 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 24 Feb 2016 20:30:54 +0800 Subject: [PATCH 0012/1555] fix Checkbox cursor, #1076 --- style/components/checkbox.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/components/checkbox.less b/style/components/checkbox.less index 842efe0d35..7038ee7b14 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -156,6 +156,10 @@ } } +.@{checkbox-prefix-cls}-wrapper { + cursor: pointer; +} + .@{checkbox-prefix-cls}-wrapper + span, .@{checkbox-prefix-cls} + span { margin-left: 8px; From 1705fd262a928f1e316ddc2abf5de3cc7b99f65c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Feb 2016 12:10:36 +0800 Subject: [PATCH 0013/1555] update code style --- components/affix/index.jsx | 48 ++++++++++++++++++------------------- style/components/affix.less | 1 + 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/components/affix/index.jsx b/components/affix/index.jsx index 0c8eb35f65..0d6314c24f 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -1,13 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import rcUtil from 'rc-util'; +import { Dom } from 'rc-util'; import classNames from 'classnames'; function getScroll(w, top) { let ret = w[`page${top ? 'Y' : 'X'}Offset`]; - let method = `scroll${top ? 'Top' : 'Left'}`; + const method = `scroll${top ? 'Top' : 'Left'}`; if (typeof ret !== 'number') { - let d = w.document; + const d = w.document; // ie6,7,8 standard mode ret = d.documentElement[method]; if (typeof ret !== 'number') { @@ -19,42 +19,42 @@ function getScroll(w, top) { } function getOffset(element) { - let rect = element.getBoundingClientRect(); - let body = document.body; - let clientTop = element.clientTop || body.clientTop || 0; - let clientLeft = element.clientLeft || body.clientLeft || 0; - let scrollTop = getScroll(window, true); - let scrollLeft = getScroll(window); + const rect = element.getBoundingClientRect(); + const body = document.body; + const clientTop = element.clientTop || body.clientTop || 0; + const clientLeft = element.clientLeft || body.clientLeft || 0; + const scrollTop = getScroll(window, true); + const scrollLeft = getScroll(window); return { top: rect.top + scrollTop - clientTop, - left: rect.left + scrollLeft - clientLeft + left: rect.left + scrollLeft - clientLeft, }; } -let Affix = React.createClass({ +const Affix = React.createClass({ getDefaultProps() { return { - offset: 0 + offset: 0, }; }, propTypes: { - offset: React.PropTypes.number + offset: React.PropTypes.number, }, getInitialState() { return { affix: false, - affixStyle: null + affixStyle: null, }; }, handleScroll() { - let affix = this.state.affix; - let scrollTop = getScroll(window, true); - let elemOffset = getOffset(ReactDOM.findDOMNode(this)); + const affix = this.state.affix; + const scrollTop = getScroll(window, true); + const elemOffset = getOffset(ReactDOM.findDOMNode(this)); if (!affix && (elemOffset.top - this.props.offset) < scrollTop) { this.setState({ @@ -62,22 +62,22 @@ let Affix = React.createClass({ affixStyle: { top: this.props.offset, left: elemOffset.left, - width: ReactDOM.findDOMNode(this).offsetWidth - } + width: ReactDOM.findDOMNode(this).offsetWidth, + }, }); } if (affix && (elemOffset.top - this.props.offset) > scrollTop) { this.setState({ affix: false, - affixStyle: null + affixStyle: null, }); } }, componentDidMount() { - this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll); - this.resizeEvent = rcUtil.Dom.addEventListener(window, 'resize', this.handleScroll); + this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll); + this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll); }, componentWillUnmount() { @@ -92,7 +92,7 @@ let Affix = React.createClass({ render() { const className = classNames({ [this.props.className]: this.props.className, - 'ant-affix': this.state.affix + 'ant-affix': this.state.affix, }); return ( @@ -102,7 +102,7 @@ let Affix = React.createClass({
); - } + }, }); diff --git a/style/components/affix.less b/style/components/affix.less index c5e8cca7b1..0a56b4143f 100644 --- a/style/components/affix.less +++ b/style/components/affix.less @@ -1,3 +1,4 @@ .ant-affix { position: fixed; + z-index: 10; } From 73fe5cc2c3873da6986d739170690c93a39cf31d Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Feb 2016 16:44:38 +0800 Subject: [PATCH 0014/1555] support affix bottom, close #1000 --- components/affix/demo/bottom.md | 17 +++++++++ components/affix/demo/offset.md | 2 +- components/affix/index.jsx | 63 +++++++++++++++++++++------------ components/affix/index.md | 3 +- 4 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 components/affix/demo/bottom.md diff --git a/components/affix/demo/bottom.md b/components/affix/demo/bottom.md new file mode 100644 index 0000000000..72b360588f --- /dev/null +++ b/components/affix/demo/bottom.md @@ -0,0 +1,17 @@ +# 下方固定 + +- order: 2 + +固定在屏幕下方 + +--- + +````jsx +import { Affix, Button } from 'antd'; + +ReactDOM.render( + + + +, mountNode); +```` diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md index 561c070ab1..f1aba9ccc1 100644 --- a/components/affix/demo/offset.md +++ b/components/affix/demo/offset.md @@ -10,7 +10,7 @@ import { Affix, Button } from 'antd'; ReactDOM.render( - + , mountNode); diff --git a/components/affix/index.jsx b/components/affix/index.jsx index 0d6314c24f..3e1685be28 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -33,43 +33,60 @@ function getOffset(element) { } const Affix = React.createClass({ - - getDefaultProps() { - return { - offset: 0, - }; - }, - propTypes: { - offset: React.PropTypes.number, + offsetTop: React.PropTypes.number, + offsetBottom: React.PropTypes.number, }, getInitialState() { return { - affix: false, affixStyle: null, }; }, handleScroll() { - const affix = this.state.affix; + let { offsetTop, offsetBottom } = this.props; const scrollTop = getScroll(window, true); const elemOffset = getOffset(ReactDOM.findDOMNode(this)); + const elemSize = { + width: ReactDOM.findDOMNode(this.refs.fixedNode).offsetWidth, + height: ReactDOM.findDOMNode(this.refs.fixedNode).offsetHeight, + }; - if (!affix && (elemOffset.top - this.props.offset) < scrollTop) { - this.setState({ - affix: true, - affixStyle: { - top: this.props.offset, - left: elemOffset.left, - width: ReactDOM.findDOMNode(this).offsetWidth, - }, - }); + const offsetMode = {}; + if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') { + offsetMode.top = true; + offsetTop = 0; + } else { + offsetMode.top = typeof offsetTop === 'number'; + offsetMode.bottom = typeof offsetBottom === 'number'; } - if (affix && (elemOffset.top - this.props.offset) > scrollTop) { + if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) { + // Fixed Top + if (!this.state.affixStyle) { + this.setState({ + affixStyle: { + position: 'fixed', + top: offsetTop, + left: elemOffset.left, + }, + }); + } + } else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight && + offsetMode.bottom) { + // Fixed Bottom + if (!this.state.affixStyle) { + this.setState({ + affixStyle: { + position: 'fixed', + bottom: offsetBottom, + left: elemOffset.left, + }, + }); + } + } else if (this.state.affixStyle) { this.setState({ - affix: false, affixStyle: null, }); } @@ -92,12 +109,12 @@ const Affix = React.createClass({ render() { const className = classNames({ [this.props.className]: this.props.className, - 'ant-affix': this.state.affix, + 'ant-affix': this.state.affixStyle, }); return (
-
+
{this.props.children}
diff --git a/components/affix/index.md b/components/affix/index.md index 89c2af0c05..9c7a89f9ec 100644 --- a/components/affix/index.md +++ b/components/affix/index.md @@ -18,4 +18,5 @@ | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| -| offset | 达到指定偏移量后触发 | Number | 0 | +| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | +| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | From ff2cb6142a63c25b19c612fc1c79b2536a68fe01 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 23 Feb 2016 17:34:46 +0800 Subject: [PATCH 0015/1555] Add gutter for Row --- components/layout/demo/basic.md | 15 +++-------- components/layout/demo/gutter.md | 46 ++++++++++++++++++++++++++++++++ components/layout/index.md | 30 ++++++++++++--------- components/layout/row.jsx | 25 ++++++++++++++--- 4 files changed, 88 insertions(+), 28 deletions(-) create mode 100644 components/layout/demo/gutter.md diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md index f425ed7482..4273b79542 100644 --- a/components/layout/demo/basic.md +++ b/components/layout/demo/basic.md @@ -4,7 +4,7 @@ 从堆叠到水平排列。 -使用单一的一组 `.col-*` 栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在 `.row` 内。 +使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。 --- @@ -17,10 +17,10 @@ ReactDOM.render( .col-12 .col-12 - + + .col-8 .col-8 .col-8 - .col-8 .col-6 @@ -32,12 +32,3 @@ ReactDOM.render( mountNode ); ```` - - diff --git a/components/layout/demo/gutter.md b/components/layout/demo/gutter.md new file mode 100644 index 0000000000..ef1e11dfe5 --- /dev/null +++ b/components/layout/demo/gutter.md @@ -0,0 +1,46 @@ +# 区块间隔 + +- order: 6 + +栅格常常需要和间隔进行配置，我们推荐使用 `(16+8n)px` 作为栅格间隔。 + +--- + +````jsx +import { Row, Col } from 'antd'; + +ReactDOM.render( +
+ + +
.col-6
+ + +
.col-6
+ + +
.col-6
+ + +
.col-6
+ + +
+, mountNode); +```` + +````css +.gutter-example { + background: #f4f4f4; +} +.gutter-example .row > div { + background: transparent; + border: 0; +} +.gutter-box { + background: #2db7f5; + height: 80px; + line-height: 80px; + border-radius: 6px; +} +```` diff --git a/components/layout/index.md b/components/layout/index.md index 2101e4a732..9ac8ed9e81 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -11,6 +11,7 @@ ## 设计理念 +
100% @@ -57,10 +58,11 @@ 33.33%
+
-在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。 +在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。 -划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 +划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。 ## 概述 @@ -69,29 +71,31 @@ * 通过`row`在水平方向建立一组`column`（简写col） * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素 * 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建 -* 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列 +* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列 ## Flex 布局 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 -Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。 +Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。 + +## 微小 + +### 微创新 + + + +『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。 + +### 集成创新 + + + +选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。 + +--- + +## 确定 + +### 面向对象的方法 + + + +探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。 + +### 通俗科学的规则 + +详见『十大原则』。 + +--- + +## 幸福 + +### 用户的幸福 + + + +漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； + +良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应； + +自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。 + +### 设计者的幸福 + + + +从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 + +从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。 diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index d26ad09ae7..7aefa9500a 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -5,11 +5,9 @@ --- -Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。 +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 - - -Ant Design 源自蚂蚁金服体验技术部的后台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。 +Ant Design 源自蚂蚁金服体验技术部的中台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。 整套设计规范还在持续整理和完善中。 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md new file mode 100644 index 0000000000..744f7e39e6 --- /dev/null +++ b/docs/spec/invitation.md @@ -0,0 +1,7 @@ +# 提供邀请 + +- category: 设计原则 +- order: 8 +- subtitle: Provide Invitation + +--- diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md new file mode 100644 index 0000000000..e5d39a598a --- /dev/null +++ b/docs/spec/lightweight.md @@ -0,0 +1,34 @@ +# 简化交互 + +- category: 设计原则 +- order: 6 +- subtitle: Keep it Lightweight + +--- + +根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 + +> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：t = a + b log2 (D / S + 1）。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（S）。距离越长，所用时间越长；目标越大，所用时间越短。 + +## 实时可见工具 + +如果某个操作非常重要，就应该把它放在界面中，并实时可见。 + +## 悬停即现工具 + +如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 + +## 开关显示工具 + +如果某些操作只需要在特定模式时显示，可以通过开关来实现。 + + +## 交互中的工具 + +如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。 + +此处也可以运用『提供邀请』相关的知识点。 + +## 可视区域 ≠ 可点击区域 + +注：在移动端尤其适用。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md new file mode 100644 index 0000000000..79c877bd71 --- /dev/null +++ b/docs/spec/principle.md @@ -0,0 +1,25 @@ +# 十大原则 + +- category: 设计原则 +- order: 0 + +--- + +『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。 + +我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。 + +> 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。 + +我们总结了中台十大设计原则： + +- [亲密性 Proximity]() +- [对齐 Alignment]() +- [对比 Contrast]() +- [重复 Repetition]() +- [直截了当 Make it Direct]() +- [简化交互 Keep it Lightweight]() +- [足不出户 Stay on The Page]() +- [提供邀请 Provide Invitation]() +- [巧用过渡 Use Transition]() +- [即时反应 React Immediately]() diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md new file mode 100644 index 0000000000..10c96e70e3 --- /dev/null +++ b/docs/spec/proximity.md @@ -0,0 +1,23 @@ +# 亲密性 + +- category: 设计原则 +- order: 1 +- subtitle: Proximity + +--- + +『物理位置的接近意味着存在关联』，也就是说如果信息之间关联性越高，它们之间的距离越接近，也越像一个视觉单元；反之，则它们的距离越远，越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 + +## 纵向间距关系 + +通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 + +在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 + +> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 + +## 横向间距关系 + +为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 + +在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md new file mode 100644 index 0000000000..8b84620302 --- /dev/null +++ b/docs/spec/reaction.md @@ -0,0 +1,7 @@ +# 即时反应 + +- category: 设计原则 +- order: 10 +- subtitle: Stay in the Page + +--- diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md new file mode 100644 index 0000000000..4673d14a60 --- /dev/null +++ b/docs/spec/repetition.md @@ -0,0 +1,11 @@ +# 重复 + +- category: 设计原则 +- order: 4 +- subtitle: Repetition + +--- + +相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 + +重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 diff --git a/docs/spec/stay.md b/docs/spec/stay.md new file mode 100644 index 0000000000..30836f5043 --- /dev/null +++ b/docs/spec/stay.md @@ -0,0 +1,7 @@ +# 足不出户 + +- category: 设计原则 +- order: 6 +- subtitle: Stay in the Page + +--- diff --git a/docs/spec/transition.md b/docs/spec/transition.md new file mode 100644 index 0000000000..c799015dc7 --- /dev/null +++ b/docs/spec/transition.md @@ -0,0 +1,7 @@ +# 巧用过渡 + +- category: 设计原则 +- order: 9 +- subtitle: Use Transition + +--- diff --git a/site/templates/aside.html b/site/templates/aside.html index 9b7a8d325d..7c746d7ad8 100644 --- a/site/templates/aside.html +++ b/site/templates/aside.html @@ -10,6 +10,7 @@ class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"> {{item.title}} {{item.meta.chinese}} + {{item.meta.subtitle}} {%- endfor %} diff --git a/site/templates/component.html b/site/templates/component.html index 4d068c72dc..edb39fca5d 100644 --- a/site/templates/component.html +++ b/site/templates/component.html @@ -4,7 +4,7 @@

- {{ post.title }} {{ post.meta.chinese }} + {{ post.title }} {{ post.meta.chinese }}{{ post.meta.subtitle }} {%- if post.meta.API %} From 7d3ebba56416b47799b803aabd371bd996b33353 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 17:45:19 +0800 Subject: [PATCH 0026/1555] Add design principles --- docs/spec/alignment.md | 8 ++++++++ docs/spec/contrast.md | 13 +++++++++++++ docs/spec/principle.md | 23 +++++++++++++++++++++-- docs/spec/proximity.md | 8 ++++++++ docs/spec/repetition.md | 8 ++++++++ site/templates/aside.html | 1 - site/templates/page.html | 2 +- 7 files changed, 59 insertions(+), 4 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 5eb5e7f619..732e3723a9 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,14 +12,22 @@ ## 文案类对齐 +推荐示例 +不推荐示例 + 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 ## 表单类对齐 +冒号对齐示例 + 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。 ## 数字类对齐 +正确示例 +错误示例 + 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index 58ab696396..3d7bfb3cf3 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -12,18 +12,31 @@ ## 主次关系对比 +正确示例 +错误示例 + 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 > 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。 +不区分主次的示例 + 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 ## 总分关系对比 +总分关系示例 1 + +总分关系示例 2 + 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 ### 状态关系对比 +静态对比示例 + +动态对比示例 + 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 常见类型有『静态对比』、『动态对比』。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 79c877bd71..0ca3b7ea95 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -11,9 +11,28 @@ > 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。 -我们总结了中台十大设计原则： +
+ + + + Web 界面设计 + 作者: Bill Scott / Theresa Neil + 出版社: 电子工业出版社 + + + + + + 写给大家看的设计书 + 作者: Robin Williams + 出版社: 人民邮电出版社 + + +
-- [亲密性 Proximity]() +#### 中台十大设计原则 + +- [亲密性 Proximity](./proximity) - [对齐 Alignment]() - [对比 Contrast]() - [重复 Repetition]() diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 10c96e70e3..f557a7d513 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -10,14 +10,22 @@ ## 纵向间距关系 +纵向间距示例 + 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 +增加元素示例 + 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 > 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 ## 横向间距关系 +组合排布示例 + 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 +复选框内示例 + 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 4673d14a60..1751e6dd8b 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -8,4 +8,12 @@ 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 +## 重复元素 + +线框重复示例 + +设计要素重复示例 + +文案格式重复示例 + 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 diff --git a/site/templates/aside.html b/site/templates/aside.html index 7c746d7ad8..9b7a8d325d 100644 --- a/site/templates/aside.html +++ b/site/templates/aside.html @@ -10,7 +10,6 @@ class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"> {{item.title}} {{item.meta.chinese}} - {{item.meta.subtitle}} {%- endfor %} diff --git a/site/templates/page.html b/site/templates/page.html index e2ccae706b..3b519e127e 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -17,7 +17,7 @@ {% block content %}
-

{{ post.title }} {{ post.meta.chinese }}

+

{{ post.title }} {{ post.meta.subtitle }}

{{ post.toc }}
{{ post.html|add_anchor }}
From 1c73c61f175b099a11e92c0738c5ede642e15c75 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 19:39:08 +0800 Subject: [PATCH 0027/1555] fix touch event --- scripts/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/demo.js b/scripts/demo.js index 891691956b..41251392f3 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -382,7 +382,7 @@ InstantClickChangeFns.push(function() { navMenu.removeClass('nav-hide').addClass('nav-show'); }); - $('body').on('click', function (e) { + $('body').on('click touchstart', function (e) { if (e.target !== $('.nav-phone-icon')[0] && !navMenu[0].contains(e.target) && navMenu.hasClass('nav-show')) { From b6ffd6ced151b951dbb3d38e67bd60adc38d68fe Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 20:05:50 +0800 Subject: [PATCH 0028/1555] update docs --- docs/spec/lightweight.md | 2 +- docs/spec/principle.md | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index e5d39a598a..b944c91dcd 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -8,7 +8,7 @@ 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：t = a + b log2 (D / S + 1）。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（S）。距离越长，所用时间越长；目标越大，所用时间越短。 +> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 ## 实时可见工具 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 0ca3b7ea95..9fc800fed1 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -33,12 +33,12 @@ #### 中台十大设计原则 - [亲密性 Proximity](./proximity) -- [对齐 Alignment]() -- [对比 Contrast]() -- [重复 Repetition]() -- [直截了当 Make it Direct]() -- [简化交互 Keep it Lightweight]() -- [足不出户 Stay on The Page]() -- [提供邀请 Provide Invitation]() -- [巧用过渡 Use Transition]() -- [即时反应 React Immediately]() +- [对齐 Alignment](./alignment) +- [对比 Contrast](./contrast) +- [重复 Repetition](./repetition) +- [直截了当 Make it Direct](./direct) +- [简化交互 Keep it Lightweight](./lightweight) +- [足不出户 Stay in the Page](./stay) +- [提供邀请 Provide Invitation](./invitation) +- [巧用过渡 Use Transition](./transition) +- [即时反应 React Immediately](./reaction) From 3e0d11043b3dfbef95dc8bd177e39fc7830a576d Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 8 Mar 2016 20:29:18 +0800 Subject: [PATCH 0029/1555] fix pagination in table --- components/table/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 32ffc4d205..72648e2f2d 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -86,7 +86,7 @@ let AntTable = React.createClass({ componentWillReceiveProps(nextProps) { if (('pagination' in nextProps) && nextProps.pagination !== false) { this.setState({ - pagination: objectAssign({}, this.state.pagination, nextProps.pagination) + pagination: objectAssign({}, defaultPagination, this.state.pagination, nextProps.pagination) }); } // dataSource 的变化会清空选中项 From b838d3b40ff01c4e857bcf6e0ff18c98c5077717 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 21:03:05 +0800 Subject: [PATCH 0030/1555] Add pictures --- docs/spec/alignment.md | 10 +++++----- docs/spec/contrast.md | 16 +++++++++------- docs/spec/feature.md | 16 ++++++++++------ docs/spec/proximity.md | 12 ++++++++---- docs/spec/repetition.md | 6 +++--- 5 files changed, 35 insertions(+), 25 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 732e3723a9..60c17c7e89 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,14 +12,14 @@ ## 文案类对齐 -推荐示例 -不推荐示例 +推荐示例 +不推荐示例 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 ## 表单类对齐 -冒号对齐示例 +冒号对齐示例 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 @@ -27,7 +27,7 @@ ## 数字类对齐 -正确示例 -错误示例 +正确示例 +错误示例 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index 3d7bfb3cf3..ad8d115109 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -12,30 +12,32 @@ ## 主次关系对比 -正确示例 -错误示例 +正确示例 +错误示例 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 > 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。 -不区分主次的示例 +
+ +不区分主次的示例 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 ## 总分关系对比 -总分关系示例 1 +总分关系示例 1 -总分关系示例 2 +总分关系示例 2 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 ### 状态关系对比 -静态对比示例 +静态对比示例 -动态对比示例 +动态对比示例 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 0d4edb19c4..2ea31f1f95 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -5,25 +5,29 @@ --- +
+ +
+ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。 ## 三大特性 -
+
- +
微小
致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。
- +
确定
通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
- +
幸福
不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。
@@ -31,12 +35,12 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index f557a7d513..84886d12c5 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -10,11 +10,13 @@ ## 纵向间距关系 -纵向间距示例 +纵向间距示例 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 -增加元素示例 +
+ +增加元素示例 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 @@ -22,10 +24,12 @@ ## 横向间距关系 -组合排布示例 +组合排布示例 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 -复选框内示例 +
+ +复选框内示例 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 1751e6dd8b..4b0edebe21 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -10,10 +10,10 @@ ## 重复元素 -线框重复示例 +线框重复示例 -设计要素重复示例 +设计要素重复示例 -文案格式重复示例 +文案格式重复示例 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 From 1be6669bb7d74ee20ca47dd335d60319a790e54b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 23:44:42 +0800 Subject: [PATCH 0031/1555] remove es3ify, ref #858 --- webpack.config.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index bcba32864e..49f7afa0f0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -26,10 +26,6 @@ module.exports = { module: { loaders: [{ - test: /\.jsx?$/, - exclude: /node_modules/, - loader: 'es3ify', - }, { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', From 6526468f575b03f92f02da9e7e4af2ecc916da69 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 23:53:09 +0800 Subject: [PATCH 0032/1555] fix inline FormItem margin, close #1141 --- style/components/form.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style/components/form.less b/style/components/form.less index 0c7adfc14e..ce0c7c73ca 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -242,6 +242,12 @@ form { .@{css-prefix}form-item { display: inline-block; margin-right: 10px; + margin-bottom: 0; + + &-with-help { + margin-bottom: 24px; + } + > div { display: inline-block; } From 56fb20b76dedd6469184f8dd8c71f21bb679b7dc Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:33:05 +0800 Subject: [PATCH 0033/1555] Fix date-picker style prop --- components/date-picker/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx index 85670591ec..b6dd9fb69a 100644 --- a/components/date-picker/index.jsx +++ b/components/date-picker/index.jsx @@ -115,7 +115,7 @@ function createPicker(TheCalendar, defaultFormat) { pickerClass += ' ant-calendar-picker-open'; } return ( - + From 3baf790341fa7c83afe103d03ab2642240447260 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:50:02 +0800 Subject: [PATCH 0034/1555] fix badge style --- style/components/badge.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/badge.less b/style/components/badge.less index 94b1a1726a..84cc76f362 100644 --- a/style/components/badge.less +++ b/style/components/badge.less @@ -5,6 +5,7 @@ position: relative; display: inline-block; line-height: 1; + vertical-align: middle; &-count { position: absolute; From b706a024c6097f37bef72c55e804715d1f17465a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:50:11 +0800 Subject: [PATCH 0035/1555] Fix autoprefix --- package.json | 1 + webpack.config.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/package.json b/package.json index 416565f6d6..6d769c3157 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "warning": "~2.1.0" }, "devDependencies": { + "autoprefixer": "^6.3.3", "babel-cli": "^6.2.0", "babel-core": "^6.2.1", "babel-jest": "^6.0.1", diff --git a/webpack.config.js b/webpack.config.js index 49f7afa0f0..ef21c5af4e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); var pkg = require('./package'); +var autoprefixer = require('autoprefixer'); var entry = {}; entry['demo'] = ['./scripts/demo.js', 'webpack-hot-middleware/client']; @@ -53,6 +54,8 @@ module.exports = { }] }, + postcss: [autoprefixer], + plugins: [ new ExtractTextPlugin('[name].css'), new webpack.optimize.OccurenceOrderPlugin(), From 1c5bc26e9f16f76b73d7630271ea3d39a5aa22a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:57:00 +0800 Subject: [PATCH 0036/1555] Fix badge in old webkit browser --- components/badge/ScrollNumber.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 9b91e788a3..7acf36799d 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -76,6 +76,7 @@ class AntScrollNumber extends React.Component { className: `${this.props.prefixCls}-only`, style: { transition: removeTransition && 'none', + webkitTransform: `translate3d(0, ${-position * height}px, 0)`, transform: `translate3d(0, ${-position * height}px, 0)`, height, }, From a553f6b2999f14a9584985b4ff98115c5ef9ea54 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:59:02 +0800 Subject: [PATCH 0037/1555] typo --- components/badge/ScrollNumber.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 7acf36799d..27a2fd19d5 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -76,7 +76,7 @@ class AntScrollNumber extends React.Component { className: `${this.props.prefixCls}-only`, style: { transition: removeTransition && 'none', - webkitTransform: `translate3d(0, ${-position * height}px, 0)`, + WebkitTransform: `translate3d(0, ${-position * height}px, 0)`, transform: `translate3d(0, ${-position * height}px, 0)`, height, }, From 596fbc80d5de8bdfee0fd93bde327b20225ac4c8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Feb 2016 17:37:23 +0800 Subject: [PATCH 0038/1555] Remove rc-form-validation from deps completely --- components/validation/index.jsx | 24 +++++++----------------- package.json | 1 - 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/components/validation/index.jsx b/components/validation/index.jsx index 198cca8668..99c88ab43f 100644 --- a/components/validation/index.jsx +++ b/components/validation/index.jsx @@ -1,25 +1,15 @@ import React from 'react'; -import Validation from 'rc-form-validation'; import warning from 'warning'; export default class AntValidation extends React.Component { - validate(callback) { - this.refs.validation.validate(callback); - } - - reset() { - this.refs.validation.reset(); - } - - forceValidate(fields, callback) { - this.refs.validation.forceValidate(fields, callback); - } - render() { - warning(false, '`Validation` is deprecated, please use `Form` which has supported validation after antd@0.12.0.'); - return ; + warning(false, '`Validation` is removed, please use `Form` which has supported validation after antd@0.12.0,' + + ' or you can just import Validation from \'rc-form-validation\' for compatibility'); + return null; } } -AntValidation.Validator = Validation.Validator; -AntValidation.FieldMixin = Validation.FieldMixin; +AntValidation.Validator = () => {}; +AntValidation.FieldMixin = { + setField() {}, +}; diff --git a/package.json b/package.json index 416565f6d6..91b1109980 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "rc-dialog": "~5.4.0", "rc-dropdown": "~1.4.3", "rc-form": "~0.14.0", - "rc-form-validation": "~2.5.0", "rc-input-number": "~2.5.0", "rc-menu": "~4.10.2", "rc-notification": "~1.3.1", From 6d9f26088b232e471f713a6e20dfca83887c0feb Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 15:56:00 +0800 Subject: [PATCH 0039/1555] Add pictures --- docs/spec/alignment.md | 2 +- docs/spec/feature.md | 28 ++++++++++++++++++++-------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 60c17c7e89..d85b631ee9 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -23,7 +23,7 @@ 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 -更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。 +更多对齐方式，请查看[『模式』-『表单』-『规格』-『对齐方式』](../pattern/form#对齐方式)。 ## 数字类对齐 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 2ea31f1f95..cb4424061d 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -1,4 +1,4 @@ -# 特性 +# 三大特性 - category: 1 - order: 1 @@ -13,7 +13,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。 -## 三大特性 +## 特性
@@ -48,13 +48,19 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 微创新 - +数值输入框示例 + +分页示例 + +字数校验框示例 『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。 ### 集成创新 - +填空示例 + +带图表的表格 选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。 @@ -64,13 +70,19 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 面向对象的方法 - +色值换算工具示例 + +排版规则示例 + +操作反馈 - 正确示例 + +操作反馈 - 错误示例 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。 ### 通俗科学的规则 -详见『十大原则』。 +详见[『十大原则』](./principle)。 --- @@ -78,7 +90,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 用户的幸福 - +用户的幸福示例 漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； @@ -88,7 +100,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 设计者的幸福 - +设计者的幸福示例 从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 From e5ba8b72f5d3e326070a52fd6c272cb4a55ae4cb Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 16:01:02 +0800 Subject: [PATCH 0040/1555] upgrade polyfill files --- docs/react/getting-started.md | 2 +- site/templates/layout.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index b9ca914184..fb552d8a69 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -119,7 +119,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 - + diff --git a/site/templates/layout.html b/site/templates/layout.html index 28ddc69da8..1629b3cb0d 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -13,7 +13,7 @@ {% block styles %}{% endblock %} - + + + diff --git a/site/common/lib.js b/site/common/lib.js new file mode 100644 index 0000000000..334670a1c8 --- /dev/null +++ b/site/common/lib.js @@ -0,0 +1,9 @@ +import '../../style/index.less'; +import './styles/tomorrow.less'; +import './styles/common.less'; +import './styles/markdown.less'; +import './styles/toc.less' +import './styles/font.less'; +import './styles/resource.less'; +import './styles/clearfix.less'; +import './styles/demo.less'; diff --git a/site/common/styles/clearfix.less b/site/common/styles/clearfix.less new file mode 100644 index 0000000000..d044d0a4c3 --- /dev/null +++ b/site/common/styles/clearfix.less @@ -0,0 +1,14 @@ +.clearfix { + zoom: 1; + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + visibility: hidden; + font-size: 0; + height: 0; + } +} \ No newline at end of file diff --git a/site/common/styles/common.less b/site/common/styles/common.less new file mode 100644 index 0000000000..83dee1fdf6 --- /dev/null +++ b/site/common/styles/common.less @@ -0,0 +1,17 @@ +.main-wrapper { + background: #fff; + width: 92%; + margin: 0 auto; + border-radius: 6px; + overflow: hidden; + padding: 24px 0 0; + margin-bottom: 24px; + position: relative; +} + +.main-container { + padding: 0 40px 120px; + background: #fff; + min-height: 500px; + overflow: hidden; +} \ No newline at end of file diff --git a/site/common/styles/demo.less b/site/common/styles/demo.less new file mode 100644 index 0000000000..6a66d4369b --- /dev/null +++ b/site/common/styles/demo.less @@ -0,0 +1,142 @@ +.code-box { + border: 1px solid #E9E9E9; + border-radius: 6px; + display: inline-block; + width: 100%; + position: relative; + margin: 0px 0 16px 0px; + transition: all 0.5s ease; +} + +.code-box:hover { + border-color: #ccc; +} + +.code-box:target { + border: 1px solid rgba(45, 183, 245, 0.7); + box-shadow: 0 0 4px rgba(45, 183, 245, 0.5); +} + +.code-box:hover .code-box-meta, +.code-box:target .code-box-meta { + background: #fbfbfb; +} + +.code-box:hover .code-box-title, +.code-box:target .code-box-title { + background: #fbfbfb; + box-shadow: 0 -1.2px 0 #e9e9e9; +} + +.code-box .code-box-title a, +.code-box .code-box-title a:hover { + color: #666; +} + +.code-box .code-box-demo { + border-bottom: 1px solid #E9E9E9; + padding: 42px 20px 50px; +} + +.code-box-meta { + position: relative; + border-radius: 0 0 6px 6px; + transition: background-color 0.4s ease; + width: 100%; +} + +.code-box-meta h4, +.code-box-meta p { + margin: 0; +} + +.code-box-meta { + .ant-collapse, + .ant-collapse-content, + .ant-collapse-content-box { + background-color: transparent; + border: 0; + padding: 0; + } + + .ant-collapse-header { + height: auto!important; + line-height: 1.8!important; + padding-top: 9px; + padding-bottom: 10px; + } +} + +.code-box-title { + position: absolute; + top: -14px; + padding: 1px 1.1em; + color: #777; + border-radius: 6px; + background: #fff; + transition: all 0.4s ease; +} + +.code-box-title:before { + font-family: anticon; + content: "\e658"; + font-size: 16px; + vertical-align: middle; + line-height: 22px; + position: relative; + margin-right: 8px; + top: -2px; + color: #ccc; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + display: inline-block; +} + +.code-box-meta > p { + font-size: 12px; + margin: 0.5em 0; + padding-right: 25px; + width: 100%; +} + +.code-box .collapse { + position: absolute; + right: 16px; + bottom: 18px; + cursor: pointer; + width: 18px; + height: 18px; + font-size: 18px; + line-height: 18px; + opacity: 0.5; + text-align: center; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + transition: all 0.3s ease; + color: #999; + background: #fff; +} + +.code-box.expand .collapse { + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +.code-box .collapse:hover { + opacity: 1; +} + +.code-box .highlight { + overflow: hidden; + border-top: 1px dashed #e9e9e9; +} + +.code-box pre { + margin: 0; + width: auto; +} + +.code-box pre code { + border: none; + background: #fff; +} \ No newline at end of file diff --git a/site/common/styles/font.less b/site/common/styles/font.less new file mode 100644 index 0000000000..9dd82b76c7 --- /dev/null +++ b/site/common/styles/font.less @@ -0,0 +1,32 @@ +/* latin */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 300; + src: local('Raleway Light'), local('Raleway-Light'), url(http://fontstatic.useso.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} +/* latin */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + src: local('Raleway'), url(http://fontstatic.useso.com/s/raleway/v9/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} +/* latin */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 500; + src: local('Raleway Medium'), local('Raleway-Medium'), url(http://fontstatic.useso.com/s/raleway/v9/CcKI4k9un7TZVWzRVT-T8wzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} +/* latin */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 600; + src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(http://fontstatic.useso.com/s/raleway/v9/xkvoNo9fC8O2RDydKj12bwzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less new file mode 100644 index 0000000000..9cfd6d2b87 --- /dev/null +++ b/site/common/styles/markdown.less @@ -0,0 +1,165 @@ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.markdown > * { + // width: 100%!important; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { font-size: 28px; } +.markdown h2 { font-size: 22px; } +.markdown h3 { font-size: 18px; } +.markdown h4 { font-size: 16px; } +.markdown h5 { font-size: 14px; } +.markdown h6 { font-size: 12px; } + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p, +.markdown pre { + margin: 1em 0; +} + +.markdown > p, +.markdown > blockquote, +.markdown > .highlight, +.markdown > ol, +.markdown > ul { + width: 80%; +} + +.markdown ul > li { + list-style: circle; +} + +.markdown > ul li, +.markdown blockquote ul > li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown > ul li p, +.markdown > ol li p { + margin: 0.6em 0; +} + +.markdown ol > li { + list-style: decimal; +} + +.markdown > ol li, +.markdown blockquote ol > li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; +} + +.markdown pre { + border-radius: 6px; + background: #f7f7f7; +} + +.markdown pre code { + border: none; + padding: 1em 2em; + background: #f7f7f7; + margin: 0; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown > table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 80%; + margin-bottom: 24px; +} + +.markdown > table th { + white-space: nowrap; + color: #5C6B77; + font-weight: 600; +} + +.markdown > table th, +.markdown > table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown > table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown > br, +.markdown > p > br { + clear: both; +} \ No newline at end of file diff --git a/site/common/styles/resource.less b/site/common/styles/resource.less new file mode 100644 index 0000000000..9cd508bb0c --- /dev/null +++ b/site/common/styles/resource.less @@ -0,0 +1,69 @@ +.resource-cards { + width: 100%; +} + +.resource-card { + max-width: 350px; + width: 40%; + min-width: 300px;; + height: 130px; + border: 1px solid #e9e9e9; + border-radius: 6px; + font-size: 12px; + color: #777; + display: inline-block; + margin: 20px 40px 10px 0; + vertical-align: middle; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.resource-card:hover { + box-shadow: 0 1px 4px rgba(64,64,64,.2); +} + +.resource-card:hover .resource-card-title { + color: #2db7f5; +} + +.resource-card.disabled { + opacity: 0.45; + pointer-events: none; +} + +.resource-card img { + display: inline-block; + vertical-align: middle; + width: 50px; + margin: 0 20px 0 24px; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.resource-card-content { + display: inline-block; + vertical-align: middle; + position: absolute; + top: 50%; + transform: translateY(-50%); + margin-left: 92px; +} + +.resource-card-title { + display: block; + font-size: 16px; + color: #666; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + line-height: 1; + margin-bottom: 8px; +} + +.resource-card-description { + display: block; + color: #999; + padding-right: 8px; +} \ No newline at end of file diff --git a/site/common/styles/toc.less b/site/common/styles/toc.less new file mode 100644 index 0000000000..4fff8c904d --- /dev/null +++ b/site/common/styles/toc.less @@ -0,0 +1,40 @@ +.toc { + font-size: 14px; + margin-bottom: 20px; + background: #fbfbfb; + border-left: 2px solid #eee; +} + +.toc > ul { + padding: 8px 0; +} + +.toc > ul li { + list-style: none; +} + +.toc li > ul { + text-indent: 8px; + font-size: 12px; + display: none; +} + +.toc a { + padding-left: 16px; + border-left: 2px solid #eee; + margin-left: -2px; + display: block; + transition: all 0.3s ease; + white-space: nowrap; + overflow: hidden; + color: #666; +} + +.toc a:hover { + color: #2db7f5; +} + +.toc a.current { + border-color: #2db7f5; + color: #2db7f5; +} \ No newline at end of file diff --git a/site/static/tomorrow.less b/site/common/styles/tomorrow.less similarity index 100% rename from site/static/tomorrow.less rename to site/common/styles/tomorrow.less diff --git a/site/component/App.jsx b/site/component/App.jsx new file mode 100644 index 0000000000..1483c70e25 --- /dev/null +++ b/site/component/App.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Header from './Header'; +import Footer from './Footer'; + +import './app.less'; +export default function App({ children }) { + return (
+
+ { children } +
+
); +} diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx new file mode 100644 index 0000000000..3c4cb2934a --- /dev/null +++ b/site/component/Article/index.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import * as utils from '../utils'; + +export default class Article extends React.Component { + render() { + const content = this.props.content; + const jumper = content.description.filter((node) => { + return node.type === 'h2'; + }).map((node) => { + return
  • { node.children }
    • ; + }); + console.log(content.description); + return ( +
    +

    { content.meta.title }

    + { + jumper.length > 0 ? +
      { jumper }
    : + null + } + { content.description.map(utils.objectToComponent) } +
    + ); + } +} diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx new file mode 100644 index 0000000000..b6cddad7c3 --- /dev/null +++ b/site/component/ComponentDoc/index.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Row, Col } from '../../../'; +import Demo from '../Demo'; +import * as utils from '../utils'; + +export default class ComponentDoc extends React.Component { + render() { + const { demos = [], doc } = this.props; + + const leftChildren = []; + const rightChildren = []; + demos.forEach((demoData, index) => { + if (index % 2 === 0) { + leftChildren.push(); + } else { + rightChildren.push(); + } + }); + + return ( +
    +

    {doc.meta.title}

    + { doc.description.map(utils.objectToComponent) } +

    代码演示

    + + { leftChildren } + { rightChildren } + + { doc.api.map(utils.objectToComponent) } +
    + ); + } +} diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx new file mode 100644 index 0000000000..8d7b74f14c --- /dev/null +++ b/site/component/Demo/index.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Link } from 'react-router'; +import { Collapse } from '../../../'; +import * as utils from '../utils'; +import hljs from 'highlight.js'; + +export default class Demo extends React.Component { + render() { + const { id, preview, title, intro, code } = this.props; + const introChildren = intro.map(utils.objectToComponent); + const highlightedCode = hljs.highlight('javascript', code).value; + return ( +
    +
    + { preview() } +
    +
    +
    + { title } +
    + + +
    + 
    +                  
+
    +
    +     +     +
    +
    + ); + } +} diff --git a/site/component/Footer/index.jsx b/site/component/Footer/index.jsx new file mode 100644 index 0000000000..059fb41734 --- /dev/null +++ b/site/component/Footer/index.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Row, Col, Select } from '../../../'; + +import './index.less'; +export default class Footer extends React.Component { + render() { + return (); + } +} diff --git a/site/component/Footer/index.less b/site/component/Footer/index.less new file mode 100644 index 0000000000..21fc6a55c9 --- /dev/null +++ b/site/component/Footer/index.less @@ -0,0 +1,20 @@ +#footer { + animation: yBottomMatrix .5s ease-out .6s backwards; + + border-top: 1px solid #eee; + background: #fff; + padding: 0 2%; +} + +#footer .footer-col { + padding: 10px 2% 15px; +} +#footer h2 { + font-size: 16px; + font-weight: normal; + margin-top: 5px; +} +#footer a, #footer p { + font-size: 12px; + margin: 5px 2px 0 0; +} \ No newline at end of file diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx new file mode 100644 index 0000000000..3e4ee3ac9e --- /dev/null +++ b/site/component/Header/index.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Link } from 'react-router'; +import { Select, Menu } from '../../../'; +const Option = Select.Option; + +import './index.less'; + +import componentsList from '../../../_site/data/components-list'; +export default function Header() { + const options = []; + for (let key of Object.keys(componentsList)) { + componentsList[key].forEach((item) => { + options.push(); + }); + } + + return (); +} diff --git a/site/component/Header/index.less b/site/component/Header/index.less new file mode 100644 index 0000000000..9207c83452 --- /dev/null +++ b/site/component/Header/index.less @@ -0,0 +1,64 @@ +@header-height: 80px; + +#header { + animation: xRightMatrix .5s ease-out; + transition: opacity 0.5S; + + background: #fff; + border-bottom: 1px solid #eee; + height: @header-height; + margin-bottom: 24px; +} + +#logo { + animation: xLeftMatrix .5s ease-out; + transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; + + float: left; + height: 60px; + margin: 10px 45px 10px 40px; +} +#logo img { + height: 60px; + width: 60px; +} +#logo span { + color: #6EB4E0; + float: right; + font-size: 18px; + font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; + height: 60px; + line-height: 60px; + text-transform: uppercase; +} + +#search-box { + border-left: 1px solid #EBEDEE; + float: left; + height: 22px; + padding-left: 30px; + margin: 32px auto 0; +} +#search-box .ant-select { + font-size: 14px; + margin-top: -2px; + width: 230px; +} + +#search-box .ant-select-selection { + border: 0; + box-shadow: none; +} + +#nav { + border: 0; + float: right; + font-size: 14px; + margin-right: 25px; +} +#nav li { + height: @header-height; + line-height: @header-height; + width: 86px; + text-align: center; +} \ No newline at end of file diff --git a/site/component/Home/index.jsx b/site/component/Home/index.jsx new file mode 100644 index 0000000000..cbddb8972d --- /dev/null +++ b/site/component/Home/index.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Button, Icon } from '../../../'; + +import './index.less'; +export default function Home() { + return (); +} diff --git a/site/component/Home/index.less b/site/component/Home/index.less new file mode 100644 index 0000000000..aa3892e257 --- /dev/null +++ b/site/component/Home/index.less @@ -0,0 +1,52 @@ +#banner { + overflow: hidden; + position: relative; + min-height: 600px; + background: #fff; + transform-style: preserve-3d; + transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out; + margin-top: -24px; +} + +#banner section { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +#banner aside { + position: absolute; + top: 19%; + left: 10%; + z-index: 100; + color: #707D8D; + font-family: Raleway, 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', SimSun, sans-serif; + font-weight: 300; +} +#banner h2 { + font-size: 50px; + font-weight: 300; + line-height: 1.1; + margin-bottom: 12px; + text-transform: uppercase; + width: 200px; +} +#banner p { + color: #9ea9b4; + font-size: 14px; + margin-bottom: 30px; + padding-left: 4px; +} + +@img-height: 881px; +@img-width: 1628px; +#banner img { + position: absolute; + top: 50%; + left: 50%; + height: @img-height; + width: @img-width; + margin: -@img-height/2 0 0 -@img-width/2; +} \ No newline at end of file diff --git a/site/component/ReactComponents/index.jsx b/site/component/ReactComponents/index.jsx new file mode 100644 index 0000000000..2951a66872 --- /dev/null +++ b/site/component/ReactComponents/index.jsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Route, Link } from 'react-router'; +import { Row, Col, Menu } from '../../../'; +import componentsList from '../../../_site/data/components-list'; + +export default class ReactComponents extends React.Component { + render() { + const componentMenuItems = []; + ['基本', '表单', '展示', '导航', '其它'].forEach((key) => { + const grandChildren = componentsList[key].map((item) => { + const key = item.english.toLowerCase(); + return ( + + {item.title} + + ); + }); + + componentMenuItems.push( + + { grandChildren } + + ); + }); + + return ( + + + + + Ant Design of React + + + 快速上手 + + + 安装 + + + 升级指南 + + + 更新日志 + + + { componentMenuItems } + + + + + { this.props.children } + + + ); + } +} diff --git a/site/component/Resource/index.jsx b/site/component/Resource/index.jsx new file mode 100644 index 0000000000..ea6e518e54 --- /dev/null +++ b/site/component/Resource/index.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Link } from 'react-router'; +import { Row, Col, Menu } from '../../../'; + +export default class Resource extends React.Component { + render() { + return ( + + + + + + 资源下载 + + + + + 文献素材 + + + + + GitHub + + + + + + { this.props.children } + + + ); + } +} diff --git a/site/component/Spec/index.jsx b/site/component/Spec/index.jsx new file mode 100644 index 0000000000..6b2e304e46 --- /dev/null +++ b/site/component/Spec/index.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Link } from 'react-router'; +import { Row, Col, Menu } from '../../../'; + +export default class Spec extends React.Component { + render() { + return ( + + + + + + Ant Design + + + + + + 字体 + + + + + 排版 + + + + 色彩 + + + 常用布局 + + + + + + 自然运动 + + + + + 互动转换 + + + + + 组件动画 + + + + + + + { this.props.children } + + + ); + } +} diff --git a/site/component/app.less b/site/component/app.less new file mode 100644 index 0000000000..50f1558082 --- /dev/null +++ b/site/component/app.less @@ -0,0 +1,3 @@ +body { + background: #ECECEC; +} \ No newline at end of file diff --git a/site/component/utils.js b/site/component/utils.js new file mode 100644 index 0000000000..cbabdaea48 --- /dev/null +++ b/site/component/utils.js @@ -0,0 +1,25 @@ +import React from 'react'; + +export function objectToComponent(object, index) { + if (object === null) return; // TODO: mark-twain support table + + const children = object.children; + + if (object.type === 'html') { + return React.createElement('div', { + key: index, + dangerouslySetInnerHTML: { __html: children } + }); + } + + if (typeof children === 'string') { + return React.createElement(object.type, { + key: index, + dangerouslySetInnerHTML: { __html: children } + }); + } + return React.createElement( + object.type, { key: Math.random() }, + children && children.map(objectToComponent) // `hr` has no children + ); +} diff --git a/site/entry/index.jsx b/site/entry/index.jsx new file mode 100644 index 0000000000..dd2ea4c2a9 --- /dev/null +++ b/site/entry/index.jsx @@ -0,0 +1,80 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Router, Route, IndexRoute, hashHistory } from 'react-router'; + +import '../common/lib'; +import App from '../component/App'; +import Home from '../component/Home'; +import Article from '../component/Article'; +import introduce from '../../_site/data/introduce'; +import gettingStarted from '../../_site/data/getting-started'; +import install from '../../_site/data/install'; +import upgradeNotes from '../../_site/data/upgrade-notes'; +import changelog from '../../_site/data/changelog'; +import ReactComponents from '../component/ReactComponents'; +import ComponentDoc from '../component/ComponentDoc'; +import componentDocsList from '../../_site/data/component-docs-list'; +import demosList from '../../_site/data/demos-list'; +import Spec from '../component/Spec'; +import specIntro from '../../_site/data/specIntro'; +import font from '../../_site/data/font'; +import typography from '../../_site/data/typography'; +import easing from '../../_site/data/easing'; +import pageTransition from '../../_site/data/page-transition'; +import motion from '../../_site/data/motion'; +import Resource from '../component/Resource'; +import download from '../../_site/data/download'; +import reference from '../../_site/data/reference'; + +const Introduce = () =>
    ; +const GettingStarted = () =>
    ; +const Install = () =>
    ; +const UpgradeNotes = () =>
    ; +const Changelog = () =>
    ; + +const demosListChildren = componentDocsList.map((componentDoc) => { + const key = componentDoc.meta.english.toLowerCase(); + const ComponentDocWrapper = + () => ; + + return ; +}); + +const SpecIntro = () =>
    ; +const Font = () =>
    ; +const Typography = () =>
    ; +const Easing = () =>
    ; +const PageTransition = () =>
    ; +const Motion = () =>
    ; + +const Download = () =>
    ; +const Reference = () =>
    ; + +ReactDOM.render( + + + + + + + + + + {demosListChildren} + + + + + + + + + + + + + + + + +, document.getElementById('react-content')); diff --git a/site/static/motion.js b/site/static/motion.js deleted file mode 100644 index 19c5ba9bbd..0000000000 --- a/site/static/motion.js +++ /dev/null @@ -1,888 +0,0 @@ -/** - * Created by jljsj on 15/6/24. - */ -$(function() { - var $S = function(typename) { - if (typename.indexOf("<") >= 0) { - var node = $(typename); - var node_m = $(document.createElementNS("http://www.w3.org/2000/svg", node[0].tagName.toLowerCase())); - //var node_b=typename.replace(/<[^\s]*|[>,/>]*/gi,""); - for (var i = 0; i < node[0].attributes.length; i++) { - node_m.attr(node[0].attributes[i].name, node[0].attributes[i].value); - } - node_m.html(node.html()); - return node_m - } - return $(document.createElementNS("http://www.w3.org/2000/svg", typename)) - }; - var SVG = (function() { - var s_node = function(s) { - if (s) { - this.node = $S(s); - } - }; - var n = s_node.prototype = { - _x: 0, - _y: 0, - _scaleX: 1, - _scaleY: 1, - _rotation: 0, - _skewX: 0, - _skewY: 0, - set id(id) { - this.attr("id", id) - }, - get id() { - return this.attr("id") - }, - set x(x) { - this.setTransform(x, this._y, this._scaleX, this._scaleY, this._rotation, this._skewX, this._skewY); - }, - get x() { - return this._x - }, - set y(y) { - this.setTransform(this._x, y, this._scaleX, this._scaleY, this._rotation, this._skewX, this._skewY); - }, - get y() { - return this._y - }, - set scale(x) { - this.setTransform(this._x, this._y, x, x, this._rotation, this._skewX, this._skewY); - }, - get scale() { - return this._scaleX == this._scaleY ? this._scaleX : { - scaleX: this._scaleX, - scaleY: this._scaleY - } - }, - set scaleX(x) { - this.setTransform(this._x, this._y, x, this._scaleY, this._rotation, this._skewX, this._skewY); - }, - get scaleX() { - return this._scaleX - }, - set scaleY(y) { - this.setTransform(this._x, this._y, this._scaleX, y, this._rotation, this._skewX, this._skewY); - }, - get scaleY() { - return this._scaleY - }, - set rotation(r) { - this.setTransform(this._x, this._y, this._scaleX, this._scaleY, r, this._skewX, this._skewY); - }, - get rotation() { - return this._rotation - }, - set skewX(x) { - this.setTransform(this._x, this._y, this._scaleX, this._scaleY, this._rotation, x, this._skewY); - }, - get skewX() { - return this._skewX - }, - set skewY(y) { - this.setTransform(this._x, this._y, this._scaleX, this._scaleY, this._rotation, this._skewX, y); - }, - get skewY() { - return this._skewY - }, - set alpha(a) { - this.attr("opacity", a.toString()) - }, - get alpha() { - return Number(this.attr("opacity")) >= 0 ? Number(this.attr("opacity")) : 1 - }, - set mouseEnabled(Bool) { - if (Bool) { - this.attr("cursor", "pointer") - } - }, - get mouseEnabled() { - return !!this.attr("cursor"); - } - }; - n.attr = function(o, d) { - return d ? this.node.attr(o, d) : this.node.attr(o) - }; - n.css = function(o, d) { - return d ? this.node.css(o, d) : this.node.css(o); - }; - n.children = function() { - return this.node.children() - }; - n.find = function(s) { - return this.node.find(s); - }; - n.addEventListener = function(event, func) { - return this.node.bind(event, func); - }; - n.bind = function(event, func) { - return this.node.bind(event, func); - }; - n.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY) { - var x = x || 0, - y = y || 0, - scaleX = scaleX >= 0 ? scaleX : 1, - scaleY = scaleY >= 0 ? scaleY : 1, - rotation = rotation || 0, - skewX = skewX || 0, - skewY = skewY || 0; - this._x = x, this._y = y, this._scaleX = scaleX, this._scaleY = scaleY, - this._rotation = rotation, this._skewX = skewX, this._skewY = skewY; - var DEG_TO_RAD = Math.PI / 180; - var Matrix = { - a: 1, - b: 0, - c: 0, - d: 1, - tx: 0, - ty: 0, - initialize: function(a, b, c, d, tx, ty) { - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - this.a = a * a1 + b * c1; - this.b = a * b1 + b * d1; - this.c = c * a1 + d * c1; - this.d = c * b1 + d * d1; - this.tx = tx * a1 + ty * c1 + this.tx; - this.ty = tx * b1 + ty * d1 + this.ty; - return this - } - }; - if (rotation % 360) { - var r = rotation * DEG_TO_RAD; - var cos = Math.cos(r); - var sin = Math.sin(r); - } else { - cos = 1; - sin = 0; - } - var t = Matrix; - if (skewX || skewY) { - skewX = skewX * DEG_TO_RAD || 0; - skewY = skewY * DEG_TO_RAD || 0; - t.initialize(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0); - t.initialize(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y); - } else { - t.initialize(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y); - } - var val = "matrix(" + t.a + "," + t.b + "," + t.c + "," + t.d + "," + t.tx + "," + t.ty + ")"; - this.attr("transform", val) - }; - n.addChild = function(elem) { - if (elem.node) this.node.append(elem.node); - else this.node.append(elem); - }; - n.clear = function(index) { - if (index >= 0) { - this.node.children().eq(index).remove(); - return - } - return this.node.children().remove(); - }; - n.setFilter = function(dom) { - this.attr("filter", "url(#" + dom.attr("id") + ")") - }; - n.setClipPath = function(dom) { - this.attr("clip-path", "url(#" + dom.attr("id") + ")"); - }; - var SectorStr = function(point, r, angle, startAngle, inr) { - angle = (Math.abs(angle) > 360) ? 360 : angle; - var flag = angle > 180 ? 1 : 0; - startAngle = startAngle * Math.PI / 180; - var str = ""; //"M"+point.x+" "+point.y; - str += " M" + (point.x + r * Math.cos(startAngle)) + " " + (point.y + r * Math.sin(startAngle)) - var angleA, cx, cy; - if (angle >= 360) { - angleA = angle / 2; - angleA = angleA * Math.PI / 180; - angleA = angleA + startAngle; - for (var i = 0; i < 2; i++) { - cx = point.x + r * Math.cos(angleA + i * Math.PI); - cy = point.y + r * Math.sin(angleA + i * Math.PI); - str += "A" + r + " " + r + " 0 1 1 " + cx + " " + cy; - } - str += " Z"; - return str; - } - angle = angle * Math.PI / 180; - angleA = angle + startAngle; - - cx = point.x + r * Math.cos(angleA); - cy = point.y + r * Math.sin(angleA); - str += "A" + r + " " + r + " 0 " + flag + " 1 " + cx + " " + cy; - if (angle < Math.PI * 2) { - str += " L" + point.x + " " + point.y - } - //画内圆； - if (inr) { - cx = point.x + inr * Math.cos(angleA); - cy = point.y + inr * Math.sin(angleA); - str += "L" + cx + " " + cy; - cx = point.x + inr * Math.cos(startAngle); - cy = point.y + inr * Math.sin(startAngle); - str += "A" + inr + " " + inr + " 0 " + flag + " 0 " + cx + " " + cy; - } - str += " Z"; - return str; - }; - var Sprite = function(s) { - if (s) { - this.node = $S(s); - } - }; - var sp = Sprite.prototype = new s_node(); - - sp.drawRect = function(obj) { - var t = new SVG.Sprite("rect"); - t.attr(obj).appendTo(this.node); - return t - }; - sp.drawCirc = function(obj) { - var t = new SVG.Sprite("circle"); - t.attr(obj).appendTo(this.node); - return t - }; - sp.drawPolygon = function(obj) { - var t = new SVG.Sprite("polygon"); - t.attr(obj).appendTo(this.node); - return t - }; - sp.drawPath = function(obj) { - var t = new SVG.Sprite("path"); - t.attr(obj).appendTo(this.node); - return t - }; - sp.drawEllipse = function(obj) { - var t = new SVG.Sprite("ellipse"); - t.attr(obj).appendTo(this.node); - return t - }; - sp.drawSector = function(point, r, angle, startAngle, color, line, lineColor) { - var str = SectorStr(point, r, angle, startAngle, 1); - var m = $S("path").attr("fill", color); - if (line) { - m.attr({ - stroke: lineColor, - "stroke-width": line - }); - } - m.attr("d", str).appendTo(this.node); - return m - }; - sp.drawAnnular = function(point, r, inr, angle, startAngle, color, line, lineColor) { - var str = SectorStr(point, r, angle, startAngle, inr); - var m = $S("path").attr("fill", color); - if (line) { - m.attr({ - stroke: lineColor, - "stroke-width": line - }); - } - m.attr("d", str).appendTo(this.node); - return m - }; - - function svg(id) { - this.initialize(id); - } - - var s = svg.prototype = new Sprite(); - s.initialize = function(id) { - this.node = $S("svg"); - this.attr({ - "width": "100%", - "height": "100%" - }); - this.defs = new Sprite("defs"); - this.addChild(this.defs); - if (id) - $(id).append(this.node); - else - return this; - }; - var filter = { - blur: function(x, y) { - if (x == null) { - x = 2; - } - var def = y == null ? x : [x, y]; - var t = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); - t.setAttribute("stdDeviation", def); - var filter = $S("filter"); - filter.attr({ - x: "-50%", - y: "-50%", - "width": "200%", - "height": "200%" - }); - filter.append(t); - Object.defineProperty(filter, "id", { - get: function() { - return filter.attr("id"); - }, - set: function(id) { - filter.attr("id", id); - } - }); - return filter - }, - goo: function(blur) { - var t = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); - t.setAttribute("in", "SourceGraphic"); - t.setAttribute("stdDeviation", blur); - t.setAttribute("result", "blur"); - var matrix = document.createElementNS("http://www.w3.org/2000/svg", "feColorMatrix"); - matrix.setAttribute("in", "blur"); - matrix.setAttribute("mode", "matrix"); - matrix.setAttribute("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -6"); - matrix.setAttribute("result", "goo"); - var com = document.createElementNS("http://www.w3.org/2000/svg", "feComposite"); - com.setAttribute("in", "SourceGraphic"); - com.setAttribute("in2", "goo"); - com.setAttribute("operator", "atop"); - var filter = $S("filter"); - filter.append([t, matrix, com]); - return filter - }, - mask: function(tb, obj) { - var t = $S(tb); - t.attr(obj); - var cp = $S("clipPath"); - cp.append(t); - Object.defineProperty(cp, "id", { - get: function() { - return cp.attr("id"); - }, - set: function(id) { - cp.attr("id", id); - } - }); - //var cp=document.createElementNS("http://www.w3.org/2000/svg","clipPath");//$S("clippath"); - //cp.appendChild(t[0]); - //Object.defineProperty(cp,"id",{ - // get:function (){ - // return cp.getAttribute("id"); - // }, - // set:function (id){ - // cp.setAttribute("id",id); - // } - //}); - return cp; - } - }; - var text = function(_text, _data) { - this.node = $S("text"); - this.node.text(_text); - if (_data) { - this.node.attr(_data); - } - }; - var t = text.prototype = new s_node; - t.tspan = function(_text, _data) { - this.node = $S("tspan"); - this.node.text(_text); - if (_data) { - this.node.attr(_data); - } - }; - var ts = t.tspan.prototype = new s_node(); - - svg.SectorStr = SectorStr; - svg.filter = filter; - svg.Sprite = Sprite; - svg.Text = text; - svg.Text.tSpan = t.tspan; - return svg - }()); - var Point = function(x, y) { - this.x = x; - this.y = y; - return this; - }; - var T = TweenMax; - var _playBox = function(svg, startFunc, pauseFunc) { - var playBox = new SVG.Sprite("g"); - playBox.mouseEnabled = true; - - playBox.drawRect({ - width: "100%", - height: "100%", - fill: "rgba(0,0,0,.35)" - }); - var playBtn = new SVG.Sprite("g"); - playBox.addChild(playBtn); - playBtn.drawCirc({ - r: 30, - fill: "rgba(255,255,255,1)" - }); - - var playPoints = { - play: "M-10 -15 L15 0 L-10 15 L-10 0Z M-10 -15 L15 0 L-10 15 L-10 0Z", - pause: "M-12 -15 L-3 -15 L-3 15 L-12 15Z M3 -15 L12 -15 L12 15 L3 15Z" - }; - var shanjiao = playBtn.drawPath({ - d: playPoints.play, - fill: "#999" - }); - var bBool = false; - var animate_p3 = function(p, _arr) { - var a_arr = []; - for (var i = 0; i < _arr.length; i++) { - a_arr.push(_arr[i].x, _arr[i].y) - } - for (var i = 0; i < a_arr.length; i++) { - if (i == 0 || i == 8) { - a_arr[i] = "M" + a_arr[i]; - } else if (i == 2 || i == 4 || i == 6 || i == 12 || i == 14) { - a_arr[i] = "L" + a_arr[i]; - } else if (i == 7 || i == 15) { - a_arr[i] = a_arr[i] + "Z"; - } - } - p.attr({ - d: a_arr.join().replace(/,/g, " ") - }); - - }; - - function twennBtn(p, arr, c_arr) { - for (var i = 0; i < arr.length; i++) { - T.killTweensOf(arr[i]); - T.to(arr[i], .6, { - x: c_arr[i].x, - y: c_arr[i].y, - delay: Math.random() * .2, - onUpdate: animate_p3, - onUpdateParams: [p, arr], - ease: Elastic.easeOut - }) - } - } - - playBox.addEventListener("click", function(e) { - var _a = playPoints.play.replace(/[MLZ]/g, "").split(" "); - var _b = playPoints.pause.replace(/[MLZ]/g, "").split(" "); - var _arr = [], - _barr = []; - for (var i = 0; i < _a.length; i += 2) { - var a = {}, - b = {}; - a.x = _a[i]; - a.y = _a[i + 1]; - b.x = _b[i]; - b.y = _b[i + 1]; - _arr.push(a); - _barr.push(b); - } - if (!bBool) { - twennBtn(shanjiao, _arr, _barr); - T.to(playBox, .5, { - delay: .3, - alpha: 0, - onComplete: startFunc - }); - bBool = true; - } else { - twennBtn(shanjiao, _barr, _arr); - T.to(playBox, .5, { - alpha: 1, - onStart: pauseFunc - }); - bBool = false - } - }); - - function resize() { - playBtn.x = svg.node.width() / 2; - playBtn.y = svg.node.height() / 2; - } - - resize(); - $(window).bind("resize", resize); - return playBox; - }; - var newMotion = function(id, obj) { - if (!id || !obj) { - throw new Error("数据错误"); - } - var self = this; - self.box = $(id); - self.box.css({ - "width": 800 - }); - if (self.box.width() < 500) { - self.box.css("height", 600); - } else { - self.box.css("height", 300) - } - self.data = obj; - self.svg = new SVG(id); - self.svg.css("background-color", "#f3f3f3"); - self.w = self.box.width(); - self.h = self.box.height(); - self.tweenArr = []; - self.t_time = .5; - self.d_time = .5; - self.tweenAllTime = self.t_time * 2 + self.d_time; - - self.addElement(); - - function resize(e) { - self.windowResize(self) - } - - resize(); - $(window).bind("resize", resize); - }; - var nm = newMotion.prototype = {}; - nm.windowResize = function(self) { - var s = self.box.parent().width() / 800 > 1 ? 1 : self.box.parent().width() / 800; - self.box.css({ - "transform": "scale(" + s + ")", - "transform-origin": "0 0" - }); - }; - nm.addElement = function() { - var self = this; - //绘制坐标系统； - self.coords = new SVG.Sprite("g"); - self.svg.addChild(self.coords); - var coordsStr = "M80 50 L80 250 L480 250"; - self.coords.drawPath({ - d: coordsStr, - fill: "none", - "stroke-width": 2, - stroke: "#d9d9d9" - }); - var timerTxt = new SVG.Text("timer", { - fill: "#999" - }); - self.coords.addChild(timerTxt); - timerTxt.x = 240; - timerTxt.y = 275; - var yaxis = new SVG.Text("Y-axis", { - fill: "#999" - }); - yaxis.width = 20; - yaxis.x = 20; - yaxis.y = 150; - self.coords.addChild(yaxis); - //动画示例元素； - self.tweenMc = new SVG.Sprite("g"); - if (self.data.mask) { - var mask = new SVG.filter.mask("rect", { - width: 260, - height: 200 - }); - mask.id = "mask"; - self.svg.defs.addChild(mask); - self.tweenMc.setClipPath(mask); - } - - self.svg.addChild(self.tweenMc); - self.tweenMc.x = 500; - self.tweenMc.y = 50; - //坐标线； - /** - * 以三次贝塞尔曲线 - * 时间长4秒 - * －分三段－ - * linear - * .5－－.5－－.5 - */ - var c_w = 340, - c_h = 180, - c_x = 100, - c_y = 250, - ct_y = 70, - t_w = c_w * (self.t_time / self.tweenAllTime), - tt_w = t_w + c_x, - d_w = (self.t_time + self.d_time) / self.tweenAllTime; - - for (var i = 0; i < self.data.lineData.length; i++) { - var tb = new SVG.Sprite("g"); - self.coords.addChild(tb); - var str = "M80 250"; - var open = self.data.lineData[i].open || self.data.lineData[i].openEaseName || "Linear"; - /*if (open.length !== 4 && open.length !== 0 && typeof open !== 'string') { - throw new Error(open + "数据错误"); - }*/ - if (typeof open !== 'string' && open.length !== 0 && open.length === 4) { - str += "L100 250" + "C" + (open[0] * t_w + c_x) + "," + (c_y - open[1] * c_h) + " " + (open[2] * t_w + c_x) + "," + (c_y - open[3] * c_h) + " " + tt_w + "," + ct_y - } else if (typeof open === 'string') { - var _ease = EaseLookup.find(open); - if (_ease) { - str += 'L100 250'; - for (var ii = 0; ii < t_w; ii++) { - var at = _ease.getRatio(ii / t_w); //延用grennsock的缓运。。 - //console.log(1-Tween.Bounce.easeOut(ii,100,-100,t_w)/100,at); - str += 'L' + (c_x + ii) + "," + (c_y - c_h * at); - } - } else { - if (open !== 'null') { - str += "L100 250" + "L" + tt_w + "," + ct_y; - } else { - str += "M100 250"; - } - } - } - tb.drawPath({ - d: str, - fill: "none", - "stroke-width": 2, - stroke: self.data.lineData[i].stroke || "#999", - "stroke-dasharray": "0 100%" - }); - - var e_x = c_w * d_w + c_x; - str = "M" + tt_w + "," + ct_y + "L" + e_x + "," + ct_y; - tb.drawPath({ - d: str, - fill: "none", - "stroke-width": 2, - stroke: self.data.lineData[i].stroke || "#999", - "stroke-dasharray": "0 100%" - }); - var end = self.data.lineData[i].end || self.data.lineData[i].endEaseName || "Linear"; - - str = "M" + e_x + "," + ct_y; - if (typeof open !== 'string' && end.length !== 0 && end.length === 4) { - str += "C" + (end[0] * t_w + e_x) + "," + (end[1] * c_h + ct_y) + " " + (end[2] * t_w + e_x) + "," + (end[3] * c_h + ct_y) + " " + (c_w + c_x) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y - } else if (typeof end === 'string') { - var e_ease = EaseLookup.find(end); - if (e_ease) { - for (var eii = 0; eii < t_w; eii++) { - var eat = e_ease.getRatio(eii / t_w); - str += 'L' + (e_x + eii) + "," + (c_h * eat + ct_y); - } - str += "L" + (c_w + c_x + 20) + "," + c_y; - } else { - //str += "L" + (c_w + c_x ) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y; - if (end !== "null") { - str += "L" + (c_w + c_x) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y; - } else { - str += "L" + e_x + "," + ct_y; - } - } - } - tb.drawPath({ - d: str, - fill: "none", - "stroke-width": 2, - stroke: self.data.lineData[i].stroke || "#999", - "stroke-dasharray": "0 100%" - }); - - //元素插入盒子里； - var circ = new SVG.Sprite("circle"); - circ.attr({ - "r": 10, - fill: "none", - "stroke-width": 6, - stroke: self.data.lineData[i].stroke || "#999" - }); - self.tweenMc.addChild(circ); - if (self.data.exposure == "left" || !self.data.exposure) { - circ.x = self.data.mask ? -20 : 20; - circ.y = 50 + i * 110; //self.data.mask?240:180; - } else if (self.data.exposure == "top") { - circ.x = 100 + i * 100; //self.data.mask?-20:20; - circ.y = self.data.mask ? -20 : 20; - } else if (self.data.exposure == "right") { - circ.x = self.data.mask ? 280 : 220; - circ.y = 50 + i * 110; //self.data.mask?240:180; - } else { - circ.x = 100 + i * 100; //self.data.mask?-20:20; - circ.y = self.data.mask ? 240 : 180; - } - - } - - //建播放按钮； - self.playBox = _playBox(self.svg, function() { - self.start(self); - }, function() { - self.pause(self); - }); - self.svg.addChild(self.playBox); - }; - nm.pause = function(self) { - for (var i = 0; i < self.tweenArr.length; i++) { - var tl = self.tweenArr[i]; - tl.pause(); - } - }; - nm.resume = function(self) { - for (var i = 0; i < self.tweenArr.length; i++) { - var tl = self.tweenArr[i]; - tl.resume(); - } - }; - nm.start = function(self) { - if (self.tweenArr.length) { - self.resume(self); - return - } - var lineBox = self.coords.find("g"); - for (var i = 0; i < lineBox.length; i++) { - var m = lineBox.eq(i); - var tl = new TimelineMax({ - repeat: -1, - repeatDelay: 1 - }); - self.tweenArr.push(tl); - for (var ii = 0; ii < m.find("path").length; ii++) { - var p = m.find("path").eq(ii); - var lineLength = p[0].getTotalLength(); - var time = 1, - _ease = Power2.easeInOut; - - if (ii == 0) { - time = self.t_time; - //_ease = EaseLookup.find(self.data.lineData[i].openEaseName); - } else if (ii == 1) { - time = self.d_time; - //_ease = Power0.easeNone; - } else { - time = self.t_time; - //_ease = EaseLookup.find(self.data.lineData[i].endEaseName); - } - /*if (!self.data.lineData[i].open.length) { - _ease = Linear.easeNone; - }*/ - tl.add(T.to(p, time, { - "stroke-dasharray": lineLength + " 100%", - ease: Linear.easeNone - })); - //tl.to(p,time,{"stroke-dasharray":"100% 100%",ease: Power2.easeInOut}) - } - //circ动画 - var ctl = new TimelineMax({ - repeat: -1, - repeatDelay: 1 - }); - var ciric = self.tweenMc.children().eq(i); - - var oease = EaseLookup.find(self.data.lineData[i].openEaseName) || Linear.easeNone, - eease = EaseLookup.find(self.data.lineData[i].endEaseName) || Linear.easeNone; - //console.log(self.data.lineData[i].open,oease,eease,i); - //if(self.data.lineData[i].openEaseName=="Bounce.easeOut") - if (self.data.lineData[i].openEaseName && self.data.lineData[i].openEaseName.indexOf("Bounce") >= 0) { - if (self.data.lineData[i].openEaseName.indexOf("InOut") >= 0) { - oease = Bounce.easeInOut - } else if (self.data.lineData[i].openEaseName.indexOf("In") >= 0) { - oease = Bounce.easeIn - } else { - oease = Bounce.easeOut - } - } - var cx = {}, - _x = {}; - if (self.data.exposure == "left" || !self.data.exposure) { - _x = { - x: 240 - }; - cx = { - x: self.data.mask ? -20 : 20 - }; - } else if (self.data.exposure == "top") { - _x = { - y: 180 - }; - cx = { - y: self.data.mask ? -20 : 20 - }; - } else if (self.data.exposure == "right") { - _x = { - x: 20 - }; - cx = { - x: self.data.mask ? 280 : 220 - }; - } else { - _x = { - y: 20 - }; - cx = { - y: self.data.mask ? 240 : 180 - }; - } - if (self.data.lineData[i].openEaseName === "null" && self.data.lineData[i].endEaseName === "null") { - var t = cx; - cx = {}; - cx.startAt = t; - cx.delay = self.d_time; - var tt = _x; - _x = {}; - _x.startAt = tt; - } else if (self.data.lineData[i].openEaseName === "null") { - var tt = _x; - _x = {}; - _x.startAt = tt; - cx.ease = eease, cx.delay = self.d_time; - } else if (self.data.lineData[i].endEaseName === "null") { - var t = cx; - cx = {}; - cx.startAt = t; - cx.delay = self.d_time; - _x.ease = oease; - } else { - _x.ease = oease, cx.ease = eease, cx.delay = self.d_time; - } - ctl.to(ciric, self.t_time, _x).to(ciric, self.t_time, cx); - self.tweenArr.push(ctl); - } - }; - window.Motion = newMotion; - - var motionVideo = { - video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'], - videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'], - init: function() { - var self = this; - self.videoBox = $(".video-player"); - $('').appendTo(self.videoBox); - for (var i = 0; i < self.videoBox.length; i++) { - var svg = new SVG(); - self.videoBox.eq(i).append(svg.node); - var video = self.videoBox.eq(i).find("video"); - if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) { - $('').appendTo(video); - } else { - $('').appendTo(video); - } - video.css({ - "width": "100%" - }); - video.append(svg); - svg.css({ - "position": "absolute", - "top": 0, - "left": 0 - }); - var playBox = _playBox(svg); - svg.addChild(playBox); - playBox.addEventListener("click", function(e) { - var m = $(this), - video = m.parent().parent().find("video"); - var bool = m.attr("play"); - if (bool) { - this.setTimeout = null; - video[0].pause(); - m.removeAttr("play") - } else { - this.setTimeout = setTimeout(function() { - video[0].play(); - }, 500); - - m.attr("play", "true") - } - }) - } - } - }; - window.Motion.motionVideo = motionVideo; -}); diff --git a/site/static/motionDemo.css b/site/static/motionDemo.css deleted file mode 100644 index 0d2a5f4369..0000000000 --- a/site/static/motionDemo.css +++ /dev/null @@ -1,190 +0,0 @@ -.ant-btn{ - position: relative; - overflow: hidden; -} -.ant-btn-domebox{ - background-color: #f3f3f3; - width:100%; - text-align:center; - overflow:hidden; - padding: 20px; - min-height: 236px; -} -.ant-anim-box{ - width: 800px; - height: 300px; - transform: scale(1); - transform-origin: 0px 0px 0px; - background-color: #efefef; - position: relative; -} -.ant-btn{ - margin:10px auto; -} -.ant-btn-lq{ - display:block; - position:absolute; - opacity:.2; - transform:scale(0); - -webkit-transition:scale(0); - transition: transform .4s cubic-bezier(0.455, 0.03, 0.515, 0.955); - -webkit-transition: -webkit-transform .4s cubic-bezier(0.455, 0.03, 0.515, 0.955); -} -.anticon-loading{ - position:absolute; - left:50%; - margin-left:-7px; - opacity:0; - transform: scale(0); - -webkit-transform:scale(0); -} -.ant-btn-load,.ant-btn-load span,.ant-btn-load text{ - transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955); - -webkit-transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955); -} -.anticon-loading:before { - font-size:18px -} -.ant-btn-reload{ - display: block; -} -.ant-btn-reload text{ - display: block; - position: absolute; - top:100%; - left:50%; - margin-left: -12px; -} -.ant-btn-reload span,.ant-btn-reload text{ - transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955); - -webkit-transition: all .4s cubic-bezier(0.455, 0.03, 0.515, 0.955); -} -.anticon-reload{ - font-size: 16px !important; -} -.ant-btn-reload:hover text{ - top:50%; - margin-top: -9px; -} -.ant-btn-reload:hover span{ - transform: translateY(-22px); -} - -.ant-anim-dometip{ - position: absolute; - background: #fff; - box-shadow: 2px 2px 5px rgba(0,0,0,.15); - /*transform: scale(0); - -webkit-transform: scale(0);*/ -} -.ant-anim-dometip ul{ - padding: 20px; -} -.ant-anim-topArrow:before{ - content: " "; - display: block; - position: absolute; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-bottom: 10px solid white; - right: 5px; - top:-10px -} -.ant-dropdown-wrap{ - text-align: left; -} -.ant-dropdown-wrap .ant-btn{ - margin-bottom: auto; -} -.ant-dropdown-wrap .ant-dropdown{ - left:auto; - top:auto; - display: none; - min-width: 0; - overflow: hidden; -} - -.video-player{ - position: relative; - max-width: 800px; -} - -/******动画名称******/ - -.scale-open{ - display: block !important; - animation: ToScale .4s cubic-bezier(0.08, 0.82, 0.17, 1); - -webkit-animation: ToScale .4s cubic-bezier(0.08, 0.82, 0.17, 1); -} -.scale-close{ - display: block !important; - animation: FromScale .4s cubic-bezier(0.6, 0.04, 0.98, 0.34); - -webkit-animation: FromScale .4s cubic-bezier(0.6, 0.04, 0.98, 0.34); -} -.scale-origin-top{ - transform-origin: top; -} -.scale-origin-left{ - transform-origin: left; -} -.scale-origin-bottom{ - transform-origin: bottom; -} -.scale-origin-right{ - transform-origin: right; -} -.scale-origin-iconTopRight{ - transform-origin: calc(100% - 10px) -10px; -} -.margin-top-open{ - display: block !important; - animation: ToMaginTop .4s cubic-bezier(0.08, 0.82, 0.17, 1); - -webkit-animation: ToMaginTop .4s cubic-bezier(0.08, 0.82, 0.17, 1); -} -.margin-top-close{ - display: block !important; - animation: FromMaginTop .4s cubic-bezier(0.6, 0.04, 0.98, 0.34); - -webkit-animation: FromMaginTop .4s cubic-bezier(0.6, 0.04, 0.98, 0.34); -} - -/*********动画***********/ -@keyframes ToScale { - 0%{ - opacity: 0; - transform: scale(0); - } - 100%{ - opacity: 1; - transform: scale(1); - } -} -@keyframes FromScale { - 0%{ - opacity: 1; - transform: scale(1); - } - 100%{ - opacity: 0; - transform: scale(0); - } -} -@keyframes ToMaginTop { - 0%{ - opacity: 0; - margin-top: -100%; - } - 100%{ - opacity: 1; - margin-top: 0%; - } -} -@keyframes FromMaginTop { - 0%{ - opacity: 1; - margin-top: 0%; - } - 100%{ - opacity: 0; - margin-top: -100%; - } -} diff --git a/site/static/motionDemoLoad.js b/site/static/motionDemoLoad.js deleted file mode 100644 index 79bcc1e4fc..0000000000 --- a/site/static/motionDemoLoad.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Created by jljsj on 15/9/16. - */ -var TweenMax = TweenMax, Motion = Motion; -$(function () { - var needData = [ - "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js - "/static/motion.js" - ]; - var loadFunc = { - num: 0, - numSub: function (_callback) { - this.num++; - if (this.num >= needData.length) { - if (typeof _callback === 'function') { - _callback(); - } - } else { - this.getLoad(_callback); - } - }, - getLoad: function (_callback) { - var self = this, str = needData[self.num]; - if (str.indexOf(".js") >= 0) { - if ((str.indexOf('nGFyCGHAblMWsYE') >= 0 && TweenMax) || (str.indexOf('motion.js') >= 0 && Motion)) { - self.numSub(_callback) - } else { - $.getScript(str.indexOf('http') === 0 ? str : (rootUrl + str), function() { - self.numSub(_callback) - }) - } - } - } - }; - var callback = function () { - Motion.motionVideo.init() - }, - scripts = document.getElementsByTagName("script"), - urlData = []; - for (var i = 0; i < scripts.length; i++) { - var sc = scripts[i].src, str = sc.split('?')[1]; - if (sc.indexOf('motionDemoLoad.js') >= 0 && str) { - var d = str.split('&'); - urlData = d.map(function (s) { - return {name: s.split('=')[0], param: s.split('=')[1]}; - }); - } - } - urlData.map(function (m) { - if (m.param === 'easing') { - callback = function () { - new Motion("#J-Linear", { - lineData: [{stroke: "#f2666c"}, { - stroke: "#71B5DE", - openEaseName: "easeInOutQuad", - endEaseName: "easeInOutQuad" - }], mask: false - }); - new Motion("#J-Symmetric", { - lineData: [ - {openEaseName: "easeInOutQuad", endEaseName: "null", stroke: "#f2666c"}, - {stroke: "#71B5DE", openEaseName: "easeInOutCubic", endEaseName: "easeInOutCubic"}], - mask: false, exposure: "top" - }); - new Motion("#J-Entry", { - lineData: [ - {openEaseName: "easeOutQuad", endEaseName: "easeOutQuad", stroke: "#f2666c"}, - {stroke: "#71B5DE", openEaseName: "easeOutCubic", endEaseName: "easeInCubic"}], - mask: true, exposure: "bottom" - }); - new Motion("#J-Back", { - lineData: [ - {openEaseName: "easeOutBounce", endEaseName: "easeOutElastic", stroke: "#70f266"}, - {stroke: "#71B5DE", openEaseName: "easeOutBack", endEaseName: "easeInOutBack"}], - mask: false, exposure: "top" - }); - } - } - }); - loadFunc.getLoad(callback); -}); diff --git a/site/templates/aside.html b/site/templates/aside.html deleted file mode 100644 index 9b7a8d325d..0000000000 --- a/site/templates/aside.html +++ /dev/null @@ -1,39 +0,0 @@ -{%- set categories = resource.pages|get_categories(post) %} - diff --git a/site/templates/component.html b/site/templates/component.html deleted file mode 100644 index 4d068c72dc..0000000000 --- a/site/templates/component.html +++ /dev/null @@ -1,20 +0,0 @@ -{% extends "page.html" %} - -{% block content %} -
    -
    -

    - {{ post.title }} {{ post.meta.chinese }} - {%- if post.meta.API %} - - - API 使用说明 - - {%- endif %} -

    - {{ post.html|add_anchor }} -
    - {%- include "demos.html" %} -
    -
    -{% endblock %} diff --git a/site/templates/footer.html b/site/templates/footer.html deleted file mode 100644 index ec983ab97f..0000000000 --- a/site/templates/footer.html +++ /dev/null @@ -1,24 +0,0 @@ - diff --git a/site/templates/iframe.html b/site/templates/iframe.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/site/templates/page.html b/site/templates/page.html deleted file mode 100644 index e2ccae706b..0000000000 --- a/site/templates/page.html +++ /dev/null @@ -1,25 +0,0 @@ -{% extends "layout.html" %} - -{% block title %} -{%- if post.title !== config.site.name %} -{{post.title}} {{ post.meta.chinese }} - {{config.site.name}} -{%- else %} -{{ config.site.name }} - {{ config.site.description }} -{%- endif %} -{% endblock %} - -{% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %} - -{% block aside %} -{%- include "aside.html" %} -{% endblock %} - -{% block content %} -
    -
    -

    {{ post.title }} {{ post.meta.chinese }}

    -
    {{ post.toc }}
    - {{ post.html|add_anchor }} -
    -
    -{% endblock %} diff --git a/site/theme.js b/site/theme.js deleted file mode 100644 index 4bc9cd949b..0000000000 --- a/site/theme.js +++ /dev/null @@ -1,208 +0,0 @@ -var _ = require('lodash'); - -module.exports = function(nico) { - var exports = {}; - var Categories = {}; - var Posts = []; - - function getAllPosts(pages) { - if (Posts && Posts.length > 0) { - return Posts; - } - Object.keys(pages).map(function(key) { - Posts.push(pages[key]); - }); - return Posts; - } - - function getRootDirectory(directory) { - var rootDirectory; - var directoryArray = directory.split('/'); - if (directory.indexOf('docs/') === 0) { - rootDirectory = directoryArray[0] + '/' + directoryArray[1]; - } else { - rootDirectory = directoryArray[0]; - } - return rootDirectory; - } - - exports.reader = function(post) { - var filepath = post.meta.filepath.toLowerCase(); - if (filepath.indexOf('components') === 0) { - post.template = post.meta.template = 'component'; - } else { - post.template = post.meta.template = (post.meta.template || 'page'); - } - if (filepath === 'readme.md') { - post.filename = post.meta.filename = 'index'; - post.template = post.meta.template = 'home'; - } - if (filepath.indexOf('/demo/') > 0) { - post.template = post.meta.template = 'code'; - } - return post; - }; - - exports.filters = { - find_category: function(posts, cats) { - if (typeof cats === 'string') { - cats = [cats]; - } - var ret = []; - getAllPosts(posts).forEach(function(post) { - if (cats.indexOf(post.meta.category) >= 0) { - ret.push(post); - } - }); - ret = ret.sort(function(a, b) { - a = a.meta.order || 10; - b = b.meta.order || 10; - return parseInt(a, 10) - parseInt(b, 10); - }); - return ret; - }, - get_categories: function(posts, post) { - var rootDirectory = getRootDirectory(post.directory); - if (!rootDirectory && post.filename.indexOf('CHANGELOG') < 0) { - return; - } - var directories = [rootDirectory]; - // docs 和 components 放在同一页 - if (rootDirectory === 'docs/react' || rootDirectory === 'components' || - post.filename.indexOf('CHANGELOG') >= 0) { - directories = ['docs/react', 'components']; - } - var cacheKey = directories.join('-'); - var categories; - if (Categories[cacheKey]) { - categories = Categories[cacheKey]; - } else { - categories = {}; - _.uniq(getAllPosts(posts).forEach(function(item) { - var itemDirectory = getRootDirectory(item.directory); - var cat = item.meta.category; - if (!cat) { - return; - } - if (directories.indexOf(itemDirectory) >= 0 || - item.filename.indexOf('CHANGELOG') >= 0) { - item.filename = item.filename.toLowerCase(); - categories[cat] = categories[cat] || []; - categories[cat].push(item); - } - })); - categories = Object.keys(categories).map(function(cat) { - return { - name: cat, - pages: categories[cat] - }; - }); - // React 的分类排序 - categories = categories.sort(function(a, b) { - var cats = ['React', 'Components']; - a = cats.indexOf(a.name); - b = cats.indexOf(b.name); - return a - b; - }); - // 设计的分类排序 - categories = categories.sort(function(a, b) { - var cats = ['风格', '动画', '模式', '资源']; - a = cats.indexOf(a.name); - b = cats.indexOf(b.name); - return a - b; - }); - } - Categories[cacheKey] = categories; - return categories; - }, - find_demo_in_component: function(pages, directory) { - var ret = []; - getAllPosts(pages).forEach(function(post) { - if (post.filepath.indexOf(directory + '/demo/') === 0 && !post.meta.hidden) { - ret.push(post); - } - }); - var hasOnly; - ret.forEach(function(post) { - if (post.meta.only) { - hasOnly = true; - } - }); - if (hasOnly) { - ret = ret.filter(function(post) { - return post.meta.only; - }); - } - ret = ret.sort(function(a, b) { - if (/index$/i.test(a.filename)) { - a.meta.order = 1; - } - if (/index$/i.test(b.filename)) { - b.meta.order = 1; - } - a = a.meta.order || 100; - b = b.meta.order || 100; - return parseInt(a, 10) - parseInt(b, 10); - }); - return ret; - }, - // For Debug - console: function(target) { - console.log(target); - }, - parsePost: function(filepath) { - return nico.sdk.post.read(filepath); - }, - odd: function(items) { - return items.filter(function(item, i) { - return (i+1)%2 === 1; - }); - }, - even: function(items) { - return items.filter(function(item, i) { - return (i+1)%2 === 0; - }); - }, - rootDirectoryIn: function(directory, rootDirectories) { - return rootDirectories.indexOf(getRootDirectory(directory)) >= 0; - }, - removeCodeBoxIdPrefix: function(id) { - return id.split('-').slice(2).join('-'); - }, - splitComponentsByType: function(pages, category) { - if (category !== 'Components') { - return pages.sort(function(a, b) { - a = a.meta.order || 100; - b = b.meta.order || 100; - return parseInt(a, 10) - parseInt(b, 10); - }); - } - // 加入组件的类别分隔符 - var tempResult = _.sortBy(pages, function(p) { - var types = ['基本', '表单', '展示', '导航', '其他']; - return types.indexOf(p.meta.type || '其他'); - }); - var lastType, result = []; - tempResult.forEach(function(p) { - if (p.meta.type !== lastType) { - result.push({ - name: p.meta.type || '其他', - divider: true - }); - lastType = p.meta.type; - } - result.push(p); - }); - return result; - }, - add_anchor: function(content) { - for (var i = 1; i <= 6; i++) { - var reg = new RegExp('(.*?)(<\/h' + i + '>)', 'g'); - content = content.replace(reg, '$1# $3'); - } - return content; - } - }; - - return exports; -}; From fc86a4164d71db073ccbc7d95660e34187ae371c Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 29 Feb 2016 14:27:11 +0800 Subject: [PATCH 0060/1555] chore: add build scripts --- package.json | 5 ++- scripts/build-components-list.js | 20 +++++++++ scripts/build-demos-list.js | 70 +++++++++++++++++++++++++++++ scripts/build-docs-list.js | 26 +++++++++++ scripts/build-website.js | 77 ++++++++++++++++++++++++++++++++ scripts/devil.js | 31 +++++++++++++ scripts/utils.js | 47 +++++++++++++++++++ 7 files changed, 275 insertions(+), 1 deletion(-) create mode 100644 scripts/build-components-list.js create mode 100644 scripts/build-demos-list.js create mode 100644 scripts/build-docs-list.js create mode 100755 scripts/build-website.js create mode 100644 scripts/devil.js create mode 100644 scripts/utils.js diff --git a/package.json b/package.json index 95bb031a44..90e1c84850 100644 --- a/package.json +++ b/package.json @@ -105,10 +105,12 @@ "less-loader": "^2.2.0", "lesshint-antd": "^1.2.1", "lodash": "^4.1.0", + "mark-twain": "^0.2.0-beta", "nico-jsx": "~0.8.2", "postcss-loader": "^0.8.0", "pre-commit": "1.x", "querystring": "^0.2.0", + "ramda": "^0.19.1", "rc-scroll-anim": "^0.1.7", "rc-tween-one": "^0.1.8", "react": "0.14.x", @@ -117,6 +119,7 @@ "react-dom": "0.14.x", "react-router": "^2.0.0", "react-stateless-wrapper": "~1.0.2", + "recast": "^0.11.2", "reqwest": "~2.0.5", "semver": "^5.1.0", "values.js": "^1.0.3", @@ -127,7 +130,7 @@ }, "scripts": { "babel": "babel components index.js --out-dir lib", - "start": "dora -p 8001 --plugins atool-build?config=webpack.website.config.js", + "start": "npm run clean && ./scripts/build-website.js && dora -p 8001 --plugins atool-build?config=webpack.website.config.js", "clean": "rm -rf _site dist", "site": "npm run clean && webpack --config webpack.deploy.config.js && webpack --config webpack.antd.config.js && NODE_ENV=PRODUCTION nico build", "deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy", diff --git a/scripts/build-components-list.js b/scripts/build-components-list.js new file mode 100644 index 0000000000..47e9c3d96b --- /dev/null +++ b/scripts/build-components-list.js @@ -0,0 +1,20 @@ +'use strict'; + +const fs = require('fs'); +const R = require('ramda'); +const utils = require('./utils'); + +module.exports = function buildComponentsList(indexes, outputPath) { + const componentMetas = R.map((fileName) => { + const fileContent = utils.parseFileContent(fileName); + return utils.parseMeta(fileContent); + }, indexes); + + const groupByType = R.groupBy(R.compose(R.defaultTo('其它'), R.prop('type'))); + const componentsList = groupByType(componentMetas); + + const content = 'module.exports = ' + + JSON.stringify(componentsList, null, 2) + ';'; + + fs.writeFile(outputPath, content); +}; diff --git a/scripts/build-demos-list.js b/scripts/build-demos-list.js new file mode 100644 index 0000000000..d62b348f0a --- /dev/null +++ b/scripts/build-demos-list.js @@ -0,0 +1,70 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const R = require('ramda'); +const devil = require('./devil'); // TODO: extract as a module? +const utils = require('./utils'); + +const stringify = function stringify(data, d) { + const depth = d || 1; + const indent = ' '.repeat(depth); + let output = ''; + if (Array.isArray(data)) { + output += '[\n'; + data.forEach((item) => output += indent + stringify(item, depth + 1) + ',\n'); + output += indent + ']'; + } else if (typeof data === 'object') { + output += '{\n'; + for (const key of Object.keys(data)) { + output += indent + JSON.stringify(key) + ': ' + stringify(data[key], depth + 1) + ',\n'; + } + output += indent + '}'; + } else if (typeof data === 'function') { + output += data.toString(); + } else if (typeof data === 'string') { + output += JSON.stringify(data); + } else { + output += data; + } + return output + .replace(/var _antd = require\(['"]antd['"]\);/, '') + .replace(/require\('antd\/lib/, 'require(\'../../components'); // TODO +}; + +const isIntro = function isIntro(element) { + const type = element.type; + return type !== 'h1' && type !== 'ul' && type !== 'code' && type !== 'hr'; +}; +const isCode = R.whereEq({ type: 'code', props: { lang: 'jsx' } }); +const isStyle = R.whereEq({ type: 'code', props: { lang: 'css' } }); +const getChildren = R.compose(R.prop('children'), R.defaultTo({})); +const sortByOrder = R.sortBy(R.prop('order')); +module.exports = function buildDemosList(demoList, outputPath) { + const demos = R.map((fileName) => { + const data = utils.parseFileContent(fileName); + const parts = fileName.split(path.sep); + + const demo = {}; + demo.order = parseInt(utils.parseMeta(data).order); + demo.parent = parts[parts.indexOf('components') + 1]; + demo.id = 'components-' + demo.parent + '-demo-' + path.basename(fileName, '.md'); + demo.title = data[0].children; + demo.intro = data.filter(isIntro); + demo.code = getChildren(data.find(isCode)); + demo.preview = devil(demo.code); + demo.style = getChildren(data.find(isStyle)); + + return demo; + }, demoList); + + const demosList = R.groupBy((demo) => demo.parent.replace('-', ''), demos); + const sortedDemosList = R.mapObjIndexed(sortByOrder, demosList); + const content = 'const React = require(\'react\');\n' + + 'const ReactDOM = require(\'react-dom\');\n' + + 'const _antd = require(\'../../\');\n' + + 'module.exports = ' + + stringify(sortedDemosList, null, 2) + ';'; + + fs.writeFile(outputPath, content); +}; diff --git a/scripts/build-docs-list.js b/scripts/build-docs-list.js new file mode 100644 index 0000000000..31a4fb9cd1 --- /dev/null +++ b/scripts/build-docs-list.js @@ -0,0 +1,26 @@ +'use strict'; + +const fs = require('fs'); +const R = require('ramda'); +const utils = require('./utils'); + +const isMeta = R.complement(R.propEq('type', 'hr')); +const isDescription = R.complement(R.propEq('children', 'API')); +module.exports = function buildDocsList(indexes, outputPath) { + const indexesList = R.map((fileName) => { + const fileContent = utils.parseFileContent(fileName); + const meta = utils.parseMeta(fileContent); + const description = R.tail(R.dropWhile( + isMeta, + R.takeWhile(isDescription, fileContent) + )); + const api = R.dropWhile(isDescription, fileContent); + + return { meta, description, api }; + }, indexes); + + const content = 'module.exports = ' + + JSON.stringify(indexesList, null, 2) + ';'; + + fs.writeFile(outputPath, content); +}; diff --git a/scripts/build-website.js b/scripts/build-website.js new file mode 100755 index 0000000000..008474979c --- /dev/null +++ b/scripts/build-website.js @@ -0,0 +1,77 @@ +#! /usr/bin/env node + +'use strict'; + +const fs = require('fs'); +const R = require('ramda'); +const utils = require('./utils'); +const buildComponentsList = require('./build-components-list'); +const buildDocsList = require('./build-docs-list'); +const buildDemosList = require('./build-demos-list'); + +// Ensure that data directory exist. +try { + fs.statSync('./_site'); +} catch (e) { + fs.mkdir('./_site'); +} +try { + fs.statSync('./_site/data'); +} catch (e) { + fs.mkdir('./_site/data'); +} + +// TODO: configurable +const componentPath = './components'; +const mds = utils.findMDFile(componentPath); + +const indexes = R.filter(utils.isIndex, mds); +buildComponentsList(indexes, './_site/data/components-list.js'); +buildDocsList(indexes, './_site/data/component-docs-list.js'); + +const demos = R.filter(utils.isDemo, mds); +buildDemosList(demos, './_site/data/demos-list.js'); + +const changelogPath = './CHANGELOG.md'; +buildDocsList([changelogPath], './_site/data/changelog.js'); + +const introducePath = './docs/react/introduce.md'; +buildDocsList([introducePath], './_site/data/introduce.js'); + +const gettingStartedPath = './docs/react/getting-started.md'; +buildDocsList([gettingStartedPath], './_site/data/getting-started.js'); + +const installPath = './docs/react/install.md'; +buildDocsList([installPath], './_site/data/install.js'); + +const upgradeNotesPath = './docs/react/upgrade-notes.md'; +buildDocsList([upgradeNotesPath], './_site/data/upgrade-notes.js'); + +const downloadPath = './docs/resource/download.md'; +buildDocsList([downloadPath], './_site/data/download.js') + +const referencePath = + './docs/resource/reference.md'; +buildDocsList([referencePath], './_site/data/reference.js') + +const specIntroPath = + './docs/spec/introduce.md' +buildDocsList([specIntroPath], './_site/data/specIntro.js'); + +const fontPath = + './docs/spec/font.md' +buildDocsList([fontPath], './_site/data/font.js'); + +const typographyPath = + './docs/spec/typography.md' +buildDocsList([typographyPath], './_site/data/typography.js'); + +const easingPath = + './docs/spec/easing.md' +buildDocsList([easingPath], './_site/data/easing.js'); +const pageTransitionPath = + './docs/spec/page-transition.md' +buildDocsList([pageTransitionPath], './_site/data/page-transition.js'); +const motionPath = + './docs/spec/motion.md' +buildDocsList([motionPath], './_site/data/motion.js'); diff --git a/scripts/devil.js b/scripts/devil.js new file mode 100644 index 0000000000..1d2e0bbd02 --- /dev/null +++ b/scripts/devil.js @@ -0,0 +1,31 @@ +'use strict'; + +const babel = require('babel-core'); +const recast = require('recast'); +const builders = recast.types.builders; + +const babelrc = { + presets: ['es2015', 'react'] +}; + +// const demo = 'import { Button } from \'antd\';' + +// 'ReactDOM.render(
    ' + +// ' ' + +// ' ' + +// ' ' + +// '
    ,' + +// 'document.getElementById(\'components-button-demo-basic\'));'; +// devil(demo); +module.exports = function devil(demo, params) { + const compiled = babel.transform(demo, babelrc).code; + + const ast = recast.parse(compiled); + const astProgramBody = ast.program.body; + const lastIndex = astProgramBody.length - 1; + astProgramBody[lastIndex] = builders.returnStatement( + astProgramBody[lastIndex].expression.arguments[0] + ); + + const code = recast.print(ast).code; + return new Function((params || []).join(', '), code); +} diff --git a/scripts/utils.js b/scripts/utils.js new file mode 100644 index 0000000000..19891649b0 --- /dev/null +++ b/scripts/utils.js @@ -0,0 +1,47 @@ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const R = require('ramda'); + +const isMDFile = R.compose(R.equals('.md'), path.extname); +exports.findMDFile = function findMDFile(dirPath) { + let mds = []; + + R.forEach((fileName) => { + const filePath = path.join(dirPath, fileName); + const stat = fs.statSync(filePath); + if (stat.isFile() && isMDFile(filePath)) { + mds.push(filePath); + } + if (stat.isDirectory()) { + mds = mds.concat(findMDFile(filePath)); + } + }, fs.readdirSync(dirPath)); + + return mds; +}; +exports.isIndex = R.compose(R.equals('index.md'), R.unary(path.basename)); +exports.isDemo = R.complement(exports.isIndex); + +const MT = require('mark-twain'); +exports.parseFileContent = R.pipe( + fs.readFileSync, + R.toString, + MT, + R.prop('content') +); + +const parseBasicMeta = R.pipe( + R.path(['1', 'children']), + R.map((child) => R.split(/:\s?/, child.children[0].children)), + R.fromPairs +); +const parseEnglishTitle = R.path(['0', 'children']); +exports.parseMeta = function parseMeta(fileContent) { + const meta = parseBasicMeta(fileContent); + meta.english = parseEnglishTitle(fileContent); + meta.title = `${meta.english} ${meta.chinese || ''}`; + + return meta; +}; From 2830764a37adae6fa26a3d8887dee8e4128dbd27 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 29 Feb 2016 14:34:51 +0800 Subject: [PATCH 0061/1555] style: update code style to please lint --- package.json | 4 ++-- site/common/lib.js | 2 +- site/component/Article/index.jsx | 4 ++-- site/component/Demo/index.jsx | 3 +-- site/component/ReactComponents/index.jsx | 10 +++++----- 5 files changed, 11 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 90e1c84850..49e88726db 100644 --- a/package.json +++ b/package.json @@ -136,10 +136,10 @@ "deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy", "just-deploy": "npm run site && node scripts/deploy.js", "lint": "npm run srclint && npm run mdlint && npm run lesshint", - "srclint": "eslint components test index.js --ext '.js,.jsx'", + "srclint": "eslint components test site index.js --ext '.js,.jsx'", "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0, eol-last: 0, prefer-rest-params: 0'", "lesshint": "lesshint style/ -e 'style/+(core|mixins)/+(base|iconfont|normalize|layouts|compatibility|grid).less'", - "eslint-fix": "eslint --fix components test index.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md", + "eslint-fix": "eslint --fix components test site index.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md", "test": "npm run lint && webpack && npm run jest", "jest": "jest", "pub": "sh ./scripts/publish.sh", diff --git a/site/common/lib.js b/site/common/lib.js index 334670a1c8..a2ae3e20f1 100644 --- a/site/common/lib.js +++ b/site/common/lib.js @@ -2,7 +2,7 @@ import '../../style/index.less'; import './styles/tomorrow.less'; import './styles/common.less'; import './styles/markdown.less'; -import './styles/toc.less' +import './styles/toc.less'; import './styles/font.less'; import './styles/resource.less'; import './styles/clearfix.less'; diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx index 3c4cb2934a..e23b09da20 100644 --- a/site/component/Article/index.jsx +++ b/site/component/Article/index.jsx @@ -9,13 +9,13 @@ export default class Article extends React.Component { }).map((node) => { return
  • { node.children }
    • ; }); - console.log(content.description); + return (

    { content.meta.title }

    { jumper.length > 0 ? -
      { jumper }
    : +
      { jumper }
    : null } { content.description.map(utils.objectToComponent) } diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx index 8d7b74f14c..009ea5cdfd 100644 --- a/site/component/Demo/index.jsx +++ b/site/component/Demo/index.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Link } from 'react-router'; import { Collapse } from '../../../'; import * as utils from '../utils'; import hljs from 'highlight.js'; @@ -24,7 +23,7 @@ export default class Demo extends React.Component { 
                       
+                  }} />
    diff --git a/site/component/ReactComponents/index.jsx b/site/component/ReactComponents/index.jsx index 2951a66872..afd8eaedb3 100644 --- a/site/component/ReactComponents/index.jsx +++ b/site/component/ReactComponents/index.jsx @@ -1,13 +1,13 @@ import React from 'react'; -import { Route, Link } from 'react-router'; +import { Link } from 'react-router'; import { Row, Col, Menu } from '../../../'; import componentsList from '../../../_site/data/components-list'; export default class ReactComponents extends React.Component { render() { const componentMenuItems = []; - ['基本', '表单', '展示', '导航', '其它'].forEach((key) => { - const grandChildren = componentsList[key].map((item) => { + ['基本', '表单', '展示', '导航', '其它'].forEach((category) => { + const grandChildren = componentsList[category].map((item) => { const key = item.english.toLowerCase(); return ( @@ -17,7 +17,7 @@ export default class ReactComponents extends React.Component { }); componentMenuItems.push( - + { grandChildren } ); @@ -27,7 +27,7 @@ export default class ReactComponents extends React.Component { + defaultOpenKeys={['components']}> Ant Design of React From 203627f4c7957f7f6bc2596503266a706d463f20 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 29 Feb 2016 15:56:15 +0800 Subject: [PATCH 0062/1555] feat: support `cols` equals '1' --- components/layout/index.md | 47 +++++++++++++++++---------- site/component/ComponentDoc/index.jsx | 23 ++++++++----- 2 files changed, 44 insertions(+), 26 deletions(-) diff --git a/components/layout/index.md b/components/layout/index.md index 692638246c..b43825e217 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -106,17 +106,20 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 | pull | 栅格向左移动格数 | number | 0 | diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index b6cddad7c3..7a6e12acd3 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -6,11 +6,12 @@ import * as utils from '../utils'; export default class ComponentDoc extends React.Component { render() { const { demos = [], doc } = this.props; + const isSingleCol = doc.meta.cols === '1'; const leftChildren = []; const rightChildren = []; demos.forEach((demoData, index) => { - if (index % 2 === 0) { + if (index % 2 === 0 || isSingleCol) { leftChildren.push(); } else { rightChildren.push(); @@ -18,16 +19,20 @@ export default class ComponentDoc extends React.Component { }); return ( -
    -

    {doc.meta.title}

    - { doc.description.map(utils.objectToComponent) } -

    代码演示

    +
    +
    +

    {doc.meta.title}

    + { doc.description.map(utils.objectToComponent) } +

    代码演示

    +
    - { leftChildren } - { rightChildren } + { leftChildren } + { isSingleCol ? null : { rightChildren } } - { doc.api.map(utils.objectToComponent) } -
    +
    + { doc.api.map(utils.objectToComponent) } +
    +
    ); } } From 3c5c36c0d9a964ad582d0d1c4264d3ad27f280cd Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 29 Feb 2016 17:43:22 +0800 Subject: [PATCH 0063/1555] deps: upgrade mark-twain --- package.json | 2 +- scripts/utils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 49e88726db..bc035aadce 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "less-loader": "^2.2.0", "lesshint-antd": "^1.2.1", "lodash": "^4.1.0", - "mark-twain": "^0.2.0-beta", + "mark-twain": "^0.2.0-beta.4", "nico-jsx": "~0.8.2", "postcss-loader": "^0.8.0", "pre-commit": "1.x", diff --git a/scripts/utils.js b/scripts/utils.js index 19891649b0..498d7358ae 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -34,7 +34,7 @@ exports.parseFileContent = R.pipe( const parseBasicMeta = R.pipe( R.path(['1', 'children']), - R.map((child) => R.split(/:\s?/, child.children[0].children)), + R.map((child) => R.split(/:\s?/, child.children)), R.fromPairs ); const parseEnglishTitle = R.path(['0', 'children']); From 304305fe08264f2a4632b5a6f075003b81aac577 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 10:41:09 +0800 Subject: [PATCH 0064/1555] refactor: create directory with mkdirp --- package.json | 1 + scripts/build-website.js | 14 +++----------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index bc035aadce..b7a180f570 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "lodash": "^4.1.0", "mark-twain": "^0.2.0-beta.4", "nico-jsx": "~0.8.2", + "node-mkdirp": "0.0.1", "postcss-loader": "^0.8.0", "pre-commit": "1.x", "querystring": "^0.2.0", diff --git a/scripts/build-website.js b/scripts/build-website.js index 008474979c..c2735bbfa2 100755 --- a/scripts/build-website.js +++ b/scripts/build-website.js @@ -2,6 +2,9 @@ 'use strict'; +// Ensure that data directory exist. +require('mkdirp').sync('./_site/data'); + const fs = require('fs'); const R = require('ramda'); const utils = require('./utils'); @@ -9,17 +12,6 @@ const buildComponentsList = require('./build-components-list'); const buildDocsList = require('./build-docs-list'); const buildDemosList = require('./build-demos-list'); -// Ensure that data directory exist. -try { - fs.statSync('./_site'); -} catch (e) { - fs.mkdir('./_site'); -} -try { - fs.statSync('./_site/data'); -} catch (e) { - fs.mkdir('./_site/data'); -} // TODO: configurable const componentPath = './components'; From 3bccc9197bb27390b32646752adf3ef8de24c07d Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 11:10:57 +0800 Subject: [PATCH 0065/1555] fix: should support `object.type === 'code'` --- site/component/utils.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/site/component/utils.js b/site/component/utils.js index cbabdaea48..cb884a4aad 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -1,7 +1,8 @@ import React from 'react'; +import hljs from 'highlight.js'; export function objectToComponent(object, index) { - if (object === null) return; // TODO: mark-twain support table + if (object === null) return; const children = object.children; @@ -12,6 +13,18 @@ export function objectToComponent(object, index) { }); } + if (object.type === 'code') { + const highlightedCode = hljs.highlight('javascript', children).value; + return ( +
    + 
    +          
+
    +
    + ); + } + if (typeof children === 'string') { return React.createElement(object.type, { key: index, @@ -19,7 +32,7 @@ export function objectToComponent(object, index) { }); } return React.createElement( - object.type, { key: Math.random() }, + object.type, { key: index }, children && children.map(objectToComponent) // `hr` has no children ); } From 66b974a10fe34358ab3010b117f128e5d27614cf Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 11:46:18 +0800 Subject: [PATCH 0066/1555] feat: support footer navigation --- site/common/lib.js | 1 + site/common/styles/page-nav.less | 37 ++++++++++ site/component/ComponentDoc/index.jsx | 4 +- site/component/ReactComponents/index.jsx | 92 +++++++++++++++--------- site/component/utils.js | 15 ++++ 5 files changed, 114 insertions(+), 35 deletions(-) create mode 100644 site/common/styles/page-nav.less diff --git a/site/common/lib.js b/site/common/lib.js index a2ae3e20f1..2a3f53f59d 100644 --- a/site/common/lib.js +++ b/site/common/lib.js @@ -7,3 +7,4 @@ import './styles/font.less'; import './styles/resource.less'; import './styles/clearfix.less'; import './styles/demo.less'; +import './styles/page-nav.less'; diff --git a/site/common/styles/page-nav.less b/site/common/styles/page-nav.less new file mode 100644 index 0000000000..199b174f21 --- /dev/null +++ b/site/common/styles/page-nav.less @@ -0,0 +1,37 @@ +.prev-next-nav { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + font-size: 16px; + border-top: 1px solid #e9e9e9; +} + +.prev-next-nav > .prev-page, +.prev-next-nav > .next-page { + padding: 0 24px; + width: 50%; + float: left; + line-height: 72px; + height: 72px; +} + +.prev-next-nav > a.prev-page:before { + font-family: 'anticon'; + content: '\e601'; + font-size: 12px; + margin-right: 1em; +} + +.prev-next-nav > .next-page { + text-align: right; + float: right; +} + +.prev-next-nav > a.next-page:after { + font-family: 'anticon'; + content: '\e600'; + font-size: 12px; + margin-left: 1em; +} \ No newline at end of file diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index 7a6e12acd3..8e9d4a1838 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -19,7 +19,7 @@ export default class ComponentDoc extends React.Component { }); return ( -
    +

    {doc.meta.title}

    { doc.description.map(utils.objectToComponent) } @@ -32,7 +32,7 @@ export default class ComponentDoc extends React.Component {
    { doc.api.map(utils.objectToComponent) }
    -
    +

    ); } } diff --git a/site/component/ReactComponents/index.jsx b/site/component/ReactComponents/index.jsx index afd8eaedb3..20ad3e4cde 100644 --- a/site/component/ReactComponents/index.jsx +++ b/site/component/ReactComponents/index.jsx @@ -1,48 +1,70 @@ import React from 'react'; import { Link } from 'react-router'; import { Row, Col, Menu } from '../../../'; +import * as utils from '../utils'; import componentsList from '../../../_site/data/components-list'; -export default class ReactComponents extends React.Component { - render() { - const componentMenuItems = []; - ['基本', '表单', '展示', '导航', '其它'].forEach((category) => { - const grandChildren = componentsList[category].map((item) => { - const key = item.english.toLowerCase(); - return ( - - {item.title} - - ); - }); +const componentMenuItems = []; +['基本', '表单', '展示', '导航', '其它'].forEach((category) => { + const grandChildren = componentsList[category].map((item) => { + const key = item.english.toLowerCase(); + return ( + + {item.title} + + ); + }); - componentMenuItems.push( - - { grandChildren } - - ); + componentMenuItems.push( + + { grandChildren } + + ); +}); + +export default class ReactComponents extends React.Component { + getTopLevelMenuItems() { + return [ + + Ant Design of React + , + + 快速上手 + , + + 安装 + , + + 升级指南 + , + + 更新日志 + , + ]; + } + + render() { + const routes = this.props.routes; + const activeMenuItem = routes[routes.length - 1].path; + + const topLevelMenuItems = this.getTopLevelMenuItems(); + const menuItems = topLevelMenuItems.concat( + utils.flattenMenu(componentMenuItems) + ); + + const activeMenuItemIndex = menuItems.findIndex((menuItem) => { + return menuItem.key === activeMenuItem; }); + const prev = menuItems[activeMenuItemIndex - 1]; + const next = menuItems[activeMenuItemIndex + 1]; return ( - - Ant Design of React - - - 快速上手 - - - 安装 - - - 升级指南 - - - 更新日志 - + defaultOpenKeys={['components']} + selectedKeys={[activeMenuItem]}> + { topLevelMenuItems } { componentMenuItems } @@ -50,6 +72,10 @@ export default class ReactComponents extends React.Component { { this.props.children } +
    + { !!prev ? React.cloneElement(prev.props.children, { className: 'prev-page' }) : null } + { !!next ? React.cloneElement(next.props.children, { className: 'next-page' }) : null } +
    ); diff --git a/site/component/utils.js b/site/component/utils.js index cb884a4aad..6be0c81975 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -1,5 +1,6 @@ import React from 'react'; import hljs from 'highlight.js'; +import { Menu } from '../../'; export function objectToComponent(object, index) { if (object === null) return; @@ -36,3 +37,17 @@ export function objectToComponent(object, index) { children && children.map(objectToComponent) // `hr` has no children ); } + +export function flattenMenu(menu) { + if (menu.type === Menu.Item) { + return menu; + } + + if (Array.isArray(menu)) { + return menu.reduce((acc, item) => { + return acc.concat(flattenMenu(item)); + }, []); + } + + return flattenMenu(menu.props.children); +} From c9aff0ac92c3aea78645e10787d52df8b1d0777d Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 12:06:01 +0800 Subject: [PATCH 0067/1555] fix: should support nested list --- site/component/utils.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/component/utils.js b/site/component/utils.js index 6be0c81975..a6efaf68e6 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -5,6 +5,10 @@ import { Menu } from '../../'; export function objectToComponent(object, index) { if (object === null) return; + if (typeof object === 'string') { + return { object }; + } + const children = object.children; if (object.type === 'html') { From fa9ccf3551a59e60e8d4c4c9a502b07fbb538456 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 14:19:50 +0800 Subject: [PATCH 0068/1555] css: update footer style --- site/common/lib.js | 1 + site/common/styles/footer.less | 35 +++++++++++++ site/component/Footer/index.jsx | 89 ++++++++++++++++---------------- site/component/Footer/index.less | 20 ------- 4 files changed, 81 insertions(+), 64 deletions(-) create mode 100644 site/common/styles/footer.less delete mode 100644 site/component/Footer/index.less diff --git a/site/common/lib.js b/site/common/lib.js index 2a3f53f59d..291f4cfef0 100644 --- a/site/common/lib.js +++ b/site/common/lib.js @@ -8,3 +8,4 @@ import './styles/resource.less'; import './styles/clearfix.less'; import './styles/demo.less'; import './styles/page-nav.less'; +import './styles/footer.less'; diff --git a/site/common/styles/footer.less b/site/common/styles/footer.less new file mode 100644 index 0000000000..904c718bfa --- /dev/null +++ b/site/common/styles/footer.less @@ -0,0 +1,35 @@ +footer { + clear: both; + border-top: 1px solid #eee; + font-size: 12px; + background: #fff; + position: relative; + z-index: 1; + color: #666; +} + +footer ul { + overflow: hidden; + margin: 0 2%; +} + +footer ul li { + float: left; + width: 25%; + padding: 5px 2% 15px; +} + +footer ul li > h2 { + font-size: 16px; + margin: 10px auto 5px; + font-weight: normal; +} + +footer ul li > div { + margin: auto; + margin: 10px 0; +} + +footer ul li > a { + margin: 5px 2px 0 0; +} \ No newline at end of file diff --git a/site/component/Footer/index.jsx b/site/component/Footer/index.jsx index 059fb41734..a6c473cb4f 100644 --- a/site/component/Footer/index.jsx +++ b/site/component/Footer/index.jsx @@ -1,50 +1,51 @@ import React from 'react'; -import { Row, Col, Select } from '../../../'; +import { Select } from '../../../'; -import './index.less'; export default class Footer extends React.Component { render() { - return (); + return ( + + ); } } diff --git a/site/component/Footer/index.less b/site/component/Footer/index.less deleted file mode 100644 index 21fc6a55c9..0000000000 --- a/site/component/Footer/index.less +++ /dev/null @@ -1,20 +0,0 @@ -#footer { - animation: yBottomMatrix .5s ease-out .6s backwards; - - border-top: 1px solid #eee; - background: #fff; - padding: 0 2%; -} - -#footer .footer-col { - padding: 10px 2% 15px; -} -#footer h2 { - font-size: 16px; - font-weight: normal; - margin-top: 5px; -} -#footer a, #footer p { - font-size: 12px; - margin: 5px 2px 0 0; -} \ No newline at end of file From f9e27e520aa0ea28661e65be9f7ffe4475b3a357 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 14:53:32 +0800 Subject: [PATCH 0069/1555] feat: support expand all demo code --- site/common/styles/demo.less | 18 +++++++++++++-- site/component/ComponentDoc/index.jsx | 32 +++++++++++++++++++++++---- site/component/Demo/index.jsx | 22 +++++++++++++++--- 3 files changed, 63 insertions(+), 9 deletions(-) diff --git a/site/common/styles/demo.less b/site/common/styles/demo.less index 6a66d4369b..ada13d3590 100644 --- a/site/common/styles/demo.less +++ b/site/common/styles/demo.less @@ -1,3 +1,18 @@ +.code-box-expand-trigger { + cursor: pointer; + font-size: 14px; + color: #9199AC; + margin-left: 5px; + opacity: .8; + transition: all .3s ease; + top: -2px; + position: relative; + + &-active { + color: #3B4357; + } +} + .code-box { border: 1px solid #E9E9E9; border-radius: 6px; @@ -62,8 +77,7 @@ .ant-collapse-header { height: auto!important; line-height: 1.8!important; - padding-top: 9px; - padding-bottom: 10px; + padding: 9px 15px 10px 32px; } } diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index 8e9d4a1838..9b517290e8 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -1,29 +1,53 @@ import React from 'react'; -import { Row, Col } from '../../../'; +import classNames from 'classnames'; +import { Row, Col, Icon } from '../../../'; import Demo from '../Demo'; import * as utils from '../utils'; export default class ComponentDoc extends React.Component { + constructor(props) { + super(props); + + this.state = { + expandAll: false, + }; + } + + handleExpandToggle() { + this.setState({ + expandAll: !this.state.expandAll, + }); + } + render() { const { demos = [], doc } = this.props; + const expand = this.state.expandAll; const isSingleCol = doc.meta.cols === '1'; const leftChildren = []; const rightChildren = []; demos.forEach((demoData, index) => { if (index % 2 === 0 || isSingleCol) { - leftChildren.push(); + leftChildren.push(); } else { - rightChildren.push(); + rightChildren.push(); } }); + const expandTriggerClass = classNames({ + 'code-box-expand-trigger': true, + 'code-box-expand-trigger-active': expand, + }); return (

    {doc.meta.title}

    { doc.description.map(utils.objectToComponent) } -

    代码演示

    +

    + 代码演示 + +

    { leftChildren } diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx index 009ea5cdfd..5734e53fec 100644 --- a/site/component/Demo/index.jsx +++ b/site/component/Demo/index.jsx @@ -4,8 +4,23 @@ import * as utils from '../utils'; import hljs from 'highlight.js'; export default class Demo extends React.Component { + constructor(props) { + super(props); + + this.state = { + activeKey: '', + }; + } + + handleChange(activeKey) { + this.setState({ + activeKey: this.state.activeKey === activeKey ? + '' : activeKey + }); + } + render() { - const { id, preview, title, intro, code } = this.props; + const { id, preview, title, intro, code, expand } = this.props; const introChildren = intro.map(utils.objectToComponent); const highlightedCode = hljs.highlight('javascript', code).value; return ( @@ -17,8 +32,9 @@ export default class Demo extends React.Component { - - + + 
                       
Date: Tue, 1 Mar 2016 16:20:32 +0800
Subject: [PATCH 0070/1555] chore: improve style and UX

---
 site/common/styles/common.less           |   7 ++
 site/component/App.jsx                   |  14 +--
 site/component/Header/index.jsx          | 108 +++++++++++++----------
 site/component/Header/index.less         |   8 ++
 site/component/ReactComponents/index.jsx |   6 +-
 site/component/Resource/index.jsx        |   9 +-
 site/component/Spec/index.jsx            |  17 ++--
 site/component/utils.js                  |  13 +++
 8 files changed, 118 insertions(+), 64 deletions(-)

diff --git a/site/common/styles/common.less b/site/common/styles/common.less
index 83dee1fdf6..680b8ed06b 100644
--- a/site/common/styles/common.less
+++ b/site/common/styles/common.less
@@ -14,4 +14,11 @@
   background: #fff;
   min-height: 500px;
   overflow: hidden;
+}
+
+.sidebar .chinese {
+  font-size: 12px;
+  margin-left: 6px;
+  font-weight: normal;
+  opacity: .67;
 }
\ No newline at end of file
diff --git a/site/component/App.jsx b/site/component/App.jsx
index 1483c70e25..a8e4aa79c8 100644
--- a/site/component/App.jsx
+++ b/site/component/App.jsx
@@ -3,10 +3,12 @@ import Header from './Header';
 import Footer from './Footer';
 
 import './app.less';
-export default function App({ children }) {
-  return (
    
-    
    
-    { children }
-    
    
-  
    );
+export default function App(props) {
+  return (
+    
    
+      
    
+      { props.children }
+      
    
+    
    
+  );
 }
diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx
index 3e4ee3ac9e..2694273b15 100644
--- a/site/component/Header/index.jsx
+++ b/site/component/Header/index.jsx
@@ -6,53 +6,69 @@ const Option = Select.Option;
 import './index.less';
 
 import componentsList from '../../../_site/data/components-list';
-export default function Header() {
-  const options = [];
-  for (let key of Object.keys(componentsList)) {
-    componentsList[key].forEach((item) => {
-      options.push();
-    });
+export default class Header extends React.Component {
+  handleSearch(value) {
+    console.log(value);
   }
 
-  return ();
+        
+        
+          
+            
+              首页
+            
+          
+          
+            实践
+          
+          
+            模式
+          
+          
+            
+              组件
+            
+          
+          
+            
+              语言
+            
+          
+          
+            
+              资源
+            
+          
+        
+      
+    );
+  }
 }
diff --git a/site/component/Header/index.less b/site/component/Header/index.less
index 9207c83452..f73d651558 100644
--- a/site/component/Header/index.less
+++ b/site/component/Header/index.less
@@ -61,4 +61,12 @@
     line-height: @header-height;
     width: 86px;
     text-align: center;
+}
+
+.ant-component-decs {
+    font-size: 12px;
+    position: absolute;
+    top: 9px;
+    color: #aaa;
+    right: 16px;
 }
\ No newline at end of file
diff --git a/site/component/ReactComponents/index.jsx b/site/component/ReactComponents/index.jsx
index 20ad3e4cde..bff98a58c2 100644
--- a/site/component/ReactComponents/index.jsx
+++ b/site/component/ReactComponents/index.jsx
@@ -10,7 +10,7 @@ const componentMenuItems = [];
     const key = item.english.toLowerCase();
     return (
       
-        {item.title}
+        {item.english}{item.chinese}
       
     );
   });
@@ -45,7 +45,7 @@ export default class ReactComponents extends React.Component {
 
   render() {
     const routes = this.props.routes;
-    const activeMenuItem = routes[routes.length - 1].path;
+    const activeMenuItem = routes[routes.length - 1].path || 'introduce';
 
     const topLevelMenuItems = this.getTopLevelMenuItems();
     const menuItems = topLevelMenuItems.concat(
@@ -65,7 +65,7 @@ export default class ReactComponents extends React.Component {
             defaultOpenKeys={['components']}
             selectedKeys={[activeMenuItem]}>
             { topLevelMenuItems }
-            
+            Components} key="components">
               { componentMenuItems }
    diff --git a/site/component/Resource/index.jsx b/site/component/Resource/index.jsx index ea6e518e54..ec2304cfc5 100644 --- a/site/component/Resource/index.jsx +++ b/site/component/Resource/index.jsx @@ -4,16 +4,19 @@ import { Row, Col, Menu } from '../../../'; export default class Resource extends React.Component { render() { + const routes = this.props.routes; + const activeMenuItem = routes[routes.length - 1].path || 'download'; + return ( - - + + 资源下载 - + 文献素材 diff --git a/site/component/Spec/index.jsx b/site/component/Spec/index.jsx index 6b2e304e46..7e78299862 100644 --- a/site/component/Spec/index.jsx +++ b/site/component/Spec/index.jsx @@ -1,19 +1,24 @@ import React from 'react'; import { Link } from 'react-router'; import { Row, Col, Menu } from '../../../'; +const SubMenu = Menu.SubMenu; export default class Spec extends React.Component { render() { + const routes = this.props.routes; + const activeMenuItem = routes[routes.length - 1].path || 'introduce'; + return ( - + Ant Design - + 基础}> 字体 @@ -30,14 +35,14 @@ export default class Spec extends React.Component { 常用布局 - - + + 动画}> 自然运动 - + 互动转换 @@ -47,7 +52,7 @@ export default class Spec extends React.Component { 组件动画 - + diff --git a/site/component/utils.js b/site/component/utils.js index a6efaf68e6..be10a28186 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -2,6 +2,10 @@ import React from 'react'; import hljs from 'highlight.js'; import { Menu } from '../../'; +function isHeading(type) { + return /h[1-6]/i.test(type); +} + export function objectToComponent(object, index) { if (object === null) return; @@ -30,6 +34,15 @@ export function objectToComponent(object, index) { ); } + if (isHeading(object.type)) { + return React.createElement(object.type, { + key: index, + }, [ + object.children, + #, + ]); + } + if (typeof children === 'string') { return React.createElement(object.type, { key: index, From d768495a96f02be8ba3c9a5faec5d31bfd88a500 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 16:33:19 +0800 Subject: [PATCH 0071/1555] css: update header style --- site/component/Header/index.jsx | 80 +++++++++++++++++--------------- site/component/Header/index.less | 4 +- 2 files changed, 45 insertions(+), 39 deletions(-) diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index 2694273b15..6fe1dd1148 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { Link } from 'react-router'; -import { Select, Menu } from '../../../'; +import { Select, Menu, Row, Col } from '../../../'; const Option = Select.Option; import './index.less'; @@ -31,43 +31,49 @@ export default class Header extends React.Component { return ( ); } diff --git a/site/component/Header/index.less b/site/component/Header/index.less index f73d651558..042f394a71 100644 --- a/site/component/Header/index.less +++ b/site/component/Header/index.less @@ -8,6 +8,7 @@ border-bottom: 1px solid #eee; height: @header-height; margin-bottom: 24px; + padding: 0 4%; } #logo { @@ -16,7 +17,7 @@ float: left; height: 60px; - margin: 10px 45px 10px 40px; + margin: 10px 45px 10px 0; } #logo img { height: 60px; @@ -54,7 +55,6 @@ border: 0; float: right; font-size: 14px; - margin-right: 25px; } #nav li { height: @header-height; From 138d71c3dbed6556bc868032c419d8010df7479e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 17:05:24 +0800 Subject: [PATCH 0072/1555] feat: add footer nav --- site/component/ReactComponents/index.jsx | 10 +-- site/component/Resource/index.jsx | 46 +++++++---- site/component/Spec/index.jsx | 100 +++++++++++++---------- site/component/utils.js | 15 ++++ 4 files changed, 104 insertions(+), 67 deletions(-) diff --git a/site/component/ReactComponents/index.jsx b/site/component/ReactComponents/index.jsx index bff98a58c2..5e1819ed7e 100644 --- a/site/component/ReactComponents/index.jsx +++ b/site/component/ReactComponents/index.jsx @@ -44,19 +44,13 @@ export default class ReactComponents extends React.Component { } render() { - const routes = this.props.routes; - const activeMenuItem = routes[routes.length - 1].path || 'introduce'; - + const activeMenuItem = utils.getActiveMenuItem(this.props, 'introduce'); const topLevelMenuItems = this.getTopLevelMenuItems(); const menuItems = topLevelMenuItems.concat( utils.flattenMenu(componentMenuItems) ); - const activeMenuItemIndex = menuItems.findIndex((menuItem) => { - return menuItem.key === activeMenuItem; - }); - const prev = menuItems[activeMenuItemIndex - 1]; - const next = menuItems[activeMenuItemIndex + 1]; + const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem); return ( diff --git a/site/component/Resource/index.jsx b/site/component/Resource/index.jsx index ec2304cfc5..8c59578255 100644 --- a/site/component/Resource/index.jsx +++ b/site/component/Resource/index.jsx @@ -1,35 +1,47 @@ import React from 'react'; import { Link } from 'react-router'; import { Row, Col, Menu } from '../../../'; +import * as utils from '../utils'; export default class Resource extends React.Component { + getMenuItems() { + return [ + + + 资源下载 + + , + + + 文献素材 + + , + + + GitHub + + , + ]; + } + render() { - const routes = this.props.routes; - const activeMenuItem = routes[routes.length - 1].path || 'download'; + const activeMenuItem = utils.getActiveMenuItem(this.props, 'download'); + const menuItems = this.getMenuItems(); + const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem); return ( - - - 资源下载 - - - - - 文献素材 - - - - - GitHub - - + { menuItems } { this.props.children } +
    + { !!prev ? React.cloneElement(prev.props.children, { className: 'prev-page' }) : null } + { !!next ? React.cloneElement(next.props.children, { className: 'next-page' }) : null } +
    ); diff --git a/site/component/Spec/index.jsx b/site/component/Spec/index.jsx index 7e78299862..74b79bb21c 100644 --- a/site/component/Spec/index.jsx +++ b/site/component/Spec/index.jsx @@ -1,62 +1,78 @@ import React from 'react'; import { Link } from 'react-router'; import { Row, Col, Menu } from '../../../'; +import * as utils from '../utils'; const SubMenu = Menu.SubMenu; export default class Spec extends React.Component { + getMenuItems() { + return [ + + + Ant Design + + , + 基础}> + + + 字体 + + + + + 排版 + + + + + 色彩 + + + + + 常用布局 + + + , + 动画}> + + + 自然运动 + + + + + 互动转换 + + + + + 组件动画 + + + , + ]; + } + render() { - const routes = this.props.routes; - const activeMenuItem = routes[routes.length - 1].path || 'introduce'; + const activeMenuItem = utils.getActiveMenuItem(this.props, 'introduce'); + const menuItems = this.getMenuItems(); + const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem); return ( - - - Ant Design - - - 基础}> - - - 字体 - - - - - 排版 - - - - 色彩 - - - 常用布局 - - - 动画}> - - - 自然运动 - - - - - 互动转换 - - - - - 组件动画 - - - + { menuItems } { this.props.children } +
    + { !!prev ? React.cloneElement(prev.props.children, { className: 'prev-page' }) : null } + { !!next ? React.cloneElement(next.props.children, { className: 'next-page' }) : null } +
    ); diff --git a/site/component/utils.js b/site/component/utils.js index be10a28186..8a437f2e59 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -68,3 +68,18 @@ export function flattenMenu(menu) { return flattenMenu(menu.props.children); } + +export function getActiveMenuItem(props, index) { + const routes = props.routes; + return routes[routes.length - 1].path || index; +} + +export function getFooterNav(menuItems, activeMenuItem) { + const menuItemsList = flattenMenu(menuItems); + const activeMenuItemIndex = menuItemsList.findIndex((menuItem) => { + return menuItem.key === activeMenuItem; + }); + const prev = menuItemsList[activeMenuItemIndex - 1]; + const next = menuItemsList[activeMenuItemIndex + 1]; + return { prev, next }; +} From 428ad993f65fb3ccbc54c434130469401eebe8db Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Mar 2016 17:42:23 +0800 Subject: [PATCH 0073/1555] feat: show CSS code --- site/common/styles/common.less | 4 ++++ site/component/Demo/index.jsx | 26 +++++++++++++++++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/site/common/styles/common.less b/site/common/styles/common.less index 680b8ed06b..bcae7aaab1 100644 --- a/site/common/styles/common.less +++ b/site/common/styles/common.less @@ -16,6 +16,10 @@ overflow: hidden; } +.sidebar { + padding-bottom: 50px; +} + .sidebar .chinese { font-size: 12px; margin-left: 6px; diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx index 5734e53fec..ebfa9f9583 100644 --- a/site/component/Demo/index.jsx +++ b/site/component/Demo/index.jsx @@ -20,13 +20,18 @@ export default class Demo extends React.Component { } render() { - const { id, preview, title, intro, code, expand } = this.props; + const { id, preview, title, intro, code, style, expand } = this.props; const introChildren = intro.map(utils.objectToComponent); const highlightedCode = hljs.highlight('javascript', code).value; return (
    { preview() } + { + !!style ? + - -`````jsx +`````__react let Palette = React.createClass({ render() { let color = this.props.color; @@ -190,21 +132,30 @@ let ExtendPalettes = React.createClass({
    ; } }); -ReactDOM.render(, document.getElementById('extend-palettes')); +ReactDOM.render(, mountNode); ````` +## 色彩和交互 + +设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在进行这类设计的同时，建议采取在颜色上添加黑色或者白色并按照 `n+5%` 的规律递增的方式来实现。以下图为例，当鼠标 hover 某个特定元素，就视为浮起，对应颜色就相应增加白色叠加，相反点击的行为可以理解为按下去，在颜色上就相应的增加黑色的叠加。 + + + + + +## 色彩识别 + +合适的色彩对比为信息传达加分，同时也应放考虑到有颜色识别障碍人群的需求。我们将每种主色衍生出来的颜色进行了打标，在考虑对比颜色的选择时建议两种颜色对应标签数值的差要大于等于 5。 + + + + + ## 色彩换算工具 > 正数为变淡 `tint` ，负数为加深 `shade`。 -
    - -Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的色彩标注。 - -less 或 scss 语言可以直接使用 `tint(#2db7f5, 80%)` 和 `shade(#2db7f5, 80%)` 的语法。 - - -`````jsx +`````__react let Button = antd.Button; let InputNumber = antd.InputNumber; let Slider = antd.Slider; @@ -279,39 +230,9 @@ let TintShadeTool = React.createClass({ } }); -ReactDOM.render(, document.getElementById('color-tint-shade-tool')); +ReactDOM.render(, mountNode); ````` - +Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的色彩标注。 + +less 或 scss 语言可以直接使用 `tint(#2db7f5, 80%)` 和 `shade(#2db7f5, 80%)` 的语法。 diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 1440855b90..69b685d2ab 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -8,30 +8,7 @@ Ant Design 提供了一些预设的组件动画样式。 -
    - -## 组件动画 - -通过设置组件的 `transitionName` 指定组件动画。 - -| 组件 | 中文名 | 采用动画 | -|--------------|---------------------|-------------------------------------------------| -| popover | 气泡浮出 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| popconfirm | 气泡确认 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| tooltip | 文字提示 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | -| modal | 弹出框 | `zoom` | -| confirm | 弹出确认框 | `zoom` | -| message | 信息提示条 | `move-up` | -| notification | 通知框 | `move-right` & `slide-up` | -| dropdown | 下拉菜单 | `slide-up` | -| select | 选择框 | `slide-up` | -| datepicker | 日期选择框 | `slide-up` | -| alert | 警告提示 | `slide-up` | -| menu | 导航菜单 | `slide-up` | -| datepicker | 日期选择框 | `slide-up` | - - -`````jsx +`````__react var cssAnimation = require('css-animation'); var Select = antd.Select; var Option = Select.Option; @@ -226,34 +203,25 @@ var Test = React.createClass({ } }); -ReactDOM.render(, document.getElementById('components-motion-demo-basic')); +ReactDOM.render(, mountNode); ````` - +## 组件动画 +通过设置组件的 `transitionName` 指定组件动画。 + +| 组件 | 中文名 | 采用动画 | +|--------------|---------------------|-------------------------------------------------| +| popover | 气泡浮出 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| popconfirm | 气泡确认 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| tooltip | 文字提示 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` | +| modal | 弹出框 | `zoom` | +| confirm | 弹出确认框 | `zoom` | +| message | 信息提示条 | `move-up` | +| notification | 通知框 | `move-right` & `slide-up` | +| dropdown | 下拉菜单 | `slide-up` | +| select | 选择框 | `slide-up` | +| datepicker | 日期选择框 | `slide-up` | +| alert | 警告提示 | `slide-up` | +| menu | 导航菜单 | `slide-up` | +| datepicker | 日期选择框 | `slide-up` | diff --git a/scripts/build-common.js b/scripts/build-common.js index 129eec44a8..58eb3aefa8 100644 --- a/scripts/build-common.js +++ b/scripts/build-common.js @@ -4,6 +4,7 @@ const fs = require('fs'); const path = require('path'); const R = require('ramda'); const buildDemosList = require('./build-demos-list'); +const devil = require('./devil'); const utils = require('./utils'); const isMeta = R.complement(R.propEq('type', 'hr')); @@ -23,7 +24,15 @@ const parseDemos = function parseDemos(fileName) { const parse = function parse(fileName) { const fileContent = utils.parseFileContent(fileName); const meta = utils.parseMeta(fileContent); - const description = R.tail(R.dropWhile(isMeta, fileContent)); + const description = R.map( + (node) => { + if (node.type === 'code' && node.props.lang === '__react') { + return devil(node.children, ['React', 'antd', 'CopyToClipboard']); + } + return node; + }, + R.tail(R.dropWhile(isMeta, fileContent)) + ); const demos = !utils.isIndex(fileName) ? null : parseDemos(fileName); diff --git a/site/common/lib.js b/site/common/lib.js index b12ad0f803..4bb09aabff 100644 --- a/site/common/lib.js +++ b/site/common/lib.js @@ -11,3 +11,5 @@ import './styles/page-nav.less'; import './styles/footer.less'; import './styles/preview-img.less'; import './styles/mock-browser.less'; +import './styles/colors.less'; +import './styles/motion.less'; diff --git a/site/common/styles/colors.less b/site/common/styles/colors.less new file mode 100644 index 0000000000..7cd03ce80f --- /dev/null +++ b/site/common/styles/colors.less @@ -0,0 +1,69 @@ +.color-palette { + margin: 45px 0; + overflow: hidden; + width: 80%; + height: 165px; +} +.main-color { + width: 165px; + height: 165px; + float: left; +} +.main-color div { + width: 50px; + height: 50px; + border-radius: 4px; + float: left; + margin: 0 5px 5px 0; +} + +.color-palette .color-msg { + margin-left: 180px; +} + +.color-msg .color-msg-title { + margin: 0; + font-weight: 600; + color: #5C6B77; + line-height: 1.8; + font-size: 21px; +} + +.color-msg .color-msg-description { + color: #777; + font-size: 14px; + line-height: 1.8; + margin-top: 16px; +} + +.color-block { + position: relative; + width: 60px; + border-radius: 6px; + height: 28px; + display: inline-block; + vertical-align: middle; + margin-right: 8px; + cursor: pointer; +} +.color-block:after { + position: absolute; + top: 10px; + left: 0; + height: 100%; + width: 100%; + content: "Copied!"; + font-size: 12px; + line-height: 28px; + text-align: center; + color: #444; + transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + opacity: 0; +} +.color-block.copied:after { + opacity: 1; + top: 0; +} +.color-block.dark:after { + color: #fff; +} \ No newline at end of file diff --git a/site/common/styles/motion.less b/site/common/styles/motion.less new file mode 100644 index 0000000000..db07f2cf49 --- /dev/null +++ b/site/common/styles/motion.less @@ -0,0 +1,25 @@ +.motion-container { + height: 190px; + line-height: 190px; + text-align: center; + margin-bottom: 20px; +} +.motion-example { + width: 180px; + height: 180px; + line-height: 180px; + font-size: 18px; + color: #fff; + text-align: center; + display: inline-block !important; + border-radius: 8px; + font-weight: bold; + background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px; +} +.motion-select-wrapper{ + text-align: center; +} +.motion-select { + text-align:left; + width:180px; +} \ No newline at end of file diff --git a/site/component/Header/index.less b/site/component/Header/index.less index 042f394a71..cc3c7b5dd6 100644 --- a/site/component/Header/index.less +++ b/site/component/Header/index.less @@ -9,6 +9,7 @@ height: @header-height; margin-bottom: 24px; padding: 0 4%; + width: 100%; } #logo { @@ -17,19 +18,20 @@ float: left; height: 60px; - margin: 10px 45px 10px 0; + margin: 20px 45px 20px 0; } #logo img { - height: 60px; - width: 60px; + height: 40px; + width: 40px; + margin-right: 8px; } #logo span { color: #6EB4E0; float: right; - font-size: 18px; + font-size: 14px; font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; - height: 60px; - line-height: 60px; + height: 40px; + line-height: 40px; text-transform: uppercase; } @@ -69,4 +71,8 @@ top: 9px; color: #aaa; right: 16px; +} + +.ant-select-combobox .ant-select-search__field:focus { + box-shadow: none; } \ No newline at end of file diff --git a/site/component/Home/Banner.jsx b/site/component/Home/Banner.jsx new file mode 100644 index 0000000000..1c70d29a7d --- /dev/null +++ b/site/component/Home/Banner.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Link } from 'react-router'; +import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; +import TweenOne from 'rc-tween-one'; +import { QueueAnim, Icon } from '../../../'; + +export default class Banner extends React.Component { + typeFunc(a) { + if (a.key === 'line') { + return 'right'; + } else if (a.key === 'button') { + return 'bottom'; + } + return 'left'; + } + + render() { + return ( + + ); + } +} diff --git a/site/component/Home/Link.jsx b/site/component/Home/Link.jsx new file mode 100644 index 0000000000..32b4b7f221 --- /dev/null +++ b/site/component/Home/Link.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import ScrollLink from 'rc-scroll-anim/lib/ScrollLink'; +import scrollScreen from 'rc-scroll-anim/lib/ScrollScreen'; + +export default class Link extends React.Component { + componentDidMount() { + scrollScreen.init({ docHeight: 4746 }); + } + + render() { + return ( +
    + + + + + +
    + ); + } +} diff --git a/site/component/Home/Page1.jsx b/site/component/Home/Page1.jsx new file mode 100644 index 0000000000..67faf22abe --- /dev/null +++ b/site/component/Home/Page1.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Link } from 'react-router'; +import TweenOne from 'rc-tween-one'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import { QueueAnim, Icon, Button } from '../../../'; + +export default class Page1 extends React.Component { + render() { + return ( + + + +

    最佳实践

    +

    近一年的中后台设计实践，积累了大量的优秀案例。

    +
    + + + +
    +     +     + ); + } +} diff --git a/site/component/Home/Page2.jsx b/site/component/Home/Page2.jsx new file mode 100644 index 0000000000..b923e10b89 --- /dev/null +++ b/site/component/Home/Page2.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Link } from 'react-router'; +import TweenOne from 'rc-tween-one'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import { QueueAnim, Icon, Button } from '../../../'; + +export default class Page2 extends React.Component { + render() { + return ( + + +

    设计模式

    +

    总结中后台设计中反复出现的问题，并提供相应的解决方案。

    +
    + + + +
    +     + +     + ); + } +} diff --git a/site/component/Home/Page3.jsx b/site/component/Home/Page3.jsx new file mode 100644 index 0000000000..d5616d1567 --- /dev/null +++ b/site/component/Home/Page3.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Link } from 'react-router'; +import TweenOne from 'rc-tween-one'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import { QueueAnim, Icon, Button } from '../../../'; + +export default class Page3 extends React.Component { + render() { + return ( + + + +

    丰富的基础组件

    +

    丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。

    +
    + + + +
    +     +     + ); + } +} diff --git a/site/component/Home/Page4.jsx b/site/component/Home/Page4.jsx new file mode 100644 index 0000000000..97aa3cef47 --- /dev/null +++ b/site/component/Home/Page4.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import TweenOne from 'rc-tween-one'; +import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import { QueueAnim } from '../../../'; + +export default class Page4 extends React.Component { + render() { + return ( + + +

    微小·确定·幸福

    +

    这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。

    +     + +     + ); + } +} diff --git a/site/component/Home/index.jsx b/site/component/Home/index.jsx index cbddb8972d..49fce42d6d 100644 --- a/site/component/Home/index.jsx +++ b/site/component/Home/index.jsx @@ -1,19 +1,80 @@ import React from 'react'; -import { Button, Icon } from '../../../'; - +import Link from './Link'; +import Banner from './Banner'; +import Page1 from './Page1'; +import Page2 from './Page2'; +import Page3 from './Page3'; +import Page4 from './Page4'; import './index.less'; -export default function Home() { - return (); + +export default class Home extends React.Component { + // To store style which is only for Home and has conflicts with others. + getStyle() { + return ` + #react-content, + #react-content > div { + height: 100%; + } + .main-wrapper { + background: transparent; + width: auto; + margin: 0; + border-radius: 0; + padding: 0; + overflow: unset; + display: inline; + min-height: 600px; + } + + #header { + position: fixed; + z-index: 999; + background: rgba(0, 0, 0, 0.25); + border-bottom: 1px solid transparent; + transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + } + #header .ant-select-selection, + #header .ant-menu { + background: transparent; + } + #nav a { + color: #eee; + transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + } + #search-box { + border-left-color: rgba(235, 237, 238, .5); + transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + } + + section { + height: 100%; + width: 100%; + background: #fff; + } + + #footer { + background: #000; + } + #footer, + #footer h2 { + color: #999; + } + #footer a { + color: #eee; + }`; + } + + render() { + return ( +
    + + + + + + + + +```__react +import scripts from '../../site/component/Motion/easing'; +class ExecuteJS extends React.Component { + componentDidMount() { + scripts(); + } + + render() { + return null; + } +} + +ReactDOM.render(, mountNode); +``` 上图所示缓动函数：绿 `easeOutBounce` `easeOutElastic`（css 需自配）， 蓝 `ease-out-back` `ease-in-back`。 diff --git a/docs/spec/page-transition.md b/docs/spec/page-transition.md index 7374a293c6..75cf6c831e 100644 --- a/docs/spec/page-transition.md +++ b/docs/spec/page-transition.md @@ -34,8 +34,6 @@ - 被展开的信息区域内容按照一定的路径依次进场。 - -
    @@ -57,10 +55,23 @@ - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。 - -
    > 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/) + +```__react +import scripts from '../../site/component/Motion/page-transition'; +class ExecuteJS extends React.Component { + componentDidMount() { + scripts(); + } + + render() { + return null; + } +} + +ReactDOM.render(, mountNode); +``` diff --git a/site/common/styles/motion.less b/site/common/styles/motion.less index db07f2cf49..dda434e88c 100644 --- a/site/common/styles/motion.less +++ b/site/common/styles/motion.less @@ -22,4 +22,9 @@ .motion-select { text-align:left; width:180px; +} + +.video-player{ + position: relative; + max-width: 800px; } \ No newline at end of file diff --git a/site/component/Motion/easing.js b/site/component/Motion/easing.js new file mode 100644 index 0000000000..a756a50cbe --- /dev/null +++ b/site/component/Motion/easing.js @@ -0,0 +1,30 @@ +/* eslint no-new: 0 */ +import Motion from './motion'; + +module.exports = function () { + new Motion('#J-Linear', { + lineData: [{ stroke: '#f2666c' }, { + stroke: '#71B5DE', + openEaseName: 'easeInOutQuad', + endEaseName: 'easeInOutQuad' + }], mask: false + }); + new Motion('#J-Symmetric', { + lineData: [ + { openEaseName: 'easeInOutQuad', endEaseName: 'null', stroke: '#f2666c' }, + { stroke: '#71B5DE', openEaseName: 'easeInOutCubic', endEaseName: 'easeInOutCubic' }], + mask: false, exposure: 'top' + }); + new Motion('#J-Entry', { + lineData: [ + { openEaseName: 'easeOutQuad', endEaseName: 'easeOutQuad', stroke: '#f2666c' }, + { stroke: '#71B5DE', openEaseName: 'easeOutCubic', endEaseName: 'easeInCubic' }], + mask: true, exposure: 'bottom' + }); + new Motion('#J-Back', { + lineData: [ + { openEaseName: 'easeOutBounce', endEaseName: 'easeOutElastic', stroke: '#70f266' }, + { stroke: '#71B5DE', openEaseName: 'easeOutBack', endEaseName: 'easeInOutBack' }], + mask: false, exposure: 'top' + }); +}; diff --git a/site/component/Motion/motion.js b/site/component/Motion/motion.js new file mode 100644 index 0000000000..d27b5f5156 --- /dev/null +++ b/site/component/Motion/motion.js @@ -0,0 +1,897 @@ +/*eslint-disable */ + +/** + * Created by jljsj on 15/6/24. + */ + +import $ from 'jquery/dist/jquery'; +import TweenMax from 'gsap/src/uncompressed/TweenMax'; + +var $S = function (typename) { + if (typename.indexOf('<') >= 0) { + var node = $(typename); + var node_m = $(document.createElementNS('http://www.w3.org/2000/svg', node[0].tagName.toLowerCase())); + // var node_b=typename.replace(/<[^\s]*|[>,/>]*/gi,""); + for (var i = 0; i < node[0].attributes.length; i++) { + node_m.attr(node[0].attributes[i].name, node[0].attributes[i].value); + } + node_m.html(node.html()); + return node_m; + } + return $(document.createElementNS('http://www.w3.org/2000/svg', typename)); +}; +var SVG = (function () { + var s_node = function (s) { + if (s) { + this.node = $S(s); + } + }; + var n = s_node.prototype = { + _x: 0, + _y: 0, + _scaleX: 1, + _scaleY: 1, + _rotation: 0, + _skewX: 0, + _skewY: 0, + set id(id) { + this.attr('id', id); + }, + get id() { + return this.attr('id'); + }, + set x(x) { + this.setTransform(x, this._y, this._scaleX, this._scaleY, this._rotation, this._skewX, this._skewY); + }, + get x() { + return this._x; + }, + set y(y) { + this.setTransform(this._x, y, this._scaleX, this._scaleY, this._rotation, this._skewX, this._skewY); + }, + get y() { + return this._y; + }, + set scale(x) { + this.setTransform(this._x, this._y, x, x, this._rotation, this._skewX, this._skewY); + }, + get scale() { + return this._scaleX == this._scaleY ? this._scaleX : { + scaleX: this._scaleX, + scaleY: this._scaleY + }; + }, + set scaleX(x) { + this.setTransform(this._x, this._y, x, this._scaleY, this._rotation, this._skewX, this._skewY); + }, + get scaleX() { + return this._scaleX; + }, + set scaleY(y) { + this.setTransform(this._x, this._y, this._scaleX, y, this._rotation, this._skewX, this._skewY); + }, + get scaleY() { + return this._scaleY; + }, + set rotation(r) { + this.setTransform(this._x, this._y, this._scaleX, this._scaleY, r, this._skewX, this._skewY); + }, + get rotation() { + return this._rotation; + }, + set skewX(x) { + this.setTransform(this._x, this._y, this._scaleX, this._scaleY, this._rotation, x, this._skewY); + }, + get skewX() { + return this._skewX; + }, + set skewY(y) { + this.setTransform(this._x, this._y, this._scaleX, this._scaleY, this._rotation, this._skewX, y); + }, + get skewY() { + return this._skewY; + }, + set alpha(a) { + this.attr('opacity', a.toString()); + }, + get alpha() { + return Number(this.attr('opacity')) >= 0 ? Number(this.attr('opacity')) : 1; + }, + set mouseEnabled(Bool) { + if (Bool) { + this.attr('cursor', 'pointer'); + } + }, + get mouseEnabled() { + return !!this.attr('cursor'); + } + }; + n.attr = function (o, d) { + return d ? this.node.attr(o, d) : this.node.attr(o); + }; + n.css = function (o, d) { + return d ? this.node.css(o, d) : this.node.css(o); + }; + n.children = function () { + return this.node.children(); + }; + n.find = function (s) { + return this.node.find(s); + }; + n.addEventListener = function (event, func) { + return this.node.bind(event, func); + }; + n.bind = function (event, func) { + return this.node.bind(event, func); + }; + n.setTransform = function (x, y, scaleX, scaleY, rotation, skewX, skewY) { + var x = x || 0, + y = y || 0, + scaleX = scaleX >= 0 ? scaleX : 1, + scaleY = scaleY >= 0 ? scaleY : 1, + rotation = rotation || 0, + skewX = skewX || 0, + skewY = skewY || 0; + this._x = x, this._y = y, this._scaleX = scaleX, this._scaleY = scaleY, + this._rotation = rotation, this._skewX = skewX, this._skewY = skewY; + var DEG_TO_RAD = Math.PI / 180; + var Matrix = { + a: 1, + b: 0, + c: 0, + d: 1, + tx: 0, + ty: 0, + initialize: function (a, b, c, d, tx, ty) { + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + this.a = a * a1 + b * c1; + this.b = a * b1 + b * d1; + this.c = c * a1 + d * c1; + this.d = c * b1 + d * d1; + this.tx = tx * a1 + ty * c1 + this.tx; + this.ty = tx * b1 + ty * d1 + this.ty; + return this; + } + }; + if (rotation % 360) { + var r = rotation * DEG_TO_RAD; + var cos = Math.cos(r); + var sin = Math.sin(r); + } else { + cos = 1; + sin = 0; + } + var t = Matrix; + if (skewX || skewY) { + skewX = skewX * DEG_TO_RAD || 0; + skewY = skewY * DEG_TO_RAD || 0; + t.initialize(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0); + t.initialize(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y); + } else { + t.initialize(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y); + } + var val = 'matrix(' + t.a + ',' + t.b + ',' + t.c + ',' + t.d + ',' + t.tx + ',' + t.ty + ')'; + this.attr('transform', val); + }; + n.addChild = function (elem) { + if (elem.node) this.node.append(elem.node); + else this.node.append(elem); + }; + n.clear = function (index) { + if (index >= 0) { + this.node.children().eq(index).remove(); + return; + } + return this.node.children().remove(); + }; + n.setFilter = function (dom) { + this.attr('filter', 'url(#' + dom.attr('id') + ')'); + }; + n.setClipPath = function (dom) { + this.attr('clip-path', 'url(#' + dom.attr('id') + ')'); + }; + var SectorStr = function (point, r, angle, startAngle, inr) { + angle = (Math.abs(angle) > 360) ? 360 : angle; + var flag = angle > 180 ? 1 : 0; + startAngle = startAngle * Math.PI / 180; + var str = ''; // "M"+point.x+" "+point.y; + str += ' M' + (point.x + r * Math.cos(startAngle)) + ' ' + (point.y + r * Math.sin(startAngle)); + var angleA, cx, cy; + if (angle >= 360) { + angleA = angle / 2; + angleA = angleA * Math.PI / 180; + angleA = angleA + startAngle; + for (var i = 0; i < 2; i++) { + cx = point.x + r * Math.cos(angleA + i * Math.PI); + cy = point.y + r * Math.sin(angleA + i * Math.PI); + str += 'A' + r + ' ' + r + ' 0 1 1 ' + cx + ' ' + cy; + } + str += ' Z'; + return str; + } + angle = angle * Math.PI / 180; + angleA = angle + startAngle; + + cx = point.x + r * Math.cos(angleA); + cy = point.y + r * Math.sin(angleA); + str += 'A' + r + ' ' + r + ' 0 ' + flag + ' 1 ' + cx + ' ' + cy; + if (angle < Math.PI * 2) { + str += ' L' + point.x + ' ' + point.y; + } + // 画内圆； + if (inr) { + cx = point.x + inr * Math.cos(angleA); + cy = point.y + inr * Math.sin(angleA); + str += 'L' + cx + ' ' + cy; + cx = point.x + inr * Math.cos(startAngle); + cy = point.y + inr * Math.sin(startAngle); + str += 'A' + inr + ' ' + inr + ' 0 ' + flag + ' 0 ' + cx + ' ' + cy; + } + str += ' Z'; + return str; + }; + var Sprite = function (s) { + if (s) { + this.node = $S(s); + } + }; + var sp = Sprite.prototype = new s_node(); + + sp.drawRect = function (obj) { + var t = new SVG.Sprite('rect'); + t.attr(obj).appendTo(this.node); + return t; + }; + sp.drawCirc = function (obj) { + var t = new SVG.Sprite('circle'); + t.attr(obj).appendTo(this.node); + return t; + }; + sp.drawPolygon = function (obj) { + var t = new SVG.Sprite('polygon'); + t.attr(obj).appendTo(this.node); + return t; + }; + sp.drawPath = function (obj) { + var t = new SVG.Sprite('path'); + t.attr(obj).appendTo(this.node); + return t; + }; + sp.drawEllipse = function (obj) { + var t = new SVG.Sprite('ellipse'); + t.attr(obj).appendTo(this.node); + return t; + }; + sp.drawSector = function (point, r, angle, startAngle, color, line, lineColor) { + var str = SectorStr(point, r, angle, startAngle, 1); + var m = $S('path').attr('fill', color); + if (line) { + m.attr({ + stroke: lineColor, + 'stroke-width': line + }); + } + m.attr('d', str).appendTo(this.node); + return m; + }; + sp.drawAnnular = function (point, r, inr, angle, startAngle, color, line, lineColor) { + var str = SectorStr(point, r, angle, startAngle, inr); + var m = $S('path').attr('fill', color); + if (line) { + m.attr({ + stroke: lineColor, + 'stroke-width': line + }); + } + m.attr('d', str).appendTo(this.node); + return m; + }; + + function svg(id) { + this.initialize(id); + } + + var s = svg.prototype = new Sprite(); + s.initialize = function (id) { + this.node = $S('svg'); + this.attr({ + 'width': '100%', + 'height': '100%' + }); + this.defs = new Sprite('defs'); + this.addChild(this.defs); + if (id) + $(id).append(this.node); + else + return this; + }; + var filter = { + blur: function (x, y) { + if (x == null) { + x = 2; + } + var def = y == null ? x : [x, y]; + var t = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); + t.setAttribute('stdDeviation', def); + var filter = $S('filter'); + filter.attr({ + x: '-50%', + y: '-50%', + 'width': '200%', + 'height': '200%' + }); + filter.append(t); + Object.defineProperty(filter, 'id', { + get: function () { + return filter.attr('id'); + }, + set: function (id) { + filter.attr('id', id); + } + }); + return filter; + }, + goo: function (blur) { + var t = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); + t.setAttribute('in', 'SourceGraphic'); + t.setAttribute('stdDeviation', blur); + t.setAttribute('result', 'blur'); + var matrix = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix'); + matrix.setAttribute('in', 'blur'); + matrix.setAttribute('mode', 'matrix'); + matrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -6'); + matrix.setAttribute('result', 'goo'); + var com = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite'); + com.setAttribute('in', 'SourceGraphic'); + com.setAttribute('in2', 'goo'); + com.setAttribute('operator', 'atop'); + var filter = $S('filter'); + filter.append([t, matrix, com]); + return filter; + }, + mask: function (tb, obj) { + var t = $S(tb); + t.attr(obj); + var cp = $S('clipPath'); + cp.append(t); + Object.defineProperty(cp, 'id', { + get: function () { + return cp.attr('id'); + }, + set: function (id) { + cp.attr('id', id); + } + }); + // var cp=document.createElementNS("http://www.w3.org/2000/svg","clipPath");//$S("clippath"); + // cp.appendChild(t[0]); + // Object.defineProperty(cp,"id",{ + // get:function (){ + // return cp.getAttribute("id"); + // }, + // set:function (id){ + // cp.setAttribute("id",id); + // } + // }); + return cp; + } + }; + var text = function (_text, _data) { + this.node = $S('text'); + this.node.text(_text); + if (_data) { + this.node.attr(_data); + } + }; + var t = text.prototype = new s_node; + t.tspan = function (_text, _data) { + this.node = $S('tspan'); + this.node.text(_text); + if (_data) { + this.node.attr(_data); + } + }; + var ts = t.tspan.prototype = new s_node(); + + svg.SectorStr = SectorStr; + svg.filter = filter; + svg.Sprite = Sprite; + svg.Text = text; + svg.Text.tSpan = t.tspan; + return svg; +}()); +var Point = function (x, y) { + this.x = x; + this.y = y; + return this; +}; +var T = TweenMax; +var _playBox = function (svg, startFunc, pauseFunc) { + var playBox = new SVG.Sprite('g'); + playBox.mouseEnabled = true; + + playBox.drawRect({ + width: '100%', + height: '100%', + fill: 'rgba(0,0,0,.35)' + }); + var playBtn = new SVG.Sprite('g'); + playBox.addChild(playBtn); + playBtn.drawCirc({ + r: 30, + fill: 'rgba(255,255,255,1)' + }); + + var playPoints = { + play: 'M-10 -15 L15 0 L-10 15 L-10 0Z M-10 -15 L15 0 L-10 15 L-10 0Z', + pause: 'M-12 -15 L-3 -15 L-3 15 L-12 15Z M3 -15 L12 -15 L12 15 L3 15Z' + }; + var shanjiao = playBtn.drawPath({ + d: playPoints.play, + fill: '#999' + }); + var bBool = false; + var animate_p3 = function (p, _arr) { + var a_arr = []; + for (var i = 0; i < _arr.length; i++) { + a_arr.push(_arr[i].x, _arr[i].y); + } + for (var i = 0; i < a_arr.length; i++) { + if (i == 0 || i == 8) { + a_arr[i] = 'M' + a_arr[i]; + } else if (i == 2 || i == 4 || i == 6 || i == 12 || i == 14) { + a_arr[i] = 'L' + a_arr[i]; + } else if (i == 7 || i == 15) { + a_arr[i] = a_arr[i] + 'Z'; + } + } + p.attr({ + d: a_arr.join().replace(/,/g, ' ') + }); + + }; + + function twennBtn(p, arr, c_arr) { + for (var i = 0; i < arr.length; i++) { + T.killTweensOf(arr[i]); + T.to(arr[i], .6, { + x: c_arr[i].x, + y: c_arr[i].y, + delay: Math.random() * .2, + onUpdate: animate_p3, + onUpdateParams: [p, arr], + ease: Elastic.easeOut + }); + } + } + + playBox.addEventListener('click', function (e) { + var _a = playPoints.play.replace(/[MLZ]/g, '').split(' '); + var _b = playPoints.pause.replace(/[MLZ]/g, '').split(' '); + var _arr = [], + _barr = []; + for (var i = 0; i < _a.length; i += 2) { + var a = {}, + b = {}; + a.x = _a[i]; + a.y = _a[i + 1]; + b.x = _b[i]; + b.y = _b[i + 1]; + _arr.push(a); + _barr.push(b); + } + if (!bBool) { + twennBtn(shanjiao, _arr, _barr); + T.to(playBox, .5, { + delay: .3, + alpha: 0, + onComplete: startFunc + }); + bBool = true; + } else { + twennBtn(shanjiao, _barr, _arr); + T.to(playBox, .5, { + alpha: 1, + onStart: pauseFunc + }); + bBool = false; + } + }); + + function resize() { + playBtn.x = svg.node.width() / 2; + playBtn.y = svg.node.height() / 2; + } + + resize(); + $(window).bind('resize', resize); + return playBox; +}; +var newMotion = function (id, obj) { + if (!id || !obj) { + throw new Error('数据错误'); + } + var self = this; + self.box = $(id); + if (self.box.children().length > 0) return; + + self.box.css({ + 'width': 800 + }); + if (self.box.width() < 500) { + self.box.css('height', 600); + } else { + self.box.css('height', 300); + } + self.data = obj; + self.svg = new SVG(id); + self.svg.css('background-color', '#f3f3f3'); + self.w = self.box.width(); + self.h = self.box.height(); + self.tweenArr = []; + self.t_time = .5; + self.d_time = .5; + self.tweenAllTime = self.t_time * 2 + self.d_time; + + self.addElement(); + + function resize(e) { + self.windowResize(self); + } + + resize(); + $(window).bind('resize', resize); +}; +var nm = newMotion.prototype = {}; +nm.windowResize = function (self) { + var s = self.box.parent().width() / 800 > 1 ? 1 : self.box.parent().width() / 800; + self.box.css({ + 'transform': 'scale(' + s + ')', + 'transform-origin': '0 0' + }); +}; +nm.addElement = function () { + var self = this; + // 绘制坐标系统； + self.coords = new SVG.Sprite('g'); + self.svg.addChild(self.coords); + var coordsStr = 'M80 50 L80 250 L480 250'; + self.coords.drawPath({ + d: coordsStr, + fill: 'none', + 'stroke-width': 2, + stroke: '#d9d9d9' + }); + var timerTxt = new SVG.Text('timer', { + fill: '#999' + }); + self.coords.addChild(timerTxt); + timerTxt.x = 240; + timerTxt.y = 275; + var yaxis = new SVG.Text('Y-axis', { + fill: '#999' + }); + yaxis.width = 20; + yaxis.x = 20; + yaxis.y = 150; + self.coords.addChild(yaxis); + // 动画示例元素； + self.tweenMc = new SVG.Sprite('g'); + if (self.data.mask) { + var mask = new SVG.filter.mask('rect', { + width: 260, + height: 200 + }); + mask.id = 'mask'; + self.svg.defs.addChild(mask); + self.tweenMc.setClipPath(mask); + } + + self.svg.addChild(self.tweenMc); + self.tweenMc.x = 500; + self.tweenMc.y = 50; + // 坐标线； + /** + * 以三次贝塞尔曲线 + * 时间长4秒 + * －分三段－ + * linear + * .5－－.5－－.5 + */ + var c_w = 340, + c_h = 180, + c_x = 100, + c_y = 250, + ct_y = 70, + t_w = c_w * (self.t_time / self.tweenAllTime), + tt_w = t_w + c_x, + d_w = (self.t_time + self.d_time) / self.tweenAllTime; + + for (var i = 0; i < self.data.lineData.length; i++) { + var tb = new SVG.Sprite('g'); + self.coords.addChild(tb); + var str = 'M80 250'; + var open = self.data.lineData[i].open || self.data.lineData[i].openEaseName || 'Linear'; + /* if (open.length !== 4 && open.length !== 0 && typeof open !== 'string') { + throw new Error(open + "数据错误"); + }*/ + if (typeof open !== 'string' && open.length !== 0 && open.length === 4) { + str += 'L100 250' + 'C' + (open[0] * t_w + c_x) + ',' + (c_y - open[1] * c_h) + ' ' + (open[2] * t_w + c_x) + ',' + (c_y - open[3] * c_h) + ' ' + tt_w + ',' + ct_y; + } else if (typeof open === 'string') { + var _ease = EaseLookup.find(open); + if (_ease) { + str += 'L100 250'; + for (var ii = 0; ii < t_w; ii++) { + var at = _ease.getRatio(ii / t_w); // 延用grennsock的缓运。。 + // console.log(1-Tween.Bounce.easeOut(ii,100,-100,t_w)/100,at); + str += 'L' + (c_x + ii) + ',' + (c_y - c_h * at); + } + } else { + if (open !== 'null') { + str += 'L100 250' + 'L' + tt_w + ',' + ct_y; + } else { + str += 'M100 250'; + } + } + } + tb.drawPath({ + d: str, + fill: 'none', + 'stroke-width': 2, + stroke: self.data.lineData[i].stroke || '#999', + 'stroke-dasharray': '0 100%' + }); + + var e_x = c_w * d_w + c_x; + str = 'M' + tt_w + ',' + ct_y + 'L' + e_x + ',' + ct_y; + tb.drawPath({ + d: str, + fill: 'none', + 'stroke-width': 2, + stroke: self.data.lineData[i].stroke || '#999', + 'stroke-dasharray': '0 100%' + }); + var end = self.data.lineData[i].end || self.data.lineData[i].endEaseName || 'Linear'; + + str = 'M' + e_x + ',' + ct_y; + if (typeof open !== 'string' && end.length !== 0 && end.length === 4) { + str += 'C' + (end[0] * t_w + e_x) + ',' + (end[1] * c_h + ct_y) + ' ' + (end[2] * t_w + e_x) + ',' + (end[3] * c_h + ct_y) + ' ' + (c_w + c_x) + ',' + c_y + 'L' + (c_w + c_x + 20) + ',' + c_y; + } else if (typeof end === 'string') { + var e_ease = EaseLookup.find(end); + if (e_ease) { + for (var eii = 0; eii < t_w; eii++) { + var eat = e_ease.getRatio(eii / t_w); + str += 'L' + (e_x + eii) + ',' + (c_h * eat + ct_y); + } + str += 'L' + (c_w + c_x + 20) + ',' + c_y; + } else { + // str += "L" + (c_w + c_x ) + "," + c_y + "L" + (c_w + c_x + 20) + "," + c_y; + if (end !== 'null') { + str += 'L' + (c_w + c_x) + ',' + c_y + 'L' + (c_w + c_x + 20) + ',' + c_y; + } else { + str += 'L' + e_x + ',' + ct_y; + } + } + } + tb.drawPath({ + d: str, + fill: 'none', + 'stroke-width': 2, + stroke: self.data.lineData[i].stroke || '#999', + 'stroke-dasharray': '0 100%' + }); + + // 元素插入盒子里； + var circ = new SVG.Sprite('circle'); + circ.attr({ + 'r': 10, + fill: 'none', + 'stroke-width': 6, + stroke: self.data.lineData[i].stroke || '#999' + }); + self.tweenMc.addChild(circ); + if (self.data.exposure == 'left' || !self.data.exposure) { + circ.x = self.data.mask ? -20 : 20; + circ.y = 50 + i * 110; // self.data.mask?240:180; + } else if (self.data.exposure == 'top') { + circ.x = 100 + i * 100; // self.data.mask?-20:20; + circ.y = self.data.mask ? -20 : 20; + } else if (self.data.exposure == 'right') { + circ.x = self.data.mask ? 280 : 220; + circ.y = 50 + i * 110; // self.data.mask?240:180; + } else { + circ.x = 100 + i * 100; // self.data.mask?-20:20; + circ.y = self.data.mask ? 240 : 180; + } + + } + + // 建播放按钮； + self.playBox = _playBox(self.svg, function () { + self.start(self); + }, function () { + self.pause(self); + }); + self.svg.addChild(self.playBox); +}; +nm.pause = function (self) { + for (var i = 0; i < self.tweenArr.length; i++) { + var tl = self.tweenArr[i]; + tl.pause(); + } +}; +nm.resume = function (self) { + for (var i = 0; i < self.tweenArr.length; i++) { + var tl = self.tweenArr[i]; + tl.resume(); + } +}; +nm.start = function (self) { + if (self.tweenArr.length) { + self.resume(self); + return; + } + var lineBox = self.coords.find('g'); + for (var i = 0; i < lineBox.length; i++) { + var m = lineBox.eq(i); + var tl = new TimelineMax({ + repeat: -1, + repeatDelay: 1 + }); + self.tweenArr.push(tl); + for (var ii = 0; ii < m.find('path').length; ii++) { + var p = m.find('path').eq(ii); + var lineLength = p[0].getTotalLength(); + var time = 1, + _ease = Power2.easeInOut; + + if (ii == 0) { + time = self.t_time; + // _ease = EaseLookup.find(self.data.lineData[i].openEaseName); + } else if (ii == 1) { + time = self.d_time; + // _ease = Power0.easeNone; + } else { + time = self.t_time; + // _ease = EaseLookup.find(self.data.lineData[i].endEaseName); + } + /* if (!self.data.lineData[i].open.length) { + _ease = Linear.easeNone; + }*/ + tl.add(T.to(p, time, { + 'stroke-dasharray': lineLength + ' 100%', + ease: Linear.easeNone + })); + // tl.to(p,time,{"stroke-dasharray":"100% 100%",ease: Power2.easeInOut}) + } + // circ动画 + var ctl = new TimelineMax({ + repeat: -1, + repeatDelay: 1 + }); + var ciric = self.tweenMc.children().eq(i); + + var oease = EaseLookup.find(self.data.lineData[i].openEaseName) || Linear.easeNone, + eease = EaseLookup.find(self.data.lineData[i].endEaseName) || Linear.easeNone; + // console.log(self.data.lineData[i].open,oease,eease,i); + // if(self.data.lineData[i].openEaseName=="Bounce.easeOut") + if (self.data.lineData[i].openEaseName && self.data.lineData[i].openEaseName.indexOf('Bounce') >= 0) { + if (self.data.lineData[i].openEaseName.indexOf('InOut') >= 0) { + oease = Bounce.easeInOut; + } else if (self.data.lineData[i].openEaseName.indexOf('In') >= 0) { + oease = Bounce.easeIn; + } else { + oease = Bounce.easeOut; + } + } + var cx = {}, + _x = {}; + if (self.data.exposure == 'left' || !self.data.exposure) { + _x = { + x: 240 + }; + cx = { + x: self.data.mask ? -20 : 20 + }; + } else if (self.data.exposure == 'top') { + _x = { + y: 180 + }; + cx = { + y: self.data.mask ? -20 : 20 + }; + } else if (self.data.exposure == 'right') { + _x = { + x: 20 + }; + cx = { + x: self.data.mask ? 280 : 220 + }; + } else { + _x = { + y: 20 + }; + cx = { + y: self.data.mask ? 240 : 180 + }; + } + if (self.data.lineData[i].openEaseName === 'null' && self.data.lineData[i].endEaseName === 'null') { + var t = cx; + cx = {}; + cx.startAt = t; + cx.delay = self.d_time; + var tt = _x; + _x = {}; + _x.startAt = tt; + } else if (self.data.lineData[i].openEaseName === 'null') { + var tt = _x; + _x = {}; + _x.startAt = tt; + cx.ease = eease, cx.delay = self.d_time; + } else if (self.data.lineData[i].endEaseName === 'null') { + var t = cx; + cx = {}; + cx.startAt = t; + cx.delay = self.d_time; + _x.ease = oease; + } else { + _x.ease = oease, cx.ease = eease, cx.delay = self.d_time; + } + ctl.to(ciric, self.t_time, _x).to(ciric, self.t_time, cx); + self.tweenArr.push(ctl); + } +}; +module.exports = newMotion; + +var motionVideo = { + video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'], + videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'], + init: function () { + var self = this; + + $('.video-player').each((i, videoBox) => { + var $videoBox = $(videoBox); + if ($videoBox.children().length > 0) return; + + $('').appendTo($videoBox); + var svg = new SVG(); + $videoBox.append(svg.node); + var video = $videoBox.find('video'); + if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) { + $('').appendTo(video); + } else { + $('').appendTo(video); + } + video.css({ + 'width': '100%' + }); + video.append(svg); + svg.css({ + 'position': 'absolute', + 'top': 0, + 'left': 0 + }); + var playBox = _playBox(svg); + svg.addChild(playBox); + playBox.addEventListener('click', function (e) { + var m = $(this), + video = m.parent().parent().find('video'); + var bool = m.attr('play'); + if (bool) { + this.setTimeout = null; + video[0].pause(); + m.removeAttr('play'); + } else { + this.setTimeout = setTimeout(function () { + video[0].play(); + }, 500); + + m.attr('play', 'true'); + } + }); + }); + } +}; +module.exports.motionVideo = motionVideo; diff --git a/site/component/Motion/page-transition.js b/site/component/Motion/page-transition.js new file mode 100644 index 0000000000..56a267667d --- /dev/null +++ b/site/component/Motion/page-transition.js @@ -0,0 +1,5 @@ +import Motion from './motion'; + +module.exports = function () { + Motion.motionVideo.init(); +}; From f38aa9b64224a878cec8640445bc80e90b94f741 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 9 Mar 2016 14:56:19 +0800 Subject: [PATCH 0101/1555] deps: add missing devDependencies --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index f35382d455..a5b9b03123 100644 --- a/package.json +++ b/package.json @@ -98,9 +98,11 @@ "eslint-tinker": "^0.3.1", "extract-text-webpack-plugin": "^1.0.1", "gh-pages": "^0.9.0", + "gsap": "^1.18.2", "history": "^1.17.0", "instantclick": "^3.1.0", "jest-cli": "~0.8.0", + "jquery": "^2.2.1", "json-loader": "^0.5.1", "jsonp": "^0.2.0", "less": "~2.6.0", From 770a408fe35b68af38c0b464324935ed0680b10a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 9 Mar 2016 15:09:10 +0800 Subject: [PATCH 0102/1555] chore: optimize UI --- site/common/styles/toc.less | 4 ++++ site/component/ComponentDoc/index.jsx | 10 ++++++---- site/component/MainContent/index.jsx | 4 +++- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/site/common/styles/toc.less b/site/common/styles/toc.less index 1debf0d683..89043f4802 100644 --- a/site/common/styles/toc.less +++ b/site/common/styles/toc.less @@ -39,6 +39,10 @@ color: #2db7f5; } +.toc-affix { + z-index: 9; +} + .demos-anchor { color: #aaa; position: absolute; diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index 6284b4b8b8..cd0e9b5a2d 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Link } from 'react-router'; import classNames from 'classnames'; -import antd, { Row, Col, Icon } from '../../../'; +import antd, { Row, Col, Icon, Affix } from '../../../'; import Demo from '../Demo'; import BrowserDemo from '../BrowserDemo'; import * as utils from '../utils'; @@ -72,9 +72,11 @@ export default class ComponentDoc extends React.Component { return (
    -
      - { jumper } -
    + +
      + { jumper } +
    +

    {meta.chinese || meta.english}

    { description.map(utils.objectToComponent.bind(null, location.pathname)) } diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index 9ff14c82e5..10915e2bb3 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -70,7 +70,9 @@ export default class MainContent extends React.Component { return config.typeOrder[a] - config.typeOrder[b]; }) .map((type, index) => { - const groupItems = obj[type].map(this.generateMenuItem.bind(this, false)); + const groupItems = obj[type].sort((a, b) => { + return a.english.charCodeAt(0) - b.english.charCodeAt(0); + }).map(this.generateMenuItem.bind(this, false)); return ( From 380deaf54ceb218603e4e8fa887872278b5fa3db Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Mar 2016 09:35:09 +0800 Subject: [PATCH 0103/1555] fix: Row's children could be null --- components/layout/row.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/layout/row.jsx b/components/layout/row.jsx index 46386d2132..1c8b86f905 100644 --- a/components/layout/row.jsx +++ b/components/layout/row.jsx @@ -29,15 +29,17 @@ const Row = React.createClass({ marginRight: gutter / -2, ...style, } : style; - const cols = Children.map(children, col => - cloneElement(col, { + const cols = Children.map(children, col => { + if (col === null) return null; + + return cloneElement(col, { style: gutter > 0 ? { paddingLeft: gutter / 2, paddingRight: gutter / 2, ...col.props.style } : col.props.style, - }) - ); + }); + }); return
    {cols}
    ; }, }); From 2fd2f829864acb509a190a123ab049eea294a22e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Mar 2016 09:41:51 +0800 Subject: [PATCH 0104/1555] css: update layout demos' style --- components/layout/demo/gutter.md | 8 ++++---- components/layout/index.md | 15 +++++++++------ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/components/layout/demo/gutter.md b/components/layout/demo/gutter.md index 345d2b8bb5..ab54c0fb69 100644 --- a/components/layout/demo/gutter.md +++ b/components/layout/demo/gutter.md @@ -12,16 +12,16 @@ import { Row, Col } from 'antd'; ReactDOM.render(
    - +
    .col-6
    - +
    .col-6
    - +
    .col-6
    - +
    .col-6
     diff --git a/components/layout/index.md b/components/layout/index.md index b43825e217..8fe94a6993 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -116,21 +116,24 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 background: #F5F5F5; } -.markdown .row div, -.code-box-demo .row div, -.markdown .row-flex div, -.code-box-demo .row-flex div { +.markdown .row > div, +.code-box-demo .row > div, +.markdown .row-flex > div, +.code-box-demo .row-flex > div { padding: 5px 0; text-align: center; border-radius: 6px; min-height: 30px; - background: #6AC2F5; - border: 1px solid rgba(0, 0, 0, 0.1); margin-top: 10px; margin-bottom: 10px; color: #fff; } +.code-box-demo .row > div:not(.gutter-row) { + background: #6AC2F5; + border: 1px solid rgba(0, 0, 0, 0.1); +} + .markdown .row .demo-col, .code-box-demo .row .demo-col { text-align: center; From a867231253c96b7906942152d76ff1f73dfb0a3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=82=E9=80=9A?= Date: Thu, 10 Mar 2016 11:39:10 +0800 Subject: [PATCH 0105/1555] fix doc. replace MenuItem with Menu.Item. --- components/menu/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/menu/index.md b/components/menu/index.md index 28fa33bfae..5f6e8ea9c0 100644 --- a/components/menu/index.md +++ b/components/menu/index.md @@ -17,9 +17,9 @@ ```html - 菜单项 + 菜单项 - 子菜单项 + 子菜单项 ``` From e17b5f599f416aa1d385d4574e11abf5f522589b Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 12:30:49 +0800 Subject: [PATCH 0106/1555] Add hover delay for Dropdown --- components/dropdown/dropdown.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index 8cb236f885..8c0dfe0b31 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -6,6 +6,8 @@ export default React.createClass({ return { transitionName: 'slide-up', prefixCls: 'ant-dropdown', + mouseEnterDelay: 0.15, + mouseLeaveDelay: 0.1, }; }, render() { From d7d1a90e0588e4a4ec58d94e1bd378db3737ca0a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 15:00:59 +0800 Subject: [PATCH 0107/1555] improve button style --- style/components/button.less | 21 ++++++++++++--------- style/mixins/button.less | 1 + 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/style/components/button.less b/style/components/button.less index 00a96720a1..d2d880d4f5 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -101,22 +101,25 @@ &-clicked:before { content: ''; position: absolute; - top: -6px; - left: -6px; - bottom: -6px; - right: -6px; + top: 0; + left: 0; + bottom: 0; + right: 0; border-radius: inherit; z-index: -1; - background: inherit; - opacity: 1; - transform: scale3d(0.5, 0.5, 1); - animation: buttonEffect 0.48s ease forwards; + border: 0 solid @primary-color; + opacity: 0.44; + animation: buttonEffect 0.36s ease forwards; } } @keyframes buttonEffect { to { opacity: 0; - transform: scale3d(1, 1, 1); + top: -6px; + left: -6px; + bottom: -6px; + right: -6px; + border-width: 6px; } } diff --git a/style/mixins/button.less b/style/mixins/button.less index d1987ed60b..0def2ba401 100644 --- a/style/mixins/button.less +++ b/style/mixins/button.less @@ -77,6 +77,7 @@ cursor: pointer; background-image: none; border: 1px solid transparent; + font-weight: 500; // outline: none; white-space: nowrap; line-height: @line-height-base; From 12e51707bf0217dfe2a1566af3b570c51e29bc52 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Mar 2016 12:16:27 +0800 Subject: [PATCH 0108/1555] chore: remove duplicated fileName --- components/locale-provider/index.md | 1 + package.json | 2 +- scripts/build-common.js | 2 +- scripts/build-demos-list.js | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/locale-provider/index.md b/components/locale-provider/index.md index dfe6ee1c59..4cbdcb6091 100644 --- a/components/locale-provider/index.md +++ b/components/locale-provider/index.md @@ -3,6 +3,7 @@ - category: Components - chinese: 国际化 - cols: 1 +- type: 其它 --- diff --git a/package.json b/package.json index a5b9b03123..ec26a0b570 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "warning": "~2.1.0" }, "devDependencies": { - "antd-md-loader": "0.1.0-beta.8", + "antd-md-loader": "0.1.0-beta.9", "atool-build": "^0.5.0", "babel-cli": "^6.2.0", "babel-core": "^6.2.1", diff --git a/scripts/build-common.js b/scripts/build-common.js index 9715bc0256..6ab4ad3819 100644 --- a/scripts/build-common.js +++ b/scripts/build-common.js @@ -10,7 +10,7 @@ module.exports = function buildCommon(dirs, outputFile) { let content = 'module.exports = {'; mds.forEach((fileName) => { - content += `\n '${fileName}': require('antd-md?fileName=${fileName}!../../${fileName}'),`; + content += `\n '${fileName}': require('antd-md!../../${fileName}'),`; }); content += '\n};'; diff --git a/scripts/build-demos-list.js b/scripts/build-demos-list.js index 6bbc37904a..7b3312379d 100644 --- a/scripts/build-demos-list.js +++ b/scripts/build-demos-list.js @@ -20,7 +20,7 @@ module.exports = function buildDemosList(dirs, outputPath) { Object.keys(groupedDemos).forEach((key) => { content += `\n '${key}': [`; groupedDemos[key].forEach((fileName) => { - content += `\n require('antd-md?demo&fileName=${fileName}!../../${fileName}'),`; + content += `\n require('antd-md?demo!../../${fileName}'),`; }); content += '\n ],' }); From 6e13535919e44124c178b44cfa56f77c8e0548cc Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 15:19:50 +0800 Subject: [PATCH 0109/1555] update docs --- docs/spec/alignment.md | 2 +- docs/spec/colors.md | 2 +- docs/spec/contrast.md | 2 +- docs/spec/direct.md | 2 +- docs/spec/font.md | 2 +- docs/spec/invitation.md | 2 +- docs/spec/lightweight.md | 2 +- docs/spec/principle.md | 20 ++++++++++---------- docs/spec/proximity.md | 4 ++-- docs/spec/reaction.md | 2 +- docs/spec/repetition.md | 2 +- docs/spec/stay.md | 2 +- docs/spec/transition.md | 2 +- docs/spec/typography.md | 2 +- 14 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index d85b631ee9..d9f837d853 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -1,6 +1,6 @@ # 对齐 -- category: 设计原则 +- category: 十大原则 - order: 2 - subtitle: Alignment diff --git a/docs/spec/colors.md b/docs/spec/colors.md index cb093b8d88..21484602c9 100644 --- a/docs/spec/colors.md +++ b/docs/spec/colors.md @@ -1,6 +1,6 @@ # 色彩 -- category: 基础 +- category: 设计基础 - order: 2 --- diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index ad8d115109..093403dddf 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -1,6 +1,6 @@ # 对比 -- category: 设计原则 +- category: 十大原则 - order: 3 - subtitle: Contrast diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 366ecb477f..82dfed5ac7 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -1,6 +1,6 @@ # 直截了当 -- category: 设计原则 +- category: 十大原则 - order: 5 - subtitle: Make it Direct diff --git a/docs/spec/font.md b/docs/spec/font.md index 0954633e8e..f60f2b818f 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -1,6 +1,6 @@ # 字体 -- category: 基础 +- category: 设计基础 - order: 0 --- diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 744f7e39e6..b6288b2324 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -1,6 +1,6 @@ # 提供邀请 -- category: 设计原则 +- category: 十大原则 - order: 8 - subtitle: Provide Invitation diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index b944c91dcd..b81340acdd 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -1,6 +1,6 @@ # 简化交互 -- category: 设计原则 +- category: 十大原则 - order: 6 - subtitle: Keep it Lightweight diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 9fc800fed1..68c5e3144c 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -1,6 +1,6 @@ -# 十大原则 +# 引言 -- category: 设计原则 +- category: 十大原则 - order: 0 --- @@ -12,14 +12,6 @@ > 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。
    - - - - Web 界面设计 - 作者: Bill Scott / Theresa Neil - 出版社: 电子工业出版社 - - @@ -28,6 +20,14 @@ 出版社: 人民邮电出版社 + + + + Web 界面设计 + 作者: Bill Scott / Theresa Neil + 出版社: 电子工业出版社 + +
    #### 中台十大设计原则 diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 84886d12c5..35854db1d9 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -1,12 +1,12 @@ # 亲密性 -- category: 设计原则 +- category: 十大原则 - order: 1 - subtitle: Proximity --- -『物理位置的接近意味着存在关联』，也就是说如果信息之间关联性越高，它们之间的距离越接近，也越像一个视觉单元；反之，则它们的距离越远，越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 +『物理位置的接近意味着存在关联』，也就是说如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 ## 纵向间距关系 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 8b84620302..21e665fa7d 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -1,6 +1,6 @@ # 即时反应 -- category: 设计原则 +- category: 十大原则 - order: 10 - subtitle: Stay in the Page diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 4b0edebe21..67fbbbf138 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -1,6 +1,6 @@ # 重复 -- category: 设计原则 +- category: 十大原则 - order: 4 - subtitle: Repetition diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 30836f5043..a0f01e86bc 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -1,6 +1,6 @@ # 足不出户 -- category: 设计原则 +- category: 十大原则 - order: 6 - subtitle: Stay in the Page diff --git a/docs/spec/transition.md b/docs/spec/transition.md index c799015dc7..dbde72dcff 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -1,6 +1,6 @@ # 巧用过渡 -- category: 设计原则 +- category: 十大原则 - order: 9 - subtitle: Use Transition diff --git a/docs/spec/typography.md b/docs/spec/typography.md index 4d0f09f66c..bb527e639f 100644 --- a/docs/spec/typography.md +++ b/docs/spec/typography.md @@ -1,6 +1,6 @@ # 排版 -- category: 基础 +- category: 设计基础 - order: 1 --- From 63a549dbc9e5c048b6c013c35c6700046bda06d5 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Mar 2016 15:28:53 +0800 Subject: [PATCH 0110/1555] chore: generate require path automatically --- scripts/build-common.js | 4 +++- scripts/build-demos-list.js | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/scripts/build-common.js b/scripts/build-common.js index 6ab4ad3819..d832179a9e 100644 --- a/scripts/build-common.js +++ b/scripts/build-common.js @@ -1,6 +1,7 @@ 'use strict'; const fs = require('fs'); +const path = require('path'); const R = require('ramda'); const utils = require('./utils'); @@ -10,7 +11,8 @@ module.exports = function buildCommon(dirs, outputFile) { let content = 'module.exports = {'; mds.forEach((fileName) => { - content += `\n '${fileName}': require('antd-md!../../${fileName}'),`; + const requirePath = path.relative(path.dirname(outputFile), fileName); + content += `\n '${fileName}': require('antd-md!${requirePath}'),`; }); content += '\n};'; diff --git a/scripts/build-demos-list.js b/scripts/build-demos-list.js index 7b3312379d..23f86d92e6 100644 --- a/scripts/build-demos-list.js +++ b/scripts/build-demos-list.js @@ -20,7 +20,8 @@ module.exports = function buildDemosList(dirs, outputPath) { Object.keys(groupedDemos).forEach((key) => { content += `\n '${key}': [`; groupedDemos[key].forEach((fileName) => { - content += `\n require('antd-md?demo!../../${fileName}'),`; + const requirePath = path.relative(path.dirname(outputPath), fileName) + content += `\n require('antd-md?demo!${requirePath}'),`; }); content += '\n ],' }); From f6a5c7ad2e554b3434b19f7ef2de9f95053ebf8e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Mar 2016 16:01:39 +0800 Subject: [PATCH 0111/1555] site: support header jumper --- site/component/Header/index.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index 0fd34fcff4..21ab470183 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -8,7 +8,7 @@ import './index.less'; import componentsList from '../../../_site/data/react-components'; export default class Header extends React.Component { handleSearch(value) { - console.log(value); + this.props.history.push({ pathname: value }); } render() { @@ -40,7 +40,9 @@ export default class Header extends React.Component { From 959db3f79306cfae3964cd23e4641d07c7e46f9a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 16:22:52 +0800 Subject: [PATCH 0112/1555] improve popconfirm style, close #1156 --- components/popconfirm/index.jsx | 6 +++--- style/components/popover.less | 8 ++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index 4c04c57eab..ad1dbb5de1 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -68,10 +68,10 @@ export default React.createClass({ const overlay = (
    -

    +

    - {title} -

    +
    {title}
    +
    diff --git a/style/components/popover.less b/style/components/popover.less index 5d23e71e05..3bd06814b5 100644 --- a/style/components/popover.less +++ b/style/components/popover.less @@ -102,9 +102,13 @@ padding: 8px 0 16px; font-size: 12px; color: @text-color; - .anticon { - margin-right: 8px; + > .anticon { color: @error-color; + line-height: 17px; + position: absolute; + } + &-title { + padding-left: 20px; } } From 2bdfd36ba0442bf19d815a5f5648643f88eb2027 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 16:24:47 +0800 Subject: [PATCH 0113/1555] fix style --- style/mixins/button.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/mixins/button.less b/style/mixins/button.less index 0def2ba401..d1987ed60b 100644 --- a/style/mixins/button.less +++ b/style/mixins/button.less @@ -77,7 +77,6 @@ cursor: pointer; background-image: none; border: 1px solid transparent; - font-weight: 500; // outline: none; white-space: nowrap; line-height: @line-height-base; From 1e08883315254caf44db7193e5a8ff718670c7bc Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 16:55:02 +0800 Subject: [PATCH 0114/1555] update table selection demo --- .../table/demo/row-selection-and-operation.md | 2 +- components/table/demo/row-selection-props.md | 14 +------------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 5f2244cd90..d303aa96cf 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -33,7 +33,7 @@ for (let i = 0; i < 46; i++) { const App = React.createClass({ getInitialState() { return { - selectedRowKeys: [], + selectedRowKeys: [], // 这里配置默认勾选列 loading: false, }; }, diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md index ed3af7d2b2..3f52c18deb 100644 --- a/components/table/demo/row-selection-props.md +++ b/components/table/demo/row-selection-props.md @@ -12,9 +12,7 @@ import { Table } from 'antd'; const columns = [{ title: '姓名', dataIndex: 'name', - render(text) { - return {text}; - } + render: text => {text}, }, { title: '年龄', dataIndex: 'age' @@ -43,19 +41,9 @@ const data = [{ const rowSelection = { getCheckboxProps(record) { return { - defaultChecked: record.name === '李大嘴', // 配置默认勾选的列 disabled: record.name === '胡彦祖' // 配置无法勾选的列 }; }, - onChange(selectedRowKeys) { - console.log(`selectedRowKeys changed: ${selectedRowKeys}`); - }, - onSelect(record, selected, selectedRows) { - console.log(record, selected, selectedRows); - }, - onSelectAll(selected, selectedRows) { - console.log(selected, selectedRows); - }, }; ReactDOM.render( From 7db2a33f1d627c62e1516de6caebe71f0cfc91db Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 10 Mar 2016 16:56:17 +0800 Subject: [PATCH 0115/1555] site: filename as pathname --- site/component/Header/index.jsx | 16 ++++++++-------- site/component/MainContent/index.jsx | 25 +++++++++++++++++-------- site/entry/index.jsx | 8 ++++---- site/entry/utils.js | 9 +++++---- 4 files changed, 34 insertions(+), 24 deletions(-) diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index 21ab470183..ccac93c177 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -52,13 +52,13 @@ export default class Header extends React.Component { 首页 - - + + 实践 - - + + 模式 @@ -67,13 +67,13 @@ export default class Header extends React.Component { 组件 - - + + 语言 - - + + 资源 diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index 10915e2bb3..8b71637200 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -5,9 +5,13 @@ import { Row, Col, Menu } from '../../../'; import config from '../../website.config'; const SubMenu = Menu.SubMenu; -function dashed(name) { - return name.toLowerCase().trim().replace(/\s+/g, '-'); -} +const fileNameUrlMap = { + 'docs/react/introduce': 'components/introduce', + 'docs/react/getting-started': 'components/getting-started', + 'docs/react/install': 'components/install', + 'docs/react/upgrade-notes': 'components/upgrade-notes', + CHANGELOG: 'components/changelog', +}; export default class MainContent extends React.Component { componentDidMount() { @@ -29,13 +33,18 @@ export default class MainContent extends React.Component { } } - getActiveMenuItem(props, index) { + getActiveMenuItem(props) { const routes = props.routes; - return routes[routes.length - 1].path || index; + return routes[routes.length - 1].path; + } + + fileNameToPath(fileName) { + const snippets = fileName.replace(/(\/index)?\.md$/i, '').split('/'); + return snippets[snippets.length - 1]; } generateMenuItem(isTop, item) { - const key = dashed(item.english); + const key = this.fileNameToPath(item.fileName); const text = isTop ? item.chinese || item.english : [ @@ -43,9 +52,9 @@ export default class MainContent extends React.Component { { item.chinese } ]; const disabled = item.disabled === 'true'; - + const url = item.fileName.replace(/(\/index)?\.md$/i, ''); const child = !item.link ? - + { text } : diff --git a/site/entry/index.jsx b/site/entry/index.jsx index 23e22c69a7..7d928326b6 100644 --- a/site/entry/index.jsx +++ b/site/entry/index.jsx @@ -40,16 +40,16 @@ ReactDOM.render( { reactComponentsChildren } - + { practiceChildren } - + { patternChildren } - + { specChildren } - + { resourceChildren } diff --git a/site/entry/utils.js b/site/entry/utils.js index 6212be306f..e862383855 100644 --- a/site/entry/utils.js +++ b/site/entry/utils.js @@ -5,8 +5,9 @@ import Article from '../component/Article'; import ComponentDoc from '../component/ComponentDoc'; import demosList from '../../_site/data/demos-list'; -function dashed(name) { - return name.toLowerCase().trim().replace(/\s+/g, '-'); +function fileNameToPath(fileName) { + const snippets = fileName.replace(/(\/index)?\.md$/i, '').split('/'); + return snippets[snippets.length - 1]; } function getMenuItems(data) { @@ -59,7 +60,7 @@ export function generateChildren(data) { (props) => ; return ( ); }); @@ -70,7 +71,7 @@ export function generateChildren(data) { }); children.unshift( + to={fileNameToPath(firstChild.fileName)} /> ); return children; } From 88c9279139d87dea76a1974564811165ded6d7ae Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Thu, 10 Mar 2016 17:21:37 +0800 Subject: [PATCH 0116/1555] update docs --- docs/spec/direct.md | 44 ++++++++++++++++++++- docs/spec/invitation.md | 72 +++++++++++++++++++++++++++++++++++ docs/spec/lightweight.md | 29 +++++++++++++- docs/spec/reaction.md | 71 +++++++++++++++++++++++++++++++++- docs/spec/stay.md | 82 ++++++++++++++++++++++++++++++++++++++++ docs/spec/transition.md | 62 ++++++++++++++++++++++++++++++ 6 files changed, 355 insertions(+), 5 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 366ecb477f..cd2c1a8eb7 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -10,15 +10,55 @@ ## 页内编辑 +单击编辑示例 + 单字段行内编辑 当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。 +
    + +文字链/图标编辑示例 + 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。 +
    + +多字段行内编辑示例 多字段行内编辑 -注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。 +>注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的[『解释刚刚发生了什么』](../spec/transition#解释刚刚发生了什么)来消除这种视觉影响。 + +
    + +更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#交互)中的内容。 + +## 利用拖放 + +拖放列表示例 + +拖放列表 + +只能限制在一个维度（上/下或者左/右）进行拖放。 + +
    + +拖放图片/文件示例 + +拖放图片/文件 + +
    + +拖放对象（敬请期待） + +拖放多个对象（敬请期待） + + +## 直接选择（敬请期待） -更多有关『页内编辑』的模式，可查看『模式』-『表格』-『交互』中的内容。 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 744f7e39e6..b95ca51901 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -5,3 +5,75 @@ - subtitle: Provide Invitation --- + + +很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。 + +邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 + + +> 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 + +>可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》 + +## 静态邀请 + +指通过可视化技术在页面上提供引导交互的邀请。 + +
    + +文本邀请示例 + +白板式邀请示例 + +未完成邀请示例 + +引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 +常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。 + +
    + +漫游探索邀请示例 1 + +漫游探索邀请示例 2 + +漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。 + +>注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。 + + +## 动态邀请 + +指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。 + +
    + +悬停邀请示例 1 + +悬停邀请示例 2 + +悬停邀请：在鼠标悬停期间提供邀请。 + + +
    + +推论邀请示例 + +推论邀请：用于交互期间，合理推断用户可能产生的需求。 + +
    + +更多内容邀请示例 + +更多内容邀请：用于邀请用户查看更多内容。 + + +
    + +预期功能邀请 (敬请期待) + +
    + +拖放邀请 (敬请期待) + diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index b944c91dcd..5d42f3d460 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -12,23 +12,48 @@ ## 实时可见工具 +实时可见工具示例--摘自知乎 + 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 ## 悬停即现工具 +悬停即现工具示例 + 如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 ## 开关显示工具 +开关显示工具示例 + 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 ## 交互中的工具 +推荐示例 + +推荐示例 + +不推荐示例 + + 如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。 -此处也可以运用『提供邀请』相关的知识点。 +此处也可以运用[『提供邀请』](../spec/invitation) 相关的知识点。 ## 可视区域 ≠ 可点击区域 -注：在移动端尤其适用。 +文字链热区示例 + +在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。 + +
    + +按钮热区示例 + +当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。 + +>注：在移动端尤其适用。 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 8b84620302..42fd5f2abe 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -2,6 +2,75 @@ - category: 设计原则 - order: 10 -- subtitle: Stay in the Page +- subtitle: React Immediately --- + +『提供邀请』的强大体现在**交互之前**给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在**交互期间**为用户提供视觉反馈；『即时反应』的重要性体现在**交互之后**立即给出反馈。 + +就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。 + +虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。 + +> 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》 + +## 查询模式 + +自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 + +确定类目示例 + +不确定类目示例 + +根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。 + +
    + +实时搜索示例 + +实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。 + +
    + +微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式』－『高级搜索』](../pattern/advanced-search)。 + + +## 反馈模式 + +实时预览示例 + +实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 + +>注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。 + +
    + +渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户』-『渐进式展现』](../spec/stay#流程处理)。 + +
    + +按钮加载示例 + +表格加载示例 + +富列表加载示例 + +页面加载示例 + + +进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 +常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。 + +
    + +点击刷新示例 + +点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。 + +
    + +定时示例 + +定时刷新：无需用户介入，定时展示新内容。 diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 30836f5043..527a0dbece 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -5,3 +5,85 @@ - subtitle: Stay in the Page --- + +能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 + +> 变换盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 + +>心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 + +## 覆盖层 + +推荐示例 + +推荐示例 + +不推荐示例 + +二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。 + +
    + +详情覆盖层示例 + +详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。 + +> 注：使用『悬停』激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层 + +
    + +输入覆盖层示例 + +输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 + +## 嵌入层 + +列表嵌入层示例 + +列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。 + +
    + + +详情嵌入层(敬请期待) + +
    + +标签页示例 + +标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 + +## 虚拟页面 + +在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。 + +无限加载和分页器，详见[『模式』-『列表』-『显示长列表』](../pattern/list#显示长列表) + +走马灯，详见[『模式』-『列表』-『显示图片』](../pattern/list#显示图片) + +
    + +伸缩式用户界面（敬请期待） + + +## 流程处理 + +长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。 + +
    + +渐进式展现示例 + +渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。 + +
    + +配置程序示例 + +配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。 + +
    + +弹出框覆盖层示例 + +弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 \ No newline at end of file diff --git a/docs/spec/transition.md b/docs/spec/transition.md index c799015dc7..c65fb90508 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -5,3 +5,65 @@ - subtitle: Use Transition --- + +人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 + + +## 在视图变化时保持上下文 + +滑入与滑出示例 + +滑入与滑出：可以有效构建虚拟空间。 + +
    + +传送带示例 + +传送带：可极大地扩展虚拟空间。 + +
    + +折叠窗口示例 + +折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。 + +
    + +视图定位示例 + + +视图定位：在视图切换时，保持定位。 + +## 解释刚刚发生了什么 + +对象增加示例 + +对象增加：在列表/表格中，新增了一个对象。 + +
    + +对象删除示例 + +对象删除：在列表/表格中，删除了一个对象。 + +
    + +对象更改示例 + +对象更改：在列表/表格中，更改了一个对象。 + + +## 改善感知性能 + +当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。 + +
    + +按钮过渡示例 + +页面过渡示例 + + +常见过渡效果：『按钮过渡』、『页面过渡』。 + From 7b13bf5f6ee2ff001c20c3f656ed9e632c7d8694 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Thu, 10 Mar 2016 17:41:46 +0800 Subject: [PATCH 0117/1555] update docs --- docs/spec/direct.md | 11 +++++++++++ docs/spec/invitation.md | 8 ++++++++ docs/spec/lightweight.md | 23 +++++++++++++++++++++++ docs/spec/reaction.md | 8 +++++++- docs/spec/stay.md | 15 +++++++++++++++ docs/spec/transition.md | 10 ++++++++++ 6 files changed, 74 insertions(+), 1 deletion(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index b9527d5d5e..9cda9fd51e 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -8,6 +8,10 @@ 正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。 +
    + +--- + ## 页内编辑 单击编辑示例。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 +
    + +--- + ## 实时可见工具 + 实时可见工具示例--摘自知乎 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 +
    + +--- + ## 悬停即现工具 + 悬停即现工具示例 如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 +
    + +--- + ## 开关显示工具 + 开关显示工具示例 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 +
    + +--- + ## 交互中的工具 推荐示例 @@ -44,6 +63,10 @@ 此处也可以运用[『提供邀请』](../spec/invitation) 相关的知识点。 +
    + +--- + ## 可视区域 ≠ 可点击区域 文字链热区示例 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 016d3e640f..386d9e58d8 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -14,11 +14,15 @@ > 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》 +
    + +--- + ## 查询模式 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 -确定类目示例 +确定类目示例 不确定类目示例 @@ -35,7 +39,9 @@ 微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式』－『高级搜索』](../pattern/advanced-search)。 +
    +--- ## 反馈模式 实时预览示例 @@ -36,6 +40,10 @@ 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 +
    + +--- + ## 嵌入层 列表嵌入层示例 @@ -53,6 +61,10 @@ 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 +
    + +--- + ## 虚拟页面 在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。 @@ -65,6 +77,9 @@ 伸缩式用户界面（敬请期待） +
    + +--- ## 流程处理 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 9bfb87c43a..65a2f1a228 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -8,6 +8,9 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 +
    + +--- ## 在视图变化时保持上下文 @@ -34,6 +37,10 @@ 视图定位：在视图切换时，保持定位。 +
    + +--- + ## 解释刚刚发生了什么 对象增加示例 @@ -53,6 +60,9 @@ 对象更改：在列表/表格中，更改了一个对象。 +
    + +--- ## 改善感知性能 From f9b33a9f0978006332a5062539a465fe9de33647 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 17:43:54 +0800 Subject: [PATCH 0118/1555] update design docs --- docs/react/introduce.md | 3 +++ docs/spec/feature.md | 14 +++----------- docs/spec/introduce.md | 11 ++++++++--- docs/spec/principle.md | 1 + docs/spec/proximity.md | 2 +- 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/docs/react/introduce.md b/docs/react/introduce.md index f0cdb0b2d1..16f37b7a90 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -78,7 +78,10 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less' ## 谁在使用 - 蚂蚁金服 +- 阿里巴巴 - 口碑 +- 新美大 +- 滴滴 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index cb4424061d..7340428238 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -5,15 +5,7 @@ --- -
    - -
    - -Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 - -在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。 - -## 特性 +使 Ant Design 与众不同的一点是，这是一个同时追求『用户』和『设计者』体验的规范，也让三大特性都以人为本。
    @@ -24,7 +16,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
    确定
    -
    通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
    +
    制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
    @@ -80,7 +72,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。 -### 通俗科学的规则 +### 通俗而科学的设计原则 详见[『十大原则』](./principle)。 diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index 45af9d6e9d..ce89f48cc4 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -5,16 +5,21 @@ --- -Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 +
    + +
    -Ant Design 源自蚂蚁金服体验技术部的中台产品开发。在中台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业中台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。 +在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 -整套设计规范还在持续整理和完善中。 +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言，模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 ## 谁在使用 - 蚂蚁金服 +- 阿里巴巴 - 口碑 +- 新美大 +- 滴滴 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 68c5e3144c..38c6da53ba 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -2,6 +2,7 @@ - category: 十大原则 - order: 0 +- subtitle: Introduction --- diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 35854db1d9..2b83be2cd4 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -6,7 +6,7 @@ --- -『物理位置的接近意味着存在关联』，也就是说如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 +如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 ## 纵向间距关系 From c341965d65c8048062fa8cddf5b66c2a0f3b3b4a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 18:02:33 +0800 Subject: [PATCH 0119/1555] fix close x z-index --- style/components/dialog/Dialog.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/dialog/Dialog.less b/style/components/dialog/Dialog.less index 46e3506f0a..b2b265f2a7 100644 --- a/style/components/dialog/Dialog.less +++ b/style/components/dialog/Dialog.less @@ -58,6 +58,7 @@ line-height: 12px; top: 18px; right: 18px; + z-index: 1; &:before { content: "\e62d"; From d6d37a2f679b0464750c8690d5b77a6bfd1e9cf2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 10 Mar 2016 18:02:33 +0800 Subject: [PATCH 0120/1555] fix close x z-index --- style/components/dialog/Dialog.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/dialog/Dialog.less b/style/components/dialog/Dialog.less index 46e3506f0a..b2b265f2a7 100644 --- a/style/components/dialog/Dialog.less +++ b/style/components/dialog/Dialog.less @@ -58,6 +58,7 @@ line-height: 12px; top: 18px; right: 18px; + z-index: 1; &:before { content: "\e62d"; From dfe084fbffce55dfc6c5b38b91a0ac8c6c7d6832 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 10 Mar 2016 18:06:39 +0800 Subject: [PATCH 0121/1555] add transition, remove page-transition --- docs/spec/page-transition.md | 65 ------------------------- docs/spec/transition.md | 92 +++++++++++++++++++++++++++++++----- site/static/motion.js | 14 +++--- 3 files changed, 88 insertions(+), 83 deletions(-) delete mode 100644 docs/spec/page-transition.md diff --git a/docs/spec/page-transition.md b/docs/spec/page-transition.md deleted file mode 100644 index 6081466f32..0000000000 --- a/docs/spec/page-transition.md +++ /dev/null @@ -1,65 +0,0 @@ -# 互动转换 - -- category: 动画 -- order: 1 - ---- - -## 响应互动 - -响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 - -比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。 - -### 按钮反馈 - -
    -
    - - -## 转换动画 - -### 视觉连贯性三元素 - -- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - -- Receding:  与当前页无关的信息元素应采用适当方式移除。 - -- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 - -### 可折叠面板 - -对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 - - - 被展开的信息区域内容按照一定的路径依次进场。 - - - -
    -
    - - -### 弹出框动效 - -从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。 - -
    - -
    - - -### 页面转场 - -从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 - - - 大页面转场可采用左出右入的形式。 - - - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。 - - - -
    - -
    - -> 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/) diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 9bfb87c43a..f602411a97 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -8,22 +8,57 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 +- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 + +- Receding:  与当前页无关的信息元素应采用适当方式移除。 + +- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 + +````css +video{ + display: block; +} +```` ## 在视图变化时保持上下文 -滑入与滑出示例 +
    + +
    +
    +
    +
    +
    +     +
    滑入与滑出：可以有效构建虚拟空间。
    -传送带示例 +
    + +
    +
    +
    传送带示例
    +
    +
    +     +
    传送带：可极大地扩展虚拟空间。
    -折叠窗口示例 +
    + +
    +
    +
    折叠窗口示例
    +
    +
    +     +
    折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。 @@ -35,24 +70,57 @@ 视图定位：在视图切换时，保持定位。 ## 解释刚刚发生了什么 - -对象增加示例 - +
    + +
    +
    +
    对象增加示例
    +
    新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。
    +
    +     +
    对象增加：在列表/表格中，新增了一个对象。
    - -对象删除示例 +
    + +
    +
    +
    对象删除示例
    +
    +
    +     +
    对象删除：在列表/表格中，删除了一个对象。
    - -对象更改示例 +
    + +
    +
    +
    对象更改示例
    +
    状态一：用户更改了『详情』中的值；
    + 状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；
    状态三：底色持续『 1 秒』后消失，回复正常。
    +
    +     +
    对象更改：在列表/表格中，更改了一个对象。 +
    +
    + +
    +
    +
    弹出框唤起
    +
    从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;
    +
    +     +
    + +弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。 + ## 改善感知性能 @@ -67,3 +135,5 @@ 常见过渡效果：『按钮过渡』、『页面过渡』。 + + diff --git a/site/static/motion.js b/site/static/motion.js index 19c5ba9bbd..6f4576bae5 100644 --- a/site/static/motion.js +++ b/site/static/motion.js @@ -839,8 +839,12 @@ $(function() { window.Motion = newMotion; var motionVideo = { - video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'], - videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'], + video: [ + 'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4', + 'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4', + 'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4', + 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', + ], init: function() { var self = this; self.videoBox = $(".video-player"); @@ -849,11 +853,7 @@ $(function() { var svg = new SVG(); self.videoBox.eq(i).append(svg.node); var video = self.videoBox.eq(i).find("video"); - if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) { - $('').appendTo(video); - } else { - $('').appendTo(video); - } + $('').appendTo(video); video.css({ "width": "100%" }); From fb3776dbd3dee50d5111bf25c9f3db2ce0037e69 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 09:42:04 +0800 Subject: [PATCH 0122/1555] site: add redirect --- site/component/MainContent/index.jsx | 10 +--------- site/entry/index.jsx | 18 ++++++++++++------ site/entry/utils.js | 5 ++--- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index 8b71637200..d51057e112 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -5,14 +5,6 @@ import { Row, Col, Menu } from '../../../'; import config from '../../website.config'; const SubMenu = Menu.SubMenu; -const fileNameUrlMap = { - 'docs/react/introduce': 'components/introduce', - 'docs/react/getting-started': 'components/getting-started', - 'docs/react/install': 'components/install', - 'docs/react/upgrade-notes': 'components/upgrade-notes', - CHANGELOG: 'components/changelog', -}; - export default class MainContent extends React.Component { componentDidMount() { this.componentDidUpdate(); @@ -54,7 +46,7 @@ export default class MainContent extends React.Component { const disabled = item.disabled === 'true'; const url = item.fileName.replace(/(\/index)?\.md$/i, ''); const child = !item.link ? - + { text } :     diff --git a/site/entry/index.jsx b/site/entry/index.jsx index 7d928326b6..fe07f8d41f 100644 --- a/site/entry/index.jsx +++ b/site/entry/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { Router, Route, IndexRoute, hashHistory } from 'react-router'; +import { Router, Route, IndexRoute, Redirect, hashHistory } from 'react-router'; import antd from '../../'; import * as utils from './utils'; import '../common/lib'; @@ -18,19 +18,19 @@ window.react = React; window['react-dom'] = ReactDOM; window.antd = antd; -const ReactComponents = utils.generateContainer('components', reactComponents); +const ReactComponents = utils.generateContainer(reactComponents); const reactComponentsChildren = utils.generateChildren(reactComponents); -const Practice = utils.generateContainer('practice', practice); +const Practice = utils.generateContainer(practice); const practiceChildren = utils.generateChildren(practice); -const Pattern = utils.generateContainer('pattern', pattern); +const Pattern = utils.generateContainer(pattern); const patternChildren = utils.generateChildren(pattern); -const Spec = utils.generateContainer('spec', spec); +const Spec = utils.generateContainer(spec); const specChildren = utils.generateChildren(spec); -const Resource = utils.generateContainer('resource', resource); +const Resource = utils.generateContainer(resource); const resourceChildren = utils.generateChildren(resource); ReactDOM.render( @@ -40,6 +40,12 @@ ReactDOM.render( { reactComponentsChildren } + + + + + { practiceChildren } diff --git a/site/entry/utils.js b/site/entry/utils.js index e862383855..0325d1c25a 100644 --- a/site/entry/utils.js +++ b/site/entry/utils.js @@ -35,12 +35,11 @@ function getMenuItems(data) { return menuItems; } -export function generateContainer(category, data) { +export function generateContainer(data) { const menuItems = getMenuItems(data); return (props) => { return ( - + ); }; } From abc8b4c1e7e39b4a3ab7b77ec3f13240324f0668 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 09:45:06 +0800 Subject: [PATCH 0123/1555] docs: update demo --- components/card/demo/grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md index 33de59d1b2..17df59e85c 100644 --- a/components/card/demo/grid.md +++ b/components/card/demo/grid.md @@ -26,11 +26,11 @@ ReactDOM.render( ````css /* 增加 16px 栅格间距 */ -.row { +.code-box-demo .row { margin-left: -8px; margin-right: -8px; } -.row > div { +.code-box-demo .row > div { padding: 0 8px; } ```` From fb59c4d00b654d88dee613408566a6d88d3ee7d4 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 10:33:03 +0800 Subject: [PATCH 0124/1555] update docs --- docs/spec/direct.md | 10 +++++----- docs/spec/invitation.md | 18 +++++++++--------- docs/spec/lightweight.md | 16 ++++++++-------- docs/spec/reaction.md | 20 ++++++++++---------- docs/spec/stay.md | 20 ++++++++++---------- 5 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 9cda9fd51e..ebf4ee2925 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -16,7 +16,7 @@ 单击编辑示例 +状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png"> 单字段行内编辑 @@ -25,13 +25,13 @@
    文字链/图标编辑示例 +状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png"> 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
    -多字段行内编辑示例 +多字段行内编辑示例 多字段行内编辑 @@ -49,7 +49,7 @@ 拖放列表示例 +状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/ZQxzyqMpeJwalbe.png"> 拖放列表 @@ -57,7 +57,7 @@
    -拖放图片/文件示例 +拖放图片/文件示例 拖放图片/文件 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index ffbe6b820c..7a7b79d095 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -26,20 +26,20 @@
    -文本邀请示例 +文本邀请示例 -白板式邀请示例 +白板式邀请示例 -未完成邀请示例 +未完成邀请示例 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
    -漫游探索邀请示例 1 +漫游探索邀请示例 1 -漫游探索邀请示例 2 +漫游探索邀请示例 2 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。 @@ -56,23 +56,23 @@
    -悬停邀请示例 1 +悬停邀请示例 1 -悬停邀请示例 2 +悬停邀请示例 2 悬停邀请：在鼠标悬停期间提供邀请。
    -推论邀请示例 +推论邀请示例 推论邀请：用于交互期间，合理推断用户可能产生的需求。
    更多内容邀请示例 +" src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png"> 更多内容邀请：用于邀请用户查看更多内容。 diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index c351ecb576..046d2fd302 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -19,7 +19,7 @@ 实时可见工具示例--摘自知乎 +状态三：鼠标点击后，和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png"> 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 @@ -30,7 +30,7 @@ ## 悬停即现工具 -悬停即现工具示例 +悬停即现工具示例 如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 @@ -41,7 +41,7 @@ ## 开关显示工具 -开关显示工具示例 +开关显示工具示例 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 @@ -52,11 +52,11 @@ ## 交互中的工具 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。 @@ -69,13 +69,13 @@ ## 可视区域 ≠ 可点击区域 -文字链热区示例 +文字链热区示例 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
    -按钮热区示例 +按钮热区示例 当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 386d9e58d8..ffc83cf8da 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -22,16 +22,16 @@ 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 -确定类目示例 +确定类目示例 -不确定类目示例 +不确定类目示例 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
    实时搜索示例 +" src="https://os.alipayobjects.com/rmsportal/OyJCVmOigyXKWCf.png"> 实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。 @@ -45,7 +45,7 @@ ## 反馈模式 实时预览示例 +" src="https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png"> 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 @@ -57,13 +57,13 @@
    -按钮加载示例 +按钮加载示例 -表格加载示例 +表格加载示例 -富列表加载示例 +富列表加载示例 -页面加载示例 +页面加载示例 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 @@ -71,12 +71,12 @@
    -点击刷新示例 +点击刷新示例 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
    -定时示例 +定时示例 定时刷新：无需用户介入，定时展示新内容。 diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 29f5121892..2d15e18053 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -18,17 +18,17 @@ ## 覆盖层 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
    -详情覆盖层示例 +详情覆盖层示例 详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。 @@ -36,7 +36,7 @@
    -输入覆盖层示例 +输入覆盖层示例 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 @@ -46,7 +46,7 @@ ## 嵌入层 -列表嵌入层示例 +列表嵌入层示例 列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。 @@ -57,7 +57,7 @@
    -标签页示例 +标签页示例 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 @@ -87,18 +87,18 @@
    -渐进式展现示例 +渐进式展现示例 渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
    -配置程序示例 +配置程序示例 配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
    -弹出框覆盖层示例 +弹出框覆盖层示例 弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 \ No newline at end of file From 827ac4b7e833b628c5b5d04069dfa94b33b36930 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 12:00:21 +0800 Subject: [PATCH 0125/1555] Fix button style --- style/components/button.less | 13 ++++++------- style/mixins/button.less | 4 ++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/style/components/button.less b/style/components/button.less index d2d880d4f5..c61ed099a6 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -106,9 +106,8 @@ bottom: 0; right: 0; border-radius: inherit; - z-index: -1; border: 0 solid @primary-color; - opacity: 0.44; + opacity: 0.4; animation: buttonEffect 0.36s ease forwards; } } @@ -116,10 +115,10 @@ @keyframes buttonEffect { to { opacity: 0; - top: -6px; - left: -6px; - bottom: -6px; - right: -6px; - border-width: 6px; + top: -5px; + left: -5px; + bottom: -5px; + right: -5px; + border-width: 5px; } } diff --git a/style/mixins/button.less b/style/mixins/button.less index d1987ed60b..e3456baba6 100644 --- a/style/mixins/button.less +++ b/style/mixins/button.less @@ -200,10 +200,10 @@ position: absolute; top: 0; left: 0; + right: 0; + bottom: 0; display: inline-block; .opacity(0); - width: 100%; - height: 100%; border-radius: 50% 50%; content: " "; .scale(0, 0); From d431662d191694651b6c7896bed395d297f6fb99 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 14:12:05 +0800 Subject: [PATCH 0126/1555] site: redirects should be configurable --- site/entry/index.jsx | 12 ++++++------ site/website.config.js | 8 ++++++++ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/site/entry/index.jsx b/site/entry/index.jsx index fe07f8d41f..f9ad1a0aa5 100644 --- a/site/entry/index.jsx +++ b/site/entry/index.jsx @@ -11,6 +11,7 @@ import pattern from '../../_site/data/pattern'; import reactComponents from '../../_site/data/react-components'; import spec from '../../_site/data/spec'; import resource from '../../_site/data/resource'; +import config from '../website.config'; // TODO: pack dependencies with atool build // Expose React, ReactDOM @@ -33,6 +34,10 @@ const specChildren = utils.generateChildren(spec); const Resource = utils.generateContainer(resource); const resourceChildren = utils.generateChildren(resource); +const redirects = Object.keys(config.redirects).map((from) => { + return ; +}); + ReactDOM.render( @@ -40,12 +45,7 @@ ReactDOM.render( { reactComponentsChildren } - - - - - + { redirects } { practiceChildren } diff --git a/site/website.config.js b/site/website.config.js index 1259d86af4..dbee191457 100644 --- a/site/website.config.js +++ b/site/website.config.js @@ -12,4 +12,12 @@ export default { 导航: 3, 其它: 4, }, + + redirects: { + 'docs/react/introduce': 'components/introduce', + 'docs/react/getting-started': 'components/getting-started', + 'docs/react/install': 'components/install', + 'docs/react/upgrade-notes': 'components/upgrade-notes', + CHANGELOG: 'components/changelog', + }, }; From 26c4e070402b0a2475a00853c4420a5c053aada5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 15:21:32 +0800 Subject: [PATCH 0127/1555] improve video in markdown --- docs/spec/transition.md | 97 ++++++++--------------------------------- scripts/demo.js | 16 ++++++- site/static/motion.js | 24 +++------- site/static/style.less | 10 +++++ 4 files changed, 47 insertions(+), 100 deletions(-) diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 62e3a01667..f002a59f22 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -8,62 +8,32 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 -- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 +- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 -- Receding:  与当前页无关的信息元素应采用适当方式移除。 +- Receding: 与当前页无关的信息元素应采用适当方式移除。 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 -````css -video{ - display: block; -} -```` - -
    - --- ## 在视图变化时保持上下文 -
    - -
    -
    -
    -
    -
    -     -
    +滑入与滑出示例 滑入与滑出：可以有效构建虚拟空间。
    -
    - -
    -
    -
    传送带示例
    -
    -
    -     -
    +传送带示例 + 传送带：可极大地扩展虚拟空间。
    -
    - -
    -
    -
    折叠窗口示例
    -
    -
    -     -
    +折叠窗口示例 + 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。 @@ -79,59 +49,30 @@ video{ --- ## 解释刚刚发生了什么 -
    - -
    -
    -
    对象增加示例
    -
    新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。
    -
    -     -
    + + +对象增加示例 + + 对象增加：在列表/表格中，新增了一个对象。
    -
    - -
    -
    -
    对象删除示例
    -
    -
    -     -
    + +对象删除示例 对象删除：在列表/表格中，删除了一个对象。
    -
    - -
    -
    -
    对象更改示例
    -
    状态一：用户更改了『详情』中的值；
    - 状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；
    状态三：底色持续『 1 秒』后消失，回复正常。
    -
    -     -
    + +对象更改示例 对象更改：在列表/表格中，更改了一个对象。
    -
    - -
    -
    -
    弹出框唤起
    -
    从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;
    -
    -     -
    - -弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。 - +弹出框唤起示例 +弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关联。 --- @@ -145,8 +86,6 @@ video{ 页面过渡示例 - 常见过渡效果：『按钮过渡』、『页面过渡』。 - diff --git a/scripts/demo.js b/scripts/demo.js index 891691956b..e29b6bee0e 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -193,10 +193,20 @@ const PriviewImg = React.createClass({ const createMarkup = () => { return {__html: this.props.description} }; + + let node = Sample Picture; + if (this.props.type === 'video') { + node = ( + + ); + } + return (
    - Sample Picture + {node}
    {this.props.alt}
    @@ -245,7 +255,9 @@ InstantClickChangeFns.push(function () { priviewImgNodes.each(function (i, img) { priviewImgs.push( ); }); diff --git a/site/static/motion.js b/site/static/motion.js index 6f4576bae5..22c31bf8a0 100644 --- a/site/static/motion.js +++ b/site/static/motion.js @@ -846,23 +846,10 @@ $(function() { 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', ], init: function() { - var self = this; - self.videoBox = $(".video-player"); - $('').appendTo(self.videoBox); - for (var i = 0; i < self.videoBox.length; i++) { + $(".preview-image-box video").each(function(i, video) { var svg = new SVG(); - self.videoBox.eq(i).append(svg.node); - var video = self.videoBox.eq(i).find("video"); - $('').appendTo(video); - video.css({ - "width": "100%" - }); - video.append(svg); - svg.css({ - "position": "absolute", - "top": 0, - "left": 0 - }); + video = $(video); + video.parent().append(svg.node); var playBox = _playBox(svg); svg.addChild(playBox); playBox.addEventListener("click", function(e) { @@ -877,11 +864,10 @@ $(function() { this.setTimeout = setTimeout(function() { video[0].play(); }, 500); - m.attr("play", "true") } - }) - } + }); + }); } }; window.Motion.motionVideo = motionVideo; diff --git a/site/static/style.less b/site/static/style.less index fc0b880214..367f8c0d7d 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1202,6 +1202,16 @@ a.entry-link:hover .anticon-smile { position: relative; } +.preview-image-wrapper video { + display: block; + width: 100%; + + svg { + position: absolute; + top: 0; + left: 0; + } +} + .preview-image-wrapper.good:after { content: ''; width: 100%; From f7d172b7f442ae2804803758ce0a64f7aa1194f4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 15:29:00 +0800 Subject: [PATCH 0128/1555] update style --- site/static/style.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/static/style.less b/site/static/style.less index 367f8c0d7d..9f17e917bc 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1179,12 +1179,12 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; - margin: 0 0 110px 60px; + margin: 0 0 70px 60px; width: 616px; } .preview-image-boxes + .preview-image-boxes { - margin-top: -75px; + margin-top: -35px; } .preview-image-box { From 0752e94dd9f9a6fa5404a942c84d43c1095c90b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 15:43:51 +0800 Subject: [PATCH 0129/1555] typo --- docs/spec/introduce.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index ce89f48cc4..7a9573518b 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -11,7 +11,7 @@ 在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 -Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言，模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 ## 谁在使用 From 7b40c91e8702ffecb631189597dc9858febbd3c3 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 15:45:45 +0800 Subject: [PATCH 0130/1555] update docs --- docs/spec/direct.md | 2 +- docs/spec/reaction.md | 2 +- docs/spec/stay.md | 2 +- docs/spec/transition.md | 7 +------ 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index ebf4ee2925..a486a5119c 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -39,7 +39,7 @@
    -更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#交互)中的内容。 +更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#模块编辑)中的内容。
    diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index ffc83cf8da..76a91a73dd 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -20,12 +20,12 @@ ## 查询模式 -自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 确定类目示例 不确定类目示例 +自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
    diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 2d15e18053..1fd1e7053e 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -53,7 +53,7 @@
    -详情嵌入层(敬请期待) +详情嵌入层 (敬请期待)
    diff --git a/docs/spec/transition.md b/docs/spec/transition.md index f002a59f22..8db7647be8 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -39,10 +39,7 @@
    -视图定位示例 - - -视图定位：在视图切换时，保持定位。 +视图定位 (敬请期待)
    @@ -82,9 +79,7 @@
    -按钮过渡示例 -页面过渡示例 常见过渡效果：『按钮过渡』、『页面过渡』。 From 014b66cc37feade13673b224c5b2b09a66836d42 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 16:00:51 +0800 Subject: [PATCH 0131/1555] fix docs --- docs/spec/alignment.md | 6 ++++++ docs/spec/contrast.md | 10 +++++++++- docs/spec/feature.md | 8 ++++---- docs/spec/principle.md | 2 +- docs/spec/proximity.md | 10 ++++++++-- docs/spec/repetition.md | 6 +++++- docs/spec/transition.md | 5 ++--- 7 files changed, 35 insertions(+), 12 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index d9f837d853..5cc10cd823 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -10,6 +10,8 @@ > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 +--- + ## 文案类对齐 推荐示例 @@ -17,6 +19,8 @@ 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 +--- + ## 表单类对齐 冒号对齐示例 @@ -25,6 +29,8 @@ 更多对齐方式，请查看[『模式』-『表单』-『规格』-『对齐方式』](../pattern/form#对齐方式)。 +--- + ## 数字类对齐 正确示例 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index 093403dddf..daa60f292f 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -10,6 +10,10 @@ > 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。 +
    + +--- + ## 主次关系对比 正确示例 @@ -25,6 +29,8 @@ 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 +--- + ## 总分关系对比 总分关系示例 1 @@ -33,7 +39,9 @@ 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 -### 状态关系对比 +--- + +## 状态关系对比 静态对比示例 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 7340428238..ca77caea91 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -40,9 +40,9 @@ ### 微创新 -数值输入框示例 +数值输入框示例 -分页示例 +分页示例 字数校验框示例 @@ -82,7 +82,7 @@ ### 用户的幸福 -用户的幸福示例 +用户的幸福示例 漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； @@ -92,7 +92,7 @@ ### 设计者的幸福 -设计者的幸福示例 +设计者的幸福示例 从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 38c6da53ba..e9739b8f2a 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -31,7 +31,7 @@
    -#### 中台十大设计原则 +### 中台十大设计原则 - [亲密性 Proximity](./proximity) - [对齐 Alignment](./alignment) diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 2b83be2cd4..54bf574757 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -8,6 +8,10 @@ 如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 +
    + +--- + ## 纵向间距关系 纵向间距示例 @@ -22,14 +26,16 @@ > 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 +--- + ## 横向间距关系 -组合排布示例 +组合排布示例 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
    -复选框内示例 +复选框内示例 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 67fbbbf138..34b50bf5e7 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -8,11 +8,15 @@ 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 +
    + +--- + ## 重复元素 线框重复示例 -设计要素重复示例 +设计要素重复示例 文案格式重复示例 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index f002a59f22..c114d0f584 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -9,13 +9,12 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 - Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - - Receding: 与当前页无关的信息元素应采用适当方式移除。 - - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 ---- +
    +--- ## 在视图变化时保持上下文 From 59fb1af79ac224061b1567c2ffacd9ef2150abaf Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 16:11:46 +0800 Subject: [PATCH 0132/1555] update docs --- docs/spec/invitation.md | 4 ++-- docs/spec/stay.md | 2 +- docs/spec/transition.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 7a7b79d095..5f8da6b406 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -79,9 +79,9 @@
    -预期功能邀请 (敬请期待) +预期功能邀请（敬请期待）
    -拖放邀请 (敬请期待) +拖放邀请（敬请期待） diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 1fd1e7053e..92a37a774e 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -53,7 +53,7 @@
    -详情嵌入层 (敬请期待) +详情嵌入层（敬请期待）
    diff --git a/docs/spec/transition.md b/docs/spec/transition.md index dec209107b..1f4008b03c 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -38,7 +38,7 @@
    -视图定位 (敬请期待) +视图定位（敬请期待）
    @@ -60,7 +60,7 @@
    -对象更改示例 +对象更改示例 对象更改：在列表/表格中，更改了一个对象。 From d24e4dea4406d9c2c9f21feacd9949389c5ce518 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 11 Mar 2016 16:21:32 +0800 Subject: [PATCH 0133/1555] fix chrome render bug --- style/components/menu.less | 9 +++++++++ style/components/tabs.less | 11 +++++++++++ 2 files changed, 20 insertions(+) diff --git a/style/components/menu.less b/style/components/menu.less index 418926628b..bbe41c6807 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -45,6 +45,7 @@ &-item-active, &-submenu-title:hover { + transform: translateZ(0); background-color: tint(@primary-color, 90%); } @@ -56,10 +57,13 @@ &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover { background-color: transparent; + transform: translateZ(0); } &-item-selected { color: @primary-color; + // fix chrome render bug + transform: translateZ(0); } &-inline, @@ -78,6 +82,7 @@ .@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-item-selected { border-right: 2px solid @primary-color; + transform: translateZ(0); } } @@ -192,6 +197,7 @@ &-selected { border-bottom: 2px solid @primary-color; color: @primary-color; + transform: translateZ(0); } > a { @@ -295,6 +301,7 @@ &-dark&-horizontal > &-submenu:hover, &-dark&-horizontal > &-submenu &-submenu-title:hover { color: #fff; + transform: translateZ(0); } &-dark &-item > a { @@ -320,11 +327,13 @@ border-right: 0; background-color: @primary-color; color: #fff; + transform: translateZ(0); } &-dark &-item-active, &-dark &-submenu-title:hover { background-color: transparent; color: @primary-color; + transform: translateZ(0); } } diff --git a/style/components/tabs.less b/style/components/tabs.less index 74ef84c66d..b4284b2833 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -23,10 +23,12 @@ &-transition-forward { transition: right 0.3s @ease-in-out, left 0.3s @ease-in-out 0.3s * 0.3; + transform: translateZ(0); } &-transition-backward { transition: right 0.3s @ease-in-out 0.3s * 0.3, left 0.3s @ease-in-out; + transform: translateZ(0); } } @@ -176,6 +178,7 @@ &:active { color: shade(@primary-color, 5%); + transform: translateZ(0); } .anticon { @@ -188,6 +191,7 @@ .@{tab-prefix-cls}-tab-active .@{tab-prefix-cls}-tab-inner { color: @primary-color; + transform: translateZ(0); } } @@ -220,6 +224,7 @@ &-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active { animation-name: antMoveLeftIn; + transform: translateZ(0); animation-play-state: running; } @@ -236,6 +241,7 @@ &-slide-horizontal-backward-leave&-slide-horizontal-backward-leave-active { animation-name: antMoveRightOut; + transform: translateZ(0); animation-play-state: running; } @@ -249,6 +255,7 @@ &-slide-horizontal-forward-enter&-slide-horizontal-forward-enter-active { animation-name: antMoveRightIn; animation-play-state: running; + transform: translateZ(0); } &-slide-horizontal-forward-leave { @@ -263,6 +270,7 @@ } &-slide-horizontal-forward-leave&-slide-horizontal-forward-leave-active { + transform: translateZ(0); animation-name: antMoveLeftOut; animation-play-state: running; } @@ -397,11 +405,13 @@ } &&-card &-tab-active { background: #fff; + transform: translateZ(0); border-color: @border-color-base; color: @primary-color; } &&-card &-tab-active &-tab-inner { padding-bottom: 7px; + transform: translateZ(0); } &&-card &-nav-wrap { margin-bottom: 0; @@ -430,6 +440,7 @@ &&-card &-tab-active .anticon-cross, &&-card &-tab:hover .anticon-cross { width: 16px; + transform: translateZ(0); } &-extra-content { From f0c4ecbc8f4d5dcfe5bbe1f28b519176c6c7279f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 16:22:38 +0800 Subject: [PATCH 0134/1555] fix: suppress submit event by default #1173 --- components/form/Form.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/form/Form.jsx b/components/form/Form.jsx index 4139a0e8e4..b01377f9a1 100644 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -35,6 +35,9 @@ Form.propTypes = { Form.defaultProps = { prefixCls: 'ant-form', + onSubmit(e) { + e.preventDefault(); + }, }; Form.childContextTypes = { From 4da550782e66438906b08c60df21732eb323bc75 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 16:57:35 +0800 Subject: [PATCH 0135/1555] bump 0.12.9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d769c3157..7e9b504846 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.8", + "version": "0.12.9", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From b9c97ca07f5531ae2f3a2a1da9693276dd20f328 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 17:29:36 +0800 Subject: [PATCH 0136/1555] docs: update CHANGELOG.md --- CHANGELOG.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 080eddfe0e..cce75a8eaa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,26 @@ --- +## 0.12.9 + +`2016-03-11` + +- Transfer + - 可以定义 `notFoundContent `。 + - 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。 +- 调整 Tabs 样式。 +- 修复 Table 中的 Pagination 默认配置问题。 +- 调整 Form.Item 的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141) +- 修复 DatePicker `style` 设置错误的问题。 +- 修正 Badge 样式问题。 +- 修复 Popconfirm 箭头位置问题。 +- 优化 Popconfirm、Button 样式。 +- Dropdown hover 后增加延时效果。 +- 修复 Dialog 样式问题。 +- 修复 Upload 上传状态问题。 +- 优化 Menu、Tabs 在 Chorme 下的渲染性能。 +- Form 默认 supress submit 事件。 + ## 0.12.8 `2016-03-06` From b5ace6ec1d8f01df9da12db47762c306b6cae8d1 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 17:37:27 +0800 Subject: [PATCH 0137/1555] update --- docs/spec/transition.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 1f4008b03c..ce0f0d5ad4 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -66,9 +66,9 @@
    -弹出框唤起示例 +对象呼出示例 -弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关联。 +对象呼出：点击页面中元素，呼出一个新对象 --- From 833eebccb737b948d885763aafeacc631750698f Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 17:48:46 +0800 Subject: [PATCH 0138/1555] update docs --- CHANGELOG.md | 18 +++++++++--------- docs/react/upgrade-notes.md | 4 +++- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cce75a8eaa..d0135ca1c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,21 +8,21 @@ `2016-03-11` -- Transfer +- Transfer - 可以定义 `notFoundContent `。 - 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。 +- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。 +- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。 - 调整 Tabs 样式。 - 修复 Table 中的 Pagination 默认配置问题。 -- 调整 Form.Item 的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141) -- 修复 DatePicker `style` 设置错误的问题。 -- 修正 Badge 样式问题。 -- 修复 Popconfirm 箭头位置问题。 +- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141) +- 修复 DatePicker `style` 设置错误的问题。 - 优化 Popconfirm、Button 样式。 -- Dropdown hover 后增加延时效果。 +- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。 - 修复 Dialog 样式问题。 -- 修复 Upload 上传状态问题。 -- 优化 Menu、Tabs 在 Chorme 下的渲染性能。 -- Form 默认 supress submit 事件。 +- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159) +- 优化 Menu、Tabs 在 Chorme 下的渲染问题。 +- Form 默认阻止 submit 事件。 ## 0.12.8 diff --git a/docs/react/upgrade-notes.md b/docs/react/upgrade-notes.md index 71acaf02f8..52ba919de1 100644 --- a/docs/react/upgrade-notes.md +++ b/docs/react/upgrade-notes.md @@ -5,13 +5,15 @@ --- +这里只列出升级中的不兼容改动，其他改动见 [Changelog](/changelog)。 + ## 0.11 => 0.12 --- ### 使用 Form 提供的校验功能代替 Validation -Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子([#1](http://ant.design/components/form/#demo-validate-basic) [#2](http://ant.design/components/form/#demo-validate-other) [#3](http://ant.design/components/form/#demo-validate-customized))。 +Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子（[#1](http://ant.design/components/form/#demo-validate-basic) [#2](http://ant.design/components/form/#demo-validate-other) [#3](http://ant.design/components/form/#demo-validate-customized)）。 ### Progress `format` 属性的值改为函数 From 963dcc6b237f0c160b88f04a3013fc34038eee15 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 17:58:40 +0800 Subject: [PATCH 0139/1555] bump 0.12.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7e9b504846..d86b921949 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.9", + "version": "0.12.10", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 9194108c3602a0debbbfd4b7a857167e4c0e5131 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 00:04:44 +0800 Subject: [PATCH 0140/1555] update Changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d0135ca1c4..64cf13f246 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ --- +## 0.12.10 + +- 修复 0.12.9 版本 npm 包打包错误的问题。 + ## 0.12.9 `2016-03-11` From e91b009e93cedcc5ba7dda56a5fa03d264a07d05 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 00:13:05 +0800 Subject: [PATCH 0141/1555] update button style --- style/components/button.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style/components/button.less b/style/components/button.less index c61ed099a6..db2626fda5 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -101,14 +101,14 @@ &-clicked:before { content: ''; position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; border-radius: inherit; border: 0 solid @primary-color; opacity: 0.4; - animation: buttonEffect 0.36s ease forwards; + animation: buttonEffect 0.32s ease forwards; } } From acec3e68f1c6f405bd7f2896440322deaeda84a0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 14:53:57 +0800 Subject: [PATCH 0142/1555] update design docs --- docs/spec/feature.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/feature.md b/docs/spec/feature.md index ca77caea91..cb85401b35 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -5,7 +5,7 @@ --- -使 Ant Design 与众不同的一点是，这是一个同时追求『用户』和『设计者』体验的规范，也让三大特性都以人为本。 +与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。
    @@ -16,7 +16,7 @@
    确定
    -
    制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
    +
    制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
    From fd1856dac3bf6d9f31d2a068f86d44189a2dd5ea Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 15:05:29 +0800 Subject: [PATCH 0143/1555] update design docs --- docs/spec/layout/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/layout/index.md b/docs/spec/layout/index.md index bf41733f15..66290d43e5 100644 --- a/docs/spec/layout/index.md +++ b/docs/spec/layout/index.md @@ -1,7 +1,7 @@ # 常用布局 - template: component -- category: 基础 +- category: 设计基础 - order: 4 - cols: 1 From ed3cda06a28fdf1e2603df5023fae2fe4d5244ec Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 13:19:43 +0800 Subject: [PATCH 0144/1555] update button docs --- components/button/demo/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index c4d69feb75..5f52387050 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -6,7 +6,7 @@ 通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。 -主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。 +主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。主按钮在同一个操作区域最多出现一次。 --- From d393f496ffd88a2ec332e21da98c600826a0c45d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 15:28:56 +0800 Subject: [PATCH 0145/1555] fix lesshint --- package.json | 2 +- style/components/dialog/Mask.less | 2 +- style/components/popover.less | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d86b921949..73d5e20b74 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "jsonp": "^0.2.0", "less": "~2.6.0", "less-loader": "^2.2.0", - "lesshint-antd": "^1.2.1", + "lesshint": "^1.2.1", "lodash": "^4.1.0", "nico-jsx": "~0.8.2", "postcss-loader": "^0.8.0", diff --git a/style/components/dialog/Mask.less b/style/components/dialog/Mask.less index 4c09579762..fb526fc85e 100644 --- a/style/components/dialog/Mask.less +++ b/style/components/dialog/Mask.less @@ -9,7 +9,7 @@ background-color: rgba(55, 55, 55, 0.6); height: 100%; z-index: 1000; - filter: alpha(opacity=50); + filter: ~"alpha(opacity=50)"; &-hidden { display: none; diff --git a/style/components/popover.less b/style/components/popover.less index 3bd06814b5..de6f6c12dc 100644 --- a/style/components/popover.less +++ b/style/components/popover.less @@ -43,7 +43,7 @@ &:after { content: ""; position: absolute; - background: rgba(255,255,255,0.01); + background: rgba(255, 255, 255, 0.01); } &-hidden { From 38baf0ef1961d566aeee4f5cf99d250839142a12 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 16:49:05 +0800 Subject: [PATCH 0146/1555] Fix(Popconfirm): confirm and cancel not trigger onVisibleChange --- components/popconfirm/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index ad1dbb5de1..197d9bb724 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -56,12 +56,12 @@ export default React.createClass({ }, onVisibleChange(visible) { this.setVisible(visible); - this.props.onVisibleChange(visible); }, setVisible(visible) { if (!('visible' in this.props)) { this.setState({ visible }); } + this.props.onVisibleChange(visible); }, render() { const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props; From c4b9d39c3349289105a5bdcbc7969955b89b8aab Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 20:19:26 +0800 Subject: [PATCH 0147/1555] update label required color --- style/themes/default/custom.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index c1443c7574..ef1509c8c3 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -117,7 +117,7 @@ @legend-color : #999; @legend-border-color : @border-color-base; // Label -@label-required-color : #f60; +@label-required-color : #f50; @label-color : @text-color; // Input @input-height-base: 28px; From 71abe49bf154bc2650259e0518d77b83490a341b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 20:38:32 +0800 Subject: [PATCH 0148/1555] fix menu z-index problem, close #1182 --- style/components/menu.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/style/components/menu.less b/style/components/menu.less index bbe41c6807..95c05cad64 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -92,6 +92,7 @@ position: absolute; min-width: 100%; margin-top: 7px; + z-index: 1070; } &-submenu-vertical > & { @@ -100,6 +101,7 @@ position: absolute; min-width: 160px; margin-left: 4px; + z-index: 1070; } &-item, @@ -192,6 +194,7 @@ top: 1px; float: left; border-bottom: 2px solid transparent; + z-index: 1; &-active, &-selected { From 8675b7abe1747a00288d6dd46b5239577e75c15c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 21:32:10 +0800 Subject: [PATCH 0149/1555] update style --- scripts/demo.js | 2 +- site/static/style.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index 6f8a71a0f6..1e669512df 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -285,7 +285,7 @@ InstantClickChangeFns.push(function() { if (window.location.href.indexOf('#') > 0) { setTimeout(function() { window.location.href = window.location.href; - }, 0); + }, 30); } $('.component-demos .icon-all').off('click'); diff --git a/site/static/style.less b/site/static/style.less index 9f17e917bc..c1e9723a8c 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -625,6 +625,7 @@ footer ul li > a { border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; + font-style: italic; } .markdown blockquote p { @@ -1203,7 +1204,6 @@ a.entry-link:hover .anticon-smile { } .preview-image-wrapper video { - display: block; width: 100%; + svg { position: absolute; From 996eca7eb923a773faf1c37a346e72319c104b15 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 21:32:10 +0800 Subject: [PATCH 0150/1555] update style --- docs/pattern/advanced-search.md | 2 +- docs/pattern/list.md | 2 +- docs/pattern/table.md | 2 +- docs/spec/direct.md | 9 ++++----- docs/spec/invitation.md | 7 +++---- docs/spec/stay.md | 6 +++--- docs/spec/transition.md | 2 +- scripts/demo.js | 2 +- site/static/style.less | 8 ++++++-- 9 files changed, 21 insertions(+), 19 deletions(-) diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index 03cfaa15bd..d4b0f1cbcb 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -53,4 +53,4 @@ 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。 -## 案例（敬请期待） +## 案例（敬请期待） diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 2abd1a1d6b..0d1a3a4734 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -98,4 +98,4 @@
    -## 案例（敬请期待） +## 案例（敬请期待） diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 67f56b6ac1..2aa3f4fde4 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -154,4 +154,4 @@ 数值右对齐（带小数则按小数点对齐），其余左对齐。 -## 案例（敬请期待） +## 案例（敬请期待） diff --git a/docs/spec/direct.md b/docs/spec/direct.md index a486a5119c..06e6afb3dd 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -63,13 +63,12 @@
    -拖放对象（敬请期待） - -拖放多个对象（敬请期待） +拖放对象（敬请期待） + +拖放多个对象（敬请期待）
    --- -## 直接选择（敬请期待） - +## 直接选择（敬请期待） diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 7a7b79d095..646ce619eb 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -10,7 +10,7 @@ 很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 - + > 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 @@ -79,9 +79,8 @@
    -预期功能邀请 (敬请期待) +预期功能邀请 (敬请期待)
    -拖放邀请 (敬请期待) - +拖放邀请 (敬请期待) diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 1fd1e7053e..c636385d2d 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -53,7 +53,7 @@
    -详情嵌入层 (敬请期待) +详情嵌入层 (敬请期待)
    @@ -75,7 +75,7 @@
    -伸缩式用户界面（敬请期待） +伸缩式用户界面（敬请期待）
    @@ -101,4 +101,4 @@ 弹出框覆盖层示例 -弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 \ No newline at end of file +弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index dec209107b..c7a9c33c6d 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -38,7 +38,7 @@
    -视图定位 (敬请期待) +视图定位 (敬请期待)
    diff --git a/scripts/demo.js b/scripts/demo.js index 6f8a71a0f6..1e669512df 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -285,7 +285,7 @@ InstantClickChangeFns.push(function() { if (window.location.href.indexOf('#') > 0) { setTimeout(function() { window.location.href = window.location.href; - }, 0); + }, 30); } $('.component-demos .icon-all').off('click'); diff --git a/site/static/style.less b/site/static/style.less index 9f17e917bc..c291fe5fae 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -625,6 +625,7 @@ footer ul li > a { border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; + font-style: italic; } .markdown blockquote p { @@ -637,6 +638,10 @@ footer ul li > a { margin-left: 8px; } +.markdown .waiting { + color: #ccc; +} + .markdown h1:hover .anchor, .markdown h2:hover .anchor, .markdown h3:hover .anchor, @@ -1179,7 +1184,7 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; - margin: 0 0 70px 60px; + margin: 0 0 70px 20px; width: 616px; } @@ -1203,7 +1208,6 @@ a.entry-link:hover .anticon-smile { } .preview-image-wrapper video { - display: block; width: 100%; + svg { position: absolute; From 1929f7db97ea56f96a2bcf1ee081a95ec331fef3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 11:19:13 +0800 Subject: [PATCH 0151/1555] fix dataSource undefined --- components/table/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 72648e2f2d..2cb29b1ca1 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -531,7 +531,7 @@ let AntTable = React.createClass({ getLocalData(dataSource) { let state = this.state; - let data = dataSource || this.props.dataSource; + let data = dataSource || this.props.dataSource || []; // 排序 if (state.sortOrder && state.sorter) { data = data.slice(0); From b4060f40a9cdb4ee71adc7d20e3b86600dce378a Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Mon, 14 Mar 2016 11:31:14 +0800 Subject: [PATCH 0152/1555] update reaction.md --- docs/spec/reaction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 030c6ca10e..4275dac348 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -6,7 +6,7 @@ --- -『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在**交互期间**为用户提供视觉反馈；『即时反应』的重要性体现在**交互之后**立即给出反馈。 +『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。 就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。 From 80d6ae30a8ef77c36ad35a31b4c42dd274cd4ce8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 11:46:48 +0800 Subject: [PATCH 0153/1555] Add propTypes and prop align in Modal docs --- components/modal/Modal.jsx | 19 +++++++++++++++++-- components/modal/index.md | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index 7bf8f2a311..7368e840ac 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { PropTypes } from 'react'; import Dialog from 'rc-dialog'; import { Dom } from 'rc-util'; import Button from '../button'; @@ -8,7 +8,7 @@ function noop() {} let mousePosition; let mousePositionEventBinded; -let AntModal = React.createClass({ +const AntModal = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-modal', @@ -24,6 +24,21 @@ let AntModal = React.createClass({ }; }, + propTypes: { + prefixCls: PropTypes.string, + onOk: PropTypes.func, + onCancel: PropTypes.func, + okText: PropTypes.node, + cancelText: PropTypes.node, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + confirmLoading: PropTypes.bool, + visible: PropTypes.bool, + align: PropTypes.object, + footer: PropTypes.node, + title: PropTypes.node, + closable: PropTypes.bool, + }, + handleCancel(e) { this.props.onCancel(e); }, diff --git a/components/modal/index.md b/components/modal/index.md index c8b39b68d3..875f4e46d5 100644 --- a/components/modal/index.md +++ b/components/modal/index.md @@ -30,7 +30,8 @@ | footer | 底部内容 | React.Element | 确定取消按钮 | | okText | 确认按钮文字 | String | 确定 | | cancelText | 取消按钮文字 | String | 取消 | -| maskClosable | 点击蒙层是否允许关闭 | Boolean | true | +| maskClosable | 点击蒙层是否允许关闭 | Boolean | true | +| align | 浮层自定义位置 | Object, [dom-align](https://github.com/yiminghe/dom-align) | 距离顶部 100px | ### Modal.xxx() From 3d792ac482be32d6dd46543f60d395134a7bb5cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=97=B2=E8=80=98=E2=84=A2?= Date: Mon, 14 Mar 2016 11:28:48 +0800 Subject: [PATCH 0154/1555] update(PR-template): better PULL-Request template format. --- .github/PULL_REQUEST_TEMPLATE.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index f9760a3504..fedbdf9311 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,6 +2,6 @@ First of all, thanks for your contribution! :-) Please makes sure these boxes are checked before submitting your PR, thank you! -[ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style. -[ ] Rebase before creating a PR to keep commit history clear. -[ ] Add some descriptions and refer relative issues for you PR. +* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style. +* [ ] Rebase before creating a PR to keep commit history clear. +* [ ] Add some descriptions and refer relative issues for you PR. From 5b76337bdc9d6b8c875b22dc6499d02258dd9eaa Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Mon, 14 Mar 2016 11:45:06 +0700 Subject: [PATCH 0155/1555] Minor English grammar improvements. --- components/locale-provider/index.md | 2 +- docs/react/install_en.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/locale-provider/index.md b/components/locale-provider/index.md index 4cbdcb6091..655d3f84fc 100644 --- a/components/locale-provider/index.md +++ b/components/locale-provider/index.md @@ -24,7 +24,7 @@ return ; ### Add a language -We supply an English locale package by now. Other language users can custumize your locale package as [en_US](https://github.com/ant-design/ant-design/blob/26b1f37392a278285aec6c573b99c6feea09e218/components/locale-provider/en_US.js) and ask a pull request to us. +We supply an English locale package. Other language users can create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/26b1f37392a278285aec6c573b99c6feea09e218/components/locale-provider/en_US.js) and send us a pull request. ### 其他国际化需求 diff --git a/docs/react/install_en.md b/docs/react/install_en.md index 7dc0c54ec4..8df090e974 100644 --- a/docs/react/install_en.md +++ b/docs/react/install_en.md @@ -1,6 +1,6 @@ ## Using npm to install -**We recommend use npm to install**，Not only it makes development easier，also you can take advantage of the whole ecosystem. +**We recommend using npm to install**，it not only makes development easier，but you can also take advantage of the whole ecosystem. If using npm to install, you could use `import` or `require`. From 5ec436d0dd1fd297e59f5d8c75945dccd642aae4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 14:04:33 +0800 Subject: [PATCH 0156/1555] Make default progress color not primary color --- style/components/progress.less | 2 +- style/themes/default/custom.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/style/components/progress.less b/style/components/progress.less index 7634236cb0..fc7531a70a 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -26,7 +26,7 @@ } &-line-bg { border-radius: 100px; - background-color: @primary-color; + background-color: @info-color; transition: all 0.3s linear 0s; position: relative; } diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index ef1509c8c3..cba20d0978 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -3,6 +3,7 @@ // Color @primary-color : #2db7f5; +@info-color : #2db7f5; @success-color : #87d068; @error-color : #f50; @warning-color : #fa0; From aa6326f1e13708183b2c213cc3fdb23b12ae74ab Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 14 Mar 2016 14:21:01 +0800 Subject: [PATCH 0157/1555] style: update code style to please lint --- site/component/MainContent/index.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index d51057e112..bf337637c5 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -38,11 +38,10 @@ export default class MainContent extends React.Component { generateMenuItem(isTop, item) { const key = this.fileNameToPath(item.fileName); const text = isTop ? - item.chinese || item.english : - [ - { item.english }, - { item.chinese } - ]; + item.chinese || item.english : [ + { item.english }, + { item.chinese } + ]; const disabled = item.disabled === 'true'; const url = item.fileName.replace(/(\/index)?\.md$/i, ''); const child = !item.link ? From 90a54507f575629287e853476b0d20e25e51938b Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 14 Mar 2016 15:00:11 +0800 Subject: [PATCH 0158/1555] site: add github button --- package.json | 1 + site/component/Home/Banner.jsx | 12 ++++++-- site/component/Home/index.less | 53 ++++++++++++++++++++++------------ 3 files changed, 44 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index ec26a0b570..2c746cd06d 100644 --- a/package.json +++ b/package.json @@ -122,6 +122,7 @@ "react-addons-test-utils": "0.14.x", "react-copy-to-clipboard": "^4.0.1", "react-dom": "0.14.x", + "react-github-button": "^0.1.1", "react-router": "^2.0.0", "react-stateless-wrapper": "~1.0.2", "recast": "^0.11.2", diff --git a/site/component/Home/Banner.jsx b/site/component/Home/Banner.jsx index 1c70d29a7d..c88e9176a1 100644 --- a/site/component/Home/Banner.jsx +++ b/site/component/Home/Banner.jsx @@ -2,6 +2,8 @@ import React from 'react'; import { Link } from 'react-router'; import ScrollElement from 'rc-scroll-anim/lib/ScrollElement'; import TweenOne from 'rc-tween-one'; +import GitHubButton from 'react-github-button'; +import 'react-github-button/assets/style.css'; import { QueueAnim, Icon } from '../../../'; export default class Banner extends React.Component { @@ -22,9 +24,13 @@ export default class Banner extends React.Component {

    ANT

    DESIGN

    一个 UI 设计语言

    - - 开始探索 - +
    + + 开始探索 + +
    + diff --git a/site/component/Home/index.less b/site/component/Home/index.less index 99419c97be..2aedda72b2 100644 --- a/site/component/Home/index.less +++ b/site/component/Home/index.less @@ -30,7 +30,7 @@ .banner-text-wrapper { position: absolute; left: 10%; - top: 58%; + top: 55%; color: #fff; text-align: right; } @@ -56,28 +56,43 @@ right: -25px; } .banner-text-wrapper > p { - margin: 10px auto 30px; + margin: 10px auto 24px; font-size: 16px; } -.banner-text-wrapper a { + +.banner-text-wrapper .start-button { + margin-bottom: 24px; + + > a { + float: right; + width: 155px; + height: 45px; + border-radius: 6px; + border: 1px solid #00AAEE; + color: #00AAEE; + font-size: 18px; + background: transparent; + transition: box-shadow .45s ease-out; + text-align: center; + line-height: 42px; + } + > a:hover { + box-shadow: 0 0 10px #00AAEE; + } + > a span { + margin-left: 15px; + } +} + +.banner-text-wrapper .github-btn { float: right; - width: 155px; - height: 45px; - border-radius: 6px; - border: 1px solid #00AAEE; - color: #00AAEE; - font-size: 18px; - background: transparent; - transition: box-shadow .45s ease-out; - text-align: center; - line-height: 42px; -} -.banner-text-wrapper a:hover { - box-shadow: 0 0 10px #00AAEE; -} -.banner-text-wrapper a span { - margin-left: 15px; + line-height: 14px; + + a:hover { + color: #333; + } } + .down { text-align: center; position: absolute; From ffe729a77b40bee1d2cb5e1ec7861fb22cbf9d86 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 15:01:00 +0800 Subject: [PATCH 0159/1555] update docs --- docs/pattern/form.md | 2 +- docs/spec/alignment.md | 2 +- docs/spec/feature.md | 2 +- docs/spec/principle.md | 2 +- docs/spec/proximity.md | 2 +- scripts/demo.js | 2 +- site/static/style.less | 7 +++++++ 7 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/pattern/form.md b/docs/pattern/form.md index ac865a1b5f..c85d6d2df2 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -106,7 +106,7 @@ ### 字数校验框 -字数校验框示例 +字数校验框示例 用于统计当前输入长度，以及是否超过系统阈值。 diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 5cc10cd823..8c9726c6bc 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -6,7 +6,7 @@ --- -正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性；也能引导视觉流向，让用户更流畅地接收信息。 +正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。 > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index cb85401b35..b8af268ba3 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -44,7 +44,7 @@ 分页示例 -字数校验框示例 +字数校验框示例 『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index e9739b8f2a..4eb393e800 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -31,7 +31,7 @@
    -### 中台十大设计原则 +#### Ant Design 十大设计原则 - [亲密性 Proximity](./proximity) - [对齐 Alignment](./alignment) diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 54bf574757..99b3e46f93 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -6,7 +6,7 @@ --- -如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 +如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
    diff --git a/scripts/demo.js b/scripts/demo.js index 1e669512df..17755a69a6 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -205,7 +205,7 @@ const PriviewImg = React.createClass({ return (
    -
    +
    {node}
    {this.props.alt}
    diff --git a/site/static/style.less b/site/static/style.less index c291fe5fae..670ad2c343 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1207,8 +1207,15 @@ a.entry-link:hover .anticon-smile { position: relative; } +.preview-image-wrapper.video { + padding: 0; + background: 0; + display: block; +} + .preview-image-wrapper video { width: 100%; + display: block; + svg { position: absolute; top: 0; From 35ad4017dd2f23db1f2775644feb7bc90670a44e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 14 Mar 2016 15:14:54 +0800 Subject: [PATCH 0160/1555] chore: remove demo.js --- scripts/demo.js | 490 ------------------------------------------------ 1 file changed, 490 deletions(-) delete mode 100644 scripts/demo.js diff --git a/scripts/demo.js b/scripts/demo.js deleted file mode 100644 index 9aad398c00..0000000000 --- a/scripts/demo.js +++ /dev/null @@ -1,490 +0,0 @@ -require('../style/index.less'); -require('../site/static/style.less'); -require('../site/static/tomorrow.less'); - -window['css-animation'] = require('css-animation'); -window['react-router'] = require('react-router'); -window['rc-form'] = require('rc-form'); -window.CopyToClipboard = require('react-copy-to-clipboard'); -var antd = require('../index'); -var React = require('react'); -var ReactDOM = require('react-dom'); -var semver = require('semver'); -window.antd = antd; -window.React = React; -window.ReactDOM = ReactDOM; -window['object-assign'] = require('object-assign'); -window['classnames'] = require('classnames'); -window['reqwest'] = require('reqwest'); -window['jsonp'] = require('jsonp'); -window['querystring'] = require('querystring'); -window['Values'] = require('values.js'); -window['InstantClick'] = require('instantclick'); -require('./home')(); - -function camelize(str) { - return str.replace(/(?:^|[-_])(\w)/g, function (_, c) { - return c ? c.toUpperCase() : ''; - }); -} - -window.require = function (path) { - var result = window; - var namespaces = path.split('/'); - namespaces.forEach(function (key, i) { - if (i === 2) { - key = camelize(key); - } - if (key !== 'lib') { - if (result[key]) { - result = result[key]; - } else { - throw 'There should not have modules here: ' + path; - } - } - }); - return result; -}; - -antd.DatePicker.locale = { - en_US: require('../components/date-picker/locale/en_US'), - zh_CN: require('../components/date-picker/locale/zh_CN'), -}; - -antd.Calendar.locale = { - en_US: require('../components/calendar/locale/en_US'), - zh_CN: require('../components/calendar/locale/zh_CN'), -}; - -antd.Pagination.locale = { - en_US: require('../components/pagination/locale/en_US'), - zh_CN: require('../components/pagination/locale/zh_CN'), -}; - -antd.LocaleProvider['en_US'] = require('../components/locale-provider/en_US'), - -InstantClickChangeFns.push(function () { - // auto complete for components - var Select = antd.Select; - var Option = Select.Option; - // 获取搜索数据 - var searchData = window.ANT_COMPONENTS.sort(function (a, b) { - return a.title.localeCompare(b.title); - }); - - var AutoComplete = React.createClass({ - getOptions() { - return searchData.map(function (s) { - return ; - }); - }, - - handleSelect(value) { - location.href = rootUrl + '/components/' + value.replace(/([a-z])([A-Z])/g, function (m, m1, m2) { - return m1 + '-' + m2; - }).toLowerCase() + '/'; - }, - - filterOption(input, option) { - return option.props.sData.title.toLowerCase().indexOf(input.toLowerCase()) !== -1 || option.props.sData.desc.indexOf(input) !== -1; - }, - - render() { - return ; - } - }); - - ReactDOM.render(, document.getElementById('autoComplete')); -}); - -InstantClickChangeFns.push(function () { - var Select = antd.Select; - var Option = Select.Option; - var versionsHistory = { - '0.9.x': '09x.ant.design', - '0.10.x': '010x.ant.design', - '0.11.x': '011x.ant.design', - }; - versionsHistory[antdVersion.latest] = - versionsHistory[antdVersion.latest] || 'ant.design'; - var versions = Object.keys(versionsHistory).sort(function (a, b) { - return semver.lt(a.replace('.x', '.0'), b.replace('.x', '.0')); - }); - var options = versions.map(function (version) { - var link = versionsHistory[version]; - return ; - }); - - function onChange(value) { - if (versionsHistory[value]) { - location.href = location.href.replace(location.host, versionsHistory[value]); - } - } - - ReactDOM.render( - - , document.getElementById('versions-select')); -}); - -window.BrowserDemo = React.createClass({ - render() { - return ( -
    -
    -
    -
    -
    -
    -
    - -
    -
    - {this.props.children} -
    -
    - ); - } -}); - -const { Modal, Carousel } = antd; -const PriviewImg = React.createClass({ - getInitialState() { - return { - visible: false, - current: 0, - }; - }, - showImageModal() { - this.setState({ - visible: true - }); - }, - handleCancel() { - this.setState({ - visible: false - }); - }, - handleImgChange(current) { - this.setState({current}); - }, - render() { - const goodCls = this.props.good ? 'good' : ''; - const badCls = this.props.bad ? 'bad' : ''; - const imgsPack = this.props.imgsPack || [{ - src: this.props.src, - alt: this.props.alt, - }]; - const imgStyle = {}; - if (this.props.noPadding) { - imgStyle.padding = '0'; - imgStyle.background = 'none'; - } - const current = this.state.current; - const arrows = imgsPack.length > 1; - const createMarkup = () => { - return {__html: this.props.description} - }; - return ( -
    -
    - Sample Picture -
    -
    {this.props.alt}
    -
    - - - { - imgsPack.map((img, i) => -
    -
    - -
    -
    - ) - } -     -
    {imgsPack[current].alt}
    -     -
    - ); - } -}); - -InstantClickChangeFns.push(function () { - const previewImageBoxes = $('.preview-img').parent(); - previewImageBoxes.each(function (i, box) { - box = $(box); - let priviewImgs = []; - const priviewImgNodes = box.find('.preview-img'); - - // 判断是否要做成图片集合 - // 指定了封面图片就是 - let coverImg; - priviewImgNodes.each(function (i, img) { - if (img.hasAttribute('as-cover')) { - coverImg = img; - return false; - } - }); - - if (coverImg) { - const imgs = []; - priviewImgNodes.each((i, img) => imgs.push(img)); - priviewImgs = ; - } else { - priviewImgNodes.each(function (i, img) { - priviewImgs.push( - - ); - }); - } - - // 计算宽度 - let width = ''; - if (priviewImgs.length === 1) { - width = priviewImgNodes[0].getAttribute('width') || ''; - } else if (coverImg) { - width = coverImg.getAttribute('width'); - } - if (width && width.indexOf('%') < 0 && width !== 'auto') { - width += 'px'; - } - - let mountNode = $('
    ')[0]; - box.replaceWith(mountNode); - ReactDOM.render({priviewImgs}, mountNode); - }); -}); - -InstantClickChangeFns.push(function() { - // fix hash id link - if (window.location.href.indexOf('#') > 0) { - setTimeout(function() { - window.location.href = window.location.href; - }, 0); - } - - $('.component-demos .icon-all').off('click'); - $('.component-demos .icon-all').on('click', function() { - if ($(this).hasClass('expand')) { - $(this).removeClass('expand'); - $('.code-box .highlight').animate({ - height: 'hide', - opacity: 0 - }, 150); - } else { - $(this).addClass('expand'); - $('.code-box .highlight').animate({ - height: 'show', - opacity: 1 - }, 150); - } - }); - - $('.code-box').each(function(i, item) { - item = $(item); - item.find('.highlight').appendTo(item); - }); - - $('.code-boxes').off('click'); - $('.code-boxes').on('click', '.collapse', function() { - var highlightBox = $(this).parent().parent().find('.highlight'); - var codeVisible = highlightBox.is(':visible'); - highlightBox.animate({ - height: codeVisible ? 'hide' : 'show', - opacity: codeVisible ? 0 : 1 - }, 150); - if (codeVisible) { - $(this).parent().parent().removeClass('expand'); - } else { - $(this).parent().parent().addClass('expand'); - } - }); - - function hashChange() { - $('.demos-anchor a').removeClass('current'); - $('.demos-anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current'); - } - - hashChange(); - - // 高亮侧边演示菜单 - $(window).off('hashchange'); - $(window).on('hashchange', hashChange); - - // 移动 API 文档到演示下方 - $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); - - // 滚动时固定锚点、高亮当前项 - if ($('.demos-anchor')[0]) { - var doc = $(document); - var tocTop = $('.toc').offset().top; - function onScroll() { - var top = doc.scrollTop(); - if (top >= tocTop) { - $('.toc').addClass('sticky'); - } else { - $('.toc').removeClass('sticky'); - } - } - onScroll(); - $(window).off('scroll'); - $(window).on('scroll', onScroll); - } - - // 添加上一页下一页 - if ($('.aside-container li > a').length > 0) { - var links = $('.aside-container li > a'); - var currentLinkIndex = -1; - links.each(function(i, item) { - if ($(item).parent().hasClass('current')) { - currentLinkIndex = i; - } - }); - var prevNextNavNode = $('
    '); - var prevLink = links[currentLinkIndex - 1]; - var nextLink = links[currentLinkIndex + 1]; - if (prevLink) { - var prevLinkNavNode = $('' + prevLink.innerHTML + ''); - if (prevLink.className.indexOf('nav-link-disabled') >= 0) { - prevLinkNavNode.attr('disabled', true); - } - prevNextNavNode.append(prevLinkNavNode); - } else { - prevNextNavNode.append(''); - } - if (nextLink) { - var nextLinkNavNode = $('' + nextLink.innerHTML + ''); - if (nextLink.className.indexOf('nav-link-disabled') >= 0) { - nextLinkNavNode.attr('disabled', true); - } - prevNextNavNode.append(nextLinkNavNode); - } else { - prevNextNavNode.append(''); - } - prevNextNavNode.appendTo('.main-container'); - } - - $('.nav-phone-icon').click(function() { - var navMenu = $(this).prev(); - navMenu.removeClass('nav-hide').addClass('nav-show').focus(); - navMenu.one('blur', function() { - navMenu.removeClass('nav-show').addClass('nav-hide'); - }); - }); - - $.easing['jswing'] = $.easing['swing']; - $.extend($.easing,{ - easeInCirc: function (x, t, b, c, d) { - return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; - }, - easeOutCirc: function (x, t, b, c, d) { - return c * Math.sqrt(1 - (t=t/d-1)*t) + b; - }, - easeInOutCirc: function (x, t, b, c, d) { - if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; - return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; - } - }); - - var navFunc = { - navStrArr: [], - init: function() { - if (this.navBar) { - return; - } - this.navBox = $(".nav"); - this.navBar = this.navBox.find(".bar"); - this.navList = this.navBox.find("ul li"); - this.navNum = $(".current").index(); - this.navBarAnim(); - this.highlightCurrentNav(); - $(window).bind("resize", this.highlightCurrentNav); - this.navBar.show(); - }, - highlightCurrentNav: function(target) { - target = target || this.navList.eq(this.navNum); - this.navBar && this.navBar.css({ - left: target.position().left, - width: target.outerWidth() - }); - }, - navBarAnim: function() { - var self = this, delay; - self.navList.bind("mouseenter", function(e) { - clearTimeout(delay); - self.highlightCurrentNav($(e.currentTarget)); - }); - self.navList.bind("mouseleave", function(e) { - delay = setTimeout(function() { - self.highlightCurrentNav(); - }, 500); - }); - } - }; - navFunc.init(); - var listFunc = { - num: 0, - init: function() { - this.listBox = $(".aside-container>ul"); - if (!this.listBox.length) { - return; - } - this.getUrlNum(); - this.addTitleEvent(); - }, - getUrlNum: function() { - var self = this, - url = location.href, - str = ""; - for (var i = 0; i < self.listBox.find("a").length; i++) { - var m = self.listBox.find("a").eq(i); - if (m.attr("href") == "./" || url.indexOf(m.attr("href")) >= 0) { - self.num = m.parent().parent().parent().index(); - } - } - }, - addTitleEvent: function() { - var self = this; - var title = self.listBox.find("h4"); - title.bind("click", function(e) { - var parent = $(this).parent(), - list=parent.find("ul"); - if (parent.attr("open")) { - parent.removeAttr("open"); - if (parent.index() == self.num) { - $(this).addClass("current"); - } - list.animate({marginTop:-list.height()},400,"easeInOutCirc",function (){ - list.css({"display":"none"}) - }) - } else { - parent.attr("open", true); - if (parent.index() == self.num) { - $(this).removeClass("current"); - } - list.css({"display":"block","margin-top":-list.height()}); - list.animate({marginTop:0},400,"easeInOutCirc") - } - }); - } - }; - listFunc.init(); -}); - -antd.version = require('../package.json').version; -module.exports = antd; From 89561b0b3ef688552a5467870f69739bbfe31aa9 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Mon, 14 Mar 2016 11:52:06 +0700 Subject: [PATCH 0161/1555] Favor 'export default' over 'module.exports'. --- components/affix/index.jsx | 2 +- components/common/openAnimation.js | 2 +- components/form/Form.jsx | 4 +--- components/form/FormItem.jsx | 4 +--- components/input/index.jsx | 4 ++-- components/locale-provider/en_US.js | 2 +- 6 files changed, 7 insertions(+), 11 deletions(-) diff --git a/components/affix/index.jsx b/components/affix/index.jsx index 3e1685be28..995b6894af 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -123,4 +123,4 @@ const Affix = React.createClass({ }); -module.exports = Affix; +export default Affix; diff --git a/components/common/openAnimation.js b/components/common/openAnimation.js index 80d857a055..d96a549e1f 100644 --- a/components/common/openAnimation.js +++ b/components/common/openAnimation.js @@ -42,4 +42,4 @@ const animation = { }, }; -module.exports = animation; +export default animation; diff --git a/components/form/Form.jsx b/components/form/Form.jsx index 4139a0e8e4..34f29cf1ef 100644 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; -class Form extends React.Component { +export default class Form extends React.Component { getChildContext() { return { form: this.props.form, @@ -40,5 +40,3 @@ Form.defaultProps = { Form.childContextTypes = { form: React.PropTypes.object, }; - -module.exports = Form; diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx index db90cddde3..20ab951b98 100644 --- a/components/form/FormItem.jsx +++ b/components/form/FormItem.jsx @@ -7,7 +7,7 @@ function prefixClsFn(prefixCls, ...args) { }).join(' '); } -class FormItem extends React.Component { +export default class FormItem extends React.Component { _getLayoutClass(colDef) { if (!colDef) { return ''; @@ -191,5 +191,3 @@ FormItem.defaultProps = { FormItem.contextTypes = { form: React.PropTypes.object, }; - -module.exports = FormItem; diff --git a/components/input/index.jsx b/components/input/index.jsx index ce007e3462..8dd00ba541 100644 --- a/components/input/index.jsx +++ b/components/input/index.jsx @@ -123,5 +123,5 @@ Input.defaultProps = { type: 'text', }; -module.exports = Input; -module.exports.Group = Group; +Input.Group = Group; +export default Input; diff --git a/components/locale-provider/en_US.js b/components/locale-provider/en_US.js index 9e5b243e76..a10edb6fa2 100644 --- a/components/locale-provider/en_US.js +++ b/components/locale-provider/en_US.js @@ -1,4 +1,4 @@ -module.exports = { +export default { Pagination: require('rc-pagination/lib/locale/en_US'), DatePicker: require('../date-picker/locale/en_US'), TimePicker: require('../time-picker/locale/en_US'), From 9665daa1922500f56f8ac0d9cb7eb7c1893eb663 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:18:06 +0800 Subject: [PATCH 0162/1555] move toc under meta description --- docs/pattern/advanced-search.md | 4 ++-- docs/pattern/complex-table.md | 4 ++-- docs/pattern/form.md | 4 ++-- docs/pattern/list.md | 4 ++-- docs/pattern/navigation.md | 4 ++-- docs/pattern/table.md | 4 ++-- docs/react/getting-started.md | 4 ++-- docs/react/introduce.md | 3 +-- docs/spec/alignment.md | 2 -- docs/spec/colors.md | 2 +- docs/spec/contrast.md | 4 ---- docs/spec/direct.md | 4 ---- docs/spec/easing.md | 2 +- docs/spec/feature.md | 8 ++++---- docs/spec/font.md | 4 ++-- docs/spec/introduce.md | 4 ++-- docs/spec/invitation.md | 6 ------ docs/spec/lightweight.md | 4 ---- docs/spec/motion.md | 3 --- docs/spec/principle.md | 4 ++-- docs/spec/proximity.md | 4 ---- docs/spec/reaction.md | 4 ---- docs/spec/repetition.md | 4 ---- docs/spec/stay.md | 4 ---- docs/spec/transition.md | 4 ---- docs/spec/typography.md | 4 ++-- package.json | 2 +- site/static/style.less | 2 +- 28 files changed, 31 insertions(+), 75 deletions(-) diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index d4b0f1cbcb..6eed9292d7 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -3,10 +3,10 @@ - category: 6 - order: 6 ---- - 借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。 +--- + ## 常规型 ### 交互 diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md index 2c4e103a70..cb165ec021 100644 --- a/docs/pattern/complex-table.md +++ b/docs/pattern/complex-table.md @@ -3,10 +3,10 @@ - category: 5 - order: 5 ---- - 表格也用于展示复杂和高度结构化数据。 +--- + ## 案例 ### 多列数据 diff --git a/docs/pattern/form.md b/docs/pattern/form.md index c85d6d2df2..985704fc3a 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -3,8 +3,6 @@ - category: 2 - order: 2 ---- - 作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。 设计者进行表单设计时，应当注意这几点： @@ -23,6 +21,8 @@ 4. 不要提出不必要的问题。 +--- + ## 内容 结构示例 diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 0d1a3a4734..012558169c 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -3,8 +3,6 @@ - category: 3 - order: 3 ---- - 列表是非常常见的界面元素，有多种使用场景： - 获取概览 @@ -13,6 +11,8 @@ - 排序与过滤 - 重新安排、添加、删除或重新分类列表项 +--- + ## 交互 ### 显示详情信息 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 7f2c68132b..4367d24822 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -3,14 +3,14 @@ - category: 1 - order: 1 ---- - 在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意： 1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路； 2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本； 3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。 +--- + ## 常见导航
    diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 2aa3f4fde4..f3e05d7ab5 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -3,10 +3,10 @@ - category: 4 - order: 4 ---- - 表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。 +--- + ## 内容 结构示例 diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index fb552d8a69..6015f14349 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -3,10 +3,10 @@ - category: 1 - order: 1 ---- - Ant Design React 致力于提供给程序员**愉悦**的开发体验。 +--- + ## 第一个例子 最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。 diff --git a/docs/react/introduce.md b/docs/react/introduce.md index 16f37b7a90..4360c5f993 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -3,8 +3,6 @@ - category: 0 - order: 0 ---- - 这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
    @@ -24,6 +22,7 @@ } +--- ## 特性 diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 8c9726c6bc..06bae6f17d 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -4,8 +4,6 @@ - order: 2 - subtitle: Alignment ---- - 正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。 > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 diff --git a/docs/spec/colors.md b/docs/spec/colors.md index 21484602c9..fc23d9c8a1 100644 --- a/docs/spec/colors.md +++ b/docs/spec/colors.md @@ -9,7 +9,7 @@ 色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。 -## ANTD Color +## Ant Design Colors Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index daa60f292f..bc2d75b6a7 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -4,14 +4,10 @@ - order: 3 - subtitle: Contrast ---- - 对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。 > 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。 -
    - --- ## 主次关系对比 diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 19cbc621d7..a5e5016972 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -4,12 +4,8 @@ - order: 5 - subtitle: Make it Direct ---- - 正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。 -
    - --- ## 页内编辑 diff --git a/docs/spec/easing.md b/docs/spec/easing.md index 0d9bade216..5767a58ddd 100644 --- a/docs/spec/easing.md +++ b/docs/spec/easing.md @@ -14,7 +14,7 @@ 当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。 -### 质量和重量 +## 质量和重量 在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index b8af268ba3..3f4f55a707 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -3,11 +3,9 @@ - category: 1 - order: 1 ---- - 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。 -
    +
    微小
    @@ -27,7 +25,7 @@ +--- + ## 微小 ### 微创新 diff --git a/docs/spec/font.md b/docs/spec/font.md index f60f2b818f..9093eda02f 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -3,10 +3,10 @@ - category: 设计基础 - order: 0 ---- - 跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。 +--- + ## 字体家族 - 中文字体族： diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index 7a9573518b..d324f45cd4 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -3,8 +3,6 @@ - category: 0 - order: 0 ---- -
    @@ -13,6 +11,8 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 +--- + ## 谁在使用 - 蚂蚁金服 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 468dde619e..b2d97ce879 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -4,20 +4,14 @@ - order: 8 - subtitle: Provide Invitation ---- - - 很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 - > 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 >可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》 -
    - --- ## 静态邀请 diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index c7f9cae7a5..31391017a7 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -4,14 +4,10 @@ - order: 6 - subtitle: Keep it Lightweight ---- - 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 > 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 -
    - --- ## 实时可见工具 diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 3c4b02246a..db351fcc66 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -9,8 +9,6 @@ Ant Design 提供了一些预设的组件动画样式。
    -## 组件动画 - 通过设置组件的 `transitionName` 指定组件动画。 | 组件 | 中文名 | 采用动画 | @@ -255,4 +253,3 @@ ReactDOM.render(, document.getElementById('components-motion-demo-basic') width:180px; } - diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 4eb393e800..1a7e7c6f38 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -4,14 +4,14 @@ - order: 0 - subtitle: Introduction ---- - 『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。 我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。 > 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。 +--- +
    diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 99b3e46f93..2208bf02df 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -4,12 +4,8 @@ - order: 1 - subtitle: Proximity ---- - 如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。 -
    - --- ## 纵向间距关系 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 4275dac348..5339370797 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -4,8 +4,6 @@ - order: 10 - subtitle: React Immediately ---- - 『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。 就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。 @@ -14,8 +12,6 @@ > 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》 -
    - --- ## 查询模式 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 34b50bf5e7..4b184b9b7a 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -4,12 +4,8 @@ - order: 4 - subtitle: Repetition ---- - 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 -
    - --- ## 重复元素 diff --git a/docs/spec/stay.md b/docs/spec/stay.md index a9009b1134..777c95e47e 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -4,16 +4,12 @@ - order: 6 - subtitle: Stay in the Page ---- - 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 > 变换盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 >心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 -
    - --- ## 覆盖层 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index c7efc8f275..e5ef87a352 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -4,16 +4,12 @@ - order: 9 - subtitle: Use Transition ---- - 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 - Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - Receding: 与当前页无关的信息元素应采用适当方式移除。 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 -
    - --- ## 在视图变化时保持上下文 diff --git a/docs/spec/typography.md b/docs/spec/typography.md index bb527e639f..6f6b9ce621 100644 --- a/docs/spec/typography.md +++ b/docs/spec/typography.md @@ -3,10 +3,10 @@ - category: 设计基础 - order: 1 ---- - 良好的排版规范能大大提升用户的视觉体验。 +--- + ## 行高和段落 考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距決定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的 1.5 倍。段落间距決定了段落上下的间距，一般为字号的一倍宽。 diff --git a/package.json b/package.json index 6d769c3157..10916d248c 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "less-loader": "^2.2.0", "lesshint-antd": "^1.2.1", "lodash": "^4.1.0", - "nico-jsx": "~0.8.2", + "nico-jsx": "~0.9.0", "postcss-loader": "^0.8.0", "pre-commit": "1.x", "querystring": "^0.2.0", diff --git a/site/static/style.less b/site/static/style.less index 670ad2c343..f2b599664c 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -711,7 +711,7 @@ footer ul li > a { .toc { font-size: 14px; - margin: 20px 0; + margin: 36px 0 24px; background: #fbfbfb; border-left: 2px solid #eee; } From e1f27bbe4d9259250dd7d65ce9ab4d7606a65058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 14 Mar 2016 16:18:30 +0800 Subject: [PATCH 0163/1555] upgrade treeSelect --- components/tree-select/demo/checkable.md | 2 ++ components/tree-select/index.jsx | 5 ++++- components/tree-select/index.md | 1 + package.json | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md index 154b0fb90e..12657c4d20 100644 --- a/components/tree-select/demo/checkable.md +++ b/components/tree-select/demo/checkable.md @@ -8,6 +8,7 @@ ````jsx import { TreeSelect } from 'antd'; +const SHOW_PARENT = TreeSelect.SHOW_PARENT; const treeData = [{ label: '节点一', @@ -54,6 +55,7 @@ const Demo = React.createClass({ onChange: this.onChange, multiple: true, treeCheckable: true, + showCheckedStrategy: SHOW_PARENT, searchPlaceholder: '请选择', style: { width: 300, diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index f261129d82..850274f496 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import TreeSelect, { TreeNode } from 'rc-tree-select'; +import TreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from 'rc-tree-select'; import classNames from 'classnames'; const AntTreeSelect = React.createClass({ @@ -42,4 +42,7 @@ const AntTreeSelect = React.createClass({ }); AntTreeSelect.TreeNode = TreeNode; +AntTreeSelect.SHOW_ALL = SHOW_ALL; +AntTreeSelect.SHOW_PARENT = SHOW_PARENT; +AntTreeSelect.SHOW_CHILD = SHOW_CHILD; export default AntTreeSelect; diff --git a/components/tree-select/index.md b/components/tree-select/index.md index c5bfe4ef0a..2ecb4cd2be 100644 --- a/components/tree-select/index.md +++ b/components/tree-select/index.md @@ -34,6 +34,7 @@ | size | 选择框大小，可选 `large` `small` | String | default | | showSearch | 在下拉中显示搜索框 | boolean | false | | disabled | 是否禁用 | boolean | false | +| showCheckedStrategy | `TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | treeDefaultExpandAll | 默认展开所有树节点 | bool | false | | treeCheckable | 显示checkbox | bool | false | | filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - | diff --git a/package.json b/package.json index 73d5e20b74..188748d19a 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "rc-time-picker": "~1.1.0", "rc-tooltip": "~3.3.1", "rc-tree": "~1.1.0", - "rc-tree-select": "~1.2.2", + "rc-tree-select": "~1.4.1", "rc-trigger": "~1.2.0", "rc-upload": "~1.8.0", "rc-util": "~3.1.2", From 4d7d49c3d0f130828ae7ddefa58a45c0e8d442f7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:31:42 +0800 Subject: [PATCH 0164/1555] update pictures --- docs/spec/alignment.md | 6 +++--- docs/spec/proximity.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 06bae6f17d..2bd1f8f0e2 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,8 +12,8 @@ ## 文案类对齐 -推荐示例 -不推荐示例 +推荐示例 +不推荐示例 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 @@ -21,7 +21,7 @@ ## 表单类对齐 -冒号对齐示例 +冒号对齐示例 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 2208bf02df..0c9d6daaca 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -10,7 +10,7 @@ ## 纵向间距关系 -纵向间距示例 +纵向间距示例 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 From 04be1c439013f86ba1938fc4df68a79bb3b0d8eb Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:53:52 +0800 Subject: [PATCH 0165/1555] update site style --- site/static/style.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index c414a1b947..574f8ffa96 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -341,6 +341,7 @@ footer { position: relative; z-index: 1; color: #666; + box-shadow: 0 1000px 0 1000px #fff; } footer ul { @@ -474,6 +475,7 @@ footer ul li > a { overflow: hidden; padding: 24px 0 0; margin-bottom: 24px; + min-height: 400px; position: relative; } @@ -482,7 +484,8 @@ footer ul li > a { margin-left: 219px; padding: 0 40px 120px; background: #fff; - min-height: 500px; + min-height: 400px; + min-height: 80vh; overflow: hidden; } From 0212a73ef9e904cc018524bd03560021ac59be2e Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:53:52 +0800 Subject: [PATCH 0166/1555] update site style --- site/static/style.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index f2b599664c..7b843e43bf 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -341,6 +341,7 @@ footer { position: relative; z-index: 1; color: #666; + box-shadow: 0 1000px 0 1000px #fff; } footer ul { @@ -474,6 +475,7 @@ footer ul li > a { overflow: hidden; padding: 24px 0 0; margin-bottom: 24px; + min-height: 400px; position: relative; } @@ -482,7 +484,8 @@ footer ul li > a { margin-left: 219px; padding: 0 40px 120px; background: #fff; - min-height: 500px; + min-height: 400px; + min-height: 80vh; overflow: hidden; } From b79c4b18836f038665b103cff2820ee801a77acb Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 17:11:41 +0800 Subject: [PATCH 0167/1555] fix img style in doc --- site/static/style.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index 7b843e43bf..4479f40205 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1187,8 +1187,9 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; - margin: 0 0 70px 20px; + margin: 0 0 70px 28px; width: 616px; + clear: both; } .preview-image-boxes + .preview-image-boxes { From 0e9edf7a12e8108628bbac9f8466290d924615f4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 17:12:34 +0800 Subject: [PATCH 0168/1555] bump beta for tree select --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 188748d19a..cc92a184f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.10", + "version": "0.12.11-beta", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From bc644e54cb91449163d470edb6c28beb2e8fa2f2 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Mon, 14 Mar 2016 17:14:29 +0800 Subject: [PATCH 0169/1555] update docs --- docs/spec/direct.md | 2 +- docs/spec/invitation.md | 4 ++-- docs/spec/lightweight.md | 2 +- docs/spec/reaction.md | 6 +++--- docs/spec/stay.md | 8 ++++---- docs/spec/transition.md | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 19cbc621d7..fd93bfda58 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -39,7 +39,7 @@
    -更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#模块编辑)中的内容。 +更多有关『页内编辑』的模式，可查看[『模式／表格／交互』](../pattern/table#模块编辑)中的内容。
    diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 468dde619e..fdf94fd946 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -12,9 +12,9 @@ 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 -> 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 +> ** 意符（Signifiers）** ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 ->可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》 +> ** 可供性（Affordance）** ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
    diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index c7f9cae7a5..6853ce0e83 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -8,7 +8,7 @@ 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 +> 注：** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
    diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 4275dac348..dc53c18125 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -12,7 +12,7 @@ 虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。 -> 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》 +> ** 牛顿第三定律 ** ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
    @@ -37,7 +37,7 @@
    -微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式』－『高级搜索』](../pattern/advanced-search)。 +微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式／高级搜索』](../pattern/advanced-search)。
    @@ -53,7 +53,7 @@
    -渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户』-『渐进式展现』](../spec/stay#流程处理)。 +渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户／渐进式展现』](../spec/stay#流程处理)。
    diff --git a/docs/spec/stay.md b/docs/spec/stay.md index a9009b1134..b8bf749b95 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -8,9 +8,9 @@ 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 -> 变换盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 +> ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 ->心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 +> ** 心流（Flow）：也有别名以化境 ** (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
    @@ -68,9 +68,9 @@ 在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。 -无限加载和分页器，详见[『模式』-『列表』-『显示长列表』](../pattern/list#显示长列表) +无限加载和分页器，详见[『模式／列表／显示长列表』](../pattern/list#显示长列表) -走马灯，详见[『模式』-『列表』-『显示图片』](../pattern/list#显示图片) +走马灯，详见[『模式／列表／显示图片』](../pattern/list#显示图片)
    diff --git a/docs/spec/transition.md b/docs/spec/transition.md index c7efc8f275..dcf71a6173 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -68,7 +68,7 @@ 对象呼出示例 -对象呼出：点击页面中元素，呼出一个新对象 +对象呼出：点击页面中元素，呼出一个新对象。 --- From d03d42bf30f82b04e72b237ac15d37cd7bcb3a67 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Mon, 14 Mar 2016 17:38:01 +0800 Subject: [PATCH 0170/1555] update docs --- docs/spec/alignment.md | 4 ++-- docs/spec/lightweight.md | 2 +- docs/spec/stay.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 2bd1f8f0e2..599550fe85 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -6,7 +6,7 @@ 正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。 -> 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 +> ** 格式塔学派（德语：Gestalttheorie）** ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 --- @@ -25,7 +25,7 @@ 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 -更多对齐方式，请查看[『模式』-『表单』-『规格』-『对齐方式』](../pattern/form#对齐方式)。 +更多对齐方式，请查看[『模式／表单／规格／对齐方式』](../pattern/form#对齐方式)。 --- diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index b52013fb9e..4a08335a7a 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -6,7 +6,7 @@ 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> 注：** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 +> ** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 --- diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 0563509afb..f3c9baef63 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -8,7 +8,7 @@ > ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 -> ** 心流（Flow）：也有别名以化境 ** (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 +> ** 心流（Flow）** ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 --- From ece5b0cfb2b54068ccb11402058c84572a9ae84b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 18:39:32 +0800 Subject: [PATCH 0171/1555] Add docs for #1193 --- components/icon/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/icon/index.md b/components/icon/index.md index a14ca5317e..76b3631177 100644 --- a/components/icon/index.md +++ b/components/icon/index.md @@ -30,6 +30,10 @@ ``` +## 本地部署 + +图标组件使用 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。 + ## 图标列表 > 点击图标复制代码。 From b798ee75203491d1d1cbc88477f7b024eceb64c0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 10:57:53 +0800 Subject: [PATCH 0172/1555] update feature page style in mobile screen --- docs/spec/feature.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 3f4f55a707..89ab8aa485 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -32,6 +32,16 @@ font-size: 14px; margin-top: 16px; } +@media only screen and (min-width: 320px) and (max-width: 767px) { + .features { + width: 100%; + text-align: center; + margin-bottom: 20px;; + } + .features img { + width: 80%; + } +} --- From 122886dea1aff29e9a81b07044f46f714f3d4835 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 15 Mar 2016 11:19:57 +0800 Subject: [PATCH 0173/1555] site: solve some conflicts with new-deisgn-language --- docs/spec/direct.md | 11 +--- docs/spec/feature.md | 1 - docs/spec/invitation.md | 3 +- docs/spec/lightweight.md | 4 +- docs/spec/page-transition.md | 77 ------------------------ docs/spec/reaction.md | 6 +- docs/spec/transition.md | 29 ++++++--- site/common/styles/markdown.less | 10 +++ site/common/styles/motion.less | 9 ++- site/common/styles/toc.less | 2 +- site/component/Article/ImagePreview.jsx | 5 +- site/component/Article/index.jsx | 12 +++- site/component/Motion/motion.js | 8 +-- site/component/Motion/page-transition.js | 5 -- site/component/Motion/transition.js | 21 +++++++ site/website.config.js | 5 +- 16 files changed, 86 insertions(+), 122 deletions(-) delete mode 100644 docs/spec/page-transition.md delete mode 100644 site/component/Motion/page-transition.js create mode 100644 site/component/Motion/transition.js diff --git a/docs/spec/direct.md b/docs/spec/direct.md index a598904c22..94cf2e3d99 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -10,9 +10,7 @@ ## 页内编辑 -单击编辑示例 +单击编辑示例 单字段行内编辑 @@ -20,8 +18,7 @@
    -文字链/图标编辑示例 +文字链/图标编辑示例 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。 @@ -43,9 +40,7 @@ ## 利用拖放 -拖放列表示例 +拖放列表示例 拖放列表 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 3f4f55a707..748aa3a04d 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -1,6 +1,5 @@ # 三大特性 -- category: 1 - order: 1 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index c825c16a1c..09f3efb206 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -66,8 +66,7 @@
    -更多内容邀请示例 +更多内容邀请示例 更多内容邀请：用于邀请用户查看更多内容。 diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index 4a08335a7a..6b6bdb7a38 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -13,9 +13,7 @@ ## 实时可见工具 -实时可见工具示例 --摘自知乎 +实时可见工具示例 --摘自知乎 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 diff --git a/docs/spec/page-transition.md b/docs/spec/page-transition.md deleted file mode 100644 index 75cf6c831e..0000000000 --- a/docs/spec/page-transition.md +++ /dev/null @@ -1,77 +0,0 @@ -# Page Transition - -- category: 动画 -- order: 1 -- chinese: 互动转换 - ---- - -## 响应互动 - -响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。 - -比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。 - -### 按钮反馈 - -
    -
    - - -## 转换动画 - -### 视觉连贯性三元素 - -- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - -- Receding:  与当前页无关的信息元素应采用适当方式移除。 - -- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 - -### 可折叠面板 - -对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。 - - - 被展开的信息区域内容按照一定的路径依次进场。 - -
    -
    - - -### 弹出框动效 - -从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。 - -
    - -
    - - -### 页面转场 - -从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。 - - - 大页面转场可采用左出右入的形式。 - - - 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。 - -
    - -
    - -> 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/) - -```__react -import scripts from '../../site/component/Motion/page-transition'; -class ExecuteJS extends React.Component { - componentDidMount() { - scripts(); - } - - render() { - return null; - } -} - -ReactDOM.render(, mountNode); -``` diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 9792761f7e..d9ae47c7f5 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -26,8 +26,7 @@
    -实时搜索示例 +实时搜索示例 实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。 @@ -40,8 +39,7 @@ --- ## 反馈模式 -实时预览示例 +实时预览示例 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 0ed8a15f14..693c1d82ee 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -14,20 +14,20 @@ ## 在视图变化时保持上下文 -滑入与滑出示例 +
    滑入与滑出：可以有效构建虚拟空间。
    -传送带示例 +
    传送带：可极大地扩展虚拟空间。
    -折叠窗口示例 +
    折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。 @@ -43,26 +43,26 @@ ## 解释刚刚发生了什么 -对象增加示例 +
    对象增加：在列表/表格中，新增了一个对象。
    -对象删除示例 +
    对象删除：在列表/表格中，删除了一个对象。
    -对象更改示例 +
    对象更改：在列表/表格中，更改了一个对象。
    -对象呼出示例 +
    对象呼出：点击页面中元素，呼出一个新对象。 @@ -78,4 +78,17 @@ 图片（敬请期待） - +```__react +import scripts from '../../site/component/Motion/transition'; +class ExecuteJS extends React.Component { + componentDidMount() { + scripts(); + } + + render() { + return null; + } +} + +ReactDOM.render(, mountNode); +``` diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less index 9cfd6d2b87..989290294d 100644 --- a/site/common/styles/markdown.less +++ b/site/common/styles/markdown.less @@ -18,6 +18,12 @@ font-weight: 500; line-height: 40px; margin-bottom: 24px; + + .subtitle { + font-size: 80%; + font-weight: normal; + font-family: "Helvetica Neue",Helvetica; + } } .markdown h2, @@ -162,4 +168,8 @@ .markdown > br, .markdown > p > br { clear: both; +} + +.markdown .waiting { + color: #ccc; } \ No newline at end of file diff --git a/site/common/styles/motion.less b/site/common/styles/motion.less index dda434e88c..4e8702c87c 100644 --- a/site/common/styles/motion.less +++ b/site/common/styles/motion.less @@ -25,6 +25,11 @@ } .video-player{ - position: relative; - max-width: 800px; + position: relative; + max-width: 800px; + + &-right { + width: 616px; + float: right; + } } \ No newline at end of file diff --git a/site/common/styles/toc.less b/site/common/styles/toc.less index 89043f4802..7b7dec34c7 100644 --- a/site/common/styles/toc.less +++ b/site/common/styles/toc.less @@ -1,6 +1,6 @@ .toc { font-size: 14px; - margin-bottom: 20px; + margin: 36px 0 24px; background: #fbfbfb; border-left: 2px solid #eee; } diff --git a/site/component/Article/ImagePreview.jsx b/site/component/Article/ImagePreview.jsx index 3242f437ef..fbb22ec7cd 100644 --- a/site/component/Article/ImagePreview.jsx +++ b/site/component/Article/ImagePreview.jsx @@ -65,9 +65,8 @@ export default class ImagePreview extends React.Component { Sample Picture
    {cover.alt}
    -
    - {cover.description} -
    +
    diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx index 4417bf6a39..ebc7977981 100644 --- a/site/component/Article/index.jsx +++ b/site/component/Article/index.jsx @@ -48,7 +48,17 @@ export default class Article extends React.Component { return (
    -

    { content.meta.chinese || content.meta.english }

    +

    + { content.meta.chinese || content.meta.english } + { + !content.meta.subtitle ? null : + { content.meta.subtitle } + } +

    + { + !content.intro ? null : + content.intro.map(utils.objectToComponent.bind(null, location.pathname)) + } { jumper.length > 0 ?
      { jumper }
    : diff --git a/site/component/Motion/motion.js b/site/component/Motion/motion.js index d27b5f5156..06b0d91702 100644 --- a/site/component/Motion/motion.js +++ b/site/component/Motion/motion.js @@ -846,9 +846,7 @@ nm.start = function (self) { module.exports = newMotion; var motionVideo = { - video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'], - videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'], - init: function () { + init: function (videoList, videoMp4List) { var self = this; $('.video-player').each((i, videoBox) => { @@ -860,9 +858,9 @@ var motionVideo = { $videoBox.append(svg.node); var video = $videoBox.find('video'); if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) { - $('').appendTo(video); + $('').appendTo(video); } else { - $('').appendTo(video); + $('').appendTo(video); } video.css({ 'width': '100%' diff --git a/site/component/Motion/page-transition.js b/site/component/Motion/page-transition.js deleted file mode 100644 index 56a267667d..0000000000 --- a/site/component/Motion/page-transition.js +++ /dev/null @@ -1,5 +0,0 @@ -import Motion from './motion'; - -module.exports = function () { - Motion.motionVideo.init(); -}; diff --git a/site/component/Motion/transition.js b/site/component/Motion/transition.js new file mode 100644 index 0000000000..0db522e092 --- /dev/null +++ b/site/component/Motion/transition.js @@ -0,0 +1,21 @@ +import Motion from './motion'; + +module.exports = function () { + Motion.motionVideo.init([ + 'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', + 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4', + 'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', + 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4', + 'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', + 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4', + 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', + ], [ + 'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', + 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4', + 'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', + 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4', + 'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', + 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4', + 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', + ]); +}; diff --git a/site/website.config.js b/site/website.config.js index dbee191457..cab317192e 100644 --- a/site/website.config.js +++ b/site/website.config.js @@ -2,8 +2,9 @@ export default { categoryOrder: { 组件: 0, - 基础: 0, - 动画: 1, + 十大原则: 0, + 设计基础: 1, + 动画: 2, }, typeOrder: { 基本: 0, From 6a158e2f8236cff79e49cb9c6557a6eacdbe6442 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 11:45:50 +0800 Subject: [PATCH 0174/1555] Fix outdated Copyright --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index c208f57b6a..12189b627d 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT LICENSE -Copyright (c) 2015 Alipay.com, https://www.alipay.com/ +Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the From d9183853228dd647dc5c43060fa14a54fb7dac1d Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 13:38:56 +0800 Subject: [PATCH 0175/1555] Fix affix z-index --- style/components/affix.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/affix.less b/style/components/affix.less index c5e8cca7b1..0a56b4143f 100644 --- a/style/components/affix.less +++ b/style/components/affix.less @@ -1,3 +1,4 @@ .ant-affix { position: fixed; + z-index: 10; } From 9f4a7617f036f6488e0a8735abb7b78e0ce0a930 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 14:01:39 +0800 Subject: [PATCH 0176/1555] update CHANGELOG --- CHANGELOG.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64cf13f246..2fbd338833 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,19 @@ --- +## 0.12.11 + +`fixing` + +- 全新的设计文档 `语言` 部分。 +- 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。 +- TreeSelect 组件补充 `showCheckedStrategy` 属性，支持回填数据的不同展示方式。 +- 补充 Modal `align` 属性的文档。 +- 修复 Menu 菜单 z-index 丢失的问题。 +- Progress 的默认颜色固定，不再随着主色变化。 +- 优化 Button 点击动画在 Chrome 下的效果。 +- 修复一个 Affix 的 `z-index` 太低的问题。 + ## 0.12.10 - 修复 0.12.9 版本 npm 包打包错误的问题。 From 21e8439d41454a1e993d86a1db5c49f45c074f91 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 14:14:57 +0800 Subject: [PATCH 0177/1555] fix typo --- docs/spec/stay.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/stay.md b/docs/spec/stay.md index f3c9baef63..a9a511a8db 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -2,7 +2,7 @@ - category: 十大原则 - order: 6 -- subtitle: Stay in the Page +- subtitle: Stay on the Page 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 From 3259497728a63cfbf4814f3dfb3be54f6e8d0694 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 14:21:48 +0800 Subject: [PATCH 0178/1555] update devDeps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c25316d627..68c4ee4168 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "eslint-plugin-react": "^4.0.0", "eslint-tinker": "^0.3.1", "extract-text-webpack-plugin": "^1.0.1", - "gh-pages": "^0.9.0", + "gh-pages": "^0.11.0", "history": "^1.17.0", "instantclick": "^3.1.0", "jest-cli": "~0.8.0", From 1e68c97232e51d4efb3db9e00e0417ffe150be6d Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 15 Mar 2016 15:09:26 +0800 Subject: [PATCH 0179/1555] upgrade tabs --- package.json | 2 +- style/components/tabs.less | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c25316d627..3a0e8b8ffe 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "rc-steps": "~1.4.1", "rc-switch": "~1.3.2", "rc-table": "~3.11.1", - "rc-tabs": "~5.7.0", + "rc-tabs": "~5.8.0", "rc-time-picker": "~1.1.0", "rc-tooltip": "~3.3.1", "rc-tree": "~1.1.0", diff --git a/style/components/tabs.less b/style/components/tabs.less index b4284b2833..f47ce3481d 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -3,13 +3,16 @@ @effect-duration: .3s; .@{tab-prefix-cls} { - outline: none; box-sizing: border-box; position: relative; overflow: hidden; .clearfix; color: @text-color; + &-bar { + outline: none; + } + &-ink-bar { z-index: 1; position: absolute; @@ -32,7 +35,7 @@ } } - &-tabs-bar { + &-bar { border-bottom: 1px solid @border-color-base; margin-bottom: 16px; } @@ -292,7 +295,7 @@ width: auto; } - .@{tab-prefix-cls}-tabs-bar { + .@{tab-prefix-cls}-bar { border-bottom: 0; } @@ -329,7 +332,7 @@ } &-vertical&-left { - .@{tab-prefix-cls}-tabs-bar { + .@{tab-prefix-cls}-bar { float: left; border-right: 1px solid @border-color-split; margin-right: -1px; @@ -356,7 +359,7 @@ } &-vertical&-right { - .@{tab-prefix-cls}-tabs-bar { + .@{tab-prefix-cls}-bar { float: right; border-left: 1px solid @border-color-split; margin-left: -1px; @@ -377,7 +380,7 @@ } } - &-bottom &-tabs-bar { + &-bottom &-bar { margin-bottom: 0; margin-top: 16px; } From 48dfb55cbb6d091639e8363da532c8a3d617cb52 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 15 Mar 2016 16:51:22 +0800 Subject: [PATCH 0180/1555] site: toc should support inner html --- site/component/Article/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx index ebc7977981..eb145d1fb2 100644 --- a/site/component/Article/index.jsx +++ b/site/component/Article/index.jsx @@ -37,9 +37,8 @@ export default class Article extends React.Component { }).map((node) => { return (
  • - - { node.children } - +
    • ); }); From aa5b298f58ea264a1859bf46304d1a39fc06ec4a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 15 Mar 2016 16:52:04 +0800 Subject: [PATCH 0181/1555] site: title should support inner html --- site/component/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/component/utils.js b/site/component/utils.js index b13e9ccad0..e8d161e219 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -44,7 +44,7 @@ export function objectToComponent(pathname, object, index) { key: index, id: children, }, [ - object.children, + , #, ]); } From 8b5e2ce1e043e6a6cb3f8d67559b585ee1dbb436 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 17:22:39 +0800 Subject: [PATCH 0182/1555] Add API docs --- components/cascader/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/cascader/index.md b/components/cascader/index.md index 3d5462ecbc..1857abff10 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -36,3 +36,5 @@ | size | 输入框大小，可选 `large` `default` `small` | string | `default` | | disabled | 禁用 | boolean | false | | allowClear | 是否支持清除 | boolean | true | +| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' | +| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | From 55b163d62e3f7a06f517c741c8929a33173ca8d1 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 15 Mar 2016 17:40:31 +0800 Subject: [PATCH 0183/1555] site: update site style --- docs/spec/alignment.md | 8 ++++---- docs/spec/contrast.md | 4 ++-- site/common/styles/common.less | 17 +++++++++++++++++ site/common/styles/demo.less | 21 ++++++++++++++------- site/common/styles/footer.less | 1 + site/common/styles/markdown.less | 13 +++++++------ site/common/styles/preview-img.less | 25 +++++++++++++++++++------ site/component/ComponentDoc/index.jsx | 12 ++++++++++-- 8 files changed, 74 insertions(+), 27 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 599550fe85..c533ffe39e 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,8 +12,8 @@ ## 文案类对齐 -推荐示例 -不推荐示例 +推荐示例 +不推荐示例 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 @@ -31,7 +31,7 @@ ## 数字类对齐 -正确示例 -错误示例 +正确示例 +错误示例 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index bc2d75b6a7..4e48cec749 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -12,8 +12,8 @@ ## 主次关系对比 -正确示例 -错误示例 +正确示例 +错误示例 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 diff --git a/site/common/styles/common.less b/site/common/styles/common.less index 355f96ac5c..536387eb93 100644 --- a/site/common/styles/common.less +++ b/site/common/styles/common.less @@ -1,5 +1,22 @@ +html { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +html, body { + height: 100%; +} + +body { + font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif; + line-height: 1.5; + color: #666; + font-size: 14px; background: #ECECEC; + transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); + overflow-x: hidden; } .main-wrapper { diff --git a/site/common/styles/demo.less b/site/common/styles/demo.less index 6223fbfce8..4be229eae1 100644 --- a/site/common/styles/demo.less +++ b/site/common/styles/demo.less @@ -13,15 +13,20 @@ } } -.demo-list-left, -.demo-list-right { - width: 49%; +.code-boxes-col-1-1 { + width: 80%; } -.demo-list-left { - margin-right: 1%; + +.code-boxes-col-2-1 { + width: 48%; + display: inline-block; + vertical-align: top; + padding-right: 8px; } -.demo-list-right { - margin-left: 1%; + +.code-boxes-col-2-1:last-child { + padding-right: 0; + padding-left: 8px; } .code-box { @@ -127,6 +132,7 @@ margin: 0.5em 0; padding-right: 25px; width: 100%; + word-break: break-word; } .code-box .collapse { @@ -145,6 +151,7 @@ transition: all 0.3s ease; color: #999; background: #fff; + user-select: none; } .code-box.expand .collapse { diff --git a/site/common/styles/footer.less b/site/common/styles/footer.less index 904c718bfa..7fe60f9313 100644 --- a/site/common/styles/footer.less +++ b/site/common/styles/footer.less @@ -6,6 +6,7 @@ footer { position: relative; z-index: 1; color: #666; + box-shadow: 0 1000px 0 1000px #fff; } footer ul { diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less index 989290294d..06fc638672 100644 --- a/site/common/styles/markdown.less +++ b/site/common/styles/markdown.less @@ -4,8 +4,8 @@ line-height: 1.8; } -.markdown > * { - // width: 100%!important; +.highlight { + line-height: 1.5; } .markdown img { @@ -143,6 +143,7 @@ border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; + font-style: italic; } .markdown blockquote p { @@ -155,6 +156,10 @@ margin-left: 8px; } +.markdown .waiting { + color: #ccc; +} + .markdown h1:hover .anchor, .markdown h2:hover .anchor, .markdown h3:hover .anchor, @@ -168,8 +173,4 @@ .markdown > br, .markdown > p > br { clear: both; -} - -.markdown .waiting { - color: #ccc; } \ No newline at end of file diff --git a/site/common/styles/preview-img.less b/site/common/styles/preview-img.less index d50950b093..4de07f18a6 100644 --- a/site/common/styles/preview-img.less +++ b/site/common/styles/preview-img.less @@ -1,15 +1,12 @@ .preview-image-boxes { float: right; - margin: 0 0 110px 60px; + margin: 0 0 70px 28px; width: 616px; - - &-with-popup { - width: 420px; - } + clear: both; } .preview-image-boxes + .preview-image-boxes { - margin-top: -75px; + margin-top: -35px; } .preview-image-box { @@ -27,6 +24,22 @@ position: relative; } +.preview-image-wrapper.video { + padding: 0; + background: 0; + display: block; +} + +.preview-image-wrapper video { + width: 100%; + display: block; + + svg { + position: absolute; + top: 0; + left: 0; + } +} + .preview-image-wrapper.good:after { content: ''; width: 100%; diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index cd0e9b5a2d..74125e01a1 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -87,10 +87,18 @@ export default class ComponentDoc extends React.Component { -
    + { leftChildren } - { isSingleCol ? null : { rightChildren } } + { + isSingleCol ? null : + { rightChildren } + }
    { (doc.api || []).map(utils.objectToComponent.bind(null, location.pathname)) } From 50fd2416480dfc49444cc93f138af404ccd49f0e Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 19:31:56 +0800 Subject: [PATCH 0184/1555] Fix missing code of a222b38 --- components/table/filterDropdown.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index 97e2921dd7..79671bdaa2 100644 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -96,6 +96,7 @@ let FilterMenu = React.createClass({ let menus = (
    Date: Tue, 15 Mar 2016 20:13:02 +0800 Subject: [PATCH 0185/1555] update button cirle outline style --- style/components/button.less | 4 --- style/mixins/button.less | 52 +++--------------------------------- 2 files changed, 4 insertions(+), 52 deletions(-) diff --git a/style/components/button.less b/style/components/button.less index db2626fda5..43a1e7d3c8 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -46,10 +46,6 @@ .btn-circle(@btn-prefix-cls); } - &-circle-outline { - .btn-circle-outline; - } - &:after { font-family: anticon; content: "\e6a1"; diff --git a/style/mixins/button.less b/style/mixins/button.less index e3456baba6..cc9b90c035 100644 --- a/style/mixins/button.less +++ b/style/mixins/button.less @@ -192,50 +192,6 @@ } } -// circle button with stroke border -.btn-circle-outline() { - position: relative; - - &:not([disabled]):before { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: inline-block; - .opacity(0); - border-radius: 50% 50%; - content: " "; - .scale(0, 0); - .transition(all .3s @ease-in-out); - z-index: 0; - background-color: @primary-color; - } - - &:not([disabled]):hover, - &:not([disabled]):focus, - &:not([disabled]):active, - &:not([disabled]).active { - > .@{iconfont-css-prefix} { - color: @btn-primary-color; - position: relative; - } - } - - &:not([disabled]):hover:before, - &:not([disabled]):focus:before, - &:not([disabled]):active:before, - &:not([disabled]).active:before { - .opacity(1); - .scale(1, 1); - } - - &:not([disabled]):active:before, - &:not([disabled]).active:before { - background-color: tint(@primary-color, 20%); - } -} - // Horizontal button groups styl // -------------------------------------------------- .btn-group(@btnClassName: btn) { @@ -269,15 +225,15 @@ padding-left: 8px; } - & > & { + & > & { float: left; } - & > &:not(:first-child):not(:last-child) > .@{btnClassName} { + & > &:not(:first-child):not(:last-child) > .@{btnClassName} { border-radius: 0; } - & > &:first-child:not(:last-child) { + & > &:first-child:not(:last-child) { > .@{btnClassName}:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; @@ -285,7 +241,7 @@ } } - & > &:last-child:not(:first-child) > .@{btnClassName}:first-child { + & > &:last-child:not(:first-child) > .@{btnClassName}:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; padding-left: 8px; From 1c35bd3d9d56b7a17874eb9ffe2cde26061fbe2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=97=B2=E8=80=98=E2=84=A2?= Date: Tue, 15 Mar 2016 14:10:25 +0800 Subject: [PATCH 0186/1555] refact(regexp): better regexp --- components/button/button.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/button/button.jsx b/components/button/button.jsx index f139d96059..e6db04ff64 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { findDOMNode } from 'react-dom'; -const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/; +const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); function isString(str) { return typeof str === 'string'; From 680b8478f4b0a2093507244ac70eed412aceb59d Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 22:12:00 +0800 Subject: [PATCH 0187/1555] update docs --- components/slider/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/slider/index.md b/components/slider/index.md index 15c49e3f72..7a2d7b1657 100644 --- a/components/slider/index.md +++ b/components/slider/index.md @@ -16,15 +16,16 @@ | 参数 | 类型 | 默认值 |说明 | |------------|----------------|-------------|--------------| +| range | Boolean | false | 双滑块模式 | min | Number | 0 | 最小值 | max | Number | 100 | 最大值 | step | Number or null | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 -| marks | Object {Number: String} | {} | 分段标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内 +| marks | Object {Number: String} | {} | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内 +| dots | Boolean | false | 是否只能拖拽到刻度上 | value | Number or [Number, Number]| | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | defaultValue | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | included | Boolean | true | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | disabled | Boolean | false | 值为 `true` 时，滑块为禁用状态 -| allowCross | Boolean | true | 当 `range` 为 `true` 时，该属性可以设置是否允许两个滑块交换位置。 | onChange | Function | NOOP | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | onAfterChange | Function | NOOP | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | tipFormatter | Function or null | IDENTITY | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 From 272d1a1136215d5b785ed27d5200aaebe43fb676 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 11:23:16 +0800 Subject: [PATCH 0188/1555] update docs --- docs/react/getting-started.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 6015f14349..6dec916da8 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -130,10 +130,6 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 ``` -另外，由于 babel 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题。 - -[antd-init](http://github.com/ant-design/antd-init) 脚手架已经解决了这个问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/8c4a55d205c82a6ad87814bbf997696051713d58/boilerplate/webpack.config.js#L10-L14)。 - > 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8 ## 自行构建 From 8d817e6eee71cf8e452028dd2ffe9208674cb53e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=97=B2=E8=80=98=E2=84=A2?= Date: Tue, 15 Mar 2016 18:17:49 +0800 Subject: [PATCH 0189/1555] update(propTypes): more restrictions on propTypes --- components/button/button-group.jsx | 2 +- components/button/button.jsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx index 46829114f3..e166885054 100644 --- a/components/button/button-group.jsx +++ b/components/button/button-group.jsx @@ -24,5 +24,5 @@ export default class ButtonGroup extends React.Component { } } ButtonGroup.propTypes = { - size: React.PropTypes.string, + size: React.PropTypes.oneOf(['large', 'small']), }; diff --git a/components/button/button.jsx b/components/button/button.jsx index e6db04ff64..73e82e2f3e 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -73,10 +73,10 @@ export default class Button extends React.Component { } Button.propTypes = { - type: React.PropTypes.string, - shape: React.PropTypes.string, - size: React.PropTypes.string, - htmlType: React.PropTypes.string, + type: React.PropTypes.oneOf(['primary', 'ghost', 'dashed']), + shape: React.PropTypes.oneOf(['circle', 'circle-outline']), + size: React.PropTypes.oneOf(['large', 'small']), + htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']), onClick: React.PropTypes.func, loading: React.PropTypes.bool, className: React.PropTypes.string, From 870ec04aabc530506d7ad5ed86b1f72095fb7f3c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 11:50:06 +0800 Subject: [PATCH 0190/1555] break all in table cell --- style/components/table.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/table.less b/style/components/table.less index 2b8a5d947f..0fd4e780f6 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -82,6 +82,7 @@ th, td { padding: 16px 8px; + word-break: break-all; } th.@{table-prefix-cls}-selection-column, From 884c92d7ecf8f6ec15b17256121f79e0d6e7983a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 14:26:21 +0800 Subject: [PATCH 0191/1555] pageSize change should trigger Table.onChange, close #1206 --- components/table/index.jsx | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 2cb29b1ca1..984f7c8065 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -152,9 +152,7 @@ let AntTable = React.createClass({ sorter, }; this.setState(newState); - this.props.onChange.apply(this, this.prepareParamsArguments( - objectAssign({}, this.state, newState) - )); + this.props.onChange(this.prepareParamsArguments({ ...this.state, ...newState })); }, handleFilter(column, nextFilters) { @@ -174,9 +172,7 @@ let AntTable = React.createClass({ }; this.setState(newState); this.setSelectedRowKeys([]); - this.props.onChange.apply(this, this.prepareParamsArguments( - objectAssign({}, this.state, newState) - )); + this.props.onChange(this.prepareParamsArguments({ ...this.state, ...newState })); }, handleSelect(record, rowIndex, e) { @@ -278,9 +274,7 @@ let AntTable = React.createClass({ pagination }; this.setState(newState); - this.props.onChange.apply(this, this.prepareParamsArguments( - objectAssign({}, this.state, newState) - )); + this.props.onChange(this.prepareParamsArguments({ ...this.state, ...newState })); }, onRadioChange(ev) { @@ -459,11 +453,12 @@ let AntTable = React.createClass({ handleShowSizeChange(current, pageSize) { const pagination = this.state.pagination; pagination.onShowSizeChange(current, pageSize); - - let nextPagination = objectAssign(pagination, { - pageSize, - }); + const nextPagination = { ...pagination, pageSize }; this.setState({ pagination: nextPagination }); + this.props.onChange(this.prepareParamsArguments({ + ...this.state, + pagination: nextPagination, + })); }, renderPagination() { From a9076945a9256b057c3463e736157470a6c3988f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 14:59:48 +0800 Subject: [PATCH 0192/1555] fix table bordered style --- style/components/table.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/table.less b/style/components/table.less index 0fd4e780f6..f108ee110f 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -194,7 +194,7 @@ border-bottom: 1px solid @border-color-split; } - tr:last-child { + tbody tr:last-child { th, td { border-bottom: 0; From 5e1f0960a218a51e2a9f43ad7ce438fcadbb3864 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 16:03:16 +0800 Subject: [PATCH 0193/1555] Fix rowSelection.onChange selectedRows when specify rowKey --- components/table/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 984f7c8065..8497c3fb03 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -111,7 +111,9 @@ let AntTable = React.createClass({ } if (this.props.rowSelection && this.props.rowSelection.onChange) { const data = this.getCurrentPageData(); - const selectedRows = data.filter(row => selectedRowKeys.indexOf(row.key) >= 0); + const selectedRows = data.filter( + (row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0 + ); this.props.rowSelection.onChange(selectedRowKeys, selectedRows); } }, From 0a1d3bdd3be68d61704e38421159da2eef15ea55 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 16:35:41 +0800 Subject: [PATCH 0194/1555] fix onChange argument --- components/table/index.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 8497c3fb03..3ac97294df 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -154,7 +154,7 @@ let AntTable = React.createClass({ sorter, }; this.setState(newState); - this.props.onChange(this.prepareParamsArguments({ ...this.state, ...newState })); + this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState })); }, handleFilter(column, nextFilters) { @@ -174,7 +174,7 @@ let AntTable = React.createClass({ }; this.setState(newState); this.setSelectedRowKeys([]); - this.props.onChange(this.prepareParamsArguments({ ...this.state, ...newState })); + this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState })); }, handleSelect(record, rowIndex, e) { @@ -276,7 +276,7 @@ let AntTable = React.createClass({ pagination }; this.setState(newState); - this.props.onChange(this.prepareParamsArguments({ ...this.state, ...newState })); + this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState })); }, onRadioChange(ev) { @@ -457,7 +457,7 @@ let AntTable = React.createClass({ pagination.onShowSizeChange(current, pageSize); const nextPagination = { ...pagination, pageSize }; this.setState({ pagination: nextPagination }); - this.props.onChange(this.prepareParamsArguments({ + this.props.onChange(...this.prepareParamsArguments({ ...this.state, pagination: nextPagination, })); From f247297f011959e7770a768500278a04225d0d42 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 16:39:53 +0800 Subject: [PATCH 0195/1555] Fix children row selection, close #1212 --- components/table/demo/expand-children.md | 17 +++++++++++++++- components/table/index.jsx | 25 ++++++++++++++---------- components/table/util.js | 15 ++++++++++++++ style/components/table.less | 5 ----- 4 files changed, 46 insertions(+), 16 deletions(-) create mode 100644 components/table/util.js diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index 7577deb3ab..5dc9c1e529 100644 --- a/components/table/demo/expand-children.md +++ b/components/table/demo/expand-children.md @@ -4,6 +4,8 @@ 表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。 +> 注：暂不支持父子数据递归关联选择。 + --- ````jsx @@ -77,8 +79,21 @@ const data = [{ address: '我是b', }]; +// 通过 rowSelection 对象表明需要行选择 +const rowSelection = { + onChange(selectedRowKeys, selectedRows) { + console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + }, + onSelect(record, selected, selectedRows) { + console.log(record, selected, selectedRows); + }, + onSelectAll(selected, selectedRows, changeRows) { + console.log(selected, selectedRows, changeRows); + } +}; + ReactDOM.render( -
    , +
    , mountNode ); ```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 3ac97294df..6ea2663f46 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -8,6 +8,7 @@ import Icon from '../icon'; import objectAssign from 'object-assign'; import Spin from '../spin'; import classNames from 'classnames'; +import { flatArray } from './util'; function noop() { } @@ -78,7 +79,7 @@ let AntTable = React.createClass({ if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) { return []; } - return this.getCurrentPageData() + return this.getFlatCurrentPageData() .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked) .map((record, rowIndex) => this.getRecordKey(record, rowIndex)); }, @@ -110,7 +111,7 @@ let AntTable = React.createClass({ this.setState({ selectedRowKeys }); } if (this.props.rowSelection && this.props.rowSelection.onChange) { - const data = this.getCurrentPageData(); + const data = this.getFlatCurrentPageData(); const selectedRows = data.filter( (row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0 ); @@ -194,7 +195,7 @@ let AntTable = React.createClass({ }); this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { - let data = this.getCurrentPageData(); + let data = this.getFlatCurrentPageData(); let selectedRows = data.filter((row, i) => { return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; }); @@ -214,7 +215,7 @@ let AntTable = React.createClass({ }); this.setSelectedRowKeys(selectedRowKeys); if (this.props.rowSelection.onSelect) { - let data = this.getCurrentPageData(); + let data = this.getFlatCurrentPageData(); let selectedRows = data.filter((row, i) => { return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0; }); @@ -224,7 +225,7 @@ let AntTable = React.createClass({ handleSelectAllRow(e) { const checked = e.target.checked; - const data = this.getCurrentPageData(); + const data = this.getFlatCurrentPageData(); const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection(); const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection); const changableRowKeys = data.filter(item => @@ -334,7 +335,7 @@ let AntTable = React.createClass({ renderRowSelection() { let columns = this.props.columns.concat(); if (this.props.rowSelection) { - let data = this.getCurrentPageData().filter((item) => { + let data = this.getFlatCurrentPageData().filter((item) => { if (this.props.rowSelection.getCheckboxProps) { return !this.props.rowSelection.getCheckboxProps(item).disabled; } @@ -501,8 +502,8 @@ let AntTable = React.createClass({ return this.props.columns.filter(c => this.getColumnKey(c) === myKey)[0]; }, - getCurrentPageData(dataSource) { - let data = this.getLocalData(dataSource); + getCurrentPageData() { + let data = this.getLocalData(); let current; let pageSize; let state = this.state; @@ -526,9 +527,13 @@ let AntTable = React.createClass({ return data; }, - getLocalData(dataSource) { + getFlatCurrentPageData() { + return flatArray(this.getCurrentPageData()); + }, + + getLocalData() { let state = this.state; - let data = dataSource || this.props.dataSource || []; + let data = this.props.dataSource || []; // 排序 if (state.sortOrder && state.sorter) { data = data.slice(0); diff --git a/components/table/util.js b/components/table/util.js new file mode 100644 index 0000000000..f2dfcec48a --- /dev/null +++ b/components/table/util.js @@ -0,0 +1,15 @@ +export function flatArray(data = [], childrenName = 'children') { + const result = []; + const loop = (array) => { + array.forEach(item => { + const newItem = { ...item }; + delete newItem[childrenName]; + result.push(newItem); + if (item[childrenName] && item[childrenName].length > 0) { + loop(item[childrenName]); + } + }); + }; + loop(data); + return result; +} diff --git a/style/components/table.less b/style/components/table.less index f108ee110f..9369b54eb3 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -333,11 +333,6 @@ } } - // Hide selection component in children data - &[class*="@{table-prefix-cls}-row-level-"] .@{table-prefix-cls}-selection-column > span { - display: none; - } - &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span { display: inline-block; } From 19c5c4e7875d16aa0bba67422b087f51e3f60985 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 16:46:04 +0800 Subject: [PATCH 0196/1555] bump 0.12.11 --- CHANGELOG.md | 8 ++++++-- package.json | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fbd338833..20bc9ec74b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,16 +6,20 @@ ## 0.12.11 -`fixing` +`2016-03-16` - 全新的设计文档 `语言` 部分。 - 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。 - TreeSelect 组件补充 `showCheckedStrategy` 属性，支持回填数据的不同展示方式。 - 补充 Modal `align` 属性的文档。 -- 修复 Menu 菜单 z-index 丢失的问题。 +- 修复 Menu 弹出菜单 `z-index` 丢失的问题。 - Progress 的默认颜色固定，不再随着主色变化。 - 优化 Button 点击动画在 Chrome 下的效果。 - 修复一个 Affix 的 `z-index` 太低的问题。 +- 修复 Table 树形数据的二级节点前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212) +- 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206) +- 修复 Table 指定 `rowKey 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。 +- 修复一个 Affix 的 `z-index` 太低的问题。 ## 0.12.10 diff --git a/package.json b/package.json index 0bb3b5171e..277b54be43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.11-beta", + "version": "0.12.11", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 3fb5d3c0abbdc869696ee1d425475fc417841c3e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 16:53:20 +0800 Subject: [PATCH 0197/1555] update changelog --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20bc9ec74b..01afd44008 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,9 +16,9 @@ - Progress 的默认颜色固定，不再随着主色变化。 - 优化 Button 点击动画在 Chrome 下的效果。 - 修复一个 Affix 的 `z-index` 太低的问题。 -- 修复 Table 树形数据的二级节点前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212) +- 修复 Table 树形数据的二级节点列前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212) - 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206) -- 修复 Table 指定 `rowKey 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。 +- 修复 Table 指定 `rowKey` 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。 - 修复一个 Affix 的 `z-index` 太低的问题。 ## 0.12.10 From b8957bcc9247418edab37a241d2569fa7df67e82 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 16 Mar 2016 17:05:41 +0800 Subject: [PATCH 0198/1555] site: refactor ImagePreview --- site/component/Article/ImagePreview.jsx | 85 +++++++++++++------------ 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/site/component/Article/ImagePreview.jsx b/site/component/Article/ImagePreview.jsx index fbb22ec7cd..50b92a20a4 100644 --- a/site/component/Article/ImagePreview.jsx +++ b/site/component/Article/ImagePreview.jsx @@ -8,6 +8,31 @@ function isBad(className) { return /\bbad\b/i.test(className); } +function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible, + comparable, onClick, onCancel }) { + return ( +
    +
    + Sample Picture +
    +
    {coverMeta.alt}
    +
    + {coverMeta.description} +
    + + + + { comparable ? cover : imgs } + +
    {coverMeta.alt}
    +     +
    + ); +} + export default class ImagePreview extends React.Component { constructor(props) { super(props); @@ -48,7 +73,6 @@ export default class ImagePreview extends React.Component { }; }); - const cover = imgsMeta[0]; const imagesList = imgsMeta.map((meta, index) => { return ; }); @@ -58,49 +82,26 @@ export default class ImagePreview extends React.Component { const style = comparable ? { width: '50%' } : null; return (
    -
    -
    - Sample Picture -
    -
    {cover.alt}
    -
    - - - - { comparable ? imagesList[0] : imagesList } - - { - comparable || imagesList.length === 1 ? -
    {cover.alt}
    : - null - } -     -
    + { comparable ? -
    -
    - Sample Picture -
    -
    {imgsMeta[1].alt}
    -
    - {imgsMeta[1].description} -
    - - - - { comparable ? imagesList[1] : imagesList } - -
    {imagesList[1].alt}
    -     -
    : null + : null }
    ); From 1a1adc4fe94a3535f0d69745d7a82ca97a0b669b Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 16 Mar 2016 17:46:35 +0800 Subject: [PATCH 0199/1555] site: support video in Markdown --- docs/spec/transition.md | 34 +++++-------------------- package.json | 3 ++- site/common/styles/preview-img.less | 10 ++++++++ site/component/Article/ImagePreview.jsx | 5 ++-- site/component/Article/VideoPlayer.jsx | 24 +++++++++++++++++ site/component/Article/index.jsx | 18 ++++++++++++- site/component/Motion/transition.js | 21 --------------- 7 files changed, 62 insertions(+), 53 deletions(-) create mode 100644 site/component/Article/VideoPlayer.jsx delete mode 100644 site/component/Motion/transition.js diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 693c1d82ee..21c979495d 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -14,21 +14,19 @@ ## 在视图变化时保持上下文 -
    +
    {coverMeta.alt}
    -
    - {coverMeta.description} -
    +
    diff --git a/site/component/Article/VideoPlayer.jsx b/site/component/Article/VideoPlayer.jsx new file mode 100644 index 0000000000..8d5e2776db --- /dev/null +++ b/site/component/Article/VideoPlayer.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import SublimeVideo from 'react-sublime-video'; + +export default class VideoPlayer extends React.Component { + render() { + const video = this.props.video; + const span = document.createElement('span'); + span.innerHTML = video; + const attributes = span.children[0].attributes; + const { alt, description, src } = attributes; + const videoClassName = attributes.class.nodeValue; + + return ( +
    +
    + +
    +
    {alt && alt.nodeValue}
    +
    +
    + ); + } +} diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx index eb145d1fb2..db8f771c92 100644 --- a/site/component/Article/index.jsx +++ b/site/component/Article/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { Link } from 'react-router'; import classNames from 'classnames'; import ImagePreview from './ImagePreview'; +import VideoPlayer from './VideoPlayer'; import * as utils from '../utils'; export default class Article extends React.Component { @@ -9,6 +10,7 @@ export default class Article extends React.Component { super(props); this.imgToPreview = this.imgToPreview.bind(this); + this.enhanceVideo = this.enhanceVideo.bind(this); } isPreviewImg(string) { @@ -30,6 +32,18 @@ export default class Article extends React.Component { return ; } + isVideo(string) { + return /^; + } + render() { const { content, location } = this.props; const jumper = content.description.filter((node) => { @@ -43,7 +57,9 @@ export default class Article extends React.Component { ); }); - content.description = content.description.map(this.imgToPreview); + content.description = content.description + .map(this.imgToPreview) + .map(this.enhanceVideo); return (
    diff --git a/site/component/Motion/transition.js b/site/component/Motion/transition.js deleted file mode 100644 index 0db522e092..0000000000 --- a/site/component/Motion/transition.js +++ /dev/null @@ -1,21 +0,0 @@ -import Motion from './motion'; - -module.exports = function () { - Motion.motionVideo.init([ - 'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', - 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4', - 'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', - 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4', - 'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', - 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4', - 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', - ], [ - 'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', - 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4', - 'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', - 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4', - 'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', - 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4', - 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', - ]); -}; From dcd6c6f489650ad9f37379bfcb38c1eb05516077 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 19:04:15 +0800 Subject: [PATCH 0200/1555] fix changelog --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 01afd44008..85ce26fd92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +19,6 @@ - 修复 Table 树形数据的二级节点列前无法选择的问题。[#1212](https://github.com/ant-design/ant-design/issues/1212) - 修复 Table 修改 `pageSize` 没有触发 `onChange` 的问题。[#1206](https://github.com/ant-design/ant-design/issues/1206) - 修复 Table 指定 `rowKey` 时导致 `rowSelection.onChange` 的 `selectedRows` 参数为空的问题。 -- 修复一个 Affix 的 `z-index` 太低的问题。 ## 0.12.10 From f66a257ab9c738746a662c8b569869a01f8227c4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 20:17:35 +0800 Subject: [PATCH 0201/1555] update upload chinese name --- components/upload/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/upload/index.md b/components/upload/index.md index 6fba743b8f..a81217d52c 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -1,7 +1,7 @@ # Upload - category: Components -- chinese: 文件上传 +- chinese: 上传 - type: 表单 --- From d7f46a05b30057886a5f6d0f08530001166f829c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Mar 2016 22:06:02 +0800 Subject: [PATCH 0202/1555] update docs --- components/alert/index.jsx | 3 ++- components/alert/index.md | 2 +- components/popconfirm/demo/placement.md | 2 +- components/popconfirm/index.md | 2 +- components/tabs/index.md | 1 + 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/alert/index.jsx b/components/alert/index.jsx index 566718731e..ed3637d1e8 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -9,7 +9,8 @@ export default React.createClass({ return { prefixCls: 'ant-alert', showIcon: false, - onClose() {} + onClose() {}, + type: 'info', }; }, getInitialState() { diff --git a/components/alert/index.md b/components/alert/index.md index 3ea71340a7..ba0e1b9c22 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -17,7 +17,7 @@ | 参数 | 说明 | 类型 | 默认值 | |----------- |--------------------------------------------------------- | ---------- |-------| -| type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | 无 | +| type | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error` | String | `info` | | closable | 可选参数，默认不显示关闭按钮 | Boolean | 无 | | closeText | 可选参数，自定义关闭按钮 | React.Node | 无 | | message | 必选参数，警告提示内容 | React.Node | 无 | diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md index 3ce9735121..1f89c8d57e 100644 --- a/components/popconfirm/demo/placement.md +++ b/components/popconfirm/demo/placement.md @@ -2,7 +2,7 @@ - order: 1 -位置有四个方向。 +位置有十二个方向。 --- diff --git a/components/popconfirm/index.md b/components/popconfirm/index.md index 491d21135c..9cfd85810c 100644 --- a/components/popconfirm/index.md +++ b/components/popconfirm/index.md @@ -19,7 +19,7 @@ | 参数 | 说明 | 类型 | 默认值 | |-----------|------------------------------------------|---------------|--------| -| placement | 气泡框位置，可选 `top/left/right/bottom` | string | top | +| placement | 气泡框位置，可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top | | title | 确认框的描述 | string | 无 | | onConfirm | 点击确认的回调 | function | 无 | | onCancel | 卡片内容 | function | 无 | diff --git a/components/tabs/index.md b/components/tabs/index.md index 1a0127b9f2..ace73874b0 100644 --- a/components/tabs/index.md +++ b/components/tabs/index.md @@ -30,6 +30,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | onTabClick | tab 被点击的回调 | Function | 无 | | tabBarExtraContent | tab bar 上额外的元素 | React Node | 无 | | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | String | 'line' | +| size | 大小，提供 `default` 和 `small` 两种大小 | String | 'default' | | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | String | 'top' | | onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | Function(targetKey, action) | 无 | From ab04ce30f7ff41b41f4c5c467890441b49cfb3e2 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 17 Mar 2016 10:11:26 +0800 Subject: [PATCH 0203/1555] docs: update docs for getFieldProps, close: #1211 --- components/form/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/form/index.md b/components/form/index.md index d680a6de83..7b6bebe9fb 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -85,6 +85,8 @@ CustomizedForm = Form.create({})(CustomizedForm); #### this.props.form.getFieldProps(id, options) +`getFieldProps` 返回的属性包括 `id`、`value`(或你设置的其它 `valuePropName`)、`ref`、`onChange`(或者你设置的其它 `trigger` `validateTrigger`)，所以不应再设置同样的属性，以免冲突。如果对其返回值的细节有兴趣，可以 `console.log` 出来查看。 + | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| | options.id | 必填输入控件唯一标志 | string | | | From 4931e5cc095b9e8cf34afe894d02e251cf5720c1 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 17 Mar 2016 10:43:50 +0800 Subject: [PATCH 0204/1555] site: update css for website --- site/common/styles/preview-img.less | 22 ++++++++++++++++++++++ site/component/Article/ImagePreview.jsx | 12 +++++++++--- site/component/Article/index.jsx | 4 ++-- 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/site/common/styles/preview-img.less b/site/common/styles/preview-img.less index df21ef89ba..fb54c56ea7 100644 --- a/site/common/styles/preview-img.less +++ b/site/common/styles/preview-img.less @@ -3,6 +3,14 @@ margin: 0 0 70px 28px; width: 616px; clear: both; + + &-with-carousel { + width: 420px; + + .preview-image-box { + padding: 0; + } + } } .preview-image-boxes + .preview-image-boxes { @@ -101,6 +109,20 @@ .image-modal { text-align: center; + + &-container { + position: relative; + text-align: center; + } +} + +.ant-carousel .slick-slider { + padding-bottom: 0; + + img { + display: inline; + max-width: 100%; + } } .no-padding { diff --git a/site/component/Article/ImagePreview.jsx b/site/component/Article/ImagePreview.jsx index 7269a6773b..a622ef73f6 100644 --- a/site/component/Article/ImagePreview.jsx +++ b/site/component/Article/ImagePreview.jsx @@ -21,9 +21,9 @@ function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
    - - + { comparable ? cover : imgs }
    {coverMeta.alt}
    @@ -73,7 +73,13 @@ export default class ImagePreview extends React.Component { }); const imagesList = imgsMeta.map((meta, index) => { - return ; + return ( +
    +
    + +
    +
    + ); }); const comparable = imgs.length === 2 && (imgsMeta[0].isGood || imgsMeta[0].isBad) && diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx index db8f771c92..370f560509 100644 --- a/site/component/Article/index.jsx +++ b/site/component/Article/index.jsx @@ -23,11 +23,11 @@ export default class Article extends React.Component { } const imgs = node.children.split(/\r|\n/); - const hasPopup = imgs.length > 1; + const hasCarousel = imgs.length > 1; const previewClassName = classNames({ 'preview-image-boxes': true, clearfix: true, - 'preview-image-boxes-with-popup': hasPopup, + 'preview-image-boxes-with-carousel': hasCarousel, }); return ; } From e0172caee4f58609908e8b0d6057291e3f69e075 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=97=B2=E8=80=98=E2=84=A2?= Date: Thu, 17 Mar 2016 11:10:58 +0800 Subject: [PATCH 0205/1555] feat(checkbox group): checkbox group support disable specified item. --- components/checkbox/Group.jsx | 2 +- components/checkbox/demo/group.md | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index 02995db992..abfff666c9 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -63,7 +63,7 @@ export default React.createClass({
    { options.map(option => - diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md index eb0d77ca03..c853508fb9 100644 --- a/components/checkbox/demo/group.md +++ b/components/checkbox/demo/group.md @@ -25,12 +25,19 @@ const options = [{ label: '橘', value: 'Orange', }]; +const optionsWithDisabled = [ + { label: '苹果', value: 'Apple' }, + { label: '梨', value: 'Pear' }, + { label: '橘', value: 'Orange', disabled: false }, +]; ReactDOM.render(

    +
    +
    , mountNode); ```` From 33161f95205baf451ae64e7aba1e1c7adb6231e0 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 17 Mar 2016 15:00:06 +0800 Subject: [PATCH 0206/1555] site: update ImagePreview style --- site/common/styles/preview-img.less | 13 ++++++------- site/component/Article/ImagePreview.jsx | 15 ++++++++++++--- site/component/Article/index.jsx | 9 +-------- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/site/common/styles/preview-img.less b/site/common/styles/preview-img.less index fb54c56ea7..57a79090f7 100644 --- a/site/common/styles/preview-img.less +++ b/site/common/styles/preview-img.less @@ -7,7 +7,7 @@ &-with-carousel { width: 420px; - .preview-image-box { + .preview-image-box img { padding: 0; } } @@ -116,13 +116,12 @@ } } -.ant-carousel .slick-slider { +.image-modal-single.slick-slider { padding-bottom: 0; - - img { - display: inline; - max-width: 100%; - } +} +.ant-carousel .slick-slider img { + display: inline; + max-width: 100%; } .no-padding { diff --git a/site/component/Article/ImagePreview.jsx b/site/component/Article/ImagePreview.jsx index a622ef73f6..c96aff10c6 100644 --- a/site/component/Article/ImagePreview.jsx +++ b/site/component/Article/ImagePreview.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import { Modal, Carousel } from '../../../'; function isGood(className) { @@ -10,6 +11,7 @@ function isBad(className) { function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible, comparable, onClick, onCancel }) { + const onlyOneImg = comparable || imgs.length === 1; return (
    - + { comparable ? cover : imgs }
    {coverMeta.alt}
    @@ -54,7 +56,7 @@ export default class ImagePreview extends React.Component { } render() { - const { className, imgs } = this.props; + const { imgs } = this.props; const imgsMeta = imgs.map((img) => { const span = document.createElement('span'); span.innerHTML = img; @@ -85,8 +87,15 @@ export default class ImagePreview extends React.Component { (imgsMeta[0].isGood || imgsMeta[0].isBad) && (imgsMeta[1].isGood || imgsMeta[1].isBad); const style = comparable ? { width: '50%' } : null; + + const hasCarousel = imgs.length > 1 && !comparable; + const previewClassName = classNames({ + 'preview-image-boxes': true, + clearfix: true, + 'preview-image-boxes-with-carousel': hasCarousel, + }); return ( -
    +
    1; - const previewClassName = classNames({ - 'preview-image-boxes': true, - clearfix: true, - 'preview-image-boxes-with-carousel': hasCarousel, - }); - return ; + return ; } isVideo(string) { From 6c913d7ebe4bb27a0fb8351da9f288e12d89fd6d Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 17 Mar 2016 15:10:49 +0800 Subject: [PATCH 0207/1555] Fix popover and popconfirm arrow style --- components/popconfirm/index.jsx | 2 +- components/popover/index.jsx | 2 +- style/components/popover.less | 50 ++++++++++++++++----------------- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index 197d9bb724..726276bc8b 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -67,7 +67,7 @@ export default React.createClass({ const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props; const overlay = (
    -
    +
    {title}
    diff --git a/components/popover/index.jsx b/components/popover/index.jsx index 730aef6c02..44aef07df2 100644 --- a/components/popover/index.jsx +++ b/components/popover/index.jsx @@ -52,7 +52,7 @@ const Popover = React.createClass({ return (
    {this.props.title &&
    {this.props.title}
    } -
    +
    {this.props.overlay}
    diff --git a/style/components/popover.less b/style/components/popover.less index de6f6c12dc..cf24939d73 100644 --- a/style/components/popover.less +++ b/style/components/popover.less @@ -93,7 +93,7 @@ color: #666; } - &-content { + &-inner-content { padding: 8px 16px; color: @text-color; } @@ -143,9 +143,9 @@ content: ""; } - &-placement-top > &-arrow, - &-placement-topLeft > &-arrow, - &-placement-topRight > &-arrow { + &-placement-top &-arrow, + &-placement-topLeft &-arrow, + &-placement-topRight &-arrow { border-bottom-width: 0; border-top-color: @popover-arrow-outer-color; bottom: 0; @@ -157,20 +157,20 @@ border-top-color: @popover-arrow-color; } } - &-placement-top > &-arrow { + &-placement-top &-arrow { left: 50%; margin-left: -@popover-arrow-outer-width; } - &-placement-topLeft > &-arrow { + &-placement-topLeft &-arrow { left: 16px; } - &-placement-topRight > &-arrow { + &-placement-topRight &-arrow { right: 16px; } - &-placement-right > &-arrow, - &-placement-rightTop > &-arrow, - &-placement-rightBottom > &-arrow { + &-placement-right &-arrow, + &-placement-rightTop &-arrow, + &-placement-rightBottom &-arrow { left: 0; border-left-width: 0; border-right-color: @popover-arrow-outer-color; @@ -182,20 +182,20 @@ border-right-color: @popover-arrow-color; } } - &-placement-right > &-arrow { + &-placement-right &-arrow { top: 50%; margin-top: -@popover-arrow-outer-width; } - &-placement-rightTop > &-arrow { + &-placement-rightTop &-arrow { top: 12px; } - &-placement-rightBottom > &-arrow { + &-placement-rightBottom &-arrow { bottom: 12px; } - &-placement-bottom > &-arrow, - &-placement-bottomLeft > &-arrow, - &-placement-bottomRight > &-arrow { + &-placement-bottom &-arrow, + &-placement-bottomLeft &-arrow, + &-placement-bottomRight &-arrow { border-top-width: 0; border-bottom-color: @popover-arrow-outer-color; top: 0; @@ -207,20 +207,20 @@ border-bottom-color: @popover-arrow-color; } } - &-placement-bottom > &-arrow { + &-placement-bottom &-arrow { left: 50%; margin-left: -@popover-arrow-outer-width; } - &-placement-bottomLeft > &-arrow { + &-placement-bottomLeft &-arrow { left: 16px; } - &-placement-bottomRight > &-arrow { + &-placement-bottomRight &-arrow { right: 16px; } - &-placement-left > &-arrow, - &-placement-leftTop > &-arrow, - &-placement-leftBottom > &-arrow { + &-placement-left &-arrow, + &-placement-leftTop &-arrow, + &-placement-leftBottom &-arrow { right: 0; border-right-width: 0; border-left-color: @popover-arrow-outer-color; @@ -232,14 +232,14 @@ bottom: -@popover-arrow-width; } } - &-placement-left > &-arrow { + &-placement-left &-arrow { top: 50%; margin-top: -@popover-arrow-outer-width; } - &-placement-leftTop > &-arrow { + &-placement-leftTop &-arrow { top: 12px; } - &-placement-leftBottom > &-arrow { + &-placement-leftBottom &-arrow { bottom: 12px; } } From 60cd7ed85e61bb742c9b0ab12104a3d2cf80b44e Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 17 Mar 2016 15:13:48 +0800 Subject: [PATCH 0208/1555] Fix current page when Table pageSize changed --- components/table/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 6ea2663f46..d87df967ab 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -456,7 +456,7 @@ let AntTable = React.createClass({ handleShowSizeChange(current, pageSize) { const pagination = this.state.pagination; pagination.onShowSizeChange(current, pageSize); - const nextPagination = { ...pagination, pageSize }; + const nextPagination = { ...pagination, pageSize, current }; this.setState({ pagination: nextPagination }); this.props.onChange(...this.prepareParamsArguments({ ...this.state, From 20ec00abf0629537acde923999684df5415bb93a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 17 Mar 2016 15:21:41 +0800 Subject: [PATCH 0209/1555] site: update UI --- package.json | 2 +- site/common/styles/toc.less | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 81a0b23fea..99eafb262c 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "warning": "~2.1.0" }, "devDependencies": { - "antd-md-loader": "0.1.0-beta.10", + "antd-md-loader": "0.1.0-beta.11", "atool-build": "^0.5.0", "autoprefixer": "^6.3.3", "babel-cli": "^6.2.0", diff --git a/site/common/styles/toc.less b/site/common/styles/toc.less index 7b7dec34c7..0aaa78935f 100644 --- a/site/common/styles/toc.less +++ b/site/common/styles/toc.less @@ -40,16 +40,15 @@ } .toc-affix { - z-index: 9; + position: relative; + float: right; } .demos-anchor { color: #aaa; position: absolute; - margin-right: 24px; - top: 24px; - right: 0; - z-index: 100; + top: 0; + right: -18px; background: #fff; font-size: 12px; From fda29689c42f76e4e57a7f877357bd5d5f298dd9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Thu, 17 Mar 2016 15:46:07 +0800 Subject: [PATCH 0210/1555] site: add versions selector --- site/common/styles/footer.less | 4 ++++ site/component/Footer/index.jsx | 26 +++++++++++++++++++++++--- site/website.config.js | 6 ++++++ 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/site/common/styles/footer.less b/site/common/styles/footer.less index 7fe60f9313..57ca27f19c 100644 --- a/site/common/styles/footer.less +++ b/site/common/styles/footer.less @@ -33,4 +33,8 @@ footer ul li > div { footer ul li > a { margin: 5px 2px 0 0; +} + +.versions-selector { + width: 75px; } \ No newline at end of file diff --git a/site/component/Footer/index.jsx b/site/component/Footer/index.jsx index a6c473cb4f..cdda0f369b 100644 --- a/site/component/Footer/index.jsx +++ b/site/component/Footer/index.jsx @@ -1,8 +1,28 @@ import React from 'react'; import { Select } from '../../../'; +import { version as antdVersion } from '../../../package.json'; +import { docVersions } from '../../website.config'; +const Option = Select.Option; export default class Footer extends React.Component { + constructor(props) { + super(props); + + this.handleVersionChange = this.handleVersionChange.bind(this); + } + + handleVersionChange(url) { + window.location.href = url; + } + render() { + const options = Object.keys(docVersions).map((version, index) => { + return ( + + ); + }); return (
    ); } -}); +} + +Breadcrumb.defaultProps = { + prefixCls: 'ant-breadcrumb', + separator: '/', + linkRender: (href, name) => {name}, +}; + +Breadcrumb.propTypes = { + prefixCls: React.PropTypes.string, + separator: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.element, + ]), + routes: React.PropTypes.array, + params: React.PropTypes.object, +}; Breadcrumb.Item = BreadcrumbItem; -export default Breadcrumb; diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index dca2cefda4..1c58d55d0e 100644 --- a/components/checkbox/index.jsx +++ b/components/checkbox/index.jsx @@ -3,12 +3,7 @@ import React from 'react'; import Group from './Group'; import classNames from 'classnames'; -const Checkbox = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-checkbox' - }; - }, +export default class Checkbox extends React.Component { render() { const { prefixCls, style, children, className, ...restProps } = this.props; const classString = classNames({ @@ -22,8 +17,10 @@ const Checkbox = React.createClass({ ); } -}); +} + +Checkbox.defaultProps = { + prefixCls: 'ant-checkbox' +}; Checkbox.Group = Group; - -export default Checkbox; diff --git a/components/dropdown/dropdown-button.jsx b/components/dropdown/dropdown-button.jsx index 675f97c5c9..b25bd22e14 100644 --- a/components/dropdown/dropdown-button.jsx +++ b/components/dropdown/dropdown-button.jsx @@ -5,21 +5,7 @@ import Dropdown from './dropdown'; const ButtonGroup = Button.Group; import classNames from 'classnames'; -export default React.createClass({ - getDefaultProps() { - return { - align: { - points: ['tr', 'br'], - overlay: { - adjustX: 1, - adjustY: 1, - }, - offset: [0, 4], - targetOffset: [0, 0], - }, - type: 'default', - }; - }, +export default class DropdownButton extends React.Component { render() { const { type, overlay, trigger, align, children, className, ...restProps } = this.props; const cls = classNames({ @@ -37,4 +23,17 @@ export default React.createClass({ ); } -}); +} + +DropdownButton.defaultProps = { + align: { + points: ['tr', 'br'], + overlay: { + adjustX: 1, + adjustY: 1, + }, + offset: [0, 4], + targetOffset: [0, 0], + }, + type: 'default', +}; diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx index 8cb236f885..f767579dfc 100644 --- a/components/dropdown/dropdown.jsx +++ b/components/dropdown/dropdown.jsx @@ -1,20 +1,19 @@ import React from 'react'; -import Dropdown from 'rc-dropdown'; +import RcDropdown from 'rc-dropdown'; -export default React.createClass({ - getDefaultProps() { - return { - transitionName: 'slide-up', - prefixCls: 'ant-dropdown', - }; - }, +export default class Dropdown extends React.Component { render() { const { overlay, ...otherProps } = this.props; const menu = React.cloneElement(overlay, { openTransitionName: 'zoom-big', }); return ( - + ); } -}); +} + +Dropdown.defaultProps = { + transitionName: 'slide-up', + prefixCls: 'ant-dropdown', +}; diff --git a/components/steps/index.jsx b/components/steps/index.jsx index 937ddfbdf2..3b1e1cb8f7 100644 --- a/components/steps/index.jsx +++ b/components/steps/index.jsx @@ -1,33 +1,30 @@ import React from 'react'; -import Steps from 'rc-steps'; +import RcSteps from 'rc-steps'; -const AntSteps = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-steps', - iconPrefix: 'ant', - maxDescriptionWidth: 100, - current: 0 - }; - }, +export default class Steps extends React.Component { render() { let maxDescriptionWidth = this.props.maxDescriptionWidth; if (this.props.direction === 'vertical') { maxDescriptionWidth = 'auto'; } return ( - {this.props.children} - + ); } -}); +} -AntSteps.Step = Steps.Step; +Steps.defaultProps = { + prefixCls: 'ant-steps', + iconPrefix: 'ant', + maxDescriptionWidth: 100, + current: 0 +}; -export default AntSteps; +Steps.Step = RcSteps.Step; diff --git a/components/timeline/index.jsx b/components/timeline/index.jsx index 1c6b8765f6..eb5ef006d2 100644 --- a/components/timeline/index.jsx +++ b/components/timeline/index.jsx @@ -1,15 +1,8 @@ import React from 'react'; import classNames from 'classnames'; -const TimelineItem = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-timeline', - color: 'blue', - last: false, - pending: false, - }; - }, +/* Exported as Timeline.Item */ +class TimelineItem extends React.Component { render() { const { prefixCls, color, last, children, pending } = this.props; const itemClassName = classNames({ @@ -25,14 +18,16 @@ const TimelineItem = React.createClass({ ); } -}); +} -const Timeline = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-timeline', - }; - }, +TimelineItem.defaultProps = { + prefixCls: 'ant-timeline', + color: 'blue', + last: false, + pending: false, +}; + +export default class Timeline extends React.Component { render() { const { prefixCls, children, pending } = this.props; const pendingNode = typeof pending === 'boolean' ? null : pending; @@ -55,8 +50,10 @@ const Timeline = React.createClass({ ); } -}); +} + +Timeline.defaultProps = { + prefixCls: 'ant-timeline', +}; Timeline.Item = TimelineItem; - -export default Timeline; From a00cd7b0dbb30828dd98df84b1fd3748f859a06f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 18 Mar 2016 11:24:01 +0800 Subject: [PATCH 0212/1555] site: update styles --- site/common/styles/common.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/common/styles/common.less b/site/common/styles/common.less index 536387eb93..ed6f64a88a 100644 --- a/site/common/styles/common.less +++ b/site/common/styles/common.less @@ -42,6 +42,10 @@ body { .sidebar { padding-bottom: 50px; + &.ant-menu-inline > .ant-menu-item { + font-size: 14px; + } + a[disabled] { color: #ccc; } From 04f747770eea6006743715cfb919f4fe926ee4cd Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 18 Mar 2016 11:48:06 +0800 Subject: [PATCH 0213/1555] fix(docs), confirm demo & docs --- components/modal/demo/info.md | 9 +++++++-- components/modal/index.md | 3 ++- style/components/confirm.less | 1 + 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md index 4a9eba35b1..a559b04646 100644 --- a/components/modal/demo/info.md +++ b/components/modal/demo/info.md @@ -12,8 +12,13 @@ import { Modal, Button } from 'antd'; function info() { Modal.info({ title: '这是一条通知信息', - content: '一些附加信息一些附加信息一些附加信息', - onOk() {} + content: ( +
    +

    一些附加信息一些附加信息一些附加信息

    +

    一些附加信息一些附加信息一些附加信息

    +
    + ), + onOk() {}, }); } diff --git a/components/modal/index.md b/components/modal/index.md index 875f4e46d5..efeab06d36 100644 --- a/components/modal/index.md +++ b/components/modal/index.md @@ -31,7 +31,7 @@ | okText | 确认按钮文字 | String | 确定 | | cancelText | 取消按钮文字 | String | 取消 | | maskClosable | 点击蒙层是否允许关闭 | Boolean | true | -| align | 浮层自定义位置 | Object, [dom-align](https://github.com/yiminghe/dom-align) | 距离顶部 100px | +| align | 浮层自定义位置 | Object, [dom-align](https://github.com/yiminghe/dom-align) | 距离顶部 100px | ### Modal.xxx() @@ -47,6 +47,7 @@ | 参数 | 说明 | 类型 | 默认值 | |------------|----------------|------------------|--------------| | title | 标题 | React.Element or String | 无 | +| content | 内容 | React.Element or String | 无 | | onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | width | 宽度 | String or Number | 416 | diff --git a/style/components/confirm.less b/style/components/confirm.less index 19164b0378..9e98fcb725 100644 --- a/style/components/confirm.less +++ b/style/components/confirm.less @@ -21,6 +21,7 @@ margin-left: 37px; font-size: @font-size-base; color: @text-color; + margin-top: 8px; } .anticon { From 1b5bff51dd80464284580386c0d56dd1a7653719 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 18 Mar 2016 15:15:31 +0800 Subject: [PATCH 0214/1555] update resource files --- docs/resource/download.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/resource/download.md b/docs/resource/download.md index 1d17a2f27d..43305127dd 100644 --- a/docs/resource/download.md +++ b/docs/resource/download.md @@ -8,17 +8,17 @@ 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
    - + - Axure Components + Axure Components v1.3 一套强大的 Ant Design 的 Axure 部件库 - + - Axure Box + Axure Box v1.3 强大的 Ant Design 组件拼装方式 From adb64f1fe46c47decad79ae28a768e1d4ffcfed2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 18 Mar 2016 15:17:34 +0800 Subject: [PATCH 0215/1555] update resource files --- docs/resource/download.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/resource/download.md b/docs/resource/download.md index 43305127dd..40e44acab3 100644 --- a/docs/resource/download.md +++ b/docs/resource/download.md @@ -29,7 +29,7 @@ 一套页面逻辑原型库，帮你梳理页面逻辑 - + Web Font From d597a6d63188cb2c19443185b43db96732f92044 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 18 Mar 2016 15:19:42 +0800 Subject: [PATCH 0216/1555] update deploy log --- webpack.deploy.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/webpack.deploy.config.js b/webpack.deploy.config.js index 0118df97cc..5f281b448c 100644 --- a/webpack.deploy.config.js +++ b/webpack.deploy.config.js @@ -8,6 +8,9 @@ config.plugins = [config.plugins[0], new webpack.optimize.UglifyJsPlugin({ sourceMap: false, output: { ascii_only: true + }, + compress: { + warnings: false } })]; From e1c2e3f1a35e3c66f95e804fecec9610ddf39ad0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 18 Mar 2016 16:23:05 +0800 Subject: [PATCH 0217/1555] bump 0.12.12 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 85ce26fd92..55cc72cd25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ --- +## 0.12.12 + +`2016-03-18` + +- [设计资源](http://ant.design/docs/resource/download)文件更新。 +- 修复 Popover 和 Popconfirm 箭头消失的问题。 +- 修复一个 Table 切换分页长度时的页码溢出的问题。 + ## 0.12.11 `2016-03-16` diff --git a/package.json b/package.json index 277b54be43..1c8ecacd5e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.11", + "version": "0.12.12", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 9a937100e869dabf9be6c34ca5d63c6a99873b6a Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 19 Mar 2016 01:54:46 +0800 Subject: [PATCH 0218/1555] fix(docs): close #1230 --- docs/pattern/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 4367d24822..71f2250eff 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -31,8 +31,8 @@
    - +
    总结一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。 适用在操作性强、中后台管理性质的应用。一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。
    From 77783d8c9bf0c0c0d80158f91c32f2a3225754c7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 19 Mar 2016 13:54:38 +0800 Subject: [PATCH 0219/1555] rollback for es3ify, #858 --- docs/react/getting-started.md | 7 ++++++- webpack.config.js | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 6dec916da8..992bb51367 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -102,12 +102,13 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 @@ -130,6 +131,10 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 ``` +另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题。 + +[antd-init](http://github.com/ant-design/antd-init) 脚手架已经解决了这个问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8)。 + > 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8 ## 自行构建 diff --git a/webpack.config.js b/webpack.config.js index ef21c5af4e..cdf3aebe04 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -27,6 +27,10 @@ module.exports = { module: { loaders: [{ + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'es3ify' + }, { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', From e5a014d3a642f4654791120b4dcdcef50c94bfe8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 19 Mar 2016 15:28:48 +0800 Subject: [PATCH 0220/1555] Fix combobox select error style, close #1227 --- style/components/form.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/components/form.less b/style/components/form.less index ce0c7c73ca..0e7d4ad6f3 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -391,6 +391,10 @@ form { } } + .@{select-prefix-cls}-combobox .@{select-prefix-cls}-search__field:focus { + box-shadow: none; + } + // ant-datepicker .@{calendar-prefix-cls}-picker-icon:after { color: @error-color; From 959a190d3ac81a10b66979ec572c78baaf5d4987 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 20 Mar 2016 16:25:14 +0800 Subject: [PATCH 0221/1555] update layout --- site/templates/layout.html | 4 ++-- webpack.config.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/templates/layout.html b/site/templates/layout.html index 1629b3cb0d..2b8a86f7cf 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -12,7 +12,7 @@ {% block styles %}{% endblock %} - + - + {% block scripts %}{% endblock %} diff --git a/webpack.config.js b/webpack.config.js index cdf3aebe04..c1d081a166 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -67,5 +67,5 @@ module.exports = { new webpack.NoErrorsPlugin() ], - devtool: 'source-map' + devtool: 'cheap-module-source-map' }; From a9afa97e8b1bbd6d72dd5bf8d2371ca03c5e81b5 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Sun, 20 Mar 2016 19:37:36 +0700 Subject: [PATCH 0222/1555] Fix popover test. The class name was renamed in 6c913d7, so update the test to match. --- tests/popover.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/popover.test.js b/tests/popover.test.js index 0504ef90dc..ef42c84481 100644 --- a/tests/popover.test.js +++ b/tests/popover.test.js @@ -23,6 +23,6 @@ describe('Popover', function() { expect(popup).not.toBe(undefined); expect(popup.className).toContain('ant-popover-placement-top'); expect(popup.innerHTML).toMatch(/
    code<\/div>/); - expect(popup.innerHTML).toMatch(/
    console\.log\('hello world'\)<\/div>/); + expect(popup.innerHTML).toMatch(/
    console\.log\('hello world'\)<\/div>/); }); }); From 1b81aa8c75c5593f62ed366de00d5f29ed65f381 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Sun, 20 Mar 2016 19:41:34 +0700 Subject: [PATCH 0223/1555] Convert Popover & Spin to ES2015 classes. --- components/popover/index.jsx | 30 +++++++++++++----------------- components/spin/index.jsx | 28 ++++++++++++---------------- 2 files changed, 25 insertions(+), 33 deletions(-) diff --git a/components/popover/index.jsx b/components/popover/index.jsx index 44aef07df2..58dc31b6ea 100644 --- a/components/popover/index.jsx +++ b/components/popover/index.jsx @@ -5,18 +5,7 @@ import getPlacements from './placements'; const placements = getPlacements(); const prefixCls = 'ant-popover'; -const Popover = React.createClass({ - getDefaultProps() { - return { - prefixCls, - placement: 'top', - trigger: 'hover', - mouseEnterDelay: 0.1, - mouseLeaveDelay: 0.1, - overlayStyle: {} - }; - }, - +export default class Popover extends React.Component { render() { const transitionName = ({ top: 'zoom-down', @@ -42,11 +31,11 @@ const Popover = React.createClass({ {this.props.children} ); - }, + } getPopupDomNode() { return this.refs.tooltip.getPopupDomNode(); - }, + } getOverlay() { return ( @@ -57,7 +46,14 @@ const Popover = React.createClass({
    ); - }, -}); + } +} -export default Popover; +Popover.defaultProps = { + prefixCls, + placement: 'top', + trigger: 'hover', + mouseEnterDelay: 0.1, + mouseLeaveDelay: 0.1, + overlayStyle: {} +}; diff --git a/components/spin/index.jsx b/components/spin/index.jsx index bb96b61d6e..8d1bdd9bbc 100644 --- a/components/spin/index.jsx +++ b/components/spin/index.jsx @@ -2,22 +2,10 @@ import React from 'react'; import classNames from 'classnames'; import { isCssAnimationSupported } from 'css-animation'; -const AntSpin = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-spin', - spining: true, - }; - }, - - propTypes: { - className: React.PropTypes.string, - size: React.PropTypes.oneOf(['small', 'default', 'large']), - }, - +export default class Spin extends React.Component { isNestedPattern() { return !!(this.props && this.props.children); - }, + } render() { const { className, size, prefixCls, tip } = this.props; @@ -56,6 +44,14 @@ const AntSpin = React.createClass({ } return spinElement; } -}); +} -export default AntSpin; +Spin.defaultProps = { + prefixCls: 'ant-spin', + spining: true, +}; + +Spin.propTypes = { + className: React.PropTypes.string, + size: React.PropTypes.oneOf(['small', 'default', 'large']), +}; From eaae43abdd27ca15703fbb96162017428a73e549 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Mon, 21 Mar 2016 08:22:14 +0700 Subject: [PATCH 0224/1555] More ES2015 classes. This covers Carousel, InputNumber, Select, Slider, Switch, TreeSelect and Tree. --- components/carousel/index.jsx | 19 ++++++++---------- components/input-number/index.jsx | 19 +++++++++--------- components/select/index.jsx | 29 +++++++++++++--------------- components/slider/index.jsx | 19 +++++++++--------- components/switch/index.jsx | 17 ++++++++-------- components/tree-select/index.jsx | 32 +++++++++++++++---------------- components/tree/index.jsx | 28 +++++++++++++-------------- 7 files changed, 75 insertions(+), 88 deletions(-) diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx index a994d46d90..a27072fc96 100644 --- a/components/carousel/index.jsx +++ b/components/carousel/index.jsx @@ -13,17 +13,11 @@ if (typeof window !== 'undefined') { window.matchMedia = window.matchMedia || matchMediaPolyfill; } -import Carousel from 'react-slick'; +import SlickCarousel from 'react-slick'; import React from 'react'; import assign from 'object-assign'; -const AntCarousel = React.createClass({ - getDefaultProps() { - return { - dots: true, - arrows: false, - }; - }, +export default class Carousel extends React.Component { render() { let props = assign({}, this.props); @@ -39,10 +33,13 @@ const AntCarousel = React.createClass({ return (
    - +
    ); } -}); +} -export default AntCarousel; +Carousel.defaultProps = { + dots: true, + arrows: false, +}; diff --git a/components/input-number/index.jsx b/components/input-number/index.jsx index 7e630a5220..160a0b8c3c 100644 --- a/components/input-number/index.jsx +++ b/components/input-number/index.jsx @@ -1,14 +1,8 @@ import React from 'react'; import classNames from 'classnames'; -import InputNumber from 'rc-input-number'; +import RcInputNumber from 'rc-input-number'; -export default React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-input-number', - step: 1, - }; - }, +export default class InputNumber extends React.Component { render() { const { className, size, ...other } = this.props; const inputNumberClass = classNames({ @@ -17,6 +11,11 @@ export default React.createClass({ [className]: !!className, }); - return ; + return ; } -}); +} + +InputNumber.defaultProps = { + prefixCls: 'ant-input-number', + step: 1, +}; diff --git a/components/select/index.jsx b/components/select/index.jsx index 9c4bccacfd..a5b6d2efa1 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -1,17 +1,8 @@ import React from 'react'; -import Select, { Option, OptGroup } from 'rc-select'; +import RcSelect, { Option, OptGroup } from 'rc-select'; import classNames from 'classnames'; -const AntSelect = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-select', - transitionName: 'slide-up', - optionLabelProp: 'children', - choiceTransitionName: 'zoom', - showSearch: false, - }; - }, +export default class Select extends React.Component { render() { let { size, className, combobox, notFoundContent @@ -28,14 +19,20 @@ const AntSelect = React.createClass({ } return ( - {this.getOptions()}; - } - }); - - ReactDOM.render(, document.getElementById('autoComplete')); -}); - -InstantClickChangeFns.push(function () { - var Select = antd.Select; - var Option = Select.Option; - var versionsHistory = { - '0.9.x': '09x.ant.design', - '0.10.x': '010x.ant.design', - '0.11.x': '011x.ant.design', - }; - versionsHistory[antdVersion.latest] = - versionsHistory[antdVersion.latest] || 'ant.design'; - var versions = Object.keys(versionsHistory).sort(function (a, b) { - return semver.lt(a.replace('.x', '.0'), b.replace('.x', '.0')); - }); - var options = versions.map(function (version) { - var link = versionsHistory[version]; - return ; - }); - - function onChange(value) { - if (versionsHistory[value]) { - location.href = location.href.replace(location.host, versionsHistory[value]); - } - } - - ReactDOM.render( - - , document.getElementById('versions-select')); -}); - -window.BrowserDemo = React.createClass({ - render() { - return ( -
    -
    -
    -
    -
    -
    -
    - -
    -
    - {this.props.children} -
    -
    - ); - } -}); - -const { Modal, Carousel } = antd; -const PriviewImg = React.createClass({ - getInitialState() { - return { - visible: false, - current: 0, - }; - }, - showImageModal() { - this.setState({ - visible: true - }); - }, - handleCancel() { - this.setState({ - visible: false - }); - }, - handleImgChange(current) { - this.setState({current}); - }, - render() { - const goodCls = this.props.good ? 'good' : ''; - const badCls = this.props.bad ? 'bad' : ''; - const imgsPack = this.props.imgsPack || [{ - src: this.props.src, - alt: this.props.alt, - }]; - const imgStyle = {}; - if (this.props.noPadding) { - imgStyle.padding = '0'; - imgStyle.background = 'none'; - } - const current = this.state.current; - const arrows = imgsPack.length > 1; - const createMarkup = () => { - return {__html: this.props.description} - }; - - let node = Sample Picture; - if (this.props.type === 'video') { - node = ( - - ); - } - - return ( -
    -
    - {node} -
    -
    {this.props.alt}
    -
    - - - { - imgsPack.map((img, i) => -
    -
    - -
    -
    - ) - } -     -
    {imgsPack[current].alt}
    -     -
    - ); - } -}); - -InstantClickChangeFns.push(function () { - const previewImageBoxes = $('.preview-img').parent(); - previewImageBoxes.each(function (i, box) { - box = $(box); - let priviewImgs = []; - const priviewImgNodes = box.find('.preview-img'); - - // 判断是否要做成图片集合 - // 指定了封面图片就是 - let coverImg; - priviewImgNodes.each(function (i, img) { - if (img.hasAttribute('as-cover')) { - coverImg = img; - return false; - } - }); - - if (coverImg) { - const imgs = []; - priviewImgNodes.each((i, img) => imgs.push(img)); - priviewImgs = ; - } else { - priviewImgNodes.each(function (i, img) { - priviewImgs.push( - - ); - }); - } - - // 计算宽度 - let width = ''; - if (priviewImgs.length === 1) { - width = priviewImgNodes[0].getAttribute('width') || ''; - } else if (coverImg) { - width = coverImg.getAttribute('width'); - } - if (width && width.indexOf('%') < 0 && width !== 'auto') { - width += 'px'; - } - - let mountNode = $('
    ')[0]; - box.replaceWith(mountNode); - ReactDOM.render({priviewImgs}, mountNode); - }); -}); - -InstantClickChangeFns.push(function() { - // fix hash id link - if (window.location.href.indexOf('#') > 0) { - setTimeout(function() { - window.location.href = window.location.href; - }, 30); - } - - $('.component-demos .icon-all').off('click'); - $('.component-demos .icon-all').on('click', function() { - if ($(this).hasClass('expand')) { - $(this).removeClass('expand'); - $('.code-box .highlight').animate({ - height: 'hide', - opacity: 0 - }, 150); - } else { - $(this).addClass('expand'); - $('.code-box .highlight').animate({ - height: 'show', - opacity: 1 - }, 150); - } - }); - - $('.code-box').each(function(i, item) { - item = $(item); - item.find('.highlight').appendTo(item); - }); - - $('.code-boxes').off('click'); - $('.code-boxes').on('click', '.collapse', function() { - var highlightBox = $(this).parent().parent().find('.highlight'); - var codeVisible = highlightBox.is(':visible'); - highlightBox.animate({ - height: codeVisible ? 'hide' : 'show', - opacity: codeVisible ? 0 : 1 - }, 150); - if (codeVisible) { - $(this).parent().parent().removeClass('expand'); - } else { - $(this).parent().parent().addClass('expand'); - } - }); - - function hashChange() { - $('.demos-anchor a').removeClass('current'); - $('.demos-anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current'); - } - - hashChange(); - - // 高亮侧边演示菜单 - $(window).off('hashchange'); - $(window).on('hashchange', hashChange); - - // 移动 API 文档到演示下方 - $('.markdown #api').nextAll().andSelf().appendTo('.api-container'); - - // 滚动时固定锚点、高亮当前项 - if ($('.demos-anchor')[0]) { - var doc = $(document); - var tocTop = $('.toc').offset().top; - function onScroll() { - var top = doc.scrollTop(); - if (top >= tocTop) { - $('.toc').addClass('sticky'); - } else { - $('.toc').removeClass('sticky'); - } - } - onScroll(); - $(window).off('scroll'); - $(window).on('scroll', onScroll); - } - - // 添加上一页下一页 - if ($('.aside-container li > a').length > 0) { - var links = $('.aside-container li > a'); - var currentLinkIndex = -1; - links.each(function(i, item) { - if ($(item).parent().hasClass('current')) { - currentLinkIndex = i; - } - }); - var prevNextNavNode = $('
    '); - var prevLink = links[currentLinkIndex - 1]; - var nextLink = links[currentLinkIndex + 1]; - if (prevLink) { - var prevLinkNavNode = $('    ' + prevLink.innerHTML + ''); - if (prevLink.className.indexOf('nav-link-disabled') >= 0) { - prevLinkNavNode.attr('disabled', true); - } - prevNextNavNode.append(prevLinkNavNode); - } else { - prevNextNavNode.append(''); - } - if (nextLink) { - var nextLinkNavNode = $('' + nextLink.innerHTML + ''); - if (nextLink.className.indexOf('nav-link-disabled') >= 0) { - nextLinkNavNode.attr('disabled', true); - } - prevNextNavNode.append(nextLinkNavNode); - } else { - prevNextNavNode.append(''); - } - prevNextNavNode.appendTo('.main-container'); - } - - var navMenu = $('.nav'); - $('.nav-phone-icon').click(function() { - navMenu.removeClass('nav-hide').addClass('nav-show'); - }); - - $('body').on('click touchstart', function (e) { - if (e.target !== $('.nav-phone-icon')[0] && - !navMenu[0].contains(e.target) && - navMenu.hasClass('nav-show')) { - navMenu.removeClass('nav-show').addClass('nav-hide'); - } - }); - - $.easing['jswing'] = $.easing['swing']; - $.extend($.easing,{ - easeInCirc: function (x, t, b, c, d) { - return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; - }, - easeOutCirc: function (x, t, b, c, d) { - return c * Math.sqrt(1 - (t=t/d-1)*t) + b; - }, - easeInOutCirc: function (x, t, b, c, d) { - if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; - return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; - } - }); - - var navFunc = { - navStrArr: [], - init: function() { - if (this.navBar) { - return; - } - this.navBox = $(".nav"); - this.navBar = this.navBox.find(".bar"); - this.navList = this.navBox.find("ul li"); - this.navNum = $(".current").index(); - this.navBarAnim(); - this.highlightCurrentNav(); - $(window).bind("resize", this.highlightCurrentNav); - this.navBar.show(); - }, - highlightCurrentNav: function(target) { - target = target || this.navList.eq(this.navNum); - this.navBar && this.navBar.css({ - left: target.position().left, - width: target.outerWidth() - }); - }, - navBarAnim: function() { - var self = this, delay; - self.navList.bind("mouseenter", function(e) { - clearTimeout(delay); - self.highlightCurrentNav($(e.currentTarget)); - }); - self.navList.bind("mouseleave", function(e) { - delay = setTimeout(function() { - self.highlightCurrentNav(); - }, 500); - }); - } - }; - navFunc.init(); - var listFunc = { - num: 0, - init: function() { - this.listBox = $(".aside-container>ul"); - if (!this.listBox.length) { - return; - } - this.getUrlNum(); - this.addTitleEvent(); - }, - getUrlNum: function() { - var self = this, - url = location.href, - str = ""; - for (var i = 0; i < self.listBox.find("a").length; i++) { - var m = self.listBox.find("a").eq(i); - if (m.attr("href") == "./" || url.indexOf(m.attr("href")) >= 0) { - self.num = m.parent().parent().parent().index(); - } - } - }, - addTitleEvent: function() { - var self = this; - var title = self.listBox.find("h4"); - title.bind("click", function(e) { - var parent = $(this).parent(), - list=parent.find("ul"); - if (parent.attr("open")) { - parent.removeAttr("open"); - if (parent.index() == self.num) { - $(this).addClass("current"); - } - list.animate({marginTop:-list.height()},400,"easeInOutCirc",function (){ - list.css({"display":"none"}) - }) - } else { - parent.attr("open", true); - if (parent.index() == self.num) { - $(this).removeClass("current"); - } - list.css({"display":"block","margin-top":-list.height()}); - list.animate({marginTop:0},400,"easeInOutCirc") - } - }); - } - }; - listFunc.init(); -}); - -antd.version = require('../package.json').version; -module.exports = antd; From d584b20dd89aca1568cac69417f8972960e17f46 Mon Sep 17 00:00:00 2001 From: Qiaosen Huang Date: Mon, 21 Mar 2016 14:16:22 +0800 Subject: [PATCH 0228/1555] add onPreview onRemove override on upload. --- components/upload/index.jsx | 13 ++++++++++++- components/upload/uploadList.jsx | 9 +++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 60fc2a168a..974942d795 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -172,11 +172,21 @@ const AntUpload = React.createClass({ } }, + handlePreview(file) { + if ('onPreview' in this.props) { + this.props.onPreview(file); + } + }, + handleManualRemove(file) { /*eslint-disable */ file.status = 'removed'; /*eslint-enable */ - this.handleRemove(file); + if ('onRemove' in this.props) { + this.props.onRemove(file); + } else { + this.handleRemove(file); + } }, onChange(info) { @@ -235,6 +245,7 @@ const AntUpload = React.createClass({ uploadList = ( ); } diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 8afe60e951..9ee1e14109 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -28,6 +28,10 @@ export default React.createClass({ handleClose(file) { this.props.onRemove(file); }, + handlePreview(file, e) { + e.preventDefault(); + return this.props.onPreview(file); + }, componentDidUpdate() { if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') { return; @@ -65,6 +69,7 @@ export default React.createClass({ } } else { icon = ({file.name} ); @@ -87,13 +92,13 @@ export default React.createClass({
    {icon} {file.url - ? {file.name} + ? {file.name} : {file.name}} { this.props.listType === 'picture-card' && file.status !== 'uploading' ? ( - + ) : From c63fb94772a0c6cb79cc911f07ecc31ef21d3cdb Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 21 Mar 2016 16:49:59 +0800 Subject: [PATCH 0229/1555] site: refactor build scripts --- scripts/build-demos-list.js | 19 +++++++++++++++++-- site/component/ComponentDoc/index.jsx | 12 +----------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/scripts/build-demos-list.js b/scripts/build-demos-list.js index 23f86d92e6..ee60e6004d 100644 --- a/scripts/build-demos-list.js +++ b/scripts/build-demos-list.js @@ -16,7 +16,12 @@ module.exports = function buildDemosList(dirs, outputPath) { return relativeIndex; }, demos); - let content = 'module.exports = {'; + let content = + 'const React = require("react");\n' + + 'const ReactDOM = require("react-dom");\n' + + 'const antd = require("../../");\n' + + 'const BrowserDemo = require("../../site/component/BrowserDemo");\n' + + 'module.exports = {'; Object.keys(groupedDemos).forEach((key) => { content += `\n '${key}': [`; groupedDemos[key].forEach((fileName) => { @@ -25,7 +30,17 @@ module.exports = function buildDemosList(dirs, outputPath) { }); content += '\n ],' }); - content += '\n};'; + content += '\n};\n'; + + // Extract preview as a component + content += + 'Object.keys(module.exports).map((key) => module.exports[key])\n' + + ' .forEach((demos) => {\n' + + ' demos.forEach((demo) => {\n' + + ' if (typeof demo.preview !== "function") return;\n' + + ' demo.preview = demo.preview(React, ReactDOM, antd, BrowserDemo);\n' + + ' });\n' + + ' });'; fs.writeFile(outputPath, content); }; diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index 74125e01a1..ec0edac29b 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -1,21 +1,11 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import { Link } from 'react-router'; import classNames from 'classnames'; -import antd, { Row, Col, Icon, Affix } from '../../../'; +import { Row, Col, Icon, Affix } from '../../../'; import Demo from '../Demo'; -import BrowserDemo from '../BrowserDemo'; import * as utils from '../utils'; import demosList from '../../../_site/data/demos-list'; -// Extract preview as a component -Object.keys(demosList).map((key) => demosList[key]) - .forEach((demos) => { - demos.forEach((demo) => { - demo.preview = demo.preview(React, ReactDOM, antd, BrowserDemo); - }); - }); - export default class ComponentDoc extends React.Component { constructor(props) { super(props); From bb29d4d53ad70769ef2b101528c36fca5f87f1a0 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 21 Mar 2016 16:54:20 +0800 Subject: [PATCH 0230/1555] site: enable HMR for demos --- site/entry/utils.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/entry/utils.js b/site/entry/utils.js index 02226bc9e9..0de38aaec5 100644 --- a/site/entry/utils.js +++ b/site/entry/utils.js @@ -6,6 +6,10 @@ import ComponentDoc from '../component/ComponentDoc'; import demosList from '../../_site/data/demos-list'; import { redirects } from '../website.config'; +if (module.hot) { + module.hot.accept('../../_site/data/demos-list', () => {}); +} + function fileNameToPath(fileName) { const snippets = fileName.replace(/(\/index)?\.md$/i, '').split('/'); return snippets[snippets.length - 1]; From 7bf88306ff14c6c200cdcfccf82a0dcaf3d1a793 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Mar 2016 18:14:05 +0800 Subject: [PATCH 0231/1555] fix form demo --- components/form/demo/form-controls.md | 48 +++++++++++++-------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md index d616e0ede6..0a643d9725 100644 --- a/components/form/demo/form-controls.md +++ b/components/form/demo/form-controls.md @@ -53,42 +53,42 @@ ReactDOM.render( label="Checkbox 多选框：" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} > - - - + + + - - - + + + - - A - B - C - D - + + A + B + C + D + , mountNode); From 5b1005e2430a0dc972df549acdcb8796033b1e9e Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Mar 2016 18:53:57 +0800 Subject: [PATCH 0232/1555] improve radio animation --- style/components/radio.less | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/style/components/radio.less b/style/components/radio.less index d90e3aa81f..7dc3a9f686 100644 --- a/style/components/radio.less +++ b/style/components/radio.less @@ -1,7 +1,7 @@ @radio-group-prefix-cls: ant-radio-group; @radio-prefix-cls: ant-radio; @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner"; -@radio-duration: .3s; +@radio-duration: .2s; .@{radio-group-prefix-cls} { display: inline-block; @@ -38,7 +38,8 @@ content: ' '; background-color: @primary-color; opacity: 0; - transition: transform @radio-duration @ease-in-out-circ, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ; + transform: scale(0); + transition: all @radio-duration @ease-in-out-circ; } position: relative; @@ -52,7 +53,7 @@ border-radius: 14px; border-color: @border-color-base; background-color: #fff; - transition: border-color @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ; + transition: all @radio-duration @ease-in-out-circ; } &-input { @@ -74,7 +75,7 @@ &:after { transform: scale(1); opacity: 1; - transition: transform @radio-duration @ease-out-back, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ; + transition: all @radio-duration @ease-in-out-circ; } } } From 11c0a6a203817ed6112145f318dbf975dbab8137 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Mon, 21 Mar 2016 20:16:38 +0700 Subject: [PATCH 0233/1555] Name classes without Ant* prefix. Where necessary, prefix the classes imported from react-component with 'Rc' rather than prefixing the Ant classes with 'Ant'. The prefixing of Ant classes wasn't consistent and isn't necessary in many cases. --- components/badge/ScrollNumber.jsx | 8 +++----- components/badge/index.jsx | 8 +++----- components/cascader/index.jsx | 12 +++++------- components/collapse/index.jsx | 12 +++++------- components/date-picker/index.jsx | 26 +++++++++++++------------- components/menu/index.jsx | 16 ++++++++-------- components/modal/Modal.jsx | 4 ++-- components/modal/index.jsx | 12 ++++++------ components/pagination/index.jsx | 12 +++++------- components/radio/index.jsx | 8 ++++---- components/radio/radio.jsx | 8 ++++---- components/radio/radioButton.jsx | 4 ++-- components/table/index.jsx | 8 ++++---- components/tabs/index.jsx | 14 ++++++-------- components/tag/index.jsx | 6 ++---- components/time-picker/index.jsx | 8 ++++---- components/upload/index.jsx | 22 +++++++++++----------- components/validation/index.jsx | 6 +++--- 18 files changed, 90 insertions(+), 104 deletions(-) diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 27a2fd19d5..d218a0432e 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -7,7 +7,7 @@ function getNumberArray(num) { num.toString().split('').reverse().map(i => Number(i)) : []; } -class AntScrollNumber extends React.Component { +export default class ScrollNumber extends React.Component { constructor(props) { super(props); this.state = { @@ -113,7 +113,7 @@ class AntScrollNumber extends React.Component { } } -AntScrollNumber.defaultProps = { +ScrollNumber.defaultProps = { prefixCls: 'ant-scroll-number', count: null, component: 'sup', @@ -121,7 +121,7 @@ AntScrollNumber.defaultProps = { height: 18, }; -AntScrollNumber.propTypes = { +ScrollNumber.propTypes = { count: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number @@ -130,5 +130,3 @@ AntScrollNumber.propTypes = { onAnimated: React.PropTypes.func, height: React.PropTypes.number, }; - -export default AntScrollNumber; diff --git a/components/badge/index.jsx b/components/badge/index.jsx index 7076faaad3..7a7d0484bd 100644 --- a/components/badge/index.jsx +++ b/components/badge/index.jsx @@ -3,7 +3,7 @@ import Animate from 'rc-animate'; import ScrollNumber from './ScrollNumber'; import classNames from 'classnames'; -class AntBadge extends React.Component { +export default class Badge extends React.Component { render() { let { count, prefixCls, overflowCount, className, style, children } = this.props; const dot = this.props.dot; @@ -42,14 +42,14 @@ class AntBadge extends React.Component { } } -AntBadge.defaultProps = { +Badge.defaultProps = { prefixCls: 'ant-badge', count: null, dot: false, overflowCount: 99, }; -AntBadge.propTypes = { +Badge.propTypes = { count: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number @@ -57,5 +57,3 @@ AntBadge.propTypes = { dot: React.PropTypes.bool, overflowCount: React.PropTypes.number, }; - -export default AntBadge; diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx index 6017d3a015..b942fff437 100644 --- a/components/cascader/index.jsx +++ b/components/cascader/index.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import Cascader from 'rc-cascader'; +import RcCascader from 'rc-cascader'; import Input from '../input'; import Icon from '../icon'; import arrayTreeFilter from 'array-tree-filter'; import classNames from 'classnames'; -class AntCascader extends React.Component { +export default class Cascader extends React.Component { constructor(props) { super(props); this.state = { @@ -75,7 +75,7 @@ class AntCascader extends React.Component { delete otherProps.onChange; return ( - } - + ); } } -AntCascader.defaultProps = { +Cascader.defaultProps = { prefixCls: 'ant-cascader', placeholder: '请选择', transitionName: 'slide-up', @@ -114,5 +114,3 @@ AntCascader.defaultProps = { allowClear: true, onPopupVisibleChange() {}, }; - -export default AntCascader; diff --git a/components/collapse/index.jsx b/components/collapse/index.jsx index 38db75e087..458c8d5c94 100644 --- a/components/collapse/index.jsx +++ b/components/collapse/index.jsx @@ -1,16 +1,14 @@ -import Collapse from 'rc-collapse'; +import RcCollapse from 'rc-collapse'; import React from 'react'; -class AntCollapse extends React.Component { +export default class Collapse extends React.Component { render() { - return ; + return ; } } -AntCollapse.defaultProps = { +Collapse.defaultProps = { prefixCls: 'ant-collapse', }; -AntCollapse.Panel = Collapse.Panel; - -export default AntCollapse; +Collapse.Panel = Collapse.Panel; diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx index b6dd9fb69a..0d92cf69ee 100644 --- a/components/date-picker/index.jsx +++ b/components/date-picker/index.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import Calendar from 'rc-calendar'; +import RcCalendar from 'rc-calendar'; import MonthCalendar from 'rc-calendar/lib/MonthCalendar'; -import DatePicker from 'rc-calendar/lib/Picker'; +import RcDatePicker from 'rc-calendar/lib/Picker'; import GregorianCalendar from 'gregorian-calendar'; import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; -import AntRangePicker from './RangePicker'; +import RangePicker from './RangePicker'; import PickerMixin from './PickerMixin'; import TimePicker from 'rc-time-picker'; import classNames from 'classnames'; @@ -116,7 +116,7 @@ function createPicker(TheCalendar, defaultFormat) { } return ( - + ); } }); } -const AntDatePicker = createPicker(Calendar); -const AntMonthPicker = createPicker(MonthCalendar, 'yyyy-MM'); +const DatePicker = createPicker(RcCalendar); +const MonthPicker = createPicker(MonthCalendar, 'yyyy-MM'); -const AntCalendar = React.createClass({ +const Calendar = React.createClass({ getDefaultProps() { return { locale: CalendarLocale, @@ -162,12 +162,12 @@ const AntCalendar = React.createClass({ }; }, render() { - return ; + return ; } }); -AntDatePicker.Calendar = AntCalendar; -AntDatePicker.RangePicker = AntRangePicker; -AntDatePicker.MonthPicker = AntMonthPicker; +DatePicker.Calendar = Calendar; +DatePicker.RangePicker = RangePicker; +DatePicker.MonthPicker = MonthPicker; -export default AntDatePicker; +export default DatePicker; diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 341810ca51..8b9e63419c 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import Menu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu'; +import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu'; import animation from '../common/openAnimation'; function noop() { } -const AntMenu = React.createClass({ +const Menu = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-menu', @@ -76,13 +76,13 @@ const AntMenu = React.createClass({ className, }; } - return ; + return ; } }); -AntMenu.Divider = Divider; -AntMenu.Item = Item; -AntMenu.SubMenu = SubMenu; -AntMenu.ItemGroup = ItemGroup; +Menu.Divider = Divider; +Menu.Item = Item; +Menu.SubMenu = SubMenu; +Menu.ItemGroup = ItemGroup; -export default AntMenu; +export default Menu; diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index d869650dce..2f850351bf 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -8,7 +8,7 @@ function noop() {} let mousePosition; let mousePositionEventBinded; -const AntModal = React.createClass({ +const Modal = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-modal', @@ -99,4 +99,4 @@ const AntModal = React.createClass({ } }); -export default AntModal; +export default Modal; diff --git a/components/modal/index.jsx b/components/modal/index.jsx index c8ad51a0ac..ebfabe515f 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -1,8 +1,8 @@ -import AntModal from './Modal'; +import Modal from './Modal'; import confirm from './confirm'; import objectAssign from 'object-assign'; -AntModal.info = function (props) { +Modal.info = function (props) { const config = objectAssign({}, props, { iconClassName: 'info-circle', okCancel: false, @@ -10,7 +10,7 @@ AntModal.info = function (props) { return confirm(config); }; -AntModal.success = function (props) { +Modal.success = function (props) { const config = objectAssign({}, props, { iconClassName: 'check-circle', okCancel: false, @@ -18,7 +18,7 @@ AntModal.success = function (props) { return confirm(config); }; -AntModal.error = function (props) { +Modal.error = function (props) { const config = objectAssign({}, props, { iconClassName: 'exclamation-circle', okCancel: false, @@ -26,11 +26,11 @@ AntModal.error = function (props) { return confirm(config); }; -AntModal.confirm = function (props) { +Modal.confirm = function (props) { const config = objectAssign({}, props, { okCancel: true, }); return confirm(config); }; -export default AntModal; +export default Modal; diff --git a/components/pagination/index.jsx b/components/pagination/index.jsx index 725d20a0a5..5e0e8e3544 100644 --- a/components/pagination/index.jsx +++ b/components/pagination/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Pagination from 'rc-pagination'; +import RcPagination from 'rc-pagination'; import Select from '../select'; import zhCN from './locale/zh_CN'; @@ -11,7 +11,7 @@ class MiniSelect extends React.Component { MiniSelect.Option = Select.Option; -class AntPagination extends React.Component { +export default class Pagination extends React.Component { render() { let className = this.props.className; let selectComponentClass = Select; @@ -29,7 +29,7 @@ class AntPagination extends React.Component { } return ( - - + {children} ); } }); -export default AntRadio; +export default Radio; diff --git a/components/radio/radioButton.jsx b/components/radio/radioButton.jsx index ea3f0fe906..d99433b57c 100644 --- a/components/radio/radioButton.jsx +++ b/components/radio/radioButton.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import AntRadio from './radio'; +import Radio from './radio'; const RadioButton = React.createClass({ getDefaultProps() { @@ -9,7 +9,7 @@ const RadioButton = React.createClass({ }, render() { return ( - + ); } }); diff --git a/components/table/index.jsx b/components/table/index.jsx index fce523df6d..acf6645175 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Table from 'rc-table'; +import RcTable from 'rc-table'; import Checkbox from '../checkbox'; import Radio from '../radio'; import FilterDropdown from './filterDropdown'; @@ -27,7 +27,7 @@ const defaultPagination = { onShowSizeChange: noop, }; -let AntTable = React.createClass({ +let Table = React.createClass({ getInitialState() { return { // 减少状态 @@ -604,7 +604,7 @@ let AntTable = React.createClass({ let table = (
    - @@ -69,12 +69,12 @@ class AntTabs extends React.Component { onChange={this.handleChange} animation={animation}> {children} - + ); } } -AntTabs.defaultProps = { +Tabs.defaultProps = { prefixCls: 'ant-tabs', animation: 'slide-horizontal', type: 'line', // or 'card' 'editable-card' @@ -82,6 +82,4 @@ AntTabs.defaultProps = { onEdit() {}, }; -AntTabs.TabPane = Tabs.TabPane; - -export default AntTabs; +Tabs.TabPane = RcTabs.TabPane; diff --git a/components/tag/index.jsx b/components/tag/index.jsx index 2f195c849e..cd9b9fd034 100644 --- a/components/tag/index.jsx +++ b/components/tag/index.jsx @@ -4,7 +4,7 @@ import Animate from 'rc-animate'; import Icon from '../icon'; import classNames from 'classnames'; -class AntTag extends React.Component { +export default class Tag extends React.Component { constructor(props) { super(props); @@ -61,11 +61,9 @@ class AntTag extends React.Component { } } -AntTag.defaultProps = { +Tag.defaultProps = { prefixCls: 'ant-tag', closable: false, onClose() {}, afterClose() {}, }; - -export default AntTag; diff --git a/components/time-picker/index.jsx b/components/time-picker/index.jsx index 5240390c4d..2b97c64256 100644 --- a/components/time-picker/index.jsx +++ b/components/time-picker/index.jsx @@ -1,12 +1,12 @@ import React from 'react'; import DateTimeFormat from 'gregorian-calendar-format'; -import TimePicker from 'rc-time-picker/lib/TimePicker'; +import RcTimePicker from 'rc-time-picker/lib/TimePicker'; import objectAssign from 'object-assign'; import defaultLocale from './locale/zh_CN'; import classNames from 'classnames'; import GregorianCalendar from 'gregorian-calendar'; -const AntTimePicker = React.createClass({ +const TimePicker = React.createClass({ getDefaultProps() { return { format: 'HH:mm:ss', @@ -105,7 +105,7 @@ const AntTimePicker = React.createClass({ } return ( - - +
    {this.props.children}
    -     + {uploadList} @@ -269,9 +269,9 @@ const AntUpload = React.createClass({ {uploadList}
    - + {this.props.children} - +
    ); @@ -279,9 +279,9 @@ const AntUpload = React.createClass({ return (
    - + {this.props.children} - +
    {uploadList}     @@ -290,10 +290,10 @@ const AntUpload = React.createClass({ } }); -AntUpload.Dragger = React.createClass({ +Upload.Dragger = React.createClass({ render() { - return ; + return ; } }); -export default AntUpload; +export default Upload; diff --git a/components/validation/index.jsx b/components/validation/index.jsx index 99c88ab43f..aa5e79dfb1 100644 --- a/components/validation/index.jsx +++ b/components/validation/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import warning from 'warning'; -export default class AntValidation extends React.Component { +export default class Validation extends React.Component { render() { warning(false, '`Validation` is removed, please use `Form` which has supported validation after antd@0.12.0,' + ' or you can just import Validation from \'rc-form-validation\' for compatibility'); @@ -9,7 +9,7 @@ export default class AntValidation extends React.Component { } } -AntValidation.Validator = () => {}; -AntValidation.FieldMixin = { +Validation.Validator = () => {}; +Validation.FieldMixin = { setField() {}, }; From 8fa7f9aec429b2a960c27a5e4ddcd84107e4bef9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 00:22:35 +0800 Subject: [PATCH 0234/1555] update docs --- docs/react/getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 992bb51367..a69377929b 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -141,6 +141,8 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 如果想自己维护工作流，我们推荐使用 [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)。 +目前社区也有很多基于 antd 定制的[脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。 + ### 改变主色系 - [配置代码示例](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) From 54a878873c9f6cf2640ce79d58e4869e2ce6f666 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 00:26:33 +0800 Subject: [PATCH 0235/1555] fix whitespace --- docs/react/getting-started.md | 2 +- docs/react/introduce.md | 2 +- docs/spec/introduce.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index a69377929b..c17731410f 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -141,7 +141,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 如果想自己维护工作流，我们推荐使用 [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)。 -目前社区也有很多基于 antd 定制的[脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。 +目前社区也有很多基于 antd 定制的 [脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。 ### 改变主色系 diff --git a/docs/react/introduce.md b/docs/react/introduce.md index 4360c5f993..14561eac24 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -86,4 +86,4 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less' ## 如何贡献 -在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://dwz.cn/2AF9ao) 或 [提问](https://github.com/ant-design/ant-design/issues)。 +在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://dwz.cn/2AF9ao) 或 [提问](https://github.com/ant-design/ant-design/issues)。 diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index d324f45cd4..e1546d7a35 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -32,4 +32,4 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ## 如何贡献 -我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们[提问](https://github.com/ant-design/ant-design/issues)。 +我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。 From 1e2576aeba8aa0f2f6978afa0c5bef3313d15413 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 00:28:51 +0800 Subject: [PATCH 0236/1555] Add antd-ember --- docs/spec/introduce.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index e1546d7a35..455db6cd35 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -29,6 +29,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 - [Ant Design of React](/docs/react/introduce)（官方实现） - [vue-antd](https://github.com/okoala/vue-antd) +- [antd-ember](https://github.com/idcos/antd-ember) ## 如何贡献 From 5e0b5f670f3299394638b5a7350eda6a7ae57007 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 09:59:32 +0800 Subject: [PATCH 0237/1555] chore: update PULL_REQUEST_TEMPLATE.md --- .github/PULL_REQUEST_TEMPLATE.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index fedbdf9311..01e6ca426d 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,6 +2,7 @@ First of all, thanks for your contribution! :-) Please makes sure these boxes are checked before submitting your PR, thank you! +* [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd). * [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style. * [ ] Rebase before creating a PR to keep commit history clear. * [ ] Add some descriptions and refer relative issues for you PR. From 3611c798c108659883ff00979307e0eaf7cc6f37 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 10:31:22 +0800 Subject: [PATCH 0238/1555] docs: update documentation --- components/form/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/form/index.md b/components/form/index.md index 7b6bebe9fb..716fd16037 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -99,6 +99,8 @@ CustomizedForm = Form.create({})(CustomizedForm); ### Form.Item +> 一个 From.Item 建议只放一个 child，有多个 child 时，`help` `required` `validateStatus` 无法自动生成。 + | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| | label | label 标签的文本 | string | | | From 17c897a61adf6c8f1203567016686db12dab8c9e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 10:57:58 +0800 Subject: [PATCH 0239/1555] chore: replace webpack with atool-build --- scripts/publish.sh | 11 +++---- webpack.antd.config.js | 41 +++++++++++++------------- webpack.config.js | 67 ------------------------------------------ 3 files changed, 27 insertions(+), 92 deletions(-) delete mode 100644 webpack.config.js diff --git a/scripts/publish.sh b/scripts/publish.sh index f7544f8bda..d6084cf89c 100644 --- a/scripts/publish.sh +++ b/scripts/publish.sh @@ -1,7 +1,8 @@ -npm run babel -rm -rf dist -webpack --config webpack.antd.config.js +rm -rf lib dist + +npm run babel # generate /lib +atool-build --config webpack.antd.config.js # generate /dist node scripts/prenpm.js npm publish $1 $2 -rm -rf lib -rm -rf dist + +rm -rf lib dist diff --git a/webpack.antd.config.js b/webpack.antd.config.js index a2389f9365..cac3a29c5a 100644 --- a/webpack.antd.config.js +++ b/webpack.antd.config.js @@ -1,21 +1,22 @@ -var config = require('./webpack.config'); -config.entry = { - 'antd': ['./style/index.less', './index.js'] +module.exports = function(webpackConfig) { + webpackConfig.entry = { + 'antd': ['./style/index.less', './index.js'] + }; + webpackConfig.externals = { + 'react': { + root: 'React', + commonjs2: 'react', + commonjs: 'react', + amd: 'react' + }, + 'react-dom': { + root: 'ReactDOM', + commonjs2: 'react-dom', + commonjs: 'react-dom', + amd: 'react-dom' + } + }; + webpackConfig.output.library = 'antd'; + webpackConfig.output.libraryTarget = 'umd'; + return webpackConfig; }; -config.externals = { - 'react': { - root: 'React', - commonjs2: 'react', - commonjs: 'react', - amd: 'react' - }, - 'react-dom': { - root: 'ReactDOM', - commonjs2: 'react-dom', - commonjs: 'react-dom', - amd: 'react-dom' - } -}; -config.output.library = 'antd'; -config.output.libraryTarget = 'umd'; -module.exports = config; diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index ef21c5af4e..0000000000 --- a/webpack.config.js +++ /dev/null @@ -1,67 +0,0 @@ -var webpack = require('webpack'); -var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var path = require('path'); -var pkg = require('./package'); -var autoprefixer = require('autoprefixer'); - -var entry = {}; -entry['demo'] = ['./scripts/demo.js', 'webpack-hot-middleware/client']; - -module.exports = { - entry: entry, - - cache: true, - - resolve: { - extensions: ['', '.js', '.jsx'], - unsafeCache: true - }, - - noParse: /_site|node_modules/, - - output: { - path: path.join(process.cwd(), 'dist'), - publicPath: '/dist/', - filename: '[name].js' - }, - - module: { - loaders: [{ - test: /\.jsx?$/, - exclude: /node_modules/, - loader: 'babel', - query: { - cacheDirectory: true, - presets: ['es2015', 'react', 'stage-0', 'react-hmre'], - plugins: ['add-module-exports'] - } - }, { - test: /\.json$/, - exclude: /node_modules/, - loader: 'json-loader' - }, { - test: /\.less$/, - exclude: /node_modules/, - loader: ExtractTextPlugin.extract( - 'css?sourceMap&-minimize!' + 'postcss-loader!' + 'less?sourceMap' - ) - }, { - test: /\.css$/, - exclude: /node_modules/, - loader: ExtractTextPlugin.extract( - 'css?sourceMap&-minimize!' + 'postcss-loader' - ) - }] - }, - - postcss: [autoprefixer], - - plugins: [ - new ExtractTextPlugin('[name].css'), - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() - ], - - devtool: 'source-map' -}; From e62c853a6a0c820c940b502f2c6ce4a35d78ae85 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 11:32:49 +0800 Subject: [PATCH 0240/1555] chore: move _site/data to _data --- .gitignore | 3 ++- scripts/build-demos-list.js | 4 ++-- scripts/build-website.js | 14 +++++++------- site/component/ComponentDoc/index.jsx | 2 +- site/component/Header/index.jsx | 2 +- site/entry/index.jsx | 10 +++++----- site/entry/utils.js | 4 ++-- 7 files changed, 20 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 16d51bb2c5..16c1d4fd6e 100644 --- a/.gitignore +++ b/.gitignore @@ -24,4 +24,5 @@ _site dist lib elasticsearch-* -config/base.yaml \ No newline at end of file +config/base.yaml +_data/ diff --git a/scripts/build-demos-list.js b/scripts/build-demos-list.js index ee60e6004d..5571abcd30 100644 --- a/scripts/build-demos-list.js +++ b/scripts/build-demos-list.js @@ -19,8 +19,8 @@ module.exports = function buildDemosList(dirs, outputPath) { let content = 'const React = require("react");\n' + 'const ReactDOM = require("react-dom");\n' + - 'const antd = require("../../");\n' + - 'const BrowserDemo = require("../../site/component/BrowserDemo");\n' + + 'const antd = require("../");\n' + + 'const BrowserDemo = require("../site/component/BrowserDemo");\n' + 'module.exports = {'; Object.keys(groupedDemos).forEach((key) => { content += `\n '${key}': [`; diff --git a/scripts/build-website.js b/scripts/build-website.js index fc44f01dd0..fbfedb794a 100755 --- a/scripts/build-website.js +++ b/scripts/build-website.js @@ -3,18 +3,18 @@ 'use strict'; // Ensure that data directory exist. -require('mkdirp').sync('./_site/data'); +require('mkdirp').sync('./_data'); const buildDemosList = require('./build-demos-list'); -buildDemosList(['./components', './docs'], './_site/data/demos-list.js'); +buildDemosList(['./components', './docs'], './_data/demos-list.js'); const buildCommon = require('./build-common'); buildCommon([ './components', './docs/react', './CHANGELOG.md', -], './_site/data/react-components.js'); -buildCommon('./docs/practice', './_site/data/practice.js'); -buildCommon('./docs/pattern', './_site/data/pattern.js'); -buildCommon('./docs/spec', './_site/data/spec.js'); -buildCommon('./docs/resource', './_site/data/resource.js'); +], './_data/react-components.js'); +buildCommon('./docs/practice', './_data/practice.js'); +buildCommon('./docs/pattern', './_data/pattern.js'); +buildCommon('./docs/spec', './_data/spec.js'); +buildCommon('./docs/resource', './_data/resource.js'); diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index ec0edac29b..1261b6620e 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { Row, Col, Icon, Affix } from '../../../'; import Demo from '../Demo'; import * as utils from '../utils'; -import demosList from '../../../_site/data/demos-list'; +import demosList from '../../../_data/demos-list'; export default class ComponentDoc extends React.Component { constructor(props) { diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index ccac93c177..15559dce35 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -5,7 +5,7 @@ const Option = Select.Option; import './index.less'; -import componentsList from '../../../_site/data/react-components'; +import componentsList from '../../../_data/react-components'; export default class Header extends React.Component { handleSearch(value) { this.props.history.push({ pathname: value }); diff --git a/site/entry/index.jsx b/site/entry/index.jsx index e3016bfa09..e2e8f5875b 100644 --- a/site/entry/index.jsx +++ b/site/entry/index.jsx @@ -6,11 +6,11 @@ import * as utils from './utils'; import '../common/lib'; import App from '../component/App'; import Home from '../component/Home'; -import practice from '../../_site/data/practice'; -import pattern from '../../_site/data/pattern'; -import reactComponents from '../../_site/data/react-components'; -import spec from '../../_site/data/spec'; -import resource from '../../_site/data/resource'; +import practice from '../../_data/practice'; +import pattern from '../../_data/pattern'; +import reactComponents from '../../_data/react-components'; +import spec from '../../_data/spec'; +import resource from '../../_data/resource'; import config from '../website.config'; // TODO: pack dependencies with atool build diff --git a/site/entry/utils.js b/site/entry/utils.js index 0de38aaec5..3b9a89d43f 100644 --- a/site/entry/utils.js +++ b/site/entry/utils.js @@ -3,11 +3,11 @@ import { IndexRedirect } from 'react-router'; import MainContent from '../component/MainContent'; import Article from '../component/Article'; import ComponentDoc from '../component/ComponentDoc'; -import demosList from '../../_site/data/demos-list'; +import demosList from '../../_data/demos-list'; import { redirects } from '../website.config'; if (module.hot) { - module.hot.accept('../../_site/data/demos-list', () => {}); + module.hot.accept('../../_data/demos-list', () => {}); } function fileNameToPath(fileName) { From 17b8dfe6be6d8f615cea72861a7f308570d9e0d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=97=B2=E8=80=98=E2=84=A2?= Date: Tue, 22 Mar 2016 11:39:28 +0800 Subject: [PATCH 0241/1555] fix(demo): fixed form control demo. --- components/form/demo/form-controls.md | 4 ++-- components/form/index.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md index 74544df378..44f61048eb 100644 --- a/components/form/demo/form-controls.md +++ b/components/form/demo/form-controls.md @@ -45,7 +45,7 @@ ReactDOM.render( - < Option value="yiminghe">yiminghe + @@ -71,7 +71,7 @@ ReactDOM.render( label="Radio 单选框：" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} > - + A B C diff --git a/components/form/index.md b/components/form/index.md index 716fd16037..6c90d50e3a 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -14,7 +14,7 @@ 我们为 `form` 提供了以下两种排列方式： -- 水平排列：可以实现 `label` 标签和表单控件的水平排列; +- 水平排列：可以实现 `label` 标签和表单控件的水平排列； - 行内排列：使其表现为 `inline-block` 级别的控件。 ## 表单域 @@ -85,7 +85,7 @@ CustomizedForm = Form.create({})(CustomizedForm); #### this.props.form.getFieldProps(id, options) -`getFieldProps` 返回的属性包括 `id`、`value`(或你设置的其它 `valuePropName`)、`ref`、`onChange`(或者你设置的其它 `trigger` `validateTrigger`)，所以不应再设置同样的属性，以免冲突。如果对其返回值的细节有兴趣，可以 `console.log` 出来查看。 +`getFieldProps` 返回的属性包括 `id`、`value`（或你设置的其它 `valuePropName`）、`ref`、`onChange`（或者你设置的其它 `trigger` `validateTrigger`），所以不应再设置同样的属性，以免冲突。如果对其返回值的细节有兴趣，可以 `console.log` 出来查看。 | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| @@ -99,7 +99,7 @@ CustomizedForm = Form.create({})(CustomizedForm); ### Form.Item -> 一个 From.Item 建议只放一个 child，有多个 child 时，`help` `required` `validateStatus` 无法自动生成。 +> 一个 Form.Item 建议只放一个 child，有多个 child 时，`help` `required` `validateStatus` 无法自动生成。 | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| From 2dab2c0b13cb0fea6200f039819b52d92ff28c92 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 11:54:55 +0800 Subject: [PATCH 0242/1555] chore: update scripts --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b440d92310..00ef8d3ea1 100644 --- a/package.json +++ b/package.json @@ -139,10 +139,11 @@ }, "scripts": { "babel": "babel components index.js --out-dir lib", - "start": "npm run clean && ./scripts/build-website.js && npm run dora", + "clean-build": "rm -rf _site _data && ./scripts/build-website.js", "dora": "dora -p 8001 --plugins \"webpack?disableNpmInstall&config=webpack.website.config.js,hmr?config=webpack.website.config.js\"", - "clean": "rm -rf _site dist", - "site": "npm run clean && webpack --config webpack.deploy.config.js && webpack --config webpack.antd.config.js && NODE_ENV=PRODUCTION nico build", + "start": "npm run clean-build && npm run dora", + "copy-html": "cp ./index.html ./_site/index.html && mkdir ./_site/_site && mv ./_site/demo-* ./_site/_site", + "site": "npm run clean-build && atool-build -o ./_site --config webpack.website.config.js && npm run copy-html", "deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy", "just-deploy": "npm run site && node scripts/deploy.js", "lint": "npm run srclint && npm run mdlint && npm run lesshint", @@ -150,10 +151,9 @@ "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0, eol-last: 0, prefer-rest-params: 0'", "lesshint": "lesshint style/ -e 'style/+(core|mixins)/+(base|iconfont|normalize|layouts|compatibility|grid).less'", "eslint-fix": "eslint --fix components test site index.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md", - "test": "npm run lint && webpack && npm run jest", + "test": "npm run lint && atool-build && npm run jest", "jest": "jest", "pub": "sh ./scripts/publish.sh", - "webpack": "webpack", "beta": "sh ./scripts/publish.sh --tag beta", "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt" }, From 9ce187cc0f91e764f89a19f49f77fe921396cfe9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 12:10:32 +0800 Subject: [PATCH 0243/1555] deps: update antd-md-loader --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 00ef8d3ea1..2a4b99d4ab 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "warning": "~2.1.0" }, "devDependencies": { - "antd-md-loader": "0.1.0-beta.11", + "antd-md-loader": "0.1.0-beta.12", "atool-build": "^0.5.0", "autoprefixer": "^6.3.3", "babel-cli": "^6.2.0", From aaeb925de1f80b2439e28c538c5efb7b0e9d8089 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 16:21:23 +0800 Subject: [PATCH 0244/1555] fix(cascader): can not scroll menu in Chrome 49 --- style/components/cascader.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/components/cascader.less b/style/components/cascader.less index 584e1164b0..f02ed13c27 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -65,7 +65,6 @@ } &-menus { font-size: 12px; - overflow: hidden; background: #fff; position: absolute; border: 1px solid @border-color-base; From e4c355f6a4a6d8d901091c649fee19d1026c688a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 16:42:18 +0800 Subject: [PATCH 0245/1555] fix cascader height --- style/components/cascader.less | 1 - 1 file changed, 1 deletion(-) diff --git a/style/components/cascader.less b/style/components/cascader.less index f02ed13c27..7981521e76 100644 --- a/style/components/cascader.less +++ b/style/components/cascader.less @@ -71,7 +71,6 @@ border-radius: @border-radius-base; box-shadow: @box-shadow-base; white-space: nowrap; - height: 180px; &-empty, &-hidden { display: none; From 36d0804e14415bbcd6589e77bd703b05e6ae98fc Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 17:46:14 +0800 Subject: [PATCH 0246/1555] fix: typo --- components/collapse/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/collapse/index.jsx b/components/collapse/index.jsx index 458c8d5c94..e66e3d40e1 100644 --- a/components/collapse/index.jsx +++ b/components/collapse/index.jsx @@ -11,4 +11,4 @@ Collapse.defaultProps = { prefixCls: 'ant-collapse', }; -Collapse.Panel = Collapse.Panel; +Collapse.Panel = RcCollapse.Panel; From 235de436053d742f278edd6dd1ab536cec190d80 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 22 Mar 2016 17:50:21 +0800 Subject: [PATCH 0247/1555] deps: upgrade rc-slider --- components/slider/demo/mark.md | 7 ++++++- components/slider/index.md | 2 +- package.json | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md index 0f10d8e1d5..a5c289b07e 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -13,7 +13,12 @@ const marks = { 0: '0°C', 26: '26°C', 37: '37°C', - 100: '100°C' + 100: { + style: { + color: 'red', + }, + label: 100°C, + }, }; ReactDOM.render( diff --git a/components/slider/index.md b/components/slider/index.md index 7a2d7b1657..2583c08287 100644 --- a/components/slider/index.md +++ b/components/slider/index.md @@ -20,7 +20,7 @@ | min | Number | 0 | 最小值 | max | Number | 100 | 最大值 | step | Number or null | 1 | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 -| marks | Object {Number: String} | {} | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内 +| marks | Object{Number: String|React.Component} or Object{Number: { style, label}} | {} | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | dots | Boolean | false | 是否只能拖拽到刻度上 | value | Number or [Number, Number]| | 设置当前取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` | defaultValue | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时，使用 `Number`，否则用 `[Number, Number]` diff --git a/package.json b/package.json index 2a4b99d4ab..6501798989 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "rc-queue-anim": "~0.11.2", "rc-radio": "~2.0.0", "rc-select": "~5.10.0", - "rc-slider": "~3.3.0", + "rc-slider": "^3.5.1", "rc-steps": "~1.4.1", "rc-switch": "~1.3.2", "rc-table": "~3.11.1", From 84f904d03c97dc0c7e48bd150855ee9320d490dd Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 19:19:37 +0800 Subject: [PATCH 0248/1555] fix(site): some style --- site/common/styles/common.less | 12 +++- site/component/Header/index.less | 103 ++++++++++++++++--------------- 2 files changed, 63 insertions(+), 52 deletions(-) diff --git a/site/common/styles/common.less b/site/common/styles/common.less index ed6f64a88a..fa5731698d 100644 --- a/site/common/styles/common.less +++ b/site/common/styles/common.less @@ -10,7 +10,7 @@ body { } body { - font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif; + font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",SimSun,sans-serif; line-height: 1.5; color: #666; font-size: 14px; @@ -19,6 +19,10 @@ body { overflow-x: hidden; } +a { + transition: color .3s ease; +} + .main-wrapper { background: #fff; width: 92%; @@ -42,7 +46,9 @@ body { .sidebar { padding-bottom: 50px; - &.ant-menu-inline > .ant-menu-item { + &.ant-menu-inline .ant-menu-submenu-title h4, + &.ant-menu-inline > .ant-menu-item, + &.ant-menu-inline .ant-menu-item a { font-size: 14px; } @@ -67,4 +73,4 @@ body { .outside-link.internal { display: none; -} \ No newline at end of file +} diff --git a/site/component/Header/index.less b/site/component/Header/index.less index cc3c7b5dd6..51591acba6 100644 --- a/site/component/Header/index.less +++ b/site/component/Header/index.less @@ -1,78 +1,83 @@ @header-height: 80px; #header { - animation: xRightMatrix .5s ease-out; - transition: opacity 0.5S; - - background: #fff; - border-bottom: 1px solid #eee; - height: @header-height; - margin-bottom: 24px; - padding: 0 4%; - width: 100%; + transition: opacity 0.5s; + background: #fff; + border-bottom: 1px solid #eee; + height: @header-height; + margin-bottom: 24px; + padding: 0 4%; + width: 100%; } #logo { - animation: xLeftMatrix .5s ease-out; - transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; + float: left; + height: 60px; + margin: 20px 45px 20px 0; +} - float: left; - height: 60px; - margin: 20px 45px 20px 0; -} #logo img { - height: 40px; - width: 40px; - margin-right: 8px; + height: 40px; + width: 40px; + margin-right: 8px; } + #logo span { - color: #6EB4E0; - float: right; - font-size: 14px; - font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif; - height: 40px; - line-height: 40px; - text-transform: uppercase; + color: #6EB4E0; + float: right; + font-size: 14px; + font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + height: 40px; + line-height: 40px; + text-transform: uppercase; } #search-box { - border-left: 1px solid #EBEDEE; - float: left; - height: 22px; - padding-left: 30px; - margin: 32px auto 0; + border-left: 1px solid #EBEDEE; + float: left; + height: 22px; + padding-left: 30px; + margin: 32px auto 0; } + #search-box .ant-select { - font-size: 14px; - margin-top: -2px; - width: 230px; + font-size: 14px; + margin-top: -2px; + width: 230px; } #search-box .ant-select-selection { - border: 0; - box-shadow: none; + border: 0; + box-shadow: none; } #nav { - border: 0; - float: right; - font-size: 14px; + border: 0; + float: right; + font-size: 14px; } + #nav li { - height: @header-height; - line-height: @header-height; - width: 86px; - text-align: center; + height: @header-height; + line-height: @header-height; + width: 72px; + text-align: center; + border-bottom-width: 3px; + + &.ant-menu-item-selected a { + color: #2db7f5; + font-weight: bold; + } } .ant-component-decs { - font-size: 12px; - position: absolute; - top: 9px; - color: #aaa; - right: 16px; + font-size: 12px; + position: absolute; + top: 9px; + color: #aaa; + right: 16px; } .ant-select-combobox .ant-select-search__field:focus { - box-shadow: none; -} \ No newline at end of file + box-shadow: none; +} From 02807a69ad51a8d7658409ad857459424bbc05f1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 19:24:47 +0800 Subject: [PATCH 0249/1555] update some basic style --- site/static/style.less | 1 + style/components/menu.less | 1 - style/core/base.less | 9 +++++++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index 4479f40205..4004406ee2 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -59,6 +59,7 @@ a:hover { background: #2db7f5; color: #fff; } + ::-moz-selection { background: #2db7f5; color: #fff; diff --git a/style/components/menu.less b/style/components/menu.less index 95c05cad64..36bd114d5b 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -29,7 +29,6 @@ } &-item, - &-submenu, &-submenu-title { cursor: pointer; transition: all 0.3s ease; diff --git a/style/core/base.less b/style/core/base.less index 8cb73a4fbd..977ceb302a 100644 --- a/style/core/base.less +++ b/style/core/base.less @@ -46,6 +46,14 @@ input::-ms-clear, input::-ms-reveal { display: none; } +::selection { + background: @primary-color; +} + +::-moz-selection { + background: @primary-color; +} + // Links // -- TODO -- a { @@ -54,6 +62,7 @@ a { text-decoration: none; outline: none; cursor: pointer; + transition: color .3s ease; &:hover { color: @link-hover-color; From 4614f4068f8e0f3bb418e36fa4e8ca803b64ff60 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Mar 2016 20:43:57 +0800 Subject: [PATCH 0250/1555] update some basic style --- style/components/menu.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style/components/menu.less b/style/components/menu.less index 36bd114d5b..08663df8b4 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -29,11 +29,16 @@ } &-item, + &-submenu, &-submenu-title { cursor: pointer; transition: all 0.3s ease; } + &-submenu &-sub { + cursor: initial; + } + &-item > a { display: block; color: @text-color; From 60dadfb899d37aca2973ee504fbb86e06a91ee09 Mon Sep 17 00:00:00 2001 From: "fanzheng.fz" Date: Wed, 23 Mar 2016 00:26:22 +0800 Subject: [PATCH 0251/1555] always concat paths wether there's a breadcrumbName or not --- components/breadcrumb/index.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.jsx index 62dbb94d3a..0ffb669037 100644 --- a/components/breadcrumb/index.jsx +++ b/components/breadcrumb/index.jsx @@ -38,14 +38,6 @@ export default class Breadcrumb extends React.Component { if (routes && routes.length > 0) { const paths = []; crumbs = routes.map((route, i) => { - if (!route.breadcrumbName) { - return null; - } - const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => { - return params[key] || replacement; - }); - - let link; let path = route.path.replace(/^\//, ''); Object.keys(params).forEach(key => { path = path.replace(`:${key}`, params[key]); @@ -54,6 +46,14 @@ export default class Breadcrumb extends React.Component { paths.push(path); } + if (!route.breadcrumbName) { + return null; + } + const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => { + return params[key] || replacement; + }); + + let link; if (i === routes.length - 1) { link = {name}; } else { From f723d6ca51476b2d7b7711f8abfc6978118d7ef9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 23 Mar 2016 10:43:43 +0800 Subject: [PATCH 0252/1555] refactor: remove some hard code --- docs/spec/layout/demo/aside.md | 1 + docs/spec/layout/demo/ceiling.md | 1 + docs/spec/layout/demo/top-aside.md | 1 + docs/spec/layout/demo/top.md | 1 + package.json | 2 +- site/component/utils.js | 3 +-- webpack.website.config.js | 6 ++++++ 7 files changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md index 302d52e856..f9faf91b20 100644 --- a/docs/spec/layout/demo/aside.md +++ b/docs/spec/layout/demo/aside.md @@ -10,6 +10,7 @@ ````jsx import { Menu, Breadcrumb, Icon } from 'antd'; +import BrowserDemo from 'BrowserDemo'; const SubMenu = Menu.SubMenu; ReactDOM.render( diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md index 9675c8fd7f..d9700b14e4 100644 --- a/docs/spec/layout/demo/ceiling.md +++ b/docs/spec/layout/demo/ceiling.md @@ -10,6 +10,7 @@ ````jsx import { Menu, Breadcrumb } from 'antd'; +import BrowserDemo from 'BrowserDemo'; ReactDOM.render( diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md index b779b093c8..3c310b966b 100644 --- a/docs/spec/layout/demo/top-aside.md +++ b/docs/spec/layout/demo/top-aside.md @@ -8,6 +8,7 @@ ````jsx import { Menu, Breadcrumb, Icon } from 'antd'; +import BrowserDemo from 'BrowserDemo'; const SubMenu = Menu.SubMenu; ReactDOM.render( diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md index d31adb56b6..51e6f5ffe3 100644 --- a/docs/spec/layout/demo/top.md +++ b/docs/spec/layout/demo/top.md @@ -12,6 +12,7 @@ ````jsx import { Menu, Breadcrumb } from 'antd'; +import BrowserDemo from 'BrowserDemo'; ReactDOM.render( diff --git a/package.json b/package.json index 95d72ebf84..15586ae860 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "warning": "~2.1.0" }, "devDependencies": { - "antd-md-loader": "0.1.0-beta.12", + "antd-md-loader": "0.1.0-beta.13", "atool-build": "^0.5.0", "autoprefixer": "^6.3.3", "babel-cli": "^6.2.0", diff --git a/site/component/utils.js b/site/component/utils.js index 11c76efba8..3998610fa3 100644 --- a/site/component/utils.js +++ b/site/component/utils.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Link } from 'react-router'; import hljs from 'highlight.js'; -import antd from '../../'; function isHeading(type) { return /h[1-6]/i.test(type); @@ -22,7 +21,7 @@ export function objectToComponent(pathname, object, index) { } if (typeof object === 'function') { - return React.cloneElement(object(React, ReactDOM, antd, antd), { key: index }); + return React.cloneElement(object(React, ReactDOM), { key: index }); } if (typeof object === 'string') { diff --git a/webpack.website.config.js b/webpack.website.config.js index 5243a8e0bd..10c58e1edc 100644 --- a/webpack.website.config.js +++ b/webpack.website.config.js @@ -2,5 +2,11 @@ module.exports = function(webpackConfig) { webpackConfig.entry = { index: './site/entry/index.jsx', }; + webpackConfig.resolve.root = process.cwd(); + webpackConfig.resolve.alias = { + antd: 'index', + BrowserDemo: 'site/component/BrowserDemo', + }; + return webpackConfig; }; From 3fd2b1ac41321aee11b478d7e61413e8321ba804 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 23 Mar 2016 11:54:10 +0800 Subject: [PATCH 0253/1555] site: fix menu highlight --- site/component/MainContent/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index bf337637c5..2908a7d4bb 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -26,8 +26,7 @@ export default class MainContent extends React.Component { } getActiveMenuItem(props) { - const routes = props.routes; - return routes[routes.length - 1].path; + return props.params.children; } fileNameToPath(fileName) { From 99a44e9b5eacd00daf9be63f9e61e062011d3345 Mon Sep 17 00:00:00 2001 From: "fanzheng.fz" Date: Wed, 23 Mar 2016 00:26:22 +0800 Subject: [PATCH 0254/1555] always concat paths wether there's a breadcrumbName or not --- components/breadcrumb/index.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.jsx index f9e0f8bd23..593d8f3769 100644 --- a/components/breadcrumb/index.jsx +++ b/components/breadcrumb/index.jsx @@ -52,14 +52,6 @@ const Breadcrumb = React.createClass({ if (routes && routes.length > 0) { const paths = []; crumbs = routes.map((route, i) => { - if (!route.breadcrumbName) { - return null; - } - const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => { - return params[key] || replacement; - }); - - let link; let path = route.path.replace(/^\//, ''); Object.keys(params).forEach(key => { path = path.replace(`:${key}`, params[key]); @@ -68,6 +60,14 @@ const Breadcrumb = React.createClass({ paths.push(path); } + if (!route.breadcrumbName) { + return null; + } + const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => { + return params[key] || replacement; + }); + + let link; if (i === routes.length - 1) { link = {name}; } else { From 0a701837eb166c2e3c789ded8f8f2813c6414370 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 23 Mar 2016 14:15:00 +0800 Subject: [PATCH 0255/1555] site: complete title --- index.html | 2 ++ site/component/Article/index.jsx | 8 ++++++++ site/component/ComponentDoc/index.jsx | 8 ++++++++ site/component/Home/index.jsx | 9 +++++++++ site/component/utils.js | 5 +++++ 5 files changed, 32 insertions(+) diff --git a/index.html b/index.html index bdb0c5d0d2..36688ad7cb 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ + Ant Design - 一个 UI 设计语言 + + diff --git a/site/common/styles/font.less b/site/common/styles/font.less index 9dd82b76c7..51871fb061 100644 --- a/site/common/styles/font.less +++ b/site/common/styles/font.less @@ -1,9 +1,17 @@ /* latin */ @font-face { - font-family: 'Raleway'; + font-family: 'Lato'; font-style: normal; - font-weight: 300; - src: local('Raleway Light'), local('Raleway-Light'), url(http://fontstatic.useso.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); + font-weight: 400; + src: local('Lato Regular'), local('Lato-Regular'), url(http://fontstatic.useso.com/s/lato/v11/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} +/* latin */ +@font-face { + font-family: 'Lato'; + font-style: normal; + font-weight: 700; + src: local('Lato Bold'), local('Lato-Bold'), url(http://fontstatic.useso.com/s/lato/v11/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* latin */ @@ -14,19 +22,3 @@ src: local('Raleway'), url(http://fontstatic.useso.com/s/raleway/v9/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } -/* latin */ -@font-face { - font-family: 'Raleway'; - font-style: normal; - font-weight: 500; - src: local('Raleway Medium'), local('Raleway-Medium'), url(http://fontstatic.useso.com/s/raleway/v9/CcKI4k9un7TZVWzRVT-T8wzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} -/* latin */ -@font-face { - font-family: 'Raleway'; - font-style: normal; - font-weight: 600; - src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(http://fontstatic.useso.com/s/raleway/v9/xkvoNo9fC8O2RDydKj12bwzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} diff --git a/site/common/styles/highlight.less b/site/common/styles/highlight.less index 623fc0eec1..f80a6b2565 100644 --- a/site/common/styles/highlight.less +++ b/site/common/styles/highlight.less @@ -8,7 +8,7 @@ pre code { display: block; background: white; color: #666; - line-height: 1.5; + line-height: 1.7; border: 1px solid #e9e9e9; padding: 10px 15px; border-radius: 6px; diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less index fdb7444d3d..60ddfcdecb 100644 --- a/site/common/styles/markdown.less +++ b/site/common/styles/markdown.less @@ -15,14 +15,14 @@ .markdown h1 { color: #404040; - font-weight: 500; + font-weight: bold; line-height: 40px; margin-bottom: 24px; margin-top: 8px; + font-family: lato; .subtitle { font-weight: normal; - font-family: "Helvetica Neue",Helvetica; } } @@ -104,9 +104,9 @@ margin: 0; font-size: 13px; color: #666; + overflow: auto; } - .markdown strong, .markdown b { font-weight: 600; From fcf32425707d124f8934bf5ffdffd4bcbf901ff9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 May 2016 15:15:09 +0800 Subject: [PATCH 0757/1555] upgrade eslint-config-airbnb and fix lints --- components/badge/ScrollNumber.jsx | 5 ++++- components/date-picker/RangePicker.jsx | 2 +- components/date-picker/createPicker.jsx | 4 ++-- components/date-picker/locale/en_US.js | 2 +- components/date-picker/locale/ru_RU.js | 3 +-- components/date-picker/locale/zh_CN.js | 2 +- package.json | 2 +- site/component/Header/index.jsx | 8 +++----- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 61c6a6717e..245802632a 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -4,7 +4,10 @@ import { isCssAnimationSupported } from 'css-animation'; function getNumberArray(num) { return num ? - num.toString().split('').reverse().map(i => Number(i)) : []; + num.toString() + .split('') + .reverse() + .map(i => Number(i)) : []; } export default class ScrollNumber extends React.Component { diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx index 32979c0e5e..79abde6177 100644 --- a/components/date-picker/RangePicker.jsx +++ b/components/date-picker/RangePicker.jsx @@ -59,7 +59,7 @@ export default class RangePicker extends React.Component { const state = this.state; const calendarClassName = classNames({ - ['ant-calendar-time']: showTime, + 'ant-calendar-time': showTime, }); let pickerChangeHandler = { diff --git a/components/date-picker/createPicker.jsx b/components/date-picker/createPicker.jsx index 43cf567793..f9cf403d6f 100644 --- a/components/date-picker/createPicker.jsx +++ b/components/date-picker/createPicker.jsx @@ -46,8 +46,8 @@ export default function createPicker(TheCalendar) { const disabledTime = props.showTime ? props.disabledTime : null; const calendarClassName = classNames({ - ['ant-calendar-time']: props.showTime, - ['ant-calendar-month']: MonthCalendar === TheCalendar, + 'ant-calendar-time': props.showTime, + 'ant-calendar-month': MonthCalendar === TheCalendar, }); let pickerChangeHandler = { diff --git a/components/date-picker/locale/en_US.js b/components/date-picker/locale/en_US.js index 7608d0f764..8f19d78198 100644 --- a/components/date-picker/locale/en_US.js +++ b/components/date-picker/locale/en_US.js @@ -3,7 +3,7 @@ import CalendarLocale from 'rc-calendar/lib/locale/en_US'; import TimePickerLocale from '../../time-picker/locale/en_US'; // 统一合并为完整的 Locale -let locale = { ...GregorianCalendarLocale }; +const locale = { ...GregorianCalendarLocale }; locale.lang = { placeholder: 'Select date', rangePlaceholder: ['Start date', 'End date'], diff --git a/components/date-picker/locale/ru_RU.js b/components/date-picker/locale/ru_RU.js index b64f5c6bbd..87b68359d2 100644 --- a/components/date-picker/locale/ru_RU.js +++ b/components/date-picker/locale/ru_RU.js @@ -6,7 +6,7 @@ import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU'; import CalendarLocale from 'rc-calendar/lib/locale/ru_RU'; import TimePickerLocale from '../../time-picker/locale/ru_RU'; -let locale = { ...GregorianCalendarLocale }; +const locale = { ...GregorianCalendarLocale }; locale.lang = { placeholder: 'Выберите дату', rangePlaceholder: ['Начальная дата', 'Конечная дата'], @@ -19,4 +19,3 @@ locale.timePickerLocale = { ...TimePickerLocale }; // https://github.com/ant-design/ant-design/issues/424 export default locale; - diff --git a/components/date-picker/locale/zh_CN.js b/components/date-picker/locale/zh_CN.js index befb2b6251..7884c3cc23 100644 --- a/components/date-picker/locale/zh_CN.js +++ b/components/date-picker/locale/zh_CN.js @@ -3,7 +3,7 @@ import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; import TimePickerLocale from '../../time-picker/locale/zh_CN'; // 统一合并为完整的 Locale -let locale = { ...GregorianCalendarLocale }; +const locale = { ...GregorianCalendarLocale }; locale.lang = { placeholder: '请选择日期', rangePlaceholder: ['开始日期', '结束日期'], diff --git a/package.json b/package.json index 114f009594..059905fb32 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "dom-scroll-into-view": "^1.1.0", "es6-shim": "^0.35.0", "eslint": "^2.2.0", - "eslint-config-airbnb": "^8.0.0", + "eslint-config-airbnb": "^9.0.1", "eslint-plugin-babel": "^3.0.0", "eslint-plugin-import": "^1.6.1", "eslint-plugin-jsx-a11y": "^1.0.4", diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index 9950a70559..be0bf09440 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -81,11 +81,9 @@ export default class Header extends React.Component { let activeMenuItem = routes[1].path || 'home'; activeMenuItem = activeMenuItem === 'components' ? 'docs/react' : activeMenuItem; - const options = Object.keys(componentsList).map((key) => { - return componentsList[key]; - }).filter(({ meta }) => { - return /^component/.test(meta.fileName); - }).map(({ meta }) => { + const options = Object.keys(componentsList).map(key => componentsList[key]) + .filter(({ meta }) => /^component/.test(meta.fileName)) + .map(({ meta }) => { const pathSnippet = meta.fileName.split('/')[1]; const url = `/components/${pathSnippet}`; return ( From 3552ffeba1325a61451c24ddff807ed7d4579f63 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 May 2016 15:26:25 +0800 Subject: [PATCH 0758/1555] fix devDeps --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 059905fb32..6cae1046fb 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "babel-jest": "^12.0.2", "babel-plugin-antd": "^0.4.0", "dom-scroll-into-view": "^1.1.0", + "enquire.js": "^2.1.1", "es6-shim": "^0.35.0", "eslint": "^2.2.0", "eslint-config-airbnb": "^9.0.1", From 46844ba1aa69398f664f352e6083f8725b269575 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 May 2016 15:27:37 +0800 Subject: [PATCH 0759/1555] fix devDeps --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 6cae1046fb..7b57741cc0 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,6 @@ "jsonml.js": "^0.1.0", "jsonp": "^0.2.0", "lesshint": "^1.2.1", - "lodash": "^4.1.0", "lodash.debounce": "^4.0.6", "pre-commit": "1.x", "querystring": "^0.2.0", From 4a3fe9e1021d9ca8b44bd0f64c510686284e0f7e Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 May 2016 15:29:15 +0800 Subject: [PATCH 0760/1555] fix TimePicker style in DatePicker --- components/date-picker/style/TimePicker.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 6fbb63fbdb..e3181bfa63 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -23,7 +23,7 @@ .@{calendar-prefix-cls}-input { padding-right: 21px; } - .@{timepicker-prefix-cls} { + .@{timepicker-prefix-cls}-panel { min-width: 168px; } .@{timepicker-prefix-cls}-icon { From 105f7d0941875f60d45f4583a628010daaf1eb4f Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 10 May 2016 15:32:15 +0800 Subject: [PATCH 0761/1555] fix home arrow anim --- package.json | 4 ++-- site/component/Home/Banner.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6cae1046fb..704389c10b 100644 --- a/package.json +++ b/package.json @@ -98,8 +98,8 @@ "pre-commit": "1.x", "querystring": "^0.2.0", "ramda": "^0.21.0", - "rc-scroll-anim": "0.2.x", - "rc-tween-one": "0.2.x", + "rc-scroll-anim": "~0.2.8", + "rc-tween-one": "~0.3.0", "react": "^15.0.0", "react-addons-test-utils": "^15.0.0", "react-copy-to-clipboard": "^4.0.1", diff --git a/site/component/Home/Banner.jsx b/site/component/Home/Banner.jsx index 87d92c76b6..4e99680c00 100644 --- a/site/component/Home/Banner.jsx +++ b/site/component/Home/Banner.jsx @@ -33,7 +33,7 @@ export default class Banner extends React.Component { - + From 001cf94e459ac597adc933baf35c672dda2e9c0c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 May 2016 15:44:24 +0800 Subject: [PATCH 0762/1555] Fix some detail style --- components/menu/style/index.less | 3 ++- docs/pattern/navigation.md | 2 +- site/component/Home/Page3.jsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 97c4197ae7..0fbd47b1e3 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -86,6 +86,7 @@ margin-left: -1px; left: 1px; position: relative; + z-index: 1; } } @@ -218,7 +219,7 @@ top: 1px; float: left; border-bottom: 2px solid transparent; - z-index: 1; + z-index: 2; &-active, &-selected { diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 66fa91001f..acd52a3b67 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -39,7 +39,7 @@ english: Navigation 我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。 -前端实现代码可以参考 [常用布局](/docs/spec/layout/#layout-demo-top)。 +前端实现代码可以参考 [常用布局](/docs/spec/layout?scrollTo=components-spec-demo-top)。 ## 侧栏导航 diff --git a/site/component/Home/Page3.jsx b/site/component/Home/Page3.jsx index e4b61883ca..70e192defd 100644 --- a/site/component/Home/Page3.jsx +++ b/site/component/Home/Page3.jsx @@ -15,7 +15,7 @@ export default function Page3() {

    丰富的基础组件

    丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。

    - +
    ); - } + }, }); ReactDOM.render( diff --git a/components/badge/index.jsx b/components/badge/index.jsx index 0371b5f2a7..dfb3ba0a78 100644 --- a/components/badge/index.jsx +++ b/components/badge/index.jsx @@ -14,7 +14,7 @@ export default class Badge extends React.Component { static propTypes = { count: React.PropTypes.oneOfType([ React.PropTypes.string, - React.PropTypes.number + React.PropTypes.number, ]), dot: React.PropTypes.bool, overflowCount: React.PropTypes.number, diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index a208a18494..1d355758f5 100644 --- a/components/breadcrumb/demo/router.md +++ b/components/breadcrumb/demo/router.md @@ -36,7 +36,7 @@ function Home(props) { marginBottom: 15, marginTop: 15, paddingBottom: 15, - borderBottom: '1px dashed #ccc' + borderBottom: '1px dashed #ccc', }}> 点击上面的导航切换页面，面包屑在下面： diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx index 6d9d53fdb3..d494a345e3 100644 --- a/components/button/button-group.jsx +++ b/components/button/button-group.jsx @@ -16,7 +16,7 @@ export default function ButtonGroup(props) { const classes = classNames({ 'ant-btn-group': true, [prefix + sizeCls]: sizeCls, - [className]: className + [className]: className, }); return
    ; diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index 15a012d19b..e590f8ce47 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -42,7 +42,7 @@ const App = React.createClass({
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md index 480771f0b7..52065c2ee2 100644 --- a/components/calendar/demo/notice-calendar.md +++ b/components/calendar/demo/notice-calendar.md @@ -14,13 +14,13 @@ function getListData(value) { case 8: listData = [ { type: 'warning', content: '这里是警告事项.' }, - { type: 'normal', content: '这里是普通事项.' } + { type: 'normal', content: '这里是普通事项.' }, ]; break; case 10: listData = [ { type: 'warning', content: '这里是警告事项.' }, { type: 'normal', content: '这里是普通事项.' }, - { type: 'error', content: '这里是错误事项.' } + { type: 'error', content: '这里是错误事项.' }, ]; break; case 15: listData = [ @@ -29,7 +29,7 @@ function getListData(value) { { type: 'error', content: '这里是错误事项.' }, { type: 'error', content: '这里是错误事项.' }, { type: 'error', content: '这里是错误事项.' }, - { type: 'error', content: '这里是错误事项.' } + { type: 'error', content: '这里是错误事项.' }, ]; break; default: } diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index d62d5828d2..d7cd687fb5 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -56,7 +56,7 @@ export default class Calendar extends React.Component { componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ - value: this.parseDateFromValue(nextProps.value) + value: this.parseDateFromValue(nextProps.value), }); } } diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md index 6ee1d80e93..19ccd6e2e6 100644 --- a/components/checkbox/demo/controller.md +++ b/components/checkbox/demo/controller.md @@ -12,7 +12,7 @@ const App = React.createClass({ getInitialState() { return { checked: true, - disabled: false + disabled: false, }; }, render() { @@ -51,7 +51,7 @@ const App = React.createClass({ this.setState({ checked: e.target.checked, }); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index dc9ff8f9e5..a0ea3a4ff3 100644 --- a/components/checkbox/index.jsx +++ b/components/checkbox/index.jsx @@ -6,7 +6,7 @@ import classNames from 'classnames'; export default class Checkbox extends React.Component { static Group = CheckboxGroup; static defaultProps = { - prefixCls: 'ant-checkbox' + prefixCls: 'ant-checkbox', } render() { const { prefixCls, style, children, className, ...restProps } = this.props; diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.jsx index 79abde6177..b2d4f5c141 100644 --- a/components/date-picker/RangePicker.jsx +++ b/components/date-picker/RangePicker.jsx @@ -17,8 +17,8 @@ export default class RangePicker extends React.Component { this.state = { value: [ parseDateFromValue(start), - parseDateFromValue(end) - ] + parseDateFromValue(end), + ], }; } @@ -28,7 +28,7 @@ export default class RangePicker extends React.Component { const start = nextProps.parseDateFromValue(value[0]); const end = nextProps.parseDateFromValue(value[1]); this.setState({ - value: [start, end] + value: [start, end], }); } } diff --git a/components/date-picker/createPicker.jsx b/components/date-picker/createPicker.jsx index f9cf403d6f..411d77cbb2 100644 --- a/components/date-picker/createPicker.jsx +++ b/components/date-picker/createPicker.jsx @@ -17,7 +17,7 @@ export default function createPicker(TheCalendar) { componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ - value: nextProps.parseDateFromValue(nextProps.value) + value: nextProps.parseDateFromValue(nextProps.value), }); } } diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index e6f02a7401..5f50ec665d 100644 --- a/components/date-picker/demo/start-end.md +++ b/components/date-picker/demo/start-end.md @@ -12,7 +12,7 @@ const DateRange = React.createClass({ getInitialState() { return { startValue: null, - endValue: null + endValue: null, }; }, disabledStartDate(startValue) { @@ -52,7 +52,7 @@ const DateRange = React.createClass({ onChange={this.onEndChange} /> ); - } + }, }); ReactDOM.render( diff --git a/components/date-picker/demo/with-time-picker.md b/components/date-picker/demo/with-time-picker.md index d5a9b0c49d..f20848d734 100644 --- a/components/date-picker/demo/with-time-picker.md +++ b/components/date-picker/demo/with-time-picker.md @@ -48,7 +48,7 @@ const DateTimePicker = React.createClass({ ); - } + }, }); function onSelect(value) { diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.jsx index 8337f78e70..a1453f2443 100644 --- a/components/date-picker/wrapPicker.jsx +++ b/components/date-picker/wrapPicker.jsx @@ -17,7 +17,7 @@ export default function wrapPicker(Picker, defaultFormat) { align: { offset: [0, -9], }, - open: false + open: false, } static contextTypes = { @@ -67,7 +67,7 @@ export default function wrapPicker(Picker, defaultFormat) { toggleOpen = (e) => { this.setState({ - open: e.open + open: e.open, }); } @@ -76,7 +76,7 @@ export default function wrapPicker(Picker, defaultFormat) { const state = this.state; const pickerClass = classNames({ 'ant-calendar-picker': true, - 'ant-calendar-picker-open': state.open + 'ant-calendar-picker-open': state.open, }); const pickerInputClass = classNames({ 'ant-calendar-range-picker': true, @@ -91,7 +91,7 @@ export default function wrapPicker(Picker, defaultFormat) { const rcTimePickerProps = { formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss'), showSecond: timeFormat && timeFormat.indexOf('ss') >= 0, - showHour: timeFormat && timeFormat.indexOf('HH') >= 0 + showHour: timeFormat && timeFormat.indexOf('HH') >= 0, }; const timePicker = props.showTime ? ( ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md index 4a1db28038..6971a29115 100644 --- a/components/form/demo/form-in-modal.md +++ b/components/form/demo/form-in-modal.md @@ -54,7 +54,7 @@ let Demo = React.createClass({ ); - } + }, }); Demo = createForm()(Demo); diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md index 464e6922e2..764bb49040 100644 --- a/components/form/demo/horizontal-form.md +++ b/components/form/demo/horizontal-form.md @@ -58,7 +58,7 @@ let Demo = React.createClass({ ); - } + }, }); Demo = Form.create()(Demo); diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md index 8fdb26887f..14e4820278 100644 --- a/components/form/demo/inline-form.md +++ b/components/form/demo/inline-form.md @@ -35,7 +35,7 @@ let Demo = React.createClass({ ); - } + }, }); Demo = Form.create()(Demo); diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 728a3d89ca..cf3368dfe0 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -142,7 +142,7 @@ let Demo = React.createClass({ + , ]; let footer = props.footer || defaultFooter; return ( diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md index 806454becc..e51af392b8 100644 --- a/components/modal/demo/async.md +++ b/components/modal/demo/async.md @@ -12,30 +12,30 @@ const Test = React.createClass({ getInitialState() { return { ModalText: '对话框的内容', - visible: false + visible: false, }; }, showModal() { this.setState({ - visible: true + visible: true, }); }, handleOk() { this.setState({ ModalText: '对话框将在两秒后关闭', - confirmLoading: true + confirmLoading: true, }); setTimeout(() => { this.setState({ visible: false, - confirmLoading: false + confirmLoading: false, }); }, 2000); }, handleCancel() { console.log('点击了取消'); this.setState({ - visible: false + visible: false, }); }, render() { @@ -51,7 +51,7 @@ const Test = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md index 294f0ccbe2..15ef92c0ef 100644 --- a/components/modal/demo/basic.md +++ b/components/modal/demo/basic.md @@ -14,19 +14,19 @@ const App = React.createClass({ }, showModal() { this.setState({ - visible: true + visible: true, }); }, handleOk() { console.log('点击了确定'); this.setState({ - visible: false + visible: false, }); }, handleCancel(e) { console.log(e); this.setState({ - visible: false + visible: false, }); }, render() { @@ -41,7 +41,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md index 5e2bf1bd8e..d0433877ca 100644 --- a/components/modal/demo/confirm-promise.md +++ b/components/modal/demo/confirm-promise.md @@ -18,7 +18,7 @@ function showConfirm() { setTimeout(resolve, 1000); }); }, - onCancel() {} + onCancel() {}, }); } diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md index 9d39e3e36a..610cd4859e 100644 --- a/components/modal/demo/confirm.md +++ b/components/modal/demo/confirm.md @@ -16,7 +16,7 @@ function showConfirm() { onOk() { console.log('确定'); }, - onCancel() {} + onCancel() {}, }); } diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md index 4770b7e38b..14b7bfda0e 100644 --- a/components/modal/demo/footer.md +++ b/components/modal/demo/footer.md @@ -12,12 +12,12 @@ const Test = React.createClass({ getInitialState() { return { loading: false, - visible: false + visible: false, }; }, showModal() { this.setState({ - visible: true + visible: true, }); }, handleOk() { @@ -42,7 +42,7 @@ const Test = React.createClass({ , + , ]}>

    对话框的内容

    对话框的内容

    @@ -52,7 +52,7 @@ const Test = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md index 2434ccf7fd..c81bd59a7e 100644 --- a/components/modal/demo/locale.md +++ b/components/modal/demo/locale.md @@ -14,17 +14,17 @@ const LocalizedModal = React.createClass({ }, showModal() { this.setState({ - visible: true + visible: true, }); }, handleOk() { this.setState({ - visible: false + visible: false, }); }, handleCancel() { this.setState({ - visible: false + visible: false, }); }, render() { @@ -40,7 +40,7 @@ const LocalizedModal = React.createClass({ ); - } + }, }); function confirm() { @@ -48,7 +48,7 @@ function confirm() { title: 'Confirm', content: 'Bla bla ...', okText: 'OK', - cancelText: 'Cancel' + cancelText: 'Cancel', }); } diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md index 212216774b..0a28fc8a8b 100644 --- a/components/notification/demo/basic.md +++ b/components/notification/demo/basic.md @@ -11,7 +11,7 @@ import { Button, notification } from 'antd'; const openNotification = function () { notification.open({ message: '这是标题', - description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案' + description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案', }); }; diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md index 5eed72c3d7..00792e4068 100644 --- a/components/notification/demo/duration.md +++ b/components/notification/demo/duration.md @@ -12,7 +12,7 @@ const openNotification = function () { const args = { message: '这是标题', description: '我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭', - duration: 0 + duration: 0, }; notification.open(args); }; diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md index 59c5b4bd3a..ebfce74706 100644 --- a/components/notification/demo/with-btn.md +++ b/components/notification/demo/with-btn.md @@ -28,7 +28,7 @@ const openNotification = function () { description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案', btn, key, - onClose: close + onClose: close, }); }; diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index fe759d1885..83d5dde0f9 100644 --- a/components/notification/demo/with-icon.md +++ b/components/notification/demo/with-icon.md @@ -12,7 +12,7 @@ const openNotificationWithIcon = function (type) { return function () { notification[type]({ message: '这是标题', - description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案' + description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案', }); }; }; diff --git a/components/notification/index.jsx b/components/notification/index.jsx index 6e0aa4a807..5da374e524 100644 --- a/components/notification/index.jsx +++ b/components/notification/index.jsx @@ -16,7 +16,7 @@ function getNotificationInstance() { style: { top: defaultTop, right: 0, - } + }, }); return notificationInstance; } diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md index 197835e257..d26fc8ead9 100644 --- a/components/pagination/demo/controlled.md +++ b/components/pagination/demo/controlled.md @@ -11,18 +11,18 @@ import { Pagination } from 'antd'; const Container = React.createClass({ getInitialState() { return { - current: 3 + current: 3, }; }, onChange(page) { console.log(page); this.setState({ - current: page + current: page, }); }, render() { return ; - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md index 1f8b3ab214..dfd185ad33 100644 --- a/components/popconfirm/demo/dynamic-trigger.md +++ b/components/popconfirm/demo/dynamic-trigger.md @@ -52,7 +52,7 @@ let App = React.createClass({ 点击是否直接执行： ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index 45d81f300b..95b66c172a 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -26,7 +26,7 @@ export default class Popconfirm extends React.Component { constructor(props) { super(props); this.state = { - visible: false + visible: false, }; } diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md index bf49b54f70..e9aaab40c9 100644 --- a/components/popover/demo/control.md +++ b/components/popover/demo/control.md @@ -11,12 +11,12 @@ import { Popover, Button } from 'antd'; const App = React.createClass({ getInitialState() { return { - visible: false + visible: false, }; }, hide() { this.setState({ - visible: false + visible: false, }); }, handleVisibleChange(visible) { @@ -34,7 +34,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md index 5cf6241f56..20fe327374 100644 --- a/components/progress/demo/circle-dynamic.md +++ b/components/progress/demo/circle-dynamic.md @@ -12,7 +12,7 @@ const ButtonGroup = Button.Group; const MyProgress = React.createClass({ getInitialState() { return { - percent: 0 + percent: 0, }; }, increase() { @@ -39,7 +39,7 @@ const MyProgress = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md index c35599a68c..92af8aa370 100644 --- a/components/progress/demo/dynamic.md +++ b/components/progress/demo/dynamic.md @@ -12,7 +12,7 @@ const ButtonGroup = Button.Group; const MyProgress = React.createClass({ getInitialState() { return { - percent: 0 + percent: 0, }; }, increase() { @@ -39,7 +39,7 @@ const MyProgress = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx index d2e5e8ddd6..f7adf5b524 100644 --- a/components/progress/progress.jsx +++ b/components/progress/progress.jsx @@ -6,7 +6,7 @@ import classNames from 'classnames'; const statusColorMap = { normal: '#2db7f5', exception: '#ff5500', - success: '#87d068' + success: '#87d068', }; export default class Line extends React.Component { diff --git a/components/queue-anim/demo/basic.md b/components/queue-anim/demo/basic.md index 5dd6f9cafd..b6c93096ee 100644 --- a/components/queue-anim/demo/basic.md +++ b/components/queue-anim/demo/basic.md @@ -11,12 +11,12 @@ import { QueueAnim, Button } from 'antd'; const Test = React.createClass({ getInitialState() { return { - show: true + show: true, }; }, onClick() { this.setState({ - show: !this.state.show + show: !this.state.show, }); }, render() { @@ -37,7 +37,7 @@ const Test = React.createClass({
  • - + , ] : null; return (
    @@ -49,7 +49,7 @@ const Test = React.createClass({
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/queue-anim/demo/change.md b/components/queue-anim/demo/change.md index 91ae881eec..cf54004fc0 100644 --- a/components/queue-anim/demo/change.md +++ b/components/queue-anim/demo/change.md @@ -15,7 +15,7 @@ const Test = React.createClass({ items: [
  • ,
  • , -
  • +
  • , ], }; }, @@ -60,7 +60,7 @@ const Test = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/queue-anim/demo/custom.md b/components/queue-anim/demo/custom.md index ebc5d65ef4..dd2639e39e 100644 --- a/components/queue-anim/demo/custom.md +++ b/components/queue-anim/demo/custom.md @@ -37,7 +37,7 @@ const Test = React.createClass({
  • - + , ] : null; return (
    @@ -47,13 +47,13 @@ const Test = React.createClass({ {list}
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/queue-anim/demo/enter-leave.md b/components/queue-anim/demo/enter-leave.md index 082144cc77..3b69e132e7 100644 --- a/components/queue-anim/demo/enter-leave.md +++ b/components/queue-anim/demo/enter-leave.md @@ -11,12 +11,12 @@ import { QueueAnim, Button } from 'antd'; const Test = React.createClass({ getInitialState() { return { - show: true + show: true, }; }, onClick() { this.setState({ - show: !this.state.show + show: !this.state.show, }); }, render() { @@ -37,7 +37,7 @@ const Test = React.createClass({
  • - + , ] : null; return (
    @@ -52,7 +52,7 @@ const Test = React.createClass({
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/queue-anim/demo/form.md b/components/queue-anim/demo/form.md index 04a1b23a71..36f211fcea 100644 --- a/components/queue-anim/demo/form.md +++ b/components/queue-anim/demo/form.md @@ -13,12 +13,12 @@ const RadioGroup = Radio.Group; const Test = React.createClass({ getInitialState() { return { - show: true + show: true, }; }, onClick() { this.setState({ - show: !this.state.show + show: !this.state.show, }); }, render() { @@ -57,7 +57,7 @@ const Test = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/queue-anim/demo/page.md b/components/queue-anim/demo/page.md index 96a36c61b6..6ace0d5ad1 100644 --- a/components/queue-anim/demo/page.md +++ b/components/queue-anim/demo/page.md @@ -11,12 +11,12 @@ import { QueueAnim, Button } from 'antd'; const Test = React.createClass({ getInitialState() { return { - show: true + show: true, }; }, onClick() { this.setState({ - show: !this.state.show + show: !this.state.show, }); }, render() { @@ -59,7 +59,7 @@ const Test = React.createClass({ ,
    -     + , ] : null; return (
    @@ -69,7 +69,7 @@ const Test = React.createClass({ {page}
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/radio/demo/disable.md b/components/radio/demo/disable.md index d42089dab0..eb4eb2b9d6 100644 --- a/components/radio/demo/disable.md +++ b/components/radio/demo/disable.md @@ -11,12 +11,12 @@ import { Radio, Button } from 'antd'; const App = React.createClass({ getInitialState() { return { - disabled: true + disabled: true, }; }, toggleDisabled() { this.setState({ - disabled: !this.state.disabled + disabled: !this.state.disabled, }); }, render() { @@ -32,7 +32,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md index 040960e78a..d5fbeb986f 100644 --- a/components/radio/demo/radiogroup-more.md +++ b/components/radio/demo/radiogroup-more.md @@ -38,7 +38,7 @@ const App = React.createClass({     ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md index 226d8a68d9..e1b4a45176 100644 --- a/components/radio/demo/radiogroup.md +++ b/components/radio/demo/radiogroup.md @@ -30,7 +30,7 @@ const App = React.createClass({ D     ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/radio/radio.jsx b/components/radio/radio.jsx index c858884fd6..2afda2ea75 100644 --- a/components/radio/radio.jsx +++ b/components/radio/radio.jsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; export default class Radio extends React.Component { static defaultProps = { - prefixCls: 'ant-radio' + prefixCls: 'ant-radio', } render() { const { prefixCls, children, checked, disabled, className, style } = this.props; diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md index 886cbe7fbd..dfccb849f2 100644 --- a/components/rate/demo/text.md +++ b/components/rate/demo/text.md @@ -26,7 +26,7 @@ const Rater = React.createClass({ {value && {value} 星} ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md index edd5892aab..e4b1555a0d 100644 --- a/components/select/demo/combobox.md +++ b/components/select/demo/combobox.md @@ -38,7 +38,7 @@ const Test = React.createClass({ {this.state.options} ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index e367a6dc89..9da433bc28 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -14,25 +14,25 @@ const Option = Select.Option; const provinceData = ['浙江', '江苏']; const cityData = { 浙江: ['杭州', '宁波', '温州'], - 江苏: ['南京', '苏州', '镇江'] + 江苏: ['南京', '苏州', '镇江'], }; const App = React.createClass({ getInitialState() { return { cities: cityData[provinceData[0]], - secondCity: cityData[provinceData[0]][0] + secondCity: cityData[provinceData[0]][0], }; }, handleProvinceChange(value) { this.setState({ cities: cityData[value], - secondCity: cityData[value][0] + secondCity: cityData[value][0], }); }, onSecondCityChange(value) { this.setState({ - secondCity: value + secondCity: value, }); }, render() { @@ -48,7 +48,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); ```` diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md index b2fef3a7e9..abff5d53a0 100644 --- a/components/slider/demo/icon-slider.md +++ b/components/slider/demo/icon-slider.md @@ -17,7 +17,7 @@ const IconSlider = React.createClass({ preIconClass: this.props.value >= mid ? '' : 'anticon-highlight', nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '', mid, - sliderValue: this.props.value + sliderValue: this.props.value, }; }, @@ -25,7 +25,7 @@ const IconSlider = React.createClass({ this.setState({ preIconClass: v >= this.state.mid ? '' : 'anticon-highlight', nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '', - sliderValue: v + sliderValue: v, }); }, @@ -37,7 +37,7 @@ const IconSlider = React.createClass({ ); - } + }, }); ReactDOM.render( diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md index 91be721b81..8e3d9873d2 100644 --- a/components/slider/demo/input-number.md +++ b/components/slider/demo/input-number.md @@ -11,12 +11,12 @@ import { Slider, InputNumber, Row, Col } from 'antd'; const IntegerStep = React.createClass({ getInitialState() { return { - inputValue: 1 + inputValue: 1, }; }, onChange(value) { this.setState({ - inputValue: value + inputValue: value, }); }, render() { @@ -31,18 +31,18 @@ const IntegerStep = React.createClass({ ); - } + }, }); const DecimalStep = React.createClass({ getInitialState() { return { - inputValue: 0 + inputValue: 0, }; }, onChange(value) { this.setState({ - inputValue: value + inputValue: value, }); }, render() { @@ -57,7 +57,7 @@ const DecimalStep = React.createClass({ ); - } + }, }); ReactDOM.render(
    diff --git a/components/slider/index.jsx b/components/slider/index.jsx index c92f070b60..37454cb08d 100644 --- a/components/slider/index.jsx +++ b/components/slider/index.jsx @@ -4,7 +4,7 @@ import RcSlider from 'rc-slider'; export default class Slider extends React.Component { static defaultProps = { prefixCls: 'ant-slider', - tipTransitionName: 'zoom-down' + tipTransitionName: 'zoom-down', } render() { diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md index 6d0ed1ef4c..61470113b0 100644 --- a/components/spin/demo/nested.md +++ b/components/spin/demo/nested.md @@ -27,7 +27,7 @@ const Card = React.createClass({ 切换加载状态：
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md index d3b6d3d73b..c990961ebc 100644 --- a/components/steps/demo/error.md +++ b/components/steps/demo/error.md @@ -11,16 +11,16 @@ const Step = Steps.Step; const steps = [{ title: '已完成', - description: '这里是多信息的描述啊' + description: '这里是多信息的描述啊', }, { title: '错误示例', - description: '这里是多信息的耶哦耶哦哦耶哦耶' + description: '这里是多信息的耶哦耶哦哦耶哦耶', }, { title: '又一个待运行', - description: '描述啊描述啊' + description: '描述啊描述啊', }, { title: '待运行', - description: '这里是多信息的描述啊' + description: '这里是多信息的描述啊', }].map((s, i) => ); ReactDOM.render({steps}, mountNode); diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md index 6cca51353a..f482f747aa 100644 --- a/components/steps/demo/simple.md +++ b/components/steps/demo/simple.md @@ -11,16 +11,16 @@ const Step = Steps.Step; const steps = [{ title: '已完成', - description: '这里是多信息的描述啊' + description: '这里是多信息的描述啊', }, { title: '进行中', - description: '这里是多信息的耶哦耶哦哦耶哦耶' + description: '这里是多信息的耶哦耶哦哦耶哦耶', }, { title: '又一个待运行', - description: '描述啊描述啊' + description: '描述啊描述啊', }, { title: '待运行', - description: '这里是多信息的描述啊' + description: '这里是多信息的描述啊', }].map((s, i) => ); ReactDOM.render({steps}, mountNode); diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md index a1c175fbc8..bc97911a18 100644 --- a/components/steps/demo/small-size.md +++ b/components/steps/demo/small-size.md @@ -11,16 +11,16 @@ const Step = Steps.Step; const steps = [{ status: 'finish', - title: '已完成' + title: '已完成', }, { status: 'process', - title: '进行中' + title: '进行中', }, { status: 'wait', - title: '待运行' + title: '待运行', }, { status: 'wait', - title: '待运行' + title: '待运行', }].map((s, i) => ); ReactDOM.render({steps}, mountNode); diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md index d2b0da3d7d..1b0f088838 100644 --- a/components/steps/demo/step-next.md +++ b/components/steps/demo/step-next.md @@ -17,14 +17,14 @@ const Step = Steps.Step; const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3)); const steps = array.map((item, i) => { return { - title: `步骤${i + 1}` + title: `步骤${i + 1}`, }; }); const App = React.createClass({ getInitialState() { return { - currentStep: Math.floor(Math.random() * steps.length) + currentStep: Math.floor(Math.random() * steps.length), }; }, next() { @@ -33,7 +33,7 @@ const App = React.createClass({ s = 0; } this.setState({ - currentStep: s + currentStep: s, }); }, render() { @@ -49,7 +49,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md index 54481b831f..5d5e0bda39 100644 --- a/components/steps/demo/vertical-small.md +++ b/components/steps/demo/vertical-small.md @@ -11,13 +11,13 @@ const Step = Steps.Step; const steps = [{ title: '已完成', - description: '这里是信息的描述' + description: '这里是信息的描述', }, { title: '进行中', - description: '这里是信息的描述' + description: '这里是信息的描述', }, { title: '待运行', - description: '这里是信息的描述' + description: '这里是信息的描述', }].map((s, i) => ); ReactDOM.render({steps}, diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md index d9514d1100..ae9b8bfc6f 100644 --- a/components/steps/demo/vertical.md +++ b/components/steps/demo/vertical.md @@ -11,16 +11,16 @@ const Step = Steps.Step; const steps = [{ title: '已完成', - description: '这里是信息的描述' + description: '这里是信息的描述', }, { title: '进行中', - description: '这里是信息的描述' + description: '这里是信息的描述', }, { title: '待运行', - description: '这里是信息的描述' + description: '这里是信息的描述', }, { title: '又一个待运行', - description: '这里是信息的描述' + description: '这里是信息的描述', }].map((s, i) => ); ReactDOM.render({steps}, diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md index a13391f120..4fb17ba1fb 100644 --- a/components/switch/demo/disabled.md +++ b/components/switch/demo/disabled.md @@ -11,12 +11,12 @@ import { Switch, Button } from 'antd'; const Test = React.createClass({ getInitialState() { return { - disabled: true + disabled: true, }; }, toggle() { this.setState({ - disabled: !this.state.disabled + disabled: !this.state.disabled, }); }, render() { @@ -28,7 +28,7 @@ const Test = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 7609ae377b..5a4e9ee58f 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -69,7 +69,7 @@ const Test = React.createClass({ data: result.data, pagination, }); - } + }, }); }, componentDidMount() { @@ -83,7 +83,7 @@ const Test = React.createClass({ loading={this.state.loading} onChange={this.handleTableChange} /> ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index d72bb3ef05..771132d400 100644 --- a/components/table/demo/bordered.md +++ b/components/table/demo/bordered.md @@ -13,7 +13,7 @@ const columns = [{ dataIndex: 'name', render(text) { return {text}; - } + }, }, { title: '资产', className: 'column-money', diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md index d8625d3ed0..b1b37df4e9 100644 --- a/components/table/demo/colspan-rowspan.md +++ b/components/table/demo/colspan-rowspan.md @@ -15,7 +15,7 @@ import { Table } from 'antd'; const renderContent = function (value, row, index) { let obj = { children: value, - props: {} + props: {}, }; if (index === 4) { obj.props.colSpan = 0; @@ -33,14 +33,14 @@ const columns = [{ return { children: {text}, props: { - colSpan: 5 - } + colSpan: 5, + }, }; - } + }, }, { title: '年龄', dataIndex: 'age', - render: renderContent + render: renderContent, }, { title: '家庭电话', colSpan: 2, @@ -48,7 +48,7 @@ const columns = [{ render(value, row, index) { let obj = { children: value, - props: {} + props: {}, }; // 第三列的第三行行合并 if (index === 2) { @@ -64,16 +64,16 @@ const columns = [{ obj.props.colSpan = 0; } return obj; - } + }, }, { title: '手机号', colSpan: 0, dataIndex: 'phone', - render: renderContent + render: renderContent, }, { title: '住址', dataIndex: 'address', - render: renderContent + render: renderContent, }]; const data = [{ diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md index 21b8214dca..7014cddc56 100644 --- a/components/table/demo/fixed-header.md +++ b/components/table/demo/fixed-header.md @@ -29,7 +29,7 @@ for (let i = 0; i < 100; i++) { key: i, name: `李大嘴${i}`, age: 32, - address: `西湖区湖底公园${i}号` + address: `西湖区湖底公园${i}号`, }); } diff --git a/components/table/demo/loading.md b/components/table/demo/loading.md index a70f860e82..7a6035a7c6 100644 --- a/components/table/demo/loading.md +++ b/components/table/demo/loading.md @@ -38,12 +38,12 @@ const data = [{ const App = React.createClass({ getInitialState() { return { - loading: false + loading: false, }; }, toggleLoading() { this.setState({ - loading: !this.state.loading + loading: !this.state.loading, }); }, render() { @@ -53,7 +53,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md index b9e1630269..dcbcfeb950 100644 --- a/components/table/demo/nopagination.md +++ b/components/table/demo/nopagination.md @@ -23,17 +23,17 @@ 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号', }]; ReactDOM.render(
    diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index a5b571e9d2..cc2494d8c0 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -13,13 +13,13 @@ const columns = [{ dataIndex: 'name', render(text) { return {text}; - } + }, }, { title: '年龄', - dataIndex: 'age' + dataIndex: 'age', }, { title: '住址', - dataIndex: 'address' + dataIndex: 'address', }]; const data = []; @@ -28,7 +28,7 @@ for (let i = 0; i < 46; i++) { key: i, name: `李大嘴${i}`, age: 32, - address: `西湖区湖底公园${i}号` + address: `西湖区湖底公园${i}号`, }); } diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index f3498d5823..25bba29a9f 100644 --- a/components/table/demo/reset-filter.md +++ b/components/table/demo/reset-filter.md @@ -115,7 +115,7 @@ const App = React.createClass({
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 5a445c6799..1aa99d5cad 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -67,7 +67,7 @@ const App = React.createClass({
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index f2fe41fed3..90d2850d0e 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -16,7 +16,7 @@ const columns = [{ }, }, { title: '年龄', - dataIndex: 'age' + dataIndex: 'age', }, { title: '住址', dataIndex: 'address', diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index a862d2c67c..7a2c28f21b 100644 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -7,7 +7,7 @@ import Checkbox from '../checkbox'; export default class FilterMenu extends React.Component { static defaultProps = { handleFilter() {}, - column: null + column: null, } constructor(props) { @@ -22,7 +22,7 @@ export default class FilterMenu extends React.Component { componentWillReceiveProps(nextProps) { this.setState({ - selectedKeys: nextProps.selectedKeys + selectedKeys: nextProps.selectedKeys, }); } @@ -32,13 +32,13 @@ export default class FilterMenu extends React.Component { handleClearFilters = () => { this.setState({ - selectedKeys: [] + selectedKeys: [], }, this.handleConfirm); } handleConfirm = () => { this.setState({ - visible: false + visible: false, }); this.props.confirmFilter(this.props.column, this.state.selectedKeys); } diff --git a/components/table/index.jsx b/components/table/index.jsx index 54f5e7c7d7..d2e5a1a908 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -55,7 +55,7 @@ export default class Table extends React.Component { bordered: false, indentSize: 20, onChange: noop, - locale: {} + locale: {}, } static contextTypes = { @@ -468,7 +468,7 @@ export default class Table extends React.Component { selectionColumn = { key: 'selection-column', render: this.renderSelectionRadio, - className: 'ant-table-selection-column' + className: 'ant-table-selection-column', }; } else { const checkboxAllDisabled = data.every(item => @@ -483,7 +483,7 @@ export default class Table extends React.Component { key: 'selection-column', title: checkboxAll, render: this.renderSelectionCheckBox, - className: 'ant-table-selection-column' + className: 'ant-table-selection-column', }; } if (columns[0] && columns[0].key === 'selection-column') { diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md index 4dff03f33b..a462b4d778 100644 --- a/components/tabs/demo/editable-card.md +++ b/components/tabs/demo/editable-card.md @@ -54,7 +54,7 @@ const Demo = React.createClass({ {this.state.panes} ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md index df911b256c..31b91ca01c 100644 --- a/components/tabs/demo/position.md +++ b/components/tabs/demo/position.md @@ -39,7 +39,7 @@ const Demo = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md index af4c117607..32f4ec9921 100644 --- a/components/tag/demo/control.md +++ b/components/tag/demo/control.md @@ -44,7 +44,7 @@ const App = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md index 0189dc2a8e..0103cbccec 100644 --- a/components/time-picker/demo/value.md +++ b/components/time-picker/demo/value.md @@ -20,7 +20,7 @@ const Test = React.createClass({ }, render() { return ; - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index 9c4962e4bd..2801b14202 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -84,7 +84,7 @@ export default class Tooltip extends React.Component { onPopupAlign={this.onPopupAlign} ref="tooltip" {...this.props}> - {visible ? cloneElement(children, { className: childrenCls, }) : children} + {visible ? cloneElement(children, { className: childrenCls }) : children} ); } diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md index 7079605eba..d2a1e61005 100644 --- a/components/transfer/demo/advanced.md +++ b/components/transfer/demo/advanced.md @@ -26,7 +26,7 @@ const App = React.createClass({ key: i, title: `内容${i + 1}`, description: `内容${i + 1}的描述`, - chosen: Math.random() * 2 > 1 + chosen: Math.random() * 2 > 1, }; if (data.chosen) { targetKeys.push(data.key); @@ -61,7 +61,7 @@ const App = React.createClass({ render={item => `${item.title}-${item.description}`} footer={this.renderFooter} /> ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index c865ac6d0b..8227fcd2a3 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -26,7 +26,7 @@ const App = React.createClass({ key: i, title: `内容${i + 1}`, description: `内容${i + 1}的描述`, - chosen: Math.random() * 2 > 1 + chosen: Math.random() * 2 > 1, }; if (data.chosen) { targetKeys.push(data.key); @@ -55,7 +55,7 @@ const App = React.createClass({ onChange={this.handleChange} render={item => item.title} /> ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md index 2e571a162a..9e20cbbe86 100644 --- a/components/transfer/demo/search.md +++ b/components/transfer/demo/search.md @@ -26,7 +26,7 @@ const App = React.createClass({ key: i, title: `内容${i + 1}`, description: `内容${i + 1}的描述`, - chosen: Math.random() * 2 > 1 + chosen: Math.random() * 2 > 1, }; if (data.chosen) { targetKeys.push(data.key); @@ -48,7 +48,7 @@ const App = React.createClass({ onChange={this.handleChange} render={item => item.title} /> ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx index 184dd386a1..ef80360280 100644 --- a/components/transfer/list.jsx +++ b/components/transfer/list.jsx @@ -147,7 +147,7 @@ export default class TransferList extends React.Component { prefixCls: 'ant-transfer', checked: checkStatus === 'all', checkPart: checkStatus === 'part', - checkable: + checkable: , })} diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index 3c9f4e7f60..0959271a89 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -23,7 +23,7 @@ export default class TreeSelect extends React.Component { render() { const props = this.props; let { - size, className, combobox, notFoundContent, prefixCls + size, className, combobox, notFoundContent, prefixCls, } = this.props; const cls = classNames({ diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index 905d0e1ebe..93c38b7484 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -23,7 +23,7 @@ const props = { } else if (info.file.status === 'error') { message.error(`${info.file.name} 上传失败。`); } - } + }, }; ReactDOM.render( diff --git a/components/upload/demo/beforeUpload.md b/components/upload/demo/beforeUpload.md index 4fe1dc965b..6781a8bfeb 100644 --- a/components/upload/demo/beforeUpload.md +++ b/components/upload/demo/beforeUpload.md @@ -16,7 +16,7 @@ const props = { message.error('只能上传 JPG 文件哦！'); } return isJPG; - } + }, }; ReactDOM.render( diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md index 0a46ab0b53..f9a8d9610e 100644 --- a/components/upload/demo/defaultFileList.md +++ b/components/upload/demo/defaultFileList.md @@ -20,13 +20,13 @@ const props = { uid: -1, name: 'xxx.png', status: 'done', - url: 'http://www.baidu.com/xxx.png' + url: 'http://www.baidu.com/xxx.png', }, { uid: -2, name: 'yyy.png', status: 'done', - url: 'http://www.baidu.com/yyy.png' - }] + url: 'http://www.baidu.com/yyy.png', + }], }; ReactDOM.render( diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md index 5393765204..3df1ce3224 100644 --- a/components/upload/demo/fileList.md +++ b/components/upload/demo/fileList.md @@ -21,8 +21,8 @@ const MyUpload = React.createClass({ uid: -1, name: 'xxx.png', status: 'done', - url: 'http://www.baidu.com/xxx.png' - }] + url: 'http://www.baidu.com/xxx.png', + }], }; }, handleChange(info) { @@ -55,7 +55,7 @@ const MyUpload = React.createClass({ const props = { action: '/upload.do', onChange: this.handleChange, - multiple: true + multiple: true, }; return ( @@ -64,7 +64,7 @@ const MyUpload = React.createClass({ ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/upload/demo/multiple.md b/components/upload/demo/multiple.md index 10ba33148f..be410c9616 100644 --- a/components/upload/demo/multiple.md +++ b/components/upload/demo/multiple.md @@ -21,7 +21,7 @@ const props = { } else if (info.file.status === 'error') { message.error(`${info.file.name} 上传失败。`); } - } + }, }; ReactDOM.render( diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index 0e742466db..9cf25e24bd 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -36,7 +36,7 @@ const ImageUploadList = React.createClass({ priviewImage: file.url, priviewVisible: true, }); - } + }, }; return (
    @@ -53,7 +53,7 @@ const ImageUploadList = React.createClass({
    ); - } + }, }); ReactDOM.render(, mountNode); diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md index 4420b6e9e3..95bcde1d01 100644 --- a/components/upload/demo/picture-style.md +++ b/components/upload/demo/picture-style.md @@ -25,7 +25,7 @@ const props = { status: 'done', url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', - }] + }], }; ReactDOM.render( diff --git a/components/upload/index.jsx b/components/upload/index.jsx index c8f2e15cc7..6b522abe57 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -78,7 +78,7 @@ export default class Upload extends React.Component { super(props); this.state = { fileList: this.props.fileList || this.props.defaultFileList || [], - dragState: 'drop' + dragState: 'drop', }; } @@ -101,7 +101,7 @@ export default class Upload extends React.Component { } this.onChange({ file: targetItem, - fileList: nextFileList + fileList: nextFileList, }); // fix ie progress if (!window.FormData) { @@ -115,7 +115,7 @@ export default class Upload extends React.Component { this.progressTimer = setInterval(() => { curPercent = getPercent(curPercent); this.onProgress({ - percent: curPercent + percent: curPercent, }, file); }, 200); } @@ -146,7 +146,7 @@ export default class Upload extends React.Component { targetItem.response = response; this.onChange({ file: targetItem, - fileList + fileList, }); } } @@ -159,7 +159,7 @@ export default class Upload extends React.Component { this.onChange({ event: e, file: targetItem, - fileList: this.state.fileList + fileList: this.state.fileList, }); } @@ -207,7 +207,7 @@ export default class Upload extends React.Component { onChange = (info) => { this.setState({ - fileList: info.fileList + fileList: info.fileList, }); this.props.onChange(info); } @@ -222,7 +222,7 @@ export default class Upload extends React.Component { onFileDrop = (e) => { this.setState({ - dragState: e.type + dragState: e.type, }); } diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 32f9e5bbd1..01c9ee7854 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -20,8 +20,8 @@ export default class UploadList extends React.Component { items: [], progressAttr: { strokeWidth: 3, - showInfo: false - } + showInfo: false, + }, }; handleClose = (file) => { diff --git a/site/component/IconSet/CopyableIcon.jsx b/site/component/IconSet/CopyableIcon.jsx index 8b42e37719..2e380392c1 100644 --- a/site/component/IconSet/CopyableIcon.jsx +++ b/site/component/IconSet/CopyableIcon.jsx @@ -6,7 +6,7 @@ export default class CopyableIcon extends React.Component { constructor(props) { super(props); this.state = { - justCopied: false + justCopied: false, }; } diff --git a/site/component/IconSet/index.jsx b/site/component/IconSet/index.jsx index 8fbe0fff4f..52e966ddca 100644 --- a/site/component/IconSet/index.jsx +++ b/site/component/IconSet/index.jsx @@ -4,7 +4,7 @@ import CopyableIcon from './CopyableIcon'; export default class IconSet extends React.Component { static defaultProps = { - icons: [] + icons: [], } render() { diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index 340b498541..f1b6dd4656 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -47,7 +47,7 @@ export default class MainContent extends React.Component { const text = isTop ? item.chinese || item.english : [ {item.english}, - {item.chinese} + {item.chinese}, ]; const disabled = item.disabled; const url = item.fileName.replace(/(\/index)?\.md$/i, ''); diff --git a/site/component/NotFound/index.jsx b/site/component/NotFound/index.jsx index 1e3e6fc9e3..074cc70ddb 100644 --- a/site/component/NotFound/index.jsx +++ b/site/component/NotFound/index.jsx @@ -10,7 +10,7 @@ export default function NotFound() {

    你要找的页面不存在 返回首页

    +``` diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index b46e47ce47..74d38cf1f0 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -7,6 +7,10 @@ import * as utils from '../utils'; import demosList from '../../../_data/demos-list'; export default class ComponentDoc extends React.Component { + static contextTypes = { + intl: React.PropTypes.object, + } + constructor(props) { super(props); @@ -62,12 +66,16 @@ export default class ComponentDoc extends React.Component { 'code-box-expand-trigger-active': expand, }); + const locale = this.context.intl.locale; const jumper = demos.map((demo) => { + const title = demo.meta.title; + const localizeTitle = typeof title === 'object' ? + title[locale] : title; return (
  • - {demo.meta.title} + { localizeTitle }
    • ); diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx index 2d705f26d2..65fec0a5d6 100644 --- a/site/component/Demo/index.jsx +++ b/site/component/Demo/index.jsx @@ -6,6 +6,10 @@ import * as utils from '../utils'; const isLocal = location.port; export default class Demo extends React.Component { + static contextTypes = { + intl: React.PropTypes.object, + } + constructor(props) { super(props); @@ -35,7 +39,12 @@ export default class Demo extends React.Component { [className]: className, expand: codeExpand, }); - const introChildren = utils.jsonmlToComponent(pathname, ['div'].concat(intro)); + + const locale = this.context.intl.locale; + const localizeIntro = intro[locale] || intro; + const introChildren = utils.jsonmlToComponent(pathname, ['div'].concat(localizeIntro)); + const localizedTitle = typeof meta.title === 'object' ? + meta.title[locale] : meta.title; return (
    @@ -53,7 +62,7 @@ export default class Demo extends React.Component {
    - {meta.title} + { localizedTitle }
    {introChildren} From 8971074b3dfa70824c5180709cee84a561bc1731 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 20 Apr 2016 18:51:31 +0800 Subject: [PATCH 0845/1555] site: add i18n for common md file --- components/button/index.en-US.md | 8 +++ .../button/{index.md => index.zh-CN.md} | 0 docs/resource/download.en-US.md | 7 +++ .../{download.md => download.zh-CN.md} | 0 scripts/build-common.js | 36 +++++++++++ site/component/ComponentDoc/index.jsx | 4 +- site/component/Header/index.jsx | 11 +++- site/component/MainContent/index.jsx | 2 +- site/entry/utils.js | 60 ++++++++++++++----- 9 files changed, 107 insertions(+), 21 deletions(-) create mode 100644 components/button/index.en-US.md rename components/button/{index.md => index.zh-CN.md} (100%) create mode 100644 docs/resource/download.en-US.md rename docs/resource/{download.md => download.zh-CN.md} (100%) create mode 100644 scripts/build-common.js diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md new file mode 100644 index 0000000000..0db32fefdf --- /dev/null +++ b/components/button/index.en-US.md @@ -0,0 +1,8 @@ +--- +category: Components +chinese: 按钮 +type: 基本 +english: Button +--- + +TBD diff --git a/components/button/index.md b/components/button/index.zh-CN.md similarity index 100% rename from components/button/index.md rename to components/button/index.zh-CN.md diff --git a/docs/resource/download.en-US.md b/docs/resource/download.en-US.md new file mode 100644 index 0000000000..89b6521738 --- /dev/null +++ b/docs/resource/download.en-US.md @@ -0,0 +1,7 @@ +--- +order: 0 +chinese: 资源下载 +english: Download +--- + +TBD diff --git a/docs/resource/download.md b/docs/resource/download.zh-CN.md similarity index 100% rename from docs/resource/download.md rename to docs/resource/download.zh-CN.md diff --git a/scripts/build-common.js b/scripts/build-common.js new file mode 100644 index 0000000000..945ad3ff61 --- /dev/null +++ b/scripts/build-common.js @@ -0,0 +1,36 @@ +/* eslint strict: 0 */ +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const utils = require('./utils'); + +module.exports = function buildCommon(dirs, outputFile) { + const mds = utils.findMDFile(dirs, true) + .filter((file) => !/\/demo$/i.test(path.dirname(file))) + .filter((file) => !/install_en\.md$/gi.test(file)); // TODO + + const addedMd = []; + let content = 'module.exports = {'; + mds.forEach((fileName) => { + const localeId = path.basename(fileName, '.md').split('.')[1]; + const simplifiedFileName = fileName.replace(`.${localeId}`, ''); + if (addedMd.indexOf(simplifiedFileName) > -1) return; + + const isLocalized = ['zh-CN', 'en-US'].indexOf(localeId) > -1; + if (isLocalized) { + content += `\n '${simplifiedFileName}': {` + + '\n localized: true,' + + `\n 'zh-CN': require('${path.relative(path.dirname(outputFile), fileName.replace(localeId, 'zh-CN'))}'),` + + `\n 'en-US': require('${path.relative(path.dirname(outputFile), fileName.replace(localeId, 'en-US'))}'),` + + '\n },'; + addedMd.push(simplifiedFileName); + } else { + const requirePath = path.relative(path.dirname(outputFile), fileName); + content += `\n '${simplifiedFileName}': require('${requirePath}'),`; + } + }); + content += '\n};'; + + fs.writeFile(outputFile, content); +}; diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index 74d38cf1f0..ddf5b79ecc 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -37,7 +37,8 @@ export default class ComponentDoc extends React.Component { const { doc, location } = this.props; const scrollTo = location.query.scrollTo; const { description, meta } = doc; - const demos = (demosList[meta.fileName] || []) + const locale = this.context.intl.locale; + const demos = (demosList[meta.fileName.replace(`.${locale}`, '')] || []) .filter((demoData) => !demoData.meta.hidden); const expand = this.state.expandAll; @@ -66,7 +67,6 @@ export default class ComponentDoc extends React.Component { 'code-box-expand-trigger-active': expand, }); - const locale = this.context.intl.locale; const jumper = demos.map((demo) => { const title = demo.meta.title; const localizeTitle = typeof title === 'object' ? diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index 950a4746f1..bce3deffc5 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -13,6 +13,7 @@ import componentsList from '../../../_data/react-components'; export default class Header extends React.Component { static contextTypes = { router: React.PropTypes.object.isRequired, + intl: React.PropTypes.object.isRequired, } constructor(props) { @@ -82,9 +83,13 @@ export default class Header extends React.Component { let activeMenuItem = routes[1].path || 'home'; activeMenuItem = activeMenuItem === 'components' ? 'docs/react' : activeMenuItem; - const options = Object.keys(componentsList).map(key => componentsList[key]) - .filter(({ meta }) => /^component/.test(meta.fileName)) - .map(({ meta }) => { + const locale = this.context.intl.locale; + const options = Object.keys(componentsList).map((key) => { + const value = componentsList[key]; + return value.localized ? value[locale] : value; + }).filter(({ meta }) => { + return /^component/.test(meta.fileName); + }).map(({ meta }) => { const pathSnippet = meta.fileName.split('/')[1]; const url = `/components/${pathSnippet}`; return ( diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index 96ed7fdbd5..665bd8aa94 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -52,7 +52,7 @@ export default class MainContent extends React.Component { {item.chinese}, ]; const disabled = item.disabled; - const url = item.fileName.replace(/(\/index)?\.md$/i, ''); + const url = item.fileName.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, ''); const child = !item.link ? {text} diff --git a/site/entry/utils.js b/site/entry/utils.js index dabfdcb433..758d79d7d0 100644 --- a/site/entry/utils.js +++ b/site/entry/utils.js @@ -1,3 +1,4 @@ +/* eslint-disable react/prefer-stateless-function, react/no-multi-comp */ import React from 'react'; import { IndexRedirect } from 'react-router'; import MainContent from '../component/MainContent'; @@ -15,10 +16,15 @@ function fileNameToPath(fileName) { return snippets[snippets.length - 1]; } -function getMenuItems(data) { +function getMenuItems(data, locale) { const menuMeta = Object.keys(data) .map((key) => data[key]) - .map((file) => file.meta); + .map((file) => { + if (file.localized) { + return file[locale].meta; + } + return file.meta; + }); const menuItems = {}; menuMeta.sort((a, b) => { @@ -41,17 +47,27 @@ function getMenuItems(data) { } export function generateContainer(data) { - const menuItems = getMenuItems(data); - return (props) => { - return ( - - ); + return class containerWrapper extends React.Component { + static contextTypes = { + intl: React.PropTypes.object, + } + + render() { + const locale = this.context.intl.locale; + const menuItems = getMenuItems(data, locale); + return ( + + ); + } }; } export function generateIndex(data) { - const menuItems = getMenuItems(data); - const firstChild = menuItems.topLevel.topLevel.filter((item) => !item.disabled)[0]; + const menuItems = getMenuItems(data, 'zh-CN'); // 以中文版配置为准 + const firstChild = menuItems.topLevel.topLevel.filter((item) => { + return !item.disabled; + })[0]; + return ( @@ -71,12 +87,26 @@ function getDoc(data, props) { } export function getChildrenWrapper(data) { - return function childrenWrapper(props) { - const doc = getDoc(data, props); - const hasDemos = demosList[doc.meta.fileName]; - return !hasDemos ? -
    : - ; + return class childrenWrapper extends React.Component { + static contextTypes = { + intl: React.PropTypes.object, + } + + render() { + const props = this.props; + const trimedPathname = props.location.pathname.replace(/^\//, ''); + const processedPathname = pathToFile[trimedPathname] || trimedPathname; + const rawDoc = data[`${processedPathname}.md`] || + data[`${processedPathname}/index.md`]; + + const locale = this.context.intl.locale; + const doc = rawDoc.localized ? rawDoc[locale] : rawDoc; + + const hasDemos = demosList[doc.meta.fileName.replace(`.${locale}`, '')]; + return !hasDemos ? +
    : + ; + } }; } From 2fe4a49182ac2bac2ec1f08a836e74d99316eb64 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 22 Apr 2016 14:52:19 +0800 Subject: [PATCH 0846/1555] docs: translate the documentation of Button to English --- components/button/demo/basic.md | 6 -- components/button/demo/button-group.md | 115 +++++++++++++------------ components/button/demo/disabled.md | 47 +++++----- components/button/demo/icon.md | 36 ++++---- components/button/demo/loading.md | 28 +++--- components/button/demo/size.md | 24 +++--- components/button/index.en-US.md | 34 +++++++- components/button/index.zh-CN.md | 14 ++- 8 files changed, 174 insertions(+), 130 deletions(-) diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index c0e3b400b7..af283c35ae 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -34,9 +34,3 @@ ReactDOM.render( mountNode ); ```` - -```css -#components-button-demo-basic .ant-btn { - margin-right: 8px; -} -``` diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md index f5a1756892..597b10d118 100644 --- a/components/button/demo/button-group.md +++ b/components/button/demo/button-group.md @@ -1,68 +1,79 @@ --- order: 5 -title: 按钮组合 +title: + zh-CN: 按钮组合 + en-US: Button Group --- +## zh-CN + 可以将多个 `Button` 放入 `Button.Group` 的容器中。 通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。 +## en-US + +If we put several `Button` into `Button.Group`, they will become a button group. + +Set `size` as `large` or `small` or nothing, we will get large/small/defualt button group respectively. + ````jsx import { Button, Icon } from 'antd'; const ButtonGroup = Button.Group; -ReactDOM.render(
    -

    基本组合

    - - - - - - - - - - - - - - - +ReactDOM.render( +
    +

    Basic

    + + + + + + + + + + + + + + + -

    带图标按钮组合

    - - - - - - + + + + - - - - - - - - - - - - - -
    , mountNode); +

    Size

    + + + + + + + + + + + + +
    , + mountNode +); +>>>>>>> docs: translate the documentation of Button to English ```` - +``` diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md index e855cbc3b7..cfac515d24 100644 --- a/components/button/demo/disabled.md +++ b/components/button/demo/disabled.md @@ -1,32 +1,35 @@ --- order: 3 -title: 不可用 +title: + zh-CN: 不可用状态 + en-US: Disabled --- +## zh-CN + 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。 +## en-US + +Set `disabled` to `Button`, and then it will be disabled. + ````jsx import { Button } from 'antd'; -ReactDOM.render(
    - - -
    - - -
    - - -
    - - -
    -, mountNode); +ReactDOM.render( +
    + + +
    + + +
    + + +
    + + +
    , + mountNode +); ```` - - diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md index c7e8424f44..aba8a79372 100644 --- a/components/button/demo/icon.md +++ b/components/button/demo/icon.md @@ -1,25 +1,29 @@ --- order: 1 -title: 图标按钮 +title: + zh-CN: 图标按钮 + en-US: Icon --- +## zh-CN + `Button` 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。 +## en-US + +`Button` works fine with `Icon`, just set `icon` property or put `Icon` component in `Button` + ````jsx -import { Button } from 'antd'; +import { Button, Icon } from 'antd'; -ReactDOM.render(
    - -
    - -
    , mountNode); +ReactDOM.render( +
    + +
    + + +
    , + mountNode +); ```` - - diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index e590f8ce47..5e94e5a438 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -1,10 +1,18 @@ --- order: 4 -title: 加载中 +title: + zh-CN: 加载中状态 + en-US: Loading --- +## zh-CN + 添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。 +## en-US + +Set `loading` to `Button`, and then it will become loading button. + ````jsx import { Button } from 'antd'; @@ -25,20 +33,17 @@ const App = React.createClass({ return (
    -
    ); @@ -47,10 +52,3 @@ const App = React.createClass({ ReactDOM.render(, mountNode); ```` - - diff --git a/components/button/demo/size.md b/components/button/demo/size.md index 2623ad7734..b7149e8965 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -1,24 +1,28 @@ --- order: 2 -title: 按钮尺寸 +title: + zh-CN: 按钮尺寸 + en-US: Size --- +## zh-CN + 按钮有大、中、小三种尺寸。 通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。 +## en-US + +Thers are large button, default button and small button in antd. + +To get large/small button, just set `size` as `large`/`small`. If nothing is provided to `size`, we will get default button. + ````jsx import { Button } from 'antd'; ReactDOM.render(
    - - - + + +
    , mountNode); ```` - - diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 0db32fefdf..0eb36ac50e 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -1,8 +1,34 @@ --- category: Components -chinese: 按钮 -type: 基本 -english: Button +type: Basic +title: Button --- -TBD +To trigger an operation. + +## Occasion + +A button means an operation(or a series of operations). Click a button will trigger corresponding business logic. + +## API + +To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. + +Property | Description | Type | Default +-----|-----|-----|------ +type | can be set as `primary` `ghost` or nothing | string | - +htmlType | to set the original `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` +icon | set the icon of button, see: Icon component | string | - +shape | can be set as `circle` `circle-outline` or nothing | string | - +size | can be set as `small` `large` or nothing | string | `default` +loading | to set the loading status of button | boolean | false +onClick | set the handler to handle `click` event | function | - + +`` will be rendered into ``, and all the properties which are not listed above will be transfered to `` 最终会被渲染为 ``，并且除了上表中的属性，其它属性都会直接传到 ``。 + + From ba64ebbca8626abfc6cbec223c0d5df9fb49f70e Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 22 Apr 2016 14:53:33 +0800 Subject: [PATCH 0847/1555] site: fix bugs --- site/component/Article/index.jsx | 4 +-- site/component/ComponentDoc/index.jsx | 6 ++--- site/component/Header/index.jsx | 6 ++--- site/component/MainContent/index.jsx | 37 ++++++++++++++------------- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx index 5dd1e9a59f..f7d0e9bf59 100644 --- a/site/component/Article/index.jsx +++ b/site/component/Article/index.jsx @@ -9,8 +9,8 @@ export default class Article extends React.Component { this.componentDidUpdate(); } componentDidUpdate() { - const { chinese, english } = this.props.content.meta; - utils.setTitle(`${chinese || english} - Ant Design`); + const { title, chinese, english } = this.props.content.meta; + utils.setTitle(`${title || chinese || english} - Ant Design`); const links = Array.apply(null, document.querySelectorAll('.outside-link.internal')); if (links.length === 0) { return; diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx index ddf5b79ecc..39d743f574 100644 --- a/site/component/ComponentDoc/index.jsx +++ b/site/component/ComponentDoc/index.jsx @@ -23,8 +23,8 @@ export default class ComponentDoc extends React.Component { this.componentDidUpdate(); } componentDidUpdate() { - const { chinese, english } = this.props.doc.meta; - utils.setTitle(`${chinese} ${english} - Ant Design`); + const { title, subtitle, chinese, english } = this.props.doc.meta; + utils.setTitle(`${subtitle || chinese || ''} ${title || english} - Ant Design`); } handleExpandToggle = () => { @@ -89,7 +89,7 @@ export default class ComponentDoc extends React.Component {
    -

    {meta.english} {meta.chinese}

    +

    {meta.title || meta.english} {meta.subtitle || meta.chinese}

    { utils.jsonmlToComponent( location.pathname, diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx index bce3deffc5..bed8ef954a 100644 --- a/site/component/Header/index.jsx +++ b/site/component/Header/index.jsx @@ -93,9 +93,9 @@ export default class Header extends React.Component { const pathSnippet = meta.fileName.split('/')[1]; const url = `/components/${pathSnippet}`; return ( - ); }); diff --git a/site/component/MainContent/index.jsx b/site/component/MainContent/index.jsx index 665bd8aa94..a1ade47f5f 100644 --- a/site/component/MainContent/index.jsx +++ b/site/component/MainContent/index.jsx @@ -40,17 +40,17 @@ export default class MainContent extends React.Component { } fileNameToPath(fileName) { - const snippets = fileName.replace(/(\/index)?\.md$/i, '').split('/'); + const snippets = fileName.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').split('/'); return snippets[snippets.length - 1]; } generateMenuItem(isTop, item) { const key = this.fileNameToPath(item.fileName); const text = isTop ? - item.chinese || item.english : [ - {item.english}, - {item.chinese}, - ]; + item.chinese || item.english : [ + { item.title || item.english }, + { item.subtitle || item.chinese } + ]; const disabled = item.disabled; const url = item.fileName.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, ''); const child = !item.link ? @@ -75,20 +75,21 @@ export default class MainContent extends React.Component { generateSubMenuItems(obj) { const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true)); const itemGroups = Object.keys(obj).filter(this.isNotTopLevel) - .sort((a, b) => { - return config.typeOrder[a] - config.typeOrder[b]; - }) - .map((type, index) => { - const groupItems = obj[type].sort((a, b) => { - return a.english.charCodeAt(0) - b.english.charCodeAt(0); - }).map(this.generateMenuItem.bind(this, false)); + .sort((a, b) => { + return config.typeOrder[a] - config.typeOrder[b]; + }) + .map((type, index) => { + const groupItems = obj[type].sort((a, b) => { + return (a.title || a.english).charCodeAt(0) - + (b.title || b.english).charCodeAt(0); + }).map(this.generateMenuItem.bind(this, false)); - return ( - - {groupItems} - - ); - }); + return ( + + { groupItems } + + ); + }); return [...topLevel, ...itemGroups]; } From 5909438ed32ba4baf89c19f772796a5913fda9e9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 25 Apr 2016 11:04:56 +0800 Subject: [PATCH 0848/1555] docs: update translation --- components/button/demo/button-group.md | 4 ++-- components/button/demo/disabled.md | 2 +- components/button/demo/icon.md | 8 ++++++-- components/button/demo/loading.md | 2 +- components/button/demo/size.md | 4 ++-- components/button/index.en-US.md | 2 +- 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md index 597b10d118..6529f5b8ef 100644 --- a/components/button/demo/button-group.md +++ b/components/button/demo/button-group.md @@ -13,9 +13,9 @@ title: ## en-US -If we put several `Button` into `Button.Group`, they will become a button group. +Buttons can be grouped by placing multiple `Button` components into a `Button.Group`. -Set `size` as `large` or `small` or nothing, we will get large/small/defualt button group respectively. +The `size` can be set to `large`, `small` or left unset resulting in a default size. ````jsx import { Button, Icon } from 'antd'; diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md index cfac515d24..f91903e592 100644 --- a/components/button/demo/disabled.md +++ b/components/button/demo/disabled.md @@ -11,7 +11,7 @@ title: ## en-US -Set `disabled` to `Button`, and then it will be disabled. +To mark a button as disabled, add the `disabled` property to the `Button`. ````jsx import { Button } from 'antd'; diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md index aba8a79372..3fcbf6c18f 100644 --- a/components/button/demo/icon.md +++ b/components/button/demo/icon.md @@ -7,11 +7,15 @@ title: ## zh-CN -`Button` 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。 +当需要在 `Button` 内嵌入 `Icon` 时，可以设置 `icon` 属性，或者直接在 `Button` 内使用 `Icon` 组件。 + +如果想控制 `Icon` 具体的位置，只能直接使用 `Icon` 组件，而非 `icon` 属性。 ## en-US -`Button` works fine with `Icon`, just set `icon` property or put `Icon` component in `Button` +`Button` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Button` + +If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property. ````jsx import { Button, Icon } from 'antd'; diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index 5e94e5a438..1ecbb1cc96 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -11,7 +11,7 @@ title: ## en-US -Set `loading` to `Button`, and then it will become loading button. +A loading indicator can be added to a button by setting the `loading` property on the `Button`. ````jsx import { Button } from 'antd'; diff --git a/components/button/demo/size.md b/components/button/demo/size.md index b7149e8965..087c7ffadf 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -13,9 +13,9 @@ title: ## en-US -Thers are large button, default button and small button in antd. +Ant Design supports a default button size as well as a large and small size. -To get large/small button, just set `size` as `large`/`small`. If nothing is provided to `size`, we will get default button. +If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size. ````jsx import { Button } from 'antd'; diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 0eb36ac50e..df83222620 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -24,7 +24,7 @@ size | can be set as `small` `large` or nothing | string | `default` loading | to set the loading status of button | boolean | false onClick | set the handler to handle `click` event | function | - -`` will be rendered into ``, and all the properties which are not listed above will be transfered to `` will be rendered into ``, and all the properties which are not listed above will be transferred to the `