When form layout is vertical, keep the colon inside label, close ant-…

…design#4593 (ant-design#4599)
nanqiu · Jan 13, 2017 · 3423d27 · 3423d27
1 parent 6a073c8
commit 3423d27
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
@@ -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, {

diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -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,16 +214,19 @@ 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();
 
     const className = classNames({
       [`${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*$/, '');
     }