Compare commits

..

2 Commits
1.4.0 ... 1.3.2

Author SHA1 Message Date
ddcat1115
e051e8ae32 format webpack.config.js 2016-06-06 15:12:38 +08:00
ddcat1115
9558aa2c64 fix #1970 2016-06-06 13:53:05 +08:00
148 changed files with 589 additions and 1171 deletions

View File

@@ -28,6 +28,7 @@ const eslintrc = {
'arrow-body-style': 0,
'react/sort-comp': 0,
'react/prop-types': 0,
'react/jsx-closing-bracket-location': 0,
'react/jsx-first-prop-new-line': 0,
'import/no-unresolved': 0,
'no-param-reassign': 0,

View File

@@ -16,13 +16,11 @@ ReactDOM.render(<div>
<Alert message="警告提示的文案"
type="warning"
closable
onClose={onClose}
/>
onClose={onClose} />
<Alert message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
closable
onClose={onClose}
/>
onClose={onClose} />
</div>, mountNode);
````

View File

@@ -11,21 +11,17 @@ import { Alert } from 'antd';
ReactDOM.render(<div>
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success"
/>
type="success" />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
/>
type="info" />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warning"
/>
type="warning" />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
/>
type="error" />
</div>, mountNode);
````

View File

@@ -16,24 +16,20 @@ ReactDOM.render(<div>
<Alert message="成功提示的文案"
description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
type="success"
showIcon
/>
showIcon />
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
showIcon
/>
showIcon />
<Alert
message="警告提示的文案"
description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
type="warning"
showIcon
/>
showIcon />
<Alert
message="错误提示的文案"
description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
type="error"
showIcon
/>
showIcon />
</div>, mountNode);
````

View File

@@ -82,8 +82,7 @@ export default class Alert extends React.Component {
<Animate component=""
showProp="data-show"
transitionName="slide-up"
onEnd={this.animationEnd}
>
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>

View File

@@ -46,13 +46,11 @@ export default class Badge extends React.Component {
<Animate component=""
showProp="data-show"
transitionName={`${prefixCls}-zoom`}
transitionAppear
>
transitionAppear>
{
hidden ? null :
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
count={count} style={style}
/>
count={count} style={style} />
}
</Animate>
</span>

View File

@@ -1,24 +1,12 @@
import React, { cloneElement } from 'react';
import BreadcrumbItem from './BreadcrumbItem';
const defaultNameRender = (breadcrumbName, route, params) => {
if (!breadcrumbName) {
return null;
}
const paramsKeys = Object.keys(params).join('|');
const name = breadcrumbName.replace(
new RegExp(`:(${paramsKeys})`, 'g'),
(replacement, key) => params[key] || replacement
);
return <span>{name}</span>;
};
export default class Breadcrumb extends React.Component {
static defaultProps = {
prefixCls: 'ant-breadcrumb',
separator: '/',
linkRender: (href, name) => <a href={`#${href}`}>{name}</a>,
nameRender: defaultNameRender,
nameRender: (name) => <span>{name}</span>,
}
static propTypes = {
@@ -38,7 +26,6 @@ export default class Breadcrumb extends React.Component {
const { separator, prefixCls, routes, params, children, linkRender, nameRender } = this.props;
if (routes && routes.length > 0) {
const paths = [];
const lastPath = routes.length - 1;
crumbs = routes.map((route, i) => {
route.path = route.path || '';
let path = route.path.replace(/^\//, '');
@@ -48,12 +35,21 @@ export default class Breadcrumb extends React.Component {
if (path) {
paths.push(path);
}
const name = nameRender(route.breadcrumbName, route, params);
if (name) {
const link = (i === lastPath) ? name : linkRender(`/${paths.join('/')}`, name, paths);
return <BreadcrumbItem separator={separator} key={route.breadcrumbName || i}>{link}</BreadcrumbItem>;
if (!route.breadcrumbName) {
return null;
}
return null;
const name = route.breadcrumbName.replace(/:(.*)/g, (replacement, key) => {
return params[key] || replacement;
});
let link;
if (i === routes.length - 1) {
link = nameRender(name);
} else {
link = linkRender(`/${paths.join('/')}`, name);
}
return <BreadcrumbItem separator={separator} key={name}>{link}</BreadcrumbItem>;
});
} else {
crumbs = React.Children.map(children, (element, index) => {

View File

@@ -7,40 +7,43 @@ title: 路由
`react-router@2.x` 进行结合使用。
````jsx
import { Router, Route, Link, hashHistory } from 'react-router';
const ReactRouter = require('react-router');
let { Router, Route, Link, hashHistory } = ReactRouter;
import { Breadcrumb } from 'antd';
const Apps = () => (
<ul className="app-list">
<li>
<Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link>
</li>
<li>
<Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link>
</li>
</ul>
);
function Apps() {
return (
<ul className="app-list">
<li>
<Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link>
</li>
<li>
<Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link>
</li>
</ul>
);
}
const Home = (props) => (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
{props.children || 'Home'}
<div
style={{
function Home(props) {
return (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
{props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc',
}}
>
点击上面的导航切换页面,面包屑在下面:
}}>
点击上面的导航切换页面,面包屑在下面:
</div>
<Breadcrumb {...props} />
</div>
<Breadcrumb {...props} />
</div>
);
);
}
ReactDOM.render(
<Router history={hashHistory}>

View File

@@ -29,5 +29,5 @@ english: Breadcrumb
| routes | router 的路由栈信息 | Array | | - |
| params | 路由的参数 | Object | | - |
| separator | 分隔符自定义 | String or Element | | '/' |
| linkRender | 自定义链接函数,和 react-router 配置使用 | Function(href, name, paths) | | - |
| nameRender | 自定义文字函数,和 react-router 配置使用 | Function(breadcrumbName, route, params) | | - |
| linkRender | 自定义链接函数,和 react-router 配置使用 | Function(href, name) | | - |
| nameRender | 自定义链接函数,和 react-router 配置使用 | Function(name) | | - |

View File

@@ -104,8 +104,7 @@ export default class Button extends React.Component {
type={htmlType || 'button'}
className={classes}
onMouseUp={this.handleMouseUp}
onClick={this.handleClick}
>
onClick={this.handleClick}>
{iconType ? <Icon type={iconType} /> : null}{kids}
</button>
);

View File

@@ -45,8 +45,7 @@ export default class Header extends React.Component {
dropdownMenuStyle={{ minWidth: 103 }}
className={`${prefixCls}-year-select`}
onChange={this.onYearChange}
value={String(year)}
>
value={String(year)}>
{options}
</Select>
);
@@ -70,8 +69,7 @@ export default class Header extends React.Component {
dropdownMatchSelectWidth={false}
className={`${prefixCls}-month-select`}
value={String(month)}
onChange={this.onMonthChange}
>
onChange={this.onMonthChange}>
{options}
</Select>
);

View File

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

View File

@@ -139,8 +139,7 @@ export default class Calendar extends React.Component {
locale={locale.lang}
prefixCls={prefixCls}
onTypeChange={this.setType}
onValueChange={this.setValue}
/>
onValueChange={this.setValue} />
<FullCalendar
{...props}
Select={noop}
@@ -150,8 +149,7 @@ export default class Calendar extends React.Component {
showHeader={false}
value={value}
monthCellRender={this.monthCellRender}
dateCellRender={this.dateCellRender}
/>
dateCellRender={this.dateCellRender} />
</div>
);
}

View File

@@ -35,11 +35,11 @@ ReactDOM.render(
````css
/* Increase grid spacing of 16px */
.code-box-demo .ant-row {
.code-box-demo .row {
margin-left: -8px;
margin-right: -8px;
}
.code-box-demo .ant-row > div {
.code-box-demo .row > div {
padding: 0 8px;
}
````

View File

@@ -56,7 +56,6 @@ ReactDOM.render(
options={options}
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
displayRender={displayRender}
style={{ width: 200 }}
/>
style={{ width: 200 }} />
, mountNode);
````

View File

@@ -43,7 +43,6 @@ function displayRender(label) {
ReactDOM.render(
<Cascader options={options} expandTrigger="hover"
displayRender={displayRender} onChange={onChange}
/>
displayRender={displayRender} onChange={onChange} />
, mountNode);
````

View File

@@ -80,8 +80,7 @@ export default class Cascader extends React.Component {
const clearIcon = (allowClear && !disabled && this.state.value.length > 0) ?
<Icon type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/> : null;
onClick={this.clearSelection} /> : null;
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: this.state.popupVisible,
@@ -100,20 +99,17 @@ export default class Cascader extends React.Component {
value={this.state.value}
popupVisible={this.state.popupVisible}
onPopupVisibleChange={this.handlePopupVisibleChange}
onChange={this.handleChange}
>
onChange={this.handleChange}>
{children ||
<span
style={style}
className={pickerCls}
>
className={pickerCls}>
<Input {...otherProps}
placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
className={`${prefixCls}-input ant-input ${sizeCls}`}
value={null}
disabled={disabled}
readOnly
/>
readOnly />
<span className={`${prefixCls}-picker-label`}>{this.getLabel()}</span>
{clearIcon}
<Icon type="down" className={arrowCls} />

View File

@@ -1,6 +1,5 @@
import React from 'react';
import Checkbox from './index';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class CheckboxGroup extends React.Component {
static defaultProps = {
@@ -31,9 +30,6 @@ export default class CheckboxGroup extends React.Component {
});
}
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
getOptions() {
const { options } = this.props;
return options.map(option => {
@@ -68,8 +64,7 @@ export default class CheckboxGroup extends React.Component {
<Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
checked={this.state.value.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)}
className="ant-checkbox-group-item" key={option.value}
>
className="ant-checkbox-group-item" key={option.value}>
{option.label}
</Checkbox>
)

View File

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

View File

@@ -2,16 +2,12 @@ import RcCheckbox from 'rc-checkbox';
import React from 'react';
import CheckboxGroup from './Group';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class Checkbox extends React.Component {
static Group = CheckboxGroup;
static defaultProps = {
prefixCls: 'ant-checkbox',
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
render() {
const { prefixCls, style, children, className, ...restProps } = this.props;
const classString = classNames({

View File

@@ -126,16 +126,14 @@ export default class RangePicker extends React.Component {
onChange={props.handleInputChange}
value={start ? props.getFormatter().format(start) : ''}
placeholder={startPlaceholder}
className="ant-calendar-range-picker-input"
/>
className="ant-calendar-range-picker-input" />
<span className="ant-calendar-range-picker-separator"> ~ </span>
<input
disabled={disabled}
onChange={props.handleInputChange}
value={end ? props.getFormatter().format(end) : ''}
placeholder={endPlaceholder}
className="ant-calendar-range-picker-input"
/>
className="ant-calendar-range-picker-input" />
<span className="ant-calendar-picker-icon" />
</span>
);

View File

@@ -94,8 +94,7 @@ export default function createPicker(TheCalendar) {
onChange={props.handleInputChange}
value={value ? props.getFormatter().format(value) : ''}
placeholder={placeholder}
className={props.pickerInputClass}
/>
className={props.pickerInputClass} />
<span className="ant-calendar-picker-icon" />
</span>
);

View File

@@ -45,13 +45,11 @@ const DateRange = React.createClass({
<DatePicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onStartChange}
/>
onChange={this.onStartChange} />
<DatePicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onEndChange}
/>
onChange={this.onEndChange} />
</div>
);
},

View File

@@ -103,7 +103,7 @@ export default function wrapPicker(Picker, defaultFormat) {
placeholder={locale.timePickerLocale.placeholder}
locale={locale.timePickerLocale}
transitionName="slide-up"
/>
/>
) : null;
return (

View File

@@ -33,8 +33,7 @@ const OverlayVisible = React.createClass({
return (
<Dropdown overlay={menu}
onVisibleChange={this.handleVisibleChange}
visible={this.state.visible}
>
visible={this.state.visible}>
<a className="ant-dropdown-link" href="#">
鼠标移入 <Icon type="down" />
</a>

View File

@@ -1,6 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class Form extends React.Component {
static defaultProps = {
@@ -23,10 +22,6 @@ export default class Form extends React.Component {
form: React.PropTypes.object,
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
getChildContext() {
return {
form: this.props.form,

View File

@@ -1,6 +1,9 @@
import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
function prefixClsFn(prefixCls, ...args) {
return args.map((s) => `${prefixCls}-${s}`).join(' ');
}
export default class FormItem extends React.Component {
static defaultProps = {
@@ -25,17 +28,13 @@ export default class FormItem extends React.Component {
form: React.PropTypes.object,
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
getLayoutClass(colDef) {
if (!colDef) {
return '';
}
const { span, offset } = colDef;
const col = span ? `ant-col-${span}` : '';
const offsetCol = offset ? ` ant-col-offset-${offset}` : '';
const col = span ? `col-${span}` : '';
const offsetCol = offset ? ` col-offset-${offset}` : '';
return col + offsetCol;
}
@@ -71,10 +70,11 @@ export default class FormItem extends React.Component {
}
renderHelp() {
const prefixCls = this.props.prefixCls;
const props = this.props;
const prefixCls = props.prefixCls;
const help = this.getHelpMsg();
return help ? (
<div className={`${prefixCls}-explain`} key="help">
<div className={prefixClsFn(prefixCls, 'explain')} key="help">
{help}
</div>
) : null;
@@ -83,7 +83,7 @@ export default class FormItem extends React.Component {
renderExtra() {
const { prefixCls, extra } = this.props;
return extra ? (
<span className={`${prefixCls}-extra`}>{extra}</span>
<span className={prefixClsFn(prefixCls, 'extra')}>{extra}</span>
) : null;
}

View File

@@ -18,22 +18,19 @@ ReactDOM.render(
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
</Col>
@@ -41,22 +38,19 @@ ReactDOM.render(
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
</Col>
@@ -64,22 +58,19 @@ ReactDOM.render(
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
</Col>
@@ -105,7 +96,7 @@ ReactDOM.render(
}
/* 由于输入标签长度不确定,所以需要微调使之看上去居中 */
.ant-advanced-search-form > .ant-row {
.ant-advanced-search-form > .row {
position: relative;
left: -6px;
}

View File

@@ -23,8 +23,7 @@ ReactDOM.render(
id="control-input"
label="输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input id="control-input" placeholder="Please enter..." />
</FormItem>
@@ -32,8 +31,7 @@ ReactDOM.render(
id="control-textarea"
label="文本域"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Input type="textarea" id="control-textarea" rows="3" />
</FormItem>
@@ -41,8 +39,7 @@ ReactDOM.render(
id="select"
label="Select 选择器"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}
>
wrapperCol={{ span: 14 }}>
<Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
@@ -54,8 +51,7 @@ ReactDOM.render(
<FormItem
label="Checkbox 多选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
wrapperCol={{ span: 18 }} >
<Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
<Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
<Checkbox className="ant-checkbox-vertical" disabled>选项三(不可选)</Checkbox>
@@ -64,8 +60,7 @@ ReactDOM.render(
<FormItem
label="Checkbox 多选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
wrapperCol={{ span: 18 }} >
<Checkbox className="ant-checkbox-inline">选项一</Checkbox>
<Checkbox className="ant-checkbox-inline">选项二</Checkbox>
<Checkbox className="ant-checkbox-inline">选项三</Checkbox>
@@ -74,8 +69,7 @@ ReactDOM.render(
<FormItem
label="Radio 单选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
>
wrapperCol={{ span: 18 }} >
<RadioGroup defaultValue="b">
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>

View File

@@ -42,14 +42,12 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名"
>
label="用户名">
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
>
label="密码">
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
</FormItem>
</Form>

View File

@@ -26,20 +26,17 @@ let Demo = React.createClass({
<Form horizontal onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="用户名"
>
label="用户名">
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
>
label="密码">
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
</FormItem>
<FormItem
{...formItemLayout}
label="您的性别"
>
label="您的性别">
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
@@ -48,14 +45,12 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="备注"
help="随便写点什么"
>
help="随便写点什么">
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
</FormItem>
<FormItem
{...formItemLayout}
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}
>
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
<Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>

View File

@@ -20,18 +20,14 @@ let Demo = React.createClass({
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="账户"
>
label="账户">
<Input placeholder="请输入账户名"
{...getFieldProps('userName')}
/>
{...getFieldProps('userName')} />
</FormItem>
<FormItem
label="密码"
>
label="密码">
<Input type="password" placeholder="请输入密码"
{...getFieldProps('password')}
/>
{...getFieldProps('password')} />
</FormItem>
<FormItem>
<Checkbox {...getFieldProps('agreement')}>记住我</Checkbox>

View File

@@ -16,8 +16,7 @@ ReactDOM.render(
<FormItem
label="标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
</FormItem>
@@ -25,16 +24,14 @@ ReactDOM.render(
label="标签输入框"
labelCol={{ span: 6 }}
validateStatus="success"
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2" />
</FormItem>
<FormItem
label="select 标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<InputGroup>
<Input id="site4" placeholder="www.mysite" />
<div className="ant-input-group-wrap">
@@ -51,8 +48,7 @@ ReactDOM.render(
<FormItem
label="输入身份证"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<InputGroup>
<Col span="6">
<Input id="certNo1" />
@@ -72,8 +68,7 @@ ReactDOM.render(
<FormItem
label="电话号码"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
>
wrapperCol={{ span: 16 }}>
<InputGroup>
<Col span="4">
<Input id="tel1" defaultValue="086" />

View File

@@ -46,19 +46,16 @@ let Demo = React.createClass({
<FormItem
label="InputNumber 数字输入框"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
wrapperCol={{ span: 10 }}>
<InputNumber min={1} max={10} style={{ width: 100 }}
{...getFieldProps('inputNumber', { initialValue: 3 })}
/>
{...getFieldProps('inputNumber', { initialValue: 3 })} />
<span className="ant-form-text"> 台机器</span>
</FormItem>
<FormItem
label="我是标题"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
wrapperCol={{ span: 10 }}>
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text">
<a href="#">链接文字</a>
@@ -69,8 +66,7 @@ let Demo = React.createClass({
label="Switch 开关"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
>
required>
<Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
</FormItem>
@@ -78,8 +74,7 @@ let Demo = React.createClass({
label="Slider 滑动输入条"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
>
required>
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')} />
</FormItem>
@@ -87,11 +82,9 @@ let Demo = React.createClass({
label="Select 选择器"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
>
required>
<Select style={{ width: 200 }}
{...getFieldProps('select')}
>
{...getFieldProps('select')}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
@@ -104,16 +97,14 @@ let Demo = React.createClass({
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
hasFeedback
>
hasFeedback>
<Cascader style={{ width: 200 }} options={areaData} {...getFieldProps('area')} />
</FormItem>
<FormItem
label="DatePicker 日期选择框"
labelCol={{ span: 8 }}
required
>
required>
<Col span="6">
<FormItem>
<DatePicker {...getFieldProps('startDate')} />
@@ -134,15 +125,13 @@ let Demo = React.createClass({
label="TimePicker 时间选择器"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
>
required>
<TimePicker {...getFieldProps('time')} />
</FormItem>
<FormItem
label="选项"
labelCol={{ span: 8 }}
>
labelCol={{ span: 8 }}>
<RadioGroup {...getFieldProps('rg')}>
<RadioButton value="a">选项一</RadioButton>
<RadioButton value="b">选项二</RadioButton>
@@ -154,8 +143,7 @@ let Demo = React.createClass({
label="logo图"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
help="提示信息要长长长长长长长长长长长长长长"
>
help="提示信息要长长长长长长长长长长长长长长">
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
{...getFieldProps('upload', {
valuePropName: 'fileList',

View File

@@ -114,43 +114,36 @@ let BasicDemo = React.createClass({
{...formItemLayout}
label="用户名"
hasFeedback
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
>
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
<Input {...nameProps} placeholder="实时校验,输入 JasonWood 看看" />
</FormItem>
<FormItem
{...formItemLayout}
label="邮箱"
hasFeedback
>
hasFeedback>
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码"
hasFeedback
>
hasFeedback>
<Input {...passwdProps} type="password" autoComplete="off"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
</FormItem>
<FormItem
{...formItemLayout}
label="确认密码"
hasFeedback
>
hasFeedback>
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
/>
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
</FormItem>
<FormItem
{...formItemLayout}
label="备注"
>
label="备注">
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
</FormItem>

View File

@@ -145,8 +145,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="密码"
>
label="密码">
<Input {...passProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="pass"
@@ -162,8 +161,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="确认密码"
>
label="确认密码">
<Input {...rePassProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="rePass"

View File

@@ -110,8 +110,7 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="国籍"
>
label="国籍">
<Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
@@ -123,8 +122,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="喜欢的颜色"
>
label="喜欢的颜色">
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
@@ -136,8 +134,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="性别"
>
label="性别">
<RadioGroup {...radioProps}>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
@@ -147,53 +144,44 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="兴趣爱好"
>
label="兴趣爱好">
<Checkbox {...getFieldProps('eat', {
valuePropName: 'checked',
})}
>吃饭饭</Checkbox>
})}>吃饭饭</Checkbox>
<Checkbox {...getFieldProps('sleep', {
valuePropName: 'checked',
})}
>睡觉觉</Checkbox>
})}>睡觉觉</Checkbox>
<Checkbox {...getFieldProps('beat', {
valuePropName: 'checked',
})}
>打豆豆</Checkbox>
})}>打豆豆</Checkbox>
</FormItem>
<FormItem
{...formItemLayout}
label="生日"
>
label="生日">
<DatePicker {...birthdayProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="选一个时间"
>
label="选一个时间">
<TimePicker {...timeProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="8~12间的质数"
>
label="8~12间的质数">
<InputNumber {...primeNumberProps} min={8} max={12} />
</FormItem>
<FormItem
{...formItemLayout}
label="选择地址"
>
label="选择地址">
<Cascader {...addressProps} options={address} />
</FormItem>
<FormItem
wrapperCol={{ span: 12, offset: 7 }}
>
wrapperCol={{ span: 12, offset: 7 }} >
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重置</Button>

View File

@@ -22,8 +22,7 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="error"
help="请输入数字和字母组合"
>
help="请输入数字和字母组合">
<Input defaultValue="无效选择" id="error" />
</FormItem>
@@ -31,8 +30,7 @@ ReactDOM.render(
label="警告校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="warning"
>
validateStatus="warning">
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@@ -42,8 +40,7 @@ ReactDOM.render(
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="validating"
help="信息审核中..."
>
help="信息审核中...">
<Input defaultValue="我是被校验的内容" id="validating" />
</FormItem>
@@ -52,8 +49,7 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="success"
>
validateStatus="success">
<Input defaultValue="我是正文" id="success" />
</FormItem>
@@ -62,8 +58,7 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="warning"
>
validateStatus="warning">
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@@ -73,16 +68,14 @@ ReactDOM.render(
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="error"
help="请输入数字和字母组合"
>
help="请输入数字和字母组合">
<Input defaultValue="无效选择" id="error" />
</FormItem>
<FormItem
label="行内校验"
labelCol={{ span: 5 }}
help
>
help>
<Col span="6">
<FormItem validateStatus="error" help="请选择正确日期">
<DatePicker />

View File

@@ -394,7 +394,7 @@ form {
}
}
.ant-advanced-search-form {
.advanced-search-form {
.@{form-prefix-cls}-item {
margin-bottom: 16px;
}

View File

@@ -1,6 +1,5 @@
import React, { Component, PropTypes } from 'react';
import React from 'react';
import classNames from 'classnames';
import calculateNodeHeight from './calculateNodeHeight';
function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
@@ -9,22 +8,7 @@ function fixControlledValue(value) {
return value;
}
function onNextFrame(cb) {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame(cb);
}
return window.setTimeout(cb, 1);
}
function clearNextFrameAction(nextFrameId) {
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(nextFrameId);
} else {
window.clearTimeout(nextFrameId);
}
}
export default class Input extends Component {
export default class Input extends React.Component {
static defaultProps = {
defaultValue: '',
disabled: false,
@@ -32,47 +16,24 @@ export default class Input extends Component {
type: 'text',
onPressEnter() {},
onKeyDown() {},
autosize: false,
}
static propTypes = {
type: PropTypes.string,
id: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
type: React.PropTypes.string,
id: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
size: PropTypes.oneOf(['small', 'default', 'large']),
disabled: PropTypes.bool,
value: PropTypes.any,
defaultValue: PropTypes.any,
className: PropTypes.string,
addonBefore: PropTypes.node,
addonAfter: PropTypes.node,
prefixCls: PropTypes.string,
autosize: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
onPressEnter: PropTypes.func,
onKeyDown: PropTypes.func,
}
constructor(props) {
super(props);
this.state = {
textareaStyles: null,
};
}
componentDidMount() {
this.resizeTextarea();
}
componentWillReceiveProps(nextProps) {
// Re-render with the new content then recalculate the height as required.
if (this.props.value !== nextProps.value) {
if (this.nextFrameActionId) {
clearNextFrameAction(this.nextFrameActionId);
}
this.nextFrameActionId = onNextFrame(this.resizeTextarea);
}
size: React.PropTypes.oneOf(['small', 'default', 'large']),
disabled: React.PropTypes.bool,
value: React.PropTypes.any,
defaultValue: React.PropTypes.any,
className: React.PropTypes.string,
addonBefore: React.PropTypes.node,
addonAfter: React.PropTypes.node,
prefixCls: React.PropTypes.string,
onPressEnter: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
}
handleKeyDown = (e) => {
@@ -82,24 +43,6 @@ export default class Input extends Component {
this.props.onKeyDown(e);
}
handleTextareaChange = (e) => {
this.resizeTextarea();
if (this.props.onChange) {
this.props.onChange(e);
}
}
resizeTextarea = () => {
const { type, autosize } = this.props;
if (type !== 'textarea' || !autosize || !this.refs.input) {
return;
}
const minRows = autosize ? autosize.minRows : null;
const maxRows = autosize ? autosize.maxRows : null;
const textareaStyles = calculateNodeHeight(this.refs.input, false, minRows, maxRows);
this.setState({ textareaStyles });
}
renderLabledInput(children) {
const props = this.props;
const wrapperClassName = `${props.prefixCls}-group`;
@@ -144,6 +87,7 @@ export default class Input extends Component {
[props.className]: !!props.className,
});
let placeholder = props.placeholder;
if ('value' in props) {
props.value = fixControlledValue(props.value);
// Input elements must be either controlled or uncontrolled,
@@ -154,26 +98,13 @@ export default class Input extends Component {
switch (props.type) {
case 'textarea':
return (
<textarea
{...props}
style={{
...props.style,
...this.state.textareaStyles,
}}
className={inputClassName}
onKeyDown={this.handleKeyDown}
onChange={this.handleTextareaChange}
ref="input"
/>
<textarea {...props} placeholder={placeholder}
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
);
default:
return (
<input
{...props}
className={inputClassName}
onKeyDown={this.handleKeyDown}
ref="input"
/>
<input {...props} placeholder={placeholder}
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
);
}
}

View File

@@ -1,143 +0,0 @@
// Thanks to https://github.com/andreypopp/react-textarea-autosize/
/**
* calculateNodeHeight(uiTextNode, useCache = false)
*/
const HIDDEN_TEXTAREA_STYLE = `
min-height:0 !important;
max-height:none !important;
height:0 !important;
visibility:hidden !important;
overflow:hidden !important;
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important
`;
const SIZING_STYLE = [
'letter-spacing',
'line-height',
'padding-top',
'padding-bottom',
'font-family',
'font-weight',
'font-size',
'text-rendering',
'text-transform',
'width',
'text-indent',
'padding-left',
'padding-right',
'border-width',
'box-sizing',
];
let computedStyleCache = {};
let hiddenTextarea;
function calculateNodeStyling(node, useCache = false) {
const nodeRef = (
node.getAttribute('id') ||
node.getAttribute('data-reactid') ||
node.getAttribute('name')
);
if (useCache && computedStyleCache[nodeRef]) {
return computedStyleCache[nodeRef];
}
const style = window.getComputedStyle(node);
const boxSizing = (
style.getPropertyValue('box-sizing') ||
style.getPropertyValue('-moz-box-sizing') ||
style.getPropertyValue('-webkit-box-sizing')
);
const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) +
parseFloat(style.getPropertyValue('padding-top'))
);
const borderSize = (
parseFloat(style.getPropertyValue('border-bottom-width')) +
parseFloat(style.getPropertyValue('border-top-width'))
);
const sizingStyle = SIZING_STYLE
.map(name => `${name}:${style.getPropertyValue(name)}`)
.join(';');
const nodeInfo = {
sizingStyle,
paddingSize,
borderSize,
boxSizing,
};
if (useCache && nodeRef) {
computedStyleCache[nodeRef] = nodeInfo;
}
return nodeInfo;
}
export default function calculateNodeHeight(
uiTextNode,
useCache = false,
minRows = null,
maxRows = null
) {
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}
// Copy all CSS properties that have an impact on the height of the content in
// the textbox
let {
paddingSize, borderSize,
boxSizing, sizingStyle,
} = calculateNodeStyling(uiTextNode, useCache);
// Need to have the overflow attribute to hide the scrollbar otherwise
// text-lines will not calculated properly as the shadow will technically be
// narrower for content
hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
let minHeight = -Infinity;
let maxHeight = Infinity;
let height = hiddenTextarea.scrollHeight;
if (boxSizing === 'border-box') {
// border-box: add border, since height = content + padding + border
height = height + borderSize;
} else if (boxSizing === 'content-box') {
// remove padding, since height = content
height = height - paddingSize;
}
if (minRows !== null || maxRows !== null) {
// measure height of a textarea with a single row
hiddenTextarea.value = '';
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (minRows !== null) {
minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
}
if (maxRows !== null) {
maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
}
return { height, minHeight, maxHeight };
}

View File

@@ -1,18 +0,0 @@
---
order: 6
title: 适应文本高度的文本域
---
`autosize` 属性适用于 `textarea` 节点,并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象,指定最小行数和最大行数。
````jsx
import { Input } from 'antd';
ReactDOM.render(
<div>
<Input type="textarea" placeholder="自适应内容高度" autosize />
<div style={{ margin: '24px 0' }} />
<Input type="textarea" placeholder="有最大高度和最小高度" autosize={{ minRows: 2, maxRows: 6 }} />
</div>
, mountNode);
````

View File

@@ -46,8 +46,7 @@ const SearchInput = React.createClass({
<div className="ant-search-input-wrapper" style={style}>
<InputGroup className={searchCls}>
<Input {...restProps} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
/>
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch} />
<div className="ant-input-group-wrap">
<Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
</div>
@@ -59,7 +58,6 @@ const SearchInput = React.createClass({
ReactDOM.render(
<SearchInput placeholder="input search text"
onSearch={value => console.log(value)} style={{ width: 200 }}
/>
onSearch={value => console.log(value)} style={{ width: 200 }} />
, mountNode);
````

View File

@@ -16,8 +16,8 @@ english: Input
### Input
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|-----------------------------------------|------------|-------|--------|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|------------------------------------------|------------|-------|--------|
| type | 【必须】声明 input 类型,同原生 input 标签的 type 属性。另外提供 `type="textarea"`。 | string | | 'text' |
| id | id | number 或 string | | |
| value | value 值 | any | | |
@@ -26,8 +26,7 @@ english: Input
| disabled | 是否禁用状态,默认为 false | bool | | false |
| addonBefore | 带标签的 input设置前置标签 | node | | |
| addonAfter | 带标签的 input设置后置标签 | node | | |
| onPressEnter | 按下回车的回调 | function(e) | | |
| autosize | 自适应内容高度,只对 `type="textarea"` 有效 | bool or object | `true` or `{ minRows: 2, maxRows: 6 }` | false |
| onPressEnter | 按下回车的回调 | function(e) | | |
> 如果 `Input` 在 `Form.Item` 内,并且 `Form.Item` 设置了 `id` 和 `options` 属性,则 `value` `defaultValue` 和 `id` 属性会被自动设置。

View File

@@ -40,6 +40,7 @@
.input() {
position: relative;
display: inline-block;
vertical-align: middle;
padding: @input-padding-vertical-base @input-padding-horizontal;
width: 100%;
height: @input-height-base;

View File

@@ -16,19 +16,19 @@ export default function Col(props) {
}
sizeClassObj = {
...sizeClassObj,
[`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
[`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
[`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
[`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
[`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
[`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
[`col-${size}-order-${sizeProps.order}`]: sizeProps.order,
[`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
[`col-${size}-push-${sizeProps.push}`]: sizeProps.push,
[`col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
};
});
const classes = classNames({
[`ant-col-${span}`]: span !== undefined,
[`ant-col-order-${order}`]: order,
[`ant-col-offset-${offset}`]: offset,
[`ant-col-push-${push}`]: push,
[`ant-col-pull-${pull}`]: pull,
[`col-${span}`]: span !== undefined,
[`col-order-${order}`]: order,
[`col-offset-${offset}`]: offset,
[`col-push-${push}`]: push,
[`col-pull-${pull}`]: pull,
[className]: !!className,
...sizeClassObj,
});

View File

@@ -13,19 +13,19 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span={12}>.ant-col-12</Col>
<Col span={12}>.ant-col-12</Col>
<Col span={12}>.col-12</Col>
<Col span={12}>.col-12</Col>
</Row>
<Row>
<Col span={8}>.ant-col-8</Col>
<Col span={8}>.ant-col-8</Col>
<Col span={8}>.ant-col-8</Col>
<Col span={8}>.col-8</Col>
<Col span={8}>.col-8</Col>
<Col span={8}>.col-8</Col>
</Row>
<Row>
<Col span={6}>.ant-col-6</Col>
<Col span={6}>.ant-col-6</Col>
<Col span={6}>.ant-col-6</Col>
<Col span={6}>.ant-col-6</Col>
<Col span={6}>.col-6</Col>
<Col span={6}>.col-6</Col>
<Col span={6}>.col-6</Col>
<Col span={6}>.col-6</Col>
</Row>
</div>,
mountNode

View File

@@ -14,26 +14,26 @@ ReactDOM.render(
<div>
<p>顶部对齐</p>
<Row type="flex" justify="center" align="top">
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
</Row>
<p>居中对齐</p>
<Row type="flex" justify="space-around" align="middle">
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
</Row>
<p>底部对齐</p>
<Row type="flex" justify="space-between" align="bottom">
<Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
<Col span={4}><DemoBox value={100}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={50}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={120}>.col-4</DemoBox></Col>
<Col span={4}><DemoBox value={80}>.col-4</DemoBox></Col>
</Row>
</div>,
mountNode

View File

@@ -14,42 +14,42 @@ ReactDOM.render(
<div>
<p>子元素居左排列</p>
<Row type="flex" justify="start">
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素居中排列</p>
<Row type="flex" justify="center">
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素居右排列</p>
<Row type="flex" justify="end">
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素等宽排列</p>
<Row type="flex" justify="space-between">
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
<p>子元素分散对齐</p>
<Row type="flex" justify="space-around">
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.ant-col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
<Col span={4}>.col-4</Col>
</Row>
</div>,
mountNode

View File

@@ -12,16 +12,16 @@ ReactDOM.render(
<div className="gutter-example">
<Row gutter={16}>
<Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div>
<div className="gutter-box">.col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div>
<div className="gutter-box">.col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div>
<div className="gutter-box">.col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">.ant-col-6</div>
<div className="gutter-box">.col-6</div>
</Col>
</Row>
</div>
@@ -29,7 +29,7 @@ ReactDOM.render(
````
````css
.gutter-example .ant-row > div {
.gutter-example .row > div {
background: transparent;
border: 0;
}

View File

@@ -13,15 +13,15 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span={8}>.ant-col-8</Col>
<Col span={8} offset={8}>.ant-col-8</Col>
<Col span={8}>.col-8</Col>
<Col span={8} offset={8}>.col-8</Col>
</Row>
<Row>
<Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
<Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
<Col span={6} offset={6}>.col-6 .col-offset-6</Col>
<Col span={6} offset={6}>.col-6 .col-offset-6</Col>
</Row>
<Row>
<Col span={12} offset={6}>.ant-col-12 .ant-col-offset-6</Col>
<Col span={12} offset={6}>.col-12 .col-offset-6</Col>
</Row>
</div>,
mountNode

View File

@@ -13,8 +13,8 @@ import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span={18} push={6}>.ant-col-18 .ant-col-push-6</Col>
<Col span={6} pull={18}>.ant-col-6 .ant-col-pull-18</Col>
<Col span={18} push={6}>.col-18 .col-push-6</Col>
<Col span={6} pull={18}>.col-6 .col-pull-18</Col>
</Row>
</div>,
mountNode

View File

@@ -11,49 +11,49 @@ english: Layout
## 设计理念
<div class="layout-demo">
<div class="ant-row demo-row">
<div class="ant-col-24 demo-col demo-col-1">
<div class="row demo-row">
<div class="col-24 demo-col demo-col-1">
100%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-6 demo-col demo-col-2">
<div class="row demo-row">
<div class="col-6 demo-col demo-col-2">
25%
</div>
<div class="ant-col-6 demo-col demo-col-3">
<div class="col-6 demo-col demo-col-3">
25%
</div>
<div class="ant-col-6 demo-col demo-col-2">
<div class="col-6 demo-col demo-col-2">
25%
</div>
<div class="ant-col-6 demo-col demo-col-3">
<div class="col-6 demo-col demo-col-3">
25%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-8 demo-col demo-col-4">
<div class="row demo-row">
<div class="col-8 demo-col demo-col-4">
33.33%
</div>
<div class="ant-col-8 demo-col demo-col-5">
<div class="col-8 demo-col demo-col-5">
33.33%
</div>
<div class="ant-col-8 demo-col demo-col-4">
<div class="col-8 demo-col demo-col-4">
33.33%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-12 demo-col demo-col-1">
<div class="row demo-row">
<div class="col-12 demo-col demo-col-1">
50%
</div>
<div class="ant-col-12 demo-col demo-col-3">
<div class="col-12 demo-col demo-col-3">
50%
</div>
</div>
<div class="ant-row demo-row">
<div class="ant-col-16 demo-col demo-col-4">
<div class="row demo-row">
<div class="col-16 demo-col demo-col-4">
66.66%
</div>
<div class="ant-col-8 demo-col demo-col-5">
<div class="col-8 demo-col demo-col-5">
33.33%
</div>
</div>
@@ -69,7 +69,7 @@ english: Layout
* 通过`row`在水平方向建立一组`column`简写col
* 你的内容应当放置于`col`内,并且,只有`col`可以作为`row`的直接元素
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如三个等宽的列可以使用`.ant-col-8`来创建
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如三个等宽的列可以使用`.col-8`来创建
* 如果一个`row`中的`col`总和超过 24那么多余的`col`会作为一个整体另起一行排列
## Flex 布局

View File

@@ -16,10 +16,10 @@ export default class Row extends React.Component {
render() {
const { type, justify, align, className, gutter, style, children, ...others } = this.props;
const classes = classNames({
'ant-row': !type,
[`ant-row-${type}`]: type,
[`ant-row-${type}-${justify}`]: justify,
[`ant-row-${type}-${align}`]: align,
row: !type,
[`row-${type}`]: type,
[`row-${type}-${justify}`]: justify,
[`row-${type}-${align}`]: align,
[className]: className,
});
const rowStyle = gutter > 0 ? {

View File

@@ -3,12 +3,12 @@
@import "./mixin";
// Grid system
.ant-row {
.row {
.make-row();
display: block;
}
.ant-row-flex {
.row-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -20,46 +20,46 @@
}
// x轴原点
.ant-row-flex-start {
.row-flex-start {
justify-content: flex-start;
}
// x轴居中
.ant-row-flex-center {
.row-flex-center {
justify-content: center;
}
// x轴反方向
.ant-row-flex-end {
.row-flex-end {
justify-content: flex-end;
}
// x轴平分
.ant-row-flex-space-between {
.row-flex-space-between {
justify-content: space-between;
}
// x轴有间隔地平分
.ant-row-flex-space-around {
.row-flex-space-around {
justify-content: space-around;
}
// 顶部对齐
.ant-row-flex-top {
.row-flex-top {
align-items: flex-start;
}
// 居中对齐
.ant-row-flex-middle {
.row-flex-middle {
align-items: center;
}
// 底部对齐
.ant-row-flex-bottom {
.row-flex-bottom {
align-items: flex-end;
}
.ant-col {
.col {
position: relative;
display: block;
}

View File

@@ -12,11 +12,11 @@
.make-grid-columns() {
.col(@index) {
@item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
@item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
@item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
@item: ~".col-@{index}, .col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) {
@@ -33,11 +33,11 @@
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".ant-col@{class}-@{index}";
@item: ~".col@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".ant-col@{class}-@{index}";
@item: ~".col@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -51,33 +51,33 @@
// lesshint false
.loop-grid-columns(@index, @class) when (@index > 0) {
.ant-col@{class}-@{index} {
.col@{class}-@{index} {
display: block;
width: percentage((@index / @grid-columns));
}
.ant-col@{class}-push-@{index} {
.col@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
.ant-col@{class}-pull-@{index} {
.col@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
.ant-col@{class}-offset-@{index} {
.col@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
.ant-col@{class}-order-@{index} {
.col@{class}-order-@{index} {
order: @index;
}
.loop-grid-columns((@index - 1), @class);
}
.loop-grid-columns(@index, @class) when (@index = 0) {
.ant-col@{class}-@{index} {
.col@{class}-@{index} {
display: none;
}
.ant-col-push-@{index} {
.col-push-@{index} {
left: auto;
}
.ant-col-pull-@{index} {
.col-pull-@{index} {
right: auto;
}
}

View File

@@ -77,8 +77,7 @@ const Page = React.createClass({
showSearch
titles={['', '']}
targetKeys={[]}
render={item => item.title}
/>
render={item => item.title} />
</div>
<div style={{ width: 290, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} />

View File

@@ -26,8 +26,7 @@ const App = React.createClass({
return (
<Menu onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />导航一
</Menu.Item>

View File

@@ -36,8 +36,7 @@ const Sider = React.createClass({
onOpen={this.onToggle}
onClose={this.onToggle}
selectedKeys={[this.state.current]}
mode="inline"
>
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>

View File

@@ -28,8 +28,7 @@ const Sider = React.createClass({
style={{ width: 240 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
mode="inline">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>

View File

@@ -30,8 +30,7 @@ const Sider = React.createClass({
<Menu
style={{ width: 240 }}
defaultOpenKeys={['sub1']}
mode={this.state.mode}
>
mode={this.state.mode}>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<MenuItemGroup title="分组1">
<Menu.Item key="1">选项1</Menu.Item>

View File

@@ -37,8 +37,7 @@ const Sider = React.createClass({
style={{ width: 240 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
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>

View File

@@ -78,24 +78,21 @@ export default class Modal extends React.Component {
<Button key="cancel"
type="ghost"
size="large"
onClick={this.handleCancel}
>
onClick={this.handleCancel}>
{cancelText || '取消'}
</Button>,
<Button key="confirm"
type="primary"
size="large"
loading={props.confirmLoading}
onClick={this.handleOk}
>
onClick={this.handleOk}>
{okText || '确定'}
</Button>,
];
let footer = props.footer || defaultFooter;
return (
<Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={props.visible} mousePosition={mousePosition}
/>
visible={props.visible} mousePosition={mousePosition} />
);
}
}

View File

@@ -122,8 +122,7 @@ export default function confirm(config) {
footer=""
maskTransitionName="fade"
style={style}
width={width}
>
width={width}>
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
</Dialog>
, div, function () {

View File

@@ -46,8 +46,7 @@ const Test = React.createClass({
visible={this.state.visible}
onOk={this.handleOk}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}
>
onCancel={this.handleCancel}>
<p>{this.state.ModalText}</p>
</Modal>
</div>

View File

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

View File

@@ -43,8 +43,7 @@ const Test = React.createClass({
<Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交
</Button>,
]}
>
]}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>

View File

@@ -33,8 +33,7 @@ const LocalizedModal = React.createClass({
<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"
>
okText="OK" cancelText="Cancel">
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>

View File

@@ -30,8 +30,7 @@ const App = React.createClass({
style={{ top: 20 }}
visible={this.state.modal1Visible}
onOk={() => this.setModal1Visible(false)}
onCancel={() => this.setModal1Visible(false)}
>
onCancel={() => this.setModal1Visible(false)}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>
@@ -42,8 +41,7 @@ const App = React.createClass({
wrapClassName="vertical-center-modal"
visible={this.state.modal2Visible}
onOk={() => this.setModal2Visible(false)}
onCancel={() => this.setModal2Visible(false)}
>
onCancel={() => this.setModal2Visible(false)}>
<p>对话框的内容</p>
<p>对话框的内容</p>
<p>对话框的内容</p>

View File

@@ -36,8 +36,7 @@ export default class Pagination extends React.Component {
selectPrefixCls="ant-select"
{...this.props}
locale={locale}
className={className}
/>
className={className} />
);
}
}

View File

@@ -13,8 +13,7 @@ ReactDOM.render(
selectComponentClass={Select}
total={80}
showTotal={total => `共 ${total} 条`}
pageSize={20} defaultCurrent={1}
/>,
pageSize={20} defaultCurrent={1} />,
mountNode
);
````

View File

@@ -44,8 +44,7 @@ let App = React.createClass({
<div>
<Popconfirm title="确定要删除这个任务吗?"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
onConfirm={this.confirm} onCancel={this.cancel}
>
onConfirm={this.confirm} onCancel={this.cancel}>
<a href="#">删除某任务</a>
</Popconfirm>
<br />

View File

@@ -89,8 +89,7 @@ export default class Popconfirm extends React.Component {
transitionName={this.props.transitionName}
visible={this.state.visible}
trigger={trigger}
overlay={overlay}
>
overlay={overlay}>
{this.props.children}
</Tooltip>
);

View File

@@ -30,8 +30,7 @@ const App = React.createClass({
);
return (
<Popover content={content} title="标题" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
>
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
<Button type="primary">点击弹出卡片</Button>
</Popover>
);

View File

@@ -22,8 +22,7 @@ export default class Popover extends React.Component {
builtinPlacements={placements}
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}
>
overlay={this.getOverlay()}>
{this.props.children}
</Tooltip>
);

View File

@@ -76,8 +76,7 @@ export default class Line extends React.Component {
progress = (
<div className={`${prefixCls}-inner`} style={circleStyle}>
<Circle percent={percent} strokeWidth={strokeWidth || 6}
strokeColor={statusColorMap[progressStatus]} trailColor={trailColor}
/>
strokeColor={statusColorMap[progressStatus]} trailColor={trailColor} />
{progressInfo}
</div>
);

View File

@@ -48,8 +48,7 @@ const Test = React.createClass({
animConfig={[
{ opacity: [1, 0], translateY: [0, 50] },
{ opacity: [1, 0], translateY: [0, -50] },
]}
>
]}>
{list}
</QueueAnim>
</div>

View File

@@ -47,8 +47,7 @@ const Test = React.createClass({
<QueueAnim className="demo-content"
key="demo"
type={['right', 'left']}
ease={['easeOutQuart', 'easeInOutQuart']}
>
ease={['easeOutQuart', 'easeInOutQuart']}>
{list}
</QueueAnim>
</div>

View File

@@ -2,7 +2,6 @@ import React from 'react';
import classNames from 'classnames';
import Radio from './radio';
import RadioButton from './radioButton';
import PureRenderMixin from 'react-addons-pure-render-mixin';
function getCheckedValue(children) {
let value = null;
@@ -52,9 +51,6 @@ export default class RadioGroup extends React.Component {
}
}
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
onRadioChange = (ev) => {
if (!('value' in this.props)) {
this.setState({

View File

@@ -1,15 +1,11 @@
import RcRadio from 'rc-radio';
import React from 'react';
import classNames from 'classnames';
import PureRenderMixin from 'react-addons-pure-render-mixin';
export default class Radio extends React.Component {
static defaultProps = {
prefixCls: 'ant-radio',
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
render() {
const { prefixCls, children, checked, disabled, className, style } = this.props;
const classString = classNames({

View File

@@ -34,8 +34,7 @@ const Test = React.createClass({
style={{ width: 200 }}
onChange={this.handleChange}
filterOption={false}
placeholder="请输入账户名"
>
placeholder="请输入账户名">
{this.state.options}
</Select>
);

View File

@@ -22,8 +22,7 @@ ReactDOM.render(
<Select multiple
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']} onChange={handleChange}
>
defaultValue={['a10', 'c12']} onChange={handleChange}>
{children}
</Select>
, mountNode);

View File

@@ -18,8 +18,7 @@ ReactDOM.render(
<Select defaultValue="lucy"
style={{ width: 200 }}
showSearch={false}
onChange={handleChange}
>
onChange={handleChange}>
<OptGroup label="Manager">
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>

View File

@@ -88,8 +88,7 @@ const SearchInput = React.createClass({
filterOption={false}
onChange={this.handleChange}
onFocus={this.handleFocusBlur}
onBlur={this.handleFocusBlur}
>
onBlur={this.handleFocusBlur}>
{options}
</Select>
<div className="ant-input-group-wrap">

View File

@@ -19,8 +19,7 @@ ReactDOM.render(
placeholder="请选择人员"
optionFilterProp="children"
notFoundContent="无法找到"
onChange={handleChange}
>
onChange={handleChange}>
<Option value="jack">杰克</Option>
<Option value="lucy">露西</Option>
<Option value="tom">汤姆</Option>

View File

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

View File

@@ -44,8 +44,7 @@ export default class Select extends React.Component {
<RcSelect {...this.props}
className={cls}
optionLabelProp={optionLabelProp || 'children'}
notFoundContent={notFoundContent}
/>
notFoundContent={notFoundContent} />
);
}
}

View File

@@ -27,8 +27,7 @@ const IntegerStep = React.createClass({
</Col>
<Col span={4}>
<InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
value={this.state.inputValue} onChange={this.onChange}
/>
value={this.state.inputValue} onChange={this.onChange} />
</Col>
</Row>
);
@@ -54,8 +53,7 @@ const DecimalStep = React.createClass({
</Col>
<Col span={4}>
<InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
value={this.state.inputValue} onChange={this.onChange}
/>
value={this.state.inputValue} onChange={this.onChange} />
</Col>
</Row>
);

View File

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

View File

@@ -12,8 +12,7 @@ ReactDOM.render(
<Spin tip="正在读取数据...">
<Alert message="消息提示的文案"
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
type="info"
/>
type="info" />
</Spin>
, mountNode);
````

View File

@@ -89,8 +89,7 @@ const Test = React.createClass({
dataSource={this.state.data}
pagination={this.state.pagination}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
onChange={this.handleTableChange} />
);
},
});

View File

@@ -25,7 +25,6 @@ ReactDOM.render(
<Table columns={columns}
expandedRowRender={record => <p>{record.description}</p>}
dataSource={data}
className="table"
/>
className="table" />
, mountNode);
````

View File

@@ -61,8 +61,7 @@ const App = React.createClass({
<div>
<div style={{ marginBottom: 16 }}>
<Button type="primary" onClick={this.start}
disabled={!hasSelected} loading={loading}
>操作</Button>
disabled={!hasSelected} loading={loading}>操作</Button>
<span style={{ marginLeft: 8 }}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

View File

@@ -11,7 +11,9 @@ import { Table } from 'antd';
const columns = [{
title: '姓名',
dataIndex: 'name',
render: text => <a href="#">{text}</a>,
render(text) {
return <a href="#">{text}</a>;
},
}, {
title: '年龄',
dataIndex: 'age',
@@ -49,7 +51,6 @@ const rowSelection = {
},
};
ReactDOM.render(
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
, mountNode);
````

View File

@@ -113,19 +113,16 @@ export default class FilterMenu extends React.Component {
prefixCls="ant-dropdown-menu"
onSelect={this.setSelectedKeys}
onDeselect={this.setSelectedKeys}
selectedKeys={this.state.selectedKeys}
>
selectedKeys={this.state.selectedKeys}>
{this.renderMenus(column.filters)}
</Menu>
<div className="ant-table-filter-dropdown-btns">
<a className="ant-table-filter-dropdown-link confirm"
onClick={this.handleConfirm}
>
onClick={this.handleConfirm}>
{locale.filterConfirm}
</a>
<a className="ant-table-filter-dropdown-link clear"
onClick={this.handleClearFilters}
>
onClick={this.handleClearFilters}>
{locale.filterReset}
</a>
</div>
@@ -140,8 +137,7 @@ export default class FilterMenu extends React.Component {
overlay={menus}
visible={this.state.visible}
onVisibleChange={this.onVisibleChange}
closeOnSelect={false}
>
closeOnSelect={false}>
<Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />
</Dropdown>
);

View File

@@ -101,15 +101,9 @@ export default class Table extends React.Component {
componentWillReceiveProps(nextProps) {
if (('pagination' in nextProps) && nextProps.pagination !== false) {
this.setState(previousState => {
const newPagination = {
...defaultPagination,
...previousState.pagination,
...nextProps.pagination,
};
newPagination.current = newPagination.current || 1;
return { pagination: newPagination };
});
this.setState(previousState => ({
pagination: { ...defaultPagination, ...previousState.pagination, ...nextProps.pagination },
}));
}
// dataSource 的变化会清空选中项
if ('dataSource' in nextProps &&
@@ -434,12 +428,9 @@ export default class Table extends React.Component {
this.getDefaultSelection().indexOf(rowIndex) >= 0);
}
return (
<span onClick={stopPropagation}>
<Radio disabled={props.disabled}
onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
value={rowIndex} checked={checked}
/>
</span>
<Radio disabled={props.disabled} onClick={stopPropagation}
onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
value={rowIndex} checked={checked} />
);
}
@@ -457,13 +448,8 @@ export default class Table extends React.Component {
props = this.props.rowSelection.getCheckboxProps.call(this, record);
}
return (
<span onClick={stopPropagation}>
<Checkbox
checked={checked}
disabled={props.disabled}
onChange={(e) => this.handleSelect(record, rowIndex, e)}
/>
</span>
<Checkbox checked={checked} disabled={props.disabled} onClick={stopPropagation}
onChange={(e) => this.handleSelect(record, rowIndex, e)} />
);
}
@@ -512,8 +498,7 @@ export default class Table extends React.Component {
const checkboxAll = (
<Checkbox checked={checked}
disabled={checkboxAllDisabled}
onChange={this.handleSelectAllRow}
/>
onChange={this.handleSelectAllRow} />
);
selectionColumn = {
key: 'selection-column',
@@ -559,8 +544,7 @@ export default class Table extends React.Component {
filterDropdown = (
<FilterDropdown locale={locale} column={column}
selectedKeys={colFilters}
confirmFilter={this.handleFilter}
/>
confirmFilter={this.handleFilter} />
);
}
if (column.sorter) {
@@ -577,14 +561,12 @@ export default class Table extends React.Component {
<div className="ant-table-column-sorter">
<span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
title="↑"
onClick={() => this.toggleSortOrder('ascend', column)}
>
onClick={() => this.toggleSortOrder('ascend', column)}>
<Icon type="caret-up" />
</span>
<span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
title="↓"
onClick={() => this.toggleSortOrder('descend', column)}
>
onClick={() => this.toggleSortOrder('descend', column)}>
<Icon type="caret-down" />
</span>
</div>
@@ -630,8 +612,7 @@ export default class Table extends React.Component {
onChange={this.handlePageChange}
total={total}
size={size}
onShowSizeChange={this.handleShowSizeChange}
/> : null;
onShowSizeChange={this.handleShowSizeChange} /> : null;
}
prepareParamsArguments(state) {
@@ -748,8 +729,7 @@ export default class Table extends React.Component {
columns={columns}
className={classString}
expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
expandIconAsCell={expandIconAsCell}
/>
expandIconAsCell={expandIconAsCell} />
{emptyText}
</div>
);

View File

@@ -23,7 +23,6 @@
text-align: left;
border-radius: @border-radius-base @border-radius-base 0 0;
overflow: hidden;
table-layout: fixed;
}
th {

View File

@@ -54,8 +54,7 @@ const Demo = React.createClass({
<Button type="ghost" onClick={this.add}>新增</Button>
</div>
<Tabs hideAdd onChange={this.onChange} activeKey={this.state.activeKey}
type="editable-card" onEdit={this.onEdit}
>
type="editable-card" onEdit={this.onEdit}>
{this.state.panes}
</Tabs>
</div>

View File

@@ -50,8 +50,7 @@ const Demo = React.createClass({
render() {
return (
<Tabs onChange={this.onChange} activeKey={this.state.activeKey}
type="editable-card" onEdit={this.onEdit}
>
type="editable-card" onEdit={this.onEdit}>
{this.state.panes}
</Tabs>
);

View File

@@ -25,8 +25,7 @@ const Demo = React.createClass({
<div style={{ marginBottom: 16 }}>
页签位置:
<Select value={this.state.tabPosition} onChange={this.changeTabPosition}
dropdownMatchSelectWidth={false}
>
dropdownMatchSelectWidth={false}>
<Option value="top">top</Option>
<Option value="bottom">bottom</Option>
<Option value="left">left</Option>

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