Remove bind expressions

Author: onurkerimov

src/components/Calendar/index.js

@@ -31,18 +31,6 @@ import coreStyles from '../../styles';
 class Calendar extends PureComponent {
   constructor(props, context) {
     super(props, context);
-    this.changeShownDate = this.changeShownDate.bind(this);
-    this.focusToDate = this.focusToDate.bind(this);
-    this.updateShownDate = this.updateShownDate.bind(this);
-    this.handleRangeFocusChange = this.handleRangeFocusChange.bind(this);
-    this.renderDateDisplay = this.renderDateDisplay.bind(this);
-    this.onDragSelectionStart = this.onDragSelectionStart.bind(this);
-    this.onDragSelectionEnd = this.onDragSelectionEnd.bind(this);
-    this.onDragSelectionMove = this.onDragSelectionMove.bind(this);
-    this.renderMonthAndYear = this.renderMonthAndYear.bind(this);
-    this.updatePreview = this.updatePreview.bind(this);
-    this.estimateMonthSize = this.estimateMonthSize.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
     this.dateOptions = { locale: props.locale };
     if (this.props.weekStartsOn !== undefined)
       this.dateOptions.weekStartsOn = this.props.weekStartsOn;
@@ -82,7 +70,7 @@ class Calendar extends PureComponent {
       calendarHeight: longMonthHeight || 300,
     };
   }
-  focusToDate(date, props = this.props, preventUnnecessary = true) {
+  focusToDate = (date, props = this.props, preventUnnecessary = true) => {
     if (!props.scroll.enabled) {
       this.setState({ focusedDate: date });
       return;
@@ -93,8 +81,8 @@ class Calendar extends PureComponent {
     this.isFirstRender = true;
     this.list.scrollTo(targetMonthIndex);
     this.setState({ focusedDate: date });
-  }
-  updateShownDate(props = this.props) {
+  };
+  updateShownDate = (props = this.props) => {
     const newProps = props.scroll.enabled
       ? {
           ...props,
@@ -103,8 +91,8 @@ class Calendar extends PureComponent {
       : props;
     const newFocus = calcFocusDate(this.state.focusedDate, newProps);
     this.focusToDate(newFocus, newProps);
-  }
-  updatePreview(val) {
+  };
+  updatePreview = val => {
     if (!val) {
       this.setState({ preview: null });
       return;
@@ -115,7 +103,7 @@ class Calendar extends PureComponent {
       color: this.props.color,
     };
     this.setState({ preview });
-  }
+  };
   componentDidMount() {
     if (this.props.scroll.enabled) {
       // prevent react-list's initial render focus problem
@@ -150,7 +138,7 @@ class Calendar extends PureComponent {
     }
   }
 
-  changeShownDate(value, mode = 'set') {
+  changeShownDate = (value, mode = 'set') => {
     const { focusedDate } = this.state;
     const { onShownDateChange, minDate, maxDate } = this.props;
     const modeMapper = {
@@ -163,11 +151,11 @@ class Calendar extends PureComponent {
     const newDate = min([max([modeMapper[mode](), minDate]), maxDate]);
     this.focusToDate(newDate, this.props, false);
     onShownDateChange && onShownDateChange(newDate);
-  }
-  handleRangeFocusChange(rangesIndex, rangeItemIndex) {
+  };
+  handleRangeFocusChange = (rangesIndex, rangeItemIndex) => {
     this.props.onRangeFocusChange && this.props.onRangeFocusChange([rangesIndex, rangeItemIndex]);
-  }
-  handleScroll() {
+  };
+  handleScroll = () => {
     const { onShownDateChange, minDate } = this.props;
     const { focusedDate } = this.state;
     const { isFirstRender } = this;
@@ -182,8 +170,8 @@ class Calendar extends PureComponent {
       onShownDateChange && onShownDateChange(visibleMonth);
     }
     this.isFirstRender = false;
-  }
-  renderMonthAndYear(focusedDate, changeShownDate, props) {
+  };
+  renderMonthAndYear = (focusedDate, changeShownDate, props) => {
     const { showMonthArrow, minDate, maxDate, showMonthAndYearPickers } = props;
     const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
     const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
@@ -244,7 +232,7 @@ class Calendar extends PureComponent {
         ) : null}
       </div>
     );
-  }
+  };
   renderWeekdays() {
     const now = new Date();
     return (
@@ -260,7 +248,7 @@ class Calendar extends PureComponent {
       </div>
     );
   }
-  renderDateDisplay() {
+  renderDateDisplay = () => {
     const {
       focusedRange,
       color,
@@ -316,8 +304,8 @@ class Calendar extends PureComponent {
         })}
       </div>
     );
-  }
-  onDragSelectionStart(date) {
+  };
+  onDragSelectionStart = date => {
     const { onChange, dragSelectionEnabled } = this.props;
 
     if (dragSelectionEnabled) {
@@ -331,9 +319,9 @@ class Calendar extends PureComponent {
     } else {
       onChange && onChange(date);
     }
-  }
+  };
 
-  onDragSelectionEnd(date) {
+  onDragSelectionEnd = date => {
     const { updateRange, displayMode, onChange, dragSelectionEnabled } = this.props;
 
     if (!dragSelectionEnabled) return;
@@ -353,8 +341,8 @@ class Calendar extends PureComponent {
         updateRange && updateRange(newRange);
       });
     }
-  }
-  onDragSelectionMove(date) {
+  };
+  onDragSelectionMove = date => {
     const { drag } = this.state;
     if (!drag.status || !this.props.dragSelectionEnabled) return;
     this.setState({
@@ -364,9 +352,9 @@ class Calendar extends PureComponent {
         disablePreview: true,
       },
     });
-  }
+  };
 
-  estimateMonthSize(index, cache) {
+  estimateMonthSize = (index, cache) => {
     const { direction, minDate } = this.props;
     const { scrollArea } = this.state;
     if (cache) {
@@ -378,7 +366,7 @@ class Calendar extends PureComponent {
     const { start, end } = getMonthDisplayRange(monthStep, this.dateOptions);
     const isLongMonth = differenceInDays(end, start, this.dateOptions) + 1 > 7 * 5;
     return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight;
-  }
+  };
   render() {
     const {
       showDateDisplay,

src/components/DateInput/index.js

@@ -7,10 +7,6 @@ class DateInput extends PureComponent {
   constructor(props, context) {
     super(props, context);
 
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-
     this.state = {
       invalid: false,
       changed: false,
@@ -50,22 +46,22 @@ class DateInput extends PureComponent {
     }
   }
 
-  onKeyDown(e) {
+  onKeyDown = e => {
     const { value } = this.state;
 
     if (e.key === 'Enter') {
       this.update(value);
     }
-  }
+  };
 
-  onChange(e) {
+  onChange = e => {
     this.setState({ value: e.target.value, changed: true, invalid: false });
-  }
+  };
 
-  onBlur() {
+  onBlur = () => {
     const { value } = this.state;
     this.update(value);
-  }
+  };
 
   render() {
     const { className, readOnly, placeholder, disabled, onFocus } = this.props;

src/components/DateRange/index.js

@@ -10,17 +10,13 @@ import coreStyles from '../../styles';
 class DateRange extends Component {
   constructor(props, context) {
     super(props, context);
-    this.setSelection = this.setSelection.bind(this);
-    this.handleRangeFocusChange = this.handleRangeFocusChange.bind(this);
-    this.updatePreview = this.updatePreview.bind(this);
-    this.calcNewSelection = this.calcNewSelection.bind(this);
     this.state = {
       focusedRange: props.initialFocusedRange || [findNextRangeIndex(props.ranges), 0],
       preview: null,
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
-  calcNewSelection(value, isSingleValue = true) {
+  calcNewSelection = (value, isSingleValue = true) => {
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const { ranges, onChange, maxDate, moveRangeOnFirstSelection, disabledDates } = this.props;
     const focusedRangeIndex = focusedRange[0];
@@ -75,8 +71,8 @@ class DateRange extends Component {
       range: { startDate, endDate },
       nextFocusRange: nextFocusRange,
     };
-  }
-  setSelection(value, isSingleValue) {
+  };
+  setSelection = (value, isSingleValue) => {
     const { onChange, ranges, onRangeFocusChange } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const focusedRangeIndex = focusedRange[0];
@@ -94,12 +90,12 @@ class DateRange extends Component {
       preview: null,
     });
     onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange);
-  }
-  handleRangeFocusChange(focusedRange) {
+  };
+  handleRangeFocusChange = focusedRange => {
     this.setState({ focusedRange });
     this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange);
-  }
-  updatePreview(val) {
+  };
+  updatePreview = val => {
     if (!val) {
       this.setState({ preview: null });
       return;
@@ -108,7 +104,7 @@ class DateRange extends Component {
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
     this.setState({ preview: { ...val.range, color } });
-  }
+  };
   render() {
     return (
       <Calendar

src/components/DayCell/index.js

@@ -12,21 +12,16 @@ class DayCell extends Component {
       hover: false,
       active: false,
     };
-    this.getClassNames = this.getClassNames.bind(this);
-    this.handleMouseEvent = this.handleMouseEvent.bind(this);
-    this.handleKeyEvent = this.handleKeyEvent.bind(this);
-    this.renderSelectionPlaceholders = this.renderSelectionPlaceholders.bind(this);
-    this.renderPreviewPlaceholder = this.renderPreviewPlaceholder.bind(this);
   }
 
-  handleKeyEvent(event) {
+  handleKeyEvent = event => {
     const { day, onMouseDown, onMouseUp } = this.props;
     if ([13 /* space */, 32 /* enter */].includes(event.keyCode)) {
       if (event.type === 'keydown') onMouseDown(day);
       else onMouseUp(day);
     }
-  }
-  handleMouseEvent(event) {
+  };
+  handleMouseEvent = event => {
     const { day, disabled, onPreviewChange, onMouseEnter, onMouseDown, onMouseUp } = this.props;
     const stateChanges = {};
     if (disabled) {
@@ -60,8 +55,8 @@ class DayCell extends Component {
     if (Object.keys(stateChanges).length) {
       this.setState(stateChanges);
     }
-  }
-  getClassNames() {
+  };
+  getClassNames = () => {
     const {
       isPassive,
       isToday,
@@ -86,8 +81,8 @@ class DayCell extends Component {
       [styles.dayHovered]: this.state.hover,
       [styles.dayActive]: this.state.active,
     });
-  }
-  renderPreviewPlaceholder() {
+  };
+  renderPreviewPlaceholder = () => {
     const { preview, day, styles } = this.props;
     if (!preview) return null;
     const startDate = preview.startDate ? endOfDay(preview.startDate) : null;
@@ -106,8 +101,8 @@ class DayCell extends Component {
         style={{ color: preview.color }}
       />
     );
-  }
-  renderSelectionPlaceholders() {
+  };
+  renderSelectionPlaceholders = () => {
     const { styles, ranges, day } = this.props;
     if (this.props.displayMode === 'date') {
       let isSelected = isSameDay(this.props.day, this.props.date);
@@ -153,7 +148,7 @@ class DayCell extends Component {
         style={{ color: range.color || this.props.color }}
       />
     ));
-  }
+  };
   render() {
     const { styles } = this.props;
     return (
@@ -201,6 +196,7 @@ DayCell.propTypes = {
   preview: PropTypes.shape({
     startDate: PropTypes.object,
     endDate: PropTypes.object,
+    color: PropTypes.string,
   }),
   onPreviewChange: PropTypes.func,
   previewColor: PropTypes.string,

src/components/DefinedRange/index.js

@@ -13,17 +13,16 @@ class DefinedRange extends Component {
       rangeOffset: 0,
       focusedInput: -1,
     };
-    this.handleRangeChange = this.handleRangeChange.bind(this);
   }
 
-  handleRangeChange(range) {
+  handleRangeChange = range => {
     const { onChange, ranges, focusedRange } = this.props;
     const selectedRange = ranges[focusedRange[0]];
     if (!onChange || !selectedRange) return;
     onChange({
       [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range },
     });
-  }
+  };
 
   getRangeOptionValue(option) {
     const { ranges = [], focusedRange = [] } = this.props;

src/components/InputRangeField/index.js

@@ -7,8 +7,6 @@ const MAX = 99999;
 class InputRangeField extends Component {
   constructor(props, context) {
     super(props, context);
-
-    this.onChange = this.onChange.bind(this);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -21,14 +19,14 @@ class InputRangeField extends Component {
     );
   }
 
-  onChange(e) {
+  onChange = e => {
     const { onChange } = this.props;
 
     let value = parseInt(e.target.value, 10);
     value = isNaN(value) ? 0 : Math.max(Math.min(MAX, value), MIN);
 
     onChange(value);
-  }
+  };
 
   render() {
     const { label, placeholder, value, styles, onBlur, onFocus } = this.props;