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,35 +6,60 @@
 @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} {
+    .@{select-prefix-cls} {
-    &-search--inline {
+      &-search--inline {
-      position: relative;
+        position: relative;
+      }
+      &-selection {
+        border: 0;
+        &--single {
+          height: auto;
+        }
+        &__rendered {
+          margin-left: 0;
+          margin-right: 0;
+          line-height: 0;
+        }
+        &__placeholder {
+          margin-left: 8px;
+          margin-right: 8px;
+          top: @input-height-base / 2;
+        }
+      }
     }
-    &-selection {
+
-      border: 0;
+    .@{input-prefix-cls} {
-      &--single {
+      .input();
-        height: auto;
+      background: transparent;
+    }
+
+    &-lg {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-lg / 2;
       }
-      &__rendered {
+      .@{input-prefix-cls} {
-        margin-left: 0;
+        .input-lg();
-        margin-right: 0;
-        line-height: 0;
       }
-      &__placeholder {
+    }
-        margin-left: 8px;
+
-        margin-right: 8px;
+    &-sm {
-        top: 12px;
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-sm / 2;
+      }
+      .@{input-prefix-cls} {
+        .input-sm();
       }
     }
-  }
 
-  .@{input-prefix-cls} {
+    .@{input-prefix-cls} {
-    border: 1px solid @border-color-base;
+      border: @border-width-base @border-style-base @border-color-base;
-    &:focus,
+      &:focus,
-    &:hover {
+      &:hover {
-      .hover;
+        .hover;
+      }
     }
   }
 }