Remove some bind usage in render functions and undo passing down Drop…

…down theme to Input
react-toolbox · Aug 6, 2016 · a825208 · dlebedynskyi · Aug 9, 2016 · javivelasco
1 parent 57bb663
commit a825208
Show file tree

Hide file tree

Showing 22 changed files with 168 additions and 144 deletions.
diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
@@ -138,8 +138,8 @@ const factory = (Chip, Input) => {
      }
    };
 
-   handleSuggestionHover = (key) => {
-     this.setState({active: key});
+   handleSuggestionHover = (event) => {
+     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)}
-           onMouseOver={this.handleSuggestionHover.bind(this, key)}
+           onMouseDown={this.select}
+           onMouseOver={this.handleSuggestionHover}
          >
            {value}
          </li>

diff --git a/components/date_picker/Calendar.js b/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 className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
+          <IconButton id='left' className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth} />
+          <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>
       );

diff --git a/components/date_picker/CalendarDay.js b/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>

diff --git a/components/date_picker/CalendarMonth.js b/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}

diff --git a/components/date_picker/DatePickerDialog.js b/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) => {
-      this.setState({ display });
+    handleSwitchDisplay = (event) => {
+      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>

diff --git a/components/dropdown/Dropdown.js b/components/dropdown/Dropdown.js
@@ -130,15 +130,15 @@ const factory = (Input) => {
       );
     }
 
-    renderValue (item, idx) {
+    renderValue = (item, idx) => {
       const { theme } = this.props;
       const className = item.value === this.props.value ? theme.selected : null;
       return (
         <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
           {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>
       );

diff --git a/components/dropdown/theme.scss b/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;

diff --git a/components/tabs/Tab.js b/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>
     );

diff --git a/components/tabs/Tabs.js b/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
         });
       });
     }

diff --git a/components/time_picker/ClockFace.js b/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>
     );
   }

diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
@@ -65,8 +65,8 @@ const factory = (Dialog) => {
       if (this.state.display === 'hours') this.setState({display: 'minutes'});
     };
 
-    switchDisplay = (display) => {
-      this.setState({display});
+    switchDisplay = (event) => {
+      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()}

diff --git a/lib/autocomplete/Autocomplete.js b/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.setState({ active: key });
+      }, _this.handleSuggestionHover = function (event) {
+        _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),
-              onMouseOver: _this3.handleSuggestionHover.bind(_this3, key)
+              onMouseDown: _this3.select,
+              onMouseOver: _this3.handleSuggestionHover
             },
             value
           );