rc-select - npm Package Compare versions

Comparing version 4.2.1 to 4.3.0

HISTORY.md

 # History
 ----
 
+## 4.3.0 / 2015-07-14
+
+`new` [#17](https://github.com/react-component/select/issues/17) support render dropdown to body
+
 ## 4.2.0 / 2015-07-07
@@ -5,0 +9,0 @@

lib/index.js

 'use strict';
 
-var Select = require('./Select');
-Select.Option = require('./Option');
-Select.OptGroup = require('./OptGroup');
-module.exports = Select;
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _Select = require('./Select');
+
+var _Select2 = _interopRequireDefault(_Select);
+
+var _Option = require('./Option');
+
+var _Option2 = _interopRequireDefault(_Option);
+
+var _OptGroup = require('./OptGroup');
+
+var _OptGroup2 = _interopRequireDefault(_OptGroup);
+
+_Select2['default'].Option = _Option2['default'];
+_Select2['default'].OptGroup = _OptGroup2['default'];
+exports['default'] = _Select2['default'];
+module.exports = exports['default'];

lib/OptGroup.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -9,5 +15,9 @@
 
-var React = require('react');
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
 var OptGroup = (function (_React$Component) {
+  _inherits(OptGroup, _React$Component);
+
   function OptGroup() {
@@ -19,7 +29,6 @@ _classCallCheck(this, OptGroup);
 
-  _inherits(OptGroup, _React$Component);
-
   return OptGroup;
-})(React.Component);
+})(_react2['default'].Component);
 
-module.exports = OptGroup;
+exports['default'] = OptGroup;
+module.exports = exports['default'];

lib/Option.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -9,5 +15,9 @@
 
-var React = require('react');
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
 var Option = (function (_React$Component) {
+  _inherits(Option, _React$Component);
+
   function Option() {
@@ -19,7 +29,6 @@ _classCallCheck(this, Option);
 
-  _inherits(Option, _React$Component);
-
   return Option;
-})(React.Component);
+})(_react2['default'].Component);
 
-module.exports = Option;
+exports['default'] = Option;
+module.exports = exports['default'];

lib/Select.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -9,2 +13,4 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -16,45 +22,39 @@
 
-var React = require('react');
-var rcUtil = require('rc-util');
-var joinClasses = rcUtil.joinClasses;
-var classSet = rcUtil.classSet;
-var KeyCode = rcUtil.KeyCode;
-var Menu = require('rc-menu');
-var MenuItem = Menu.Item;
-var MenuItemGroup = Menu.ItemGroup;
-var anim = require('css-animation');
-var OptGroup = require('./OptGroup');
+var _react = require('react');
 
-function isCombobox(props) {
-  return props.combobox;
-}
+var _react2 = _interopRequireDefault(_react);
 
-function isMultipleOrTags(props) {
-  return props.multiple || props.tags;
-}
+var _rcUtil = require('rc-util');
 
-function isMultipleOrTagsOrCombobox(props) {
-  return isMultipleOrTags(props) || isCombobox(props);
-}
+var _cssAnimation = require('css-animation');
 
-function isSingleMode(props) {
-  return !isMultipleOrTagsOrCombobox(props);
-}
+var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
 
+var _OptGroup = require('./OptGroup');
+
+var _OptGroup2 = _interopRequireDefault(_OptGroup);
+
+var _domAlign = require('dom-align');
+
+var _domAlign2 = _interopRequireDefault(_domAlign);
+
+var _Dropdown = require('./Dropdown');
+
+var _Dropdown2 = _interopRequireDefault(_Dropdown);
+
+var _util = require('./util');
+
 function noop() {}
 
-function normValue(value) {
-  if (value === undefined) {
-    value = [];
-  } else if (!Array.isArray(value)) {
-    value = [value];
-  }
-  return value;
+function filterFn(input, child) {
+  return (0, _util.getPropValue)(child, this.props.optionFilterProp).indexOf(input) > -1;
 }
 
-function filterFn(input, child) {
-  return this.getPropValue(child, this.props.optionFilterProp).indexOf(input) > -1;
+function saveRef(name, component) {
+  this[name] = component;
 }
 
 var Select = (function (_React$Component) {
+  _inherits(Select, _React$Component);
+
   function Select(props) {
@@ -65,8 +65,8 @@ var _this = this;
 
-    _get(Object.getPrototypeOf(Select.prototype), 'constructor', this).call(this, props);
+    _get(Object.getPrototypeOf(Select.prototype), 'constructor', this).apply(this, arguments);
     var value = [];
     if ('value' in props) {
-      value = normValue(props.value);
+      value = (0, _util.normValue)(props.value);
     } else if ('defaultValue' in props) {
-      value = normValue(props.defaultValue);
+      value = (0, _util.normValue)(props.defaultValue);
     }
@@ -80,6 +80,6 @@ this.state = {
     });
+    this.saveInputRef = saveRef.bind(this, 'inputInstance');
+    this.saveDropdownRef = saveRef.bind(this, 'dropdownInstance');
   }
 
-  _inherits(Select, _React$Component);
-
   _createClass(Select, [{
@@ -90,3 +90,3 @@ key: 'componentWillReceiveProps',
         this.setState({
-          value: normValue(nextProps.value)
+          value: (0, _util.normValue)(nextProps.value)
         });
@@ -96,26 +96,5 @@ }
   }, {
-    key: 'getValuePropValue',
-    value: function getValuePropValue(c) {
-      var props = c.props;
-      if ('value' in props) {
-        return props.value;
-      }
-      if (c.key) {
-        return c.key;
-      }
-      throw new Error('no key or value for ' + c);
-    }
-  }, {
-    key: 'getPropValue',
-    value: function getPropValue(c, prop) {
-      if (prop === 'value') {
-        return this.getValuePropValue(c);
-      } else {
-        return c.props[prop];
-      }
-    }
-  }, {
     key: 'fireChange',
     value: function fireChange(value) {
-      this.props.onChange(isMultipleOrTags(this.props) ? value : value[0]);
+      this.props.onChange((0, _util.isMultipleOrTags)(this.props) ? value : value[0]);
       this.setState({
@@ -131,13 +110,13 @@ value: value
       if (value === undefined) {
-        return value;
+        return null;
       }
       var label = null;
-      React.Children.forEach(children, function (c) {
-        if (c.type === OptGroup) {
+      _react2['default'].Children.forEach(children, function (c) {
+        if (c.type === _OptGroup2['default']) {
           var maybe = _this2.getLabelByValue(c.props.children, value);
-          if (maybe !== undefined) {
+          if (maybe != null) {
             label = maybe;
           }
-        } else if (_this2.getValuePropValue(c) === value) {
-          label = _this2.getPropValue(c, _this2.props.optionLabelProp);
+        } else if ((0, _util.getValuePropValue)(c) === value) {
+          label = (0, _util.getPropValue)(c, _this2.props.optionLabelProp);
         }
@@ -148,100 +127,5 @@ });
   }, {
-    key: 'filterOption',
-    value: function filterOption(input, child) {
-      if (!input) {
-        return true;
-      }
-      var filterOption = this.props.filterOption;
-      if (!filterOption) {
-        return true;
-      }
-      if (child.props.disabled) {
-        return false;
-      }
-      return filterOption.call(this, input, child);
-    }
-  }, {
-    key: 'renderFilterOptionsFromChildren',
-    value: function renderFilterOptionsFromChildren(children, showNotFound) {
-      var _this3 = this;
-
-      var inputValue = this.state.inputValue;
-      var sel = [];
-      var props = this.props;
-      var childrenKeys = [];
-      var tags = props.tags;
-      React.Children.forEach(children, function (child) {
-        if (child.type === OptGroup) {
-          var innerItems = _this3.renderFilterOptionsFromChildren(child.props.children, false);
-          if (innerItems.length) {
-            var label = child.props.label;
-            var key = child.key;
-            if (!key && typeof label === 'string') {
-              key = label;
-            } else if (!label && key) {
-              label = key;
-            }
-            sel.push(React.createElement(
-              MenuItemGroup,
-              { key: key, title: label },
-              innerItems
-            ));
-          }
-          return;
-        }
-        var childValue = _this3.getValuePropValue(child);
-        if (_this3.filterOption(inputValue, child)) {
-          sel.push(React.createElement(MenuItem, _extends({
-            value: childValue,
-            key: childValue
-          }, child.props)));
-        }
-        if (tags && !child.props.disabled) {
-          childrenKeys.push(childValue);
-        }
-      });
-      if (tags) {
-        // tags value must be string
-        var value = this.state.value;
-        value = value.filter(function (v) {
-          return childrenKeys.indexOf(v) === -1 && (!inputValue || v.indexOf(inputValue) > -1);
-        });
-        sel = sel.concat(value.map(function (v) {
-          return React.createElement(
-            MenuItem,
-            { value: v, key: v },
-            v
-          );
-        }));
-        if (inputValue) {
-          var notFindInputItem = sel.every(function (s) {
-            return _this3.getValuePropValue(s) !== inputValue;
-          });
-          if (notFindInputItem) {
-            sel.unshift(React.createElement(
-              MenuItem,
-              { value: inputValue, key: inputValue },
-              inputValue
-            ));
-          }
-        }
-      }
-      if (!sel.length && showNotFound && props.notFoundContent) {
-        sel = [React.createElement(
-          MenuItem,
-          { disabled: true, value: 'NOT_FOUND', key: 'NOT_FOUND' },
-          props.notFoundContent
-        )];
-      }
-      return sel;
-    }
-  }, {
-    key: 'renderFilterOptions',
-    value: function renderFilterOptions() {
-      return this.renderFilterOptionsFromChildren(this.props.children, true);
-    }
-  }, {
     key: 'setOpenState',
     value: function setOpenState(open) {
-      var _this4 = this;
+      var _this3 = this;
 
@@ -252,8 +136,8 @@ var refs = this.refs;
       }, function () {
-        if (open || isMultipleOrTagsOrCombobox(_this4.props)) {
-          if (refs.input) {
-            React.findDOMNode(refs.input).focus();
+        if (open || (0, _util.isMultipleOrTagsOrCombobox)(_this3.props)) {
+          if (_this3.getInputDOMNode()) {
+            _this3.getInputDOMNode().focus();
           }
         } else if (refs.selection) {
-          React.findDOMNode(refs.selection).focus();
+          _react2['default'].findDOMNode(refs.selection).focus();
         }
@@ -271,3 +155,3 @@ });
       });
-      if (isCombobox(props)) {
+      if ((0, _util.isCombobox)(props)) {
         props.onChange(val);
@@ -292,3 +176,3 @@ }
       var props = this.props;
-      if (React.Children.count(props.children) || isSingleMode(props)) {
+      if (_react2['default'].Children.count(props.children) || (0, _util.isSingleMode)(props)) {
         this.setOpenState(true);
@@ -307,5 +191,5 @@ }
       var keyCode = e.keyCode;
-      if (this.state.open && !this.refs.input) {
+      if (this.state.open && !this.getInputDOMNode()) {
         this.handleInputKeyDown(e);
-      } else if (keyCode === KeyCode.ENTER || e.keyCode === KeyCode.DOWN) {
+      } else if (keyCode === _rcUtil.KeyCode.ENTER || keyCode === _rcUtil.KeyCode.DOWN) {
         this.handleClick();
@@ -320,3 +204,4 @@ e.preventDefault();
       var state = this.state;
-      if (isMultipleOrTags(props) && !e.target.value && e.keyCode === KeyCode.BACKSPACE) {
+      var keyCode = e.keyCode;
+      if ((0, _util.isMultipleOrTags)(props) && !e.target.value && keyCode === _rcUtil.KeyCode.BACKSPACE) {
         var value = state.value.concat();
@@ -330,3 +215,3 @@ if (value.length) {
 
-      if (e.keyCode === KeyCode.DOWN) {
+      if (keyCode === _rcUtil.KeyCode.DOWN) {
         if (!state.open) {
@@ -338,3 +223,3 @@ this.openIfHasChildren();
         }
-      } else if (e.keyCode === KeyCode.ESC) {
+      } else if (keyCode === _rcUtil.KeyCode.ESC) {
         if (state.open) {
@@ -347,5 +232,6 @@ this.setOpenState(false);
       }
-      var menu = this.refs.menu;
-      if (menu && state.open) {
-        if (menu.handleKeyDown(e)) {
+
+      if (state.open) {
+        var menu = this.dropdownInstance && this.dropdownInstance.refs.menu;
+        if (menu && menu.handleKeyDown(e)) {
           e.preventDefault();
@@ -361,7 +247,7 @@ e.stopPropagation();
       var props = this.props;
-      var selectedValue = this.getValuePropValue(item);
+      var selectedValue = (0, _util.getValuePropValue)(item);
       if (value.indexOf(selectedValue) !== -1) {
         return;
       }
-      if (isMultipleOrTags(props)) {
+      if ((0, _util.isMultipleOrTags)(props)) {
         value = value.concat([selectedValue]);
@@ -381,5 +267,5 @@ } else {
       this.setOpenState(false);
-      if (isCombobox(props)) {
+      if ((0, _util.isCombobox)(props)) {
         this.setState({
-          inputValue: this.getPropValue(item, this.props.optionLabelProp)
+          inputValue: (0, _util.getPropValue)(item, props.optionLabelProp)
         });
@@ -392,3 +278,3 @@ }
       if (e.type === 'click') {
-        this.removeSelected(this.getValuePropValue(item));
+        this.removeSelected((0, _util.getValuePropValue)(item));
       }
@@ -403,3 +289,3 @@ this.setState({
     value: function handleBlur() {
-      var _this5 = this;
+      var _this4 = this;
 
@@ -410,3 +296,3 @@ if (this._blurTimer) {
       this._blurTimer = setTimeout(function () {
-        _this5.setState({
+        _this4.setState({
           open: false
@@ -421,2 +307,3 @@ });
         clearTimeout(this._blurTimer);
+        this._blurTimer = null;
       }
@@ -434,3 +321,3 @@ }
       });
-      var canMultiple = isMultipleOrTags(props);
+      var canMultiple = (0, _util.isMultipleOrTags)(props);
       if (canMultiple) {
@@ -459,45 +346,5 @@ props.onDeselect(selectedValue);
   }, {
-    key: 'renderMenu',
-    value: function renderMenu(menuItems) {
-      var _this6 = this;
-
-      var props = this.props;
-      var menuProps = {};
-      if (isMultipleOrTags(props)) {
-        menuProps.onDeselect = this.handleMenuDeselect;
-      }
-      var value = this.state.value;
-      var selectedKeys = [];
-      var activeKey;
-      React.Children.forEach(menuItems, function (item) {
-        var itemValue = _this6.getValuePropValue(item);
-        var itemKey = item.key;
-        if (value.indexOf(itemValue) !== -1 && itemKey) {
-          selectedKeys.push(itemKey);
-        }
-      });
-      if (!isMultipleOrTags(props)) {
-        if (!activeKey && selectedKeys.length === 1) {
-          activeKey = selectedKeys[0];
-        }
-      }
-      return React.createElement(
-        Menu,
-        _extends({
-          ref: 'menu',
-          onSelect: this.handleMenuSelect,
-          activeFirst: true,
-          activeKey: activeKey,
-          multiple: isMultipleOrTags(props),
-          focusable: false
-        }, menuProps, {
-          selectedKeys: selectedKeys,
-          prefixCls: props.prefixCls + '-menu' }),
-        menuItems
-      );
-    }
-  }, {
     key: 'renderTopControlNode',
-    value: function renderTopControlNode(input) {
-      var _this7 = this;
+    value: function renderTopControlNode() {
+      var _this5 = this;
 
@@ -509,3 +356,3 @@ var value = this.state.value;
       var children = props.children;
-      var clear = React.createElement(
+      var clear = _react2['default'].createElement(
         'span',
@@ -517,7 +364,7 @@ { className: prefixCls + '-selection__clear',
       // single and not combobox, input is inside dropdown
-      if (isSingleMode(props)) {
-        return React.createElement(
+      if ((0, _util.isSingleMode)(props)) {
+        return _react2['default'].createElement(
           'span',
           { className: prefixCls + '-selection__rendered' },
-          React.createElement(
+          _react2['default'].createElement(
             'span',
@@ -529,58 +376,129 @@ null,
         );
-      }
-      var selectedValueNodes;
-      if (isMultipleOrTags(props)) {
-        selectedValueNodes = value.map(function (v) {
-          var content = _this7.getLabelByValue(children, v) || v;
-          var title = content;
-          var maxTagTextLength = props.maxTagTextLength;
-          if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
-            content = content.slice(0, maxTagTextLength) + '...';
-          }
-          return React.createElement(
+      } else {
+        var selectedValueNodes;
+        if ((0, _util.isMultipleOrTags)(props)) {
+          selectedValueNodes = value.map(function (v) {
+            var content = _this5.getLabelByValue(children, v) || v;
+            var title = content;
+            var maxTagTextLength = props.maxTagTextLength;
+            if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
+              content = content.slice(0, maxTagTextLength) + '...';
+            }
+            return _react2['default'].createElement(
+              'li',
+              { className: prefixCls + '-selection__choice',
+                key: v,
+                title: title },
+              _react2['default'].createElement(
+                'span',
+                { className: prefixCls + '-selection__choice__content' },
+                content
+              ),
+              _react2['default'].createElement('span', { className: prefixCls + '-selection__choice__remove',
+                onClick: _this5.removeSelected.bind(_this5, v) })
+            );
+          });
+        }
+        return _react2['default'].createElement(
+          'ul',
+          { className: prefixCls + '-selection__rendered' },
+          selectedValueNodes,
+          allowClear && !(0, _util.isMultipleOrTags)(props) ? clear : null,
+          _react2['default'].createElement(
             'li',
-            { className: prefixCls + '-selection__choice',
-              key: v,
-              title: title },
-            React.createElement(
-              'span',
-              { className: prefixCls + '-selection__choice__content' },
-              content
-            ),
-            React.createElement('span', { className: prefixCls + '-selection__choice__remove',
-              onClick: _this7.removeSelected.bind(_this7, v) })
-          );
-        });
+            { className: (0, _rcUtil.joinClasses)(prefixCls + '-search', prefixCls + '-search--inline') },
+            this.getInputElement()
+          )
+        );
       }
-      return React.createElement(
-        'ul',
-        { className: prefixCls + '-selection__rendered' },
-        selectedValueNodes,
-        allowClear && !isMultipleOrTags(props) ? clear : null,
-        React.createElement(
-          'li',
-          { className: joinClasses(prefixCls + '-search', prefixCls + '-search--inline') },
-          input
-        )
-      );
     }
   }, {
-    key: 'renderRoot',
-    value: function renderRoot(children) {
-      var _rootCls;
-
+    key: 'getDropdownDOMNode',
+    value: function getDropdownDOMNode() {
+      return _react2['default'].findDOMNode(this.dropdownInstance);
+    }
+  }, {
+    key: 'getDropdownContainer',
+    value: function getDropdownContainer() {
+      if (!this.dropdownContainer) {
+        this.dropdownContainer = document.createElement('div');
+        document.body.appendChild(this.dropdownContainer);
+      }
+      return this.dropdownContainer;
+    }
+  }, {
+    key: 'renderDropdown',
+    value: function renderDropdown(prevState) {
+      var state = this.state;
       var props = this.props;
-      var prefixCls = props.prefixCls;
-      var rootCls = (_rootCls = {}, _defineProperty(_rootCls, prefixCls, true), _defineProperty(_rootCls, prefixCls + '-open', this.state.open), _defineProperty(_rootCls, prefixCls + '-combobox', isCombobox(props)), _defineProperty(_rootCls, prefixCls + '-disabled', props.disabled), _rootCls);
-      return React.createElement(
-        'span',
-        {
-          style: props.style,
-          className: joinClasses(props.className, classSet(rootCls)),
-          onFocus: this.handleFocus,
-          onBlur: this.handleBlur },
-        children
-      );
+      var dropdownDOMNode;
+      if (state.open && props.renderDropdownToBody) {
+        _react2['default'].render(this.getDropdownElement(), this.getDropdownContainer());
+      }
+      if (this.dropdownContainer) {
+        this.dropdownContainer.className = this.props.prefixCls + '-dropdown-container' + (state.open ? '-open' : '');
+      }
+      if (props.dropdownMatchSelectWidth && state.open) {
+        dropdownDOMNode = this.getDropdownDOMNode();
+        if (dropdownDOMNode) {
+          dropdownDOMNode.style.width = _react2['default'].findDOMNode(this).offsetWidth + 'px';
+        }
+      }
+      if (!prevState.open && state.open) {
+        dropdownDOMNode = this.getDropdownDOMNode();
+        if (dropdownDOMNode) {
+          (0, _domAlign2['default'])(dropdownDOMNode, _react2['default'].findDOMNode(this), {
+            points: ['tl', 'bl'],
+            offset: [0, 4]
+          });
+        }
+      }
     }
   }, {
+    key: 'getInputElement',
+    value: function getInputElement() {
+      var props = this.props;
+      return _react2['default'].createElement('input', { ref: this.saveInputRef,
+        onChange: this.handleInputChange,
+        onKeyDown: this.handleInputKeyDown,
+        value: this.state.inputValue,
+        disabled: props.disabled,
+        placeholder: props.searchPlaceholder,
+        className: props.prefixCls + '-search__field',
+        role: 'textbox' });
+    }
+  }, {
+    key: 'getDropdownElement',
+    value: function getDropdownElement() {
+      var state = this.state;
+      var props = this.props;
+      if (state.open) {
+        this.cachedDropDown = _react2['default'].createElement(
+          _Dropdown2['default'],
+          {
+            key: 'dropdown',
+            onDropdownFocus: this.handleFocus,
+            onDropdownBlur: this.handleBlur,
+            filterOption: props.filterOption,
+            optionFilterProp: props.optionFilterProp,
+            optionLabelProp: props.optionLabelProp,
+            inputValue: state.inputValue,
+            inputElement: this.getInputElement(),
+            ref: this.saveDropdownRef,
+            tags: props.tags,
+            notFoundContent: props.notFoundContent,
+            onMenuDeselect: this.handleMenuDeselect,
+            onMenuSelect: this.handleMenuSelect,
+            value: state.value,
+            isMultipleOrTags: (0, _util.isMultipleOrTags)(props),
+            prefixCls: props.prefixCls,
+            isMultipleOrTagsOrCombobox: (0, _util.isMultipleOrTagsOrCombobox)(props),
+            showSearch: props.showSearch,
+            dropdownStyle: props.dropdownStyle },
+          props.children
+        );
+      }
+      return this.cachedDropDown;
+    }
+  }, {
     key: 'animateDropdown',
@@ -594,8 +512,8 @@ value: function animateDropdown(prevProps, prevState) {
       }
-      if (transitionName && this.refs.dropdown) {
-        var domNode = React.findDOMNode(this.refs.dropdown);
+      var domNode = this.getDropdownDOMNode();
+      if (transitionName && domNode) {
         if (state.open && !prevState.open) {
-          anim(domNode, transitionName + '-enter');
+          (0, _cssAnimation2['default'])(domNode, transitionName + '-enter');
         } else if (!state.open && prevState.open) {
-          anim(domNode, transitionName + '-leave');
+          (0, _cssAnimation2['default'])(domNode, transitionName + '-leave');
         }
@@ -605,8 +523,19 @@ }
   }, {
+    key: 'getInputDOMNode',
+    value: function getInputDOMNode() {
+      return _react2['default'].findDOMNode(this.inputInstance);
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.componentDidUpdate();
+    }
+  }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps, prevState) {
       prevState = prevState || {};
+      this.renderDropdown(prevState);
       this.animateDropdown(prevProps, prevState);
-      if (isMultipleOrTags(this.props)) {
-        var inputNode = React.findDOMNode(this.refs.input);
+      if ((0, _util.isMultipleOrTags)(this.props)) {
+        var inputNode = this.getInputDOMNode();
         if (inputNode.value) {
@@ -620,5 +549,14 @@ inputNode.style.width = inputNode.scrollWidth + 'px';
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.componentDidUpdate();
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.dropdownContainer) {
+        _react2['default'].unmountComponentAtNode(this.dropdownContainer);
+        document.body.removeChild(this.dropdownContainer);
+        this.dropdownContainer = null;
+      }
+      this.dropdownInstance = null;
+      if (this._blurTimer) {
+        clearTimeout(this._blurTimer);
+        this._blurTimer = null;
+      }
     }
@@ -628,45 +566,11 @@ }, {
     value: function render() {
+      var _rootCls;
+
       var props = this.props;
-      var multiple = isMultipleOrTags(props);
+      var multiple = (0, _util.isMultipleOrTags)(props);
       var state = this.state;
       var prefixCls = props.prefixCls;
-
-      var input = React.createElement('input', { ref: 'input',
-        onChange: this.handleInputChange,
-        onKeyDown: this.handleInputKeyDown,
-        value: state.inputValue,
-        disabled: props.disabled,
-        placeholder: props.searchPlaceholder,
-        className: prefixCls + '-search__field',
-        role: 'textbox' });
-
-      var menuItems = this.renderFilterOptions();
-      var ctrlNode = this.renderTopControlNode(input);
-      var dropDown;
-      if (state.open) {
-        var search = isMultipleOrTagsOrCombobox(props) || !props.showSearch ? null : React.createElement(
-          'span',
-          { className: joinClasses(prefixCls + '-search', prefixCls + '-search--dropdown') },
-          input
-        );
-        if (!search && !menuItems.length) {
-          this.cachedDropDown = dropDown = null;
-        } else {
-          // single and not combobox, input is inside dropdown
-          this.cachedDropDown = dropDown = React.createElement(
-            'span',
-            { key: 'dropdown',
-              ref: 'dropdown',
-              className: joinClasses(prefixCls + '-dropdown', prefixCls + '-dropdown--below'),
-              tabIndex: '-1' },
-            search,
-            this.renderMenu(menuItems)
-          );
-        }
-      } else {
-        dropDown = this.cachedDropDown;
-      }
-
+      var ctrlNode = this.renderTopControlNode();
       var extraSelectionProps = {};
-      if (!isCombobox(props)) {
+      if (!(0, _util.isCombobox)(props)) {
         extraSelectionProps = {
@@ -677,21 +581,30 @@ onKeyDown: this.handleKeyDown,
       }
-
-      return this.renderRoot([React.createElement(
+      var rootCls = (_rootCls = {}, _defineProperty(_rootCls, prefixCls, true), _defineProperty(_rootCls, prefixCls + '-open', this.state.open), _defineProperty(_rootCls, prefixCls + '-combobox', (0, _util.isCombobox)(props)), _defineProperty(_rootCls, prefixCls + '-disabled', props.disabled), _rootCls);
+      return _react2['default'].createElement(
         'span',
-        _extends({ ref: 'selection',
-          key: 'selection',
-          className: joinClasses(prefixCls + '-selection', prefixCls + '-selection--' + (multiple ? 'multiple' : 'single')),
-          role: 'combobox',
-          'aria-autocomplete': 'list',
-          onClick: this.handleClick,
-          'aria-haspopup': 'true',
-          'aria-expanded': state.open
-        }, extraSelectionProps),
-        ctrlNode,
-        multiple || !props.showArrow ? null : React.createElement(
+        {
+          style: props.style,
+          className: (0, _rcUtil.joinClasses)(props.className, (0, _rcUtil.classSet)(rootCls)),
+          onFocus: this.handleFocus,
+          onBlur: this.handleBlur },
+        _react2['default'].createElement(
           'span',
-          { key: 'arrow', className: prefixCls + '-arrow' },
-          React.createElement('b', null)
-        )
-      ), dropDown]);
+          _extends({ ref: 'selection',
+            key: 'selection',
+            className: (0, _rcUtil.joinClasses)(prefixCls + '-selection', prefixCls + '-selection--' + (multiple ? 'multiple' : 'single')),
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            onClick: this.handleClick,
+            'aria-haspopup': 'true',
+            'aria-expanded': state.open
+          }, extraSelectionProps),
+          ctrlNode,
+          multiple || !props.showArrow ? null : _react2['default'].createElement(
+            'span',
+            { key: 'arrow', className: prefixCls + '-arrow' },
+            _react2['default'].createElement('b', null)
+          )
+        ),
+        props.renderDropdownToBody ? null : this.getDropdownElement()
+      );
     }
@@ -701,21 +614,25 @@ }]);
   return Select;
-})(React.Component);
+})(_react2['default'].Component);
 
+exports['default'] = Select;
+
 Select.propTypes = {
-  multiple: React.PropTypes.bool,
-  filterOption: React.PropTypes.any,
-  showSearch: React.PropTypes.bool,
-  showArrow: React.PropTypes.bool,
-  tags: React.PropTypes.bool,
-  transitionName: React.PropTypes.string,
-  optionLabelProp: React.PropTypes.string,
-  optionFilterProp: React.PropTypes.string,
-  animation: React.PropTypes.string,
-  onChange: React.PropTypes.func,
-  onSelect: React.PropTypes.func,
-  onSearch: React.PropTypes.func,
-  searchPlaceholder: React.PropTypes.string,
-  placeholder: React.PropTypes.any,
-  onDeselect: React.PropTypes.func,
-  maxTagTextLength: React.PropTypes.number
+  multiple: _react2['default'].PropTypes.bool,
+  filterOption: _react2['default'].PropTypes.any,
+  showSearch: _react2['default'].PropTypes.bool,
+  showArrow: _react2['default'].PropTypes.bool,
+  renderDropdownToBody: _react2['default'].PropTypes.bool,
+  tags: _react2['default'].PropTypes.bool,
+  transitionName: _react2['default'].PropTypes.string,
+  optionLabelProp: _react2['default'].PropTypes.string,
+  optionFilterProp: _react2['default'].PropTypes.string,
+  animation: _react2['default'].PropTypes.string,
+  onChange: _react2['default'].PropTypes.func,
+  onSelect: _react2['default'].PropTypes.func,
+  onSearch: _react2['default'].PropTypes.func,
+  searchPlaceholder: _react2['default'].PropTypes.string,
+  placeholder: _react2['default'].PropTypes.any,
+  onDeselect: _react2['default'].PropTypes.func,
+  dropdownStyle: _react2['default'].PropTypes.object,
+  maxTagTextLength: _react2['default'].PropTypes.number
 };
@@ -735,2 +652,5 @@
   showArrow: true,
+  dropdownMatchSelectWidth: true,
+  dropdownStyle: {},
+  renderDropdownToBody: false,
   optionFilterProp: 'value',
@@ -740,3 +660,2 @@ optionLabelProp: 'value',
 };
-
-module.exports = Select;
+module.exports = exports['default'];

package.json

 {
   "name": "rc-select",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "select ui component for react",
@@ -46,3 +46,2 @@ "keywords": [
     "querystring": "^0.2.0",
-    "rc-menu": "~3.3.0",
     "rc-server": "3.x",
@@ -55,2 +54,4 @@ "rc-tools": "3.x",
     "css-animation": "1.0.x",
+    "dom-align": "~1.0.8",
+    "object-assign": "~3.0.0",
     "rc-menu": "3.4.x",
@@ -57,0 +58,0 @@ "rc-util": "2.0.x"

README.md

@@ -194,2 +194,20 @@ # rc-select
         </tr>
+        <tr>
+          <td>renderDropdownToBody</td>
+          <td>Boolean</td>
+          <th>false</th>
+          <td>whether render dropdown to body</td>
+        </tr>
+        <tr>
+          <td>dropdownMatchSelectWidth</td>
+          <td>Boolean</td>
+          <th>true</th>
+          <td>whether dropdown 's with is same with select</td>
+        </tr>
+        <tr>
+          <td>dropdownStyle</td>
+          <td>Object</td>
+          <th>{}</th>
+          <td>additional style applied to dropdown</td>
+        </tr>
     </tbody>
@@ -196,0 +214,0 @@ </table>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55281

increased by24.97%

Dev dependency count

8

decreased by-11.11%

Number of package files

10

increased by25%

Lines of code

1256

increased by18.6%

Number of lines in readme file

300

increased by6.38%

Worsened metrics

Dependency count

5

increased by66.67%

Dependency changes

• + Addeddom-align@~1.0.8

• + Addedobject-assign@~3.0.0

• + Addeddom-align@1.0.12(transitive)

• + Addedobject-assign@3.0.0(transitive)