test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
afc163 2016-11-02 13:58:21 +08:00
commit 6e6970dbd5
5 changed files with 77 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/date-picker/index.en-US.md
View File

@ -20,6 +20,8 @@ import moment from 'moment-timezone/moment-timezone';
// It's recommended to set locale and timezone in entry file globaly.
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
// Set timezone if you need it.
// The following data is copied from https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json
moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6');
moment.tz.setDefault('Asia/Shanghai')

2
components/date-picker/index.zh-CN.md
View File

@ -21,6 +21,8 @@ import moment from 'moment-timezone/moment-timezone';
// 推荐在入口文件全局设置 locale 与时区
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
// 按需设置时区
// 从 https://github.com/moment/moment-timezone/blob/develop/data/packed/latest.json 复制
moment.tz.add('Asia/Shanghai|CST CDT|-80 -90|01010101010101010|-1c1I0 LX0 16p0 1jz0 1Myp0 Rb0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0|23e6');
moment.tz.setDefault('Asia/Shanghai')

207
components/form/demo/mix.md
View File

@ -1,207 +0,0 @@
---
order: 10
title:
zh-CN: 表单组合
en-US: Mix
---
## zh-CN
集中营，展示和表单相关的其他 ant-design 组件。
## en-US
A mix to demonstrate others ant-design component related to form.
````jsx
import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
Cascader, Slider, Button, Col, Upload, Icon } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const areaData = [{
value: 'shanghai',
label: 'Shanghai',
children: [{
value: 'shanghaishi',
label: 'Shanghai',
children: [{
value: 'pudongxinqu',
label: 'Pudong New District',
}],
}],
}];
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
console.log('Received the values of form', this.props.form.getFieldsValue());
},
normFile(e) {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
},
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form horizontal onSubmit={this.handleSubmit}>
<FormItem
label="I'm the title"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
<p className="ant-form-text" id="static" name="static">O, wind, if winter comes, can spring be far behind?</p>
<p className="ant-form-text">
<a href="#">link</a>
</p>
</FormItem>
<FormItem
label="InputNumber"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
>
{getFieldDecorator('inputNumber', { initialValue: 3 })(
<InputNumber min={1} max={10} style={{ width: 100 }} />
)}
<span className="ant-form-text"> machines</span>
</FormItem>
<FormItem
label="Switch"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
>
{getFieldDecorator('switch', { valuePropName: 'checked' })(
<Switch />
)}
</FormItem>
<FormItem
label="Slider"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required
>
{getFieldDecorator('slider')(
<Slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
)}
</FormItem>
<FormItem
label="Select"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
>
{getFieldDecorator('select')(
<Select style={{ width: 200 }}>
<Option value="Jack">jack</Option>
<Option value="Lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
)}
</FormItem>
<FormItem
label="Cascader"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
hasFeedback
>
{getFieldDecorator('area')(
<Cascader style={{ width: 200 }} options={areaData} />
)}
</FormItem>
<FormItem
label="DatePicker"
labelCol={{ span: 8 }}
required
>
<Col span="6">
<FormItem>
{getFieldDecorator('startDate')(
<DatePicker />
)}
</FormItem>
</Col>
<Col span="1">
<p className="ant-form-split">-</p>
</Col>
<Col span="6">
<FormItem>
{getFieldDecorator('endDate')(
<DatePicker />
)}
</FormItem>
</Col>
</FormItem>
<FormItem
label="TimePicker"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
>
{getFieldDecorator('time')(
<TimePicker />
)}
</FormItem>
<FormItem
label="Options"
labelCol={{ span: 8 }}
>
{getFieldDecorator('rg')(
<RadioGroup>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
)}
</FormItem>
<FormItem
label="logo"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
help="longgggggggggggggggggggggggggggggggggg"
>
{getFieldDecorator('upload', {
valuePropName: 'fileList',
normalize: this.normFile,
})(
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
<Button type="ghost">
<Icon type="upload" /> Click to upload
</Button>
</Upload>
)}
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 8 }} style={{ marginTop: 24 }}>
<Button type="primary" htmlType="submit">OK</Button>
</FormItem>
</Form>
);
},
});
Demo = Form.create()(Demo);
ReactDOM.render(<Demo />, mountNode);
````

98
components/form/demo/validate-other.md
View File

@ -1,5 +1,5 @@
---
order: 12
order: 11
title:
zh-CN: 校验其他组件
en-US: Other Form Controls
@ -14,9 +14,14 @@ title:
Demostration for validataion configuration for form controls which are not show in the above demos.
````jsx
import { Select, Button, InputNumber, Form } from 'antd';
const Option = Select.Option;
import {
Form, Select, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon,
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Demo = Form.create()(React.createClass({
handleSubmit(e) {
@ -31,54 +36,48 @@ const Demo = Form.create()(React.createClass({
});
},
checkPrime(rule, value, callback) {
if (value !== 11) {
callback(new Error('The prime number between 8 to 12 is 11!'));
} else {
callback();
normFile(e) {
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
},
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 12 },
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
return (
<Form horizontal onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="Country"
label="Select"
>
{getFieldDecorator('select', {
rules: [
{ required: true, message: 'Please select your country' },
{ required: true, message: 'Please select your country!' },
],
})(
<Select placeholder="Please select a country" style={{ width: '100%' }}>
<Select placeholder="Please select a country">
<Option value="china">China</Option>
<Option value="use">U.S.A</Option>
<Option value="japan">Japan</Option>
<Option value="korean">Korea</Option>
<Option value="Thailand">Thai</Option>
</Select>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Favourite colors"
label="Select[multiple]"
>
{getFieldDecorator('multiSelect', {
{getFieldDecorator('select-multiple', {
rules: [
{ required: true, message: 'Please select your favourite colors', type: 'array' },
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
],
})(
<Select multiple placeholder="Please select favourite colors" style={{ width: '100%' }}>
<Select multiple placeholder="Please select favourite colors">
<Option value="red">Red</Option>
<Option value="orange">Orange</Option>
<Option value="yellow">Yellow</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</Select>
@ -87,12 +86,59 @@ const Demo = Form.create()(React.createClass({
<FormItem
{...formItemLayout}
label="Prime num between 8, 12"
label="InputNumber"
>
{getFieldDecorator('primeNumber', {
rules: [{ validator: this.checkPrime }],
{getFieldDecorator('input-number', { initialValue: 3 })(
<InputNumber min={1} max={10} />
)}
<span className="ant-form-text"> machines</span>
</FormItem>
<FormItem
{...formItemLayout}
label="Switch"
>
{getFieldDecorator('switch', { valuePropName: 'checked' })(
<Switch />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Slider"
>
{getFieldDecorator('slider')(
<Slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Radio.Group"
>
{getFieldDecorator('radio-group')(
<RadioGroup>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Upload"
help="longgggggggggggggggggggggggggggggggggg"
>
{getFieldDecorator('upload', {
valuePropName: 'fileList',
normalize: this.normFile,
})(
<InputNumber min={8} max={12} />
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
<Button type="ghost">
<Icon type="upload" /> Click to upload
</Button>
</Upload>
)}
</FormItem>

2
components/form/demo/validate-static.md
View File

@ -1,5 +1,5 @@
---
order: 11
order: 10
title:
zh-CN: 校验提示
en-US: Validation message