mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
将 formItem 布局样式相关的属性写法同 layout 组件属性结合。
This commit is contained in:
parent
cd24f3d566
commit
8f72f6cdcf
@ -10,6 +10,16 @@ function prefixClsFn(prefixCls, ...args) {
|
||||
}
|
||||
|
||||
class FormItem extends React.Component {
|
||||
_getLayoutClass(colDef) {
|
||||
if (!colDef) {
|
||||
return '';
|
||||
}
|
||||
const {span, offset} = colDef;
|
||||
const col = span ? 'col-' + span : '';
|
||||
const offsetCol = offset ? ' col-offset-' + offset : '';
|
||||
return col + offsetCol;
|
||||
}
|
||||
|
||||
renderHelp() {
|
||||
const prefixCls = this.props.prefixCls;
|
||||
return this.props.help ? (
|
||||
@ -40,19 +50,20 @@ class FormItem extends React.Component {
|
||||
}
|
||||
|
||||
renderWrapper(children) {
|
||||
return this.props.wrapperClassName ? (
|
||||
<div className={this.props.wrapperClassName}>
|
||||
const wrapperCol = this.props.wrapperCol;
|
||||
return wrapperCol ? (
|
||||
<div className={this._getLayoutClass(wrapperCol)}>
|
||||
{children}
|
||||
</div>
|
||||
) : children;
|
||||
}
|
||||
|
||||
renderLabel() {
|
||||
const labelClassName = this.props.labelClassName;
|
||||
const labelCol = this.props.labelCol;
|
||||
const required = this.props.required ? 'required' : '';
|
||||
|
||||
return this.props.label ? (
|
||||
<label htmlFor={this.props.id} className={labelClassName} required={required}>
|
||||
<label htmlFor={this.props.id} className={this._getLayoutClass(labelCol)} required={required}>
|
||||
{this.props.label}
|
||||
</label>
|
||||
) : '';
|
||||
@ -119,13 +130,13 @@ class FormItem extends React.Component {
|
||||
FormItem.propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
label: React.PropTypes.node,
|
||||
labelClassName: React.PropTypes.string,
|
||||
labelCol: React.PropTypes.object,
|
||||
help: React.PropTypes.node,
|
||||
validateStatus: React.PropTypes.oneOf(['success', 'warning', 'error', 'validating']),
|
||||
hasFeedback: React.PropTypes.bool,
|
||||
wrapperClassName: React.PropTypes.string,
|
||||
wrapperCol: React.PropTypes.object,
|
||||
className: React.PropTypes.string,
|
||||
children: React.PropTypes.any,
|
||||
children: React.PropTypes.node,
|
||||
};
|
||||
|
||||
FormItem.defaultProps = {
|
||||
|
@ -1,10 +1,11 @@
|
||||
import Form from './Form';
|
||||
import FormItem from './FormItem';
|
||||
import Input from './Input';
|
||||
import ValueMixin from './ValueMixin';
|
||||
import Input from './Input';
|
||||
|
||||
Form.Item = FormItem;
|
||||
Form.Input = Input;
|
||||
Form.ValueMixin = ValueMixin;
|
||||
Form.InputGroup = Input.Group;
|
||||
export default Form;
|
||||
export default {
|
||||
Form,
|
||||
Input
|
||||
};
|
||||
|
3
index.js
3
index.js
@ -54,7 +54,8 @@ const antd = {
|
||||
Row: require('./components/layout').Row,
|
||||
Col: require('./components/layout').Col,
|
||||
Spin: require('./components/spin'),
|
||||
Form: require('./components/form'),
|
||||
Form: require('./components/form').Form,
|
||||
Input: require('./components/form').Input,
|
||||
};
|
||||
|
||||
antd.version = require('./package.json').version;
|
||||
|
Loading…
Reference in New Issue
Block a user