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, 'arrow-body-style': 0,
'react/sort-comp': 0, 'react/sort-comp': 0,
'react/prop-types': 0, 'react/prop-types': 0,
'react/jsx-closing-bracket-location': 0,
'react/jsx-first-prop-new-line': 0, 'react/jsx-first-prop-new-line': 0,
'import/no-unresolved': 0, 'import/no-unresolved': 0,
'no-param-reassign': 0, 'no-param-reassign': 0,

View File

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

View File

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

View File

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

View File

@ -82,7 +82,8 @@ export default class Alert extends React.Component {
<Animate component="" <Animate component=""
showProp="data-show" showProp="data-show"
transitionName="slide-up" transitionName="slide-up"
onEnd={this.animationEnd}> onEnd={this.animationEnd}
>
<div data-show={this.state.closing} className={alertCls}> <div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null} {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={`${prefixCls}-message`}>{message}</span> <span className={`${prefixCls}-message`}>{message}</span>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -18,19 +18,22 @@ ReactDOM.render(
<FormItem <FormItem
label="搜索名称" label="搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" /> <Input placeholder="请输入搜索名称" size="default" />
</FormItem> </FormItem>
<FormItem <FormItem
label="较长搜索名称" label="较长搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<DatePicker size="default" /> <DatePicker size="default" />
</FormItem> </FormItem>
<FormItem <FormItem
label="搜索名称" label="搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" /> <Input placeholder="请输入搜索名称" size="default" />
</FormItem> </FormItem>
</Col> </Col>
@ -38,19 +41,22 @@ ReactDOM.render(
<FormItem <FormItem
label="搜索名称" label="搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" /> <Input placeholder="请输入搜索名称" size="default" />
</FormItem> </FormItem>
<FormItem <FormItem
label="较长搜索名称" label="较长搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<DatePicker size="default" /> <DatePicker size="default" />
</FormItem> </FormItem>
<FormItem <FormItem
label="搜索名称" label="搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" /> <Input placeholder="请输入搜索名称" size="default" />
</FormItem> </FormItem>
</Col> </Col>
@ -58,19 +64,22 @@ ReactDOM.render(
<FormItem <FormItem
label="搜索名称" label="搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" /> <Input placeholder="请输入搜索名称" size="default" />
</FormItem> </FormItem>
<FormItem <FormItem
label="较长搜索名称" label="较长搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<DatePicker size="default" /> <DatePicker size="default" />
</FormItem> </FormItem>
<FormItem <FormItem
label="搜索名称" label="搜索名称"
labelCol={{ span: 10 }} labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}> wrapperCol={{ span: 14 }}
>
<Input placeholder="请输入搜索名称" size="default" /> <Input placeholder="请输入搜索名称" size="default" />
</FormItem> </FormItem>
</Col> </Col>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -99,12 +99,14 @@ export default class Input extends React.Component {
case 'textarea': case 'textarea':
return ( return (
<textarea {...props} placeholder={placeholder} <textarea {...props} placeholder={placeholder}
className={inputClassName} onKeyDown={this.handleKeyDown} ref="input" /> className={inputClassName} onKeyDown={this.handleKeyDown} ref="input"
/>
); );
default: default:
return ( return (
<input {...props} placeholder={placeholder} <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}> <div className="ant-search-input-wrapper" style={style}>
<InputGroup className={searchCls}> <InputGroup className={searchCls}>
<Input {...restProps} value={this.state.value} onChange={this.handleInputChange} <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"> <div className="ant-input-group-wrap">
<Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} /> <Button icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
</div> </div>
@ -58,6 +59,7 @@ const SearchInput = React.createClass({
ReactDOM.render( ReactDOM.render(
<SearchInput placeholder="input search text" <SearchInput placeholder="input search text"
onSearch={value => console.log(value)} style={{ width: 200 }} /> onSearch={value => console.log(value)} style={{ width: 200 }}
/>
, mountNode); , mountNode);
```` ````

View File

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

View File

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

View File

@ -36,7 +36,8 @@ const Sider = React.createClass({
onOpen={this.onToggle} onOpen={this.onToggle}
onClose={this.onToggle} onClose={this.onToggle}
selectedKeys={[this.state.current]} selectedKeys={[this.state.current]}
mode="inline"> mode="inline"
>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}> <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item> <Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</Menu.Item> <Menu.Item key="2">选项2</Menu.Item>

View File

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

View File

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

View File

@ -37,7 +37,8 @@ const Sider = React.createClass({
style={{ width: 240 }} style={{ width: 240 }}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]} selectedKeys={[this.state.current]}
mode="inline"> mode="inline"
>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}> <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
<Menu.Item key="1">选项1</Menu.Item> <Menu.Item key="1">选项1</Menu.Item>
<Menu.Item key="2">选项2</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" <Button key="cancel"
type="ghost" type="ghost"
size="large" size="large"
onClick={this.handleCancel}> onClick={this.handleCancel}
>
{cancelText || '取消'} {cancelText || '取消'}
</Button>, </Button>,
<Button key="confirm" <Button key="confirm"
type="primary" type="primary"
size="large" size="large"
loading={props.confirmLoading} loading={props.confirmLoading}
onClick={this.handleOk}> onClick={this.handleOk}
>
{okText || '确定'} {okText || '确定'}
</Button>, </Button>,
]; ];
let footer = props.footer || defaultFooter; let footer = props.footer || defaultFooter;
return ( return (
<Dialog onClose={this.handleCancel} footer={footer} {...props} <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="" footer=""
maskTransitionName="fade" maskTransitionName="fade"
style={style} style={style}
width={width}> width={width}
>
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div> <div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
</Dialog> </Dialog>
, div, function () { , div, function () {

View File

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

View File

@ -34,7 +34,8 @@ const App = React.createClass({
<div> <div>
<Button type="primary" onClick={this.showModal}>显示对话框</Button> <Button type="primary" onClick={this.showModal}>显示对话框</Button>
<Modal title="第一个 Modal" visible={this.state.visible} <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> <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 key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
提 交 提 交
</Button>, </Button>,
]}> ]}
>
<p>对话框的内容</p> <p>对话框的内容</p>
<p>对话框的内容</p> <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> <Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Modal title="Modal" visible={this.state.visible} <Modal title="Modal" visible={this.state.visible}
onOk={this.handleOk} onCancel={this.handleCancel} 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> <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 }} style={{ top: 20 }}
visible={this.state.modal1Visible} visible={this.state.modal1Visible}
onOk={() => this.setModal1Visible(false)} onOk={() => this.setModal1Visible(false)}
onCancel={() => this.setModal1Visible(false)}> onCancel={() => this.setModal1Visible(false)}
>
<p>对话框的内容</p> <p>对话框的内容</p>
<p>对话框的内容</p> <p>对话框的内容</p>
<p>对话框的内容</p> <p>对话框的内容</p>
@ -41,7 +42,8 @@ const App = React.createClass({
wrapClassName="vertical-center-modal" wrapClassName="vertical-center-modal"
visible={this.state.modal2Visible} visible={this.state.modal2Visible}
onOk={() => this.setModal2Visible(false)} onOk={() => this.setModal2Visible(false)}
onCancel={() => this.setModal2Visible(false)}> onCancel={() => this.setModal2Visible(false)}
>
<p>对话框的内容</p> <p>对话框的内容</p>
<p>对话框的内容</p> <p>对话框的内容</p>
<p>对话框的内容</p> <p>对话框的内容</p>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -430,7 +430,8 @@ export default class Table extends React.Component {
return ( return (
<Radio disabled={props.disabled} onClick={stopPropagation} <Radio disabled={props.disabled} onClick={stopPropagation}
onChange={(e) => this.handleRadioSelect(record, rowIndex, e)} 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 ( return (
<Checkbox checked={checked} disabled={props.disabled} onClick={stopPropagation} <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 = ( const checkboxAll = (
<Checkbox checked={checked} <Checkbox checked={checked}
disabled={checkboxAllDisabled} disabled={checkboxAllDisabled}
onChange={this.handleSelectAllRow} /> onChange={this.handleSelectAllRow}
/>
); );
selectionColumn = { selectionColumn = {
key: 'selection-column', key: 'selection-column',
@ -544,7 +547,8 @@ export default class Table extends React.Component {
filterDropdown = ( filterDropdown = (
<FilterDropdown locale={locale} column={column} <FilterDropdown locale={locale} column={column}
selectedKeys={colFilters} selectedKeys={colFilters}
confirmFilter={this.handleFilter} /> confirmFilter={this.handleFilter}
/>
); );
} }
if (column.sorter) { if (column.sorter) {
@ -561,12 +565,14 @@ export default class Table extends React.Component {
<div className="ant-table-column-sorter"> <div className="ant-table-column-sorter">
<span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`} <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
title="↑" title="↑"
onClick={() => this.toggleSortOrder('ascend', column)}> onClick={() => this.toggleSortOrder('ascend', column)}
>
<Icon type="caret-up" /> <Icon type="caret-up" />
</span> </span>
<span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`} <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
title="↓" title="↓"
onClick={() => this.toggleSortOrder('descend', column)}> onClick={() => this.toggleSortOrder('descend', column)}
>
<Icon type="caret-down" /> <Icon type="caret-down" />
</span> </span>
</div> </div>
@ -612,7 +618,8 @@ export default class Table extends React.Component {
onChange={this.handlePageChange} onChange={this.handlePageChange}
total={total} total={total}
size={size} size={size}
onShowSizeChange={this.handleShowSizeChange} /> : null; onShowSizeChange={this.handleShowSizeChange}
/> : null;
} }
prepareParamsArguments(state) { prepareParamsArguments(state) {
@ -729,7 +736,8 @@ export default class Table extends React.Component {
columns={columns} columns={columns}
className={classString} className={classString}
expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0} expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
expandIconAsCell={expandIconAsCell} /> expandIconAsCell={expandIconAsCell}
/>
{emptyText} {emptyText}
</div> </div>
); );

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -46,7 +46,8 @@ const App = React.createClass({
notFoundContent="xxxxxx" notFoundContent="xxxxxx"
targetKeys={this.state.targetKeys} targetKeys={this.state.targetKeys}
onChange={this.handleChange} 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} notFoundContent={notFoundContent}
body={body} body={body}
footer={footer} footer={footer}
prefixCls={`${prefixCls}-list`} /> prefixCls={`${prefixCls}-list`}
/>
<Operation rightActive={rightActive} <Operation rightActive={rightActive}
rightArrowText={operations[0]} rightArrowText={operations[0]}
moveToRight={this.moveToRight} moveToRight={this.moveToRight}
leftActive={leftActive} leftActive={leftActive}
leftArrowText={operations[1]} leftArrowText={operations[1]}
moveToLeft={this.moveToLeft} moveToLeft={this.moveToLeft}
className={`${prefixCls}-operation`} /> className={`${prefixCls}-operation`}
/>
<List titleText={titles[1]} <List titleText={titles[1]}
dataSource={rightDataSource} dataSource={rightDataSource}
filter={rightFilter} filter={rightFilter}
@ -279,7 +281,8 @@ export default class Transfer extends React.Component {
notFoundContent={notFoundContent} notFoundContent={notFoundContent}
body={body} body={body}
footer={footer} footer={footer}
prefixCls={`${prefixCls}-list`} /> prefixCls={`${prefixCls}-list`}
/>
</div> </div>
); );
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -21,9 +21,11 @@ export default function Page1() {
return ( return (
<ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}> <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 }} <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 <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
hideProps={{ child: null }}> hideProps={{ child: null }}
>
<h2 key="h2">最佳实践</h2> <h2 key="h2">最佳实践</h2>
<p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践积累了大量的优秀案例</p> <p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践积累了大量的优秀案例</p>
<div key="button"> <div key="button">

View File

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

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