[fixed] updated to React Bootstrap v0.26.1, performance improvements

Author: thealjey

_index.scss

@@ -1,41 +1,39 @@
 .al-combo {
-  &, * {
-    &:focus {
-      outline-style: none;
-    }
-  }
   &, > .dropdown-menu {
     width: 100%;
   }
-  > .btn > .wrap {
+  &, > .dropdown-menu > li > a {
+    outline-style: none;
+  }
+  > .btn > div > span:first-child, > .dropdown-menu, > .dropdown-menu > li div {
+    overflow-x: hidden;
+  }
+  > .btn > div > span:first-child, > .dropdown-menu > li div {
+    text-overflow: ellipsis;
+  }
+  > .btn > div {
     align-items: center;
     display: flex;
     > span:first-child {
-      flex-grow: 1;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
+      flex: 1;
     }
   }
   > .dropdown-menu {
-    overflow-x: hidden;
     overflow-y: auto;
     > li {
-      &, * {
-        user-select: none;
-      }
+      user-select: none;
       &.active > a {
         pointer-events: none;
       }
       &.dropdown-header > div {
         cursor: default;
       }
       > a {
-        -khtml-user-drag: none;
         -webkit-user-drag: none;
-        > div {
-          overflow-x: hidden;
-          text-overflow: ellipsis;
-        }
+        -khtml-user-drag: none;
+        -moz-user-drag: none;
+        -o-user-drag: none;
+        user-drag: none;
       }
     }
   }

bin/build.js

@@ -3,7 +3,7 @@
 import {JS, NativeProcess, SASSLint} from 'webcompiler';
 import {join} from 'path';
 
-var rootDir = join(__dirname, '..'),
+const rootDir = join(__dirname, '..'),
     binDir = join(rootDir, 'bin'),
     buildDir = join(rootDir, 'build'),
     libDir = join(rootDir, 'lib'),

bin/server.js

@@ -4,7 +4,7 @@
 import {DevServer} from 'webcompiler';
 import {join} from 'path';
 
-var rootDir = join(__dirname, '..'),
+const rootDir = join(__dirname, '..'),
     devDir = join(rootDir, 'development'),
     server = new DevServer(join(devDir, 'script.js'), join(devDir, 'app.scss'), devDir);
 

build/Combo.js

@@ -34,6 +34,8 @@ var _lodashFunctionDebounce = require('lodash/function/debounce');
 
 var _lodashFunctionDebounce2 = _interopRequireDefault(_lodashFunctionDebounce);
 
+var uid = 0;
+
 /**
  * A combo-box component for React Bootstrap
  *
@@ -54,35 +56,49 @@ var Combo = (function (_React$Component) {
   _inherits(Combo, _React$Component);
 
   function Combo(props) {
-    var _this = this;
-
     _classCallCheck(this, Combo);
 
     _get(Object.getPrototypeOf(Combo.prototype), 'constructor', this).call(this, props);
 
+    /**
+     * The html id
+     *
+     * @memberOf Combo
+     * @instance
+     * @private
+     * @type {string}
+     */
+    this.id = 'al-combo-' + ++uid;
+
     /**
      * Height of the browser viewport
      *
      * @memberOf Combo
      * @instance
      * @private
-     * @type {Number}
+     * @type {number}
      */
     this.viewportHeight = 0;
 
     /**
-     * Handles browser resize events, debounced by 150ms, executed on requestAnimationFrame
+     * Handles browser resize events, debounced by 150ms
      *
      * @memberof Combo
      * @instance
      * @private
      * @method handleResize
      */
-    this.handleResize = (0, _lodashFunctionDebounce2['default'])(function () {
-      window.requestAnimationFrame(function () {
-        _this.onResize();
-      });
-    }, 150);
+    this.handleResize = (0, _lodashFunctionDebounce2['default'])(this.onResize.bind(this), 150);
+
+    /**
+     * Holds component state
+     *
+     * @memberof Combo
+     * @instance
+     * @private
+     * @type {Object}
+     */
+    this.state = { maxHeight: null };
   }
 
   /**
@@ -93,47 +109,14 @@ var Combo = (function (_React$Component) {
    * @private
    * @method shouldComponentUpdate
    * @param  {Object}  props - A props config
+   * @param  {Object}  state - A new component state
    * @return {boolean} true if the component needs to be re-rendered
    */
 
   _createClass(Combo, [{
     key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(props) {
-      return props.onChange !== this.props.onChange || props.items !== this.props.items || props.value !== this.props.value;
-    }
-
-    /**
-     * Invoked every time the viewport is resized
-     *
-     * @memberof Combo
-     * @instance
-     * @private
-     * @method onResize
-     */
-  }, {
-    key: 'onResize',
-    value: function onResize() {
-      var height = window.innerHeight,
-          combo,
-          menu,
-          closed;
-
-      if (this.viewportHeight === height) {
-        return;
-      }
-      this.viewportHeight = height;
-
-      combo = this.refs.combo;
-      menu = _react2['default'].findDOMNode(combo.refs.menu);
-      closed = !combo.state.open;
-
-      if (closed) {
-        combo.setDropdownState(true);
-      }
-      menu.style.maxHeight = height - menu.getBoundingClientRect().top + 'px';
-      if (closed) {
-        combo.setDropdownState(false);
-      }
+    value: function shouldComponentUpdate(props, state) {
+      return props.onChange !== this.props.onChange || props.items !== this.props.items || props.value !== this.props.value || state.maxHeight !== this.state.maxHeight;
     }
 
     /**
@@ -165,6 +148,27 @@ var Combo = (function (_React$Component) {
       window.removeEventListener('resize', this.handleResize);
     }
 
+    /**
+     * Invoked every time the viewport is resized
+     *
+     * @memberof Combo
+     * @instance
+     * @private
+     * @method onResize
+     */
+  }, {
+    key: 'onResize',
+    value: function onResize() {
+      var height = window.innerHeight;
+
+      if (this.viewportHeight === height) {
+        return;
+      }
+      this.viewportHeight = height;
+
+      this.setState({ maxHeight: height - _react2['default'].findDOMNode(this).getBoundingClientRect().bottom - 5 });
+    }
+
     /**
      * Normalizes a dropdown item config object.
      *
@@ -178,7 +182,9 @@ var Combo = (function (_React$Component) {
   }, {
     key: 'normalize',
     value: function normalize(value) {
-      return (0, _lodashLangIsString2['default'])(value) ? '-' === value ? { divider: true } : { label: value } : value;
+      var divider = '-' === value ? { divider: true } : { label: value };
+
+      return (0, _lodashLangIsString2['default'])(value) ? divider : value;
     }
 
     /**
@@ -195,6 +201,78 @@ var Combo = (function (_React$Component) {
       return this.normalize(this.props.items[this.props.value]).label;
     }
 
+    /**
+     * Renders a button
+     *
+     * @memberof Combo
+     * @instance
+     * @private
+     * @method renderButton
+     * @return {ReactElement} a virtual DOM tree
+     */
+  }, {
+    key: 'renderButton',
+    value: function renderButton() {
+      return _react2['default'].createElement(
+        _reactBootstrap.Button,
+        { block: true, bsRole: 'toggle', className: 'dropdown-toggle' },
+        _react2['default'].createElement(
+          'div',
+          null,
+          this.getLabel(),
+          _react2['default'].createElement('span', { className: 'caret' })
+        )
+      );
+    }
+
+    /**
+     * Renders a menu item
+     *
+     * @memberof Combo
+     * @instance
+     * @private
+     * @method renderMenuItem
+     * @param  {Object|string} item - a dropdown item config
+     * @param  {string}        i    - a dropdown item key
+     * @return {ReactElement} a virtual DOM tree
+     */
+  }, {
+    key: 'renderMenuItem',
+    value: function renderMenuItem(item, i) {
+      item = this.normalize(item);
+      if (item.divider) {
+        return _react2['default'].createElement(_reactBootstrap.MenuItem, { key: i, divider: true });
+      }
+      return _react2['default'].createElement(
+        _reactBootstrap.MenuItem,
+        _extends({ key: i, eventKey: i, active: i === this.props.value }, item),
+        _react2['default'].createElement(
+          'div',
+          null,
+          item.label
+        )
+      );
+    }
+
+    /**
+     * Renders a menu
+     *
+     * @memberof Combo
+     * @instance
+     * @private
+     * @method renderMenu
+     * @return {ReactElement} a virtual DOM tree
+     */
+  }, {
+    key: 'renderMenu',
+    value: function renderMenu() {
+      return _react2['default'].createElement(
+        _reactBootstrap.Dropdown.Menu,
+        { style: this.state },
+        (0, _lodashCollectionMap2['default'])(this.props.items, this.renderMenuItem, this)
+      );
+    }
+
     /**
      * Invoked when the component is about to be unmounted from the DOM tree
      *
@@ -207,33 +285,11 @@ var Combo = (function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
-
-      var _props = this.props;
-      var items = _props.items;
-      var value = _props.value;
-      var onChange = _props.onChange;
-
       return _react2['default'].createElement(
-        _reactBootstrap.DropdownButton,
-        { block: true, noCaret: true, ref: 'combo', className: 'al-combo', title: _react2['default'].createElement(
-            'div',
-            { className: 'wrap' },
-            this.getLabel(),
-            _react2['default'].createElement('span', { className: 'caret' })
-          ), onSelect: onChange.bind(this) },
-        (0, _lodashCollectionMap2['default'])(items, function (item, i) {
-          item = _this2.normalize(item);
-          return _react2['default'].createElement(
-            _reactBootstrap.MenuItem,
-            _extends({ key: i, eventKey: i, active: i === value }, item),
-            _react2['default'].createElement(
-              'div',
-              null,
-              item.label
-            )
-          );
-        })
+        _reactBootstrap.Dropdown,
+        { className: 'al-combo', id: this.id, onSelect: this.props.onChange },
+        this.renderButton(),
+        this.renderMenu()
       );
     }
   }]);