mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Merge pull request #829 from ant-design/upgrade-eslint-config

Browse Source 
Upgrade eslint config
This commit is contained in:
afc163 2016-01-12 11:54:07 +08:00
commit 0f72c80e79
135 changed files with 1584 additions and 1319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.eslintrc
View File

@ -17,29 +17,20 @@
"babel"
],
"rules": {
"constructor-super": 2,
"comma-dangle": 0,
"func-names": 0,
"guard-for-in": 0,
"one-var": [2, { "initialized": "never" }],
"prefer-const": 0,
"key-spacing": 0,
"no-eq-null": 0,
"no-else-return": 0,
"no-param-reassign": 0,
"no-this-before-super": 2,
"no-undef": 2,
"babel/object-shorthand": 0,
"react/jsx-no-duplicate-props": 2,
"react/sort-comp": 0,
"react/wrap-multilines": 0,
"react/no-multi-comp": 0,
"react/prop-types": 0,
"space-after-keywords": 0,
"space-before-blocks": 0,
"react/prefer-es6-class": 0,
"react/jsx-closing-bracket-location": 0,
"react/jsx-no-bind": 0,
"space-before-function-paren": 0,
"spaced-comment": 0,
"vars-on-top": 0,
"id-length": 0
"object-curly-spacing": 0,
"no-param-reassign": 0,
"max-len": 0,
"object-shorthand": 0,
"quote-props": 0
}
}

6
CHANGELOG.md
View File

@ -4,6 +4,12 @@
---
## 0.11.3 `fixing`
- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
## 0.11.2 `2015-01-03`
- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。

4
components/affix/index.jsx
View File

@ -8,10 +8,10 @@ function getScroll(w, top) {
let method = 'scroll' + (top ? 'Top' : 'Left');
if (typeof ret !== 'number') {
let d = w.document;
//ie6,7,8 standard mode
// ie6,7,8 standard mode
ret = d.documentElement[method];
if (typeof ret !== 'number') {
//quirks mode
// quirks mode
ret = d.body[method];
}
}

34
components/alert/index.jsx
View File

@ -44,20 +44,20 @@ export default React.createClass({
let iconType = '';
switch (type) {
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
iconType = 'exclamation-circle';
break;
case 'warn':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
iconType = 'exclamation-circle';
break;
case 'warn':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
}
// use outline icon in alert with description
@ -80,9 +80,9 @@ export default React.createClass({
return this.state.closed ? null : (
<Animate component=""
showProp="data-show"
transitionName="slide-up"
onEnd={this.animationEnd}>
showProp="data-show"
transitionName="slide-up"
onEnd={this.animationEnd}>
<div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={prefixCls + '-message'}>{message}</span>

28
components/badge/ScrollNumber.jsx
View File

@ -26,16 +26,13 @@ class AntScrollNumber extends React.Component {
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;
}
return 20 + num;
}
if (currentDigit <= lastDigit) {
return 10 + num;
}
return num;
}
componentWillReceiveProps(nextProps) {
@ -80,7 +77,7 @@ class AntScrollNumber extends React.Component {
style: {
transition: removeTransition && 'none',
transform: 'translate3d(0, ' + (-position * height) + 'px, 0)',
height: height,
height,
},
key: i,
}, this.renderNumberList());
@ -106,13 +103,12 @@ class AntScrollNumber extends React.Component {
props,
this.renderNumberElement()
);
} else {
return createElement(
this.props.component,
props,
props.count
);
}
return createElement(
this.props.component,
props,
props.count
);
}
}
@ -120,7 +116,7 @@ AntScrollNumber.defaultProps = {
prefixCls: 'ant-scroll-number',
count: null,
component: 'sup',
onAnimated: function() {},
onAnimated() {},
height: 18,
};

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

@ -40,30 +40,32 @@ const Test = React.createClass({
});
},
render() {
return <div>
<Badge count={this.state.count}>
<a href="#" className="head-example"></a>
</Badge>
<Badge dot={this.state.show}>
<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" />
return (
<div>
<Badge count={this.state.count}>
<a href="#" className="head-example"></a>
</Badge>
<Badge dot={this.state.show}>
<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.increase}>
<Icon type="plus" />
<Button type="ghost" onClick={this.onClick} style={{marginRight: 6}}>
切换红点显隐
</Button>
</ButtonGroup>
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
</div>
</div>;
);
}
});

44
components/breadcrumb/demo/router.md
View File

@ -13,33 +13,39 @@ import { Breadcrumb } from 'antd';
const Apps = React.createClass({
render() {
return <ul className="app-list">
<li><Link to="/apps/1">应用1</Link></li>
<li><Link to="/apps/2">应用2</Link></li>
</ul>;
return (
<ul className="app-list">
<li><Link to="/apps/1">应用1</Link></li>
<li><Link to="/apps/2">应用2</Link></li>
</ul>
);
}
});
const Home = React.createClass({
render() {
return (<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
return (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
{this.props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>
点击上面的导航切换页面，面包屑在下面：
</div>
<Breadcrumb {...this.props} router={ReactRouter} />
</div>
{this.props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>点击上面的导航切换页面，面包屑在下面：</div>
<Breadcrumb {...this.props} router={ReactRouter} />
</div>);
);
}
});
ReactDOM.render((
ReactDOM.render(
<Router>
<Route name="home" breadcrumbName="首页" path="/" component={Home}>
<Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
@ -47,7 +53,7 @@ ReactDOM.render((
</Route>
</Route>
</Router>
), mountNode);
, mountNode);
````
<style>

10
components/breadcrumb/index.jsx
View File

@ -21,10 +21,12 @@ const BreadcrumbItem = React.createClass({
if (typeof this.props.href === 'undefined') {
link = <span className={prefixCls + '-link'} {...this.props}>{children}</span>;
}
return <span>
{link}
<span className={prefixCls + '-separator'}>{separator}</span>
</span>;
return (
<span>
{link}
<span className={prefixCls + '-separator'}>{separator}</span>
</span>
);
}
});

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

@ -5,13 +5,13 @@ const prefix = 'ant-btn-group-';
export default class ButtonGroup extends React.Component {
render() {
const {size, className, ...others} = this.props;
const { size, className, ...others } = this.props;
// large => lg
// small => sm
const sizeCls = ({
'large': 'lg',
'small': 'sm'
large: 'lg',
small: 'sm',
})[size] || '';
const classes = classNames({

14
components/button/button.jsx
View File

@ -32,13 +32,13 @@ export default class Button extends React.Component {
}
render() {
const props = this.props;
const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
const { type, shape, size, onClick, className, htmlType, children, ...others } = props;
// large => lg
// small => sm
const sizeCls = ({
'large': 'lg',
'small': 'sm'
large: 'lg',
small: 'sm',
})[size] || '';
const classes = classNames({
@ -52,9 +52,11 @@ export default class Button extends React.Component {
const kids = React.Children.map(children, insertSpace);
return <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
{kids}
</button>;
return (
<button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
{kids}
</button>
);
}
}

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

@ -23,24 +23,26 @@ const App = React.createClass({
this.setState({ iconLoading: true });
},
render() {
return <div>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading>
加载中
</Button>
<Button type="primary" size="small" loading>
加载中
</Button>
<br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
点击变加载
</Button>
<Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
<Icon type="poweroff" />点击变加载
</Button>
</div>;
return (
<div>
<Button type="primary" size="large" loading>
加载中
</Button>
<Button type="primary" loading>
加载中
</Button>
<Button type="primary" size="small" loading>
加载中
</Button>
<br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
点击变加载
</Button>
<Button type="primary" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
<Icon type="poweroff" />点击变加载
</Button>
</div>
);
}
});

17
components/calendar/Header.jsx
View File

@ -1,20 +1,20 @@
import React, {PropTypes, Component} from 'react';
import {PREFIX_CLS} from './Constants';
import React, { PropTypes, Component } from 'react';
import { PREFIX_CLS } from './Constants';
import Select from '../select';
import {Group, Button} from '../radio';
import { Group, Button } from '../radio';
function noop() {}
class Header extends Component {
getYearSelectElement(year) {
const {yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen} = this.props;
const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props;
const start = year - yearSelectOffset;
const end = start + yearSelectTotal;
const suffix = locale.year === '年' ? '年' : '';
const options = [];
for (let index = start; index < end; index++) {
options.push(<Option key={`${index}`}>{index + suffix}</Option> );
options.push(<Option key={`${index}`}>{index + suffix}</Option>);
}
return (
<Select
@ -32,7 +32,7 @@ class Header extends Component {
getMonthSelectElement(month) {
const props = this.props;
const months = props.locale.format.months;
const {prefixCls, fullscreen} = props;
const { prefixCls, fullscreen } = props;
const options = [];
for (let index = 0; index < 12; index++) {
@ -67,12 +67,9 @@ class Header extends Component {
this.props.onTypeChange(e.target.value);
}
render() {
const {type, value, prefixCls, locale} = this.props;
const { type, value, prefixCls, locale } = this.props;
const yearSelect = this.getYearSelectElement(value.getYear());
const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
const typeSwitch = (
<Group onChange={this.onTypeChange.bind(this)} value={type}>
<Button value="date">{locale.month}</Button>

2
components/calendar/demo/custom-render.md
View File

@ -19,6 +19,6 @@ function monthCellRender(value) {
ReactDOM.render(
<Calendar defaultValue={new Date('2010-10-10')}
dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
, mountNode);
````

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

@ -12,41 +12,45 @@ import { Calendar } from 'antd';
function getListData(value) {
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;
default:
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 || [];
}
function dateCellRender(value) {
let listData = getListData(value);
return <ul className="events">
{listData.map((item, index) =>
<li key={index}>
<span className={`event-${item.type}`}>●</span>
{item.content}
</li>
)}
</ul>;
return (
<ul className="events">
{
listData.map((item, index) =>
<li key={index}>
<span className={`event-${item.type}`}>●</span>
{item.content}
</li>
)
}
</ul>
);
}

40
components/calendar/index.jsx
View File

@ -1,8 +1,8 @@
import React, {PropTypes, Component} from 'react';
import React, { PropTypes, Component } from 'react';
import GregorianCalendar from 'gregorian-calendar';
import zhCN from './locale/zh_CN';
import FullCalendar from 'rc-calendar/lib/FullCalendar';
import {PREFIX_CLS} from './Constants';
import { PREFIX_CLS } from './Constants';
import Header from './Header';
function noop () { return null; }
@ -35,25 +35,29 @@ class Calendar extends Component {
monthCellRender(value, locale) {
const prefixCls = this.props.prefixCls;
const month = value.getMonth();
return <div className={`${prefixCls}-month`}>
<div className={`${prefixCls}-value`}>
{locale.format.shortMonths[month]}
return (
<div className={`${prefixCls}-month`}>
<div className={`${prefixCls}-value`}>
{locale.format.shortMonths[month]}
</div>
<div className={`${prefixCls}-content`}>
{this.props.monthCellRender(value)}
</div>
</div>
<div className={`${prefixCls}-content`}>
{this.props.monthCellRender(value)}
</div>
</div>;
);
}
dateCellRender(value) {
const prefixCls = this.props.prefixCls;
return <div className={`${prefixCls}-date`}>
<div className={`${prefixCls}-value`}>
{zerofixed(value.getDayOfMonth())}
return (
<div className={`${prefixCls}-date`}>
<div className={`${prefixCls}-value`}>
{zerofixed(value.getDayOfMonth())}
</div>
<div className={`${prefixCls}-content`}>
{this.props.dateCellRender(value)}
</div>
</div>
<div className={`${prefixCls}-content`}>
{this.props.dateCellRender(value)}
</div>
</div>;
);
}
setValue(value) {
if (!('value' in this.props) && this.state.value !== value) {
@ -70,8 +74,8 @@ class Calendar extends Component {
}
render() {
const props = this.props;
const {value, mode} = this.state;
const {locale, prefixCls, style, className, fullscreen} = props;
const { value, mode } = this.state;
const { locale, prefixCls, style, className, fullscreen } = props;
const type = (mode === 'year') ? 'month' : 'date';
let cls = className || '';

8
components/carousel/index.jsx
View File

@ -4,10 +4,10 @@ if (typeof window !== 'undefined') {
const matchMediaPolyfill = function matchMediaPolyfill() {
return {
matches: false,
addListener: function () {
addListener() {
},
removeListener() {
},
removeListener: function () {
}
};
};
window.matchMedia = window.matchMedia || matchMediaPolyfill;
@ -21,7 +21,7 @@ const AntCarousel = React.createClass({
getDefaultProps() {
return {
dots: true,
arrows: false
arrows: false,
};
},
render() {

2
components/cascader/index.jsx
View File

@ -80,7 +80,7 @@ class AntCascader extends React.Component {
className={pickerCls}>
<Input placeholder={placeholder}
className={`${prefixCls}-input ant-input ${sizeCls}`}
style={{width: '100%'}}
style={{ width: '100%' }}
value={this.getLabel()}
disabled={disabled}
readOnly />

26
components/checkbox/Group.jsx
View File

@ -42,17 +42,19 @@ export default React.createClass({
},
render() {
const options = this.props.options;
return <div className="ant-checkbox-group">
{
options.map(option =>
<label className="ant-checkbox-group-item" key={option}>
<Checkbox disabled={this.props.disabled}
checked={this.state.value.indexOf(option) !== -1}
onChange={this.toggleOption.bind(this, option)} />
{option}
</label>
)
}
</div>;
return (
<div className="ant-checkbox-group">
{
options.map(option =>
<label className="ant-checkbox-group-item" key={option}>
<Checkbox disabled={this.props.disabled}
checked={this.state.value.indexOf(option) !== -1}
onChange={this.toggleOption.bind(this, option)} />
{option}
</label>
)
}
</div>
);
},
});

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

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

3
components/collapse/index.jsx
View File

@ -1,6 +1,5 @@
import Collapse from 'rc-collapse';
import React from 'react';
const prefixCls = 'ant-collapse';
class AntCollapse extends React.Component {
render() {
@ -9,7 +8,7 @@ class AntCollapse extends React.Component {
}
AntCollapse.defaultProps = {
prefixCls: prefixCls
prefixCls: 'ant-collapse',
};
AntCollapse.Panel = Collapse.Panel;

4
components/common/openAnimation.js
View File

@ -14,10 +14,12 @@ function animate(node, show, transitionName, done) {
}
// Fix safari flash bug
/*eslint-disable */
node.style.display = show ? 'block' : 'none';
/*eslint-enable */
velocity(node, transitionName, {
duration: 240,
complete: complete,
complete,
easing: 'easeInOutQuad'
});
return {

2
components/date-picker/PickerMixin.jsx
View File

@ -24,7 +24,7 @@ export default {
parseDateFromValue(value) {
if (value) {
if (typeof value === 'string') {
return this.getFormatter().parse(value, {locale: this.getLocale()});
return this.getFormatter().parse(value, { locale: this.getLocale() });
} else if (value instanceof Date) {
let date = new GregorianCalendar(this.getLocale());
date.setTime(+value);

32
components/date-picker/RangePicker.jsx
View File

@ -25,7 +25,7 @@ export default React.createClass({
};
},
getInitialState() {
const {value, defaultValue} = this.props;
const { value, defaultValue } = this.props;
const start = (value && value[0]) || defaultValue[0];
const end = (value && value[1]) || defaultValue[1];
return {
@ -35,7 +35,7 @@ export default React.createClass({
]
};
},
mixins: [ PickerMixin ],
mixins: [PickerMixin],
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
const value = nextProps.value || [];
@ -62,28 +62,30 @@ export default React.createClass({
let defaultCalendarValue = new GregorianCalendar(locale);
defaultCalendarValue.setTime(Date.now());
const {disabledDate, showTime, size, startPlaceholder, endPlaceholder,
transitionName, disabled, popupStyle, align, style} = this.props;
const { disabledDate, showTime, size, startPlaceholder, endPlaceholder,
transitionName, disabled, popupStyle, align, style } = this.props;
const state = this.state;
const timePicker = showTime
? <TimePicker prefixCls="ant-time-picker"
placeholder={locale.lang.timePlaceholder}
transitionName="slide-up" />
placeholder={locale.lang.timePlaceholder}
transitionName="slide-up" />
: null;
const calendarClassName = classNames({
['ant-calendar-time']: this.props.showTime,
});
const calendar = <RangeCalendar prefixCls="ant-calendar"
className={calendarClassName}
timePicker={timePicker}
disabledDate={disabledDate}
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang}
defaultValue={defaultCalendarValue}
showClear />;
const calendar = (
<RangeCalendar prefixCls="ant-calendar"
className={calendarClassName}
timePicker={timePicker}
disabledDate={disabledDate}
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang}
defaultValue={defaultCalendarValue}
showClear />
);
const pickerClass = classNames({
'ant-calendar-picker': true,
@ -110,7 +112,7 @@ export default React.createClass({
onClose={this.toggleOpen}
onChange={this.handleChange}>
{
({value}) => {
({ value }) => {
const start = value[0];
const end = value[1];
return (

22
components/date-picker/demo/start-end.md
View File

@ -35,16 +35,18 @@ const DateRange = React.createClass({
});
},
render() {
return <div>
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this, 'startValue')} />
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this, 'endValue')} />
</div>;
return (
<div>
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this, 'startValue')} />
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this, 'endValue')} />
</div>
);
}
});

10
components/date-picker/demo/with-time-picker.md
View File

@ -37,10 +37,12 @@ const DateTimePicker = React.createClass({
}
},
render() {
return <div>
<DatePicker onChange={this.handleChange.bind(null, 'date')} />
<TimePicker onChange={this.handleChange.bind(null, 'time')} />
</div>;
return (
<div>
<DatePicker onChange={this.handleChange.bind(null, 'date')} />
<TimePicker onChange={this.handleChange.bind(null, 'time')} />
</div>
);
}
});

63
components/date-picker/index.jsx
View File

@ -30,7 +30,7 @@ function createPicker(TheCalendar, defaultFormat) {
value: this.parseDateFromValue(this.props.value || this.props.defaultValue)
};
},
mixins: [ PickerMixin ],
mixins: [PickerMixin],
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({
@ -58,8 +58,8 @@ function createPicker(TheCalendar, defaultFormat) {
const timePicker = this.props.showTime
? <TimePicker prefixCls="ant-time-picker"
placeholder={locale.lang.timePlaceholder}
transitionName="slide-up" />
placeholder={locale.lang.timePlaceholder}
transitionName="slide-up" />
: null;
const calendarClassName = classNames({
@ -91,35 +91,36 @@ function createPicker(TheCalendar, defaultFormat) {
pickerClass += ' ant-calendar-picker-open';
}
return <span className={pickerClass}>
<DatePicker
transitionName={this.props.transitionName}
disabled={this.props.disabled}
calendar={calendar}
value={this.state.value}
prefixCls="ant-calendar-picker-container"
style={this.props.popupStyle}
align={this.props.align}
onOpen={this.toggleOpen}
onClose={this.toggleOpen}
onChange={this.handleChange}>
{
({value}) => {
return (
<span>
<input disabled={this.props.disabled}
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>
);
return (
<span className={pickerClass}>
<DatePicker transitionName={this.props.transitionName}
disabled={this.props.disabled}
calendar={calendar}
value={this.state.value}
prefixCls="ant-calendar-picker-container"
style={this.props.popupStyle}
align={this.props.align}
onOpen={this.toggleOpen}
onClose={this.toggleOpen}
onChange={this.handleChange}>
{
({ value }) => {
return (
<span>
<input disabled={this.props.disabled}
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>
);
}
}
}
</DatePicker>
</span>;
</DatePicker>
</span>
);
}
});
}

24
components/dropdown/demo/basic.md
View File

@ -9,17 +9,19 @@
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

30
components/dropdown/demo/dropdown-button.md
View File

@ -10,21 +10,23 @@
import { Menu, Dropdown } from 'antd';
const DropdownButton = Dropdown.Button;
const menu = <Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
</Menu.Item>
</Menu>
);
ReactDOM.render(
<DropdownButton overlay={menu} type="primary">
某功能按钮
</DropdownButton>
<DropdownButton overlay={menu} type="primary">
某功能按钮
</DropdownButton>
, mountNode);
````

12
components/dropdown/demo/event.md
View File

@ -12,11 +12,13 @@ const onClick = function({key}) {
console.log('点击了菜单' + key);
};
const menu = <Menu onClick={onClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;
const menu = (
<Menu onClick={onClick}>
<Menu.Item key="1">第一个菜单项</Menu.Item>
<Menu.Item key="2">第二个菜单项</Menu.Item>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

22
components/dropdown/demo/item.md
View File

@ -9,16 +9,18 @@
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item key="0">
<a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

18
components/dropdown/demo/sub-menu.md
View File

@ -10,14 +10,16 @@
import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const menu = <Menu>
<Menu.Item>第一个菜单项</Menu.Item>
<Menu.Item>第二个菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>第三个菜单项</Menu.Item>
<Menu.Item>第四个菜单项</Menu.Item>
</SubMenu>
</Menu>;
const menu = (
<Menu>
<Menu.Item>第一个菜单项</Menu.Item>
<Menu.Item>第二个菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>第三个菜单项</Menu.Item>
<Menu.Item>第四个菜单项</Menu.Item>
</SubMenu>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>

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

@ -9,16 +9,18 @@
````jsx
import { Menu, Dropdown, Icon } from 'antd';
const menu = <Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;
const menu = (
<Menu>
<Menu.Item key="0">
<a href="http://www.alipay.com/">第一个菜单项</a>
</Menu.Item>
<Menu.Item key="1">
<a href="http://www.taobao.com/">第二个菜单项</a>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>
);
ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={['click']}>

20
components/dropdown/dropdown-button.jsx
View File

@ -17,20 +17,22 @@ const align = {
export default React.createClass({
getDefaultProps() {
return {
align: align,
align,
type: 'default',
};
},
render() {
return <ButtonGroup className="ant-dropdown-button">
<Button type={this.props.type}>
{this.props.children}
</Button>
<Dropdown {...this.props}>
return (
<ButtonGroup className="ant-dropdown-button">
<Button type={this.props.type}>
<Icon type="down" />
{this.props.children}
</Button>
</Dropdown>
</ButtonGroup>;
<Dropdown {...this.props}>
<Button type={this.props.type}>
<Icon type="down" />
</Button>
</Dropdown>
</ButtonGroup>
);
}
});

4
components/dropdown/dropdown.jsx
View File

@ -2,13 +2,13 @@ import React from 'react';
import Dropdown from 'rc-dropdown';
export default React.createClass({
getDefaultProps: function () {
getDefaultProps() {
return {
transitionName: 'slide-up',
prefixCls: 'ant-dropdown',
};
},
render: function () {
render() {
const { overlay, ...otherProps } = this.props;
const menu = React.cloneElement(overlay, {
openTransitionName: 'zoom-big',

16
components/form/FormItem.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
function prefixClsFn(prefixCls, ...args) {
return args.map((s)=> {
return args.map((s) => {
return prefixCls + '-' + s;
}).join(' ');
}
@ -12,7 +12,7 @@ class FormItem extends React.Component {
if (!colDef) {
return '';
}
const {span, offset} = colDef;
const { span, offset } = colDef;
const col = span ? 'col-' + span : '';
const offsetCol = offset ? ' col-offset-' + offset : '';
return col + offsetCol;
@ -61,7 +61,8 @@ class FormItem extends React.Component {
const required = this.props.required ? 'required' : '';
return this.props.label ? (
<label htmlFor={this.props.id} className={this._getLayoutClass(labelCol)} required={required} key="label">
<label htmlFor={this.props.id} className={this._getLayoutClass(labelCol)}
required={required} key="label">
{this.props.label}
</label>
) : null;
@ -84,15 +85,14 @@ class FormItem extends React.Component {
const compactControls = ['checkbox', 'radio', 'radio-group', 'static', 'file'];
let isCompact = false;
if (!Array.isArray(children)) {
children = [children];
}
children.map((child) => {
const childrenArray = Array.isArray(children) ? children : [children];
childrenArray.map((child) => {
const type = child.props && child.props.type;
let prefixCls = child.props && child.props.prefixCls;
prefixCls = prefixCls ? prefixCls.substring(prefixCls.indexOf('-') + 1) : '';
if ((type && compactControls.indexOf(type) > -1) || (prefixCls && compactControls.indexOf(prefixCls) > -1)) {
if ((type && compactControls.indexOf(type) > -1) ||
(prefixCls && compactControls.indexOf(prefixCls) > -1)) {
isCompact = true;
} else if (child.props && typeof child.props.children === 'object') {
isCompact = this._isCompact(child.props.children);

4
components/form/ValueMixin.jsx
View File

@ -1,8 +1,8 @@
function merge() {
const ret = {};
const args = [].slice.call(arguments, 0);
args.forEach((a)=> {
Object.keys(a).forEach((k)=> {
args.forEach((a) => {
Object.keys(a).forEach((k) => {
ret[k] = a[k];
});
});

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

@ -16,8 +16,8 @@ ReactDOM.render(
<Form horizontal>
<FormItem
label="单独禁用输入框："
labelCol={{span:5}}
wrapperCol={{span:12}}>
labelCol={{span: 5}}
wrapperCol={{span: 12}}>
<Input defaultValue="我是禁用的" disabled />
</FormItem>
@ -26,16 +26,16 @@ ReactDOM.render(
<FormItem
id="userName"
label="用户名："
labelCol={{span:5}}
wrapperCol={{span:12}}
labelCol={{span: 5}}
wrapperCol={{span: 12}}
required>
<p className="ant-form-text">大眼萌 minion</p>
</FormItem>
<FormItem
id="password"
label="密码："
labelCol={{span:5}}
wrapperCol={{span:12}}
labelCol={{span: 5}}
wrapperCol={{span: 12}}
required>
<Input type="password" defaultValue="123456" id="password" />
</FormItem>

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

@ -41,7 +41,7 @@ ReactDOM.render(
label="Select 选择器："
labelCol={{span: 6}}
wrapperCol={{span: 14}}>
<Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
<Select id="select" size="large" defaultValue="lucy" style={{width: 200}} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>

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

@ -35,7 +35,7 @@ ReactDOM.render(
<InputGroup>
<Input id="site4" placeholder="www.mysite" />
<div className="ant-input-group-wrap">
<Select defaultValue=".com" style={{width:70}}>
<Select defaultValue=".com" style={{width: 70}}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>

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

@ -59,7 +59,7 @@ const Demo = React.createClass({
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required>
<InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
<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>
@ -95,7 +95,7 @@ const Demo = React.createClass({
labelCol={{span: 8}}
wrapperCol={{span: 16}}
required>
<Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
<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>
<Option value="disabled" disabled>disabled</Option>

20
components/form/demo/search-input.md
View File

@ -43,15 +43,17 @@ const SearchInput = React.createClass({
'ant-search-input': true,
'ant-search-input-focus': this.state.focus,
});
return <InputGroup className={searchCls} style={this.props.style}>
<Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSearch}>
<Icon type="search" />
</Button>
</div>
</InputGroup>;
return (
<InputGroup className={searchCls} style={this.props.style}>
<Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSearch}>
<Icon type="search" />
</Button>
</div>
</InputGroup>
);
}
});

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

@ -76,7 +76,8 @@ ReactDOM.render(
<FormItem
label="Datepicker："
labelCol={{span: 5}}
validateStatus="error">
validateStatus="error"
help>
<Col span="6">
<DatePicker />
</Col>
@ -90,6 +91,25 @@ ReactDOM.render(
<p className="ant-form-explain">请输入正确选项</p>
</Col>
</FormItem>
<FormItem
label="Datepicker："
labelCol={{span: 5}}>
<Col span="6">
<FormItem validateStatus="error">
<DatePicker />
<p className="ant-form-explain">请输入正确选项</p>
</FormItem>
</Col>
<Col span="1">
<p className="ant-form-split">-</p>
</Col>
<Col span="6">
<FormItem>
<DatePicker />
</FormItem>
</Col>
</FormItem>
</Form>
, mountNode);
````

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

@ -21,12 +21,14 @@ const Test = React.createClass({
});
},
render() {
return <div>
<InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
<div style={{marginTop: 20}}>
<Button onClick={this.toggle} type="primary">Toggle disabled</Button>
return (
<div>
<InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
<div style={{marginTop: 20}}>
<Button onClick={this.toggle} type="primary">Toggle disabled</Button>
</div>
</div>
</div>;
);
}
});

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

@ -10,7 +10,7 @@ export default React.createClass({
};
},
render() {
const {className, size, ...other} = this.props;
const { className, size, ...other } = this.props;
const inputNumberClass = classNames({
'ant-input-number-lg': size === 'large',
'ant-input-number-sm': size === 'small',

26
components/input/index.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import assign from 'object-assign';
function prefixClsFn(prefixCls, ...args) {
return args.map((s)=> {
return args.map((s) => {
return prefixCls + '-' + s;
}).join(' ');
}
@ -26,8 +26,7 @@ class Group extends React.Component {
render() {
const className = 'ant-input-group ' + (this.props.className || '');
return (
<span className={className}
style={this.props.style}>
<span className={className} style={this.props.style}>
{this.props.children}
</span>
);
@ -73,23 +72,26 @@ class Input extends React.Component {
}
switch (props.size) {
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
default:
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
default:
}
let placeholder = props.placeholder;
if(placeholder && ieGT9()){
if (placeholder && ieGT9()) {
placeholder = null;
}
if ('value' in props) {
props.value = fixControlledValue(props.value);
}
switch (props.type) {
case 'textarea':
return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
case 'textarea':
return (
<textarea {...props} placeholder={placeholder}
className={inputClassName} ref="input" />
);
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
}
}

2
components/layout/col.jsx
View File

@ -12,7 +12,7 @@ const Col = React.createClass({
children: React.PropTypes.node,
},
render() {
const {span, order, offset, push, pull, className, ...others} = this.props;
const { span, order, offset, push, pull, className, ...others } = this.props;
const classes = classNames({
['col-' + span]: span,
['col-order-' + order]: order,

2
components/layout/row.jsx
View File

@ -12,7 +12,7 @@ const Row = React.createClass({
render() {
const { type, justify, align, className, ...others } = this.props;
const classes = classNames({
'row': true,
row: true,
['row-' + type]: type,
['row-' + type + '-' + justify]: justify,
['row-' + type + '-' + align]: align,

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

@ -30,34 +30,36 @@ const Sider = React.createClass({
});
},
render() {
return <Menu onClick={this.handleClick}
style={{width:240}}
openKeys={this.state.openKeys}
onOpen={this.onToggle}
onClose={this.onToggle}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
return (
<Menu onClick={this.handleClick}
style={{width: 240}}
openKeys={this.state.openKeys}
onOpen={this.onToggle}
onClose={this.onToggle}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>;
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
);
}
});
ReactDOM.render(<Sider />, mountNode);

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

@ -24,36 +24,38 @@ const Sider = React.createClass({
});
},
render() {
return <Menu onClick={this.handleClick}
style={{width:240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
return (
<Menu onClick={this.handleClick}
style={{width: 240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>;
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
);
}
});
ReactDOM.render(<Sider />, mountNode);

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

@ -28,38 +28,40 @@ const Sider = React.createClass({
});
},
render() {
return <div>
<Switch onChange={this.changeTheme} checkedChildren="暗" unCheckedChildren="亮" />
<br />
<br />
<Menu theme={this.state.theme}
onClick={this.handleClick}
style={{width:240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
return (
<div>
<Switch onChange={this.changeTheme} checkedChildren="暗" unCheckedChildren="亮" />
<br />
<br />
<Menu theme={this.state.theme}
onClick={this.handleClick}
style={{width: 240}}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
</div>;
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
</div>
);
}
});
ReactDOM.render(<Sider />, mountNode);

51
components/menu/demo/vertical.md
View File

@ -15,31 +15,32 @@ function handleClick(e) {
console.log('click', e);
}
ReactDOM.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
ReactDOM.render(
<Menu onClick={handleClick} style={{width: 240}} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="分组2">
<Menu.Item key="3">选项3</Menu.Item>
<Menu.Item key="4">选项4</Menu.Item>
</MenuItemGroup>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
<Menu.Item key="5">选项5</Menu.Item>
<Menu.Item key="6">选项6</Menu.Item>
<SubMenu key="sub3" title="三级导航">
<Menu.Item key="7">选项7</Menu.Item>
<Menu.Item key="8">选项8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
<Menu.Item key="9">选项9</Menu.Item>
<Menu.Item key="10">选项10</Menu.Item>
<Menu.Item key="11">选项11</Menu.Item>
<Menu.Item key="12">选项12</Menu.Item>
</SubMenu>
</Menu>
, mountNode);
````

20
components/menu/index.jsx
View File

@ -43,16 +43,16 @@ const AntMenu = React.createClass({
let openAnimation = this.props.openAnimation || this.props.openTransitionName;
if (!openAnimation) {
switch (this.props.mode) {
case 'horizontal':
openAnimation = 'slide-up';
break;
case 'vertical':
openAnimation = 'zoom-big';
break;
case 'inline':
openAnimation = animation;
break;
default:
case 'horizontal':
openAnimation = 'slide-up';
break;
case 'vertical':
openAnimation = 'zoom-big';
break;
case 'inline':
openAnimation = animation;
break;
default:
}
}

28
components/message/index.jsx
View File

@ -12,7 +12,7 @@ function getMessageInstance() {
prefixCls: 'ant-message',
transitionName: 'move-up',
style: {
top: top
top,
} // 覆盖原来的样式
});
return messageInstance;
@ -20,31 +20,31 @@ function getMessageInstance() {
function notice(content, duration = defaultDuration, type, onClose) {
let iconClass = ({
'info': 'ant-message-info',
'success': 'ant-message-success',
'error': 'ant-message-error',
'warn': 'ant-message-warn',
'loading': 'ant-message-loading'
info: 'ant-message-info',
success: 'ant-message-success',
error: 'ant-message-error',
warn: 'ant-message-warn',
loading: 'ant-message-loading'
})[type];
let iconType = ({
'info': 'info-circle',
'success': 'check-circle',
'error': 'exclamation-circle',
'warn': 'exclamation-circle',
'loading': 'loading'
info: 'info-circle',
success: 'check-circle',
error: 'exclamation-circle',
warn: 'exclamation-circle',
loading: 'loading'
})[type];
let instance = getMessageInstance();
instance.notice({
key: key,
duration: duration,
key,
duration,
style: {},
content: <div className={'ant-message-custom-content ' + iconClass}>
<Icon className={iconClass} type={iconType} />
<span>{content}</span>
</div>,
onClose: onClose
onClose
});
return (function() {
let target = key++;

49
components/modal/confirm.jsx
View File

@ -3,13 +3,14 @@ import ReactDOM from 'react-dom';
import Dialog from './index';
import Icon from '../icon';
import Button from '../button';
import objectAssign from 'object-assign';
export default function (props) {
export default function (config) {
const props = objectAssign({}, config || {});
let div = document.createElement('div');
document.body.appendChild(div);
let d;
props = props || {};
props.iconClassName = props.iconClassName || 'question-circle';
let iconClassType = props.iconClassName;
@ -72,28 +73,34 @@ export default function (props) {
}
}
let body = <div className="ant-confirm-body">
<Icon type={iconClassType} />
<span className="ant-confirm-title">{props.title}</span>
<div className="ant-confirm-content">{props.content}</div>
</div>;
let body = (
<div className="ant-confirm-body">
<Icon type={iconClassType} />
<span className="ant-confirm-title">{props.title}</span>
<div className="ant-confirm-content">{props.content}</div>
</div>
);
let footer = null;
if (props.okCancel) {
footer = <div className="ant-confirm-btns">
<Button type="ghost" size="large" onClick={onCancel}>
{props.cancelText}
</Button>
<Button type="primary" size="large" onClick={onOk}>
{props.okText}
</Button>
</div>;
footer = (
<div className="ant-confirm-btns">
<Button type="ghost" size="large" onClick={onCancel}>
{props.cancelText}
</Button>
<Button type="primary" size="large" onClick={onOk}>
{props.okText}
</Button>
</div>
);
} else {
footer = <div className="ant-confirm-btns">
<Button type="primary" size="large" onClick={onOk}>
{props.okText}
</Button>
</div>;
footer = (
<div className="ant-confirm-btns">
<Button type="primary" size="large" onClick={onOk}>
{props.okText}
</Button>
</div>
);
}
ReactDOM.render(<Dialog
@ -105,7 +112,7 @@ export default function (props) {
transitionName="zoom"
footer=""
maskTransitionName="fade" width={width}>
<div style={{zoom: 1, overflow: 'hidden'}}>{body} {footer}</div>
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
</Dialog>, div, function () {
d = this;
});

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

@ -40,16 +40,18 @@ const Test = React.createClass({
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
</div>
);
}
});

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

@ -30,15 +30,17 @@ const App = React.createClass({
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="第一个 Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="第一个 Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>
);
}
});

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

@ -10,7 +10,7 @@
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
function showConfirm(){
function showConfirm() {
confirm({
title: '您是否确认要删除这项内容',
content: '点确认 1 秒后关闭',

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

@ -10,7 +10,7 @@
import { Modal, Button } from 'antd';
const confirm = Modal.confirm;
function showConfirm(){
function showConfirm() {
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',

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

@ -31,26 +31,28 @@ const Test = React.createClass({
this.setState({ visible: false });
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>
显示对话框
</Button>
<Modal ref="modal"
visible={this.state.visible}
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
footer={[
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交
</Button>
]}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>
显示对话框
</Button>
<Modal ref="modal"
visible={this.state.visible}
title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
footer={[
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交
</Button>
]}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
</Modal>
</div>
);
}
});

22
components/modal/demo/locale.md
View File

@ -29,16 +29,18 @@ const LocalizedModal = React.createClass({
});
},
render() {
return <div>
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Modal title="Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}
okText="OK" cancelText="Cancel">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</Modal>
</div>;
return (
<div>
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Modal title="Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel}
okText="OK" cancelText="Cancel">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</Modal>
</div>
);
}
});

37
components/modal/index.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import Dialog from 'rc-dialog';
import { Dom } from 'rc-util';
import objectAssign from 'object-assign';
import confirm from './confirm';
import Button from '../button';
@ -70,32 +71,42 @@ let AntModal = React.createClass({
</Button>
];
let footer = props.footer || defaultFooter;
return <Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={props.visible} mousePosition={mousePosition} />;
return (
<Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={props.visible} mousePosition={mousePosition} />
);
}
});
AntModal.info = function (props) {
props.iconClassName = 'info-circle';
props.okCancel = false;
return confirm(props);
const config = objectAssign({}, props, {
iconClassName: 'info-circle',
okCancel: false,
});
return confirm(config);
};
AntModal.success = function (props) {
props.iconClassName = 'check-circle';
props.okCancel = false;
return confirm(props);
const config = objectAssign({}, props, {
iconClassName: 'check-circle',
okCancel: false,
});
return confirm(config);
};
AntModal.error = function (props) {
props.iconClassName = 'exclamation-circle';
props.okCancel = false;
return confirm(props);
const config = objectAssign({}, props, {
iconClassName: 'exclamation-circle',
okCancel: false,
});
return confirm(config);
};
AntModal.confirm = function (props) {
props.okCancel = true;
return confirm(props);
const config = objectAssign({}, props, {
okCancel: true,
});
return confirm(config);
};
export default AntModal;

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

@ -19,9 +19,11 @@ const openNotification = function() {
// 隐藏提醒框
notification.close(key);
};
const btn = <Button type="primary" size="small" onClick={btnClick}>
自定义关闭按钮并触发回调函数
</Button>;
const btn = (
<Button type="primary" size="small" onClick={btnClick}>
自定义关闭按钮并触发回调函数
</Button>
);
notification.open({
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',

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

@ -10,7 +10,7 @@
import { Button, notification } from 'antd';
const openNotificationWithIcon = function(type) {
return function(){
return function() {
notification[type]({
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
@ -18,11 +18,12 @@ const openNotificationWithIcon = function(type) {
};
};
ReactDOM.render(<div>
<Button onClick={openNotificationWithIcon('success')}>成功</Button>
<Button onClick={openNotificationWithIcon('info')}>消息</Button>
<Button onClick={openNotificationWithIcon('warn')}>警告</Button>
<Button onClick={openNotificationWithIcon('error')}>错误</Button>
ReactDOM.render(
<div>
<Button onClick={openNotificationWithIcon('success')}>成功</Button>
<Button onClick={openNotificationWithIcon('info')}>消息</Button>
<Button onClick={openNotificationWithIcon('warn')}>警告</Button>
<Button onClick={openNotificationWithIcon('error')}>错误</Button>
</div>
, mountNode);
````

40
components/notification/index.jsx
View File

@ -13,7 +13,7 @@ function getNotificationInstance() {
notificationInstance = Notification.newInstance({
prefixCls: 'ant-notification',
style: {
top: top,
top,
right: 0
}
});
@ -32,20 +32,20 @@ function notice(args) {
let prefixCls = ' ant-notification-notice-content-icon-';
let iconType = '';
switch (args.icon) {
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'exclamation-circle-o';
break;
case 'warn':
iconType = 'question-circle-o';
break;
default:
iconType = 'info-circle';
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'exclamation-circle-o';
break;
case 'warn':
iconType = 'question-circle-o';
break;
default:
iconType = 'info-circle';
}
getNotificationInstance().notice({
@ -56,7 +56,7 @@ function notice(args) {
<div className={prefixCls + 'description'}>{args.description}</div>
</div>,
duration: duration,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
@ -71,7 +71,7 @@ function notice(args) {
<div className={prefixCls + 'description'}>{args.description}</div>
</div>,
duration: duration,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
@ -87,7 +87,7 @@ function notice(args) {
{args.btn}
</span>
</div>,
duration: duration,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
@ -98,10 +98,10 @@ function notice(args) {
}
let api = {
open(args){
open(args) {
notice(args);
},
close(key){
close(key) {
if (notificationInstance) {
notificationInstance.removeNotice(key);
}

10
components/pagination/index.jsx
View File

@ -21,10 +21,12 @@ class AntPagination extends React.Component {
selectComponentClass = MiniSelect;
}
return <Pagination selectComponentClass={selectComponentClass}
selectPrefixCls="ant-select"
{...this.props}
className={className} />;
return (
<Pagination selectComponentClass={selectComponentClass}
selectPrefixCls="ant-select"
{...this.props}
className={className} />
);
}
}

25
components/pagination/index.md
View File

@ -19,15 +19,16 @@
<Pagination onChange={onChange} total={50} />
```
| 参数 | 说明 | 类型 | 默认值 |
|------------------|------------------------------------|----------|----------------|
| current | 当前页数 | Number | 无 |
| defaultCurrent | 默认的当前页数 | Number | 1 |
| total | 数据总数 | Number | 0 |
| pageSize | 每页条数 | Number | 10 |
| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop |
| showSizeChanger | 是否可以改变 pageSize | Bool | false |
| onShowSizeChange | pageSize 变化的回调 | Function | noop |
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
| size | 当为「small」时，是小尺寸分页 | String | "" |
| simple | 当添加该属性时，显示为简单分页 | Object | 无 |
| 参数 | 说明 | 类型 | 默认值 |
|------------------|------------------------------------|---------------|--------------------------|
| current | 当前页数 | Number | 无 |
| defaultCurrent | 默认的当前页数 | Number | 1 |
| total | 数据总数 | Number | 0 |
| pageSize | 每页条数 | Number | 10 |
| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop |
| showSizeChanger | 是否可以改变 pageSize | Bool | false |
| pageSizeOptions | 指定每页可以显示多少条 | Array<String> | ['10', '20', '30', '40'] |
| onShowSizeChange | pageSize 变化的回调 | Function | noop |
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
| size | 当为「small」时，是小尺寸分页 | String | "" |
| simple | 当添加该属性时，显示为简单分页 | Object | 无 |

22
components/popconfirm/demo/dynamic-trigger.md
View File

@ -41,16 +41,18 @@ let App = React.createClass({
}
},
render() {
return <div>
<Popconfirm title="确定要删除这个任务吗？"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
onConfirm={this.confirm} onCancel={this.cancel}>
<a href="#">删除某任务</a>
</Popconfirm>
<br />
<br />
点击是否直接执行：<Switch defaultChecked onChange={this.changeCondition} />
</div>;
return (
<div>
<Popconfirm title="确定要删除这个任务吗？"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
onConfirm={this.confirm} onCancel={this.cancel}>
<a href="#">删除某任务</a>
</Popconfirm>
<br />
<br />
点击是否直接执行：<Switch defaultChecked onChange={this.changeCondition} />
</div>
);
}
});

38
components/popconfirm/index.jsx
View File

@ -62,31 +62,33 @@ export default React.createClass({
}
},
render() {
const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
const overlay = <div>
<div className={prefixCls + '-content'}>
<p className={prefixCls + '-message'}>
<Icon type="exclamation-circle" />
{title}
</p>
<div className={prefixCls + '-buttons'}>
<Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
<Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
const { title, okText, cancelText, placement, overlayStyle, trigger } = this.props;
const overlay = (
<div>
<div className={prefixCls + '-content'}>
<p className={prefixCls + '-message'}>
<Icon type="exclamation-circle" />
{title}
</p>
<div className={prefixCls + '-buttons'}>
<Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
<Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
</div>
</div>
</div>
</div>;
);
const transitionName = transitionNames[placement];
return (
<Tooltip placement={placement}
overlayStyle={overlayStyle}
prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange}
transitionName={transitionName}
visible={this.state.visible}
trigger={trigger}
overlay={overlay}>
overlayStyle={overlayStyle}
prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange}
transitionName={transitionName}
visible={this.state.visible}
trigger={trigger}
overlay={overlay}>
{this.props.children}
</Tooltip>
);

10
components/popover/demo/basic.md
View File

@ -9,10 +9,12 @@
````jsx
import { Popover, Button } from 'antd';
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(
<Popover overlay={content} title="标题">

18
components/popover/demo/control.md
View File

@ -24,13 +24,17 @@ const App = React.createClass({
this.setState({ visible });
},
render() {
const content = <div>
<a onClick={this.hide}>关闭卡片</a>
</div>;
return <Popover overlay={content} title="标题" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
<Button type="primary">点击弹出卡片</Button>
</Popover>;
const content = (
<div>
<a onClick={this.hide}>关闭卡片</a>
</div>
);
return (
<Popover overlay={content} title="标题" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
<Button type="primary">点击弹出卡片</Button>
</Popover>
);
}
});

102
components/popover/demo/placement.md
View File

@ -10,57 +10,61 @@
import { Popover, Button } from 'antd';
const text = <span>标题</span>;
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(<div>
<div style={{marginLeft: 60}}>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上边</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
ReactDOM.render(
<div>
<div style={{marginLeft: 60}}>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上边</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
</div>
<div style={{width: 60, float: 'left'}}>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左边</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
</div>
<div style={{width: 60, marginLeft: 270}}>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右边</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
</div>
<div style={{marginLeft: 60, clear: 'both'}}>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下边</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
</div>
</div>
<div style={{width: 60, float: 'left'}}>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左边</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
</div>
<div style={{width: 60, marginLeft: 270}}>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右边</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
</div>
<div style={{marginLeft: 60, clear: 'both'}}>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下边</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
</div>
</div>, mountNode);
, mountNode);
````
<style>

34
components/popover/demo/triggerType.md
View File

@ -9,20 +9,24 @@
````jsx
import { Popover, Button } from 'antd';
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(<div>
<Popover overlay={content} title="标题" trigger="hover">
<Button>移入</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="focus">
<Button>聚焦</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="click">
<Button>点击</Button>
</Popover>
</div>, mountNode);
ReactDOM.render(
<div>
<Popover overlay={content} title="标题" trigger="hover">
<Button>移入</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="focus">
<Button>聚焦</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="click">
<Button>点击</Button>
</Popover>
</div>
, mountNode);
````

20
components/popover/index.jsx
View File

@ -6,7 +6,7 @@ const prefixCls = 'ant-popover';
const Popover = React.createClass({
getDefaultProps() {
return {
prefixCls: prefixCls,
prefixCls,
placement: 'top',
trigger: 'hover',
mouseEnterDelay: 0.1,
@ -33,9 +33,9 @@ const Popover = React.createClass({
return (
<Tooltip transitionName={transitionName}
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}>
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}>
{this.props.children}
</Tooltip>
);
@ -46,12 +46,14 @@ const Popover = React.createClass({
},
getOverlay() {
return <div>
{this.props.title && <div className={prefixCls + '-title'}>{this.props.title}</div>}
<div className={prefixCls + '-content'}>
{this.props.overlay}
return (
<div>
{this.props.title && <div className={prefixCls + '-title'}>{this.props.title}</div>}
<div className={prefixCls + '-content'}>
{this.props.overlay}
</div>
</div>
</div>;
);
},
});

24
components/progress/demo/circle-dynamic.md
View File

@ -32,17 +32,19 @@ const MyProgress = React.createClass({
this.setState({ percent });
},
render() {
return <div>
<ProgressCircle percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>;
return (
<div>
<ProgressCircle percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
);
}
});

24
components/progress/demo/dynamic.md
View File

@ -32,17 +32,19 @@ const MyProgress = React.createClass({
this.setState({ percent });
},
render() {
return <div>
<ProgressLine percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>;
return (
<div>
<ProgressLine percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
</Button>
<Button type="ghost" onClick={this.increase}>
<Icon type="plus" />
</Button>
</ButtonGroup>
</div>
);
}
});

22
components/progress/index.jsx
View File

@ -1,4 +1,4 @@
import {Circle as Progresscircle} from 'rc-progress';
import { Circle as Progresscircle } from 'rc-progress';
import React from 'react';
import assign from 'object-assign';
import Icon from '../icon';
@ -6,9 +6,9 @@ import Icon from '../icon';
const prefixCls = 'ant-progress';
const statusColorMap = {
'normal': '#2db7f5',
'exception': '#ff6600',
'success': '#87d068'
normal: '#2db7f5',
exception: '#ff6600',
success: '#87d068'
};
let Line = React.createClass({
@ -39,7 +39,7 @@ let Line = React.createClass({
const text = (typeof props.format === 'string') ?
props.format.replace('${percent}', props.percent) : props.format;
if(props.showInfo === true){
if (props.showInfo === true) {
if (props.status === 'exception') {
progressInfo = (
<span className={prefixCls + '-line-text'}>{text}</span>
@ -83,7 +83,7 @@ let Circle = React.createClass({
strokeWidth: React.PropTypes.number,
width: React.PropTypes.number,
},
getDefaultProps: function () {
getDefaultProps() {
return {
width: 132,
percent: 0,
@ -100,9 +100,9 @@ let Circle = React.createClass({
}
let style = {
'width': props.width,
'height': props.width,
'fontSize': props.width * 0.16 + 6
width: props.width,
height: props.width,
fontSize: props.width * 0.16 + 6
};
let progressInfo;
const text = (typeof props.format === 'string') ?
@ -136,6 +136,6 @@ let Circle = React.createClass({
});
export default {
Line: Line,
Circle: Circle
Line,
Circle,
};

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

@ -46,8 +46,8 @@ const Test = React.createClass({
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
<Button onClick={this.onAdd} style={{marginLeft:10}}>添加</Button>
<Button onClick={this.onRemove} style={{marginLeft:10}}>删除</Button>
<Button onClick={this.onAdd} style={{marginLeft: 10}}>添加</Button>
<Button onClick={this.onRemove} style={{marginLeft: 10}}>删除</Button>
</p>
<div className="demo-content">
<div className="demo-listBox" key="b">

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

@ -14,7 +14,7 @@ import { QueueAnim, Menu } from 'antd';
const App = React.createClass({
render() {
const key = this.props.location.pathname;
const keys = key.replace('/', '') ? [ key.replace('/', '') ] : [ 'home' ];
const keys = key.replace('/', '') ? [key.replace('/', '')] : ['home'];
return (
<div>
<Menu style={{marginBottom: 10}} mode="horizontal" selectedKeys={keys}>
@ -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>

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

@ -21,16 +21,18 @@ const App = React.createClass({
});
},
render() {
return <div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled
</Button>
return (
<div>
<Radio defaultChecked={false} disabled={this.state.disabled}>不可用</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>不可用</Radio>
<div style={{marginTop: 20}}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled
</Button>
</div>
</div>
</div>;
);
}
});

20
components/radio/demo/radiogroup.md
View File

@ -23,15 +23,17 @@ const App = React.createClass({
});
},
render() {
return <div>
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>
<Radio value="c">C</Radio>
<Radio value="d">D</Radio>
</RadioGroup>
<div style={{marginTop: 20}}>你选中的: {this.state.value}</div>
</div>;
return (
<div>
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>
<Radio value="c">C</Radio>
<Radio value="d">D</Radio>
</RadioGroup>
<div style={{marginTop: 20}}>你选中的: {this.state.value}</div>
</div>
);
}
});
ReactDOM.render(<App />, mountNode);

24
components/radio/group.jsx
View File

@ -12,15 +12,15 @@ function getCheckedValue(children) {
}
export default React.createClass({
getDefaultProps: function () {
getDefaultProps() {
return {
prefixCls: 'ant-radio-group',
disabled: false,
onChange: function () {
onChange() {
}
};
},
getInitialState: function () {
getInitialState() {
let props = this.props;
return {
value: props.value || props.defaultValue || getCheckedValue(props.children)
@ -33,17 +33,17 @@ export default React.createClass({
});
}
},
render: function () {
render() {
let props = this.props;
let children = React.Children.map(props.children, (radio) => {
if (radio.props) {
return <Radio
key={radio.props.value}
{...radio.props}
onChange={this.onRadioChange}
checked={this.state.value === radio.props.value}
disabled={radio.props.disabled || this.props.disabled}
/>;
return (
<Radio key={radio.props.value}
{...radio.props}
onChange={this.onRadioChange}
checked={this.state.value === radio.props.value}
disabled={radio.props.disabled || this.props.disabled}/>
);
}
return radio;
});
@ -53,7 +53,7 @@ export default React.createClass({
</div>
);
},
onRadioChange: function (ev) {
onRadioChange(ev) {
this.setState({
value: ev.target.value
});

24
components/select/demo/basic.md
View File

@ -14,15 +14,17 @@ function handleChange(value) {
console.log('selected ' + value);
}
ReactDOM.render(<div>
<Select defaultValue="lucy" style={{width:120}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{width:120}} disabled>
<Option value="lucy">Lucy</Option>
</Select>
</div>, mountNode);
ReactDOM.render(
<div>
<Select defaultValue="lucy" style={{width: 120}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{width: 120}} disabled>
<Option value="lucy">Lucy</Option>
</Select>
</div>
, mountNode);
````

16
components/select/demo/combobox.md
View File

@ -33,13 +33,15 @@ const Test = React.createClass({
},
render() {
// filterOption 需要设置为 false，数据是动态设置的
return <Select combobox
style={{width:200}}
onChange={this.handleChange}
filterOption={false}
searchPlaceholder="请输入账户名">
{this.state.options}
</Select>;
return (
<Select combobox
style={{width: 200}}
onChange={this.handleChange}
filterOption={false}
searchPlaceholder="请输入账户名">
{this.state.options}
</Select>
);
}
});

22
components/select/demo/coordinate.md
View File

@ -23,13 +23,13 @@ const App = React.createClass({
getInitialState() {
return {
cities: cityData[provinceData[0]],
secondCity:cityData[provinceData[0]][0]
secondCity: cityData[provinceData[0]][0]
};
},
handleProvinceChange(value) {
this.setState({
cities: cityData[value],
secondCity:cityData[value][0]
secondCity: cityData[value][0]
});
},
onSecondCityChange(value) {
@ -44,14 +44,16 @@ const App = React.createClass({
const cityOptions = this.state.cities.map(function(city) {
return <Option key={city}>{city}</Option>;
});
return <div>
<Select defaultValue={provinceData[0]} style={{width: 90}} onChange={this.handleProvinceChange}>
{provinceOptions}
</Select>
<Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
{cityOptions}
</Select>
</div>;
return (
<div>
<Select defaultValue={provinceData[0]} style={{width: 90}} onChange={this.handleProvinceChange}>
{provinceOptions}
</Select>
<Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
{cityOptions}
</Select>
</div>
);
}
});
ReactDOM.render(<App />, mountNode);

4
components/select/demo/multiple.md
View File

@ -22,8 +22,8 @@ function handleChange(value) {
ReactDOM.render(
<Select multiple
style={{width:400}}
defaultValue={['a10', 'c12']} onChange={handleChange}>
style={{width: 400}}
defaultValue={['a10', 'c12']} onChange={handleChange}>
{children}
</Select>
, mountNode);

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

@ -17,7 +17,7 @@ function handleChange(value) {
ReactDOM.render(
<Select defaultValue="lucy"
style={{width:200}}
style={{width: 200}}
showSearch={false}
onChange={handleChange}>
<OptGroup label="Manager">

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

@ -15,9 +15,10 @@ function handleChange(value) {
}
ReactDOM.render(
<Select defaultValue="lucy" showSearch style={{width:200}}
searchPlaceholder="输入"
onChange={handleChange}>
<Select defaultValue="lucy" showSearch style={{width: 200}}
notFoundContent="找不到呐！"
searchPlaceholder="输入"
onChange={handleChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>

6
components/select/demo/size.md
View File

@ -16,19 +16,19 @@ function handleChange(value) {
ReactDOM.render(
<div>
<Select size="large" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
<Select size="large" defaultValue="lucy" style={{width: 200}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{width:200}} onChange={handleChange}>
<Select defaultValue="lucy" style={{width: 200}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
<Select size="small" defaultValue="lucy" style={{width:200}} onChange={handleChange}>
<Select size="small" defaultValue="lucy" style={{width: 200}} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>

4
components/select/demo/tags.md
View File

@ -22,8 +22,8 @@ function handleChange(value) {
ReactDOM.render(
<Select tags
style={{width: '100%'}}
searchPlaceholder="标签模式"
style={{width: '100%'}}
searchPlaceholder="标签模式"
onChange={handleChange}>
{children}
</Select>

1
components/select/index.md
View File

@ -36,6 +36,7 @@
| onSearch | 文本框值变化时回调 | function(value: String) | |
| placeholder | 选择框默认文字 | string | 无 |
| searchPlaceholder | 搜索框默认文字 | string | 无 |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
| combobox | 输入框自动提示模式 | boolean | false |

2
components/slider/index.jsx
View File

@ -9,7 +9,7 @@ export default React.createClass({
};
},
render() {
const {isIncluded, marks, index, defaultIndex, ...rest} = this.props;
const { isIncluded, marks, index, defaultIndex, ...rest } = this.props;
if (isIncluded !== undefined) {
// 兼容 `isIncluded`

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

@ -21,13 +21,17 @@ const Card = React.createClass({
});
},
render() {
const container = <Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />;
return <div>
<Spin spining={this.state.loading}>{container}</Spin>
切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
</div>;
const container = (
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info" />
);
return (
<div>
<Spin spining={this.state.loading}>{container}</Spin>
切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
</div>
);
}
});

3
components/spin/index.jsx
View File

@ -53,9 +53,8 @@ const AntSpin = React.createClass({
</div>
</div>
);
} else {
return spinElement;
}
return spinElement;
}
});

10
components/steps/index.jsx
View File

@ -18,11 +18,11 @@ const AntSteps = React.createClass({
}
return (
<Steps size={this.props.size}
current={this.props.current}
direction={this.props.direction}
iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={maxDescriptionWidth}
prefixCls={this.props.prefixCls}>
current={this.props.current}
direction={this.props.direction}
iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={maxDescriptionWidth}
prefixCls={this.props.prefixCls}>
{this.props.children}
</Steps>
);

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

@ -9,10 +9,12 @@
````jsx
import { Switch } from 'antd';
function onChange(checked){
function onChange(checked) {
console.log('switch to ' + checked);
}
ReactDOM.render(<Switch defaultChecked={false} onChange={onChange} />,
mountNode);
ReactDOM.render(
<Switch defaultChecked={false} onChange={onChange} />,
mountNode
);
````

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

@ -15,18 +15,20 @@ const Test = React.createClass({
disabled: true
};
},
toggle(){
toggle() {
this.setState({
disabled: !this.state.disabled
});
},
render() {
return <div>
<Switch disabled={this.state.disabled} />
<br />
<br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div>;
return (
<div>
<Switch disabled={this.state.disabled} />
<br />
<br />
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
</div>
);
}
});

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

@ -56,7 +56,9 @@ const Test = React.createClass({
sortOrder: sorter.order
};
for (let key in filters) {
params[key] = filters[key];
if (filters.hasOwnProperty(key)) {
params[key] = filters[key];
}
}
this.fetch(params);
},
@ -85,10 +87,10 @@ const Test = React.createClass({
render() {
return (
<Table columns={columns}
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange} />
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange} />
);
}
});

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

@ -28,15 +28,17 @@ const columns = [{
title: '操作',
key: 'operation',
render: function(text, record) {
return <span>
<a href="#">操作一{record.name}</a>
<span className="ant-divider"></span>
<a href="#">操作二</a>
<span className="ant-divider"></span>
<a href="#" className="ant-dropdown-link">
更多 <Icon type="down" />
</a>
</span>;
return (
<span>
<a href="#">操作一{record.name}</a>
<span className="ant-divider"></span>
<a href="#">操作二</a>
<span className="ant-divider"></span>
<a href="#" className="ant-dropdown-link">
更多 <Icon type="down" />
</a>
</span>
);
}
}];
const data = [{

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

@ -30,14 +30,13 @@ const columns = [{
render: function(text, row, index) {
if (index < 4) {
return <a href="#">{text}</a>;
} else {
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5
}
};
}
return {
children: <a href="#">{text}</a>,
props: {
colSpan: 5
}
};
}
}, {
title: '年龄',
@ -50,7 +49,7 @@ const columns = [{
render: function(value, row, index) {
let obj = {
children: value,
props:{}
props: {}
};
// 第三列的第三行行合并
if (index === 2) {

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

@ -48,10 +48,12 @@ const App = React.createClass({
});
},
render() {
return <div>
<Table columns={columns} dataSource={data} loading={this.state.loading} />
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>;
return (
<div>
<Table columns={columns} dataSource={data} loading={this.state.loading} />
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>
);
}
});

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