mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
style: enable react/jsx-closing-bracket-location
This commit is contained in:
parent
4af2731f0c
commit
2144349741
@ -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,
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -37,7 +37,8 @@ function Home(props) {
|
||||
marginTop: 15,
|
||||
paddingBottom: 15,
|
||||
borderBottom: '1px dashed #ccc',
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
点击上面的导航切换页面,面包屑在下面:
|
||||
</div>
|
||||
<Breadcrumb {...props} />
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -56,6 +56,7 @@ ReactDOM.render(
|
||||
options={options}
|
||||
defaultValue={['zhejiang', 'hangzhou', 'xihu']}
|
||||
displayRender={displayRender}
|
||||
style={{ width: 200 }} />
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -43,6 +43,7 @@ function displayRender(label) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader options={options} expandTrigger="hover"
|
||||
displayRender={displayRender} onChange={onChange} />
|
||||
displayRender={displayRender} onChange={onChange}
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
@ -103,7 +103,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
||||
placeholder={locale.timePickerLocale.placeholder}
|
||||
locale={locale.timePickerLocale}
|
||||
transitionName="slide-up"
|
||||
/>
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 }}>
|
||||
|
@ -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>
|
||||
|
@ -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" />
|
||||
|
@ -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',
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
|
||||
<Button type="ghost" onClick={this.handleReset}>重置</Button>
|
||||
|
@ -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 />
|
||||
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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 () {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -36,7 +36,8 @@ export default class Pagination extends React.Component {
|
||||
selectPrefixCls="ant-select"
|
||||
{...this.props}
|
||||
locale={locale}
|
||||
className={className} />
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -13,7 +13,8 @@ ReactDOM.render(
|
||||
selectComponentClass={Select}
|
||||
total={80}
|
||||
showTotal={total => `共 ${total} 条`}
|
||||
pageSize={20} defaultCurrent={1} />,
|
||||
pageSize={20} defaultCurrent={1}
|
||||
/>,
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -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 />
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -48,7 +48,8 @@ const Test = React.createClass({
|
||||
animConfig={[
|
||||
{ opacity: [1, 0], translateY: [0, 50] },
|
||||
{ opacity: [1, 0], translateY: [0, -50] },
|
||||
]}>
|
||||
]}
|
||||
>
|
||||
{list}
|
||||
</QueueAnim>
|
||||
</div>
|
||||
|
@ -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>
|
||||
|
@ -34,7 +34,8 @@ const Test = React.createClass({
|
||||
style={{ width: 200 }}
|
||||
onChange={this.handleChange}
|
||||
filterOption={false}
|
||||
placeholder="请输入账户名">
|
||||
placeholder="请输入账户名"
|
||||
>
|
||||
{this.state.options}
|
||||
</Select>
|
||||
);
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -22,7 +22,8 @@ ReactDOM.render(
|
||||
<Select tags
|
||||
style={{ width: '100%' }}
|
||||
searchPlaceholder="标签模式"
|
||||
onChange={handleChange}>
|
||||
onChange={handleChange}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
, mountNode);
|
||||
|
@ -44,7 +44,8 @@ export default class Select extends React.Component {
|
||||
<RcSelect {...this.props}
|
||||
className={cls}
|
||||
optionLabelProp={optionLabelProp || 'children'}
|
||||
notFoundContent={notFoundContent} />
|
||||
notFoundContent={notFoundContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -19,7 +19,8 @@ const Card = React.createClass({
|
||||
const container = (
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info" />
|
||||
type="info"
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
|
@ -12,7 +12,8 @@ ReactDOM.render(
|
||||
<Spin tip="正在读取数据...">
|
||||
<Alert message="消息提示的文案"
|
||||
description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
|
||||
type="info" />
|
||||
type="info"
|
||||
/>
|
||||
</Spin>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -25,6 +25,7 @@ ReactDOM.render(
|
||||
<Table columns={columns}
|
||||
expandedRowRender={record => <p>{record.description}</p>}
|
||||
dataSource={data}
|
||||
className="table" />
|
||||
className="table"
|
||||
/>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -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} />
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -77,7 +77,8 @@ export default class Tabs extends React.Component {
|
||||
className={className}
|
||||
tabBarExtraContent={tabBarExtraContent}
|
||||
onChange={this.handleChange}
|
||||
animation={animation}>
|
||||
animation={animation}
|
||||
>
|
||||
{children}
|
||||
</RcTabs>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -61,7 +61,8 @@ const App = React.createClass({
|
||||
}}
|
||||
targetKeys={this.state.targetKeys}
|
||||
onChange={this.handleChange}
|
||||
render={this.renderItem} />
|
||||
render={this.renderItem}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>}
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -45,7 +45,8 @@ const Demo = React.createClass({
|
||||
treeData={treeData}
|
||||
placeholder="请选择"
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange} />
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -50,7 +50,8 @@ export default class TreeSelect extends React.Component {
|
||||
<RcTreeSelect {...this.props}
|
||||
treeCheckable={checkable}
|
||||
className={cls}
|
||||
notFoundContent={notFoundContent} />
|
||||
notFoundContent={notFoundContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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 />
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
|
@ -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)} />
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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}>
|
||||
|
@ -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
|
||||
|
@ -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 ?
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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
Loading…
Reference in New Issue
Block a user