mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 05:29:37 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

When form layout is vertical, keep the colon inside label, close #4593 (#4599)

Browse Source
This commit is contained in:
偏右 2017-01-13 21:12:31 +08:00 committed by GitHub
parent 6a073c8c6e
commit 3423d27493
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/form/Form.tsx
View File

@ -98,6 +98,10 @@ export default class Form extends React.Component<FormProps, any> {
onSubmit: React.PropTypes.func,
};
static childContextTypes = {
vertical: PropTypes.bool,
};
static Item = FormItem;
static create = (options?: FormCreateOption): ComponentDecorator => {
@ -153,6 +157,12 @@ export default class Form extends React.Component<FormProps, any> {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
getChildContext() {
return {
vertical: this.props.vertical,
};
}
render() {
const { prefixCls, className = '', inline, horizontal, vertical } = this.props;
const formClassName = classNames(prefixCls, {

9
components/form/FormItem.tsx
View File

@ -30,6 +30,7 @@ export interface FormItemProps {
export interface FormItemContext {
form: WrappedFormUtils;
vertical: boolean;
}
export default class FormItem extends React.Component<FormItemProps, any> {
@ -55,6 +56,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
static contextTypes = {
form: React.PropTypes.object,
vertical: React.PropTypes.bool,
};
context: FormItemContext;
@ -212,6 +214,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
renderLabel() {
const props = this.props;
const context = this.context;
const labelCol = props.labelCol;
const required = this.isRequired();
@ -219,9 +222,11 @@ export default class FormItem extends React.Component<FormItemProps, any> {
[`${props.prefixCls}-item-required`]: required,
});
// remove user input colon
let label = props.label;
if (typeof label === 'string' && (label as string).trim() !== '') {
// Keep label is original where there should have no colon
const haveColon = props.colon && !context.vertical;
// Remove duplicated user input colon
if (haveColon && typeof label === 'string' && (label as string).trim() !== '') {
label = (props.label as string).replace(/[：|:]\s*$/, '');
}