Merge pull request #1 from react-component/master

merge

HISTORY.md

@@ -1,5 +1,18 @@
 # History
 ----
+
+## 6.3.0 / 2016-04-28
+
+- support onBlur
+
+## 6.2.0 / 2016-04-20
+
+- remove searchPlaceholder
+
+## 6.1.0 / 2016-04-18
+
+- go with http://semantic-ui.com/modules/dropdown.html#search-selection
+
 ## 6.0.0 / 2016-03-16
 
 - remove defaultLabel/label

README.md

@@ -75,7 +75,6 @@ React.render(c, container);
 |notFoundContent | specify content to show when no result matches. | String | 'Not Found' |
 |placeholder | select placeholder | React Node | |
 |showSearch | whether show search input in single mode | bool | true |
-|searchPlaceholder | search input placeholder | React Node | |
 |allowClear | whether allowClear | bool | false |
 |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. | bool | false |
 |maxTagTextLength | max tag text length to show | number | - |

assets/index.less

@@ -12,6 +12,13 @@
   position: relative;
   vertical-align: middle;
   color: #666;
+  line-height: 28px;
+
+  &-allow-clear {
+    .@{selectPrefixCls}-selection--single .@{selectPrefixCls}-selection__rendered {
+      padding-right: 40px;
+    }
+  }
 
   ul, li {
     margin: 0;
@@ -31,6 +38,7 @@
     top: 1px;
     right: 1px;
     width: 20px;
+    outline: none;
     b {
       border-color: #999999 transparent transparent transparent;
       border-style: solid;
@@ -56,6 +64,12 @@
     background-color: #fff;
     border-radius: 6px;
     border: 1px solid #d9d9d9;
+
+    &__placeholder {
+      position: absolute;
+      top: 0;
+      color: #aaa;
+    }
   }
 
   &-focused &-selection {
@@ -75,24 +89,34 @@
 
   &-selection--single {
     height: 28px;
+    line-height: 28px;
     cursor: pointer;
     position: relative;
 
+    .@{selectPrefixCls}-selection-selected-value {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
     .@{selectPrefixCls}-selection__rendered {
+      height: 28px;
+      position: relative;
       display: block;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      padding-left: 10px;
+      margin-left: 10px;
       padding-right: 20px;
       line-height: 28px;
     }
 
     .@{selectPrefixCls}-selection__clear {
       font-weight: bold;
       position: absolute;
-      top: 5px;
+      top: 0;
       right: 20px;
+      line-height: 28px;
 
       &:after {
         content: '×'
@@ -118,7 +142,6 @@
 
   &-search__field__wrap {
     display: inline-block;
-    position: relative;
   }
 
   &-search__field__placeholder {
@@ -129,7 +152,6 @@
   }
 
   &-search--inline {
-    float: left;
     width: 100%;
     .@{selectPrefixCls}-search__field__wrap {
       width: 100%;
@@ -141,6 +163,9 @@
       background: transparent;
       outline: 0;
       width: 100%;
+      &::-ms-clear {
+        display: none;
+      }
     }
     > i {
       float: right;
@@ -155,8 +180,12 @@
     min-height: 28px;
 
     .@{selectPrefixCls}-search--inline {
+      float: left;
       width: auto;
       .@{selectPrefixCls}-search__field {
+        &__wrap {
+          width: auto;
+        }
         width: 0.75em;
       }
     }
@@ -167,17 +196,16 @@
     }
 
     .@{selectPrefixCls}-selection__rendered {
-      //display: inline-block;
+      position: relative;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-left: 8px;
+      margin-left: 8px;
       padding-bottom: 2px;
-    }
 
-    > ul > li {
-      margin-top: 4px;
-      height: 20px;
-      line-height: 20px;
+      .@{selectPrefixCls}-selection__choice {
+        margin-top: 4px;
+        line-height: 20px;
+      }
     }
   }
 
@@ -284,9 +312,6 @@
     z-index: 100;
     left: -9999px;
     top: -9999px;
-    //border-top: none;
-    //border-top-left-radius: 0;
-    //border-top-right-radius: 0;
     position: absolute;
     outline: none;
 
@@ -441,28 +466,6 @@
     }
   }
 
-  &-dropdown-search {
-    display: block;
-    padding: 4px;
-    .@{selectPrefixCls}-search__field__wrap {
-      width: 100%;
-    }
-    .@{selectPrefixCls}-search__field__placeholder {
-      top: 4px;
-    }
-    .@{selectPrefixCls}-search__field {
-      padding: 4px;
-      width: 100%;
-      box-sizing: border-box;
-      border: 1px solid #d9d9d9;
-      border-radius: 4px;
-      outline: none;
-    }
-    &.@{selectPrefixCls}-search--hide {
-      display: none;
-    }
-  }
-
   &-open {
     .@{selectPrefixCls}-arrow b {
       border-color: transparent transparent #888 transparent;

examples/force-suggest.js

@@ -55,7 +55,6 @@ const Search = React.createClass({
           value={this.state.value}
           optionLabelProp="children"
           placeholder="placeholder"
-          searchPlaceholder="searchPlaceholder"
           style={{ width: 500 }}
           onChange={this.onChange}
           filterOption={false}

examples/getPopupContainer.js

@@ -43,7 +43,6 @@ const Test = React.createClass({
         <div style={{ marginTop: 20, position: 'relative' }}>
           <Select
             placeholder="placeholder"
-            searchPlaceholder="searchPlaceholder"
             style={{ width: 200 }}
             getPopupContainer={this.getPopupContainer}
           >

examples/optgroup.js

@@ -15,7 +15,6 @@ const c1 = (
     <div style={{ width: 300 }}>
       <Select
         placeholder="placeholder"
-        searchPlaceholder="searchPlaceholder"
         defaultValue="lucy"
         showSearch={false}
         style={{ width: 500 }}

examples/optionFilterProp.js

@@ -17,7 +17,6 @@ const c1 = (
         defaultValue="张三"
         style={{ width: 500 }}
         placeholder="placeholder"
-        searchPlaceholder="searchPlaceholder"
         optionFilterProp="desc"
         onChange={onChange}
       >

examples/single-animation.js

@@ -18,7 +18,6 @@ const c1 = (
       <Select
         allowClear
         placeholder="placeholder"
-        searchPlaceholder="searchPlaceholder"
         defaultValue="lucy"
         style={{ width: 500 }}
         animation="slide-up"

examples/single.js

@@ -20,6 +20,7 @@ const Test = React.createClass({
     } else {
       value = e;
     }
+    console.log('onChange', value);
     this.setState({
       value,
     });
@@ -31,6 +32,10 @@ const Test = React.createClass({
     });
   },
 
+  onBlur(v) {
+    console.log('onBlur', v);
+  },
+
   render() {
     if (this.state.destroy) {
       return null;
@@ -45,9 +50,9 @@ const Test = React.createClass({
           <Select
             value={this.state.value}
             placeholder="placeholder"
-            searchPlaceholder="searchPlaceholder"
             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
             style={{ width: 500 }}
+            onBlur={this.onBlur}
             allowClear
             optionLabelProp="children"
             optionFilterProp="text"

examples/suggest.js

@@ -56,7 +56,6 @@ const Search = React.createClass({
           combobox
           value={this.state.value}
           placeholder="placeholder"
-          searchPlaceholder="searchPlaceholder"
           defaultActiveFirstOption={false}
           showArrow={false}
           notFoundContent=""

examples/tags.js

@@ -36,7 +36,6 @@ const Test = React.createClass({
         <div>
           <Select
             placeholder="placeholder"
-            searchPlaceholder="searchPlaceholder"
             tags
             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
             style={{ width: 500 }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "6.0.6",
+  "version": "6.3.3",
   "description": "React Select",
   "keywords": [
     "react",
@@ -34,6 +34,7 @@
     "karma": "rc-tools run karma",
     "saucelabs": "rc-tools run saucelabs",
     "test": "rc-tools run test",
+    "prepublish": "rc-tools run guard",
     "chrome-test": "rc-tools run chrome-test",
     "coverage": "rc-tools run coverage"
   },
@@ -45,17 +46,19 @@
     "querystring": "^0.2.0",
     "rc-dialog": "^5.3.1",
     "rc-tools": "5.x",
-    "react": "~0.14.0",
-    "react-addons-test-utils": "~0.14.0",
-    "react-dom": "~0.14.0"
+    "react": "15.x",
+    "react-addons-test-utils": "15.x",
+    "react-dom": "15.x"
   },
   "dependencies": {
     "classnames": "2.x",
+    "component-classes": "1.x",
     "dom-scroll-into-view": "1.x",
     "rc-animate": "2.x",
     "rc-menu": "4.x",
     "rc-trigger": "1.x",
-    "rc-util": "3.x"
+    "rc-util": "3.x",
+    "warning": "^2.1.0"
   },
   "pre-commit": [
     "lint"

src/DropdownMenu.jsx

@@ -10,11 +10,11 @@ const DropdownMenu = React.createClass({
     value: PropTypes.any,
     dropdownMenuStyle: PropTypes.object,
     multiple: PropTypes.bool,
+    onPopupFocus: PropTypes.func,
     onMenuDeSelect: PropTypes.func,
     onMenuSelect: PropTypes.func,
     prefixCls: PropTypes.string,
     menuItems: PropTypes.any,
-    search: PropTypes.any,
     inputValue: PropTypes.string,
     visible: PropTypes.bool,
   },
@@ -57,11 +57,12 @@ const DropdownMenu = React.createClass({
 
   renderMenu() {
     const props = this.props;
-    const { menuItems,
+    const {
+      menuItems,
       defaultActiveFirstOption, value,
-      dropdownMenuStyle, prefixCls,
-      multiple,
-      onMenuSelect, inputValue } = props;
+      prefixCls, multiple,
+      onMenuSelect, inputValue,
+    } = props;
     if (menuItems && menuItems.length) {
       const menuProps = {};
       if (multiple) {
@@ -110,8 +111,8 @@ const DropdownMenu = React.createClass({
 
       return (<Menu
         ref="menu"
+        style={this.props.dropdownMenuStyle}
         defaultActiveFirst={defaultActiveFirstOption}
-        style={dropdownMenuStyle}
         {...activeKeyProps}
         multiple={multiple}
         focusable={false}
@@ -126,11 +127,12 @@ const DropdownMenu = React.createClass({
   },
 
   render() {
-    return (<div>
-      {this.props.search}
-      <div onMouseDown={preventDefaultEvent}>
-        {this.renderMenu()}
-      </div>
+    return (<div
+      style={{ overflow: 'auto' }}
+      onFocus={this.props.onPopupFocus}
+      onMouseDown={preventDefaultEvent}
+    >
+      {this.renderMenu()}
     </div>);
   },
 });