ant-design/components/form/FormItem.jsx

202 lines
5.0 KiB
React
Raw Normal View History

2015-10-09 13:53:04 +08:00
import React from 'react';
import classNames from 'classnames';
2015-10-09 13:53:04 +08:00
function prefixClsFn(prefixCls, ...args) {
2016-01-05 14:42:06 +08:00
return args.map((s) => {
return `${prefixCls}-${s}`;
2015-10-09 13:53:04 +08:00
}).join(' ');
}
class FormItem extends React.Component {
_getLayoutClass(colDef) {
if (!colDef) {
return '';
}
2016-01-05 14:42:06 +08:00
const { span, offset } = colDef;
const col = span ? `col-${span}` : '';
const offsetCol = offset ? ` col-offset-${offset}` : '';
return col + offsetCol;
}
2016-01-21 16:23:35 +08:00
getHelpMsg() {
const context = this.context;
const props = this.props;
if (props.help === undefined && context.form) {
2016-01-28 21:43:45 +08:00
return (context.form.getFieldError(this.getId()) || []).join(', ');
2016-01-21 16:23:35 +08:00
}
return props.help;
}
2016-01-28 21:43:45 +08:00
getId() {
return this.props.children.props && this.props.children.props.id;
}
2016-02-01 10:23:06 +08:00
getMeta() {
return this.props.children.props && this.props.children.props.__meta;
}
2015-10-09 13:53:04 +08:00
renderHelp() {
2016-01-21 16:23:35 +08:00
const props = this.props;
const prefixCls = props.prefixCls;
const help = this.getHelpMsg();
return (
2016-01-28 21:43:45 +08:00
<div className={!!help ? prefixClsFn(prefixCls, 'explain') : ''} key="help">
2016-01-21 16:23:35 +08:00
{ help }
2015-10-09 13:53:04 +08:00
</div>
);
2015-10-09 13:53:04 +08:00
}
2016-04-25 16:25:57 +08:00
renderExtra() {
const { prefixCls, extra } = this.props;
return <div className={prefixClsFn(prefixCls, 'extra')}>{extra}</div>;
}
2016-01-21 16:23:35 +08:00
getValidateStatus() {
const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
2016-01-28 21:43:45 +08:00
const field = this.getId();
2016-01-21 16:23:35 +08:00
if (isFieldValidating(field)) {
return 'validating';
} else if (!!getFieldError(field)) {
return 'error';
2016-01-25 15:00:03 +08:00
} else if (getFieldValue(field) !== undefined) {
2016-01-21 16:23:35 +08:00
return 'success';
}
return '';
2016-01-21 16:23:35 +08:00
}
2016-01-26 15:40:47 +08:00
renderValidateWrapper(c1, c2, c3) {
let classes = '';
2016-01-21 16:23:35 +08:00
const form = this.context.form;
const props = this.props;
const validateStatus = (props.validateStatus === undefined && form) ?
2016-01-28 21:43:45 +08:00
this.getValidateStatus() :
props.validateStatus;
2016-01-21 16:23:35 +08:00
if (validateStatus) {
classes = classNames(
2015-10-09 13:53:04 +08:00
{
2016-01-21 16:23:35 +08:00
'has-feedback': props.hasFeedback,
'has-success': validateStatus === 'success',
'has-warning': validateStatus === 'warning',
'has-error': validateStatus === 'error',
'is-validating': validateStatus === 'validating',
2015-10-09 13:53:04 +08:00
}
);
}
return (
<div className={`${this.props.prefixCls}-item-control ${classes}`}>
2016-01-26 15:38:58 +08:00
{c1}{c2}{c3}
</div>
);
2015-10-09 13:53:04 +08:00
}
renderWrapper(children) {
const wrapperCol = this.props.wrapperCol;
return (
2015-11-03 13:50:36 +08:00
<div className={this._getLayoutClass(wrapperCol)} key="wrapper">
2015-10-09 13:53:04 +08:00
{children}
</div>
);
2015-10-09 13:53:04 +08:00
}
2016-01-21 16:23:35 +08:00
isRequired() {
2016-01-28 21:43:45 +08:00
if (this.context.form) {
2016-02-01 10:23:06 +08:00
const meta = this.getMeta() || {};
const validate = (meta.validate || []);
return validate.filter((item) => !!item.rules).some((item) => {
2016-01-28 21:43:45 +08:00
return item.rules.some((rule) => rule.required);
});
}
return false;
2016-01-21 16:23:35 +08:00
}
2015-10-09 13:53:04 +08:00
renderLabel() {
2016-01-21 16:23:35 +08:00
const props = this.props;
const labelCol = props.labelCol;
const required = props.required === undefined ?
2016-01-28 21:43:45 +08:00
this.isRequired() :
props.required;
2015-10-09 13:53:04 +08:00
const className = classNames({
[this._getLayoutClass(labelCol)]: true,
2016-02-03 14:00:38 +08:00
[`${props.prefixCls}-item-required`]: required,
});
2016-01-21 16:23:35 +08:00
return props.label ? (
<label htmlFor={props.id || this.getId()} className={className} key="label">
2016-01-21 16:23:35 +08:00
{props.label}
2015-10-09 13:53:04 +08:00
</label>
2015-11-03 13:50:36 +08:00
) : null;
2015-10-09 13:53:04 +08:00
}
renderChildren() {
2016-01-21 16:23:35 +08:00
const props = this.props;
2016-01-28 21:43:45 +08:00
const children = React.Children.map(props.children, (child) => {
2016-03-01 17:52:07 +08:00
if (child && typeof child.type === 'function' && !child.props.size) {
2016-02-01 10:23:06 +08:00
return React.cloneElement(child, { size: 'large' });
}
2016-02-01 10:23:06 +08:00
return child;
2016-01-28 21:43:45 +08:00
});
2015-10-09 13:53:04 +08:00
return [
this.renderLabel(),
this.renderWrapper(
this.renderValidateWrapper(
2016-01-21 16:23:35 +08:00
children,
2016-01-26 15:38:58 +08:00
this.renderHelp(),
2016-04-25 16:31:32 +08:00
this.renderExtra()
2015-10-09 13:53:04 +08:00
)
),
];
}
renderFormItem(children) {
const props = this.props;
const prefixCls = props.prefixCls;
const style = props.style;
2015-10-09 13:53:04 +08:00
const itemClassName = {
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
2016-01-12 14:24:42 +08:00
[`${props.className}`]: !!props.className,
2015-10-09 13:53:04 +08:00
};
return (
<div className={classNames(itemClassName)} style={style}>
2015-10-09 13:53:04 +08:00
{children}
</div>
);
}
render() {
const children = this.renderChildren();
return this.renderFormItem(children);
}
}
FormItem.propTypes = {
prefixCls: React.PropTypes.string,
label: React.PropTypes.node,
labelCol: React.PropTypes.object,
2016-01-12 14:24:42 +08:00
help: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.bool]),
2015-10-29 18:59:06 +08:00
validateStatus: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
2015-10-09 13:53:04 +08:00
hasFeedback: React.PropTypes.bool,
wrapperCol: React.PropTypes.object,
2015-10-09 13:53:04 +08:00
className: React.PropTypes.string,
2016-01-22 14:56:33 +08:00
id: React.PropTypes.string,
children: React.PropTypes.node,
2015-10-09 13:53:04 +08:00
};
FormItem.defaultProps = {
hasFeedback: false,
prefixCls: 'ant-form',
};
2016-01-21 16:23:35 +08:00
FormItem.contextTypes = {
form: React.PropTypes.object,
};
2015-10-09 13:53:04 +08:00
module.exports = FormItem;