mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-16 14:22:28 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e051e8ae32 | ||
|
|
9558aa2c64 |
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
````
|
||||
|
||||
@@ -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);
|
||||
````
|
||||
|
||||
@@ -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);
|
||||
````
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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) | | - |
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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);
|
||||
````
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
````
|
||||
|
||||
@@ -56,7 +56,6 @@ ReactDOM.render(
|
||||
options={options}
|
||||
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
|
||||
displayRender={displayRender}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
style={{ width: 200 }} />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -43,7 +43,6 @@ function displayRender(label) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader options={options} expandTrigger="hover"
|
||||
displayRender={displayRender} onChange={onChange}
|
||||
/>
|
||||
displayRender={displayRender} onChange={onChange} />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -103,7 +103,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
||||
placeholder={locale.timePickerLocale.placeholder}
|
||||
locale={locale.timePickerLocale}
|
||||
transitionName="slide-up"
|
||||
/>
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 }}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
<Button type="ghost" onClick={this.handleReset}>重置</Button>
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -394,7 +394,7 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-advanced-search-form {
|
||||
.advanced-search-form {
|
||||
.@{form-prefix-cls}-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@@ -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" />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
@@ -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);
|
||||
````
|
||||
@@ -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);
|
||||
````
|
||||
|
||||
@@ -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` 属性会被自动设置。
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
});
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 布局
|
||||
|
||||
@@ -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 ? {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -36,8 +36,7 @@ export default class Pagination extends React.Component {
|
||||
selectPrefixCls="ant-select"
|
||||
{...this.props}
|
||||
locale={locale}
|
||||
className={className}
|
||||
/>
|
||||
className={className} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,8 +13,7 @@ ReactDOM.render(
|
||||
selectComponentClass={Select}
|
||||
total={80}
|
||||
showTotal={total => `共 ${total} 条`}
|
||||
pageSize={20} defaultCurrent={1}
|
||||
/>,
|
||||
pageSize={20} defaultCurrent={1} />,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -48,8 +48,7 @@ const Test = React.createClass({
|
||||
animConfig={[
|
||||
{ opacity: [1, 0], translateY: [0, 50] },
|
||||
{ opacity: [1, 0], translateY: [0, -50] },
|
||||
]}
|
||||
>
|
||||
]}>
|
||||
{list}
|
||||
</QueueAnim>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -34,8 +34,7 @@ const Test = React.createClass({
|
||||
style={{ width: 200 }}
|
||||
onChange={this.handleChange}
|
||||
filterOption={false}
|
||||
placeholder="请输入账户名"
|
||||
>
|
||||
placeholder="请输入账户名">
|
||||
{this.state.options}
|
||||
</Select>
|
||||
);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -22,8 +22,7 @@ ReactDOM.render(
|
||||
<Select tags
|
||||
style={{ width: '100%' }}
|
||||
searchPlaceholder="标签模式"
|
||||
onChange={handleChange}
|
||||
>
|
||||
onChange={handleChange}>
|
||||
{children}
|
||||
</Select>
|
||||
, mountNode);
|
||||
|
||||
@@ -44,8 +44,7 @@ export default class Select extends React.Component {
|
||||
<RcSelect {...this.props}
|
||||
className={cls}
|
||||
optionLabelProp={optionLabelProp || 'children'}
|
||||
notFoundContent={notFoundContent}
|
||||
/>
|
||||
notFoundContent={notFoundContent} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -19,8 +19,7 @@ const Card = React.createClass({
|
||||
const container = (
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info"
|
||||
/>
|
||||
type="info" />
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
|
||||
@@ -12,8 +12,7 @@ ReactDOM.render(
|
||||
<Spin tip="正在读取数据...">
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info"
|
||||
/>
|
||||
type="info" />
|
||||
</Spin>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -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} />
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -25,7 +25,6 @@ ReactDOM.render(
|
||||
<Table columns={columns}
|
||||
expandedRowRender={record => <p>{record.description}</p>}
|
||||
dataSource={data}
|
||||
className="table"
|
||||
/>
|
||||
className="table" />
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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);
|
||||
````
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
text-align: left;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
overflow: hidden;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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
Reference in New Issue
Block a user