update form style for advanced-search-form demo

components/form/FormItem.jsx

@@ -7,29 +7,7 @@ function prefixClsFn(prefixCls, ...args) {
   }).join(' ');
 }
 
-export default class FormItem extends React.Component {
-  static defaultProps = {
-    hasFeedback: false,
-    prefixCls: 'ant-form',
-  }
-
-  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,
-  }
-
-  static contextTypes = {
-    form: React.PropTypes.object,
-  }
-
+class FormItem extends React.Component {
   _getLayoutClass(colDef) {
     if (!colDef) {
       return '';
@@ -44,31 +22,18 @@ export default class FormItem extends React.Component {
     const context = this.context;
     const props = this.props;
     if (props.help === undefined && context.form) {
-      return this.getId() ? (context.form.getFieldError(this.getId()) || []).join(', ') : '';
+      return (context.form.getFieldError(this.getId()) || []).join(', ');
     }
 
     return props.help;
   }
 
-  getOnlyControl() {
-    const children = React.Children.toArray(this.props.children);
-    const child = children.filter((c) => {
-      return c.props && '__meta' in c.props;
-    })[0];
-    return child !== undefined ? child : null;
-  }
-
-  getChildProp(prop) {
-    const child = this.getOnlyControl();
-    return child && child.props && child.props[prop];
-  }
-
   getId() {
-    return this.getChildProp('id');
+    return this.props.children.props && this.props.children.props.id;
   }
 
   getMeta() {
-    return this.getChildProp('__meta');
+    return this.props.children.props && this.props.children.props.__meta;
   }
 
   renderHelp() {
@@ -85,9 +50,7 @@ export default class FormItem extends React.Component {
   getValidateStatus() {
     const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
     const field = this.getId();
-    if (!field) {
-      return '';
-    }
+
     if (isFieldValidating(field)) {
       return 'validating';
     } else if (!!getFieldError(field)) {
@@ -95,6 +58,7 @@ export default class FormItem extends React.Component {
     } else if (getFieldValue(field) !== undefined) {
       return 'success';
     }
+
     return '';
   }
 
@@ -206,3 +170,27 @@ export default class FormItem extends React.Component {
     return this.renderFormItem(children);
   }
 }
+
+FormItem.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,
+};
+
+FormItem.defaultProps = {
+  hasFeedback: false,
+  prefixCls: 'ant-form',
+};
+
+FormItem.contextTypes = {
+  form: React.PropTypes.object,
+};
+
+module.exports = FormItem;

components/form/demo/advanced-search-form.md

@@ -12,26 +12,26 @@ import { Form, Input, Row, Col, Button } from 'antd';
 const FormItem = Form.Item;
 
 ReactDOM.render(
-<Form horizontal className="advanced-search-form">
+<Form horizontal className="ant-advanced-search-form">
   <Row gutter={16}>
     <Col span="8">
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
       <FormItem
         label="较长搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
     </Col>
     <Col span="8">
@@ -39,19 +39,19 @@ ReactDOM.render(
         label="搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
       <FormItem
         label="较长搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
     </Col>
     <Col span="8">
@@ -59,19 +59,19 @@ ReactDOM.render(
         label="搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
       <FormItem
         label="较长搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
       <FormItem
         label="搜索名称："
         labelCol={{ span: 10 }}
         wrapperCol={{ span: 14 }}>
-        <Input placeholder="请输入搜索名称" />
+        <Input placeholder="请输入搜索名称" size="default" />
       </FormItem>
     </Col>
   </Row>
@@ -88,7 +88,7 @@ ReactDOM.render(
 ````css
 /* 定制样式 */
 
-.advanced-search-form {
+.ant-advanced-search-form {
   padding: 16px 8px;
   background: #f8f8f8;
   border: 1px solid #d9d9d9;
@@ -96,16 +96,12 @@ ReactDOM.render(
 }
 
 /* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
-.advanced-search-form > .row {
+.ant-advanced-search-form > .row {
   position: relative;
   left: -6px;
 }
 
-.advanced-search-form .ant-form-item {
-  margin-bottom: 16px;
-}
-
-.advanced-search-form .ant-btn + .ant-btn {
+.ant-advanced-search-form .ant-btn + .ant-btn {
   margin-left: 8px;
 }
 ````

style/components/form.less

@@ -120,11 +120,6 @@ form {
       line-height: @input-height-lg;
     }
   }
-  .@{css-prefix}input,
-  .@{css-prefix}input-group .@{css-prefix}input,
-  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
-    .input-lg();
-  }
 
   textarea.@{css-prefix}input {
     height: auto;
@@ -424,6 +419,10 @@ form {
   }
 }
 
+.ant-advanced-search-form .@{css-prefix}form-item {
+  margin-bottom: 16px;
+}
+
 // need there different zoom animation
 // otherwise won't trigger anim
 @keyframes diffZoomIn1 {