将 formItem 布局样式相关的属性写法同 layout 组件属性结合。

This commit is contained in:
SimaQ 2015-10-29 08:40:51 +08:00
parent cd24f3d566
commit 8f72f6cdcf
3 changed files with 25 additions and 12 deletions

View File

@ -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 = {

View File

@ -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
};

View File

@ -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;