mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
style: enable comma-dangle
This commit is contained in:
parent
5077873ae0
commit
ecaa6c56c3
@ -23,7 +23,6 @@ const eslintrc = {
|
|||||||
'babel',
|
'babel',
|
||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
'comma-dangle': 0,
|
|
||||||
'func-names': 0,
|
'func-names': 0,
|
||||||
'prefer-const': 0,
|
'prefer-const': 0,
|
||||||
'arrow-body-style': 0,
|
'arrow-body-style': 0,
|
||||||
|
@ -15,7 +15,7 @@ export default class Alert extends React.Component {
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
closing: true,
|
closing: true,
|
||||||
closed: false
|
closed: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
handleClose = (e) => {
|
handleClose = (e) => {
|
||||||
@ -27,19 +27,19 @@ export default class Alert extends React.Component {
|
|||||||
dom.style.height = `${dom.offsetHeight}px`;
|
dom.style.height = `${dom.offsetHeight}px`;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
closing: false
|
closing: false,
|
||||||
});
|
});
|
||||||
this.props.onClose.call(this, e);
|
this.props.onClose.call(this, e);
|
||||||
}
|
}
|
||||||
animationEnd = () => {
|
animationEnd = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
closed: true,
|
closed: true,
|
||||||
closing: true
|
closing: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
let {
|
let {
|
||||||
closable, description, type, prefixCls, message, closeText, showIcon
|
closable, description, type, prefixCls, message, closeText, showIcon,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
let iconType = '';
|
let iconType = '';
|
||||||
|
@ -22,7 +22,7 @@ export default class ScrollNumber extends React.Component {
|
|||||||
static propTypes = {
|
static propTypes = {
|
||||||
count: React.PropTypes.oneOfType([
|
count: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.number
|
React.PropTypes.number,
|
||||||
]),
|
]),
|
||||||
component: React.PropTypes.string,
|
component: React.PropTypes.string,
|
||||||
onAnimated: React.PropTypes.func,
|
onAnimated: React.PropTypes.func,
|
||||||
@ -33,7 +33,7 @@ export default class ScrollNumber extends React.Component {
|
|||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
animateStarted: true,
|
animateStarted: true,
|
||||||
count: props.count
|
count: props.count,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -124,7 +124,7 @@ export default class ScrollNumber extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const props = {
|
const props = {
|
||||||
...this.props,
|
...this.props,
|
||||||
className: `${this.props.prefixCls} ${this.props.className}`
|
className: `${this.props.prefixCls} ${this.props.className}`,
|
||||||
};
|
};
|
||||||
return createElement(
|
return createElement(
|
||||||
this.props.component,
|
this.props.component,
|
||||||
|
@ -56,7 +56,7 @@ const Test = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
|
@ -14,7 +14,7 @@ export default class Badge extends React.Component {
|
|||||||
static propTypes = {
|
static propTypes = {
|
||||||
count: React.PropTypes.oneOfType([
|
count: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.number
|
React.PropTypes.number,
|
||||||
]),
|
]),
|
||||||
dot: React.PropTypes.bool,
|
dot: React.PropTypes.bool,
|
||||||
overflowCount: React.PropTypes.number,
|
overflowCount: React.PropTypes.number,
|
||||||
|
@ -36,7 +36,7 @@ function Home(props) {
|
|||||||
marginBottom: 15,
|
marginBottom: 15,
|
||||||
marginTop: 15,
|
marginTop: 15,
|
||||||
paddingBottom: 15,
|
paddingBottom: 15,
|
||||||
borderBottom: '1px dashed #ccc'
|
borderBottom: '1px dashed #ccc',
|
||||||
}}>
|
}}>
|
||||||
点击上面的导航切换页面,面包屑在下面:
|
点击上面的导航切换页面,面包屑在下面:
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,7 +16,7 @@ export default function ButtonGroup(props) {
|
|||||||
const classes = classNames({
|
const classes = classNames({
|
||||||
'ant-btn-group': true,
|
'ant-btn-group': true,
|
||||||
[prefix + sizeCls]: sizeCls,
|
[prefix + sizeCls]: sizeCls,
|
||||||
[className]: className
|
[className]: className,
|
||||||
});
|
});
|
||||||
|
|
||||||
return <div {...others} className={classes} />;
|
return <div {...others} className={classes} />;
|
||||||
|
@ -42,7 +42,7 @@ const App = React.createClass({
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -14,13 +14,13 @@ function getListData(value) {
|
|||||||
case 8:
|
case 8:
|
||||||
listData = [
|
listData = [
|
||||||
{ type: 'warning', content: '这里是警告事项.' },
|
{ type: 'warning', content: '这里是警告事项.' },
|
||||||
{ type: 'normal', content: '这里是普通事项.' }
|
{ type: 'normal', content: '这里是普通事项.' },
|
||||||
]; break;
|
]; break;
|
||||||
case 10:
|
case 10:
|
||||||
listData = [
|
listData = [
|
||||||
{ type: 'warning', content: '这里是警告事项.' },
|
{ type: 'warning', content: '这里是警告事项.' },
|
||||||
{ type: 'normal', content: '这里是普通事项.' },
|
{ type: 'normal', content: '这里是普通事项.' },
|
||||||
{ type: 'error', content: '这里是错误事项.' }
|
{ type: 'error', content: '这里是错误事项.' },
|
||||||
]; break;
|
]; break;
|
||||||
case 15:
|
case 15:
|
||||||
listData = [
|
listData = [
|
||||||
@ -29,7 +29,7 @@ function getListData(value) {
|
|||||||
{ type: 'error', content: '这里是错误事项.' },
|
{ type: 'error', content: '这里是错误事项.' },
|
||||||
{ type: 'error', content: '这里是错误事项.' },
|
{ type: 'error', content: '这里是错误事项.' },
|
||||||
{ type: 'error', content: '这里是错误事项.' },
|
{ type: 'error', content: '这里是错误事项.' },
|
||||||
{ type: 'error', content: '这里是错误事项.' }
|
{ type: 'error', content: '这里是错误事项.' },
|
||||||
]; break;
|
]; break;
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
|
@ -56,7 +56,7 @@ export default class Calendar extends React.Component {
|
|||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
if ('value' in nextProps) {
|
if ('value' in nextProps) {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: this.parseDateFromValue(nextProps.value)
|
value: this.parseDateFromValue(nextProps.value),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ const App = React.createClass({
|
|||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
checked: true,
|
checked: true,
|
||||||
disabled: false
|
disabled: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -51,7 +51,7 @@ const App = React.createClass({
|
|||||||
this.setState({
|
this.setState({
|
||||||
checked: e.target.checked,
|
checked: e.target.checked,
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -6,7 +6,7 @@ import classNames from 'classnames';
|
|||||||
export default class Checkbox extends React.Component {
|
export default class Checkbox extends React.Component {
|
||||||
static Group = CheckboxGroup;
|
static Group = CheckboxGroup;
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
prefixCls: 'ant-checkbox'
|
prefixCls: 'ant-checkbox',
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
const { prefixCls, style, children, className, ...restProps } = this.props;
|
const { prefixCls, style, children, className, ...restProps } = this.props;
|
||||||
|
@ -17,8 +17,8 @@ export default class RangePicker extends React.Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
value: [
|
value: [
|
||||||
parseDateFromValue(start),
|
parseDateFromValue(start),
|
||||||
parseDateFromValue(end)
|
parseDateFromValue(end),
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -28,7 +28,7 @@ export default class RangePicker extends React.Component {
|
|||||||
const start = nextProps.parseDateFromValue(value[0]);
|
const start = nextProps.parseDateFromValue(value[0]);
|
||||||
const end = nextProps.parseDateFromValue(value[1]);
|
const end = nextProps.parseDateFromValue(value[1]);
|
||||||
this.setState({
|
this.setState({
|
||||||
value: [start, end]
|
value: [start, end],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,7 @@ export default function createPicker(TheCalendar) {
|
|||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
if ('value' in nextProps) {
|
if ('value' in nextProps) {
|
||||||
this.setState({
|
this.setState({
|
||||||
value: nextProps.parseDateFromValue(nextProps.value)
|
value: nextProps.parseDateFromValue(nextProps.value),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@ const DateRange = React.createClass({
|
|||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
startValue: null,
|
startValue: null,
|
||||||
endValue: null
|
endValue: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
disabledStartDate(startValue) {
|
disabledStartDate(startValue) {
|
||||||
@ -52,7 +52,7 @@ const DateRange = React.createClass({
|
|||||||
onChange={this.onEndChange} />
|
onChange={this.onEndChange} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
|
@ -48,7 +48,7 @@ const DateTimePicker = React.createClass({
|
|||||||
<TimePicker onChange={this.handleTimeChange} />
|
<TimePicker onChange={this.handleTimeChange} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function onSelect(value) {
|
function onSelect(value) {
|
||||||
|
@ -17,7 +17,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
|||||||
align: {
|
align: {
|
||||||
offset: [0, -9],
|
offset: [0, -9],
|
||||||
},
|
},
|
||||||
open: false
|
open: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
@ -67,7 +67,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
|||||||
|
|
||||||
toggleOpen = (e) => {
|
toggleOpen = (e) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
open: e.open
|
open: e.open,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,7 +76,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
|||||||
const state = this.state;
|
const state = this.state;
|
||||||
const pickerClass = classNames({
|
const pickerClass = classNames({
|
||||||
'ant-calendar-picker': true,
|
'ant-calendar-picker': true,
|
||||||
'ant-calendar-picker-open': state.open
|
'ant-calendar-picker-open': state.open,
|
||||||
});
|
});
|
||||||
const pickerInputClass = classNames({
|
const pickerInputClass = classNames({
|
||||||
'ant-calendar-range-picker': true,
|
'ant-calendar-range-picker': true,
|
||||||
@ -91,7 +91,7 @@ export default function wrapPicker(Picker, defaultFormat) {
|
|||||||
const rcTimePickerProps = {
|
const rcTimePickerProps = {
|
||||||
formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss'),
|
formatter: new DateTimeFormat(timeFormat || 'HH:mm:ss'),
|
||||||
showSecond: timeFormat && timeFormat.indexOf('ss') >= 0,
|
showSecond: timeFormat && timeFormat.indexOf('ss') >= 0,
|
||||||
showHour: timeFormat && timeFormat.indexOf('HH') >= 0
|
showHour: timeFormat && timeFormat.indexOf('HH') >= 0,
|
||||||
};
|
};
|
||||||
const timePicker = props.showTime ? (
|
const timePicker = props.showTime ? (
|
||||||
<TimePicker
|
<TimePicker
|
||||||
|
@ -11,7 +11,7 @@ import { Menu, Dropdown, Icon } from 'antd';
|
|||||||
const OverlayVisible = React.createClass({
|
const OverlayVisible = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
visible: false
|
visible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
handleMenuClick(e) {
|
handleMenuClick(e) {
|
||||||
@ -39,7 +39,7 @@ const OverlayVisible = React.createClass({
|
|||||||
</a>
|
</a>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<OverlayVisible />, mountNode);
|
ReactDOM.render(<OverlayVisible />, mountNode);
|
||||||
|
@ -54,7 +54,7 @@ let Demo = React.createClass({
|
|||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
Demo = createForm()(Demo);
|
Demo = createForm()(Demo);
|
||||||
|
@ -58,7 +58,7 @@ let Demo = React.createClass({
|
|||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
Demo = Form.create()(Demo);
|
Demo = Form.create()(Demo);
|
||||||
|
@ -35,7 +35,7 @@ let Demo = React.createClass({
|
|||||||
<Button type="primary" htmlType="submit">登录</Button>
|
<Button type="primary" htmlType="submit">登录</Button>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
Demo = Form.create()(Demo);
|
Demo = Form.create()(Demo);
|
||||||
|
@ -142,7 +142,7 @@ let Demo = React.createClass({
|
|||||||
<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',
|
||||||
normalize: this.normFile
|
normalize: this.normFile,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Button type="ghost">
|
<Button type="ghost">
|
||||||
@ -156,7 +156,7 @@ let Demo = React.createClass({
|
|||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
Demo = Form.create()(Demo);
|
Demo = Form.create()(Demo);
|
||||||
|
@ -52,7 +52,7 @@ const SearchInput = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
|
@ -82,7 +82,7 @@ let BasicDemo = React.createClass({
|
|||||||
{ type: 'email', message: '请输入正确的邮箱地址' },
|
{ type: 'email', message: '请输入正确的邮箱地址' },
|
||||||
],
|
],
|
||||||
trigger: ['onBlur', 'onChange'],
|
trigger: ['onBlur', 'onChange'],
|
||||||
}]
|
}],
|
||||||
});
|
});
|
||||||
const passwdProps = getFieldProps('passwd', {
|
const passwdProps = getFieldProps('passwd', {
|
||||||
rules: [
|
rules: [
|
||||||
|
@ -91,12 +91,12 @@ let Demo = React.createClass({
|
|||||||
'ant-pwd-strength': true,
|
'ant-pwd-strength': true,
|
||||||
'ant-pwd-strength-low': strength === 'L',
|
'ant-pwd-strength-low': strength === 'L',
|
||||||
'ant-pwd-strength-medium': strength === 'M',
|
'ant-pwd-strength-medium': strength === 'M',
|
||||||
'ant-pwd-strength-high': strength === 'H'
|
'ant-pwd-strength-high': strength === 'H',
|
||||||
});
|
});
|
||||||
const level = {
|
const level = {
|
||||||
L: '低',
|
L: '低',
|
||||||
M: '中',
|
M: '中',
|
||||||
H: '高'
|
H: '高',
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -119,7 +119,7 @@ let Demo = React.createClass({
|
|||||||
const passProps = getFieldProps('pass', {
|
const passProps = getFieldProps('pass', {
|
||||||
rules: [
|
rules: [
|
||||||
{ required: true, whitespace: true, message: '请填写密码' },
|
{ required: true, whitespace: true, message: '请填写密码' },
|
||||||
{ validator: this.checkPass }
|
{ validator: this.checkPass },
|
||||||
],
|
],
|
||||||
onChange: (e) => {
|
onChange: (e) => {
|
||||||
console.log('你的密码就是这样被盗的:', e.target.value);
|
console.log('你的密码就是这样被盗的:', e.target.value);
|
||||||
@ -182,7 +182,7 @@ let Demo = React.createClass({
|
|||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
Demo = createForm()(Demo);
|
Demo = createForm()(Demo);
|
||||||
|
@ -66,18 +66,18 @@ let Demo = React.createClass({
|
|||||||
const { getFieldProps } = this.props.form;
|
const { getFieldProps } = this.props.form;
|
||||||
const selectProps = getFieldProps('select', {
|
const selectProps = getFieldProps('select', {
|
||||||
rules: [
|
rules: [
|
||||||
{ required: true, message: '请选择您的国籍' }
|
{ required: true, message: '请选择您的国籍' },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
const multiSelectProps = getFieldProps('multiSelect', {
|
const multiSelectProps = getFieldProps('multiSelect', {
|
||||||
rules: [
|
rules: [
|
||||||
{ required: true, message: '请选择您喜欢的颜色', type: 'array' },
|
{ required: true, message: '请选择您喜欢的颜色', type: 'array' },
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
const radioProps = getFieldProps('radio', {
|
const radioProps = getFieldProps('radio', {
|
||||||
rules: [
|
rules: [
|
||||||
{ required: true, message: '请选择您的性别' }
|
{ required: true, message: '请选择您的性别' },
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
const birthdayProps = getFieldProps('birthday', {
|
const birthdayProps = getFieldProps('birthday', {
|
||||||
rules: [
|
rules: [
|
||||||
@ -87,8 +87,8 @@ let Demo = React.createClass({
|
|||||||
message: '你的生日是什么呢?',
|
message: '你的生日是什么呢?',
|
||||||
}, {
|
}, {
|
||||||
validator: this.checkBirthday,
|
validator: this.checkBirthday,
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
const primeNumberProps = getFieldProps('primeNumber', {
|
const primeNumberProps = getFieldProps('primeNumber', {
|
||||||
rules: [{ validator: this.checkPrime }],
|
rules: [{ validator: this.checkPrime }],
|
||||||
|
@ -11,12 +11,12 @@ import { InputNumber, Button } from 'antd';
|
|||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
disabled: true
|
disabled: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
toggle() {
|
toggle() {
|
||||||
this.setState({
|
this.setState({
|
||||||
disabled: !this.state.disabled
|
disabled: !this.state.disabled,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -28,7 +28,7 @@ const Test = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -34,7 +34,7 @@ export default class Row extends React.Component {
|
|||||||
style: gutter > 0 ? {
|
style: gutter > 0 ? {
|
||||||
paddingLeft: gutter / 2,
|
paddingLeft: gutter / 2,
|
||||||
paddingRight: gutter / 2,
|
paddingRight: gutter / 2,
|
||||||
...col.props.style
|
...col.props.style,
|
||||||
} : col.props.style,
|
} : col.props.style,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -91,7 +91,7 @@ const Page = React.createClass({
|
|||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
@ -117,7 +117,7 @@ const App = React.createClass({
|
|||||||
<LocaleProvider locale={this.state.locale}><Page /></LocaleProvider>
|
<LocaleProvider locale={this.state.locale}><Page /></LocaleProvider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -48,7 +48,7 @@ const App = React.createClass({
|
|||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -13,19 +13,19 @@ const Sider = React.createClass({
|
|||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
current: '1',
|
current: '1',
|
||||||
openKeys: []
|
openKeys: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
console.log('click ', e);
|
console.log('click ', e);
|
||||||
this.setState({
|
this.setState({
|
||||||
current: e.key,
|
current: e.key,
|
||||||
openKeys: e.keyPath.slice(1)
|
openKeys: e.keyPath.slice(1),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onToggle(info) {
|
onToggle(info) {
|
||||||
this.setState({
|
this.setState({
|
||||||
openKeys: info.open ? info.keyPath : info.keyPath.slice(1)
|
openKeys: info.open ? info.keyPath : info.keyPath.slice(1),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -59,7 +59,7 @@ const Sider = React.createClass({
|
|||||||
</SubMenu>
|
</SubMenu>
|
||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
ReactDOM.render(<Sider />, mountNode);
|
ReactDOM.render(<Sider />, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -13,13 +13,13 @@ const MenuItemGroup = Menu.ItemGroup;
|
|||||||
const Sider = React.createClass({
|
const Sider = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
current: '1'
|
current: '1',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
console.log('click ', e);
|
console.log('click ', e);
|
||||||
this.setState({
|
this.setState({
|
||||||
current: e.key
|
current: e.key,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -55,7 +55,7 @@ const Sider = React.createClass({
|
|||||||
</SubMenu>
|
</SubMenu>
|
||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
ReactDOM.render(<Sider />, mountNode);
|
ReactDOM.render(<Sider />, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -58,7 +58,7 @@ const Sider = React.createClass({
|
|||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
ReactDOM.render(<Sider />, mountNode);
|
ReactDOM.render(<Sider />, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -12,18 +12,18 @@ const SubMenu = Menu.SubMenu;
|
|||||||
const Sider = React.createClass({
|
const Sider = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
theme: 'light'
|
theme: 'light',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
changeTheme(value) {
|
changeTheme(value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
theme: value ? 'dark' : 'light'
|
theme: value ? 'dark' : 'light',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleClick(e) {
|
handleClick(e) {
|
||||||
console.log('click ', e);
|
console.log('click ', e);
|
||||||
this.setState({
|
this.setState({
|
||||||
current: e.key
|
current: e.key,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -61,7 +61,7 @@ const Sider = React.createClass({
|
|||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
ReactDOM.render(<Sider />, mountNode);
|
ReactDOM.render(<Sider />, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -24,7 +24,7 @@ function notice(content, duration = defaultDuration, type, onClose) {
|
|||||||
success: 'check-circle',
|
success: 'check-circle',
|
||||||
error: 'cross-circle',
|
error: 'cross-circle',
|
||||||
warning: 'exclamation-circle',
|
warning: 'exclamation-circle',
|
||||||
loading: 'loading'
|
loading: 'loading',
|
||||||
})[type];
|
})[type];
|
||||||
|
|
||||||
let instance = getMessageInstance();
|
let instance = getMessageInstance();
|
||||||
|
@ -55,7 +55,7 @@ export default class Modal extends React.Component {
|
|||||||
Dom.addEventListener(document.documentElement, 'click', (e) => {
|
Dom.addEventListener(document.documentElement, 'click', (e) => {
|
||||||
mousePosition = {
|
mousePosition = {
|
||||||
x: e.pageX,
|
x: e.pageX,
|
||||||
y: e.pageY
|
y: e.pageY,
|
||||||
};
|
};
|
||||||
// 20ms 内发生过点击事件,则从点击位置动画展示
|
// 20ms 内发生过点击事件,则从点击位置动画展示
|
||||||
// 否则直接 zoom 展示
|
// 否则直接 zoom 展示
|
||||||
@ -87,7 +87,7 @@ export default class Modal extends React.Component {
|
|||||||
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 (
|
||||||
|
@ -12,30 +12,30 @@ const Test = React.createClass({
|
|||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
ModalText: '对话框的内容',
|
ModalText: '对话框的内容',
|
||||||
visible: false
|
visible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
showModal() {
|
showModal() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: true
|
visible: true,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleOk() {
|
handleOk() {
|
||||||
this.setState({
|
this.setState({
|
||||||
ModalText: '对话框将在两秒后关闭',
|
ModalText: '对话框将在两秒后关闭',
|
||||||
confirmLoading: true
|
confirmLoading: true,
|
||||||
});
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false,
|
visible: false,
|
||||||
confirmLoading: false
|
confirmLoading: false,
|
||||||
});
|
});
|
||||||
}, 2000);
|
}, 2000);
|
||||||
},
|
},
|
||||||
handleCancel() {
|
handleCancel() {
|
||||||
console.log('点击了取消');
|
console.log('点击了取消');
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -51,7 +51,7 @@ const Test = React.createClass({
|
|||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -14,19 +14,19 @@ const App = React.createClass({
|
|||||||
},
|
},
|
||||||
showModal() {
|
showModal() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: true
|
visible: true,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleOk() {
|
handleOk() {
|
||||||
console.log('点击了确定');
|
console.log('点击了确定');
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleCancel(e) {
|
handleCancel(e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -41,7 +41,7 @@ const App = React.createClass({
|
|||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -18,7 +18,7 @@ function showConfirm() {
|
|||||||
setTimeout(resolve, 1000);
|
setTimeout(resolve, 1000);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onCancel() {}
|
onCancel() {},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@ function showConfirm() {
|
|||||||
onOk() {
|
onOk() {
|
||||||
console.log('确定');
|
console.log('确定');
|
||||||
},
|
},
|
||||||
onCancel() {}
|
onCancel() {},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,12 +12,12 @@ const Test = React.createClass({
|
|||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
visible: false
|
visible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
showModal() {
|
showModal() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: true
|
visible: true,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleOk() {
|
handleOk() {
|
||||||
@ -42,7 +42,7 @@ const Test = React.createClass({
|
|||||||
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
|
<Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
|
||||||
<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>
|
||||||
@ -52,7 +52,7 @@ const Test = React.createClass({
|
|||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -14,17 +14,17 @@ const LocalizedModal = React.createClass({
|
|||||||
},
|
},
|
||||||
showModal() {
|
showModal() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: true
|
visible: true,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleOk() {
|
handleOk() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleCancel() {
|
handleCancel() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -40,7 +40,7 @@ const LocalizedModal = React.createClass({
|
|||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function confirm() {
|
function confirm() {
|
||||||
@ -48,7 +48,7 @@ function confirm() {
|
|||||||
title: 'Confirm',
|
title: 'Confirm',
|
||||||
content: 'Bla bla ...',
|
content: 'Bla bla ...',
|
||||||
okText: 'OK',
|
okText: 'OK',
|
||||||
cancelText: 'Cancel'
|
cancelText: 'Cancel',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ import { Button, notification } from 'antd';
|
|||||||
const openNotification = function () {
|
const openNotification = function () {
|
||||||
notification.open({
|
notification.open({
|
||||||
message: '这是标题',
|
message: '这是标题',
|
||||||
description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
|
description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案',
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ const openNotification = function () {
|
|||||||
const args = {
|
const args = {
|
||||||
message: '这是标题',
|
message: '这是标题',
|
||||||
description: '我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭',
|
description: '我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭',
|
||||||
duration: 0
|
duration: 0,
|
||||||
};
|
};
|
||||||
notification.open(args);
|
notification.open(args);
|
||||||
};
|
};
|
||||||
|
@ -28,7 +28,7 @@ const openNotification = function () {
|
|||||||
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
|
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
|
||||||
btn,
|
btn,
|
||||||
key,
|
key,
|
||||||
onClose: close
|
onClose: close,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ const openNotificationWithIcon = function (type) {
|
|||||||
return function () {
|
return function () {
|
||||||
notification[type]({
|
notification[type]({
|
||||||
message: '这是标题',
|
message: '这是标题',
|
||||||
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
|
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
@ -16,7 +16,7 @@ function getNotificationInstance() {
|
|||||||
style: {
|
style: {
|
||||||
top: defaultTop,
|
top: defaultTop,
|
||||||
right: 0,
|
right: 0,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
return notificationInstance;
|
return notificationInstance;
|
||||||
}
|
}
|
||||||
|
@ -11,18 +11,18 @@ import { Pagination } from 'antd';
|
|||||||
const Container = React.createClass({
|
const Container = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
current: 3
|
current: 3,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onChange(page) {
|
onChange(page) {
|
||||||
console.log(page);
|
console.log(page);
|
||||||
this.setState({
|
this.setState({
|
||||||
current: page
|
current: page,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
|
return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Container />, mountNode);
|
ReactDOM.render(<Container />, mountNode);
|
||||||
|
@ -52,7 +52,7 @@ let App = React.createClass({
|
|||||||
点击是否直接执行:<Switch defaultChecked onChange={this.changeCondition} />
|
点击是否直接执行:<Switch defaultChecked onChange={this.changeCondition} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -26,7 +26,7 @@ export default class Popconfirm extends React.Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
visible: false
|
visible: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,12 +11,12 @@ import { Popover, Button } from 'antd';
|
|||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
visible: false
|
visible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
hide() {
|
hide() {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleVisibleChange(visible) {
|
handleVisibleChange(visible) {
|
||||||
@ -34,7 +34,7 @@ const App = React.createClass({
|
|||||||
<Button type="primary">点击弹出卡片</Button>
|
<Button type="primary">点击弹出卡片</Button>
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -12,7 +12,7 @@ const ButtonGroup = Button.Group;
|
|||||||
const MyProgress = React.createClass({
|
const MyProgress = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
percent: 0
|
percent: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
increase() {
|
increase() {
|
||||||
@ -39,7 +39,7 @@ const MyProgress = React.createClass({
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<MyProgress />, mountNode);
|
ReactDOM.render(<MyProgress />, mountNode);
|
||||||
|
@ -12,7 +12,7 @@ const ButtonGroup = Button.Group;
|
|||||||
const MyProgress = React.createClass({
|
const MyProgress = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
percent: 0
|
percent: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
increase() {
|
increase() {
|
||||||
@ -39,7 +39,7 @@ const MyProgress = React.createClass({
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<MyProgress />, mountNode);
|
ReactDOM.render(<MyProgress />, mountNode);
|
||||||
|
@ -6,7 +6,7 @@ import classNames from 'classnames';
|
|||||||
const statusColorMap = {
|
const statusColorMap = {
|
||||||
normal: '#2db7f5',
|
normal: '#2db7f5',
|
||||||
exception: '#ff5500',
|
exception: '#ff5500',
|
||||||
success: '#87d068'
|
success: '#87d068',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class Line extends React.Component {
|
export default class Line extends React.Component {
|
||||||
|
@ -11,12 +11,12 @@ import { QueueAnim, Button } from 'antd';
|
|||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
show: true
|
show: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onClick() {
|
onClick() {
|
||||||
this.setState({
|
this.setState({
|
||||||
show: !this.state.show
|
show: !this.state.show,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -37,7 +37,7 @@ const Test = React.createClass({
|
|||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
] : null;
|
] : null;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -49,7 +49,7 @@ const Test = React.createClass({
|
|||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -15,7 +15,7 @@ const Test = React.createClass({
|
|||||||
items: [
|
items: [
|
||||||
<li key="0"></li>,
|
<li key="0"></li>,
|
||||||
<li key="1"></li>,
|
<li key="1"></li>,
|
||||||
<li key="2"></li>
|
<li key="2"></li>,
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -60,7 +60,7 @@ const Test = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -37,7 +37,7 @@ const Test = React.createClass({
|
|||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
] : null;
|
] : null;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -47,13 +47,13 @@ const Test = React.createClass({
|
|||||||
<QueueAnim className="demo-content"
|
<QueueAnim className="demo-content"
|
||||||
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>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -11,12 +11,12 @@ import { QueueAnim, Button } from 'antd';
|
|||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
show: true
|
show: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onClick() {
|
onClick() {
|
||||||
this.setState({
|
this.setState({
|
||||||
show: !this.state.show
|
show: !this.state.show,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -37,7 +37,7 @@ const Test = React.createClass({
|
|||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
] : null;
|
] : null;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -52,7 +52,7 @@ const Test = React.createClass({
|
|||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -13,12 +13,12 @@ const RadioGroup = Radio.Group;
|
|||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
show: true
|
show: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onClick() {
|
onClick() {
|
||||||
this.setState({
|
this.setState({
|
||||||
show: !this.state.show
|
show: !this.state.show,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -57,7 +57,7 @@ const Test = React.createClass({
|
|||||||
</QueueAnim>
|
</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -11,12 +11,12 @@ import { QueueAnim, Button } from 'antd';
|
|||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
show: true
|
show: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onClick() {
|
onClick() {
|
||||||
this.setState({
|
this.setState({
|
||||||
show: !this.state.show
|
show: !this.state.show,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -59,7 +59,7 @@ const Test = React.createClass({
|
|||||||
</QueueAnim>,
|
</QueueAnim>,
|
||||||
<QueueAnim delay={1000} type="bottom" key="footerBox">
|
<QueueAnim delay={1000} type="bottom" key="footerBox">
|
||||||
<div className="demo-footer" key="footer"></div>
|
<div className="demo-footer" key="footer"></div>
|
||||||
</QueueAnim>
|
</QueueAnim>,
|
||||||
] : null;
|
] : null;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -69,7 +69,7 @@ const Test = React.createClass({
|
|||||||
<QueueAnim type={['right', 'left']}>{page}</QueueAnim>
|
<QueueAnim type={['right', 'left']}>{page}</QueueAnim>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -11,12 +11,12 @@ import { Radio, Button } from 'antd';
|
|||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
disabled: true
|
disabled: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
toggleDisabled() {
|
toggleDisabled() {
|
||||||
this.setState({
|
this.setState({
|
||||||
disabled: !this.state.disabled
|
disabled: !this.state.disabled,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -32,7 +32,7 @@ const App = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -38,7 +38,7 @@ const App = React.createClass({
|
|||||||
</Radio>
|
</Radio>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -30,7 +30,7 @@ const App = React.createClass({
|
|||||||
<Radio key="d" value={4}>D</Radio>
|
<Radio key="d" value={4}>D</Radio>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -4,7 +4,7 @@ import classNames from 'classnames';
|
|||||||
|
|
||||||
export default class Radio extends React.Component {
|
export default class Radio extends React.Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
prefixCls: 'ant-radio'
|
prefixCls: 'ant-radio',
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
const { prefixCls, children, checked, disabled, className, style } = this.props;
|
const { prefixCls, children, checked, disabled, className, style } = this.props;
|
||||||
|
@ -26,7 +26,7 @@ const Rater = React.createClass({
|
|||||||
{value && <span className="ant-rate-text">{value} 星</span>}
|
{value && <span className="ant-rate-text">{value} 星</span>}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Rater />, mountNode);
|
ReactDOM.render(<Rater />, mountNode);
|
||||||
|
@ -38,7 +38,7 @@ const Test = React.createClass({
|
|||||||
{this.state.options}
|
{this.state.options}
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -14,25 +14,25 @@ const Option = Select.Option;
|
|||||||
const provinceData = ['浙江', '江苏'];
|
const provinceData = ['浙江', '江苏'];
|
||||||
const cityData = {
|
const cityData = {
|
||||||
浙江: ['杭州', '宁波', '温州'],
|
浙江: ['杭州', '宁波', '温州'],
|
||||||
江苏: ['南京', '苏州', '镇江']
|
江苏: ['南京', '苏州', '镇江'],
|
||||||
};
|
};
|
||||||
|
|
||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
cities: cityData[provinceData[0]],
|
cities: cityData[provinceData[0]],
|
||||||
secondCity: cityData[provinceData[0]][0]
|
secondCity: cityData[provinceData[0]][0],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
handleProvinceChange(value) {
|
handleProvinceChange(value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
cities: cityData[value],
|
cities: cityData[value],
|
||||||
secondCity: cityData[value][0]
|
secondCity: cityData[value][0],
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onSecondCityChange(value) {
|
onSecondCityChange(value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
secondCity: value
|
secondCity: value,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -48,7 +48,7 @@ const App = React.createClass({
|
|||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
````
|
````
|
||||||
|
@ -17,7 +17,7 @@ const IconSlider = React.createClass({
|
|||||||
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
|
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
|
||||||
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
|
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
|
||||||
mid,
|
mid,
|
||||||
sliderValue: this.props.value
|
sliderValue: this.props.value,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -25,7 +25,7 @@ const IconSlider = React.createClass({
|
|||||||
this.setState({
|
this.setState({
|
||||||
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
|
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
|
||||||
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
|
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
|
||||||
sliderValue: v
|
sliderValue: v,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -37,7 +37,7 @@ const IconSlider = React.createClass({
|
|||||||
<Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
|
<Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
|
@ -11,12 +11,12 @@ import { Slider, InputNumber, Row, Col } from 'antd';
|
|||||||
const IntegerStep = React.createClass({
|
const IntegerStep = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
inputValue: 1
|
inputValue: 1,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onChange(value) {
|
onChange(value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
inputValue: value
|
inputValue: value,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -31,18 +31,18 @@ const IntegerStep = React.createClass({
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const DecimalStep = React.createClass({
|
const DecimalStep = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
inputValue: 0
|
inputValue: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onChange(value) {
|
onChange(value) {
|
||||||
this.setState({
|
this.setState({
|
||||||
inputValue: value
|
inputValue: value,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -57,7 +57,7 @@ const DecimalStep = React.createClass({
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<div>
|
ReactDOM.render(<div>
|
||||||
|
@ -4,7 +4,7 @@ import RcSlider from 'rc-slider';
|
|||||||
export default class Slider extends React.Component {
|
export default class Slider extends React.Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
prefixCls: 'ant-slider',
|
prefixCls: 'ant-slider',
|
||||||
tipTransitionName: 'zoom-down'
|
tipTransitionName: 'zoom-down',
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -27,7 +27,7 @@ const Card = React.createClass({
|
|||||||
切换加载状态:<Switch checked={this.state.loading} onChange={this.toggle} />
|
切换加载状态:<Switch checked={this.state.loading} onChange={this.toggle} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Card />, mountNode);
|
ReactDOM.render(<Card />, mountNode);
|
||||||
|
@ -11,16 +11,16 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
const steps = [{
|
const steps = [{
|
||||||
title: '已完成',
|
title: '已完成',
|
||||||
description: '这里是多信息的描述啊'
|
description: '这里是多信息的描述啊',
|
||||||
}, {
|
}, {
|
||||||
title: '错误示例',
|
title: '错误示例',
|
||||||
description: '这里是多信息的耶哦耶哦哦耶哦耶'
|
description: '这里是多信息的耶哦耶哦哦耶哦耶',
|
||||||
}, {
|
}, {
|
||||||
title: '又一个待运行',
|
title: '又一个待运行',
|
||||||
description: '描述啊描述啊'
|
description: '描述啊描述啊',
|
||||||
}, {
|
}, {
|
||||||
title: '待运行',
|
title: '待运行',
|
||||||
description: '这里是多信息的描述啊'
|
description: '这里是多信息的描述啊',
|
||||||
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
||||||
|
|
||||||
ReactDOM.render(<Steps current={1} status="error">{steps}</Steps>, mountNode);
|
ReactDOM.render(<Steps current={1} status="error">{steps}</Steps>, mountNode);
|
||||||
|
@ -11,16 +11,16 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
const steps = [{
|
const steps = [{
|
||||||
title: '已完成',
|
title: '已完成',
|
||||||
description: '这里是多信息的描述啊'
|
description: '这里是多信息的描述啊',
|
||||||
}, {
|
}, {
|
||||||
title: '进行中',
|
title: '进行中',
|
||||||
description: '这里是多信息的耶哦耶哦哦耶哦耶'
|
description: '这里是多信息的耶哦耶哦哦耶哦耶',
|
||||||
}, {
|
}, {
|
||||||
title: '又一个待运行',
|
title: '又一个待运行',
|
||||||
description: '描述啊描述啊'
|
description: '描述啊描述啊',
|
||||||
}, {
|
}, {
|
||||||
title: '待运行',
|
title: '待运行',
|
||||||
description: '这里是多信息的描述啊'
|
description: '这里是多信息的描述啊',
|
||||||
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
||||||
|
|
||||||
ReactDOM.render(<Steps current={1}>{steps}</Steps>, mountNode);
|
ReactDOM.render(<Steps current={1}>{steps}</Steps>, mountNode);
|
||||||
|
@ -11,16 +11,16 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
const steps = [{
|
const steps = [{
|
||||||
status: 'finish',
|
status: 'finish',
|
||||||
title: '已完成'
|
title: '已完成',
|
||||||
}, {
|
}, {
|
||||||
status: 'process',
|
status: 'process',
|
||||||
title: '进行中'
|
title: '进行中',
|
||||||
}, {
|
}, {
|
||||||
status: 'wait',
|
status: 'wait',
|
||||||
title: '待运行'
|
title: '待运行',
|
||||||
}, {
|
}, {
|
||||||
status: 'wait',
|
status: 'wait',
|
||||||
title: '待运行'
|
title: '待运行',
|
||||||
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
||||||
|
|
||||||
ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, mountNode);
|
ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, mountNode);
|
||||||
|
@ -17,14 +17,14 @@ const Step = Steps.Step;
|
|||||||
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
|
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
|
||||||
const steps = array.map((item, i) => {
|
const steps = array.map((item, i) => {
|
||||||
return {
|
return {
|
||||||
title: `步骤${i + 1}`
|
title: `步骤${i + 1}`,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
currentStep: Math.floor(Math.random() * steps.length)
|
currentStep: Math.floor(Math.random() * steps.length),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
next() {
|
next() {
|
||||||
@ -33,7 +33,7 @@ const App = React.createClass({
|
|||||||
s = 0;
|
s = 0;
|
||||||
}
|
}
|
||||||
this.setState({
|
this.setState({
|
||||||
currentStep: s
|
currentStep: s,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -49,7 +49,7 @@ const App = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -11,13 +11,13 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
const steps = [{
|
const steps = [{
|
||||||
title: '已完成',
|
title: '已完成',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}, {
|
}, {
|
||||||
title: '进行中',
|
title: '进行中',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}, {
|
}, {
|
||||||
title: '待运行',
|
title: '待运行',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
||||||
|
|
||||||
ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
|
ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
|
||||||
|
@ -11,16 +11,16 @@ const Step = Steps.Step;
|
|||||||
|
|
||||||
const steps = [{
|
const steps = [{
|
||||||
title: '已完成',
|
title: '已完成',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}, {
|
}, {
|
||||||
title: '进行中',
|
title: '进行中',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}, {
|
}, {
|
||||||
title: '待运行',
|
title: '待运行',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}, {
|
}, {
|
||||||
title: '又一个待运行',
|
title: '又一个待运行',
|
||||||
description: '这里是信息的描述'
|
description: '这里是信息的描述',
|
||||||
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
|
||||||
|
|
||||||
ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
|
ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
|
||||||
|
@ -11,12 +11,12 @@ import { Switch, Button } from 'antd';
|
|||||||
const Test = React.createClass({
|
const Test = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
disabled: true
|
disabled: true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
toggle() {
|
toggle() {
|
||||||
this.setState({
|
this.setState({
|
||||||
disabled: !this.state.disabled
|
disabled: !this.state.disabled,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -28,7 +28,7 @@ const Test = React.createClass({
|
|||||||
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
|
<Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -69,7 +69,7 @@ const Test = React.createClass({
|
|||||||
data: result.data,
|
data: result.data,
|
||||||
pagination,
|
pagination,
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -83,7 +83,7 @@ const Test = React.createClass({
|
|||||||
loading={this.state.loading}
|
loading={this.state.loading}
|
||||||
onChange={this.handleTableChange} />
|
onChange={this.handleTableChange} />
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -13,7 +13,7 @@ const columns = [{
|
|||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
render(text) {
|
render(text) {
|
||||||
return <a href="#">{text}</a>;
|
return <a href="#">{text}</a>;
|
||||||
}
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '资产',
|
title: '资产',
|
||||||
className: 'column-money',
|
className: 'column-money',
|
||||||
|
@ -15,7 +15,7 @@ import { Table } from 'antd';
|
|||||||
const renderContent = function (value, row, index) {
|
const renderContent = function (value, row, index) {
|
||||||
let obj = {
|
let obj = {
|
||||||
children: value,
|
children: value,
|
||||||
props: {}
|
props: {},
|
||||||
};
|
};
|
||||||
if (index === 4) {
|
if (index === 4) {
|
||||||
obj.props.colSpan = 0;
|
obj.props.colSpan = 0;
|
||||||
@ -33,14 +33,14 @@ const columns = [{
|
|||||||
return {
|
return {
|
||||||
children: <a href="#">{text}</a>,
|
children: <a href="#">{text}</a>,
|
||||||
props: {
|
props: {
|
||||||
colSpan: 5
|
colSpan: 5,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '年龄',
|
title: '年龄',
|
||||||
dataIndex: 'age',
|
dataIndex: 'age',
|
||||||
render: renderContent
|
render: renderContent,
|
||||||
}, {
|
}, {
|
||||||
title: '家庭电话',
|
title: '家庭电话',
|
||||||
colSpan: 2,
|
colSpan: 2,
|
||||||
@ -48,7 +48,7 @@ const columns = [{
|
|||||||
render(value, row, index) {
|
render(value, row, index) {
|
||||||
let obj = {
|
let obj = {
|
||||||
children: value,
|
children: value,
|
||||||
props: {}
|
props: {},
|
||||||
};
|
};
|
||||||
// 第三列的第三行行合并
|
// 第三列的第三行行合并
|
||||||
if (index === 2) {
|
if (index === 2) {
|
||||||
@ -64,16 +64,16 @@ const columns = [{
|
|||||||
obj.props.colSpan = 0;
|
obj.props.colSpan = 0;
|
||||||
}
|
}
|
||||||
return obj;
|
return obj;
|
||||||
}
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '手机号',
|
title: '手机号',
|
||||||
colSpan: 0,
|
colSpan: 0,
|
||||||
dataIndex: 'phone',
|
dataIndex: 'phone',
|
||||||
render: renderContent
|
render: renderContent,
|
||||||
}, {
|
}, {
|
||||||
title: '住址',
|
title: '住址',
|
||||||
dataIndex: 'address',
|
dataIndex: 'address',
|
||||||
render: renderContent
|
render: renderContent,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
const data = [{
|
const data = [{
|
||||||
|
@ -29,7 +29,7 @@ for (let i = 0; i < 100; i++) {
|
|||||||
key: i,
|
key: i,
|
||||||
name: `李大嘴${i}`,
|
name: `李大嘴${i}`,
|
||||||
age: 32,
|
age: 32,
|
||||||
address: `西湖区湖底公园${i}号`
|
address: `西湖区湖底公园${i}号`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,12 +38,12 @@ const data = [{
|
|||||||
const App = React.createClass({
|
const App = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
loading: false
|
loading: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
toggleLoading() {
|
toggleLoading() {
|
||||||
this.setState({
|
this.setState({
|
||||||
loading: !this.state.loading
|
loading: !this.state.loading,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -53,7 +53,7 @@ const App = React.createClass({
|
|||||||
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
|
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -23,17 +23,17 @@ const data = [{
|
|||||||
key: '1',
|
key: '1',
|
||||||
name: '胡彦斌',
|
name: '胡彦斌',
|
||||||
age: 32,
|
age: 32,
|
||||||
address: '西湖区湖底公园1号'
|
address: '西湖区湖底公园1号',
|
||||||
}, {
|
}, {
|
||||||
key: '2',
|
key: '2',
|
||||||
name: '胡彦祖',
|
name: '胡彦祖',
|
||||||
age: 42,
|
age: 42,
|
||||||
address: '西湖区湖底公园1号'
|
address: '西湖区湖底公园1号',
|
||||||
}, {
|
}, {
|
||||||
key: '3',
|
key: '3',
|
||||||
name: '李大嘴',
|
name: '李大嘴',
|
||||||
age: 32,
|
age: 32,
|
||||||
address: '西湖区湖底公园1号'
|
address: '西湖区湖底公园1号',
|
||||||
}];
|
}];
|
||||||
|
|
||||||
ReactDOM.render(<Table columns={columns} dataSource={data} pagination={false} />
|
ReactDOM.render(<Table columns={columns} dataSource={data} pagination={false} />
|
||||||
|
@ -13,13 +13,13 @@ const columns = [{
|
|||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
render(text) {
|
render(text) {
|
||||||
return <a href="#">{text}</a>;
|
return <a href="#">{text}</a>;
|
||||||
}
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '年龄',
|
title: '年龄',
|
||||||
dataIndex: 'age'
|
dataIndex: 'age',
|
||||||
}, {
|
}, {
|
||||||
title: '住址',
|
title: '住址',
|
||||||
dataIndex: 'address'
|
dataIndex: 'address',
|
||||||
}];
|
}];
|
||||||
|
|
||||||
const data = [];
|
const data = [];
|
||||||
@ -28,7 +28,7 @@ for (let i = 0; i < 46; i++) {
|
|||||||
key: i,
|
key: i,
|
||||||
name: `李大嘴${i}`,
|
name: `李大嘴${i}`,
|
||||||
age: 32,
|
age: 32,
|
||||||
address: `西湖区湖底公园${i}号`
|
address: `西湖区湖底公园${i}号`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -115,7 +115,7 @@ const App = React.createClass({
|
|||||||
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
|
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -67,7 +67,7 @@ const App = React.createClass({
|
|||||||
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -16,7 +16,7 @@ const columns = [{
|
|||||||
},
|
},
|
||||||
}, {
|
}, {
|
||||||
title: '年龄',
|
title: '年龄',
|
||||||
dataIndex: 'age'
|
dataIndex: 'age',
|
||||||
}, {
|
}, {
|
||||||
title: '住址',
|
title: '住址',
|
||||||
dataIndex: 'address',
|
dataIndex: 'address',
|
||||||
|
@ -7,7 +7,7 @@ import Checkbox from '../checkbox';
|
|||||||
export default class FilterMenu extends React.Component {
|
export default class FilterMenu extends React.Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
handleFilter() {},
|
handleFilter() {},
|
||||||
column: null
|
column: null,
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -22,7 +22,7 @@ export default class FilterMenu extends React.Component {
|
|||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedKeys: nextProps.selectedKeys
|
selectedKeys: nextProps.selectedKeys,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -32,13 +32,13 @@ export default class FilterMenu extends React.Component {
|
|||||||
|
|
||||||
handleClearFilters = () => {
|
handleClearFilters = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedKeys: []
|
selectedKeys: [],
|
||||||
}, this.handleConfirm);
|
}, this.handleConfirm);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleConfirm = () => {
|
handleConfirm = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false,
|
||||||
});
|
});
|
||||||
this.props.confirmFilter(this.props.column, this.state.selectedKeys);
|
this.props.confirmFilter(this.props.column, this.state.selectedKeys);
|
||||||
}
|
}
|
||||||
|
@ -55,7 +55,7 @@ export default class Table extends React.Component {
|
|||||||
bordered: false,
|
bordered: false,
|
||||||
indentSize: 20,
|
indentSize: 20,
|
||||||
onChange: noop,
|
onChange: noop,
|
||||||
locale: {}
|
locale: {},
|
||||||
}
|
}
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
@ -468,7 +468,7 @@ export default class Table extends React.Component {
|
|||||||
selectionColumn = {
|
selectionColumn = {
|
||||||
key: 'selection-column',
|
key: 'selection-column',
|
||||||
render: this.renderSelectionRadio,
|
render: this.renderSelectionRadio,
|
||||||
className: 'ant-table-selection-column'
|
className: 'ant-table-selection-column',
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const checkboxAllDisabled = data.every(item =>
|
const checkboxAllDisabled = data.every(item =>
|
||||||
@ -483,7 +483,7 @@ export default class Table extends React.Component {
|
|||||||
key: 'selection-column',
|
key: 'selection-column',
|
||||||
title: checkboxAll,
|
title: checkboxAll,
|
||||||
render: this.renderSelectionCheckBox,
|
render: this.renderSelectionCheckBox,
|
||||||
className: 'ant-table-selection-column'
|
className: 'ant-table-selection-column',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
if (columns[0] && columns[0].key === 'selection-column') {
|
if (columns[0] && columns[0].key === 'selection-column') {
|
||||||
|
@ -54,7 +54,7 @@ const Demo = React.createClass({
|
|||||||
{this.state.panes}
|
{this.state.panes}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Demo />, mountNode);
|
ReactDOM.render(<Demo />, mountNode);
|
||||||
|
@ -39,7 +39,7 @@ const Demo = React.createClass({
|
|||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Demo />, mountNode);
|
ReactDOM.render(<Demo />, mountNode);
|
||||||
|
@ -44,7 +44,7 @@ const App = React.createClass({
|
|||||||
<Button size="small" type="primary" onClick={this.addTag}>添加标签</Button>
|
<Button size="small" type="primary" onClick={this.addTag}>添加标签</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -20,7 +20,7 @@ const Test = React.createClass({
|
|||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
return <TimePicker value={this.state.value} onChange={this.onChange} />;
|
return <TimePicker value={this.state.value} onChange={this.onChange} />;
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<Test />, mountNode);
|
ReactDOM.render(<Test />, mountNode);
|
||||||
|
@ -84,7 +84,7 @@ export default class Tooltip extends React.Component {
|
|||||||
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,7 @@ const App = React.createClass({
|
|||||||
key: i,
|
key: i,
|
||||||
title: `内容${i + 1}`,
|
title: `内容${i + 1}`,
|
||||||
description: `内容${i + 1}的描述`,
|
description: `内容${i + 1}的描述`,
|
||||||
chosen: Math.random() * 2 > 1
|
chosen: Math.random() * 2 > 1,
|
||||||
};
|
};
|
||||||
if (data.chosen) {
|
if (data.chosen) {
|
||||||
targetKeys.push(data.key);
|
targetKeys.push(data.key);
|
||||||
@ -61,7 +61,7 @@ const App = React.createClass({
|
|||||||
render={item => `${item.title}-${item.description}`}
|
render={item => `${item.title}-${item.description}`}
|
||||||
footer={this.renderFooter} />
|
footer={this.renderFooter} />
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -26,7 +26,7 @@ const App = React.createClass({
|
|||||||
key: i,
|
key: i,
|
||||||
title: `内容${i + 1}`,
|
title: `内容${i + 1}`,
|
||||||
description: `内容${i + 1}的描述`,
|
description: `内容${i + 1}的描述`,
|
||||||
chosen: Math.random() * 2 > 1
|
chosen: Math.random() * 2 > 1,
|
||||||
};
|
};
|
||||||
if (data.chosen) {
|
if (data.chosen) {
|
||||||
targetKeys.push(data.key);
|
targetKeys.push(data.key);
|
||||||
@ -55,7 +55,7 @@ const App = React.createClass({
|
|||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
render={item => item.title} />
|
render={item => item.title} />
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -26,7 +26,7 @@ const App = React.createClass({
|
|||||||
key: i,
|
key: i,
|
||||||
title: `内容${i + 1}`,
|
title: `内容${i + 1}`,
|
||||||
description: `内容${i + 1}的描述`,
|
description: `内容${i + 1}的描述`,
|
||||||
chosen: Math.random() * 2 > 1
|
chosen: Math.random() * 2 > 1,
|
||||||
};
|
};
|
||||||
if (data.chosen) {
|
if (data.chosen) {
|
||||||
targetKeys.push(data.key);
|
targetKeys.push(data.key);
|
||||||
@ -48,7 +48,7 @@ const App = React.createClass({
|
|||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
render={item => item.title} />
|
render={item => item.title} />
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(<App />, mountNode);
|
ReactDOM.render(<App />, mountNode);
|
||||||
|
@ -147,7 +147,7 @@ export default class TransferList extends React.Component {
|
|||||||
prefixCls: 'ant-transfer',
|
prefixCls: 'ant-transfer',
|
||||||
checked: checkStatus === 'all',
|
checked: checkStatus === 'all',
|
||||||
checkPart: checkStatus === 'part',
|
checkPart: checkStatus === 'part',
|
||||||
checkable: <span className={'ant-transfer-checkbox-inner'}></span>
|
checkable: <span className={'ant-transfer-checkbox-inner'}></span>,
|
||||||
})}
|
})}
|
||||||
<span className={`${prefixCls}-header-selected`}>
|
<span className={`${prefixCls}-header-selected`}>
|
||||||
<span>
|
<span>
|
||||||
|
@ -23,7 +23,7 @@ export default class TreeSelect extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
let {
|
let {
|
||||||
size, className, combobox, notFoundContent, prefixCls
|
size, className, combobox, notFoundContent, prefixCls,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const cls = classNames({
|
const cls = classNames({
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user