diff --git a/CHANGELOG.md b/CHANGELOG.md index b1ee540eac..6c07403ad7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ --- +## 0.10.0 `developing` + +计划和推进:https://github.com/ant-design/ant-design/issues/276 + + ## 0.9.2 `2015-10-26` * Tooltip 的 title 为空时不展示浮层。[9b53117](9b5311791e73270c7c16a602ac74dd59719a5f76) diff --git a/README-zh_CN.md b/README-zh_CN.md index 2236c66cc5..d2f53dab24 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -19,11 +19,21 @@ ## 示例 +### 使用全部组件 + ```jsx import { Datepicker } from 'antd'; ReactDOM.render(, mountNode); ``` +### 按需使用 + +```jsx +import "antd/lib/index.css"; // 只需在页面入口模块引用一次 +import Datepicker from 'antd/lib/datepicker'; +ReactDOM.render(, mountNode); +``` + ## 链接 - [首页](http://ant.design/) diff --git a/README.md b/README.md index 3e0bbfdda2..d22d6262d0 100644 --- a/README.md +++ b/README.md @@ -15,11 +15,21 @@ An enterprise-class UI design language and React-based implementation. ## Usage example +### Use all components + ```jsx import { Datepicker } from 'antd'; ReactDOM.render(, mountNode); ``` +### Use on demand + +```jsx +import "antd/lib/index.css"; // only need to import once in entry module +import Datepicker from 'antd/lib/datepicker'; +ReactDOM.render(, mountNode); +``` + ## Links - [Home page](http://ant.design/) diff --git a/components/badge/index.jsx b/components/badge/index.jsx index d4ccb5f783..133955f00d 100644 --- a/components/badge/index.jsx +++ b/components/badge/index.jsx @@ -4,10 +4,6 @@ const prefixCls = 'ant-badge'; class AntBadge extends React.Component { constructor(props) { super(props); - - this.state = { - count: props.count - }; } render() { @@ -17,13 +13,13 @@ class AntBadge extends React.Component { ; } - let count = this.state.count; + let count = this.props.count; if (!count) { return cloneElement(this.props.children); } else { count = count >= 100 ? '99+' : count; return ( - + {this.props.children} {count} diff --git a/components/button/button.jsx b/components/button/button.jsx index 352cfa9f56..2e7247678d 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -1,5 +1,6 @@ import React from 'react'; import rcUtil from 'rc-util'; +import { findDOMNode } from 'react-dom'; const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/; const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); @@ -24,6 +25,11 @@ function insertSpace(child) { } export default class Button extends React.Component { + componentDidMount() { + if (window && window.PIE) { + window.PIE.attach(findDOMNode(this)); + } + } render() { const props = this.props; const {type, shape, size, onClick, className, htmlType, children, ...others} = props; @@ -51,6 +57,17 @@ 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, + onClick: React.PropTypes.func, + loading: React.PropTypes.bool, + className: React.PropTypes.string, +}; + Button.defaultProps = { onClick() {}, }; diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index 711fe4c008..8586cb5092 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -22,13 +22,13 @@ var App = React.createClass({ }, render() { return
- - -
diff --git a/components/button/index.md b/components/button/index.md index 44163c0143..8c56ba45f7 100644 --- a/components/button/index.md +++ b/components/button/index.md @@ -29,3 +29,17 @@ loading | 设置按钮载入状态,存在为 `true`,不存在为 `false`, onClick | `click` 事件的 handler | Function | `function() {}` - `` 最终会被渲染为 ``,并且除了上表中的属性,其它属性都会直接传到 `` + + +### IE8 border radius support + +Ant Design 视觉上采用渐进降级的方案,在 IE8 下圆角按钮将降级为直角。 +如果强烈需要圆角按钮,我们提供了 [css3pie](http://css3pie.com/) 的兼容方案。 + +使用时只需在 html 头部加入以下代码即可。 + +```html + +``` diff --git a/components/modal/demo/custom.md b/components/modal/demo/async.md similarity index 78% rename from components/modal/demo/custom.md rename to components/modal/demo/async.md index d5bd2993ad..7e4ffb31d5 100644 --- a/components/modal/demo/custom.md +++ b/components/modal/demo/async.md @@ -2,7 +2,7 @@ - order: 1 -点击确定后异步关闭对话框。 +点击确定后异步关闭对话框,例如提交表单。 --- @@ -26,11 +26,13 @@ var Test = React.createClass({ }, handleOk() { this.setState({ - ModalText: '对话框将在两秒后关闭' + ModalText: '对话框将在两秒后关闭', + confirmLoading: true }); setTimeout(() => { this.setState({ - visible: false + visible: false, + confirmLoading: false }); }, 2000); }, @@ -46,6 +48,7 @@ var Test = React.createClass({

{this.state.ModalText}

@@ -53,5 +56,5 @@ var Test = React.createClass({ } }); -ReactDOM.render( , document.getElementById('components-modal-demo-custom')); +ReactDOM.render( , document.getElementById('components-modal-demo-async')); ```` diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md index ffe81b9a6c..bca6cd1c42 100644 --- a/components/modal/demo/basic.md +++ b/components/modal/demo/basic.md @@ -22,7 +22,6 @@ var App = React.createClass({ handleOk() { console.log('点击了确定'); this.setState({ - confirmLoading: false, visible: false }); }, @@ -35,7 +34,7 @@ var App = React.createClass({ return
+ onOk={this.handleOk} onCancel={this.handleCancel}>

对话框的内容

对话框的内容

对话框的内容

diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 9956cc04e2..0a9f1e83fe 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -4,8 +4,7 @@ import { Dom } from 'rc-util'; import confirm from './confirm'; import { Button } from '../button'; -function noop() { -} +function noop() {} let mousePosition; let mousePositionEventBinded; @@ -18,14 +17,9 @@ let AntModal = React.createClass({ onCancel: noop, width: 520, transitionName: 'zoom', - maskAnimation: 'fade' - }; - }, - - getInitialState() { - return { + maskAnimation: 'fade', confirmLoading: false, - visible: this.props.visible + visible: false }; }, @@ -34,27 +28,9 @@ let AntModal = React.createClass({ }, handleOk() { - this.setState({ - confirmLoading: true - }); this.props.onOk(); }, - componentWillReceiveProps(nextProps) { - let newState = {}; - if ('visible' in nextProps) { - newState.visible = nextProps.visible; - // 隐藏后默认去除按钮 loading 效果 - if (!nextProps.visible) { - newState.confirmLoading = false; - } - } - if ('confirmLoading' in nextProps) { - newState.confirmLoading = !!nextProps.confirmLoading; - } - this.setState(newState); - }, - componentDidMount() { if (mousePositionEventBinded) { return; @@ -85,15 +61,14 @@ let AntModal = React.createClass({ ]; let footer = props.footer || defaultFooter; - let visible = this.state.visible; return ; + visible={props.visible} mousePosition={mousePosition} />; } }); diff --git a/components/table/demo/ajax-props.md b/components/table/demo/ajax-props.md deleted file mode 100644 index 37eae1cebc..0000000000 --- a/components/table/demo/ajax-props.md +++ /dev/null @@ -1,117 +0,0 @@ -# 配置动态加载数据 - -- order: 7 - -远程读取的表格是**更为常见的模式**,下面的表格使用了 `dataSource` 对象和远程数据源绑定和适配,并具有筛选、排序等功能以及页面 loading 效果。 - -**注意,此示例是静态数据模拟,数据并不准确,请打开网络面板查看请求。** - ---- - -````jsx -var Table = antd.Table; - -var columns = [{ - title: '姓名', - dataIndex: 'name', - filters: [{ - text: '姓李的', - value: '李' - }, { - text: '姓胡的', - value: '胡' - }] -}, { - title: '年龄', - dataIndex: 'age', - sorter: true -}, { - title: '住址', - dataIndex: 'address' -}]; - -var dataSource = new Table.DataSource({ - url: "/components/table/demo/data.json", - resolve: function(result) { - return result.data; - }, - 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 (var key in filters) { - params[key] = filters[key]; - } - console.log('请求参数:', params); - return params; - } -}); - - -var rowSelection = { - getCheckboxProps: function (value) { - return { - defaultValue: value.name === '胡彦祖ajax2', // 配置默认勾选的列 - disabled: value.name === '李大嘴ajax3' // 配置无法勾选的列 - } - }, - onSelect: function(record, selected, selectedRows) { - console.log(record, selected, selectedRows); - }, - onSelectAll: function(selected, selectedRows) { - console.log(selected, selectedRows); - } -}; - -var Test = React.createClass({ - getInitialState() { - return { - dataSource: dataSource - }; - }, - refresh() { - this.setState({ - dataSource: dataSource.clone() - }); - }, - changeAndRefresh() { - // 可以修改原来的 dataSource 再发请求 - this.setState({ - dataSource: dataSource.clone({ - data: { - city: 'hz' - } - }) - }); - }, - render() { - return
- - -   - - ; - } -}); - - -ReactDOM.render(, document.getElementById('components-table-demo-ajax-props')); -```` diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 111cb360dc..29f109838c 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -80,12 +80,15 @@ var Test = React.createClass({ data: { city: 'hz' } - }) + }), + pagination: { + current: 1 + } }); }, render() { return
-
+
diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md index da58f96d7d..c1fedddbab 100644 --- a/components/table/demo/expand.md +++ b/components/table/demo/expand.md @@ -25,9 +25,9 @@ var columns = [ ]; var data = [ - {name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌,今年32岁,住在西湖区湖底公园1号。'}, - {name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖,今年42岁,住在西湖区湖底公园2号。'}, - {name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴,今年32岁,住在西湖区湖底公园3号。'} + {key: 1, name: '胡彦斌', age: 32, address: '西湖区湖底公园1号', description: '我是胡彦斌,今年32岁,住在西湖区湖底公园1号。'}, + {key: 2, name: '吴彦祖', age: 42, address: '西湖区湖底公园2号', description: '我是吴彦祖,今年42岁,住在西湖区湖底公园2号。'}, + {key: 3, name: '李大嘴', age: 32, address: '西湖区湖底公园3号', description: '我是李大嘴,今年32岁,住在西湖区湖底公园3号。'} ]; ReactDOM.render( diff --git a/package.json b/package.json index 6964c20180..19d1035a54 100644 --- a/package.json +++ b/package.json @@ -34,17 +34,17 @@ "license": "MIT", "dependencies": { "css-animation": "1.1.x", - "gregorian-calendar": "~3.0.0", + "gregorian-calendar": "~3.1.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", - "rc-animate": "2.0.x", + "rc-animate": "~2.0.0", "rc-calendar": "4.0.0-alpha6", "rc-checkbox": "~1.1.1", - "rc-collapse": "~1.3.0", + "rc-collapse": "~1.4.0", "rc-dialog": "~5.1.0", "rc-dropdown": "~1.4.0", "rc-form-validation": "~2.4.7", - "rc-input-number": "~2.1.2", + "rc-input-number": "~2.3.0", "rc-menu": "~4.6.2", "rc-notification": "~1.1.0", "rc-pagination": "~1.1.0", @@ -53,9 +53,9 @@ "rc-radio": "~2.0.0", "rc-select": "~5.0.0", "rc-slider": "~1.5.0", - "rc-steps": "~1.3.2", + "rc-steps": "~1.4.0", "rc-switch": "~1.2.0", - "rc-table": "~3.2.0", + "rc-table": "~3.3.0", "rc-tabs": "~5.4.3", "rc-tooltip": "~3.0.1", "rc-tree": "~0.16.2", diff --git a/site/templates/layout.html b/site/templates/layout.html index c07f346e5b..98f98678e1 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -15,6 +15,9 @@ +