Remove some bind usage in render functions and undo passing down Dropdown theme to Input

components/autocomplete/Autocomplete.js

@@ -138,8 +138,8 @@ const factory = (Chip, Input) => {
      }
    };
 
-   handleSuggestionHover = (key) => {
+   handleSuggestionHover = (event) => {
-     this.setState({active: key});
+     this.setState({active: event.target.id});
    };
 
    calculateDirection () {
@@ -220,11 +220,11 @@ const factory = (Chip, Input) => {
      return valueMap;
    }
 
-   select (key, event) {
+   select = (event) => {
      events.pauseEvent(event);
      const values = this.values(this.props.value);
-     this.handleChange([key, ...values.keys()], event);
+     this.handleChange([event.target.id, ...values.keys()], event);
-   }
+   };
 
    unselect (key, event) {
      if (!this.props.disabled) {
@@ -259,10 +259,11 @@ const factory = (Chip, Input) => {
        const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
        return (
          <li
+           id={key}
            key={key}
            className={className}
-           onMouseDown={this.select.bind(this, key)}
+           onMouseDown={this.select}
-           onMouseOver={this.handleSuggestionHover.bind(this, key)}
+           onMouseOver={this.handleSuggestionHover}
          >
            {value}
          </li>

components/date_picker/Calendar.js

@@ -5,6 +5,8 @@ import time from '../utils/time.js';
 import utils from '../utils/utils.js';
 import CalendarMonth from './CalendarMonth.js';
 
+const DIRECTION_STEPS = { left: -1, right: 1 };
+
 const factory = (IconButton) => {
   class Calendar extends Component {
     static propTypes = {
@@ -48,37 +50,34 @@ const factory = (IconButton) => {
       this.props.onChange(time.setDay(this.state.viewDate, day), true);
     };
 
-    handleYearClick = (year) => {
+    handleYearClick = (event) => {
+      const year = parseInt(event.target.id);
       const viewDate = time.setYear(this.props.selectedDate, year);
       this.setState({viewDate});
       this.props.onChange(viewDate, false);
     };
 
-    changeViewMonth = (direction, step) => {
+    changeViewMonth = (event) => {
+      const direction = event.target.id;
       this.setState({
         direction,
-        viewDate: time.addMonths(this.state.viewDate, step)
+        viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])
       });
     };
 
-    renderYear (year) {
-      const props = {
-        className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
-        key: year,
-        onClick: this.handleYearClick.bind(this, year)
-      };
-
-      if (year === this.state.viewDate.getFullYear()) {
-        props.ref = 'activeYear';
-      }
-
-      return <li {...props}>{year}</li>;
-    }
-
     renderYears () {
       return (
         <ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
-          {utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
+          {utils.range(1900, 2100).map(year => (
+            <li
+              children={year}
+              className={year === this.state.viewDate.getFullYear() ? this.props.theme.active : ''}
+              id={year}
+              key={year}
+              onClick={this.handleYearClick}
+              ref={year === this.state.viewDate.getFullYear() ? 'activeYear' : undefined}
+            />
+          ))}
         </ul>
       );
     }
@@ -88,8 +87,8 @@ const factory = (IconButton) => {
       const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
       return (
         <div data-react-toolbox='calendar'>
-          <IconButton className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
+          <IconButton id='left' className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth} />
-          <IconButton className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
+          <IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
           <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
             <CalendarMonth
               key={this.state.viewDate.getMonth()}
@@ -99,7 +98,7 @@ const factory = (IconButton) => {
               selectedDate={this.props.selectedDate}
               theme={this.props.theme}
               viewDate={this.state.viewDate}
-              />
+            />
           </CssTransitionGroup>
         </div>
       );

components/date_picker/CalendarDay.js

@@ -31,6 +31,12 @@ class Day extends Component {
     return sameYear && sameMonth && sameDay;
   }
 
+  handleClick = () => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(this.props.day);
+    }
+  };
+
   render () {
     const className = classnames(this.props.theme.day, {
       [this.props.theme.active]: this.isSelected(),
@@ -39,7 +45,7 @@ class Day extends Component {
 
     return (
       <div data-react-toolbox='day' className={className} style={this.dayStyle()}>
-        <span onClick={this.props.onClick}>
+        <span onClick={this.handleClick}>
           {this.props.day}
         </span>
       </div>

components/date_picker/CalendarMonth.js

@@ -38,7 +38,7 @@ class Month extends Component {
           key={i}
           day={i}
           disabled={disabled}
-          onClick={!disabled ? this.handleDayClick.bind(this, i) : null}
+          onClick={this.handleDayClick}
           selectedDate={this.props.selectedDate}
           theme={this.props.theme}
           viewDate={this.props.viewDate}

components/date_picker/DatePickerDialog.js

@@ -63,8 +63,8 @@ const factory = (Dialog, Calendar) => {
       if (this.props.onSelect) this.props.onSelect(this.state.date, event);
     };
 
-    handleSwitchDisplay = (display) => {
+    handleSwitchDisplay = (event) => {
-      this.setState({ display });
+      this.setState({ display: event.target.id });
     };
 
     updateStateDate = (date) => {
@@ -96,10 +96,10 @@ const factory = (Dialog, Calendar) => {
           type="custom"
         >
           <header className={headerClassName}>
-            <span className={theme.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
+            <span id='years' className={theme.year} onClick={this.handleSwitchDisplay}>
               {this.state.date.getFullYear()}
             </span>
-            <h3 className={theme.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
+            <h3 id='months' className={theme.date} onClick={this.handleSwitchDisplay}>
               {time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
             </h3>
           </header>

components/dropdown/Dropdown.js

@@ -130,7 +130,7 @@ const factory = (Input) => {
       );
     }
 
-    renderValue (item, idx) {
+    renderValue = (item, idx) => {
       const { theme } = this.props;
       const className = item.value === this.props.value ? theme.selected : null;
       return (
@@ -138,7 +138,7 @@ const factory = (Input) => {
           {this.props.template ? this.props.template(item) : item.label}
         </li>
       );
-    }
+    };
 
     render () {
       const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
@@ -156,13 +156,12 @@ const factory = (Input) => {
             className={theme.value}
             onMouseDown={this.handleMouseDown}
             readOnly
-            theme={theme}
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}
           />
         {template && selected ? this.renderTemplateValue(selected) : null}
           <ul className={theme.values} ref='values'>
-            {source.map(this.renderValue.bind(this))}
+            {source.map(this.renderValue)}
           </ul>
         </div>
       );

components/dropdown/theme.scss

@@ -37,7 +37,7 @@
 }
 
 .value {
-  > .inputElement {
+  > .input {
     cursor: pointer;
   }
   &:after {
@@ -56,6 +56,7 @@
     transition: transform $animation-duration $animation-curve-default;
   }
 }
+
 .field {
   position: relative;
   padding: $input-padding 0;

components/tabs/Tab.js

@@ -41,7 +41,10 @@ class Tab extends Component {
   };
 
   render () {
-    const { active, activeClassName, hidden, disabled, className, theme } = this.props;
+    const {
+      onActive, // eslint-disable-line
+      active, activeClassName, className, disabled, hidden, theme, ...other
+    } = this.props;
     const _className = classnames(theme.label, {
       [theme.active]: active,
       [theme.hidden]: hidden,
@@ -50,7 +53,7 @@ class Tab extends Component {
     }, className);
 
     return (
-      <label data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
+      <label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
         {this.props.label}
       </label>
     );

components/tabs/Tabs.js

@@ -40,7 +40,8 @@ const factory = (Tab, TabContent) => {
       clearTimeout(this.pointerTimeout);
     }
 
-    handleHeaderClick = (idx) => {
+    handleHeaderClick = (event) => {
+      const idx = parseInt(event.target.id);
       if (this.props.onChange) this.props.onChange(idx);
     };
 
@@ -80,9 +81,10 @@ const factory = (Tab, TabContent) => {
     renderHeaders (headers) {
       return headers.map((item, idx) => {
         return React.cloneElement(item, {
+          id: idx,
           key: idx,
           active: this.props.index === idx,
-          onClick: this.handleHeaderClick.bind(this, idx, item)
+          onClick: this.handleHeaderClick
         });
       });
     }

components/time_picker/ClockFace.js

@@ -37,7 +37,7 @@ class Face extends Component {
     };
   }
 
-  renderNumber (number, idx) {
+  renderNumber = (number, idx) => {
     const { active, radius, spacing, theme, twoDigits } = this.props;
     return (
       <span
@@ -60,7 +60,7 @@ class Face extends Component {
         onMouseDown={onMouseDown}
         style={this.faceStyle()}
       >
-        {numbers.map(this.renderNumber.bind(this))}
+        {numbers.map(this.renderNumber)}
       </div>
     );
   }

components/time_picker/TimePickerDialog.js

@@ -65,8 +65,8 @@ const factory = (Dialog) => {
       if (this.state.display === 'hours') this.setState({display: 'minutes'});
     };
 
-    switchDisplay = (display) => {
+    switchDisplay = (event) => {
-      this.setState({display});
+      this.setState({display: event.target.id});
     };
 
     actions = [
@@ -108,11 +108,11 @@ const factory = (Dialog) => {
           onOverlayClick={this.props.onOverlayClick}
         >
           <header className={theme.header}>
-            <span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
+            <span id='hours' className={theme.hours} onClick={this.switchDisplay}>
               {('0' + this.formatHours()).slice(-2)}
             </span>
             <span className={theme.separator}>:</span>
-            <span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
+            <span id='minutes' className={theme.minutes} onClick={this.switchDisplay}>
               {('0' + this.state.displayTime.getMinutes()).slice(-2)}
             </span>
             {this.renderAMPMLabels()}

lib/autocomplete/Autocomplete.js

@@ -121,8 +121,12 @@ var factory = function factory(Chip, Input) {
           if (index >= suggestionsKeys.length) index = 0;
           _this.setState({ active: suggestionsKeys[index] });
         }
-      }, _this.handleSuggestionHover = function (key) {
+      }, _this.handleSuggestionHover = function (event) {
-        _this.setState({ active: key });
+        _this.setState({ active: event.target.id });
+      }, _this.select = function (event) {
+        _events2.default.pauseEvent(event);
+        var values = _this.values(_this.props.value);
+        _this.handleChange([event.target.id].concat(_toConsumableArray(values.keys())), event);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -309,13 +313,6 @@ var factory = function factory(Chip, Input) {
 
         return valueMap;
       }
-    }, {
-      key: 'select',
-      value: function select(key, event) {
-        _events2.default.pauseEvent(event);
-        var values = this.values(this.props.value);
-        this.handleChange([key].concat(_toConsumableArray(values.keys())), event);
-      }
     }, {
       key: 'unselect',
       value: function unselect(key, event) {
@@ -373,10 +370,11 @@ var factory = function factory(Chip, Input) {
           return _react2.default.createElement(
             'li',
             {
+              id: key,
               key: key,
               className: className,
-              onMouseDown: _this3.select.bind(_this3, key),
+              onMouseDown: _this3.select,
-              onMouseOver: _this3.handleSuggestionHover.bind(_this3, key)
+              onMouseOver: _this3.handleSuggestionHover
             },
             value
           );

lib/date_picker/Calendar.js

@@ -36,6 +36,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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; }
 
+var DIRECTION_STEPS = { left: -1, right: 1 };
+
 var factory = function factory(IconButton) {
   var Calendar = function (_Component) {
     _inherits(Calendar, _Component);
@@ -55,14 +57,16 @@ var factory = function factory(IconButton) {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
-      }, _this.handleYearClick = function (year) {
+      }, _this.handleYearClick = function (event) {
+        var year = parseInt(event.target.id);
         var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
         _this.setState({ viewDate: viewDate });
         _this.props.onChange(viewDate, false);
-      }, _this.changeViewMonth = function (direction, step) {
+      }, _this.changeViewMonth = function (event) {
+        var direction = event.target.id;
         _this.setState({
           direction: direction,
-          viewDate: _time2.default.addMonths(_this.state.viewDate, step)
+          viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
         });
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -79,25 +83,6 @@ var factory = function factory(IconButton) {
       value: function scrollToActive() {
         this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
       }
-    }, {
-      key: 'renderYear',
-      value: function renderYear(year) {
-        var props = {
-          className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
-          key: year,
-          onClick: this.handleYearClick.bind(this, year)
-        };
-
-        if (year === this.state.viewDate.getFullYear()) {
-          props.ref = 'activeYear';
-        }
-
-        return _react2.default.createElement(
-          'li',
-          props,
-          year
-        );
-      }
     }, {
       key: 'renderYears',
       value: function renderYears() {
@@ -106,8 +91,15 @@ var factory = function factory(IconButton) {
         return _react2.default.createElement(
           'ul',
           { 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
-          _utils2.default.range(1900, 2100).map(function (i) {
+          _utils2.default.range(1900, 2100).map(function (year) {
-            return _this2.renderYear(i);
+            return _react2.default.createElement('li', {
+              children: year,
+              className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
+              id: year,
+              key: year,
+              onClick: _this2.handleYearClick,
+              ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
+            });
           })
         );
       }
@@ -120,8 +112,8 @@ var factory = function factory(IconButton) {
         return _react2.default.createElement(
           'div',
           { 'data-react-toolbox': 'calendar' },
-          _react2.default.createElement(IconButton, { className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth.bind(this, 'left', -1) }),
+          _react2.default.createElement(IconButton, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
-          _react2.default.createElement(IconButton, { className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth.bind(this, 'right', 1) }),
+          _react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
           _react2.default.createElement(
             _reactAddonsCssTransitionGroup2.default,
             { transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },

lib/date_picker/CalendarDay.js

@@ -32,9 +32,21 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Day);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Day).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+      if (!_this.props.disabled && _this.props.onClick) {
+        _this.props.onClick(_this.props.day);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Day, [{
@@ -66,7 +78,7 @@ var Day = function (_Component) {
         { 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
         _react2.default.createElement(
           'span',
-          { onClick: this.props.onClick },
+          { onClick: this.handleClick },
           this.props.day
         )
       );

lib/date_picker/CalendarMonth.js

@@ -73,7 +73,7 @@ var Month = function (_Component) {
           key: i,
           day: i,
           disabled: disabled,
-          onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null,
+          onClick: _this2.handleDayClick,
           selectedDate: _this2.props.selectedDate,
           theme: _this2.props.theme,
           viewDate: _this2.props.viewDate

lib/date_picker/DatePickerDialog.js

@@ -55,8 +55,8 @@ var factory = function factory(Dialog, Calendar) {
         }
       }, _this.handleSelect = function (event) {
         if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
-      }, _this.handleSwitchDisplay = function (display) {
+      }, _this.handleSwitchDisplay = function (event) {
-        _this.setState({ display: display });
+        _this.setState({ display: event.target.id });
       }, _this.updateStateDate = function (date) {
         if (Object.prototype.toString.call(date) === '[object Date]') {
           _this.setState({
@@ -100,12 +100,12 @@ var factory = function factory(Dialog, Calendar) {
             { className: headerClassName },
             _react2.default.createElement(
               'span',
-              { className: theme.year, onClick: this.handleSwitchDisplay.bind(this, 'years') },
+              { id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
               this.state.date.getFullYear()
             ),
             _react2.default.createElement(
               'h3',
-              { className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') },
+              { id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
               _time2.default.getShortDayOfWeek(this.state.date.getDay()),
               ', ',
               _time2.default.getShortMonth(this.state.date),

lib/dropdown/Dropdown.js

@@ -116,6 +116,15 @@ var factory = function factory(Input) {
         if (!_this.props.allowBlank) {
           return _this.props.source[0];
         }
+      }, _this.renderValue = function (item, idx) {
+        var theme = _this.props.theme;
+
+        var className = item.value === _this.props.value ? theme.selected : null;
+        return _react2.default.createElement(
+          'li',
+          { key: idx, className: className, onMouseDown: _this.handleSelect.bind(_this, item.value) },
+          _this.props.template ? _this.props.template(item) : item.label
+        );
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -169,18 +178,6 @@ var factory = function factory(Input) {
           ) : null
         );
       }
-    }, {
-      key: 'renderValue',
-      value: function renderValue(item, idx) {
-        var theme = this.props.theme;
-
-        var className = item.value === this.props.value ? theme.selected : null;
-        return _react2.default.createElement(
-          'li',
-          { key: idx, className: className, onMouseDown: this.handleSelect.bind(this, item.value) },
-          this.props.template ? this.props.template(item) : item.label
-        );
-      }
     }, {
       key: 'render',
       value: function render() {
@@ -206,7 +203,6 @@ var factory = function factory(Input) {
             className: theme.value,
             onMouseDown: this.handleMouseDown,
             readOnly: true,
-            theme: theme,
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''
           })),
@@ -214,7 +210,7 @@ var factory = function factory(Input) {
           _react2.default.createElement(
             'ul',
             { className: theme.values, ref: 'values' },
-            source.map(this.renderValue.bind(this))
+            source.map(this.renderValue)
           )
         );
       }

lib/dropdown/theme.scss

@@ -37,7 +37,7 @@
 }
 
 .value {
-  > .inputElement {
+  > .input {
     cursor: pointer;
   }
   &:after {
@@ -56,6 +56,7 @@
     transition: transform $animation-duration $animation-curve-default;
   }
 }
+
 .field {
   position: relative;
   padding: $input-padding 0;

lib/tabs/Tab.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tab = undefined;
 
+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; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -23,6 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -63,18 +67,21 @@ var Tab = function (_Component) {
       var _classnames;
 
       var _props = this.props;
+      var onActive = _props.onActive;
       var active = _props.active;
       var activeClassName = _props.activeClassName;
-      var hidden = _props.hidden;
-      var disabled = _props.disabled;
       var className = _props.className;
+      var disabled = _props.disabled;
+      var hidden = _props.hidden;
       var theme = _props.theme;
 
+      var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'theme']);
+
       var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
 
       return _react2.default.createElement(
         'label',
-        { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick },
+        _extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
         this.props.label
       );
     }

lib/tabs/Tabs.js

@@ -52,7 +52,8 @@ var factory = function factory(Tab, TabContent) {
 
       return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
         pointer: {}
-      }, _this.handleHeaderClick = function (idx) {
+      }, _this.handleHeaderClick = function (event) {
+        var idx = parseInt(event.target.id);
         if (_this.props.onChange) _this.props.onChange(idx);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -118,9 +119,10 @@ var factory = function factory(Tab, TabContent) {
 
         return headers.map(function (item, idx) {
           return _react2.default.cloneElement(item, {
+            id: idx,
             key: idx,
             active: _this4.props.index === idx,
-            onClick: _this4.handleHeaderClick.bind(_this4, idx, item)
+            onClick: _this4.handleHeaderClick
           });
         });
       }

lib/time_picker/ClockFace.js

@@ -28,9 +28,34 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Face);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Face).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+      var _this$props = _this.props;
+      var active = _this$props.active;
+      var radius = _this$props.radius;
+      var spacing = _this$props.spacing;
+      var theme = _this$props.theme;
+      var twoDigits = _this$props.twoDigits;
+
+      return _react2.default.createElement(
+        'span',
+        {
+          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
+          style: _this.numberStyle(radius - spacing, idx + 1),
+          key: number
+        },
+        twoDigits ? ('0' + number).slice(-2) : number
+      );
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Face, [{
@@ -50,34 +75,14 @@ var Face = function (_Component) {
         width: this.props.radius * 2
       };
     }
-  }, {
-    key: 'renderNumber',
-    value: function renderNumber(number, idx) {
-      var _props = this.props;
-      var active = _props.active;
-      var radius = _props.radius;
-      var spacing = _props.spacing;
-      var theme = _props.theme;
-      var twoDigits = _props.twoDigits;
-
-      return _react2.default.createElement(
-        'span',
-        {
-          className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
-          style: this.numberStyle(radius - spacing, idx + 1),
-          key: number
-        },
-        twoDigits ? ('0' + number).slice(-2) : number
-      );
-    }
   }, {
     key: 'render',
     value: function render() {
-      var _props2 = this.props;
+      var _props = this.props;
-      var numbers = _props2.numbers;
+      var numbers = _props.numbers;
-      var onTouchStart = _props2.onTouchStart;
+      var onTouchStart = _props.onTouchStart;
-      var onMouseDown = _props2.onMouseDown;
+      var onMouseDown = _props.onMouseDown;
-      var theme = _props2.theme;
+      var theme = _props.theme;
 
       return _react2.default.createElement(
         'div',
@@ -88,7 +93,7 @@ var Face = function (_Component) {
           onMouseDown: onMouseDown,
           style: this.faceStyle()
         },
-        numbers.map(this.renderNumber.bind(this))
+        numbers.map(this.renderNumber)
       );
     }
   }]);

lib/time_picker/TimePickerDialog.js

@@ -56,8 +56,8 @@ var factory = function factory(Dialog) {
         _this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
       }, _this.handleHandMoved = function () {
         if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
-      }, _this.switchDisplay = function (display) {
+      }, _this.switchDisplay = function (event) {
-        _this.setState({ display: display });
+        _this.setState({ display: event.target.id });
       }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -121,7 +121,7 @@ var factory = function factory(Dialog) {
             { className: theme.header },
             _react2.default.createElement(
               'span',
-              { className: theme.hours, onClick: this.switchDisplay.bind(this, 'hours') },
+              { id: 'hours', className: theme.hours, onClick: this.switchDisplay },
               ('0' + this.formatHours()).slice(-2)
             ),
             _react2.default.createElement(
@@ -131,7 +131,7 @@ var factory = function factory(Dialog) {
             ),
             _react2.default.createElement(
               'span',
-              { className: theme.minutes, onClick: this.switchDisplay.bind(this, 'minutes') },
+              { id: 'minutes', className: theme.minutes, onClick: this.switchDisplay },
               ('0' + this.state.displayTime.getMinutes()).slice(-2)
             ),
             this.renderAMPMLabels()