From 58938d38e7a01fc3b082245efb6b6713ce788d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=84=B6=E5=88=99?= <hualei.hl@alibaba-inc.com>
Date: Thu, 11 Jun 2015 19:23:35 +0800
Subject: [PATCH] up select component

---
 components/select/demo/basic.md    |   1 -
 components/select/demo/combobox.md |   1 -
 components/select/demo/multiple.md |   3 +-
 components/select/demo/tags.md     |   3 +-
 components/select/index.md         |   2 +-
 package.json                       |   2 +-
 style/components/select.less       | 119 +++++++++++++++++------------
 7 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index f5d6fb8a94..d632e14e9b 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -18,7 +18,6 @@ function handleChange(value) {
 
 var c1 = (
   <div>
-    <h1>Single Select</h1>
     <div style={{width: 300}}>
       <Select value="lucy" style={{width:250}} onChange={handleChange}>
         <Option value="jack">
diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md
index 71d9cae1ac..a8cb49dbd6 100644
--- a/components/select/demo/combobox.md
+++ b/components/select/demo/combobox.md
@@ -16,7 +16,6 @@ var style = {
 };
 var c3 = (
   <div>
-    <h1>combobox</h1>
     <div style={{width: 300}}>
       <Select combobox>
         <Option value="jack">
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 955a3d38e7..7561d22a0f 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -2,7 +2,7 @@
 
 - order: 1
 
-多选
+多选（scroll the menu）
 
 ---
 
@@ -24,7 +24,6 @@ var style = '.rc-select-menu {max-height:200px;overflow:auto;}';
 
 var c2 = (
   <div>
-    <h1>multiple select（scroll the menu）</h1>
     <div style={{width: 300}}>
       <style>
       {style}
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index 0a82a836cc..061df44288 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -2,7 +2,7 @@
 
 - order: 3
 
-tags
+tags select（scroll the menu）
 
 ---
 
@@ -24,7 +24,6 @@ var style = '.rc-select-menu {max-height:200px;overflow:auto;}';
 
 var c2 = (
   <div>
-    <h1>tags select（scroll the menu）</h1>
     <div style={{width: 300}}>
       <style>
       {style}
diff --git a/components/select/index.md b/components/select/index.md
index 87a7df1223..74c433e8e3 100644
--- a/components/select/index.md
+++ b/components/select/index.md
@@ -21,7 +21,7 @@
 | multiple   | can select more than one option |   | false |
 | filterOption | whether filter options by input value |  | true     |
 | tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | |false |
-| allowClear | show clear button | | true |
+| allowClear | show clear button | | false |
 | combobox | enable combobox mode(can not set multiple at the same time) | | false |
 | onSelect | called when a option is selected. param is option's value | function | 无   |
 | onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | function | 无   |
diff --git a/package.json b/package.json
index 24c5d94cb8..a4de988951 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "rc-dropdown": "~1.0.0",
     "rc-menu": "~3.3.0",
     "rc-progress": "~1.0.0",
-    "rc-select": "~3.3.2",
+    "rc-select": "~3.3.5",
     "rc-tabs": "~5.1.0",
     "rc-tooltip": "~2.0.1"
   },
diff --git a/style/components/select.less b/style/components/select.less
index d0eb2dcd25..7c3afae584 100644
--- a/style/components/select.less
+++ b/style/components/select.less
@@ -1,5 +1,12 @@
 @selectPrefixCls: rc-select;
 
+//mixin
+.selection__clear(){
+  cursor: pointer;
+  float: right;
+  font-weight: bold;
+}
+
 .@{selectPrefixCls} {
   box-sizing: border-box;
   display: inline-block;
@@ -8,10 +15,6 @@
   vertical-align: middle;
   color: #666;
 
-  &-selection {
-    outline: none;
-  }
-
   ul, li {
     margin: 0;
     padding: 0;
@@ -31,7 +34,7 @@
     right: 1px;
     width: 20px;
     b {
-      border-color: #888 transparent transparent transparent;
+      border-color: #999999 transparent transparent transparent;
       border-style: solid;
       border-width: 5px 4px 0 4px;
       height: 0;
@@ -44,44 +47,45 @@
     }
   }
 
-  &-selection--single {
-    box-sizing: border-box;
-    cursor: pointer;
-    display: block;
-    height: 28px;
+  &-selection {
+    outline: none;
     user-select: none;
     -webkit-user-select: none;
 
+    box-sizing: border-box;
+    display: block;
+
     background-color: #fff;
+    border-radius: 6px;
     border: 1px solid #d9d9d9;
-    border-radius: 4px;
+    &:hover {
+      border-color: #23c0fa;
+    }
+    &:active {
+      border-color: #2db7f5;
+    }
+  }
+
+  &-selection--single {
+    height: 28px;
+    cursor: pointer;
 
     .@{selectPrefixCls}-selection__rendered {
       display: block;
       overflow: hidden;
-      padding-left: 8px;
-      padding-right: 20px;
       text-overflow: ellipsis;
+      padding-left: 10px;
+      padding-right: 20px;
       line-height: 28px;
     }
 
     .@{selectPrefixCls}-selection__clear {
-      cursor: pointer;
-      float: right;
-      font-weight: bold;
+      .selection__clear();
     }
   }
 
   &-selection--multiple {
-    box-sizing: border-box;
-    display: block;
     min-height: 32px;
-    user-select: none;
-    -webkit-user-select: none;
-
-    background-color: #fff;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
     cursor: text;
 
     .@{selectPrefixCls}-selection__rendered {
@@ -92,9 +96,7 @@
     }
 
     .@{selectPrefixCls}-selection__clear {
-      cursor: pointer;
-      float: right;
-      font-weight: bold;
+      .selection__clear();
       margin-top: 5px;
       margin-right: 10px;
     }
@@ -131,6 +133,9 @@
       background: transparent;
       outline: 0;
     }
+    > i {
+      float: right;
+    }
   }
 
 
@@ -143,12 +148,12 @@
     box-sizing: border-box;
     width: 100%;
     z-index: 100;
-    border-top: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    //border-top: none;
+    //border-top-left-radius: 0;
+    //border-top-right-radius: 0;
     position: absolute;
     top: 100%;
-    marin-top: -1px;
+    margin-top: 4px;
     outline: none;
     .@{selectPrefixCls}-menu-item[aria-selected=true] {
       background-color: #ddd;
@@ -181,8 +186,8 @@
     }
 
     .@{selectPrefixCls}-selection {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      //border-bottom-left-radius: 0;
+      //border-bottom-right-radius: 0;
     }
   }
 
@@ -191,30 +196,44 @@
     margin-bottom: 0;
     padding-left: 0; // Override default ul/ol
     list-style: none;
-    z-index: 99999;
-
-    .@{selectPrefixCls}-menu-item-active, .@{selectPrefixCls}-menu-submenu-active {
-      //background-color: #8EC8F9 !important;
-      background-color: rgba(142, 200, 249, 0.1) !important;
-    }
+    z-index: 9999;
 
     > li {
+      margin: 0;
+      padding: 0;
+    }
+
+    & > &-item {
       position: relative;
       display: block;
-      padding: 15px 20px;
+      padding: 7px 10px;
+      font-weight: normal;
+      color: #666666;
       white-space: nowrap;
 
-      // Disabled state sets text to gray and nukes hover/tab effects
-      &.@{selectPrefixCls}-menu-item-disabled, &.@{selectPrefixCls}-menu-submenu-disabled {
-        color: #777;
+      &:hover, &-active, &-selected {
+        background-color: rgba(142, 200, 249, 0.1) !important;
+      }
+
+      &-disabled {
+        color: #ccc;
+        cursor: not-allowed;
+        pointer-events: none;
+
+        &:hover {
+          color: #ccc;
+          background-color: #fff;
+          cursor: not-allowed;
+        }
+      }
+
+      &-divider {
+        height: 1px;
+        margin: 1px 0;
+        overflow: hidden;
+        background-color: #e5e5e5;
+        line-height: 0;
       }
-    }
-    .@{selectPrefixCls}-menu-item-divider {
-      padding: 0;
-      height: 1px;
-      margin: 9px 0;
-      overflow: hidden;
-      background-color: #e5e5e5;
     }
   }
 }
\ No newline at end of file