From 9ebbe8b82a43850c901fb07ad20b29de51fdf608 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Aug 2015 11:36:04 +0800 Subject: [PATCH 01/27] code box id hash --- site/templates/code.html | 4 ++-- site/theme.js | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/site/templates/code.html b/site/templates/code.html index 54b2848ed2..1b34175e14 100644 --- a/site/templates/code.html +++ b/site/templates/code.html @@ -1,11 +1,11 @@ -
+
{{ post.html }}
- {{ post.title }} + {{ post.title }}
{{ post.meta.description }} diff --git a/site/theme.js b/site/theme.js index 24c6b01a53..ac8a9872e0 100644 --- a/site/theme.js +++ b/site/theme.js @@ -105,6 +105,9 @@ module.exports = function(nico) { }, rootDirectoryIs: function(directory, rootDirectory) { return directory.split('/')[0] === rootDirectory; + }, + removeCodeBoxIdPrefix: function(id) { + return id.split('-').slice(2).join('-'); } }; From 164e7c3c3072e6686f40fbb88e05deacbc01afbb Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Aug 2015 16:53:41 +0800 Subject: [PATCH 02/27] update markdown style --- static/style.css | 6 ++++++ style/themes/default/custom.less | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/static/style.css b/static/style.css index 6834f9b2e8..85c963b7f4 100644 --- a/static/style.css +++ b/static/style.css @@ -558,6 +558,12 @@ footer ul li > a { padding-left: 8px; } +.markdown > ol li { + list-style: decimal; + margin-left: 20px; + padding-left: 8px; +} + .markdown code { margin: 0 3px; } diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index 772e8ca2e9..90a49ce3a9 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -10,8 +10,8 @@ // ------ Base & Require ------ @body-background : #fff; -@font-family : "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif; -@code-family : "PT Mono", Menlo, "Courier New", monospace; +@font-family : "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Microsoft YaHei","微软雅黑",Arial,sans-serif; +@code-family : "PT Mono",Menlo,Consolas,"Courier New",monospace; @text-color : #666; @font-size-base : 12px; @line-height-base : 1.5; From d0e7da6c7c4ab112ac267c9be4a07903919de98a Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Aug 2015 17:07:31 +0800 Subject: [PATCH 03/27] update some demo text --- components/enter-animation/demo/basic.md | 2 ++ components/enter-animation/demo/enter-data.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 0af8cd4dd7..f566425ef6 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -4,6 +4,8 @@ 默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。 +刷新页面看效果。 + --- ````jsx diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md index aa645c4336..441b6b8d06 100644 --- a/components/enter-animation/demo/enter-data.md +++ b/components/enter-animation/demo/enter-data.md @@ -4,6 +4,8 @@ 通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。 +刷新页面看效果。 + --- ````jsx From 0e58688dc242927370d94a6f703a02ee4258007b Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 4 Aug 2015 18:42:41 +0800 Subject: [PATCH 04/27] fix adjustOrientOnCalendarOverflow --- components/datepicker/index.jsx | 10 +++++++--- package.json | 4 ++-- style/components/datepicker/Picker.less | 4 ++++ 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index 228a38e4f1..a427146c36 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -10,7 +10,7 @@ import DateTimeFormat from 'gregorian-calendar-format'; // 和顶部文案保持一致 import Locale from 'gregorian-calendar-format/lib/locale/zh-cn'; Locale.shortMonths = ['1月', '2月', '3月', '4月', '5月', '6月', - '7月', '8月', '9月', '10月', '11月', '12月']; + '7月', '8月', '9月', '10月', '11月', '12月']; // 以下两行代码 // 给没有初始值的日期选择框提供本地化信息 @@ -42,7 +42,8 @@ export default React.createClass({ format: 'yyyy-MM-dd', placeholder: '请选择日期', transitionName: 'slide-up', - onSelect: function () {} + onSelect: function () { + } }; }, handleChange(v) { @@ -69,7 +70,10 @@ export default React.createClass({ disabled={this.props.disabled} trigger={} calendar={calendar} - adjustOrientOnCalendarOverflow={true} + adjustOrientOnCalendarOverflow={{ + x: true, + y: false + }} formatter={new DateTimeFormat(this.props.format)} value={this.state.value} prefixCls="ant-calendar-picker" diff --git a/package.json b/package.json index 19e31d9b6d..f912ded94e 100644 --- a/package.json +++ b/package.json @@ -36,8 +36,8 @@ "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "is-equal-shallow": "~0.1.3", - "object-assign": "~3.0.0", - "rc-calendar": "~3.11.0", + "object-assign": "3.x", + "rc-calendar": "~3.12.3", "rc-checkbox": "~1.0.6", "rc-collapse": "~1.2.3", "rc-dialog": "~4.4.0", diff --git a/style/components/datepicker/Picker.less b/style/components/datepicker/Picker.less index 4d64aaa56e..21f971a8da 100644 --- a/style/components/datepicker/Picker.less +++ b/style/components/datepicker/Picker.less @@ -11,6 +11,10 @@ position: relative; display: inline-block; + &-input { + outline: none; + } + &-icon { position: absolute; -webkit-user-select: none; From 10ff094b4620478a8de36a7c47d55fbd2eb0d13a Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 4 Aug 2015 18:44:07 +0800 Subject: [PATCH 05/27] typo --- components/datepicker/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index a427146c36..9fda2e8f2f 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -42,7 +42,7 @@ export default React.createClass({ format: 'yyyy-MM-dd', placeholder: '请选择日期', transitionName: 'slide-up', - onSelect: function () { + onSelect() { } }; }, From df7aa84191305cdc1f92d79845a425cee11cf0f9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Aug 2015 20:22:45 +0800 Subject: [PATCH 06/27] fix datepicker style in form item --- style/components/datepicker/Calendar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/components/datepicker/Calendar.less b/style/components/datepicker/Calendar.less index 69d3b38bbf..1be6170e4f 100644 --- a/style/components/datepicker/Calendar.less +++ b/style/components/datepicker/Calendar.less @@ -4,7 +4,6 @@ line-height: 34px; text-align: center; user-select: none; - -webkit-user-select: none; border-bottom: 1px solid #e9e9e9; a:hover { @@ -209,6 +208,7 @@ &-footer-btn { text-align: center; display: block; + line-height: 42px; } &-footer > div { From 7ba8e08b5a815b4c9f8aac9262440ad8ad57d0ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=B8=E8=BE=BE?= Date: Wed, 5 Aug 2015 01:42:37 +0800 Subject: [PATCH 07/27] =?UTF-8?q?=E5=8A=A0=E5=85=A5Table=20=E8=BF=9C?= =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81=E7=94=B1=E5=A4=96?= =?UTF-8?q?=E7=95=8C=E5=8F=91=E8=B5=B7=E8=AF=B7=E6=B1=82=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/demo/advance-ajax.md | 76 +++++++++++++++++++++++++++ components/table/demo/nopagination.md | 2 +- components/table/index.jsx | 34 +++++++++--- 3 files changed, 105 insertions(+), 7 deletions(-) create mode 100644 components/table/demo/advance-ajax.md diff --git a/components/table/demo/advance-ajax.md b/components/table/demo/advance-ajax.md new file mode 100644 index 0000000000..23b432eeda --- /dev/null +++ b/components/table/demo/advance-ajax.md @@ -0,0 +1,76 @@ +# 外界触发表格刷新 + +- order: 8 + +查询页面大量使用表格，当删除某条目后需要刷新。可直接传入DataSource实例，然后调用其fetch方法刷新表格。 + +**注意，请打开console调试fetch方法** + +--- + +````jsx +var Table = antd.Table; +var DataSource = Table.DataSource; + +var columns = [{ + title: '姓名', + dataIndex: 'name', + filters: [{ + text: '姓李的', + value: '李' + }, { + text: '姓胡的', + value: '胡' + }] +}, { + title: '年龄', + dataIndex: 'age', + sorter: true +}, { + title: '住址', + dataIndex: 'address' +}]; + +function resolve(result) { + return result.data; +} + +var dataSource = new DataSource({ + url: "/components/table/demo/data.json", + resolve: function(result) { + return result.data; + }, + // 和后台接口返回的分页数据进行适配 + getPagination: function(result) { + return { + total: result.totalCount, + pageSize: result.pageSize + } + }, + // 和后台接口接收的参数进行适配 + // 参数里提供了分页、筛选、排序的信息 + getParams: function(pagination, filters, sorter) { + console.log('getParams 的参数是：', pagination, filters, sorter); + var params = { + pageSize: pagination.pageSize, + currentPage: pagination.current, + sortField: sorter.field, + sortOrder: sorter.order + }; + for (let key in filters) { + params[key] = filters[key]; + } + console.log('请求参数：', params); + return params; + } +}); + +// 可供外部调用fetch接口刷新表格 +dataSource.fetch(); + +// 请打开console调试fetch方法 +window.dataSource = dataSource; + +React.render( +, document.getElementById('components-table-demo-advance-ajax')); +```` diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md index 1d11a40bbe..1feabbf1e3 100644 --- a/components/table/demo/nopagination.md +++ b/components/table/demo/nopagination.md @@ -1,6 +1,6 @@ # 不显示分页 -- order: 8 +- order: 9 传入 pagination 为 false 即可。 diff --git a/components/table/index.jsx b/components/table/index.jsx index e271d88d35..47c6407859 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -15,7 +15,17 @@ function defaultResolve(data) { return data || []; } -export default React.createClass({ +class DataSource { + constructor(config) { + this.url = config.url || ""; + this.resolve = config.resolve || defaultResolve; + this.getParams = config.getParams || noop; + this.getPagination = config.getPagination || noop; + this.fetch = noop; + } +} + +var AntTable = React.createClass({ getInitialState() { return { // 减少状态 @@ -75,11 +85,19 @@ export default React.createClass({ }, getRemoteDataSource() { - return objectAssign({ - resolve: defaultResolve, - getParams: noop, - getPagination: noop - }, this.props.dataSource); + // 判断传入DataSource类型 + var dataSource = this.props.dataSource; + if ( dataSource.constructor === DataSource ) { + // 当传入 dataSource Instance 时，对外部DataSource暴露fetch接口 + dataSource.fetch = this.fetch; + return dataSource; + } else { + return objectAssign({ + resolve: defaultResolve, + getParams: noop, + getPagination: noop + }, this.props.dataSource); + } }, toggleSortOrder(order, column) { @@ -450,3 +468,7 @@ export default React.createClass({ ; } }); + +AntTable.DataSource = DataSource; + +export default AntTable; \ No newline at end of file From b97d01f288770f1e5332ea26e084b314eaed47c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=B8=E8=BE=BE?= Date: Wed, 5 Aug 2015 01:44:21 +0800 Subject: [PATCH 08/27] =?UTF-8?q?=E9=81=B5=E5=BE=AA=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E8=A6=81=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 47c6407859..827576b856 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -17,7 +17,7 @@ function defaultResolve(data) { class DataSource { constructor(config) { - this.url = config.url || ""; + this.url = config.url || ''; this.resolve = config.resolve || defaultResolve; this.getParams = config.getParams || noop; this.getPagination = config.getPagination || noop; @@ -471,4 +471,4 @@ var AntTable = React.createClass({ AntTable.DataSource = DataSource; -export default AntTable; \ No newline at end of file +export default AntTable; From 9fcae54f84deae200e9fb07299d16dfbc17f1fa0 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 5 Aug 2015 10:12:12 +0800 Subject: [PATCH 09/27] format code style and add some words --- components/validation/demo/basic.md | 41 ++++++++++++------------- components/validation/demo/customize.md | 14 +++++---- components/validation/index.md | 2 +- 3 files changed, 28 insertions(+), 29 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index 271534b8d2..82b3a26b05 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -54,7 +54,7 @@ var Form = React.createClass({ }; }, - validateStyle(item, hasFeedback=true) { + renderValidateStyle(item, hasFeedback=true) { var formData = this.state.formData; var status = this.state.status; @@ -93,7 +93,7 @@ var Form = React.createClass({ callback(); } else { setTimeout(function () { - if (value === 'yiminghe') { + if (value === 'Jasonwood') { callback([new Error('抱歉，该用户名已被占用。')]); } else { callback(); @@ -103,14 +103,11 @@ var Form = React.createClass({ }, checkPass(rule, value, callback) { - if (this.state.formData.passwd) { - this.refs.validation.forceValidate(['rePasswd']); - } callback(); }, checkPass2(rule, value, callback) { - if (value !== this.state.formData.passwd) { + if (value && value !== this.state.formData.passwd) { callback('两次输入密码不一致！'); } else { callback(); @@ -123,13 +120,13 @@ var Form = React.createClass({ return (
- +
-
+
- + {status.name.isValidating ?
正在校验中...
: null} {status.name.errors ?
{status.name.errors.join(',')}
: null} @@ -140,9 +137,9 @@ var Form = React.createClass({
-
- - +
+ + {status.email.errors ?
{status.email.errors.join(',')}
: null}
@@ -152,7 +149,7 @@ var Form = React.createClass({
-
+
+
+ + {status.passwd.errors ?
{status.passwd.errors.join(',')}
: null}
@@ -197,13 +194,13 @@ var Form = React.createClass({
-
- + - + {status.rePasswd.errors ?
{status.rePasswd.errors.join(', ')}
: null}
@@ -214,7 +211,7 @@ var Form = React.createClass({
-
+
@@ -227,7 +224,7 @@ var Form = React.createClass({
    - 重 置 + 重 置
diff --git a/components/validation/demo/customize.md b/components/validation/demo/customize.md index be71cf5ce7..d2e31184d3 100644 --- a/components/validation/demo/customize.md +++ b/components/validation/demo/customize.md @@ -4,6 +4,8 @@ 密码校验实例。 +这里使用了 validation 的 `forceValidate(fields, callback)` 方法，在对第一次输入的密码进行校验时会触发二次密码的校验。 + --- ````jsx @@ -145,14 +147,14 @@ var Form = React.createClass({ return ( - +
-
+
- + {status.pass.errors ?
{status.pass.errors.join(',')}
: null}
@@ -165,13 +167,13 @@ var Form = React.createClass({
-
+
- + {status.rePass.errors ?
{status.rePass.errors.join(', ')}
: null}
@@ -185,7 +187,7 @@ var Form = React.createClass({
    - 重 置 + 重 置
diff --git a/components/validation/index.md b/components/validation/index.md index 9fe0001496..e55e1580ac 100644 --- a/components/validation/index.md +++ b/components/validation/index.md @@ -53,7 +53,7 @@ - `type` : 声明校验的值类型（如 string email），这样就会使用默认提供的规则进行校验，更多详见 [type](https://github.com/yiminghe/async-validator#user-content-type)； - `required`: 是否必填； - `pattern`: 声明校验正则表达式； -- `min` / `max`: 最小值、最大值声明； +- `min` / `max`: 最小值、最大值声明（对于 string 和 array 来说，针对的是其长度 length。）； - `len`: 字符长度； - `enum`: 枚举值，对应 type 值为 `enum`，例如 `role: {type: "enum", enum: ['A', 'B', 'C']}`； - `whitespace`: 是否允许空格， `true` 为允许； From cfaabbb825ad71aa9de5c61ebd387819be1e7784 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Aug 2015 10:58:21 +0800 Subject: [PATCH 10/27] Improve dataSource implementation 1. move advance-ajax to ajax demo 2. remove plain object dataSource support 3. use propTypes over judgement of constructor --- components/table/demo/advance-ajax.md | 76 --------------------------- components/table/demo/ajax.md | 15 ++++-- components/table/index.jsx | 21 +++----- components/table/index.md | 7 +-- 4 files changed, 23 insertions(+), 96 deletions(-) delete mode 100644 components/table/demo/advance-ajax.md diff --git a/components/table/demo/advance-ajax.md b/components/table/demo/advance-ajax.md deleted file mode 100644 index 23b432eeda..0000000000 --- a/components/table/demo/advance-ajax.md +++ /dev/null @@ -1,76 +0,0 @@ -# 外界触发表格刷新 - -- order: 8 - -查询页面大量使用表格，当删除某条目后需要刷新。可直接传入DataSource实例，然后调用其fetch方法刷新表格。 - -**注意，请打开console调试fetch方法** - ---- - -````jsx -var Table = antd.Table; -var DataSource = Table.DataSource; - -var columns = [{ - title: '姓名', - dataIndex: 'name', - filters: [{ - text: '姓李的', - value: '李' - }, { - text: '姓胡的', - value: '胡' - }] -}, { - title: '年龄', - dataIndex: 'age', - sorter: true -}, { - title: '住址', - dataIndex: 'address' -}]; - -function resolve(result) { - return result.data; -} - -var dataSource = new DataSource({ - url: "/components/table/demo/data.json", - resolve: function(result) { - return result.data; - }, - // 和后台接口返回的分页数据进行适配 - getPagination: function(result) { - return { - total: result.totalCount, - pageSize: result.pageSize - } - }, - // 和后台接口接收的参数进行适配 - // 参数里提供了分页、筛选、排序的信息 - getParams: function(pagination, filters, sorter) { - console.log('getParams 的参数是：', pagination, filters, sorter); - var params = { - pageSize: pagination.pageSize, - currentPage: pagination.current, - sortField: sorter.field, - sortOrder: sorter.order - }; - for (let key in filters) { - params[key] = filters[key]; - } - console.log('请求参数：', params); - return params; - } -}); - -// 可供外部调用fetch接口刷新表格 -dataSource.fetch(); - -// 请打开console调试fetch方法 -window.dataSource = dataSource; - -React.render(
-, document.getElementById('components-table-demo-advance-ajax')); -```` diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 613ea5cda6..839cfc0dc7 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -10,6 +10,7 @@ ````jsx var Table = antd.Table; + var columns = [{ title: '姓名', dataIndex: 'name', @@ -33,7 +34,7 @@ function resolve(result) { return result.data; } -var dataSource = { +var dataSource = new Table.DataSource({ url: "/components/table/demo/data.json", resolve: function(result) { return result.data; @@ -61,8 +62,14 @@ var dataSource = { console.log('请求参数：', params); return params; } -}; +}); -React.render(
-, document.getElementById('components-table-demo-ajax')); +function fetch() { + dataSource.fetch(); +} + +React.render(
+
+ +, document.getElementById('components-table-demo-ajax')); ```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 827576b856..90e30767b5 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -21,6 +21,7 @@ class DataSource { this.resolve = config.resolve || defaultResolve; this.getParams = config.getParams || noop; this.getPagination = config.getPagination || noop; + this.headers = config.headers || {}; this.fetch = noop; } } @@ -52,6 +53,10 @@ var AntTable = React.createClass({ }; }, + propTypes: { + dataSource: React.PropTypes.instanceOf(DataSource) + }, + componentWillReceiveProps(nextProps) { if (('pagination' in nextProps) && nextProps.pagination !== false) { this.setState({ @@ -85,19 +90,9 @@ var AntTable = React.createClass({ }, getRemoteDataSource() { - // 判断传入DataSource类型 - var dataSource = this.props.dataSource; - if ( dataSource.constructor === DataSource ) { - // 当传入 dataSource Instance 时，对外部DataSource暴露fetch接口 - dataSource.fetch = this.fetch; - return dataSource; - } else { - return objectAssign({ - resolve: defaultResolve, - getParams: noop, - getPagination: noop - }, this.props.dataSource); - } + let dataSource = this.props.dataSource; + dataSource.fetch = this.fetch; + return dataSource; }, toggleSortOrder(order, column) { diff --git a/components/table/index.md b/components/table/index.md index 8d9e6d2c6c..a2b8b7e823 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -38,17 +38,18 @@ var dataSource = [{ **远程数据模式**是更常见的业务场景，是一次只从服务端读取一页的数据放在前端，执行筛选、排序、切换页码等操作时均向后台发送请求，后台返回当页的数据和相关分页信息。 -通过指定表格的数据源 `dataSource` 为一个对象如下。 +通过指定表格的数据源 `dataSource` 为一个 DataSource 的实例如下。 ```jsx -var dataSource = { +var dataSource = new Table.DataSource({ url: '/api/users', resolve: function(result) { return result.data; }, getPagination: function(result) {} getParams: function(pagination, filters, sorter) {} -}; +}); +
``` From 6d2cf352c3469f74cd144f1219237ddf608b963b Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Aug 2015 11:04:00 +0800 Subject: [PATCH 11/27] return promise object from fetch --- components/table/demo/ajax.md | 4 +++- components/table/index.jsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 839cfc0dc7..445e60bb44 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -65,7 +65,9 @@ var dataSource = new Table.DataSource({ }); function fetch() { - dataSource.fetch(); + dataSource.fetch().then(function() { + console.log('fetch done'); + }); } React.render(
diff --git a/components/table/index.jsx b/components/table/index.jsx index 90e30767b5..6b9e526046 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -349,7 +349,7 @@ var AntTable = React.createClass({ } // remote 模式使用 this.dataSource let dataSource = this.getRemoteDataSource(); - jQuery.ajax({ + return jQuery.ajax({ url: dataSource.url, data: dataSource.getParams.apply(this, this.prepareParamsArguments(state)) || {}, headers: dataSource.headers, From 76677a2a2af8607e6587d0b623b815110eb4e852 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 5 Aug 2015 14:47:47 +0800 Subject: [PATCH 12/27] update the interactive method for email validation --- components/validation/demo/basic.md | 59 +++++++++++++++++++---------- 1 file changed, 39 insertions(+), 20 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index 82b3a26b05..839ea8b59e 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -2,9 +2,9 @@ - order: 0 -基本的表单校验栗子。 +基本的表单校验例子。 -每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating` `errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。 +每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。 表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。 @@ -50,7 +50,9 @@ var Form = React.createClass({ passwd: undefined, rePasswd: undefined, textarea: undefined - } + }, + isEmailOver: false, // email 是否输入完毕 + emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法 }; }, @@ -68,6 +70,20 @@ var Form = React.createClass({ return classes; }, + handleEmailInputBlur() { + this.setState({ + isEmailOver: true + }); + }, + + handleEmailInputFocus() { + if (this.state.isEmailOver) { + this.setState({ + emailValidateMethod: 'onChange' + }); + } + }, + handleReset(e) { this.refs.validation.reset(); this.setState(this.getInitialState()); @@ -76,6 +92,9 @@ var Form = React.createClass({ handleSubmit(e) { e.preventDefault(); + this.setState({ + isEmailOver: true + }); var validation = this.refs.validation; validation.validate((valid) => { if (!valid) { @@ -98,7 +117,7 @@ var Form = React.createClass({ } else { callback(); } - }, 1000); + }, 800); } }, @@ -122,7 +141,7 @@ var Form = React.createClass({
- +
@@ -135,11 +154,11 @@ var Form = React.createClass({
- +
-
- - +
+ + {status.email.errors ?
{status.email.errors.join(',')}
: null}
@@ -147,11 +166,11 @@ var Form = React.createClass({
- +
- @@ -165,7 +184,7 @@ var Form = React.createClass({
- +
@@ -180,9 +199,9 @@ var Form = React.createClass({
- +
-
+
@@ -192,9 +211,9 @@ var Form = React.createClass({
- +
-
+
-
- +
- + {status.textarea.errors ?
{status.textarea.errors.join(',')}
: null}
@@ -221,7 +240,7 @@ var Form = React.createClass({
-
+
    重 置 From 5a47d35d1ebd0cc60aa3529e2e9936172d81ee03 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 5 Aug 2015 16:56:41 +0800 Subject: [PATCH 13/27] fix: required label style has bug in ie --- style/components/form.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/style/components/form.less b/style/components/form.less index 6a6558206c..1de1117601 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -6,14 +6,12 @@ label { position: relative; &[required]:before { - position: absolute; display: inline-block; - left: ~"-5px \9"; // ie8-9 + margin-right: 4px; content: "*"; - color: @label-required-color; font-family: SimSun; font-size: @font-size-base; - .translate3d(-10px; 0; 0); + color: @label-required-color; } > .@{iconfont-css-prefix} { From 1d6f5a88ae9f4f0b030292aae34c701746087fb3 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Wed, 5 Aug 2015 17:54:19 +0800 Subject: [PATCH 14/27] remove the clear button of a text input control in IE10 and plus --- style/core/base.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style/core/base.less b/style/core/base.less index 419852ec77..eac808bfa2 100644 --- a/style/core/base.less +++ b/style/core/base.less @@ -41,6 +41,11 @@ ol { list-style: none; } +// Remove the clear button of a text input control in IE10+ +input::-ms-clear, input::-ms-reveal { + display: none; +} + // Links // -- TODO -- a { From 9a200ec782944ae5c9e46538b7d3a5d5af076b07 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Aug 2015 21:18:34 +0800 Subject: [PATCH 15/27] update text --- components/affix/index.md | 13 ++++++++++--- components/alert/index.md | 4 ++-- components/carousel/index.md | 5 ++++- components/notification/index.md | 6 +++++- components/tree/index.md | 6 +++++- components/upload/index.md | 6 ++++++ components/validation/index.md | 2 +- 7 files changed, 33 insertions(+), 9 deletions(-) diff --git a/components/affix/index.md b/components/affix/index.md index f9c572c7b2..89c2af0c05 100644 --- a/components/affix/index.md +++ b/components/affix/index.md @@ -1,14 +1,21 @@ # Affix - category: Components -- chinese: 固定 +- chinese: 固钉 --- +将页面元素钉在可视范围。 + +## 何时使用 + +当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 + +页面可视范围过小时，慎用此功能以免遮挡页面内容。 + ## API -属性如下 | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| -| offset | 达到指定偏移量后触发 | Number | 0 | +| offset | 达到指定偏移量后触发 | Number | 0 | diff --git a/components/alert/index.md b/components/alert/index.md index e2b5ec4a69..2662d9efcf 100644 --- a/components/alert/index.md +++ b/components/alert/index.md @@ -9,8 +9,8 @@ ## 何时使用 -- 当系统需要向用户显示警告的信息时。 -- 始终展现，不会自动消失，用户可以点击关闭。 +- 当某个页面需要向用户显示警告的信息时。 +- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。 ## API diff --git a/components/carousel/index.md b/components/carousel/index.md index a0944e0a40..03c6bb4cc2 100644 --- a/components/carousel/index.md +++ b/components/carousel/index.md @@ -5,10 +5,13 @@ --- -旋转木马，轮播组件。 +旋转木马，一组轮播的区域。 ## 何时使用 +- 当有一组平级的内容。 +- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。 +- 常用于一组图片或卡片轮播。 ## API diff --git a/components/notification/index.md b/components/notification/index.md index 62727786be..9d27a255e0 100644 --- a/components/notification/index.md +++ b/components/notification/index.md @@ -9,7 +9,11 @@ ## 何时使用 -- 当系统需要在窗口右上角显示通知提醒信息时。 +在系统右上角显示通知提醒信息。经常用于以下情况： + +- 较为复杂的通知内容。 +- 带有交互的通知，给出用户下一步的行动点。 +- 系统主动推送。 ## API diff --git a/components/tree/index.md b/components/tree/index.md index 5853657c38..a21620d1ac 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -1,8 +1,12 @@ # Tree - category: Components -- chinese: 树形控件 +- chinese: 树 --- +树形控件。 +## 何时使用 + +文件夹、组织架构、生物分类、国家地区等等，人间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 diff --git a/components/upload/index.md b/components/upload/index.md index df9009aeeb..f46a33a5c8 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -5,4 +5,10 @@ --- +文件选择上传和拖拽上传控件。 +## 何时使用 + +- 当需要上传一个或一些文件时。 +- 当需要展现上传的进度时。 +- 当需要使用拖拽交互时。 diff --git a/components/validation/index.md b/components/validation/index.md index e55e1580ac..c13c6dc82b 100644 --- a/components/validation/index.md +++ b/components/validation/index.md @@ -10,7 +10,7 @@ ## 何时使用 -同表单结合使用，对表单域进行校验。 +同表单结合使用，对表单域进行校验，提供前台校验和后天实时反馈校验，并对表单错误提供有效信息提示。 ## API From 8b338e626a56187b5e4691c241fb84a3bbec2373 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Aug 2015 22:03:24 +0800 Subject: [PATCH 16/27] fix margin right --- components/form/demo/form-controls.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md index 9933fc74e3..0e9c34c96c 100644 --- a/components/form/demo/form-controls.md +++ b/components/form/demo/form-controls.md @@ -48,13 +48,13 @@ React.render(
From 2bccf59028e4d93a988222e1dc340fc81a9e765b Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 6 Aug 2015 08:59:00 +0800 Subject: [PATCH 17/27] correct typo --- components/validation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/validation/index.md b/components/validation/index.md index c13c6dc82b..e266f7b22d 100644 --- a/components/validation/index.md +++ b/components/validation/index.md @@ -10,7 +10,7 @@ ## 何时使用 -同表单结合使用，对表单域进行校验，提供前台校验和后天实时反馈校验，并对表单错误提供有效信息提示。 +同表单结合使用，对表单域进行校验，提供前台校验和后台实时反馈校验，并对表单错误提供有效信息提示。 ## API From 67a200ee302d8179c594063a72f338554c581228 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 12:06:05 +0800 Subject: [PATCH 18/27] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=81=94=E5=8A=A8?= =?UTF-8?q?=E7=9A=84=E9=80=89=E6=8B=A9=E6=A1=86,=20fix=20#115?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/select/demo/coordinate.md | 51 ++++++++++++++++++++++++++++ components/select/index.md | 3 +- 2 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 components/select/demo/coordinate.md diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md new file mode 100644 index 0000000000..a83588fb12 --- /dev/null +++ b/components/select/demo/coordinate.md @@ -0,0 +1,51 @@ +# 联动 + +- order: 6 + +省市联动是典型的例子。 + +--- + +````jsx +var Select = antd.Select; +var Option = Select.Option; + +var provinceData = ['浙江', '江苏']; +var cityData = { + '浙江': ['杭州', '宁波', '温州'], + '江苏': ['南京', '苏州', '镇江'] +}; + + +var App = React.createClass({ + getInitialState() { + return { + cities: cityData[provinceData[0]] + }; + }, + handleProvinceChange(value) { + this.setState({ + cities: cityData[value] + }); + }, + render() { + var provinceOptions = provinceData.map(function(province) { + return ; + }); + var cityOptions = this.state.cities.map(function(city) { + return ; + }); + return
+ +   + +
; + } +}); +React.render(, document.getElementById('components-select-demo-coordinate')); +```` + diff --git a/components/select/index.md b/components/select/index.md index 5456602134..d651f6305d 100644 --- a/components/select/index.md +++ b/components/select/index.md @@ -24,7 +24,8 @@ | 参数 | 说明 | 类型 | 默认值 | |----------|----------------|----------|--------------| -| value | 指定默认选中的条目 | string/Array | 无 | +| value | 指定选中的条目 | string/Array | 无 | +| defaultValue | 指定默认选中的条目 | string/Array | 无 | | multiple | 支持多选 | | false | | filterOption | 是否根据输入项进行筛选 | | true | | tags | 可以把随意输入的条目作为tag，输入项不需要与下拉选项匹配 | |false | From 3446d87c9c7a01871e06a195b623f015fe47e1eb Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 12:23:49 +0800 Subject: [PATCH 19/27] Add defaultValue for datepicker --- components/datepicker/demo/basic.md | 2 +- components/datepicker/demo/size.md | 1 - components/datepicker/index.jsx | 1 + components/datepicker/index.md | 1 + 4 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/datepicker/demo/basic.md b/components/datepicker/demo/basic.md index d1f1ba75be..068b24431d 100644 --- a/components/datepicker/demo/basic.md +++ b/components/datepicker/demo/basic.md @@ -11,6 +11,6 @@ var Datepicker = antd.Datepicker; React.render( - + , document.getElementById('components-datepicker-demo-basic')); ```` diff --git a/components/datepicker/demo/size.md b/components/datepicker/demo/size.md index 9dcf44390e..d42f89e549 100644 --- a/components/datepicker/demo/size.md +++ b/components/datepicker/demo/size.md @@ -7,7 +7,6 @@ --- ````jsx -// or require('antd/lib/datepicker'); var Datepicker = antd.Datepicker; React.render( diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index 9fda2e8f2f..7ffb397704 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -76,6 +76,7 @@ export default React.createClass({ }} formatter={new DateTimeFormat(this.props.format)} value={this.state.value} + defaultValue={this.props.defaultValue} prefixCls="ant-calendar-picker" onChange={this.handleChange}> Date: Thu, 6 Aug 2015 14:11:02 +0800 Subject: [PATCH 20/27] typo --- components/tree/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tree/index.md b/components/tree/index.md index a21620d1ac..c02e552414 100644 --- a/components/tree/index.md +++ b/components/tree/index.md @@ -9,4 +9,4 @@ ## 何时使用 -文件夹、组织架构、生物分类、国家地区等等，人间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 +文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用`树控件`可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 From 287c9ec5fd8850dc6c4aee78df9b722a4c41247a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 15:13:30 +0800 Subject: [PATCH 21/27] remove config global top demo of notification --- components/notification/demo/top.md | 26 -------------------------- 1 file changed, 26 deletions(-) delete mode 100644 components/notification/demo/top.md diff --git a/components/notification/demo/top.md b/components/notification/demo/top.md deleted file mode 100644 index 947145f260..0000000000 --- a/components/notification/demo/top.md +++ /dev/null @@ -1,26 +0,0 @@ -# 距离顶部距离 - -- order: 1 - -自定义通知框距离顶部的距离，在`config`方法里设置`top`的值， **只在初始化时设置有效** ，默认距离顶部`24px`。 - ---- - -````jsx -var notification = require('antd/lib/notification'); -notification.config({ - top: 100 -}); - -var openNotification = function() { - var args = { - message: "这是标题", - description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案", - }; - notification.open(args); -}; - -React.render( - -, document.getElementById('components-notification-demo-top')); -```` From 9963c4102908ed12125fc84009f2184037e2798b Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 15:19:45 +0800 Subject: [PATCH 22/27] improve code style --- components/notification/demo/basic.md | 7 +++---- components/notification/demo/with-btn-onclose.md | 7 +++---- components/notification/demo/with-btn.md | 7 +++---- components/notification/demo/with-icon.md | 7 +++---- components/notification/index.jsx | 9 ++------- 5 files changed, 14 insertions(+), 23 deletions(-) diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md index 16be5fdfb4..693372cd24 100644 --- a/components/notification/demo/basic.md +++ b/components/notification/demo/basic.md @@ -10,11 +10,10 @@ var notification = require('antd/lib/notification'); var openNotification = function() { - var args = { + notification.open({ message: "这是标题", description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案" - }; - notification.open(args); + }); }; React.render( @@ -22,4 +21,4 @@ React.render(
, document.getElementById('components-notification-demo-basic')); -```` \ No newline at end of file +```` diff --git a/components/notification/demo/with-btn-onclose.md b/components/notification/demo/with-btn-onclose.md index 93bfa83a10..38549b1ed2 100644 --- a/components/notification/demo/with-btn-onclose.md +++ b/components/notification/demo/with-btn-onclose.md @@ -21,19 +21,18 @@ var close = function() { var onClose = function() { // 默认按钮关闭时的业务处理 console.log("我被默认的关闭按钮关闭了！"); -} +}; var btn = ; var openNotification = function() { - var args = { + notification.open({ message: "这是标题", description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", btn: btn, key: key, onClose: onClose - }; - notification.open(args); + }); }; React.render( diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md index 8beec8288b..1e70d9f1bb 100644 --- a/components/notification/demo/with-btn.md +++ b/components/notification/demo/with-btn.md @@ -18,13 +18,12 @@ var close = function() { var btn = ; var openNotification = function() { - var args = { + notification.open({ message: "这是标题", description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", btn: btn, key: key - }; - notification.open(args); + }); }; React.render( @@ -32,4 +31,4 @@ React.render(
, document.getElementById('components-notification-demo-with-btn')); -```` \ No newline at end of file +```` diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index fae11d88d1..155a7fc894 100644 --- a/components/notification/demo/with-icon.md +++ b/components/notification/demo/with-icon.md @@ -2,7 +2,7 @@ - order: 2 -通知提醒框左侧有Icon图标。 +通知提醒框左侧有图标。 --- @@ -11,11 +11,10 @@ var notification = require('antd/lib/notification'); var openNotificationWithIcon = function(type) { return function(){ - var args = { + notification[type]({ message: "这是标题", description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案" - }; - notification[type](args); + }); }; }; diff --git a/components/notification/index.jsx b/components/notification/index.jsx index 6b045fca04..61e05b159d 100644 --- a/components/notification/index.jsx +++ b/components/notification/index.jsx @@ -3,8 +3,7 @@ import assign from 'object-assign'; import React from 'react'; let top = 24; - -var notificationInstance; +let notificationInstance; function getNotificationInstance() { notificationInstance = notificationInstance || Notification.newInstance({ @@ -41,9 +40,7 @@ function notice(args) { getNotificationInstance().notice({ content:
-

{args.message}

-

{args.description}

, duration: null, @@ -57,7 +54,6 @@ function notice(args) { getNotificationInstance().notice({ content:

{args.message}

-

{args.description}

, duration: null, @@ -69,7 +65,6 @@ function notice(args) { getNotificationInstance().notice({ content:

{args.message}

-

{args.description}

{args.btn} @@ -99,7 +94,7 @@ var api = { } }; -['success', 'info', 'warn', 'error'].forEach((type)=> { +['success', 'info', 'warn', 'error'].forEach((type) => { api[type] = (args) => { var newArgs = assign({}, args, { icon: type From a22e135a786ac539665734c0a65c98734e9280d7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 15:32:18 +0800 Subject: [PATCH 23/27] Add duration config for notification --- components/notification/demo/basic.md | 2 +- components/notification/demo/duration.md | 24 +++++++++++++++++++++++ components/notification/index.jsx | 25 +++++++++++++++--------- components/notification/index.md | 3 ++- 4 files changed, 43 insertions(+), 11 deletions(-) create mode 100644 components/notification/demo/duration.md diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md index 693372cd24..37fdbf1e98 100644 --- a/components/notification/demo/basic.md +++ b/components/notification/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -最简单的用法。 +最简单的用法，五秒后自动关闭。 --- diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md new file mode 100644 index 0000000000..a10c365475 --- /dev/null +++ b/components/notification/demo/duration.md @@ -0,0 +1,24 @@ +# 不自动消失 + +- order: 6 + +将 duration 配置为 null 即可。 + +--- + +````jsx +var notification = require('antd/lib/notification'); + +var openNotification = function() { + notification.open({ + message: "这是标题", + description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案", + duration: null + }); +}; + +React.render( + +, document.getElementById('components-notification-demo-duration')); +```` + diff --git a/components/notification/index.jsx b/components/notification/index.jsx index 61e05b159d..01fadb1360 100644 --- a/components/notification/index.jsx +++ b/components/notification/index.jsx @@ -7,16 +7,23 @@ let notificationInstance; function getNotificationInstance() { notificationInstance = notificationInstance || Notification.newInstance({ - prefixCls: 'ant-notification', - style: { - top: top, - right: 0 - } - }); + prefixCls: 'ant-notification', + style: { + top: top, + right: 0 + } + }); return notificationInstance; } function notice(args) { + let duration; + if (args.duration === undefined) { + duration = 5; + } else { + duration = args.duration; + } + if (args.icon) { let prefixCls = ' ant-notification-notice-content-icon-'; let iconClass = 'anticon anticon-'; @@ -43,7 +50,7 @@ function notice(args) {

{args.message}

{args.description}

, - duration: null, + duration: duration, closable: true, onClose: args.onClose, style: {} @@ -56,7 +63,7 @@ function notice(args) {

{args.message}

{args.description}

, - duration: null, + duration: duration, closable: true, onClose: args.onClose, style: {} @@ -70,7 +77,7 @@ function notice(args) { {args.btn}
, - duration: null, + duration: duration, closable: true, onClose: args.onClose, key: args.key, diff --git a/components/notification/index.md b/components/notification/index.md index 9d27a255e0..478f25d613 100644 --- a/components/notification/index.md +++ b/components/notification/index.md @@ -33,8 +33,9 @@ config 参数如下： | btn | 自定义关闭按钮 | React.Element | 无 | | key | 当前通知唯一标志 | String | 无 | | onClose | 点击默认关闭按钮时触发的回调函数 | Function | 无 | +| duration | 默认五秒后自动关闭，配置为 null 则不自动关闭 | Number | 5 | -还提供了一个全局配置方法： +还提供了一个全局配置方法，需要在调用前提前配置，一次有效。 - `notification.config(options)` From f8b19f3bc800f08520267604f4675e84deb4d513 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 15:42:03 +0800 Subject: [PATCH 24/27] update deps --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index f912ded94e..f608fb9ab3 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "rc-calendar": "~3.12.3", "rc-checkbox": "~1.0.6", "rc-collapse": "~1.2.3", - "rc-dialog": "~4.4.0", + "rc-dialog": "~4.5.0", "rc-dropdown": "~1.1.1", "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", @@ -49,13 +49,13 @@ "rc-pagination": "~1.1.0", "rc-progress": "~1.0.0", "rc-radio": "~2.0.0", - "rc-select": "~4.4.0", + "rc-select": "~4.5.1", "rc-slider": "~1.3.1", "rc-steps": "~1.1.4", "rc-switch": "~1.2.0", "rc-table": "~3.1.0", - "rc-tabs": "~5.2.0", - "rc-tooltip": "~2.4.0", + "rc-tabs": "~5.3.2", + "rc-tooltip": "~2.5.0", "rc-tree": "~0.10.0", "rc-util": "~2.0.3", "react-slick": "~0.6.4" From c2933a8e529dfd48db97e8f11408eecf9b55b33d Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 16:47:01 +0800 Subject: [PATCH 25/27] update tabs style --- components/tabs/demo/basic.md | 10 +++++----- components/tabs/demo/disabled.md | 6 +++--- components/tabs/demo/icon.md | 14 ++++++-------- components/tabs/demo/size.md | 6 +++--- components/tabs/demo/slide.md | 18 +++++++++--------- style/components/tabs.less | 16 ++++++++++++---- 6 files changed, 38 insertions(+), 32 deletions(-) diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index d979c79549..d6c1d4014f 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -默认选中第二项。 +默认选中第一项。 --- @@ -15,10 +15,10 @@ function callback(key) { } React.render( - - 选项卡一 - 选项卡二 - 选项卡三 + + 选项卡一内容 + 选项卡二内容 + 选项卡三内容 , document.getElementById('components-tabs-demo-basic')); ```` diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md index 13c1a96219..7b8ad27555 100644 --- a/components/tabs/demo/disabled.md +++ b/components/tabs/demo/disabled.md @@ -14,9 +14,9 @@ function callback(key) {} React.render( - 选项卡一 - 选项卡二 - 选项卡三 + 选项卡一 + 选项卡二 + 选项卡三 , document.getElementById('components-tabs-demo-disabled')); ```` diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md index 3084cc6337..782c7dc1fb 100644 --- a/components/tabs/demo/icon.md +++ b/components/tabs/demo/icon.md @@ -10,19 +10,17 @@ var Tabs = antd.Tabs; var TabPane = Tabs.TabPane; -function callback(key) {} - var tabContent = [ - tab 1, - tab 2, - tab 3, + 选项卡一, + 选项卡二, + 选项卡三, ]; React.render( - + 选项卡一 - 选项卡一 - 选项卡一 + 选项卡二 + 选项卡三 , document.getElementById('components-tabs-demo-icon')); ```` diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md index b1094419c7..e339251161 100644 --- a/components/tabs/demo/size.md +++ b/components/tabs/demo/size.md @@ -12,9 +12,9 @@ var TabPane = Tabs.TabPane; React.render( - 选项卡一 - 选项卡二 - 选项卡三 + 选项卡一内容 + 选项卡二内容 + 选项卡三内容 , document.getElementById('components-tabs-demo-size')); ```` diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md index 892572a9b2..ce1cc98657 100644 --- a/components/tabs/demo/slide.md +++ b/components/tabs/demo/slide.md @@ -14,15 +14,15 @@ function callback(key) {} React.render( - 选项卡一 - 选项卡二 - 选项卡三 - 选项卡四 - 选项卡五 - 选项卡六 - 选项卡七 - 选项卡八 - 选项卡九 + 选项卡一 + 选项卡二 + 选项卡三 + 选项卡四 + 选项卡五 + 选项卡六 + 选项卡七 + 选项卡八 + 选项卡九 , document.getElementById('components-tabs-demo-slide')); ```` diff --git a/style/components/tabs.less b/style/components/tabs.less index 7fa2ca390d..097642767d 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -34,15 +34,18 @@ width: 100%; position: relative; white-space: nowrap; - padding-right: 32px; - border-bottom: 1px solid #f3f3f3; + border-bottom: 1px solid #e9e9e9; margin-bottom: 15px; .clearfix; } + &-nav-container-scrolling { + padding-left: 32px; + padding-right: 32px; + } + &-tab-prev, &-tab-next { user-select: none; - -webkit-user-select: none; z-index: 2; margin-right: -2px; margin-top: 1px; @@ -79,6 +82,12 @@ } } + &-tab-btn-disabled { + cursor: default; + color: #ccc; + pointer-events: none; + } + &-tab-next { right: 2px; @@ -89,7 +98,6 @@ &-tab-prev { left: 0; - background: #fff; transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); &-icon:before { From 4d203b6e67e29845c3742daaa0f1b8bdb876c116 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 6 Aug 2015 16:49:54 +0800 Subject: [PATCH 26/27] add menu --- components/menu/demo/nav.md | 45 ++++++++++++ components/menu/demo/side.md | 41 +++++++++++ components/menu/index.jsx | 20 ++++++ components/menu/index.md | 42 +++++++++++ index.js | 4 +- package.json | 2 +- site/templates/code.html | 2 +- style/components/index.less | 1 + style/components/menu.less | 135 +++++++++++++++++++++++++++++++++++ 9 files changed, 288 insertions(+), 4 deletions(-) create mode 100644 components/menu/demo/nav.md create mode 100644 components/menu/demo/side.md create mode 100644 components/menu/index.jsx create mode 100644 style/components/menu.less diff --git a/components/menu/demo/nav.md b/components/menu/demo/nav.md new file mode 100644 index 0000000000..28371fdc3f --- /dev/null +++ b/components/menu/demo/nav.md @@ -0,0 +1,45 @@ +# 导航菜单 + +- order: 0 + +基本使用。 + +--- + +````jsx +var Menu = antd.Menu; +var MenuItem = Menu.Item; +var SubMenu = Menu.SubMenu; + +function handleClick(key) { + console.log('selected ' + key); +} + +var align={ + points:['lt','lb'] +}; + +React.render( + 导航一}> + 选项1 + 选项2 + 选项3 + 选项4 + + 导航二}> + 选项5 + 选项6 + 三级导航}> + 选项7 + 选项8 + + + 导航三}> + 选项9 + 选项10 + 选项11 + 选项12 + + +, document.getElementById('components-menu-demo-nav')); +```` diff --git a/components/menu/demo/side.md b/components/menu/demo/side.md new file mode 100644 index 0000000000..6a67248783 --- /dev/null +++ b/components/menu/demo/side.md @@ -0,0 +1,41 @@ +# 侧边菜单 + +- order: 1 + +基本使用。 + +--- + +````jsx +var Menu = antd.Menu; +var MenuItem = Menu.Item; +var SubMenu = Menu.SubMenu; + +function handleClick(key) { + console.log('selected ' + key); +} + +React.render( + 导航一}> + 选项1 + 选项2 + 选项3 + 选项4 + + 导航二}> + 选项5 + 选项6 + 三级导航}> + 选项7 + 选项8 + + + 导航三}> + 选项9 + 选项10 + 选项11 + 选项12 + + +, document.getElementById('components-menu-demo-side')); +```` diff --git a/components/menu/index.jsx b/components/menu/index.jsx new file mode 100644 index 0000000000..9b160bec41 --- /dev/null +++ b/components/menu/index.jsx @@ -0,0 +1,20 @@ +import Menu from 'rc-menu'; +import React from 'react'; + +const AntMenu = React.createClass({ + getDefaultProps(){ + return { + prefixCls: 'ant-menu' + }; + }, + + render(){ + return ; + } +}); + +AntMenu.Divider = Menu.Divider; +AntMenu.Item = Menu.Item; +AntMenu.SubMenu = Menu.SubMenu; + +export default AntMenu; diff --git a/components/menu/index.md b/components/menu/index.md index 1203b0074a..341c52e7a3 100644 --- a/components/menu/index.md +++ b/components/menu/index.md @@ -5,3 +5,45 @@ --- +## 何时使用 + +需要多级菜单时 + +```html + + 菜单项 + + 子菜单项 + + +``` + +## API + +### Menu props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|----------------|----------|--------------| +| horizontal | 是否横向菜单 | boolean | false | +| vertical | 是否侧向菜单 | boolean | false | +| multiple | 支持多选 | | false | +| selectedKeys | 选中的菜单项 key 数组 | | | +| onSelect | 被选中时调用，参数为选中的 menuitem key 值 | function | 无 | +| onDeselect | 取消选中时调用，参数为选中的 menuitem key 值，仅在multiple生效 | function | 无 | +| onClick | 点击 menuitem 调用此函数，参数为点击的 menuitem key 值 | function | 无 | +| style | 根节点样式 | object | | | + +### Menu.Item props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|----------------|----------|--------------| +| disabled | 是否禁用 | Boolean | false | +| key | item 的唯一标志 | String | | | + +### Menu.SubMenu props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|----------------|----------|--------------| +| title | 子菜单项值 | String or React.Element | | +| align | 子菜单的对齐配置 | object | {points:['lt','rt']} 弹出子菜单的 left top 和子菜单项的 right top 对齐 | +| children | (MenuItem or SubMenu)[] | 子菜单的菜单项 | | | diff --git a/index.js b/index.js index 09a12847f1..ea73f8e8d6 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,6 @@ var antd = { Carousel: require('./components/carousel'), Tabs: require('./components/tabs'), Modal: require('./components/modal'), - Menu: require('rc-menu'), Dropdown: require('./components/dropdown'), Progress: require('./components/progress'), Popover: require('./components/popover'), @@ -31,7 +30,8 @@ var antd = { Notification: require('./components/notification'), Alert: require('./components/alert'), Validation: require('./components/validation'), - Tree: require('./components/Tree') + Tree: require('./components/Tree'), + Menu: require('./components/Menu') }; module.exports = antd; diff --git a/package.json b/package.json index f912ded94e..1f1119559a 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "rc-dropdown": "~1.1.1", "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", - "rc-menu": "~3.4.2", + "rc-menu": "~3.5.0", "rc-notification": "~1.1.0", "rc-pagination": "~1.1.0", "rc-progress": "~1.0.0", diff --git a/site/templates/code.html b/site/templates/code.html index 1b34175e14..9dfe12ea72 100644 --- a/site/templates/code.html +++ b/site/templates/code.html @@ -8,6 +8,6 @@ {{ post.title }}
{{ post.meta.description }} - +
diff --git a/style/components/index.less b/style/components/index.less index 89dfcf42c7..b570a8feb1 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -29,3 +29,4 @@ @import "tree"; @import "carousel/slick"; @import "carousel/slick-theme"; +@import "menu"; diff --git a/style/components/menu.less b/style/components/menu.less new file mode 100644 index 0000000000..c01902937b --- /dev/null +++ b/style/components/menu.less @@ -0,0 +1,135 @@ +@import "../mixins/index"; + +@menuPrefixCls: ~"@{css-prefix}menu"; + +.@{menuPrefixCls} { + outline: none; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + z-index: 99999; + border: 1px solid #d9d9d9; + box-shadow: 0 0 4px #d9d9d9; + border-radius: 3px; + color: #666; + + &-item-group-list { + margin: 0; + padding: 0; + } + + &-item-group-title { + color: #999; + line-height: 1.5; + padding: 8px 10px; + border-bottom: 1px solid #dedede; + } + + &-item-active, &-submenu-active { + background-color: #eaf8fe; + } + + &-item-selected { + background-color: #eaf8fe; + } + + & > li&-submenu { + padding: 0; + } + + &-submenu-lt-lb > .@{menuPrefixCls} { + top: 100%; + left: 0; + margin-top: 4px; + } + + &-submenu-lt-rt > .@{menuPrefixCls} { + top: 0; + left: 100%; + margin-left: 4px; + } + + &-item,&-submenu-title { + margin: 0; + position: relative; + display: block; + padding: 7px 7px 7px 16px; + white-space: nowrap; + + // Disabled state sets text to gray and nukes hover/tab effects + &.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled { + color: #777 !important; + } + } + & > &-item-divider { + height: 1px; + margin: 1px 0; + overflow: hidden; + padding: 0; + line-height: 0; + background-color: #e5e5e5; + } + + &-submenu { + position: relative; + + > .@{menuPrefixCls} { + display: none; + position: absolute; + min-width: 160px; + background-color: #fff; + } + + &-open { + > .@{menuPrefixCls} { + display: block; + } + } + } + + .@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item { + .anticon { + width: 14px; + height: 14px; + margin-right: 8px; + top: -1px; + } + } + + &-horizontal { + background-color: #F3F5F7; + border: none; + border-bottom: 1px solid transparent; + border-bottom: 1px solid #d9d9d9; + box-shadow: none; + + & > .@{menuPrefixCls}-item , & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { + padding: 15px 20px; + } + + & > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item { + float: left; + border-bottom: 2px solid transparent; + + &-active { + border-bottom: 2px solid #2db7f5; + background-color: #F3F5F7; + color: #2baee9; + } + } + + &:after { + content: "\20"; + display: block; + height: 0; + clear: both; + } + } + + &-vertical { + padding: 12px 0; + & > .@{menuPrefixCls}-item , & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title { + padding: 12px 8px 12px 24px; + } + } +} From 8a4c6c37be8f27a4d769e33168599bd664079baf Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 17:42:13 +0800 Subject: [PATCH 27/27] code style --- components/notification/demo/onclose.md | 6 +++--- components/notification/index.jsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/notification/demo/onclose.md b/components/notification/demo/onclose.md index e4bb9e805a..c994656f00 100644 --- a/components/notification/demo/onclose.md +++ b/components/notification/demo/onclose.md @@ -11,14 +11,14 @@ var notification = require('antd/lib/notification'); var close = function() { console.log("我被默认的关闭按钮关闭了！"); -} +}; var openNotification = function() { var args = { message: "这是标题", description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案", onClose: close - }; + }; notification.open(args); }; @@ -27,4 +27,4 @@ React.render(
, document.getElementById('components-notification-demo-onclose')); -```` \ No newline at end of file +```` diff --git a/components/notification/index.jsx b/components/notification/index.jsx index 01fadb1360..55e5ada85f 100644 --- a/components/notification/index.jsx +++ b/components/notification/index.jsx @@ -19,7 +19,7 @@ function getNotificationInstance() { function notice(args) { let duration; if (args.duration === undefined) { - duration = 5; + duration = 500; } else { duration = args.duration; }