- { help }
+ return help ? (
+
+ {help}
- );
+ ) : null;
+ }
+
+ renderExtra() {
+ const { prefixCls, extra } = this.props;
+ return extra ? (
+
{extra}
+ ) : null;
}
getValidateStatus() {
const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
const field = this.getId();
-
+ if (!field) {
+ return '';
+ }
if (isFieldValidating(field)) {
return 'validating';
} else if (!!getFieldError(field)) {
@@ -58,7 +95,6 @@ class FormItem extends React.Component {
} else if (getFieldValue(field) !== undefined) {
return 'success';
}
-
return '';
}
@@ -91,9 +127,9 @@ class FormItem extends React.Component {
renderWrapper(children) {
const wrapperCol = this.props.wrapperCol;
return (
-
+
+
);
}
@@ -117,14 +153,21 @@ class FormItem extends React.Component {
props.required;
const className = classNames({
- [this._getLayoutClass(labelCol)]: true,
[`${props.prefixCls}-item-required`]: required,
});
+ // remove user input colon
+ let label = props.label;
+ if (typeof label === 'string' && label.trim() !== '') {
+ label = props.label.replace(/[：|:]\s*$/, '');
+ }
+
return props.label ? (
-
- {props.label}
-
+
+
+ {label}
+
+
) : null;
}
@@ -142,7 +185,7 @@ class FormItem extends React.Component {
this.renderValidateWrapper(
children,
this.renderHelp(),
- props.extra
+ this.renderExtra()
)
),
];
@@ -151,16 +194,18 @@ class FormItem extends React.Component {
renderFormItem(children) {
const props = this.props;
const prefixCls = props.prefixCls;
+ const style = props.style;
const itemClassName = {
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
+ [`${prefixCls}-item-no-colon`]: !props.colon,
[`${props.className}`]: !!props.className,
};
return (
-
+
{children}
-
+
);
}
@@ -169,27 +214,3 @@ class FormItem extends React.Component {
return this.renderFormItem(children);
}
}
-
-FormItem.propTypes = {
- prefixCls: React.PropTypes.string,
- label: React.PropTypes.node,
- labelCol: React.PropTypes.object,
- help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]),
- validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
- hasFeedback: React.PropTypes.bool,
- wrapperCol: React.PropTypes.object,
- className: React.PropTypes.string,
- id: React.PropTypes.string,
- children: React.PropTypes.node,
-};
-
-FormItem.defaultProps = {
- hasFeedback: false,
- prefixCls: 'ant-form',
-};
-
-FormItem.contextTypes = {
- form: React.PropTypes.object,
-};
-
-module.exports = FormItem;
diff --git a/components/form/ValueMixin.jsx b/components/form/ValueMixin.tsx
similarity index 80%
rename from components/form/ValueMixin.jsx
rename to components/form/ValueMixin.tsx
index 7450ddd687..53083b2f62 100644
--- a/components/form/ValueMixin.jsx
+++ b/components/form/ValueMixin.tsx
@@ -1,3 +1,4 @@
+import assign from 'object-assign';
const ValueMixin = {
setValue(field, e) {
let v = e;
@@ -13,10 +14,7 @@ const ValueMixin = {
const newFormData = {};
newFormData[field] = v;
this.setState({
- formData: {
- ...this.state.formData,
- ...newFormData,
- },
+ formData: assign({}, this.state.formData, newFormData),
});
},
};
diff --git a/components/form/constants.tsx b/components/form/constants.tsx
new file mode 100644
index 0000000000..27b32ad273
--- /dev/null
+++ b/components/form/constants.tsx
@@ -0,0 +1 @@
+export const FIELD_META_PROP = 'data-__meta';
diff --git a/components/form/demo/advanced-search-form.md b/components/form/demo/advanced-search-form.md
index 7a064b1dda..2202a348de 100644
--- a/components/form/demo/advanced-search-form.md
+++ b/components/form/demo/advanced-search-form.md
@@ -1,115 +1,128 @@
-# 高级搜索
+---
+order: 10
+title:
+ zh-CN: 高级搜索
+ en-US: Advanced search
+---
-- order: 10
+## zh-CN
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
----
+## en-US
+
+Three columns layout is often used for advanced searching of data table.
+
+Because the width of label is not fixed, you may need to adjust it by customizing its style.
+
````jsx
-import { Form, Input, Row, Col, Button } from 'antd';
+import { Form, Input, Row, Col, Button, DatePicker } from 'antd';
const FormItem = Form.Item;
ReactDOM.render(
-
+
, mountNode);
````
````css
-/* 定制样式 */
+/* custom style */
-.advanced-search-form {
+.ant-advanced-search-form {
padding: 16px 8px;
background: #f8f8f8;
border: 1px solid #d9d9d9;
border-radius: 6px;
}
-/* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.advanced-search-form > .row {
- margin-left: -10px;
+/* because the label length is variable, you may need to adjust the left edge to have the form centered */
+
+.ant-advanced-search-form > .ant-row {
+ position: relative;
+ left: -6px;
}
-.advanced-search-form > .row > .col-8 {
- padding: 0 8px;
-}
-
-.advanced-search-form .ant-form-item {
- margin-bottom: 16px;
-}
-
-.advanced-search-form .ant-btn + .ant-btn {
+.ant-advanced-search-form .ant-btn + .ant-btn {
margin-left: 8px;
}
````
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
new file mode 100644
index 0000000000..1afcccf2b3
--- /dev/null
+++ b/components/form/demo/dynamic-form-item.md
@@ -0,0 +1,95 @@
+---
+order: 15
+title:
+ zh-CN: 动态增减表单项
+ en-US: Dynamic form item
+---
+
+## zh-CN
+
+动态增加、减少表单项。
+
+## en-US
+
+Add or remove form items dynamically.
+
+````jsx
+import { Form, Input, Button } from 'antd';
+
+let uuid = 0;
+let Demo = React.createClass({
+ remove(k) {
+ const { form } = this.props;
+ // can use data-binding to get
+ let keys = form.getFieldValue('keys');
+ keys = keys.filter((key) => {
+ return key !== k;
+ });
+ // can use data-binding to set
+ form.setFieldsValue({
+ keys,
+ });
+ },
+ add() {
+ uuid++;
+ const { form } = this.props;
+ // can use data-binding to get
+ let keys = form.getFieldValue('keys');
+ keys = keys.concat(uuid);
+ // can use data-binding to set
+ // important! notify form to detect changes
+ form.setFieldsValue({
+ keys,
+ });
+ },
+ submit(e) {
+ e.preventDefault();
+ this.props.form.validateFields((errors, values) => {
+ if (errors) {
+ console.log(errors);
+ }
+ console.log(values);
+ });
+ },
+ render() {
+ const { getFieldProps, getFieldValue } = this.props.form;
+ getFieldProps('keys', {
+ initialValue: [0],
+ });
+
+ const formItemLayout = {
+ labelCol: { span: 6 },
+ wrapperCol: { span: 18 },
+ };
+
+ const formItems = getFieldValue('keys').map((k) => {
+ return (
+
+ this.remove(k)}>remove
+
+ );
+ });
+ return (
+
+ );
+ },
+});
+
+Demo = Form.create()(Demo);
+
+ReactDOM.render(
, mountNode);
+````
diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md
index d616e0ede6..d5df5d8cd4 100644
--- a/components/form/demo/form-controls.md
+++ b/components/form/demo/form-controls.md
@@ -1,12 +1,21 @@
-# 表单控件
+---
+order: 3
+title:
+ zh-CN: 表单控件
+ en-US: Form controls
+---
-- order: 3
+## zh-CN
展示所有支持的表单控件。
-`注`： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
+**注**： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
----
+## en-US
+
+A list off all the controls that can be used with form.
+
+**Note**: Input control: Only if set correct type for it, then it will be set correct style
````jsx
import { Form, Input, Select, Checkbox, Radio } from 'antd';
@@ -22,73 +31,67 @@ ReactDOM.render(
, mountNode);
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
new file mode 100644
index 0000000000..d40aeb8aa9
--- /dev/null
+++ b/components/form/demo/form-in-modal.md
@@ -0,0 +1,73 @@
+---
+order: 14
+title:
+ zh-CN: 与 Modal 配合使用
+ en-US: To use with modal
+---
+
+## zh-CN
+
+在 Modal 中使用 Form，当点击 Modal 的确定时，调用 `this.props.form.getFieldsValue` 获取表单内的值。
+
+## en-US
+
+If you use Form in Modal, when you click the Modal, it could invoke `this.props.form.getFieldsValue` to get values of form.
+
+````jsx
+import { Button, Form, Input, Modal } from 'antd';
+const createForm = Form.create;
+const FormItem = Form.Item;
+
+let Demo = React.createClass({
+ getInitialState() {
+ return { visible: false };
+ },
+
+ handleSubmit() {
+ console.log(this.props.form.getFieldsValue());
+ this.hideModal();
+ },
+
+ showModal() {
+ this.setState({ visible: true });
+ },
+
+ hideModal() {
+ this.setState({ visible: false });
+ },
+
+ render() {
+ const { getFieldProps } = this.props.form;
+
+ const formItemLayout = {
+ labelCol: { span: 4 },
+ wrapperCol: { span: 20 },
+ };
+ return (
+
+ 点击有惊喜
+
+
+
+
+ );
+ },
+});
+
+Demo = createForm()(Demo);
+
+ReactDOM.render(
, mountNode);
+````
diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md
index 75c7555022..225d4c868f 100644
--- a/components/form/demo/horizontal-form.md
+++ b/components/form/demo/horizontal-form.md
@@ -1,20 +1,27 @@
-# 典型表单
+---
+order: 2
+title:
+ zh-CN: 典型表单
+ en-US: Horizontal form
+---
-- order: 2
+## zh-CN
示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
----
+## en-US
+
+How to use `Form.create` to get and update values of form.
````jsx
-import { Form, Input, Button, Checkbox, Radio, Row, Col, Tooltip, Icon } from 'antd';
+import { Form, Input, Button, Checkbox, Radio, Tooltip, Icon } from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
- console.log('收到表单值：', this.props.form.getFieldsValue());
+ console.log('Received values of form:', this.props.form.getFieldsValue());
},
render() {
@@ -27,43 +34,44 @@ let Demo = React.createClass({
);
- }
+ },
});
Demo = Form.create()(Demo);
diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md
index ab6b7c8fba..2151b577d0 100644
--- a/components/form/demo/inline-form.md
+++ b/components/form/demo/inline-form.md
@@ -1,10 +1,17 @@
-# 平行排列
+---
+order: 1
+title:
+ zh-CN: 平行排列
+ en-US: Inline form
+---
-- order: 1
+## zh-CN
行内排列，常用于登录界面。
----
+## en-US
+
+Inline form is often used for login.
````jsx
import { Form, Input, Button, Checkbox } from 'antd';
@@ -13,7 +20,7 @@ const FormItem = Form.Item;
let Demo = React.createClass({
handleSubmit(e) {
e.preventDefault();
- console.log('收到表单值：', this.props.form.getFieldsValue());
+ console.log('Received values of form:', this.props.form.getFieldsValue());
},
render() {
@@ -21,25 +28,26 @@ let Demo = React.createClass({
return (
);
- }
+ },
});
Demo = Form.create()(Demo);
diff --git a/components/form/demo/input-group.md b/components/form/demo/input-group.md
index c2c1c22344..3f546e2363 100644
--- a/components/form/demo/input-group.md
+++ b/components/form/demo/input-group.md
@@ -1,54 +1,65 @@
-# 输入框组合
+---
+order: 4
+title:
+ zh-CN: 输入框组合
+ en-US: Input group
+---
-- order: 4
+## zh-CN
各类输入框的组合展现。
----
+## en-US
+
+Input group of different type input controls.
````jsx
-import { Form, Input, Select, Row, Col } from 'antd';
+import { Form, Input, Select, Col } from 'antd';
const FormItem = Form.Item;
const InputGroup = Input.Group;
const Option = Select.Option;
+const selectAfter = (
+
+ .com
+ .jp
+ .cn
+ .org
+
+);
+
ReactDOM.render(
diff --git a/components/form/demo/input.md b/components/form/demo/input.md
deleted file mode 100644
index 9deb5796d9..0000000000
--- a/components/form/demo/input.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Input 输入框
-
-- order: 0
-
-我们为 `
` 输入框定义了三种尺寸（大、默认、小），具体使用详见 [API](/components/form/#input)。
-
-注意： 在表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
-
----
-
-
-````jsx
-import { Row, Col, Input } from 'antd';
-const InputGroup = Input.Group;
-
-ReactDOM.render(
-
-
-
-
-, mountNode);
-````
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 8364995fed..db925da493 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -1,23 +1,43 @@
-# 表单组合
+---
+order: 5
+title:
+ zh-CN: 表单组合
+ en-US: mix
+---
-- order: 5
+## 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,
- Slider, Button, Row, Col, Upload, Icon } from 'antd';
+ Cascader, Slider, Button, Col, Upload, Icon } from 'antd';
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('收到表单值：', this.props.form.getFieldsValue());
+ console.log('Received the values of form', this.props.form.getFieldsValue());
},
normFile(e) {
@@ -32,47 +52,54 @@ let Demo = React.createClass({
return (
);
- }
+ },
});
Demo = Form.create()(Demo);
diff --git a/components/form/demo/validate-basic.md b/components/form/demo/validate-basic.md
index 24a21286cf..d1dcd7136b 100644
--- a/components/form/demo/validate-basic.md
+++ b/components/form/demo/validate-basic.md
@@ -1,10 +1,17 @@
-# 表单校验
+---
+order: 11
+title:
+ zh-CN: 表单校验
+ en-US: Basic validate
+---
-- order: 11
+## zh-CN
基本的表单校验例子。
----
+## en-US
+
+Basic validatation for form.
````jsx
import { Button, Form, Input } from 'antd';
@@ -15,23 +22,11 @@ function noop() {
return false;
}
-class BasicDemo extends React.Component {
- getValidateStatus(field) {
- const { isFieldValidating, getFieldError, getFieldValue } = this.props.form;
-
- if (isFieldValidating(field)) {
- return 'validating';
- } else if (!!getFieldError(field)) {
- return 'error';
- } else if (getFieldValue(field)) {
- return 'success';
- }
- }
-
+let BasicDemo = React.createClass({
handleReset(e) {
e.preventDefault();
this.props.form.resetFields();
- }
+ },
handleSubmit(e) {
e.preventDefault();
@@ -43,7 +38,7 @@ class BasicDemo extends React.Component {
console.log('Submit!!!');
console.log(values);
});
- }
+ },
userExists(rule, value, callback) {
if (!value) {
@@ -51,36 +46,36 @@ class BasicDemo extends React.Component {
} else {
setTimeout(() => {
if (value === 'JasonWood') {
- callback([new Error('抱歉，该用户名已被占用。')]);
+ callback([new Error('Sorry, the user name is already in use.')]);
} else {
callback();
}
}, 800);
}
- }
+ },
checkPass(rule, value, callback) {
const { validateFields } = this.props.form;
if (value) {
- validateFields(['rePasswd']);
+ validateFields(['rePasswd'], { force: true });
}
callback();
- }
+ },
checkPass2(rule, value, callback) {
const { getFieldValue } = this.props.form;
if (value && value !== getFieldValue('passwd')) {
- callback('两次输入密码不一致！');
+ callback('The two passwords you enter is inconsistent!');
} else {
callback();
}
- }
+ },
render() {
const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
const nameProps = getFieldProps('name', {
rules: [
- { required: true, min: 5, message: '用户名至少为 5 个字符' },
+ { required: true, min: 5, message: 'User name for at least 5 characters' },
{ validator: this.userExists },
],
});
@@ -92,29 +87,29 @@ class BasicDemo extends React.Component {
trigger: 'onBlur',
}, {
rules: [
- { type: 'email', message: '请输入正确的邮箱地址' },
+ { type: 'email', message: 'Please input the correct email' },
],
trigger: ['onBlur', 'onChange'],
- }]
+ }],
});
const passwdProps = getFieldProps('passwd', {
rules: [
- { required: true, whitespace: true, message: '请填写密码' },
- { validator: this.checkPass.bind(this) },
+ { required: true, whitespace: true, message: 'Please enter your password' },
+ { validator: this.checkPass },
],
});
const rePasswdProps = getFieldProps('rePasswd', {
rules: [{
required: true,
whitespace: true,
- message: '请再次输入密码',
+ message: 'Please confirm your password',
}, {
- validator: this.checkPass2.bind(this),
+ validator: this.checkPass2,
}],
});
const textareaProps = getFieldProps('textarea', {
rules: [
- { required: true, message: '真的不打算写点什么吗？' },
+ { required: true, message: 'Really not supposed to write something?' },
],
});
const formItemLayout = {
@@ -125,50 +120,57 @@ class BasicDemo extends React.Component {
);
- }
-}
+ },
+});
BasicDemo = createForm()(BasicDemo);
diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md
index d93b7b6cf2..92aa9a52df 100644
--- a/components/form/demo/validate-customized.md
+++ b/components/form/demo/validate-customized.md
@@ -1,15 +1,24 @@
-# 自定义校验规则
+---
+order: 13
+title:
+ zh-CN: 自定义校验规则
+ en-US: Customized validation
+---
-- order: 13
+## zh-CN
密码校验实例。
这里使用了 `this.props.form.validateFields` 方法，在对第一次输入的密码进行校验时会触发二次密码的校验。
----
+## en-US
+
+Customized validation for Password.
+
+To use `this.props.form.validateFields` method, when validating first password you enter will trigger the seconcd password validation.
````jsx
-import { Button, Form, Input, Row, Col, Modal } from 'antd';
+import { Button, Form, Input, Row, Col } from 'antd';
import classNames from 'classnames';
const createForm = Form.create;
const FormItem = Form.Item;
@@ -21,11 +30,11 @@ function noop() {
let Demo = React.createClass({
getInitialState() {
return {
- passBarShow: false, // 是否显示密码强度提示条
+ dirty: false,
+ passBarShow: false, // Whether to display a tooltip of password strength
rePassBarShow: false,
- passStrength: 'L', // 密码强度
+ passStrength: 'L', // Password strength
rePassStrength: 'L',
- visible: false,
};
},
@@ -37,14 +46,13 @@ let Demo = React.createClass({
}
console.log('Submit!!!');
console.log(values);
- this.setState({ visible: false });
});
},
getPassStrenth(value, type) {
if (value) {
let strength;
- // 密码强度的校验规则自定义，这里只是做个简单的示例
+ // Customized the password strength, here is just a simple example
if (value.length < 6) {
strength = 'L';
} else if (value.length <= 9) {
@@ -66,19 +74,11 @@ let Demo = React.createClass({
}
},
- showModal() {
- this.setState({ visible: true });
- },
-
- hideModal() {
- this.setState({ visible: false });
- },
-
checkPass(rule, value, callback) {
const form = this.props.form;
this.getPassStrenth(value, 'pass');
- if (form.getFieldValue('pass')) {
+ if (form.getFieldValue('pass') && this.state.dirty) {
form.validateFields(['rePass'], { force: true });
}
@@ -90,7 +90,7 @@ let Demo = React.createClass({
this.getPassStrenth(value, 'rePass');
if (value && value !== form.getFieldValue('pass')) {
- callback('两次输入密码不一致！');
+ callback('Two passwords you enter is inconsistent!');
} else {
callback();
}
@@ -102,12 +102,12 @@ let Demo = React.createClass({
'ant-pwd-strength': true,
'ant-pwd-strength-low': strength === 'L',
'ant-pwd-strength-medium': strength === 'M',
- 'ant-pwd-strength-high': strength === 'H'
+ 'ant-pwd-strength-high': strength === 'H',
});
const level = {
- L: '低',
- M: '中',
- H: '高'
+ L: 'Low',
+ M: 'Middle',
+ H: 'High',
};
return (
@@ -127,65 +127,62 @@ let Demo = React.createClass({
render() {
const { getFieldProps } = this.props.form;
- // 如果觉得在 JSX 中写 `getFieldProps` 会影响阅读，可以先用变量保存 `getFieldProps` 的返回值。
const passProps = getFieldProps('pass', {
rules: [
- { required: true, whitespace: true, message: '请填写密码' },
- { validator: this.checkPass }
- ]
+ { required: true, whitespace: true, message: 'Please enter your password' },
+ { validator: this.checkPass },
+ ],
+ onChange: (e) => {
+ console.log('Your password is stolen in this way', e.target.value);
+ },
});
const rePassProps = getFieldProps('rePass', {
rules: [{
required: true,
whitespace: true,
- message: '请再次输入密码',
+ message: 'Please confirm your password',
}, {
validator: this.checkPass2,
}],
});
- const formItemLayout = {
- labelCol: { span: 6 },
- wrapperCol: { span: 18 },
- };
return (
- 修改密码
-
-
-
+
);
- }
+ },
});
Demo = createForm()(Demo);
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index 68c0240720..a063d0c2bf 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -1,13 +1,20 @@
-# 校验其他组件
+---
+order: 12
+title:
+ zh-CN: 校验其他组件
+ en-US: Others components related to validation
+---
-- order: 12
+## zh-CN
提供以下组件表单域的校验：`Select` `Radio` `DatePicker` `InputNumber` `Cascader`。在 submit 时使用 `validateFieldsAndScroll`，进行校验，可以自动把不在可见范围内的校验不通过的菜单域滚动进可见范围。
----
+## en-US
+
+Provide validation for fllowing input filed: `Select` `Radio` `DatePicker` `InputNumber` `Cascader`. To use `validateFieldsAndScroll` with form validation, it will scroll the form to the failed input field which is not in visible area.
````jsx
-import { Select, Radio, Checkbox, Button, DatePicker, InputNumber, Form, Cascader } from 'antd';
+import { Select, Radio, Checkbox, Button, DatePicker, TimePicker, InputNumber, Form, Cascader, Icon } from 'antd';
const Option = Select.Option;
const RadioGroup = Radio.Group;
const createForm = Form.create;
@@ -41,7 +48,7 @@ let Demo = React.createClass({
checkBirthday(rule, value, callback) {
if (value && value.getTime() >= Date.now()) {
- callback(new Error('你不可能在未来出生吧!'));
+ callback(new Error("You can't be born in the future!"));
} else {
callback();
}
@@ -49,7 +56,7 @@ let Demo = React.createClass({
checkPrime(rule, value, callback) {
if (value !== 11) {
- callback(new Error('8~12之间的质数明明是11啊!'));
+ callback(new Error('The prime number between 8 to 12 is obiviously 11!'));
} else {
callback();
}
@@ -58,38 +65,44 @@ let Demo = React.createClass({
render() {
const address = [{
value: 'zhejiang',
- label: '浙江',
+ label: 'Zhe Jiang',
children: [{
value: 'hangzhou',
- label: '杭州',
+ label: 'Hang Zhou',
}],
}];
const { getFieldProps } = this.props.form;
const selectProps = getFieldProps('select', {
rules: [
- { required: true, message: '请选择您的国籍' }
+ { required: true, message: 'Please select your country' },
],
});
const multiSelectProps = getFieldProps('multiSelect', {
rules: [
- { required: true, message: '请选择您喜欢的颜色', type: 'array' },
- ]
+ { required: true, message: 'Please select your favourite colors', type: 'array' },
+ ],
});
const radioProps = getFieldProps('radio', {
rules: [
- { required: true, message: '请选择您的性别' }
- ]
+ { required: true, message: 'Please select your gender' },
+ ],
});
const birthdayProps = getFieldProps('birthday', {
rules: [
{
required: true,
type: 'date',
- message: '你的生日是什么呢?',
+ message: 'When is your birthday?',
}, {
validator: this.checkBirthday,
- }
- ]
+ },
+ ],
+ });
+ const timeProps = getFieldProps('time', {
+ getValueFromEvent: (value, timeString) => timeString,
+ rules: [
+ { required: true, message: 'Please select the time' },
+ ],
});
const primeNumberProps = getFieldProps('primeNumber', {
rules: [{ validator: this.checkPrime }],
@@ -105,74 +118,90 @@ let Demo = React.createClass({
);
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md
index c586ddf348..c5f4002fc2 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -1,16 +1,29 @@
-# 校验提示
+---
+order: 6
+title:
+ zh-CN: 校验提示
+ en-US: Validation message
+---
-- order: 6
+## zh-CN
我们为表单控件定义了三种校验状态，为 `
` 定义 `validateStatus` 属性即可。
-validateStatus: ['success', 'warning', 'error', 'validating']。
+validateStatus: 'success', 'warning', 'error', 'validating'。
另外为输入框添加反馈图标，设置 `` 的 `hasFeedback` 属性值为 `true` 即可。
**注意**: 反馈图标只对 ``.
+
+validateStatus: 'success', 'warning', 'error', 'validating'。
+
+To set `hasFeedback` property to `true` enable to display feed icon of input control.
+
+**PS**: Feed icon is just available for `
+ {children}
+
+```
+
+> PS：By default, large size controls are used within a form.
+
+## API
+
+### Form
+
+**more example [rc-form](http://react-component.github.io/form/)**。
+
+| Property | Description | Type | Default Value |
+|-----------|------------------------------------------|------------|---------|
+| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
+| vertical | Use vertical layout. | boolean | false |
+| horizontal | Use horizontal layout. | boolean | false |
+| inline | Use inline alignment. | boolean | false |
+| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
+| prefixCls | Set the CSS class name of form component (optional). | string | 'ant-form' |
+
+### Form.create(options)
+
+How to use：
+
+```jsx
+class CustomizedForm extends React.Component {}
+
+CustomizedForm = Form.create({})(CustomizedForm);
+```
+
+The following `options` are available:
+
+| Property | Description | Type |
+|-----------|------------------------------------------|------------|
+| onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
+| mapPropsToFields | Convert props to corresponding field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } |
+
+If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:
+
+| Property | Description | Type |
+|-----------|------------------------------------------|------------|
+| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function([fieldNames: string[]]) |
+| getFieldValue | Get the value of a field. | Function(fieldName: string) |
+| setFieldsValue | Set the value of a field. | Function(obj: object) |
+| setFields | Set the value and error of a field. | Function(obj: object) |
+| validateFields | Validate the specified fields and get theirs values and errors. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
+| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
+| getFieldError | Get the error of a field. | Function(name) |
+| isFieldValidating | Check if the specified field is being validated. | Function(name) |
+| resetFields | Reset the specified fields' value and status. If you don't specify a parameter, all the fields will be reset. | Function([names: string[]]) |
+| getFieldProps | Two-way binding for form, please read below for details. | |
+
+### this.props.form.getFieldProps(id, options)
+
+#### Special attention
+
+If you use `react@<15.3.0`, then, you can't use `getFieldProps` in functional components: https://github.com/facebook/react/pull/6534
+
+The return value of `getFieldProps` contains `id`、`value`(or any other props `valuePropName` that you specified),`ref`,`onChange`(or any other `trigger` `validateTrigger` that you specified), **shouldn't set same property again** in order to avoid conflict. If you concerntate on the details on return value, you can print them to console by `console.log`.
+
+> Don't use `defaultValue` in form, please use `initialValue` instead of it.
+
+#### getFieldProps options
+
+| Property | Description | Type | Default Value |
+|-----------|-----------------------------------------|-----|--------|
+| options.id | The unique identifier is required. | string | |
+| options.valuePropName | Props of children node, for exmaple, the prop of Switch is 'checked'. | string | 'value' |
+| options.initialValue | You can specify initial value, type, optional value of children node. | | n/a |
+| options.trigger | When to collect the value of children node | string | 'onChange' |
+| options.getValueFromEvent | To convert parameters of onChange to the value of control, for example, set value of DatePicker: `(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
+| options.validateTrigger | When to validate the value of children node. | string | 'onChange' |
+| options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator) for details. | array | n/a |
+| options.onXXX | Because `getFieldProps` will replace events like `onChange`, `trigger`, `validateTrigger`, if you still want to bind these events, you may set them in `options` | function | n/a |
+| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
+
+### Form.Item
+
+> If Form.Item has multiple children, `help`, `required`, and `validateStatus` can't be generated automatically.
+
+| Property | Description | Type | Optional | Default Value |
+|-----------|------------------------------------------|-----------|-------|--------|
+| label | Label text | string | | |
+| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` same as with `
- {children}
-
-```
-
-## Input 输入框
-
-```html
- // 样式类名前缀，默认是 ant-input-group，通常您不需要设置。
- {children}
-
-```
-
-
diff --git a/components/form/index.tsx b/components/form/index.tsx
new file mode 100644
index 0000000000..f1300440e0
--- /dev/null
+++ b/components/form/index.tsx
@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react';
+import createDOMForm from 'rc-form/lib/createDOMForm';
+import Form from './Form';
+import FormItem from './FormItem';
+import ValueMixin from './ValueMixin';
+import assign from 'object-assign';
+import { FIELD_META_PROP } from './constants';
+
+Form.create = (o = {}) => {
+ const options = assign({}, o, {
+ fieldNameProp: 'id',
+ fieldMetaProp: FIELD_META_PROP,
+ });
+ const formWrapper = createDOMForm(options);
+
+ /* eslint-disable react/prefer-es6-class */
+ return (Component) => formWrapper(React.createClass({
+ propTypes: {
+ form: PropTypes.object.isRequired,
+ },
+ childContextTypes: {
+ form: PropTypes.object.isRequired,
+ },
+ getChildContext() {
+ return {
+ form: this.props.form,
+ };
+ },
+ render() {
+ return
+ {children}
+
+```
+
+> 注：标准表单中一律使用大号控件。
+
+## API
+
+### Form
+
+**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|------------------------------------------|------------|-------|
+| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
+| vertical | 垂直排列布局 | boolean | false |
+| horizontal | 水平排列布局 | boolean | false |
+| inline | 行内排列布局 | boolean | false |
+| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
+| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | 'ant-form' |
+
+### Form.create(options)
+
+使用方式如下：
+
+```jsx
+class CustomizedForm extends React.Component {}
+
+CustomizedForm = Form.create({})(CustomizedForm);
+```
+
+`options` 的配置项如下。
+
+| 参数 | 说明 | 类型 |
+|-----------|------------------------------------------|------------|
+| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
+| mapPropsToFields | 把 props 转为对应的值，可用于把 Redux store 中的值读出 | Function(props): Object{ fieldName: Object{ value } } |
+
+经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
+
+| 参数 | 说明 | 类型 |
+|-----------|------------------------------------------|------------|
+| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([fieldNames: string[]]) |
+| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
+| setFieldsValue | 设置一组输入控件的值 | Function(obj: object) |
+| setFields | 设置一组输入控件的值与 Error | Function(obj: object) |
+| validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
+| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
+| getFieldError | 获取某个输入控件的 Error | Function(name) |
+| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
+| resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
+| getFieldProps | 用于和表单进行双向绑定，详见下方描述 | |
+
+### this.props.form.getFieldProps(id, options)
+
+#### 特别注意
+
+如果使用的是 `react@<15.3.0`，则 `getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
+
+`getFieldProps` 返回的属性包括 `id`、`value`（或你设置的其它 `valuePropName`）、`ref`、`onChange`（或者你设置的其它 `trigger` `validateTrigger`），**所以不应再设置同样的属性**，以免冲突。如果对其返回值的细节有兴趣，可以 `console.log` 出来查看。
+
+> 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。
+
+#### getFieldProps options
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------------------------------------|-----|--------|
+| options.id | 必填输入控件唯一标志 | string | |
+| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
+| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | |
+| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
+| options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：`(date, dateString) => dateString` | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
+| options.validateTrigger | 校验子节点值的时机 | string | 'onChange' |
+| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | |
+| options.onXXX | 由于 `getFieldProps` 会占用 `onChange` 等事件（即你所设置的 `trigger` `validateTrigger`），所以如果仍需绑定事件，请在 `options` 内设置 | function | 无 |
+| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |
+
+### Form.Item
+
+> 一个 Form.Item 建议只放一个 child，有多个 child 时，`help` `required` `validateStatus` 无法自动生成。
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|-----------|------------------------------------------|-----------|-------|--------|
+| label | label 标签的文本 | string | | |
+| labelCol | label 标签布局，通 `s
-.@{css-prefix}radio-inline,
-.@{css-prefix}radio-vertical,
-.@{css-prefix}checkbox-inline,
-.@{css-prefix}checkbox-vertical {
+.ant-radio-inline,
+.ant-radio-vertical,
+.ant-checkbox-inline,
+.ant-checkbox-vertical {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
+
// These classes are used on elements with descendants
-.@{css-prefix}radio,
-.@{css-prefix}checkbox {
+.ant-radio,
+.ant-checkbox {
&.disabled,
fieldset[disabled] & {
label {
@@ -66,48 +60,71 @@ input[type="checkbox"] {
}
// Form items
-// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
-.@{css-prefix}form-item {
+// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
+.@{form-prefix-cls}-item {
font-size: @font-size-base;
margin-bottom: @form-item-margin-bottom;
color: #666;
+ // nested FormItem
+ & > &,
+ & :not(.@{form-prefix-cls}) > & {
+ margin-bottom: -@form-item-margin-bottom;
+ }
+
&-control {
line-height: 32px;
+ position: relative;
+ .clearfix;
}
- &.@{css-prefix}form-item-with-help {
- margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
+ &-with-help {
+ margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - 3;
}
- > label {
- color: @label-color;
+ &-label {
text-align: right;
vertical-align: middle;
- padding-top: 7px;
- padding-bottom: 7px;
+ padding: 7px 0;
+ display: inline-block;
- &:lang(en) {
- padding-right: 8px;
+ label {
+ color: @label-color;
+
+ &:after {
+ content: ":";
+ margin: 0 8px 0 2px;
+ position: relative;
+ top: -0.5px;
+ }
}
}
- .@{css-prefix}switch {
+ .ant-switch {
margin: 4px 0;
}
+
+ &-no-colon &-label label:after {
+ content: " ";
+ }
}
-.@{css-prefix}form-explain {
+.@{form-prefix-cls}-explain {
line-height: 1.5;
margin-top: 3px;
}
-.@{css-prefix}form-text {
+.@{form-prefix-cls}-explain,
+.@{form-prefix-cls}-extra {
+ color: #999;
+}
+
+.@{form-prefix-cls}-text {
display: inline-block;
padding-right: 8px;
}
-.@{css-prefix}form-split {
+.@{form-prefix-cls}-split {
display: block;
text-align: center;
}
@@ -115,23 +132,17 @@ input[type="checkbox"] {
// 表单下的输入框尺寸唯一: 大尺寸
form {
.has-feedback {
- .@{iconfont-css-prefix} {
- .square(@input-height-lg);
- line-height: @input-height-lg;
+ .ant-input {
+ padding-right: 24px;
}
}
- .@{css-prefix}input,
- .@{css-prefix}input-group .@{css-prefix}input,
- .@{css-prefix}input-group .@{css-prefix}input-group-addon {
- .input-lg();
- }
- textarea.@{css-prefix}input {
+ textarea.ant-input {
height: auto;
}
// input[type=file]
- .@{css-prefix}upload {
+ .ant-upload {
background: transparent;
}
@@ -142,37 +153,43 @@ form {
}
// Radios and checkboxes on same line
- .@{css-prefix}radio-inline,
- .@{css-prefix}checkbox-inline {
+ .ant-radio-inline,
+ .ant-checkbox-inline {
display: inline-block;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
- margin-left: 16px;
+ margin-left: 8px;
&:first-child {
margin-left: 0;
}
}
- .@{css-prefix}checkbox-vertical,
- .@{css-prefix}radio-vertical {
+ .ant-checkbox-vertical,
+ .ant-radio-vertical {
display: block;
}
- .@{input-number-prefix-cls} {
+ .ant-checkbox-vertical + .ant-checkbox-vertical,
+ .ant-radio-vertical + .ant-radio-vertical {
+ margin-left: 0;
+ }
+
+ .ant-input-number {
margin-top: -1px;
margin-right: 8px;
}
- .@{select-prefix-cls} {
+ .ant-select,
+ .ant-cascader-picker {
width: 100%;
}
}
// Input combined with select
-.@{css-prefix}input-group-wrap {
- .@{select-prefix-cls}-selection {
+.ant-input-group-wrap {
+ .ant-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&:hover {
@@ -180,80 +197,65 @@ form {
}
}
- .@{select-prefix-cls}-selection--single {
+ .ant-select-selection--single {
margin-left: -1px;
height: @input-height-lg;
background-color: #eee;
- .@{select-prefix-cls}-selection__rendered {
+ .ant-select-selection__rendered {
padding-left: 8px;
padding-right: 25px;
line-height: 30px;
}
}
- .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
+ .ant-select-open .ant-select-selection {
border-color: @border-color-base;
box-shadow: none;
}
}
-.ant-search-input {
- &.ant-input-group .ant-input:first-child {
- border-radius: @border-radius-base;
+// Form layout
+//== Horizontal Form
+.@{form-prefix-cls}-horizontal {
+ .@{form-prefix-cls}-item {
+ .make-row;
}
- .ant-search-btn {
- .btn-default;
- border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
- margin-left: -30px;
- position: relative;
- border-width: 0 0 0 1px;
- z-index: 2;
- padding-left: 8px;
- padding-right: 8px;
- &:hover {
- border-color: @border-color-base;
- }
- form & {
- padding-top: 6px;
- padding-bottom: 6px;
- }
- }
- &&-focus .ant-search-btn-noempty,
- &:hover .ant-search-btn-noempty {
- .btn-primary;
+
+ .ant-radio-inline,
+ .ant-checkbox-inline {
+ vertical-align: baseline;
}
}
// Form layout
-//== Horizontal Form
-.@{css-prefix}form-horizontal {
- .@{css-prefix}form-item {
- .make-row;
- }
+//== Vertical Form
+.@{form-prefix-cls}-vertical {
+ .@{form-prefix-cls}-item-label {
+ padding: 0 0 8px;
- .@{css-prefix}radio-inline,
- .@{css-prefix}checkbox-inline {
- vertical-align: top;
+ label:after {
+ content: '';
+ }
}
}
//== Inline Form
-.@{css-prefix}form-inline {
- .@{css-prefix}form-item {
+.@{form-prefix-cls}-inline {
+ .@{form-prefix-cls}-item {
display: inline-block;
margin-right: 10px;
+ margin-bottom: 0;
+
+ &-with-help {
+ margin-bottom: 24px;
+ }
+
> div {
display: inline-block;
}
}
- .@{css-prefix}input {
- display: inline-block;
- width: auto;
- vertical-align: middle;
- }
-
- .@{css-prefix}form-text {
+ .@{form-prefix-cls}-text {
display: inline-block;
}
@@ -261,14 +263,14 @@ form {
display: inline-block;
}
- // Fix https://github.com/ant-design/ant-design/issues/1040
- .@{css-prefix}form-explain {
+ // Fix https://github.comdesigndesign/issues/1040
+ .@{form-prefix-cls}-explain {
position: absolute;
}
}
-.@{css-prefix}form-horizontal,
-.@{css-prefix}form-inline {
+.@{form-prefix-cls}-horizontal,
+.@{form-prefix-cls}-inline {
label {
> input[type="radio"],
> input[type="checkbox"] {
@@ -286,12 +288,13 @@ form {
position: absolute;
top: 0;
right: 0;
- font-family: "anticon" !important;
+ visibility: visible;
.square(@input-height-lg);
line-height: @input-height-lg;
text-align: center;
font-size: 14px;
- .animation(zoomIn .3s @ease-out-back);
+ animation: zoomIn .3s @ease-out-back;
+ .iconfont-font("");
}
}
@@ -314,8 +317,7 @@ form {
}
.has-success {
- .form-control-validation(@success-color; @input-hover-border-color;);
- .@{css-prefix}input {
+ .ant-input {
border-color: @input-border-color;
box-shadow: none;
}
@@ -334,31 +336,31 @@ form {
color: @warning-color;
}
- // ant-select
- .@{select-prefix-cls} {
+ //select
+ .ant-select {
&-selection {
border-color: @warning-color;
- box-shadow: 0 0 0 2px tint(@warning-color, 80%);
+ box-shadow: 0 0 0 2px fade(@warning-color, 20%);
}
&-arrow {
color: @warning-color;
}
}
- // ant-datepicker
- .@{calendar-prefix-cls}-picker-icon:after {
+ //datepicker
+ .ant-calendar-picker-icon:after {
color: @warning-color;
}
- // ant-timepicker
- .@{timepicker-prefix-cls}-picker-icon:after {
+ //timepicker
+ .ant-time-picker-icon:after {
color: @warning-color;
}
- // ant-input-number
- .@{input-number-prefix-cls} {
+ //input-number
+ .ant-input-number {
border-color: @warning-color;
- box-shadow: 0 0 0 2px tint(@warning-color, 80%);
+ box-shadow: 0 0 0 2px fade(@warning-color, 20%);
&:not([disabled]):hover {
border-color: @warning-color;
}
@@ -369,15 +371,15 @@ form {
.form-control-validation(@error-color; @error-color;);
&.has-feedback:after {
- content: '\e634';
+ content: '\e631';
color: @error-color;
}
- // ant-select
- .@{select-prefix-cls} {
+ //select
+ .ant-select {
&-selection {
border-color: @error-color;
- box-shadow: 0 0 0 2px tint(@error-color, 80%);
+ box-shadow: 0 0 0 2px fade(@error-color, 20%);
}
&-arrow {
@@ -385,31 +387,55 @@ form {
}
}
- // ant-datepicker
- .@{calendar-prefix-cls}-picker-icon:after {
+ //datepicker
+ .ant-calendar-picker-icon:after {
color: @error-color;
}
- // ant-timepicker
- .@{timepicker-prefix-cls}-picker-icon:after {
+ //timepicker
+ .ant-time-picker-picker-icon:after {
color: @error-color;
}
- // ant-input-number
- .@{input-number-prefix-cls} {
+ //input-number
+ .ant-input-number {
border-color: @error-color;
- box-shadow: 0 0 0 2px tint(@error-color, 80%);
+ box-shadow: 0 0 0 2px fade(@error-color, 20%);
&:not([disabled]):hover {
border-color: @error-color;
}
}
+ .ant-mention-wrapper,
+ .ant-mention-wrapper.active {
+ .ant-mention-editor {
+ border-color: @error-color;
+ box-shadow: 0 0 0 2px fade(@error-color, 20%);
+ &:not([disabled]):hover,
+ &:not([disabled]):focus {
+ border-color: @error-color;
+ box-shadow: 0 0 0 2px fade(@error-color, 20%);
+ }
+ }
+ }
}
.is-validating {
&.has-feedback:after {
display: inline-block;
- .animation(loadingCircle 1s infinite linear);
+ animation: loadingCircle 1s infinite linear;
content: "\e6a1";
+ color: #999;
+ }
+}
+
+.ant-advanced-search-form {
+ .@{form-prefix-cls}-item {
+ margin-bottom: 16px;
+ }
+ .ant-input,
+ .ant-input-group .ant-input,
+ .ant-input-group .ant-input-group-addon {
+ height: 28px;
}
}
diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx
new file mode 100644
index 0000000000..eebb04b5f1
--- /dev/null
+++ b/components/form/style/index.tsx
@@ -0,0 +1,5 @@
+import '../../style/index.less';
+import './index.less';
+
+// style dependencies
+import '../../layout/style';
diff --git a/style/mixins/form.less b/components/form/style/mixin.less
similarity index 82%
rename from style/mixins/form.less
rename to components/form/style/mixin.less
index 41e5ccfb00..fe198286b2 100644
--- a/style/mixins/form.less
+++ b/components/form/style/mixin.less
@@ -1,23 +1,23 @@
.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
- .@{css-prefix}form-explain,
- .@{css-prefix}form-split {
+ .ant-form-explain,
+ .ant-form-split {
color: @text-color;
}
// 输入框的不同校验状态
- .@{css-prefix}input {
+ .ant-input {
border-color: @border-color;
- box-shadow: 0 0 0 2px tint(@border-color, 80%);
+ box-shadow: 0 0 0 2px fade(@border-color, 20%);
&:not([disabled]):hover {
border-color: @border-color;
}
}
- .@{calendar-prefix-cls}-picker-open .@{calendar-prefix-cls}-picker-input {
- box-shadow: 0 0 0 2px tint(@border-color, 80%);
+ .ant-calendar-picker-open .ant-calendar-picker-input {
+ box-shadow: 0 0 0 2px fade(@border-color, 20%);
}
- .@{css-prefix}input-group-addon {
+ .ant-input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
@@ -56,7 +56,7 @@
}
input[type="search"] {
- .box-sizing(border-box);
+ box-sizing: border-box;
}
// Position radios and checkboxes better
@@ -86,7 +86,7 @@
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
- outline: 5px auto -webkit-focus-ring-color;
+ outline: 5px auto -webkit-focus-ring-color; // lesshint spaceAroundOperator: false
outline-offset: -2px;
}
diff --git a/components/icon/index.jsx b/components/icon/index.jsx
deleted file mode 100644
index 6779d1b09c..0000000000
--- a/components/icon/index.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default props => {
- let { type, className = '', ...other } = props;
- className += ` anticon anticon-${type}`;
- return
+```__react
+import IconSet from 'site/theme/template/IconSet';
+const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
+
+ReactDOM.render(
+```__react
+const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
+
+ReactDOM.render(
+```__react
+const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf','file-excel', 'file-jpg', 'file-ppt', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o'];
+
+ReactDOM.render(
-
- {this.props.type}
-
-
- );
- }
-});
-
-const IconSet = React.createClass({
- getDefaultProps() {
- return {
- icons: []
- };
- },
- render() {
- return (
-
- {this.props.icons.map((type, i) =>
- );
- }
-});
-
-const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down'];
-
-const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
-
-const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator'];
-
-
-ReactDOM.render(