mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 05:29:37 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'ant/develop-0.10.0' into feature-spin

Browse Source
This commit is contained in:
KgTong 2015-10-28 19:33:45 +08:00
commit 2e67eae9dd
20 changed files with 99 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -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)

10
README-zh_CN.md
View File

@ -19,11 +19,21 @@
## 示例
### 使用全部组件
```jsx
import { Datepicker } from 'antd';
ReactDOM.render(<Datepicker />, mountNode);
```
### 按需使用
```jsx
import "antd/lib/index.css"; // 只需在页面入口模块引用一次
import Datepicker from 'antd/lib/datepicker';
ReactDOM.render(<Datepicker />, mountNode);
```
## 链接
- [首页](http://ant.design/)

10
README.md
View File

@ -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(<Datepicker />, 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(<Datepicker />, mountNode);
```
## Links
- [Home page](http://ant.design/)

8
components/badge/index.jsx
View File

@ -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 {
<sup className={prefixCls + '-dot'}></sup>
</span>;
}
let count = this.state.count;
let count = this.props.count;
if (!count) {
return cloneElement(this.props.children);
} else {
count = count >= 100 ? '99+' : count;
return (
<span className={prefixCls} title={this.state.count} {...this.props}>
<span className={prefixCls} title={count} {...this.props}>
{this.props.children}
<sup className={prefixCls + '-count'}>{count}</sup>
</span>

17
components/button/button.jsx
View File

@ -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>;
}
}
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() {},
};

6
components/button/demo/loading.md
View File

@ -22,13 +22,13 @@ var App = React.createClass({
},
render() {
return <div>
<Button type="primary" size="large" loading>
<Button type="primary" size="large" loading={true}>
加载中
</Button>
<Button type="primary" loading="true">
<Button type="primary" loading={true}>
加载中
</Button>
<Button type="primary" size="small" loading>
<Button type="primary" size="small" loading={true}>
加载中
</Button>
<br />

14
components/button/index.md
View File

@ -29,3 +29,17 @@ loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，
onClick | `click` 事件的 handler | Function | `function() {}`
- `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
### IE8 border radius support
Ant Design 视觉上采用渐进降级的方案，在 IE8 下圆角按钮将降级为直角。
如果强烈需要圆角按钮，我们提供了 [css3pie](http://css3pie.com/) 的兼容方案。
使用时只需在 html 头部加入以下代码即可。
```html
<!--[if IE 8]>
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
<![endif]-->
```

11
components/modal/demo/custom.md → components/modal/demo/async.md
View File

@ -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({
<Modal title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
@ -53,5 +56,5 @@ var Test = React.createClass({
}
});
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-custom'));
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-async'));
````

3
components/modal/demo/basic.md
View File

@ -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 <div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="第一个 Modal" visible={this.state.visible}
confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
onOk={this.handleOk} onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>

35
components/modal/index.jsx
View File

@ -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({
<Button key="confirm"
type="primary"
size="large"
loading={this.state.confirmLoading}
loading={props.confirmLoading}
onClick={this.handleOk}>
确定
</Button>
];
let footer = props.footer || defaultFooter;
let visible = this.state.visible;
return <Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={visible} mousePosition={mousePosition} />;
visible={props.visible} mousePosition={mousePosition} />;
}
});

117
components/table/demo/ajax-props.md
View File

@ -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 <div>
<Table rowSelection={rowSelection} columns={columns} dataSource={this.state.dataSource} />
<button className="ant-btn ant-btn-primary" onClick={this.refresh}>
重新加载数据
</button>
&nbsp;
<button className="ant-btn" onClick={this.changeAndRefresh}>
加载 city=hz 的数据
</button>
</div>;
}
});
ReactDOM.render(<Test />, document.getElementById('components-table-demo-ajax-props'));
````

7
components/table/demo/ajax.md
View File

@ -80,12 +80,15 @@ var Test = React.createClass({
data: {
city: 'hz'
}
})
}),
pagination: {
current: 1
}
});
},
render() {
return <div>
<Table columns={columns} dataSource={this.state.dataSource} />
<Table columns={columns} dataSource={this.state.dataSource} pagination={this.state.pagination} />
<Button type="primary" onClick={this.refresh}>
重新加载数据
</Button>

6
components/table/demo/expand.md
View File

@ -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(

12
package.json
View File

@ -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",

3
site/templates/layout.html
View File

@ -15,6 +15,9 @@
<link rel="stylesheet" href="{{static_url('../dist/demo.css')}}">
<link rel="stylesheet" href="{{static_url('style.css')}}">
<link rel="stylesheet" href="{{static_url('tomorrow.css')}}">
<!--[if IE 8]>
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
<![endif]-->
<script>
(function (con) {
'use strict';

2
spec/colors.md
View File

@ -257,7 +257,7 @@ let TintShadeTool = React.createClass({
<span>加黑</span>
<div style={{width: 360, display: 'inline-block', verticalAlign: 'middle', position: 'relative', top: -1, margin: '0 8px'}}>
<Slider value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} step={5} />
<div style={{backgroundColor:'#81D4F9', width: 2, height: 4, position: 'absolute', top: 10, fontSize: 12, textAlign: 'center', left: 200}}></div>
<div style={{backgroundColor:'#81D4F9', width: 2, height: 4, position: 'absolute', top: 10, fontSize: 12, textAlign: 'center', left: 180}}></div>
</div>
<span>加白</span>
</div>

2
style/components/button.less
View File

@ -47,6 +47,7 @@
content: "\e610";
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
@ -62,6 +63,7 @@
top: 50%;
margin-top: -6px;
opacity: 1;
visibility: visible;
}
}

8
style/components/datepicker/Calendar.less
View File

@ -83,10 +83,11 @@
&-input-wrap {
padding: 8px;
border-bottom: 1px solid #e9e9e9;
}
&-input {
.input();
border: 0;
width: 100%;
cursor: auto;
}
@ -230,11 +231,6 @@
display: inline-block;
text-align: center;
margin: 0 10px;
&:hover {
cursor: pointer;
color: #23c0fa;
}
}
.@{calendar-prefix-cls}-ok-btn {

3
style/components/datepicker/Picker.less
View File

@ -43,7 +43,4 @@
&-container-open .@{calendar-prefix-cls} {
display: block;
}
&-open &-input {
.active();
}
}

3
style/mixins/button.less
View File

@ -86,6 +86,9 @@
.user-select(none);
.transition(all .3s @ease-in-out);
transform: translate3d(0, 0, 0);
// Fix for ie8 border-radius
// http://css3pie.com/documentation/known-issues/#z-index
position: relative\0;
> .@{iconfont-css-prefix} {
line-height: 1;