From 3423d274932f83c5ffdfa186af01e8f7147ba44c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Fri, 13 Jan 2017 21:12:31 +0800
Subject: [PATCH] When form layout is vertical, keep the colon inside label,
 close #4593 (#4599)

---
 components/form/Form.tsx     | 10 ++++++++++
 components/form/FormItem.tsx |  9 +++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index 52896bec2e..c181042aac 100755
--- 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
index f8ae9991a2..db81e7d555 100644
--- 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,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*$/, '');
     }