From fc3f4e19226079e3acedc1551f39a6c8b4e0897d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= <surgesoft@gmail.com>
Date: Thu, 9 Feb 2017 10:45:42 +0800
Subject: [PATCH]  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
---
 .../__tests__/__snapshots__/demo.test.js.snap |  3 +-
 components/auto-complete/demo/antd.md         |  2 +-
 components/auto-complete/index.tsx            |  2 +-
 components/auto-complete/style/index.less     | 69 +++++++++++++------
 4 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index 51da60b49c..987eaa721e 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/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>
diff --git a/components/auto-complete/demo/antd.md b/components/auto-complete/demo/antd.md
index 870a3dac5d..3f677ce1c0 100644
--- a/components/auto-complete/demo/antd.md
+++ b/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>
     );
   },
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index da808ce365..0be5f83c07 100755
--- a/components/auto-complete/index.tsx
+++ b/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)) {
diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
index 0139a16deb..529c1e6e86 100644
--- a/components/auto-complete/style/index.less
+++ b/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} {
-    &-search--inline {
-      position: relative;
+    .@{select-prefix-cls} {
+      &-search--inline {
+        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;
-      &--single {
-        height: auto;
+
+    .@{input-prefix-cls} {
+      .input();
+      background: transparent;
+    }
+
+    &-lg {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-lg / 2;
       }
-      &__rendered {
-        margin-left: 0;
-        margin-right: 0;
-        line-height: 0;
+      .@{input-prefix-cls} {
+        .input-lg();
       }
-      &__placeholder {
-        margin-left: 8px;
-        margin-right: 8px;
-        top: 12px;
+    }
+
+    &-sm {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-sm / 2;
+      }
+      .@{input-prefix-cls} {
+        .input-sm();
       }
     }
-  }
 
-  .@{input-prefix-cls} {
-    border: 1px solid @border-color-base;
-    &:focus,
-    &:hover {
-      .hover;
+    .@{input-prefix-cls} {
+      border: @border-width-base @border-style-base @border-color-base;
+      &:focus,
+      &:hover {
+        .hover;
+      }
     }
   }
 }