Fix markdown eslint errors, update .eslintrc

This commit is contained in:
afc163 2015-11-25 17:35:49 +08:00
parent efbd455384
commit 16abf46071
68 changed files with 243 additions and 248 deletions

View File

@ -12,6 +12,7 @@
"experimentalObjectRestSpread": true
},
"plugins": [
"markdown",
"react",
"babel"
],
@ -32,7 +33,6 @@
"babel/object-shorthand": 0,
"react/jsx-boolean-value": 0,
"react/jsx-no-duplicate-props": 2,
"react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
"react/sort-comp": 0,
"react/wrap-multilines": 0,
"react/no-multi-comp": 0,

View File

@ -8,7 +8,7 @@
````jsx
import { Alert } from 'antd';
const link = <a href="javascript:;">不再提醒</a>;
const link = <a href="#">不再提醒</a>;
ReactDOM.render(
<Alert message="消息提示的文案" type="info" closeText={link} />

View File

@ -16,6 +16,7 @@ export default React.createClass({
};
},
handleClose(e) {
e.preventDefault();
let dom = ReactDOM.findDOMNode(this);
dom.style.height = dom.offsetHeight + 'px';
// Magic code

View File

@ -18,7 +18,7 @@ ReactDOM.render(<div>
<Button>次按钮</Button>
<Button type="ghost">幽灵按钮</Button>
</div>,
document.getElementById('components-button-demo-basic'))
document.getElementById('components-button-demo-basic'));
````
<style>

View File

@ -10,28 +10,29 @@
import { Calendar } from 'antd';
function getListData(value) {
var listData;
let listData;
switch (value.getDayOfMonth()) {
case 8:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' }
]; break;
case 10:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
case 15:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项好长啊。。....' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
case 8:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' }
]; break;
case 10:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
case 15:
listData = [
{ type: 'warn', content: '这里是警告事项.' },
{ type: 'normal', content: '这里是普通事项好长啊。。....' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' },
{ type: 'error', content: '这里是错误事项.' }
]; break;
default:
}
return listData || [];
}

View File

@ -18,7 +18,7 @@ const App = React.createClass({
};
},
render() {
var label = (this.state.checked ? '选中' : '取消') + '-' +
const label = (this.state.checked ? '选中' : '取消') + '-' +
(this.state.disabled ? '不可用' : '可用');
return <div>
<p style={{marginBottom: '20px'}}>
@ -32,12 +32,12 @@ const App = React.createClass({
<p>
<Button type="primary" size="small"
onClick={this.toggleChecked}>
{!this.state.checked ? "选中":"取消"}
{!this.state.checked ? '选中' : '取消'}
</Button>
<Button style={{'marginLeft': '10px'}}
<Button style={{marginLeft: '10px'}}
type="primary" size="small"
onClick={this.toggleDisable}>
{!this.state.disabled ? "不可用":"可用"}
{!this.state.disabled ? '不可用' : '可用'}
</Button>
</p>
</div>;

View File

@ -21,14 +21,14 @@ const text = `
`;
ReactDOM.render(
<Collapse defaultActiveKey={["1"]} onChange={callback}>
<Panel header={`This is panel header 1`} key="1">
<Collapse defaultActiveKey={['1']} onChange={callback}>
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header={`This is panel header 2`} key="2">
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header={`This is panel header 3`} key="3">
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>

View File

@ -9,7 +9,7 @@
````jsx
import { Datepicker } from 'antd';
import enUS from 'antd/lib/datepicker/locale/en_US';
import assign from 'object-assign'
import assign from 'object-assign';
const App = React.createClass({
getInitialState() {

View File

@ -14,7 +14,7 @@ const Picker = React.createClass({
console.log(new Date(value.getTime()));
},
render: function() {
return <Datepicker onChange={this.handleChange} />
return <Datepicker onChange={this.handleChange} />;
}
});

View File

@ -29,7 +29,7 @@ const DateRange = React.createClass({
return endValue.getTime() <= this.state.startValue.getTime();
},
onChange(field, value) {
console.log(field,'change',value);
console.log(field, 'change', value);
this.setState({
[field]: value,
});
@ -39,11 +39,11 @@ const DateRange = React.createClass({
<Datepicker disabledDate={this.disabledStartDate}
value={this.state.startValue}
placeholder="开始日期"
onChange={this.onChange.bind(this,'startValue')} />
onChange={this.onChange.bind(this, 'startValue')} />
<Datepicker disabledDate={this.disabledEndDate}
value={this.state.endValue}
placeholder="结束日期"
onChange={this.onChange.bind(this,'endValue')} />
onChange={this.onChange.bind(this, 'endValue')} />
</div>;
}
});

View File

@ -13,8 +13,11 @@ let result = new Date();
let selectdDate, selectdTime;
function handleChange(from, value) {
if (!value) {
from === 'date' ?
(selectdDate = false) : (selectdTime = false);
if (from === 'date') {
selectdDate = false;
} else {
selectdTime = false;
}
return;
}
if (from === 'date') {

View File

@ -21,7 +21,7 @@ const menu = <Menu>
</Menu>;
ReactDOM.render(<div>
<Dropdown overlay={menu} trigger={["click"]}>
<Dropdown overlay={menu} trigger={['click']}>
<Button type="primary">
点击触发 <Icon type="down" />
</Button>

View File

@ -30,7 +30,7 @@ const Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
message.success("收到表单值~~~ " + JSON.stringify(this.state.formData, function(k, v) {
message.success('收到表单值~~~ ' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') {
return '';
}
@ -62,7 +62,7 @@ const Demo = React.createClass({
labelCol={{span: 6}}
wrapperCol={{span: 14}}
required={true} >
<RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
<RadioGroup name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>

View File

@ -25,7 +25,7 @@ const Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
message.success("收到表单值~~~ " + JSON.stringify(this.state.formData, function(k, v) {
message.success('收到表单值~~~ ' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') {
return '';
}

View File

@ -25,7 +25,7 @@ ReactDOM.render(
label="标签输入框:"
labelCol={{span: 6}}
wrapperCol={{span: 16}}>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2"/>
<Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" id="site2"/>
</FormItem>
<FormItem

View File

@ -7,18 +7,18 @@
---
````jsx
import {Form, Input, Select, InputNumber, Datepicker, Switch, Menu, Dropdown, Slider, Icon, Button, message, Row, Col} from 'antd';
import { Form, Select, InputNumber, Datepicker, Switch, Slider, Button, message, Row, Col } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
var Demo = React.createClass({
const Demo = React.createClass({
mixins: [Form.ValueMixin],
getInitialState() {
return {
formData: {
inputNumber: undefined,
static: "唧唧复唧唧木兰当户织呀",
static: '唧唧复唧唧木兰当户织呀',
switch: undefined,
slider: undefined,
select: undefined,
@ -30,7 +30,7 @@ var Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
message.success("收到表单值~~~ " + JSON.stringify(this.state.formData, function(k, v) {
message.success('收到表单值~~~ ' + JSON.stringify(this.state.formData, function(k, v) {
if (typeof v === 'undefined') {
return '';
}
@ -39,7 +39,7 @@ var Demo = React.createClass({
},
render() {
var formData = this.state.formData;
const formData = this.state.formData;
return (
<Form horizontal onSubmit={this.handleSubmit} >
<FormItem
@ -58,7 +58,7 @@ var Demo = React.createClass({
required={true} >
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text">
<a href="javascript:;">链接文字</a>
<a href="#">链接文字</a>
</p>
</FormItem>
@ -75,7 +75,7 @@ var Demo = React.createClass({
labelCol={{span: 8}}
wrapperCol={{span: 10}}
required={true}>
<Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} />
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} name="slider" onChange={this.setValue.bind(this, 'slider')} />
</FormItem>
<FormItem

View File

@ -6,14 +6,14 @@
validateStatus: ['success', 'warning', 'error', 'validating']。
另外为输入框添加反馈图标,设置 `<FormItem>``hasFeedback` 属性值为 `true` 即可。
另外为输入框添加反馈图标,设置 `<FormItem>``hasFeedback` 属性值为 `true` 即可。
**注意**: 反馈图标只对 `<Input />` 有效。
---
````jsx
import {Form, Input, Datepicker, Row, Col} from "antd";
import { Form, Input, Datepicker, Col } from 'antd';
const FormItem = Form.Item;
ReactDOM.render(

View File

@ -9,7 +9,7 @@
````jsx
import { InputNumber, Button } from 'antd';
var Test = React.createClass({
const Test = React.createClass({
getInitialState() {
return {
disabled: true

View File

@ -10,13 +10,13 @@ Flex 子元素垂直对齐。
````jsx
import { Row, Col } from 'antd';
var DemoBox = React.createClass({
const DemoBox = React.createClass({
render() {
const { value } = this.props;
const className = `hight-${value}`;
return (
<p className={className}>{this.props.children}</p>
)
);
}
});

View File

@ -54,5 +54,5 @@ ReactDOM.render(
</Row>
</div>,
document.getElementById('components-layout-demo-flex')
)
);
````

View File

@ -7,14 +7,14 @@
---
````jsx
import { Menu, Icon, Switch } from 'antd';
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const App = React.createClass({
getInitialState() {
return {
current: 'mail'
}
};
},
handleClick(e) {
console.log('click ', e);

View File

@ -10,12 +10,12 @@
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
var Sider = React.createClass({
const Sider = React.createClass({
getInitialState() {
return {
current: '1',
openKeys: []
}
};
},
handleClick(e) {
console.log('click ', e);

View File

@ -10,11 +10,11 @@
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
var Sider = React.createClass({
const Sider = React.createClass({
getInitialState() {
return {
current: '1'
}
};
},
handleClick(e) {
console.log('click ', e);

View File

@ -10,11 +10,11 @@
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
var Sider = React.createClass({
const Sider = React.createClass({
getInitialState() {
return {
theme: 'light'
}
};
},
changeTheme(value) {
this.setState({

View File

@ -9,8 +9,6 @@
````jsx
import { Modal, Button } from 'antd';
const ModalText = '对话框的内容';
const Test = React.createClass({
getInitialState() {
return {
@ -55,5 +53,5 @@ const Test = React.createClass({
}
});
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-async'));
ReactDOM.render(<Test/>, document.getElementById('components-modal-demo-async'));
````

View File

@ -42,5 +42,5 @@ const App = React.createClass({
}
});
ReactDOM.render(<App /> , document.getElementById('components-modal-demo-basic'));
ReactDOM.render(<App />, document.getElementById('components-modal-demo-basic'));
````

View File

@ -13,9 +13,8 @@ const confirm = Modal.confirm;
function showConfirm(){
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',
content: '点确认 1 秒后关闭',
onOk: function() {
alert('1 秒后关闭');
return new Promise(function(resolve) {
setTimeout(resolve, 1000);
});

View File

@ -15,7 +15,7 @@ function showConfirm(){
title: '您是否确认要删除这项内容',
content: '一些解释',
onOk: function() {
alert('确定');
console.log('确定');
},
onCancel: function() {}
});

View File

@ -54,5 +54,5 @@ const Test = React.createClass({
}
});
ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-footer'));
ReactDOM.render(<Test/>, document.getElementById('components-modal-demo-footer'));
````

View File

@ -11,12 +11,12 @@ import { Button, notification } from 'antd';
const openNotification = function() {
notification.open({
message: "这是标题",
description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案"
message: '这是标题',
description: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
});
};
ReactDOM.render(
<Button type="primary" onClick={openNotification}>打开通知提醒框</Button>
,document.getElementById('components-notification-demo-basic'));
, document.getElementById('components-notification-demo-basic'));
````

View File

@ -11,8 +11,8 @@ import { Button, notification } from 'antd';
const openNotification = function() {
const args = {
message: "这是标题",
description: "我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭",
message: '这是标题',
description: '我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭,我不会自动关闭',
duration: 0
};
notification.open(args);

View File

@ -10,13 +10,13 @@
import { Button, notification } from 'antd';
const close = function() {
console.log("我被默认的关闭按钮关闭了!");
console.log('我被默认的关闭按钮关闭了!');
};
const openNotification = function() {
const args = {
message: "这是标题",
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
onClose: close
};
notification.open(args);

View File

@ -9,12 +9,12 @@
````jsx
import { Button, notification } from 'antd';
const close = function(){
const close = function() {
console.log('我被默认的关闭按钮关闭了!');
}
};
const openNotification = function() {
const key='open'+Date.now();
const key = 'open' + Date.now();
const btnClick = function() {
// 隐藏提醒框
notification.close(key);
@ -23,8 +23,8 @@ const openNotification = function() {
自定义关闭按钮并触发回调函数
</Button>;
notification.open({
message: "这是标题",
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
btn: btn,
key: key,
onClose: close

View File

@ -12,8 +12,8 @@ import { Button, notification } from 'antd';
const openNotificationWithIcon = function(type) {
return function(){
notification[type]({
message: "这是标题",
description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
message: '这是标题',
description: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案'
});
};
};

View File

@ -19,7 +19,7 @@ function cancel() {
ReactDOM.render(
<Popconfirm title="确定要删除这个任务吗?" onConfirm={confirm} onCancel={cancel}>
<a href="javascript:;">删除</a>
<a href="#">删除</a>
</Popconfirm>
, document.getElementById('components-popconfirm-demo-basic'));
````

View File

@ -54,7 +54,7 @@ const Test = React.createClass({
<div className="demo-list">
<div className="title"></div>
<QueueAnim component="ul" type={['right', 'left']}>
{this.state.show ? this.state.items: null}
{this.state.show ? this.state.items : null}
</QueueAnim>
</div>
</div>

View File

@ -13,12 +13,12 @@ const Test = React.createClass({
getInitialState() {
return {
show: true,
}
};
},
onClick() {
this.setState({
show: !this.state.show,
})
});
},
render() {
return (
@ -52,7 +52,7 @@ const Test = React.createClass({
] : null}
</QueueAnim>
</div>
)
);
}
});

View File

@ -48,7 +48,7 @@ const Test = React.createClass({
</ul>
</div>
</div>
]: null}
] : null}
</QueueAnim>
</div>
);

View File

@ -7,8 +7,7 @@
---
````jsx
import { QueueAnim, Button, Select, Checkbox, Radio } from 'antd';
const Option = Select.Option;
import { QueueAnim, Button, Checkbox, Radio } from 'antd';
const RadioGroup = Radio.Group;
const Test = React.createClass({
@ -30,20 +29,20 @@ const Test = React.createClass({
</p>
<QueueAnim component="form" className="ant-form-horizontal" type="bottom" leaveReverse={true}>
{this.state.show ? [
<div className="ant-form-item ant-form-item-compact" key='name'>
<div className="ant-form-item ant-form-item-compact" key="name">
<label htmlFor="userName" className="col-6" required>用户名:</label>
<div className="col-6">
<p className="ant-form-text">大眼萌 minion</p>
</div>
</div>,
<div className="ant-form-item" key='password'>
<div className="ant-form-item" key="password">
<label htmlFor="password" className="col-6" required>密码:</label>
<div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
</div>,
<div className="ant-form-item ant-form-item-compact" key='sex'>
<label className="col-6" required>您的性别:</label>
<div className="ant-form-item ant-form-item-compact" key="sex">
<label className="col-6" required>您的性别:</label>
<div className="col-14">
<RadioGroup value="male">
<Radio value="male">男的</Radio>
@ -51,14 +50,14 @@ const Test = React.createClass({
</RadioGroup>
</div>
</div>,
<div className="ant-form-item" key='remark'>
<div className="ant-form-item" key="remark">
<label htmlFor="remark" className="col-6" required>备注:</label>
<div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div>
</div>,
<div className="ant-form-item ant-form-item-compact" key='checkbox'>
<div className="ant-form-item ant-form-item-compact" key="checkbox">
<div className="col-14 col-offset-6">
<label>
<Checkbox />
@ -66,7 +65,7 @@ const Test = React.createClass({
</label>
</div>
</div>,
<div className="row" key='btn'>
<div className="row" key="btn">
<div className="col-16 col-offset-6">
<Button type="primary">确定</Button>
</div>

View File

@ -28,45 +28,45 @@ const Test = React.createClass({
</p>
<QueueAnim type={['right', 'left']}>
{this.state.show ? [
<div className="demo-header" key="header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</div>,
<QueueAnim className="demo-content" key="content" delay={300}>
<div className="demo-title" key="title">我是标题</div>
<div className="demo-kp" key="b">
<div className="demo-header" key="header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</div>
<div className="demo-title" key="title2">我是标题</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={500}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" type="bottom" key="li">
</div>,
<QueueAnim className="demo-content" key="content" delay={300}>
<div className="demo-title" key="title">我是标题</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
</div>
<div className="demo-title" key="title2">我是标题</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={500}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" type="bottom" key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
] : null}
</QueueAnim>
</div>

View File

@ -29,7 +29,7 @@ const App = React.createClass({
</Menu.Item>
</Menu>
<QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(this.props.children||<Home/>, {key: key})}
{React.cloneElement(this.props.children || <Home/>, {key: key})}
</QueueAnim>
</div>
);
@ -83,7 +83,7 @@ const Page1 = React.createClass({
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="ul">
<QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
@ -104,7 +104,7 @@ const Page2 = React.createClass({
<div className="demo-listBox">
<QueueAnim className="demo-list">
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{opacity:[1, 0],translateY:[0, 30],scale:[1,0.9]}} key="li">
<QueueAnim component="ul" animConfig={{opacity:[1, 0], translateY:[0, 30], scale:[1, 0.9]}} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>

View File

@ -9,10 +9,6 @@ Radio 不可用。
````jsx
import { Radio, Button } from 'antd';
function toggleDisabled() {
disabled = !disabled;
}
const App = React.createClass({
getInitialState() {
return {

View File

@ -24,13 +24,11 @@ const IconSlider = React.createClass({
},
handleChange(v) {
this.setState(
{
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight': '',
sliderValue: v
}
);
this.setState({
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v
});
},
render() {

View File

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

View File

@ -12,8 +12,8 @@ const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-icon');
ReactDOM.render(<Steps>
<Step status='finish' title='步骤1' icon='cloud' />
<Step status='process' title='步骤2' icon='apple' />
<Step status='wait' title='步骤3' icon='github' />
<Step status="finish" title="步骤1" icon="cloud" />
<Step status="process" title="步骤2" icon="apple" />
<Step status="wait" title="步骤3" icon="github" />
</Steps>, container);
````

View File

@ -27,7 +27,7 @@ const App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length)
}
};
},
next() {
let s = this.state.currentStep + 1;

View File

@ -7,7 +7,7 @@
---
````jsx
import { Steps, Button } from 'antd';
import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical-small');

View File

@ -7,7 +7,7 @@
---
````jsx
import { Steps, Button } from 'antd';
import { Steps } from 'antd';
const Step = Steps.Step;
const container = document.getElementById('components-steps-demo-vertical');

View File

@ -14,7 +14,7 @@ const Test = React.createClass({
getInitialState() {
return {
disabled: true
}
};
},
toggle(){
this.setState({

View File

@ -31,7 +31,7 @@ const columns = [{
}];
const dataSource = new Table.DataSource({
url: "/components/table/demo/data.json",
url: '/components/table/demo/data.json',
resolve: function(result) {
return result.data;
},
@ -41,7 +41,7 @@ const dataSource = new Table.DataSource({
return {
total: result.totalCount,
pageSize: result.pageSize
}
};
},
// 和后台接口接收的参数进行适配
// 参数里提供了分页、筛选、排序的信息

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',
@ -26,11 +26,11 @@ const columns = [{
dataIndex: '',
render: function(text, record) {
return <span>
<a href="javascript:;">操作一</a>
<a href="#">操作一</a>
<span className="ant-divider"></span>
<a href="javascript:;">操作二</a>
<a href="#">操作二</a>
<span className="ant-divider"></span>
<a href="javascript:;" className="ant-dropdown-link">
<a href="#" className="ant-dropdown-link">
更多 <Icon type="down" />
</a>
</span>;

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '资产',

View File

@ -17,7 +17,7 @@ const renderContent = function(value, row, index) {
let obj = {
children: value,
props: {}
}
};
if (index === 4) {
obj.props.colSpan = 0;
}
@ -29,14 +29,14 @@ const columns = [{
dataIndex: 'name',
render: function(text, row, index) {
if (index < 4) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
} else {
return {
children: <a href="javascript:;">{text}</a>,
children: <a href="#">{text}</a>,
props: {
colSpan: 5
}
}
};
}
}
}, {
@ -51,7 +51,7 @@ const columns = [{
let obj = {
children: value,
props:{}
}
};
// 第三列的第三行行合并
if (index === 2) {
obj.props.rowSpan = 2;
@ -107,13 +107,13 @@ const data = [{
phone: 18900010002,
address: '西湖区湖底公园1号'
}, {
key: '5',
name: '习大大',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
}];
key: '5',
name: '习大大',
age: 18,
tel: '0575-22098909',
phone: 18900010002,
address: '西湖区湖底公园1号'
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered={true} />
, document.getElementById('components-table-demo-colspan-rowspan'));

View File

@ -10,7 +10,7 @@
import { Table } from 'antd';
function renderAction() {
return <a href="javascript:;">删除</a>;
return <a href="#">删除</a>;
}
function expandedRowRender(record) {

View File

@ -53,7 +53,7 @@ const App = React.createClass({
<Button type="primary" onClick={this.toggleLoading}>切换 loading 状态</Button>
</div>;
}
})
});
ReactDOM.render(<App />, document.getElementById('components-table-demo-loading'));
````

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',
@ -79,9 +79,8 @@ const App = React.createClass({
<Button onClick={this.handleClick2}>加载本地数据2</Button>
</div>;
}
})
});
ReactDOM.render(<App />
, document.getElementById('components-table-demo-local-data'));
````

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',
@ -24,7 +24,7 @@ const columns = [{
}];
const data = [];
for (let i=0; i<46; i++) {
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: '李大嘴' + i,

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',

View File

@ -13,7 +13,7 @@ const columns = [{
title: '姓名',
dataIndex: 'name',
render: function(text) {
return <a href="javascript:;">{text}</a>;
return <a href="#">{text}</a>;
}
}, {
title: '年龄',

View File

@ -37,7 +37,7 @@ const Test = React.createClass({
activeKey: index.toString()
};
},
remove(index, e) {
remove(targetIndex, e) {
e.stopPropagation();
let tabs = this.state.tabs;
let activeKey = this.state.activeKey;
@ -49,15 +49,15 @@ const Test = React.createClass({
}
const newTabs = tabs.filter(tab => {
if (tab.index !== index) {
if (tab.index !== targetIndex) {
return true;
} else {
foundIndex = index;
foundIndex = targetIndex;
return false;
}
});
if (activeKey === index) {
if (activeKey === targetIndex) {
activeKey = tabs[foundIndex - 1].index;
}
@ -101,7 +101,7 @@ const Test = React.createClass({
</Tabs>
);
}
})
});
ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add'));
````

View File

@ -10,7 +10,7 @@
import { Tabs, Icon } from 'antd';
const TabPane = Tabs.TabPane;
var tabContent = [
const tabContent = [
<span><Icon type="apple" />选项卡一</span>,
<span><Icon type="android" />选项卡二</span>,
<span><Icon type="lock" />选项卡三</span>,

View File

@ -10,22 +10,23 @@
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const asyncTree = [
{name: "pNode 01", key: "0-0"},
];
const asyncTree = [{
name: 'pNode 01',
key: '0-0'
}];
const generateTreeNodes = () => {
const arr = [
{name: "伯约", key: "0-0-0"},
];
return arr;
}
return [{
name: '伯约',
key: '0-0-0'
}];
};
const TreeDemo = React.createClass({
timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve.bind(this), duration);
})
setTimeout(resolve.bind(this), duration);
});
},
getInitialState() {
return {
@ -62,19 +63,19 @@ const TreeDemo = React.createClass({
if (item.children) {
return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
} else {
return <TreeNode title={item.name} key={item.key}></TreeNode>;
return <TreeNode title={item.name} key={item.key} />;
}
})
});
};
const parseTreeNode = data => loop(data);
let treeNodes = parseTreeNode(this.state.treeData);
return (
<Tree onSelect={this.handleSelect} onDataLoaded={this.handleDataLoaded} showLine={false}>
{treeNodes}
</Tree>
)
<Tree onSelect={this.handleSelect} onDataLoaded={this.handleDataLoaded} showLine={false}>
{treeNodes}
</Tree>
);
}
})
});
ReactDOM.render(<TreeDemo />, document.getElementById('components-tree-demo-dynamic'));
````

View File

@ -19,45 +19,45 @@ class TreeDemo extends React.Component {
this.state = {
checkedKeys: [],
selectedKeys: []
}
};
}
handleClick() {
this.setState({
checkedKeys: ['p11'],
selectedKeys: ['p21', 'p11']
})
});
}
handleCheck(info) {
console.log('check: ', info);
this.setState({
checkedKeys: ['p21'],
selectedKeys: ['p1', 'p21']
})
});
}
handleSelect(info) {
console.log('selected: ', info);
this.setState({
checkedKeys: ['p21'],
selectedKeys: ['p21']
})
});
}
render() {
return (<div>
<Tree defaultExpandAll={true} checkable={true}
onCheck={this.handleCheck} checkedKeys={this.state.checkedKeys}
onSelect={this.handleSelect} selectedKeys={this.state.selectedKeys} multiple>
<TreeNode title="parent 1" key="p1">
<TreeNode key="p10" title="leaf"/>
<TreeNode title="parent 1-1" key="p11">
<TreeNode title="parent 2-1" key="p21">
<TreeNode>test</TreeNode>
<TreeNode title={<span>sss</span>}/>
</TreeNode>
<TreeNode key="p22" title="leaf"/>
<Tree defaultExpandAll={true} checkable={true}
onCheck={this.handleCheck} checkedKeys={this.state.checkedKeys}
onSelect={this.handleSelect} selectedKeys={this.state.selectedKeys} multiple>
<TreeNode title="parent 1" key="p1">
<TreeNode key="p10" title="leaf"/>
<TreeNode title="parent 1-1" key="p11">
<TreeNode title="parent 2-1" key="p21">
<TreeNode>test</TreeNode>
<TreeNode title={<span>sss</span>}/>
</TreeNode>
<TreeNode key="p22" title="leaf"/>
</TreeNode>
<TreeNode key="p12" title="leaf"/>
</Tree>
</TreeNode>
<TreeNode key="p12" title="leaf"/>
</Tree>
<Button type="primary" size="small" onClick={this.handleClick}>点此控制树节点</Button>
</div>);
}

View File

@ -15,17 +15,15 @@
````jsx
import { Upload, Button, Icon } from 'antd';
const fileList = [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png'
}];
const MyUpload = React.createClass({
getInitialState() {
return {
fileList: fileList
fileList: [{
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png'
}]
};
},
handleChange(info) {
@ -52,9 +50,7 @@ const MyUpload = React.createClass({
return true;
});
this.setState({
fileList: fileList
});
this.setState({ fileList });
},
render() {
const props = {

View File

@ -147,7 +147,7 @@ const Demo = React.createClass({
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('name')}
hasFeedback
help={status.name.isValidating ? "正在校验中.." : status.name.errors ? status.name.errors.join(',') : null}
help={status.name.isValidating ? '正在校验中..' : (status.name.errors && status.name.errors.join(','))}
required>
<Validator rules={[{required: true, min: 5, message: '用户名至少为 5 个字符'}, {validator: this.userExists}]}>
<Input name="name" id="name" value={formData.name} placeholder="实时校验,输入 JasonWood 看看" onChange={this.setField.bind(this, 'name')} />
@ -164,7 +164,7 @@ const Demo = React.createClass({
help={status.email.errors ? status.email.errors.join(',') : null}
required>
<Validator rules={[{required: true, type:'email', message: '请输入正确的邮箱地址'}]} trigger={this.state.emailValidateMethod}>
<Input type="email" name="email" id="email" value={formData.email} placeholder="onBlur 与 onChange 相结合" onBlur={this.handleEmailInputBlur} onFocus={this.handleEmailInputFocus} />
<Input type="email" name="email" id="email" value={formData.email} placeholder="onBlur 与 onChange 相结合" onBlur={this.handleEmailInputBlur} onFocus={this.handleEmailInputFocus} />
</Validator>
</FormItem>

View File

@ -40,7 +40,7 @@ const Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
var validation = this.refs.validation;
const validation = this.refs.validation;
validation.validate((valid) => {
if (!valid) {
console.log('error in form');
@ -82,9 +82,17 @@ const Demo = React.createClass({
} else {
strength = 'H';
}
type === 'pass' ? this.setState({ passBarShow: true, passStrength: strength }) : this.setState({ rePassBarShow: true, rePassStrength: strength });
if (type === 'pass') {
this.setState({ passBarShow: true, passStrength: strength });
} else {
this.setState({ rePassBarShow: true, rePassStrength: strength });
}
} else {
type === 'pass' ? this.setState({ passBarShow: false }) : this.setState({ rePassBarShow: false });
if (type === 'pass') {
this.setState({ passBarShow: false });
} else {
this.setState({ rePassBarShow: false });
}
}
},

View File

@ -25,10 +25,6 @@ function cx(classNames) {
}
}
function noop() {
return false;
}
const Demo = React.createClass({
mixins: [Validation.FieldMixin],
@ -119,7 +115,7 @@ const Demo = React.createClass({
help={status.select.errors ? status.select.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您的国籍'}]}>
<Select size="large" placeholder="请选择国家" style={{width:"100%"}} name="select" value={formData.select}>
<Select size="large" placeholder="请选择国家" style={{width: '100%'}} name="select" value={formData.select}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
<Option value="japan">日本</Option>
@ -137,7 +133,7 @@ const Demo = React.createClass({
help={status.multiSelect.errors ? status.multiSelect.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您喜欢的颜色', type: 'array'}]}>
<Select multiple size="large" placeholder="请选择颜色" style={{width:"100%"}} name="multiSelect" value={formData.multiSelect}>
<Select multiple size="large" placeholder="请选择颜色" style={{width: '100%'}} name="multiSelect" value={formData.multiSelect}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
<Option value="yellow">黄色</Option>
@ -176,7 +172,7 @@ const Demo = React.createClass({
type: 'date',
message: '你的生日是什么呢?'
}, {validator: this.checkBirthday}]}>
<Datepicker name="birthday" value={formData.birthday}></Datepicker>
<Datepicker name="birthday" value={formData.birthday} />
</Validator>
</FormItem>
@ -189,7 +185,7 @@ const Demo = React.createClass({
help={status.primeNumber.errors ? status.primeNumber.errors.join(',') : null}
required>
<Validator rules={[{validator: this.checkPrime}]}>
<InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
<InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber} />
</Validator>
</FormItem>