2016-07-07 20:25:03 +08:00
|
|
|
|
import * as React from 'react';
|
2015-11-24 20:03:57 +08:00
|
|
|
|
import classNames from 'classnames';
|
2016-06-16 22:06:06 +08:00
|
|
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
2016-07-09 17:44:28 +08:00
|
|
|
|
import Row from '../row';
|
|
|
|
|
import Col from '../col';
|
2016-07-07 16:59:47 +08:00
|
|
|
|
import { FIELD_META_PROP } from './constants';
|
2015-10-09 13:53:04 +08:00
|
|
|
|
|
2016-04-12 16:06:17 +08:00
|
|
|
|
export default class FormItem extends React.Component {
|
|
|
|
|
static defaultProps = {
|
|
|
|
|
hasFeedback: false,
|
|
|
|
|
prefixCls: 'ant-form',
|
2016-07-21 15:51:37 +08:00
|
|
|
|
colon: true,
|
2016-07-13 11:14:24 +08:00
|
|
|
|
};
|
2016-04-12 16:06:17 +08:00
|
|
|
|
|
|
|
|
|
static 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,
|
2016-07-13 17:22:23 +08:00
|
|
|
|
colon: React.PropTypes.bool,
|
2016-07-13 11:14:24 +08:00
|
|
|
|
};
|
2016-04-12 16:06:17 +08:00
|
|
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
|
form: React.PropTypes.object,
|
2016-07-13 11:14:24 +08:00
|
|
|
|
};
|
2016-04-12 16:06:17 +08:00
|
|
|
|
|
2016-06-12 10:15:59 +08:00
|
|
|
|
shouldComponentUpdate(...args) {
|
|
|
|
|
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-21 16:23:35 +08:00
|
|
|
|
getHelpMsg() {
|
|
|
|
|
const context = this.context;
|
|
|
|
|
const props = this.props;
|
|
|
|
|
if (props.help === undefined && context.form) {
|
2016-04-12 16:06:17 +08:00
|
|
|
|
return this.getId() ? (context.form.getFieldError(this.getId()) || []).join(', ') : '';
|
2016-01-21 16:23:35 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return props.help;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-12 16:06:17 +08:00
|
|
|
|
getOnlyControl() {
|
|
|
|
|
const children = React.Children.toArray(this.props.children);
|
|
|
|
|
const child = children.filter((c) => {
|
2016-07-07 16:59:47 +08:00
|
|
|
|
return c.props && FIELD_META_PROP in c.props;
|
2016-04-12 16:06:17 +08:00
|
|
|
|
})[0];
|
|
|
|
|
return child !== undefined ? child : null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getChildProp(prop) {
|
|
|
|
|
const child = this.getOnlyControl();
|
|
|
|
|
return child && child.props && child.props[prop];
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-28 21:43:45 +08:00
|
|
|
|
getId() {
|
2016-04-12 16:06:17 +08:00
|
|
|
|
return this.getChildProp('id');
|
2016-01-28 21:43:45 +08:00
|
|
|
|
}
|
|
|
|
|
|
2016-02-01 10:23:06 +08:00
|
|
|
|
getMeta() {
|
2016-07-07 16:59:47 +08:00
|
|
|
|
return this.getChildProp(FIELD_META_PROP);
|
2016-02-01 10:23:06 +08:00
|
|
|
|
}
|
|
|
|
|
|
2015-10-09 13:53:04 +08:00
|
|
|
|
renderHelp() {
|
2016-06-12 10:15:59 +08:00
|
|
|
|
const prefixCls = this.props.prefixCls;
|
2016-01-21 16:23:35 +08:00
|
|
|
|
const help = this.getHelpMsg();
|
2016-04-12 14:55:02 +08:00
|
|
|
|
return help ? (
|
2016-06-12 10:15:59 +08:00
|
|
|
|
<div className={`${prefixCls}-explain`} key="help">
|
2016-04-12 14:55:02 +08:00
|
|
|
|
{help}
|
2015-10-09 13:53:04 +08:00
|
|
|
|
</div>
|
2016-04-12 14:55:02 +08:00
|
|
|
|
) : null;
|
2015-10-09 13:53:04 +08:00
|
|
|
|
}
|
|
|
|
|
|
2016-04-25 16:25:57 +08:00
|
|
|
|
renderExtra() {
|
|
|
|
|
const { prefixCls, extra } = this.props;
|
2016-04-27 20:44:36 +08:00
|
|
|
|
return extra ? (
|
2016-06-12 10:15:59 +08:00
|
|
|
|
<span className={`${prefixCls}-extra`}>{extra}</span>
|
2016-04-27 20:44:36 +08:00
|
|
|
|
) : null;
|
2016-04-25 16:25:57 +08:00
|
|
|
|
}
|
|
|
|
|
|
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-04-12 16:06:17 +08:00
|
|
|
|
if (!field) {
|
|
|
|
|
return '';
|
|
|
|
|
}
|
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';
|
|
|
|
|
}
|
2016-02-22 10:52:30 +08:00
|
|
|
|
return '';
|
2016-01-21 16:23:35 +08:00
|
|
|
|
}
|
|
|
|
|
|
2016-01-26 15:40:47 +08:00
|
|
|
|
renderValidateWrapper(c1, c2, c3) {
|
2015-10-30 11:36:11 +08:00
|
|
|
|
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) {
|
2015-11-24 20:03:57 +08:00
|
|
|
|
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
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
2015-10-30 11:36:11 +08:00
|
|
|
|
return (
|
2016-02-17 18:04:42 +08:00
|
|
|
|
<div className={`${this.props.prefixCls}-item-control ${classes}`}>
|
2016-01-26 15:38:58 +08:00
|
|
|
|
{c1}{c2}{c3}
|
2015-10-30 11:36:11 +08:00
|
|
|
|
</div>
|
|
|
|
|
);
|
2015-10-09 13:53:04 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderWrapper(children) {
|
2015-10-29 08:40:51 +08:00
|
|
|
|
const wrapperCol = this.props.wrapperCol;
|
2015-10-31 08:43:38 +08:00
|
|
|
|
return (
|
2016-07-09 17:44:28 +08:00
|
|
|
|
<Col {...wrapperCol} key="wrapper">
|
2015-10-09 13:53:04 +08:00
|
|
|
|
{children}
|
2016-07-09 17:44:28 +08:00
|
|
|
|
</Col>
|
2015-10-31 08:43:38 +08:00
|
|
|
|
);
|
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() || {};
|
2016-01-29 10:32:52 +08:00
|
|
|
|
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
|
|
|
|
|
2016-02-02 19:08:17 +08:00
|
|
|
|
const className = classNames({
|
2016-02-03 14:00:38 +08:00
|
|
|
|
[`${props.prefixCls}-item-required`]: required,
|
2016-02-02 19:08:17 +08:00
|
|
|
|
});
|
|
|
|
|
|
2016-06-02 18:09:20 +08:00
|
|
|
|
// remove user input colon
|
|
|
|
|
let label = props.label;
|
2016-06-15 18:15:47 +08:00
|
|
|
|
if (typeof label === 'string' && label.trim() !== '') {
|
2016-07-04 14:39:20 +08:00
|
|
|
|
label = props.label.replace(/[:|:]\s*$/, '');
|
2016-06-02 18:09:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
2016-01-21 16:23:35 +08:00
|
|
|
|
return props.label ? (
|
2016-07-10 17:04:03 +08:00
|
|
|
|
<Col {...labelCol} key="label" className={`${props.prefixCls}-item-label`}>
|
2016-07-10 15:16:24 +08:00
|
|
|
|
<label htmlFor={props.id || this.getId()} className={className}>
|
2016-07-09 17:44:28 +08:00
|
|
|
|
{label}
|
|
|
|
|
</label>
|
|
|
|
|
</Col>
|
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-01-29 10:32:52 +08:00
|
|
|
|
}
|
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) {
|
2015-10-25 11:33:19 +08:00
|
|
|
|
const props = this.props;
|
|
|
|
|
const prefixCls = props.prefixCls;
|
2016-03-30 11:01:09 +08:00
|
|
|
|
const style = props.style;
|
2015-10-09 13:53:04 +08:00
|
|
|
|
const itemClassName = {
|
|
|
|
|
[`${prefixCls}-item`]: true,
|
2016-01-26 17:42:56 +08:00
|
|
|
|
[`${prefixCls}-item-with-help`]: !!this.getHelpMsg(),
|
2016-07-21 15:51:37 +08:00
|
|
|
|
[`${prefixCls}-item-no-colon`]: !props.colon,
|
2016-01-12 14:24:42 +08:00
|
|
|
|
[`${props.className}`]: !!props.className,
|
2015-10-09 13:53:04 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
2016-07-09 17:44:28 +08:00
|
|
|
|
<Row className={classNames(itemClassName)} style={style}>
|
2015-10-09 13:53:04 +08:00
|
|
|
|
{children}
|
2016-07-09 17:44:28 +08:00
|
|
|
|
</Row>
|
2015-10-09 13:53:04 +08:00
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const children = this.renderChildren();
|
|
|
|
|
return this.renderFormItem(children);
|
|
|
|
|
}
|
|
|
|
|
}
|