fix AutoComplete size (#4768)

*  fix AutoComplete size

 + close #4766

* use input mixin

* use css variables

*  use children directly instead of React.Children.toArray

 + close #4778

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -23,7 +23,8 @@ exports[`test renders ./components/auto-complete/demo/antd.md correctly 1`] = `
           <div
             class="ant-select-search__field__wrap">
             <textarea
-              class="ant-input ant-select-search__field" />
+              class="ant-input ant-select-search__field"
+              style="height:50px;" />
             <span
               class="ant-select-search__field__mirror" />
           </div>

components/auto-complete/demo/antd.md

@@ -48,7 +48,7 @@ const Complete = React.createClass({
         onChange={this.handleChange}
         placeholder="input here"
       >
-        <textarea onKeyPress={this.handleKeyPress} />
+        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }}/>
       </AutoComplete>
     );
   },

components/auto-complete/index.tsx

@@ -94,7 +94,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
     let options;
     const childArray = React.Children.toArray(children);
     if (childArray.length && (childArray[0] as React.ReactElement<any>).type === Option) {
-      options = childArray;
+      options = children;
     } else {
       options = dataSource ? dataSource.map((item) => {
         if (React.isValidElement(item)) {

components/auto-complete/style/index.less

@@ -6,7 +6,8 @@
 @select-prefix-cls: ~"@{ant-prefix}-select";
 @autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
 
-.@{autocomplete-prefix-cls}.@{select-prefix-cls} {
+.@{autocomplete-prefix-cls} {
+  &.@{select-prefix-cls} {
 
     .@{select-prefix-cls} {
       &-search--inline {
@@ -25,16 +26,40 @@
         &__placeholder {
           margin-left: 8px;
           margin-right: 8px;
-        top: 12px;
+          top: @input-height-base / 2;
         }
       }
     }
 
     .@{input-prefix-cls} {
-    border: 1px solid @border-color-base;
+      .input();
+      background: transparent;
+    }
+
+    &-lg {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-lg / 2;
+      }
+      .@{input-prefix-cls} {
+        .input-lg();
+      }
+    }
+
+    &-sm {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-sm / 2;
+      }
+      .@{input-prefix-cls} {
+        .input-sm();
+      }
+    }
+
+    .@{input-prefix-cls} {
+      border: @border-width-base @border-style-base @border-color-base;
       &:focus,
       &:hover {
         .hover;
       }
     }
   }
+}