rc-select - npm Package Compare versions

Comparing version 4.4.1 to 4.5.0

HISTORY.md

 # History
 ----
 
+## 4.5.0 / 2015-07-30
+
+use rc-animate & rc-align. (assets change)
+
 ## 4.4.0 / 2015-07-15
@@ -5,0 +9,0 @@

lib/Dropdown.js

@@ -15,5 +15,7 @@ 'use strict';
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -38,2 +40,4 @@ var _react = require('react');
 
+var _rcUtil = require('rc-util');
+
 var SelectDropdown = (function (_React$Component) {
@@ -64,2 +68,7 @@ _inherits(SelectDropdown, _React$Component);
   }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps) {
+      return this.props.visible || nextProps.visible;
+    }
+  }, {
     key: 'renderFilterOptionsFromChildren',
@@ -163,3 +172,3 @@ value: function renderFilterOptionsFromChildren(children, showNotFound) {
         _extends({
-          ref: 'menu',
+          ref: "menu",
           style: props.dropdownMenuStyle,
@@ -185,2 +194,4 @@ onSelect: props.onMenuSelect,
     value: function render() {
+      var _className;
+
       var props = this.props;
@@ -199,11 +210,12 @@ var prefixCls = props.prefixCls;
       }
+      var className = (_className = {}, _defineProperty(_className, dropdownPrefixCls, 1), _defineProperty(_className, dropdownPrefixCls + '--below', 1), _defineProperty(_className, dropdownPrefixCls + '-hidden', !props.visible), _className);
       // single and not combobox, input is inside dropdown
       return _react2['default'].createElement(
         'span',
-        { key: 'dropdown',
+        { key: "dropdown",
           onFocus: props.onDropdownFocus,
           onBlur: props.onDropdownBlur,
           style: style,
-          className: dropdownPrefixCls + ' ' + dropdownPrefixCls + '--below',
-          tabIndex: '-1' },
+          className: (0, _rcUtil.classSet)(className),
+          tabIndex: "-1" },
         search,
@@ -210,0 +222,0 @@ this.renderMenu(menuItems)

lib/OptGroup.js

@@ -13,3 +13,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -16,0 +16,0 @@ var _react = require('react');

lib/Option.js

@@ -13,3 +13,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -16,0 +16,0 @@ var _react = require('react');

lib/Select.js

@@ -19,3 +19,3 @@ 'use strict';
 
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -28,6 +28,2 @@ var _react = require('react');
 
-var _cssAnimation = require('css-animation');
-
-var _cssAnimation2 = _interopRequireDefault(_cssAnimation);
-
 var _OptGroup = require('./OptGroup');
@@ -37,6 +33,10 @@
 
-var _domAlign = require('dom-align');
+var _rcAlign = require('rc-align');
 
-var _domAlign2 = _interopRequireDefault(_domAlign);
+var _rcAlign2 = _interopRequireDefault(_rcAlign);
 
+var _rcAnimate = require('rc-animate');
+
+var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
+
 var _Dropdown = require('./Dropdown');
@@ -66,3 +66,3 @@
 
-    _get(Object.getPrototypeOf(Select.prototype), 'constructor', this).apply(this, arguments);
+    _get(Object.getPrototypeOf(Select.prototype), 'constructor', this).call(this, props);
     var value = [];
@@ -78,3 +78,3 @@ if ('value' in props) {
     };
-    ['handleClick', 'handleKeyDown', 'handleInputKeyDown', 'handleInputChange', 'handleFocus', 'handleBlur', 'handleClearSelection', 'handleMenuSelect', 'handleMenuDeselect'].forEach(function (m) {
+    ['handleClick', 'getDOMNode', 'handleKeyDown', 'handleInputKeyDown', 'handleInputChange', 'handleFocus', 'handleBlur', 'handleClearSelection', 'handleMenuSelect', 'handleMenuDeselect'].forEach(function (m) {
       _this[m] = _this[m].bind(_this);
@@ -175,6 +175,6 @@ });
     }
+
+    // combobox ignore
   }, {
     key: 'handleKeyDown',
-
-    // combobox ignore
     value: function handleKeyDown(e) {
@@ -388,3 +388,3 @@ var props = this.props;
             'li',
-            { className: (0, _rcUtil.joinClasses)(prefixCls + '-search', prefixCls + '-search--inline') },
+            { className: prefixCls + '-search ' + prefixCls + '-search--inline' },
             this.getInputElement()
@@ -410,30 +410,2 @@ )
   }, {
-    key: 'renderDropdown',
-    value: function renderDropdown(prevState) {
-      var state = this.state;
-      var props = this.props;
-      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',
@@ -449,3 +421,3 @@ value: function getInputElement() {
         className: props.prefixCls + '-search__field',
-        role: 'textbox' });
+        role: "textbox" });
     }
@@ -457,36 +429,53 @@ }, {
       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,
-            dropdownMenuStyle: props.dropdownMenuStyle,
-            dropdownStyle: props.dropdownStyle },
-          props.children
-        );
-      }
-      return this.cachedDropDown;
+      return _react2['default'].createElement(
+        _rcAnimate2['default'],
+        {
+          component: "",
+          exclusive: true,
+          animateMount: true,
+          showProp: "selectOpen",
+          transitionName: this.getDropdownTransitionName() },
+        _react2['default'].createElement(
+          _rcAlign2['default'],
+          { target: this.getDOMNode,
+            key: "dropdown",
+            selectOpen: state.open,
+            disabled: !state.open,
+            align: {
+              points: ['tl', 'bl'],
+              offset: [0, 4]
+            } },
+          _react2['default'].createElement(
+            _Dropdown2['default'],
+            {
+              key: "dropdown",
+              visible: state.open,
+              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,
+              dropdownMenuStyle: props.dropdownMenuStyle,
+              dropdownStyle: props.dropdownStyle },
+            props.children
+          )
+        )
+      );
     }
   }, {
-    key: 'animateDropdown',
-    value: function animateDropdown(prevProps, prevState) {
+    key: 'getDropdownTransitionName',
+    value: function getDropdownTransitionName() {
       var props = this.props;
-      var state = this.state;
       var transitionName = props.transitionName;
@@ -496,10 +485,3 @@ if (!transitionName && props.animation) {
       }
-      var domNode = this.getDropdownDOMNode();
-      if (transitionName && domNode) {
-        if (state.open && !prevState.open) {
-          (0, _cssAnimation2['default'])(domNode, transitionName + '-enter');
-        } else if (!state.open && prevState.open) {
-          (0, _cssAnimation2['default'])(domNode, transitionName + '-leave');
-        }
-      }
+      return transitionName;
     }
@@ -512,21 +494,33 @@ }, {
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.componentDidUpdate();
+    key: 'getDOMNode',
+    value: function getDOMNode() {
+      return _react2['default'].findDOMNode(this);
     }
   }, {
     key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps, prevState) {
-      prevState = prevState || {};
-      this.renderDropdown(prevState);
-      this.animateDropdown(prevProps, prevState);
-      if ((0, _util.isMultipleOrTags)(this.props)) {
-        var inputNode = this.getInputDOMNode();
-        if (inputNode.value) {
-          inputNode.style.width = '';
-          inputNode.style.width = inputNode.scrollWidth + 'px';
-        } else {
-          inputNode.style.width = '';
+    value: function componentDidUpdate() {
+      var state = this.state;
+      var props = this.props;
+      if (this.haveOpened) {
+        if (props.renderDropdownToBody) {
+          _react2['default'].render(this.getDropdownElement(), this.getDropdownContainer());
         }
       }
+      if (state.open) {
+        if (props.dropdownMatchSelectWidth) {
+          var dropdownDOMNode = this.getDropdownDOMNode();
+          if (dropdownDOMNode) {
+            dropdownDOMNode.style.width = this.getDOMNode().offsetWidth + 'px';
+          }
+        }
+        if ((0, _util.isMultipleOrTags)(props)) {
+          var inputNode = this.getInputDOMNode();
+          if (inputNode.value) {
+            inputNode.style.width = '';
+            inputNode.style.width = inputNode.scrollWidth + 'px';
+          } else {
+            inputNode.style.width = '';
+          }
+        }
+      }
     }
@@ -564,3 +558,8 @@ }, {
       }
-      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);
+      var rootCls = (_rootCls = {}, _defineProperty(_rootCls, props.className, !!props.className), _defineProperty(_rootCls, prefixCls, 1), _defineProperty(_rootCls, prefixCls + '-open', this.state.open), _defineProperty(_rootCls, prefixCls + '-combobox', (0, _util.isCombobox)(props)), _defineProperty(_rootCls, prefixCls + '-disabled', props.disabled), _rootCls);
+      var dropdownElement;
+      this.haveOpened = this.haveOpened || state.open;
+      if (this.haveOpened) {
+        dropdownElement = this.getDropdownElement();
+      }
       return _react2['default'].createElement(
@@ -570,3 +569,3 @@ 'span',
           style: props.style,
-          className: (0, _rcUtil.joinClasses)(props.className, (0, _rcUtil.classSet)(rootCls)),
+          className: (0, _rcUtil.classSet)(rootCls),
           onFocus: this.handleFocus,
@@ -576,9 +575,9 @@ onBlur: this.handleBlur },
           'span',
-          _extends({ ref: 'selection',
-            key: 'selection',
-            className: (0, _rcUtil.joinClasses)(prefixCls + '-selection', prefixCls + '-selection--' + (multiple ? 'multiple' : 'single')),
-            role: 'combobox',
-            'aria-autocomplete': 'list',
+          _extends({ ref: "selection",
+            key: "selection",
+            className: prefixCls + '-selection ' + prefixCls + '-selection--' + (multiple ? 'multiple' : 'single'),
+            role: "combobox",
+            'aria-autocomplete': "list",
             onClick: this.handleClick,
-            'aria-haspopup': 'true',
+            'aria-haspopup': "true",
             'aria-expanded': state.open
@@ -589,7 +588,7 @@ }, extraSelectionProps),
             'span',
-            { key: 'arrow', className: prefixCls + '-arrow', tabIndex: '-1', style: { outline: 'none' } },
+            { key: "arrow", className: prefixCls + '-arrow', tabIndex: "-1", style: { outline: 'none' } },
             _react2['default'].createElement('b', null)
           )
         ),
-        props.renderDropdownToBody ? null : this.getDropdownElement()
+        props.renderDropdownToBody ? null : dropdownElement
       );
@@ -602,4 +601,2 @@ }
 
-exports['default'] = Select;
-
 Select.propTypes = {
@@ -646,2 +643,4 @@ multiple: _react2['default'].PropTypes.bool,
 };
+
+exports['default'] = Select;
 module.exports = exports['default'];

package.json

 {
   "name": "rc-select",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "select ui component for react",
@@ -52,7 +52,7 @@ "keywords": [
   "dependencies": {
-    "css-animation": "1.0.x",
-    "dom-align": "~1.0.8",
     "object-assign": "~3.0.0",
+    "rc-align": "~1.2.0",
+    "rc-animate": "~1.1.0",
     "rc-menu": "3.4.x",
-    "rc-util": "2.0.x"
+    "rc-util": "2.x"
   },
@@ -59,0 +59,0 @@ "precommit": [

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

56623

increased by1.06%

Lines of code

1272

increased by0.47%

Dependency changes

• + Addedrc-align@~1.2.0

• + Addedrc-animate@~1.1.0

• + Addedadd-dom-event-listener@1.1.0(transitive)

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedclassnames@2.5.1(transitive)

• + Addedcomponent-classes@1.2.6(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedcss-animation@1.6.1(transitive)

• + Addeddom-align@1.12.4(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedrc-align@1.2.1(transitive)

• + Addedrc-animate@1.1.0(transitive)

• + Addedrc-util@2.1.1(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• - Removedcss-animation@1.0.x

• - Removeddom-align@~1.0.8

• - Removedcss-animation@1.0.5(transitive)

• - Removeddom-align@1.0.12(transitive)

• - Removedrc-util@2.0.3(transitive)

• Updatedrc-util@2.x