Fix allowClear of TreeSelect, close #1084

components/tree-select/demo/basic.md

@@ -26,6 +26,7 @@ const Demo = React.createClass({
         value={this.state.value}
         dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="请选择"
+        allowClear
         treeDefaultExpandAll
         onChange={this.onChange}>
         <TreeNode value="parent 1" title="parent 1" key="0-1">

components/tree-select/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import TreeSelect, { TreeNode } from 'rc-tree-select';
 import classNames from 'classnames';
-// import animation from '../common/openAnimation';
 
 const AntTreeSelect = React.createClass({
   getDefaultProps() {
@@ -10,7 +9,6 @@ const AntTreeSelect = React.createClass({
       transitionName: 'slide-up',
       choiceTransitionName: 'zoom',
       showSearch: false,
-      // openAnimation: animation,
     };
   },
   render() {

style/components/select.less

@@ -4,6 +4,37 @@
 
 @import "../mixins/iconfont";
 
+.selection__clear() {
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  opacity: 0;
+  position: absolute;
+  right: 8px;
+  z-index: 1;
+  background: #fff;
+  top: 50%;
+  font-size: 12px;
+  color: #ccc;
+  width: 12px;
+  height: 12px;
+  margin-top: -6px;
+  line-height: 12px;
+  cursor: pointer;
+  transition: color 0.3s ease, opacity 0.15s ease;
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+    content: "\E631";
+  }
+  &:hover {
+    color: #999;
+  }
+}
+
 .@{select-prefix-cls} {
   box-sizing: border-box;
   display: inline-block;
@@ -53,39 +84,13 @@
     &:hover {
       .hover;
     }
+
     &:active {
       .active;
     }
 
     &__clear {
-      display: inline-block;
+      .selection__clear();
-      font-style: normal;
-      vertical-align: baseline;
-      text-align: center;
-      text-transform: none;
-      text-rendering: auto;
-      opacity: 0;
-      position: absolute;
-      right: 8px;
-      z-index: 1;
-      background: #fff;
-      top: 50%;
-      font-size: 12px;
-      color: #ccc;
-      width: 12px;
-      height: 12px;
-      margin-top: -6px;
-      line-height: 12px;
-      cursor: pointer;
-      transition: color 0.3s ease, opacity 0.15s ease;
-      &:before {
-        display: block;
-        font-family: "anticon" !important;
-        content: "\E631";
-      }
-      &:hover {
-        color: #999;
-      }
     }
 
     &:hover &__clear {

style/components/treeSelect.less

@@ -115,12 +115,6 @@
 @duration: .3s;
 
 @import "../mixins/iconfont";
-//mixin
-.selection__clear() {
-  cursor: pointer;
-  float: right;
-  font-weight: bold;
-}
 
 .@{tree-select-prefix-cls} {
   box-sizing: border-box;
@@ -216,6 +210,10 @@
       .selection__clear();
     }
 
+    &:hover .@{tree-select-prefix-cls}-selection__clear {
+      opacity: 1;
+    }
+
     .@{tree-select-prefix-cls}-selection__placeholder {
       color: #ccc;
     }
@@ -345,12 +343,6 @@
       padding-bottom: 4px;
     }
 
-    .@{tree-select-prefix-cls}-selection__clear {
-      .selection__clear();
-      margin-top: 5px;
-      margin-right: 10px;
-    }
-
     > ul > li {
       margin-top: 4px;
       height: 20px;