style: enable react/jsx-closing-bracket-location

This commit is contained in:
Benjy Cui 2016-06-06 13:54:10 +08:00
parent 4af2731f0c
commit 2144349741
105 changed files with 435 additions and 219 deletions

View File

@ -28,7 +28,6 @@ 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,11 +16,13 @@ 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,17 +11,21 @@ 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,20 +16,24 @@ 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,7 +82,8 @@ 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,11 +46,13 @@ 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

@ -37,7 +37,8 @@ function Home(props) {
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc',
}}>
}}
>
点击上面的导航切换页面,面包屑在下面:
</div>
<Breadcrumb {...props} />

View File

@ -104,7 +104,8 @@ 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,7 +45,8 @@ 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>
);
@ -69,7 +70,8 @@ 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,6 +26,7 @@ function monthCellRender(value) {
ReactDOM.render(
<Calendar defaultValue={new Date('2010-10-10')}
dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
dateCellRender={dateCellRender} monthCellRender={monthCellRender}
/>
, mountNode);
````

View File

@ -139,7 +139,8 @@ 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}
@ -149,7 +150,8 @@ export default class Calendar extends React.Component {
showHeader={false}
value={value}
monthCellRender={this.monthCellRender}
dateCellRender={this.dateCellRender} />
dateCellRender={this.dateCellRender}
/>
</div>
);
}

View File

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

View File

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

View File

@ -80,7 +80,8 @@ 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,
@ -99,17 +100,20 @@ 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

@ -64,7 +64,8 @@ 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,18 +22,21 @@ 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

@ -126,14 +126,16 @@ 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,7 +94,8 @@ 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,11 +45,13 @@ 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,7 +33,8 @@ 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

@ -18,19 +18,22 @@ 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>
@ -38,19 +41,22 @@ 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>
@ -58,19 +64,22 @@ 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>

View File

@ -23,7 +23,8 @@ ReactDOM.render(
id="control-input"
label="输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}>
wrapperCol={{ span: 14 }}
>
<Input id="control-input" placeholder="Please enter..." />
</FormItem>
@ -31,7 +32,8 @@ ReactDOM.render(
id="control-textarea"
label="文本域"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}>
wrapperCol={{ span: 14 }}
>
<Input type="textarea" id="control-textarea" rows="3" />
</FormItem>
@ -39,7 +41,8 @@ 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>
@ -51,7 +54,8 @@ 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>
@ -60,7 +64,8 @@ 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>
@ -69,7 +74,8 @@ 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,12 +42,14 @@ 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,17 +26,20 @@ 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>
@ -45,12 +48,14 @@ 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,14 +20,18 @@ 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,7 +16,8 @@ ReactDOM.render(
<FormItem
label="标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
wrapperCol={{ span: 16 }}
>
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
</FormItem>
@ -24,14 +25,16 @@ 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">
@ -48,7 +51,8 @@ ReactDOM.render(
<FormItem
label="输入身份证"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
wrapperCol={{ span: 16 }}
>
<InputGroup>
<Col span="6">
<Input id="certNo1" />
@ -68,7 +72,8 @@ 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,16 +46,19 @@ 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>
@ -66,7 +69,8 @@ let Demo = React.createClass({
label="Switch 开关"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required>
required
>
<Switch {...getFieldProps('switch', { valuePropName: 'checked' })} />
</FormItem>
@ -74,7 +78,8 @@ 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>
@ -82,9 +87,11 @@ 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>
@ -97,14 +104,16 @@ 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')} />
@ -125,13 +134,15 @@ 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>
@ -143,7 +154,8 @@ 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,36 +114,43 @@ 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,7 +145,8 @@ 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"
@ -161,7 +162,8 @@ 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,7 +110,8 @@ 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>
@ -122,7 +123,8 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="喜欢的颜色">
label="喜欢的颜色"
>
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
@ -134,7 +136,8 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="性别">
label="性别"
>
<RadioGroup {...radioProps}>
<Radio value="male"></Radio>
<Radio value="female"></Radio>
@ -144,44 +147,53 @@ 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,7 +22,8 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="error"
help="请输入数字和字母组合">
help="请输入数字和字母组合"
>
<Input defaultValue="无效选择" id="error" />
</FormItem>
@ -30,7 +31,8 @@ ReactDOM.render(
label="警告校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="warning">
validateStatus="warning"
>
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@ -40,7 +42,8 @@ ReactDOM.render(
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="validating"
help="信息审核中...">
help="信息审核中..."
>
<Input defaultValue="我是被校验的内容" id="validating" />
</FormItem>
@ -49,7 +52,8 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="success">
validateStatus="success"
>
<Input defaultValue="我是正文" id="success" />
</FormItem>
@ -58,7 +62,8 @@ ReactDOM.render(
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
validateStatus="warning">
validateStatus="warning"
>
<Input defaultValue="前方高能预警" id="warning" />
</FormItem>
@ -68,14 +73,16 @@ 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

@ -99,12 +99,14 @@ export default class Input extends React.Component {
case 'textarea':
return (
<textarea {...props} placeholder={placeholder}
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
/>
);
default:
return (
<input {...props} placeholder={placeholder}
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" />
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
/>
);
}
}

View File

@ -46,7 +46,8 @@ 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>
@ -58,6 +59,7 @@ 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

@ -77,7 +77,8 @@ 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,7 +26,8 @@ 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,7 +36,8 @@ 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,7 +28,8 @@ 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,7 +30,8 @@ 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,7 +37,8 @@ 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,21 +78,24 @@ 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,7 +122,8 @@ 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,7 +46,8 @@ 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,7 +34,8 @@ 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,7 +43,8 @@ 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,7 +33,8 @@ 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,7 +30,8 @@ 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>
@ -41,7 +42,8 @@ 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,7 +36,8 @@ export default class Pagination extends React.Component {
selectPrefixCls="ant-select"
{...this.props}
locale={locale}
className={className} />
className={className}
/>
);
}
}

View File

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

View File

@ -44,7 +44,8 @@ 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,7 +89,8 @@ 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,7 +30,8 @@ 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,7 +22,8 @@ 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,7 +76,8 @@ 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,7 +48,8 @@ const Test = React.createClass({
animConfig={[
{ opacity: [1, 0], translateY: [0, 50] },
{ opacity: [1, 0], translateY: [0, -50] },
]}>
]}
>
{list}
</QueueAnim>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -61,7 +61,8 @@ 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

@ -113,16 +113,19 @@ 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>
@ -137,7 +140,8 @@ 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

@ -430,7 +430,8 @@ export default class Table extends React.Component {
return (
<Radio disabled={props.disabled} onClick={stopPropagation}
onChange={(e) => this.handleRadioSelect(record, rowIndex, e)}
value={rowIndex} checked={checked} />
value={rowIndex} checked={checked}
/>
);
}
@ -449,7 +450,8 @@ export default class Table extends React.Component {
}
return (
<Checkbox checked={checked} disabled={props.disabled} onClick={stopPropagation}
onChange={(e) => this.handleSelect(record, rowIndex, e)} />
onChange={(e) => this.handleSelect(record, rowIndex, e)}
/>
);
}
@ -498,7 +500,8 @@ export default class Table extends React.Component {
const checkboxAll = (
<Checkbox checked={checked}
disabled={checkboxAllDisabled}
onChange={this.handleSelectAllRow} />
onChange={this.handleSelectAllRow}
/>
);
selectionColumn = {
key: 'selection-column',
@ -544,7 +547,8 @@ export default class Table extends React.Component {
filterDropdown = (
<FilterDropdown locale={locale} column={column}
selectedKeys={colFilters}
confirmFilter={this.handleFilter} />
confirmFilter={this.handleFilter}
/>
);
}
if (column.sorter) {
@ -561,12 +565,14 @@ 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>
@ -612,7 +618,8 @@ export default class Table extends React.Component {
onChange={this.handlePageChange}
total={total}
size={size}
onShowSizeChange={this.handleShowSizeChange} /> : null;
onShowSizeChange={this.handleShowSizeChange}
/> : null;
}
prepareParamsArguments(state) {
@ -729,7 +736,8 @@ 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

@ -54,7 +54,8 @@ 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,7 +50,8 @@ 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,7 +25,8 @@ 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>

View File

@ -77,7 +77,8 @@ export default class Tabs extends React.Component {
className={className}
tabBarExtraContent={tabBarExtraContent}
onChange={this.handleChange}
animation={animation}>
animation={animation}
>
{children}
</RcTabs>
);

View File

@ -58,7 +58,8 @@ export default class Tag extends React.Component {
showProp="data-show"
transitionName={`${prefixCls}-zoom`}
transitionAppear
onEnd={this.animationEnd}>
onEnd={this.animationEnd}
>
{this.state.closed ? null : (
<div data-show={!this.state.closing} {...restProps} className={classString}>
<span className={`${prefixCls}-text`}>{children}</span>

View File

@ -83,7 +83,8 @@ export default class Tooltip extends React.Component {
onVisibleChange={this.onVisibleChange}
onPopupAlign={this.onPopupAlign}
ref="tooltip"
{...this.props}>
{...this.props}
>
{visible ? cloneElement(children, { className: childrenCls }) : children}
</RcTooltip>
);

View File

@ -41,7 +41,8 @@ const App = React.createClass({
renderFooter() {
return (
<Button type="ghost" size="small" style={{ float: 'right', margin: 5 }}
onClick={this.getMock}>
onClick={this.getMock}
>
刷新
</Button>
);
@ -59,7 +60,8 @@ const App = React.createClass({
targetKeys={this.state.targetKeys}
onChange={this.handleChange}
render={item => `${item.title}-${item.description}`}
footer={this.renderFooter} />
footer={this.renderFooter}
/>
);
},
});

View File

@ -45,7 +45,8 @@ const App = React.createClass({
dataSource={this.state.mockData}
targetKeys={this.state.targetKeys}
onChange={this.handleChange}
render={item => item.title} />
render={item => item.title}
/>
);
},
});

View File

@ -61,7 +61,8 @@ const App = React.createClass({
}}
targetKeys={this.state.targetKeys}
onChange={this.handleChange}
render={this.renderItem} />
render={this.renderItem}
/>
);
},
});

View File

@ -46,7 +46,8 @@ const App = React.createClass({
notFoundContent="xxxxxx"
targetKeys={this.state.targetKeys}
onChange={this.handleChange}
render={item => item.title} />
render={item => item.title}
/>
);
},
});

View File

@ -254,14 +254,16 @@ export default class Transfer extends React.Component {
notFoundContent={notFoundContent}
body={body}
footer={footer}
prefixCls={`${prefixCls}-list`} />
prefixCls={`${prefixCls}-list`}
/>
<Operation rightActive={rightActive}
rightArrowText={operations[0]}
moveToRight={this.moveToRight}
leftActive={leftActive}
leftArrowText={operations[1]}
moveToLeft={this.moveToLeft}
className={`${prefixCls}-operation`} />
className={`${prefixCls}-operation`}
/>
<List titleText={titles[1]}
dataSource={rightDataSource}
filter={rightFilter}
@ -279,7 +281,8 @@ export default class Transfer extends React.Component {
notFoundContent={notFoundContent}
body={body}
footer={footer}
prefixCls={`${prefixCls}-list`} />
prefixCls={`${prefixCls}-list`}
/>
</div>
);
}

View File

@ -93,7 +93,8 @@ export default class TransferList extends React.Component {
return (
<span ref="checkbox"
className={checkboxCls}
onClick={(!props.disabled) && this.handleSelectAll}>
onClick={(!props.disabled) && this.handleSelectAll}
>
{customEle}
</span>
);
@ -188,11 +189,13 @@ export default class TransferList extends React.Component {
onChange={this.handleFilter}
handleClear={this.handleClear}
placeholder={searchPlaceholder || '请输入搜索内容'}
value={filter} />
value={filter}
/>
</div> : null}
<Animate component="ul"
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
transitionLeave={false}>
transitionLeave={false}
>
{showItems.length > 0
? showItems
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}

View File

@ -31,7 +31,8 @@ export default class Search extends React.Component {
return (
<div>
<input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
onChange={this.handleChange} />
onChange={this.handleChange}
/>
{value && value.length > 0 ?
<a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
<Icon type="cross-circle" />

View File

@ -27,7 +27,8 @@ const Demo = React.createClass({
placeholder="请选择"
allowClear
treeDefaultExpandAll
onChange={this.onChange}>
onChange={this.onChange}
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />

View File

@ -45,7 +45,8 @@ const Demo = React.createClass({
treeData={treeData}
placeholder="请选择"
treeDefaultExpandAll
onChange={this.onChange} />
onChange={this.onChange}
/>
);
},
});

View File

@ -50,7 +50,8 @@ export default class TreeSelect extends React.Component {
<RcTreeSelect {...this.props}
treeCheckable={checkable}
className={cls}
notFoundContent={notFoundContent} />
notFoundContent={notFoundContent}
/>
);
}
}

View File

@ -86,7 +86,8 @@ const Demo = React.createClass({
onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
autoExpandParent={this.state.autoExpandParent}
onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}>
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}
>
{loop(gData)}
</Tree>
);

View File

@ -35,7 +35,8 @@ const Demo = React.createClass({
defaultExpandedKeys={this.state.defaultExpandedKeys}
defaultSelectedKeys={this.state.defaultSelectedKeys}
defaultCheckedKeys={this.state.defaultCheckedKeys}
onSelect={this.onSelect} onCheck={this.onCheck}>
onSelect={this.onSelect} onCheck={this.onCheck}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />

View File

@ -101,7 +101,8 @@ const Demo = React.createClass({
return (
<Tree defaultExpandedKeys={this.state.expandedKeys} openAnimation={{}} draggable
onDragEnter={this.onDragEnter}
onDrop={this.onDrop}>
onDrop={this.onDrop}
>
{loop(this.state.gData)}
</Tree>
);

View File

@ -246,7 +246,8 @@ export default class Upload extends React.Component {
<UploadList listType={this.props.listType}
items={this.state.fileList}
onPreview={this.handlePreview}
onRemove={this.handleManualRemove} />
onRemove={this.handleManualRemove}
/>
);
}
if (type === 'drag') {
@ -259,7 +260,8 @@ export default class Upload extends React.Component {
<div className={`${prefixCls} ${prefixCls}-drag ${dragUploadingClass} ${draggingClass}`}
onDrop={this.onFileDrop}
onDragOver={this.onFileDrop}
onDragLeave={this.onFileDrop}>
onDragLeave={this.onFileDrop}
>
<RcUpload {...props}>
<div className={`${prefixCls}-drag-container`}>
{this.props.children}

View File

@ -73,7 +73,8 @@ export default class UploadList extends React.Component {
className={`${prefixCls}-list-item-thumbnail`}
onClick={e => this.handlePreview(file, e)}
href={file.url}
target="_blank">
target="_blank"
>
<img src={file.thumbUrl || file.url} alt={file.name} />
</a>
);
@ -101,7 +102,8 @@ export default class UploadList extends React.Component {
<a
onClick={(e) => this.handlePreview(file, e)}
href={file.url} target="_blank"
className={`${prefixCls}-list-item-name`}>
className={`${prefixCls}-list-item-name`}
>
{file.name}
</a>
) : <span className={`${prefixCls}-list-item-name`}>{file.name}</span>
@ -114,7 +116,8 @@ export default class UploadList extends React.Component {
onClick={(e) => this.handlePreview(file, e)}
href={file.url}
target="_blank"
style={{ pointerEvents: file.url ? '' : 'none' }}>
style={{ pointerEvents: file.url ? '' : 'none' }}
>
<Icon type="eye-o" />
</a>
<Icon type="delete" onClick={() => this.handleClose(file)} />

View File

@ -15,16 +15,19 @@ function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
return (
<div className="preview-image-box"
style={style}
onClick={onClick}>
onClick={onClick}
>
<div className={`preview-image-wrapper ${coverMeta.isGood && 'good'} ${coverMeta.isBad && 'bad'}`}>
<img className={coverMeta.className} src={coverMeta.src} alt={coverMeta.alt} />
</div>
<div className="preview-image-title">{coverMeta.alt}</div>
<div className="preview-image-description"
dangerouslySetInnerHTML={{ __html: coverMeta.description }} />
dangerouslySetInnerHTML={{ __html: coverMeta.description }}
/>
<Modal className="image-modal" width={960} visible={previewVisible} title={null} footer={null}
onCancel={onCancel}>
onCancel={onCancel}
>
<Carousel className={`${onlyOneImg ? 'image-modal-single' : ''}`} adaptiveHeight>
{comparable ? cover : imgs}
</Carousel>

View File

@ -12,7 +12,8 @@ export default function VideoPlayer({ video }) {
</div>
<div className="preview-image-title">{alt}</div>
<div className="preview-image-description"
dangerouslySetInnerHTML={{ __html: description }} />
dangerouslySetInnerHTML={{ __html: description }}
/>
</div>
);
}

View File

@ -42,13 +42,15 @@ export default class ComponentDoc extends React.Component {
leftChildren.push(
<Demo {...demoData}
key={index} utils={props.utils}
expand={expand} pathname={location.pathname} />
expand={expand} pathname={location.pathname}
/>
);
} else {
rightChildren.push(
<Demo {...demoData}
key={index} utils={props.utils}
expand={expand} pathname={location.pathname} />
expand={expand} pathname={location.pathname}
/>
);
}
});
@ -89,7 +91,8 @@ export default class ComponentDoc extends React.Component {
<h2>
代码演示
<Icon type="appstore" className={expandTriggerClass}
title="展开全部代码" onClick={this.handleExpandToggle} />
title="展开全部代码" onClick={this.handleExpandToggle}
/>
</h2>
</section>
<Row gutter={16}>

View File

@ -78,10 +78,12 @@ export default class Demo extends React.Component {
{introChildren}
<span className="collapse anticon anticon-circle-o-right"
onClick={this.handleCodeExapnd}
unselectable="none" />
unselectable="none"
/>
</section>
<section className={highlightClass}
key="code">
key="code"
>
<div className="highlight">
{props.utils.toReactComponent(highlightedCode)}
</div>
@ -91,7 +93,8 @@ export default class Demo extends React.Component {
<pre>
<code className="css" dangerouslySetInnerHTML={{
__html: highlightedStyle,
}} />
}}
/>
</pre>
</div> :
null

View File

@ -163,7 +163,8 @@ export default class MainContent extends React.Component {
<Col lg={4} md={6} sm={24} xs={24}>
<Menu className="aside-container" mode="inline"
defaultOpenKeys={Object.keys(utils.getMenuItems(moduleData, locale))}
selectedKeys={[activeMenuItem]}>
selectedKeys={[activeMenuItem]}
>
{menuItems}
</Menu>
</Col>
@ -179,7 +180,8 @@ export default class MainContent extends React.Component {
<Row>
<Col lg={{ span: 20, offset: 4 }}
md={{ span: 18, offset: 6 }}
sm={24} xs={24}>
sm={24} xs={24}
>
<section className="prev-next-nav">
{
!!prev ?

View File

@ -30,7 +30,8 @@ export default class Banner extends React.Component {
</Link>
</div>
<GitHubButton key="github-button" type="stargazers"
namespace="ant-design" repo="ant-design" />
namespace="ant-design" repo="ant-design"
/>
</QueueAnim>
<Icon type="down" className="down" />
</ScrollElement>

View File

@ -21,9 +21,11 @@ export default function Page1() {
return (
<ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
<TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }}
/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
hideProps={{ child: null }}>
hideProps={{ child: null }}
>
<h2 key="h2">最佳实践</h2>
<p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践积累了大量的优秀案例</p>
<div key="button">

View File

@ -10,7 +10,8 @@ export default function Page2() {
<ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
leaveReverse
hideProps={{ child: null }}>
hideProps={{ child: null }}
>
<h2 key="h2">设计模式</h2>
<p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题并提供相应的解决方案</p>
<div key="button">
@ -23,7 +24,8 @@ export default function Page2() {
</div>
</QueueAnim>
<TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }} />
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }}
/>
</ScrollOverPack>
);
}

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