mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-20 12:28:10 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
afc163 2015-11-25 18:55:52 +08:00
commit 9468b24b62
123 changed files with 685 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

@ -12,6 +12,7 @@
"experimentalObjectRestSpread": true
},
"plugins": [
"markdown",
"react",
"babel"
],
@ -30,9 +31,7 @@
"no-undef": 2,
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
"babel/object-shorthand": 0,
"react/jsx-boolean-value": 0,
"react/jsx-no-duplicate-props": 2,
"react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
"react/sort-comp": 0,
"react/wrap-multilines": 0,
"react/no-multi-comp": 0,

28
CHANGELOG.md
View File

@ -4,6 +4,30 @@
---
## 0.10.2 `2015-11-25`
- Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
- 优化 Badge 动画效果。
- 修复以下问题：
- 文本域的表单校验无法重置。
- 设置 Upload 的 `multiple` 为 `true` 时，未显示每个文件的上传进度。
- Breadcrumb 配合 Router 的时候如果没有 `breadcrumbName` 会抛错。
- InputNumber 同时设置 `size` `className` 时会有冲突。
## 0.10.1 `2015-11-20`
- 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
- 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。
- Form 和 Input 目录分离，`import { Form, Input } from 'ant/lib/form'` 的引用方式被废弃。
现在可以 `import Form from 'ant/lib/form'` 和 `import Input from 'ant/lib/input'`。
原有的 `import { Form, Input } from 'antd'` 则不受影响。
- 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。
## 0.10.0 `2015-11-20`
- 全面兼容 `react@0.14.x`。
@ -31,7 +55,7 @@
#### 组件变更
- Table
- 支持单选。[演示](/components/table/#demo-row-selection-radio-props)
- 支持单选。[演示](http://ant.design/components/table/#demo-row-selection-radio-props)
- 选择模式支持默认选中和不可用效果。[演示](/components/table/#demo-row-selection-props)
- 列支持了 `colSpan` 和 `rowSpan` 配置。[演示](/components/table/#demo-colspan-rowspan)
- 新增 `loading` 属性。
@ -70,7 +94,7 @@
> 备注：
>
> - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
> - [0.10 升级指南](/docs/upgrade-to-0.10)
> - [0.10 升级指南](http://ant.design/docs/upgrade-to-0.10)
## 0.9.3 ~ 0.9.5 `2015-11-04`

3
components/affix/index.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import rcUtil from 'rc-util';
import classNames from 'classnames';
function getScroll(w, top) {
let ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
@ -89,7 +90,7 @@ let Affix = React.createClass({
},
render() {
const className = rcUtil.classSet({
const className = classNames({
[this.props.className]: this.props.className,
'ant-affix': this.state.affix
});

2
components/alert/demo/close-type.md
View File

@ -8,7 +8,7 @@
````jsx
import { Alert } from 'antd';
const link = <a href="javascript:;">不再提醒</a>;
const link = <a href="#">不再提醒</a>;
ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText={link} />

1
components/alert/index.jsx
View File

@ -16,6 +16,7 @@ export default React.createClass({
};
},
handleClose(e) {
e.preventDefault();
let dom = ReactDOM.findDOMNode(this);
dom.style.height = dom.offsetHeight + 'px';
// Magic code

135
components/badge/ScrollNumber.jsx Normal file
View File

@ -0,0 +1,135 @@
import React, { createElement } from 'react';
import assign from 'object-assign';
function getNumberArray(num) {
return num ?
num.toString().split('').reverse().map(i => Number(i)) : [];
}
class AntScrollNumber extends React.Component {
constructor(props) {
super(props);
this.state = {
animateStarted: true,
count: props.count
};
}
getPositionByNum(num, i) {
if (this.state.animateStarted) {
return 10 + num;
}
const currentDigit = getNumberArray(this.state.count)[i];
const lastDigit = getNumberArray(this.lastCount)[i];
// 同方向则在同一侧切换数字
if (this.state.count > this.lastCount) {
if (currentDigit >= lastDigit) {
return 10 + num;
} else {
return 20 + num;
}
} else {
if (currentDigit <= lastDigit) {
return 10 + num;
} else {
return num;
}
}
}
componentWillReceiveProps(nextProps) {
if ('count' in nextProps && nextProps.count) {
if (this.lastCount === this.state.count) {
return;
}
this.lastCount = this.state.count;
// 复原数字初始位置
this.setState({
animateStarted: true,
}, () => {
// 等待数字位置复原完毕
// 开始设置完整的数字
setTimeout(() => {
this.setState({
animateStarted: false,
count: nextProps.count,
}, () => {
this.props.onAnimated();
});
}, 5);
});
}
}
renderNumberList() {
const childrenToReturn = [];
for (let i = 0; i < 30; i++) {
childrenToReturn.push(<p key={i}>{i % 10}</p>);
}
return childrenToReturn;
}
renderCurrentNumber(num, i) {
const position = this.getPositionByNum(num, i);
const height = this.props.height;
const removeTransition = this.state.animateStarted ||
(getNumberArray(this.lastCount)[i] === undefined);
return createElement('span', {
className: `${this.props.prefixCls}-only`,
style: {
transition: removeTransition && 'none',
transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
height: height,
},
key: i,
}, this.renderNumberList());
}
renderNumberElement() {
const state = this.state;
if (!state.count || isNaN(state.count)) {
return state.count;
}
return getNumberArray(state.count)
.map((num, i) => this.renderCurrentNumber(num, i)).reverse();
}
render() {
const props = assign({}, this.props, {
className: `${this.props.prefixCls} ${this.props.className}`
});
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
return createElement(
this.props.component,
props,
this.renderNumberElement()
);
} else {
return createElement(
this.props.component,
props,
props.count
);
}
}
}
AntScrollNumber.defaultProps = {
prefixCls: 'ant-scroll-number',
count: null,
component: 'sup',
onAnimated: function() {},
height: 20
};
AntScrollNumber.propTypes = {
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
component: React.PropTypes.string,
onAnimated: React.PropTypes.func,
height: React.PropTypes.number,
};
export default AntScrollNumber;

12
components/badge/demo/change.md
View File

@ -33,7 +33,7 @@ const Test = React.createClass({
show: !this.state.show
});
},
onNumberClick(){
onNumberClick() {
const count = this.state.count;
this.setState({
count: count ? 0 : 5
@ -45,9 +45,15 @@ const Test = React.createClass({
<a href="#" className="head-example"></a>
</Badge>
<Badge dot={this.state.show}>
<a href="#">一个链接</a>
<a href="#" className="head-example"></a>
</Badge>
<div style={{ marginTop: 10 }}>
<Button type="ghost" onClick={this.onNumberClick} style={{marginRight: 6}}>
切换数字显隐
</Button>
<Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
切换红点显隐
</Button>
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
@ -56,8 +62,6 @@ const Test = React.createClass({
<Icon type="plus" />
</Button>
</ButtonGroup>
<Button type="ghost" onClick={this.onClick} style={{marginLeft:10}}>点切换</Button>
<Button type="ghost" onClick={this.onNumberClick} style={{marginLeft:10}}>数字切换</Button>
</div>
</div>;
}

4
components/badge/demo/dot.md
View File

@ -10,10 +10,10 @@
import { Badge, Icon } from 'antd';
ReactDOM.render(<div>
<Badge dot={true}>
<Badge dot>
<Icon type="notification" />
</Badge>
<Badge dot={true}>
<Badge dot>
<a href="#">一个链接</a>
</Badge>
</div>, document.getElementById('components-badge-demo-dot'));

11
components/badge/index.jsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
class AntBadge extends React.Component {
constructor(props) {
@ -27,12 +28,10 @@ class AntBadge extends React.Component {
<Animate component=""
showProp="data-show"
transitionName={prefixCls + '-zoom'}
transitionAppear={true}>
transitionAppear>
{
hidden ? null :
<sup data-show={!hidden} className={className}>
{count}
</sup>
<ScrollNumber data-show={!hidden} className={className} count={count} />
}
</Animate>
</span>
@ -43,7 +42,7 @@ class AntBadge extends React.Component {
AntBadge.defaultProps = {
prefixCls: 'ant-badge',
count: null,
dot: false
dot: false,
};
AntBadge.propTypes = {
@ -51,7 +50,7 @@ AntBadge.propTypes = {
React.PropTypes.string,
React.PropTypes.number
]),
dot: React.PropTypes.bool
dot: React.PropTypes.bool,
};
export default AntBadge;

3
components/breadcrumb/index.jsx
View File

@ -30,6 +30,9 @@ let Breadcrumb = React.createClass({
if (routes && routes.length > 0 && ReactRouter) {
let Link = ReactRouter.Link;
crumbs = routes.map(function(route, i) {
if (!route.breadcrumbName) {
return null;
}
let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
return params[key] || replacement;
});

4
components/button/button-group.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import rcUtil from 'rc-util';
import classNames from 'classnames';
const prefix = 'ant-btn-group-';
@ -14,7 +14,7 @@ export default class ButtonGroup extends React.Component {
'small': 'sm'
})[size] || '';
const classes = rcUtil.classSet({
const classes = classNames({
'ant-btn-group': true,
[prefix + sizeCls]: sizeCls,
[className]: className

4
components/button/button.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import rcUtil from 'rc-util';
import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
@ -41,7 +41,7 @@ export default class Button extends React.Component {
'small': 'sm'
})[size] || '';
const classes = rcUtil.classSet({
const classes = classNames({
'ant-btn': true,
[prefix + type]: type,
[prefix + shape]: shape,

2
components/button/demo/basic.md
View File

@ -18,7 +18,7 @@ ReactDOM.render(<div>
<Button>次按钮</Button>
<Button type="ghost">幽灵按钮</Button>
</div>,
document.getElementById('components-button-demo-basic'))
document.getElementById('components-button-demo-basic'));
````
<style>

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

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

43
components/calendar/demo/notice-calendar.md
View File

@ -10,28 +10,29 @@
import { Calendar } from 'antd';
function getListData(value) {
var listData;
let listData;
switch (value.getDayOfMonth()) {
case 8:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' }
]; break;
case 10:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
case 15:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项好长啊。。....' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
case 8:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' }
]; break;
case 10:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
case 15:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项好长啊。。....' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
default:
}
return listData || [];
}

8
components/checkbox/demo/controller.md
View File

@ -18,7 +18,7 @@ const App = React.createClass({
};
},
render() {
var label = (this.state.checked ? '选中' : '取消') + '-' +
const label = (this.state.checked ? '选中' : '取消') + '-' +
(this.state.disabled ? '不可用' : '可用');
return <div>
<p style={{marginBottom: '20px'}}>
@ -32,12 +32,12 @@ const App = React.createClass({
<p>
<Button type="primary" size="small"
onClick={this.toggleChecked}>
{!this.state.checked ? "选中":"取消"}
{!this.state.checked ? '选中' : '取消'}
</Button>
<Button style={{'marginLeft': '10px'}}
<Button style={{marginLeft: '10px'}}
type="primary" size="small"
onClick={this.toggleDisable}>
{!this.state.disabled ? "不可用":"可用"}
{!this.state.disabled ? '不可用' : '可用'}
</Button>
</p>
</div>;

6
components/checkbox/demo/disable.md
View File

@ -1,4 +1,4 @@
# 不可用
不可用
- order: 1
@ -11,8 +11,8 @@ import { Checkbox } from 'antd';
const container = document.getElementById('components-checkbox-demo-disable');
ReactDOM.render(<div>
<Checkbox defaultChecked={false} disabled={true}/>
<Checkbox defaultChecked={false} disabled />
<br />
<Checkbox defaultChecked={true} disabled={true}/>
<Checkbox defaultChecked disabled />
</div>, container);
````

2
components/col/index.js Normal file
View File

@ -0,0 +1,2 @@
import { Col } from '../layout';
export default Col;

2
components/collapse/demo/accordion.md
View File

@ -17,7 +17,7 @@ const text = `
`;
ReactDOM.render(
<Collapse accordion={true}>
<Collapse accordion>
<Panel header={`This is panel header 1`} key="1">
<p>{text}</p>
</Panel>

8
components/collapse/demo/basic.md
View File

@ -21,14 +21,14 @@ const text = `
`;
ReactDOM.render(
<Collapse defaultActiveKey={["1"]} onChange={callback}>
<Panel header={`This is panel header 1`} key="1">
<Collapse defaultActiveKey={['1']} onChange={callback}>
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header={`This is panel header 2`} key="2">
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header={`This is panel header 3`} key="3">
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>

2
components/collapse/demo/mix.md
View File

@ -21,7 +21,7 @@ const text = `
`;
ReactDOM.render(
<Collapse onChange={callback} accordion={true}>
<Collapse onChange={callback} accordion>
<Panel header={`This is panel header 1`} key="1">
<Collapse defaultActiveKey="1">
<Panel header={`This is panel nest panel`} key="1">

2
components/datepicker/demo/disabled.md
View File

@ -10,6 +10,6 @@
import { Datepicker } from 'antd';
ReactDOM.render(
<Datepicker defaultValue="2015-06-06" disabled={true} />
<Datepicker defaultValue="2015-06-06" disabled />
, document.getElementById('components-datepicker-demo-disabled'));
````

4
components/datepicker/demo/locale.md
View File

@ -9,7 +9,7 @@
````jsx
import { Datepicker } from 'antd';
import enUS from 'antd/lib/datepicker/locale/en_US';
import assign from 'object-assign'
import assign from 'object-assign';
const App = React.createClass({
getInitialState() {
@ -22,7 +22,7 @@ const App = React.createClass({
};
},
render() {
return <Datepicker showTime={true} locale={this.state.locale} />;
return <Datepicker locale={this.state.locale} />;
}
});

2
components/datepicker/demo/select.md
View File

@ -14,7 +14,7 @@ const Picker = React.createClass({
console.log(new Date(value.getTime()));
},
render: function() {
return <Datepicker onChange={this.handleChange} />
return <Datepicker onChange={this.handleChange} />;
}
});

6
components/datepicker/demo/start-end.md
View File

@ -29,7 +29,7 @@ const DateRange = React.createClass({
return endValue.getTime() <= this.state.startValue.getTime();
},
onChange(field, value) {
console.log(field,'change',value);
console.log(field, 'change', value);
this.setState({
[field]: value,
});
@ -39,11 +39,11 @@ const DateRange = React.createClass({
<Datepicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this,'startValue')} />
onChange={this.onChange.bind(this, 'startValue')} />
<Datepicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this,'endValue')} />
onChange={this.onChange.bind(this, 'endValue')} />
</div>;
}
});

40
components/datepicker/demo/time.md
View File

@ -1,15 +1,43 @@
# 时间选择
# 日期时间选择
- order: 4
准确到秒的时间选择面板。
和 [时间选择框](/components/timepicer) 配合使用。
---
````jsx
import { Datepicker } from 'antd';
import { Datepicker, Timepicker } from 'antd';
ReactDOM.render(
<Datepicker showTime={true} format="yyyy-MM-dd HH:mm:ss" defaultValue="2015-11-11 11:11:11"/>
, document.getElementById('components-datepicker-demo-time'));
let result = new Date();
let selectdDate, selectdTime;
function handleChange(from, value) {
if (!value) {
if (from === 'date') {
selectdDate = false;
} else {
selectdTime = false;
}
return;
}
if (from === 'date') {
result.setFullYear(value.getFullYear());
result.setMonth(value.getMonth());
result.setDate(value.getDate());
selectdDate = true;
} else {
result.setHours(value.getHours());
result.setMinutes(value.getMinutes());
result.setSeconds(value.getSeconds());
selectdTime = true;
}
if (selectdDate && selectdTime) {
console.log('选择结果是：' + result);
}
}
ReactDOM.render(<div>
<Datepicker onChange={handleChange.bind(null, 'date')} />
<Timepicker onChange={handleChange.bind(null, 'time')} />
</div>, document.getElementById('components-datepicker-demo-time'));
````

12
components/datepicker/index.jsx
View File

@ -20,7 +20,7 @@ function createPicker(TheCalendar) {
}, // onChange 可用于 Validator
locale: {},
align: {
offset: [0, -10],
offset: [0, -9],
},
open: false
};
@ -87,24 +87,25 @@ function createPicker(TheCalendar) {
this.props.onChange(timeValue);
},
render() {
const locale = this.getLocale();
// 以下两行代码
// 给没有初始值的日期选择框提供本地化信息
// 否则会以周日开始排
let defaultCalendarValue = new GregorianCalendar(this.getLocale());
let defaultCalendarValue = new GregorianCalendar(locale);
defaultCalendarValue.setTime(Date.now());
const placeholder = ('placeholder' in this.props)
? this.placeholder : this.getLocale().lang.placeholder;
? this.props.placeholder : locale.lang.placeholder;
const calendar = (
<TheCalendar
disabledDate={this.props.disabledDate}
locale={this.getLocale().lang}
locale={locale.lang}
defaultValue={defaultCalendarValue}
dateInputPlaceholder={placeholder}
showTime={this.props.showTime}
prefixCls="ant-calendar"
showOk={this.props.showTime}
showClear={true}/>
showClear />
);
let sizeClass = '';
@ -139,6 +140,7 @@ function createPicker(TheCalendar) {
onChange={this.handleInputChange}
value={value && this.getFormatter().format(value)}
placeholder={placeholder}
style={this.props.style}
className={'ant-calendar-picker-input ant-input' + sizeClass}/>
<span className="ant-calendar-picker-icon"/>
</span>

4
components/datepicker/index.md
View File

@ -25,9 +25,9 @@
| format | 展示的日期格式 | string | "yyyy-MM-dd" |
| disabledDate | 不可选择的日期 | function | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(Date value) | 无 |
| showTime | 显示时间选择条 | boolean | false |
| disabled | 禁用 | bool | false |
| calendarStyle | 格外的弹出日历样式，例如 zIndex | object | {} |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |

2
components/dropdown/demo/trigger.md
View File

@ -21,7 +21,7 @@ const menu = <Menu>
</Menu>;
ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={["click"]}>
<Dropdown overlay={menu} trigger={['click']}>
<Button type="primary">
点击触发 <Icon type="down" />
</Button>

6
components/form/Form.jsx
View File

@ -1,7 +1,5 @@
import React from 'react';
import rcUtil from 'rc-util';
const cx = rcUtil.classSet;
import classNames from 'classnames';
class Form extends React.Component {
render() {
@ -10,7 +8,7 @@ class Form extends React.Component {
[`${prefixCls}-horizontal`]: this.props.horizontal,
[`${prefixCls}-inline`]: this.props.inline,
};
const classes = cx(formClassName);
const classes = classNames(formClassName);
return (
<form {...this.props} className={classes}>

8
components/form/FormItem.jsx
View File

@ -1,7 +1,5 @@
import React from 'react';
import rcUtil from 'rc-util';
const cx = rcUtil.classSet;
import classNames from 'classnames';
function prefixClsFn(prefixCls, ...args) {
return args.map((s)=> {
@ -32,7 +30,7 @@ class FormItem extends React.Component {
renderValidateWrapper(c1, c2) {
let classes = '';
if (this.props.validateStatus) {
classes = cx(
classes = classNames(
{
'has-feedback': this.props.hasFeedback,
'has-success': this.props.validateStatus === 'success',
@ -113,7 +111,7 @@ class FormItem extends React.Component {
};
return (
<div className={cx(itemClassName)}>
<div className={classNames(itemClassName)}>
{children}
</div>
);

4
components/form/demo/disabled.md
View File

@ -28,7 +28,7 @@ ReactDOM.render(
label="用户名："
labelCol={{span:5}}
wrapperCol={{span:12}}
required={true} >
required>
<p className="ant-form-text">大眼萌 minion</p>
</FormItem>
<FormItem
@ -36,7 +36,7 @@ ReactDOM.render(
label="密码："
labelCol={{span:5}}
wrapperCol={{span:12}}
required={true} >
required>
<Input type="password" defaultValue="123456" id="password" />
</FormItem>
<Row>

2
components/form/demo/form-controls.md
View File

@ -60,7 +60,7 @@ ReactDOM.render(
<Checkbox />选项二
</label>
<label className="ant-checkbox-vertical">
<Checkbox disabled={true} />选项三（不可选）
<Checkbox disabled />选项三（不可选）
</label>
</FormItem>

14
components/form/demo/horizontal-form.md
View File

@ -30,7 +30,7 @@ const Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') {
return '';
}
@ -46,7 +46,7 @@ const Demo = React.createClass({
label="用户名："
labelCol={{span: 6}}
wrapperCol={{span: 6}}
required={true} >
required>
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
</FormItem>
<FormItem
@ -54,15 +54,15 @@ const Demo = React.createClass({
label="密码："
labelCol={{span: 6}}
wrapperCol={{span: 14}}
required={true} >
required>
<Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
</FormItem>
<FormItem
label="您的性别："
labelCol={{span: 6}}
wrapperCol={{span: 14}}
required={true} >
<RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
required>
<RadioGroup name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>
@ -72,8 +72,8 @@ const Demo = React.createClass({
label="备注："
labelCol={{span: 6}}
wrapperCol={{span: 14}}
required={true}
help="随便写点什么" >
required
help="随便写点什么">
<Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
</FormItem>
<FormItem

2
components/form/demo/inline-form.md
View File

@ -25,7 +25,7 @@ const Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') {
return '';
}

2
components/form/demo/input-group.md
View File

@ -25,7 +25,7 @@ ReactDOM.render(
label="标签输入框："
labelCol={{span: 6}}
wrapperCol={{span: 16}}>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2"/>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2"/>
</FormItem>
<FormItem

26
components/form/demo/mix.md
View File

@ -7,18 +7,18 @@
---
````jsx
import {Form, Input, Select, InputNumber, Datepicker, Switch, Menu, Dropdown, Slider, Icon, Button, message, Row, Col} from 'antd';
import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
var Demo = React.createClass({
const Demo = React.createClass({
mixins: [Form.ValueMixin],
getInitialState() {
return {
formData: {
inputNumber: undefined,
static: "唧唧复唧唧木兰当户织呀",
static: '唧唧复唧唧木兰当户织呀',
switch: undefined,
slider: undefined,
select: undefined,
@ -30,7 +30,7 @@ var Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
message.success("收到表单值~~~ ：" + JSON.stringify(this.state.formData, function(k, v) {
message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') {
return '';
}
@ -39,14 +39,14 @@ var Demo = React.createClass({
},
render() {
var formData = this.state.formData;
const formData = this.state.formData;
return (
<Form horizontal onSubmit={this.handleSubmit} >
<FormItem
label="InputNumber 数字输入框："
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required={true} >
required>
<InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
<span className="ant-form-text"> 台机器</span>
</FormItem>
@ -55,10 +55,10 @@ var Demo = React.createClass({
label="我是标题："
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required={true} >
required>
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text">
<a href="javascript:;">链接文字</a>
<a href="#">链接文字</a>
</p>
</FormItem>
@ -66,7 +66,7 @@ var Demo = React.createClass({
label="Switch 开关："
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required={true} >
required>
<Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
</FormItem>
@ -74,15 +74,15 @@ var Demo = React.createClass({
label="Slider 滑动输入条："
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required={true}>
<Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} />
required>
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} name="slider" onChange={this.setValue.bind(this, 'slider')} />
</FormItem>
<FormItem
label="Select 选择器："
labelCol={{span: 8}}
wrapperCol={{span: 16}}
required={true}>
required>
<Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
@ -94,7 +94,7 @@ var Demo = React.createClass({
<FormItem
label="Datepicker 日期选择框："
labelCol={{span: 8}}
required={true}>
required>
<Col span="6">
<Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
</Col>

12
components/form/demo/validate.md
View File

@ -6,14 +6,14 @@
validateStatus: ['success', 'warning', 'error', 'validating']。
另外为输入框添加反馈图标，设置 `<FormItem>` 的 `hasFeedback` 属性值为 `true` 即可。
另外为输入框添加反馈图标，设置 `<FormItem>` 的 `hasFeedback` 属性值为 `true` 即可。
**注意**: 反馈图标只对 `<Input />` 有效。
---
````jsx
import {Form, Input, Datepicker, Row, Col} from "antd";
import { Form, Input, Datepicker, Col } from 'antd';
const FormItem = Form.Item;
ReactDOM.render(
@ -39,7 +39,7 @@ ReactDOM.render(
label="校验中："
labelCol={{span: 5}}
wrapperCol={{span: 12}}
hasFeedback={true}
hasFeedback
validateStatus="validating"
help="信息审核中...">
<Input defaultValue="我是被校验的内容" id="validating" />
@ -49,7 +49,7 @@ ReactDOM.render(
label="成功校验："
labelCol={{span: 5}}
wrapperCol={{span: 12}}
hasFeedback={true}
hasFeedback
validateStatus="success">
<Input defaultValue="我是正文" id="success" />
</FormItem>
@ -58,7 +58,7 @@ ReactDOM.render(
label="警告校验："
labelCol={{span: 5}}
wrapperCol={{span: 12}}
hasFeedback={true}
hasFeedback
validateStatus="warning">
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@ -67,7 +67,7 @@ ReactDOM.render(
label="失败校验："
labelCol={{span: 5}}
wrapperCol={{span: 12}}
hasFeedback={true}
hasFeedback
validateStatus="error"
help="请输入数字和字母组合">
<Input defaultValue="无效选择" id="error" />

14
components/form/index.jsx
View File

@ -1,11 +1,15 @@
import Form from './Form';
import FormItem from './FormItem';
import ValueMixin from './ValueMixin';
import Input from './Input';
import Input from '../input';
Form.Item = FormItem;
Form.ValueMixin = ValueMixin;
export default {
Form,
Input
};
// 对于 import { Form, Input } from 'antd/lib/form/';
// 的方式做向下兼容
// https://github.com/ant-design/ant-design/pull/566
Form.Form = Form;
Form.Input = Input;
export default Form;

2
components/form/index.md
View File

@ -25,7 +25,7 @@
```html
<Form.Item {...props}>
{children}
</Form.Item>`；
</Form.Item>
```
## Input 输入框

2
components/input-number/demo/disabled.md
View File

@ -9,7 +9,7 @@
````jsx
import { InputNumber, Button } from 'antd';
var Test = React.createClass({
const Test = React.createClass({
getInitialState() {
return {
disabled: true

18
components/input-number/index.jsx
View File

@ -1,5 +1,6 @@
import InputNumber from 'rc-input-number';
import React from 'react';
import classNames from 'classnames';
import InputNumber from 'rc-input-number';
export default React.createClass({
getDefaultProps() {
@ -9,12 +10,13 @@ export default React.createClass({
};
},
render() {
let sizeClass = '';
if (this.props.size === 'large') {
sizeClass = 'ant-input-number-lg';
} else if (this.props.size === 'small') {
sizeClass = 'ant-input-number-sm';
}
return <InputNumber className={sizeClass} {...this.props} />;
const {className, size, ...other} = this.props;
const inputNumberClass = classNames({
'ant-input-number-lg': size === 'large',
'ant-input-number-sm': size === 'small',
[className]: !!className,
});
return <InputNumber className={inputNumberClass} {...other} />;
}
});

2
components/form/Input.jsx → components/input/index.jsx
View File

@ -79,7 +79,7 @@ class Input extends React.Component {
}
switch (props.type) {
case 'textarea':
return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
return <textarea {...props} value={props.value || props.defaultValue} placeholder={placeholder} className={inputClassName} ref="input" />;
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;

4
components/layout/col.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import rcUtil from 'rc-util';
import classNames from 'classnames';
const Col = React.createClass({
propTypes: {
@ -13,7 +13,7 @@ const Col = React.createClass({
},
render() {
const {span, order, offset, push, pull, className, ...others} = this.props;
const classes = rcUtil.classSet({
const classes = classNames({
['col-' + span]: span,
['col-order-' + order]: order,
['col-offset-' + offset]: offset,

4
components/layout/demo/flex-align.md
View File

@ -10,13 +10,13 @@ Flex 子元素垂直对齐。
````jsx
import { Row, Col } from 'antd';
var DemoBox = React.createClass({
const DemoBox = React.createClass({
render() {
const { value } = this.props;
const className = `hight-${value}`;
return (
<p className={className}>{this.props.children}</p>
)
);
}
});

2
components/layout/demo/flex.md
View File

@ -54,5 +54,5 @@ ReactDOM.render(
</Row>
</div>,
document.getElementById('components-layout-demo-flex')
)
);
````

4
components/layout/row.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import rcUtil from 'rc-util';
import classNames from 'classnames';
const Row = React.createClass({
propTypes: {
@ -11,7 +11,7 @@ const Row = React.createClass({
},
render() {
const { type, justify, align, className, ...others } = this.props;
const classes = rcUtil.classSet({
const classes = classNames({
'row': true,
['row-' + type]: type,
['row-' + type + '-' + justify]: justify,

4
components/menu/demo/horizontal.md
View File

@ -7,14 +7,14 @@
---
````jsx
import { Menu, Icon, Switch } from 'antd';
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const App = React.createClass({
getInitialState() {
return {
current: 'mail'
}
};
},
handleClick(e) {
console.log('click ', e);

4
components/menu/demo/sider-current.md
View File

@ -10,12 +10,12 @@
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
var Sider = React.createClass({
const Sider = React.createClass({
getInitialState() {
return {
current: '1',
openKeys: []
}
};
},
handleClick(e) {
console.log('click ', e);

4
components/menu/demo/sider.md
View File

@ -10,11 +10,11 @@
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
var Sider = React.createClass({
const Sider = React.createClass({
getInitialState() {
return {
current: '1'
}
};
},
handleClick(e) {
console.log('click ', e);

4
components/menu/demo/theme.md
View File

@ -10,11 +10,11 @@
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
var Sider = React.createClass({
const Sider = React.createClass({
getInitialState() {
return {
theme: 'light'
}
};
},
changeTheme(value) {
this.setState({

2
components/modal/confirm.jsx
View File

@ -91,7 +91,7 @@ export default function (props) {
ReactDOM.render(<Dialog
prefixCls="ant-modal"
className="ant-confirm"
visible={true}
visible
closable={false}
title=""
transitionName="zoom"

4
components/modal/demo/async.md
View File

@ -9,8 +9,6 @@
````jsx
import { Modal, Button } from 'antd';
const ModalText = '对话框的内容';
const Test = React.createClass({
getInitialState() {
return {
@ -55,5 +53,5 @@ const Test = React.createClass({
}
});
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-async'));
ReactDOM.render(<Test/>, document.getElementById('components-modal-demo-async'));
````

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

@ -42,5 +42,5 @@ const App = React.createClass({
}
});
ReactDOM.render(<App /> , document.getElementById('components-modal-demo-basic'));
ReactDOM.render(<App />, document.getElementById('components-modal-demo-basic'));
````

5
components/modal/demo/confirm-promise.md
View File

@ -8,14 +8,13 @@
````jsx
import { Modal, Button } from 'antd';
const confirm = antd.Modal.confirm;
const confirm = Modal.confirm;
function showConfirm(){
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',
content: '点确认 1 秒后关闭',
onOk: function() {
alert('1 秒后关闭');
return new Promise(function(resolve) {
setTimeout(resolve, 1000);
});

4
components/modal/demo/confirm.md
View File

@ -8,14 +8,14 @@
````jsx
import { Modal, Button } from 'antd';
const confirm = antd.Modal.confirm;
const confirm = Modal.confirm;
function showConfirm(){
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',
onOk: function() {
alert('确定');
console.log('确定');
},
onCancel: function() {}
});

2
components/modal/demo/footer.md
View File

@ -54,5 +54,5 @@ const Test = React.createClass({
}
});
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-footer'));
ReactDOM.render(<Test/>, document.getElementById('components-modal-demo-footer'));
````

6
components/notification/demo/basic.md
View File

@ -11,12 +11,12 @@ import { Button, notification } from 'antd';
const openNotification = function() {
notification.open({
message: "这是标题",
description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
message: '这是标题',
description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
,document.getElementById('components-notification-demo-basic'));
, document.getElementById('components-notification-demo-basic'));
````

4
components/notification/demo/duration.md
View File

@ -11,8 +11,8 @@ import { Button, notification } from 'antd';
const openNotification = function() {
const args = {
message: "这是标题",
description: "我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，",
message: '这是标题',
description: '我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭，我不会自动关闭',
duration: 0
};
notification.open(args);

6
components/notification/demo/onclose.md
View File

@ -10,13 +10,13 @@
import { Button, notification } from 'antd';
const close = function() {
console.log("我被默认的关闭按钮关闭了！");
console.log('我被默认的关闭按钮关闭了！');
};
const openNotification = function() {
const args = {
message: "这是标题",
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
onClose: close
};
notification.open(args);

10
components/notification/demo/with-btn.md
View File

@ -9,12 +9,12 @@
````jsx
import { Button, notification } from 'antd';
const close = function(){
const close = function() {
console.log('我被默认的关闭按钮关闭了！');
}
};
const openNotification = function() {
const key='open'+Date.now();
const key = 'open' + Date.now();
const btnClick = function() {
// 隐藏提醒框
notification.close(key);
@ -23,8 +23,8 @@ const openNotification = function() {
自定义关闭按钮并触发回调函数
</Button>;
notification.open({
message: "这是标题",
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
btn: btn,
key: key,
onClose: close

4
components/notification/demo/with-icon.md
View File

@ -12,8 +12,8 @@ import { Button, notification } from 'antd';
const openNotificationWithIcon = function(type) {
return function(){
notification[type]({
message: "这是标题",
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
});
};
};

2
components/pagination/demo/changer.md
View File

@ -18,6 +18,6 @@ function onShowSizeChange(current, pageSize) {
}
ReactDOM.render(
<Pagination showSizeChanger={true} onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
<Pagination showSizeChanger onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
document.getElementById('components-pagination-demo-changer'));
````

2
components/pagination/demo/jump.md
View File

@ -14,6 +14,6 @@ function onChange(page) {
}
ReactDOM.render(
<Pagination showQuickJumper={true} onChange={onChange} total={500} />,
<Pagination showQuickJumper onChange={onChange} total={500} />,
document.getElementById('components-pagination-demo-jump'));
````

2
components/popconfirm/demo/basic.md
View File

@ -19,7 +19,7 @@ function cancel() {
ReactDOM.render(
<Popconfirm title="确定要删除这个任务吗？" onConfirm={confirm} onCancel={cancel}>
<a href="javascript:;">删除</a>
<a href="#">删除</a>
</Popconfirm>
, document.getElementById('components-popconfirm-demo-basic'));
````

2
components/queue-anim/demo/change.md
View File

@ -54,7 +54,7 @@ const Test = React.createClass({
<div className="demo-list">
<div className="title"></div>
<QueueAnim component="ul" type={['right', 'left']}>
{this.state.show ? this.state.items: null}
{this.state.show ? this.state.items : null}
</QueueAnim>
</div>
</div>

6
components/queue-anim/demo/custom.md
View File

@ -13,12 +13,12 @@ const Test = React.createClass({
getInitialState() {
return {
show: true,
}
};
},
onClick() {
this.setState({
show: !this.state.show,
})
});
},
render() {
return (
@ -52,7 +52,7 @@ const Test = React.createClass({
] : null}
</QueueAnim>
</div>
)
);
}
});

2
components/queue-anim/demo/enter-leave.md
View File

@ -48,7 +48,7 @@ const Test = React.createClass({
</ul>
</div>
</div>
]: null}
] : null}
</QueueAnim>
</div>
);

19
components/queue-anim/demo/form.md
View File

@ -7,8 +7,7 @@
---
````jsx
import { QueueAnim, Button, Select, Checkbox, Radio } from 'antd';
const Option = Select.Option;
import { QueueAnim, Button, Checkbox, Radio } from 'antd';
const RadioGroup = Radio.Group;
const Test = React.createClass({
@ -28,22 +27,22 @@ const Test = React.createClass({
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse={true}>
<QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse>
{this.state.show ? [
<div className="ant-form-item ant-form-item-compact" key='name'>
<div className="ant-form-item ant-form-item-compact" key="name">
<label htmlFor="userName" className="col-6" required>用户名：</label>
<div className="col-6">
<p className="ant-form-text">大眼萌 minion</p>
</div>
</div>,
<div className="ant-form-item" key='password'>
<div className="ant-form-item" key="password">
<label htmlFor="password" className="col-6" required>密码：</label>
<div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
</div>,
<div className="ant-form-item ant-form-item-compact" key='sex'>
<label className="col-6" required>您的性别：</label>
<div className="ant-form-item ant-form-item-compact" key="sex">
<label className="col-6" required>您的性别：</label>
<div className="col-14">
<RadioGroup value="male">
<Radio value="male">男的</Radio>
@ -51,14 +50,14 @@ const Test = React.createClass({
</RadioGroup>
</div>
</div>,
<div className="ant-form-item" key='remark'>
<div className="ant-form-item" key="remark">
<label htmlFor="remark" className="col-6" required>备注：</label>
<div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div>
</div>,
<div className="ant-form-item ant-form-item-compact" key='checkbox'>
<div className="ant-form-item ant-form-item-compact" key="checkbox">
<div className="col-14 col-offset-6">
<label>
<Checkbox />
@ -66,7 +65,7 @@ const Test = React.createClass({
</label>
</div>
</div>,
<div className="row" key='btn'>
<div className="row" key="btn">
<div className="col-16 col-offset-6">
<Button type="primary">确定</Button>
</div>

60
components/queue-anim/demo/page.md
View File

@ -28,45 +28,45 @@ const Test = React.createClass({
</p>
<QueueAnim type={['right', 'left']}>
{this.state.show ? [
<div className="demo-header" key="header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</div>,
<QueueAnim className="demo-content" key="content" delay={300}>
<div className="demo-title" key="title">我是标题</div>
<div className="demo-kp" key="b">
<div className="demo-header" key="header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</div>
<div className="demo-title" key="title2">我是标题</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={500}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" type="bottom" key="li">
</div>,
<QueueAnim className="demo-content" key="content" delay={300}>
<div className="demo-title" key="title">我是标题</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
</div>
<div className="demo-title" key="title2">我是标题</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={500}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" type="bottom" key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
] : null}
</QueueAnim>
</div>

6
components/queue-anim/demo/router.md
View File

@ -29,7 +29,7 @@ const App = React.createClass({
</Menu.Item>
</Menu>
<QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(this.props.children||<Home/>, {key: key})}
{React.cloneElement(this.props.children || <Home/>, {key: key})}
</QueueAnim>
</div>
);
@ -83,7 +83,7 @@ const Page1 = React.createClass({
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="ul">
<QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
@ -104,7 +104,7 @@ const Page2 = React.createClass({
<div className="demo-listBox">
<QueueAnim className="demo-list">
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="li">
<QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>

6
components/radio/demo/disable.md
View File

@ -9,10 +9,6 @@ Radio 不可用。
````jsx
import { Radio, Button } from 'antd';
function toggleDisabled() {
disabled = !disabled;
}
const App = React.createClass({
getInitialState() {
return {
@ -28,7 +24,7 @@ const App = React.createClass({
return <div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br />
<Radio defaultChecked={true} disabled={this.state.disabled}>不可用</Radio>
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled

2
components/row/index.js Normal file
View File

@ -0,0 +1,2 @@
import { Row } from '../layout';
export default Row;

2
components/select/demo/search.md
View File

@ -15,7 +15,7 @@ function handleChange(value) {
}
ReactDOM.render(
<Select defaultValue="lucy" showSearch={true} style={{width:200}}
<Select defaultValue="lucy" showSearch style={{width:200}}
searchPlaceholder="输入"
onChange={handleChange}>
<Option value="jack">jack</Option>

12
components/slider/demo/icon-slider.md
View File

@ -24,13 +24,11 @@ const IconSlider = React.createClass({
},
handleChange(v) {
this.setState(
{
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight': '',
sliderValue: v
}
);
this.setState({
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v
});
},
render() {

33
components/slider/demo/input-number.md
View File

@ -9,7 +9,7 @@
````jsx
import { Slider, InputNumber } from 'antd';
const Test = React.createClass({
const IntegerStep = React.createClass({
getInitialState() {
return {
inputValue: 1
@ -35,5 +35,34 @@ const Test = React.createClass({
}
});
ReactDOM.render(<Test />, document.getElementById('components-slider-demo-input-number'));
const DecimalStep = React.createClass({
getInitialState() {
return {
inputValue: 0
};
},
onChange(value) {
this.setState({
inputValue: value
});
},
render() {
return (
<div className="row">
<div className="col-12">
<Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
</div>
<div className="col-4">
<InputNumber min={0} max={1} style={{marginLeft: '16px'}} step={0.01}
value={this.state.inputValue} onChange={this.onChange} />
</div>
</div>
);
}
});
ReactDOM.render(<div>
<IntegerStep />
<DecimalStep />
</div>, document.getElementById('components-slider-demo-input-number'));
````

18
components/slider/demo/tip-formatter.md Normal file
View File

@ -0,0 +1,18 @@
# 格式化 `Tooltip` 内容
- order: 5
使用 `tipFormatter` 可以格式化 `Tooltip` 的内容。
---
````jsx
import { Slider } from 'antd';
function formatter(value) {
return '$' + value;
}
ReactDOM.render(<Slider tipFormatter={formatter} />
, document.getElementById('components-slider-demo-tip-formatter'));
````

1
components/slider/index.md
View File

@ -25,3 +25,4 @@
| included | Boolean | true | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
| disabled | Boolean | false | 值为 `true` 时，滑块为禁用状态
| onChange | Function | NOOP | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
| tipFormatter | Function | | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值。

2
components/spin/demo/nested.md
View File

@ -21,7 +21,7 @@ const Card = React.createClass({
});
},
render() {
const container = <Alert message="消息提示的文案"
const container = <Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />;
return <div>

4
components/spin/index.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { classSet } from 'rc-util';
import classNames from 'classnames';
import { isCssAnimationSupported } from 'css-animation';
const AntSpin = React.createClass({
@ -23,7 +23,7 @@ const AntSpin = React.createClass({
render() {
const { className, size, prefixCls } = this.props;
let spinClassName = classSet({
let spinClassName = classNames({
[prefixCls]: true,
[`${prefixCls}-${size}`]: size,
[className]: !!className,

6
components/steps/demo/icon.md
View File

@ -12,8 +12,8 @@ const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-icon');
ReactDOM.render(<Steps>
<Step status='finish' title='步骤1' icon='cloud' />
<Step status='process' title='步骤2' icon='apple' />
<Step status='wait' title='步骤3' icon='github' />
<Step status="finish" title="步骤1" icon="cloud" />
<Step status="process" title="步骤2" icon="apple" />
<Step status="wait" title="步骤3" icon="github" />
</Steps>, container);
````

2
components/steps/demo/step-next.md
View File

@ -27,7 +27,7 @@ const App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length)
}
};
},
next() {
let s = this.state.currentStep + 1;

2
components/steps/demo/vertical-small.md
View File

@ -7,7 +7,7 @@
---
````jsx
import { Steps, Button } from 'antd';
import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical-small');

2
components/steps/demo/vertical.md
View File

@ -7,7 +7,7 @@
---
````jsx
import { Steps, Button } from 'antd';
import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical');

2
components/switch/demo/disabled.md
View File

@ -14,7 +14,7 @@ const Test = React.createClass({
getInitialState() {
return {
disabled: true
}
};
},
toggle(){
this.setState({

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

@ -31,7 +31,7 @@ const columns = [{
}];
const dataSource = new Table.DataSource({
url: "/components/table/demo/data.json",
url: '/components/table/demo/data.json',
resolve: function(result) {
return result.data;
},
@ -41,7 +41,7 @@ const dataSource = new Table.DataSource({
return {
total: result.totalCount,
pageSize: result.pageSize
}
};
},
// 和后台接口接收的参数进行适配
// 参数里提供了分页、筛选、排序的信息

8
components/table/demo/basic.md
View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',
@ -26,11 +26,11 @@ const columns = [{
dataIndex: '',
render: function(text, record) {
return <span>
<a href="javascript:;">操作一</a>
<a href="#">操作一</a>
<span className="ant-divider"></span>
<a href="javascript:;">操作二</a>
<a href="#">操作二</a>
<span className="ant-divider"></span>
<a href="javascript:;" className="ant-dropdown-link">
<a href="#" className="ant-dropdown-link">
更多 <Icon type="down" />
</a>
</span>;

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

@ -2,7 +2,7 @@
- order: 10
添加表格边框线，`bordered={true}`。
添加表格边框线，`bordered`。
---
@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '资产',
@ -41,7 +41,7 @@ const data = [{
address: '西湖区湖底公园1号'
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} />
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
, document.getElementById('components-table-demo-bordered'));
````

26
components/table/demo/colspan-rowspan.md
View File

@ -17,7 +17,7 @@ const renderContent = function(value, row, index) {
let obj = {
children: value,
props: {}
}
};
if (index === 4) {
obj.props.colSpan = 0;
}
@ -29,14 +29,14 @@ const columns = [{
dataIndex: 'name',
render: function(text, row, index) {
if (index < 4) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
} else {
return {
children: <a href="javascript:;">{text}</a>,
children: <a href="#">{text}</a>,
props: {
colSpan: 5
}
}
};
}
}
}, {
@ -51,7 +51,7 @@ const columns = [{
let obj = {
children: value,
props:{}
}
};
// 第三列的第三行行合并
if (index === 2) {
obj.props.rowSpan = 2;
@ -107,14 +107,14 @@ const data = [{
phone: 18900010002,
address: '西湖区湖底公园1号'
}, {
key: '5',
name: '习大大',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
}];
key: '5',
name: '习大大',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} />
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
, document.getElementById('components-table-demo-colspan-rowspan'));
````

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

@ -10,7 +10,7 @@
import { Table } from 'antd';
function renderAction() {
return <a href="javascript:;">删除</a>;
return <a href="#">删除</a>;
}
function expandedRowRender(record) {

2
components/table/demo/loading.md
View File

@ -53,7 +53,7 @@ const App = React.createClass({
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>;
}
})
});
ReactDOM.render(<App />, document.getElementById('components-table-demo-loading'));
````

5
components/table/demo/local-data.md
View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',
@ -79,9 +79,8 @@ const App = React.createClass({
<Button onClick={this.handleClick2}>加载本地数据2</Button>
</div>;
}
})
});
ReactDOM.render(<App />
, document.getElementById('components-table-demo-local-data'));
````

4
components/table/demo/paging.md
View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',
@ -24,7 +24,7 @@ const columns = [{
}];
const data = [];
for (let i=0; i<46; i++) {
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: '李大嘴' + i,

2
components/table/demo/row-selection-props.md
View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',

2
components/table/demo/row-selection-radio-props.md
View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',

2
components/table/demo/row-selection.md
View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',

2
components/table/index.md
View File

@ -40,6 +40,8 @@ var dataSource = [{
**远程数据模式**是更常见的业务场景，是一次只从服务端读取一页的数据放在前端，执行筛选、排序、切换页码等操作时均向后台发送请求，后台返回当页的数据和相关分页信息。
> 远程数据模式后续可能删除，目前不推荐使用。
通过指定表格的数据源 `dataSource` 为一个 DataSource 的实例如下。
```jsx

10
components/tabs/demo/add.md
View File

@ -37,7 +37,7 @@ const Test = React.createClass({
activeKey: index.toString()
};
},
remove(index, e) {
remove(targetIndex, e) {
e.stopPropagation();
let tabs = this.state.tabs;
let activeKey = this.state.activeKey;
@ -49,15 +49,15 @@ const Test = React.createClass({
}
const newTabs = tabs.filter(tab => {
if (tab.index !== index) {
if (tab.index !== targetIndex) {
return true;
} else {
foundIndex = index;
foundIndex = targetIndex;
return false;
}
});
if (activeKey === index) {
if (activeKey === targetIndex) {
activeKey = tabs[foundIndex - 1].index;
}
@ -101,7 +101,7 @@ const Test = React.createClass({
</Tabs>
);
}
})
});
ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add'));
````

2
components/tabs/demo/disabled.md
View File

@ -15,7 +15,7 @@ function callback(key) {}
ReactDOM.render(
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="选项卡一" key="1">选项卡一</TabPane>
<TabPane tab="选项卡二" disabled={true} key="2">选项卡二</TabPane>
<TabPane tab="选项卡二" disabled key="2">选项卡二</TabPane>
<TabPane tab="选项卡三" key="3">选项卡三</TabPane>
</Tabs>
, document.getElementById('components-tabs-demo-disabled'));

2
components/tabs/demo/icon.md
View File

@ -10,7 +10,7 @@
import { Tabs, Icon } from 'antd';
const TabPane = Tabs.TabPane;
var tabContent = [
const tabContent = [
<span><Icon type="apple" />选项卡一</span>,
<span><Icon type="android" />选项卡二</span>,
<span><Icon type="lock" />选项卡三</span>,

Some files were not shown because too many files have changed in this diff Show More