resolve linter errors, and update eslintrc.js file

that1matt · that1matt · commit 02107d91b4e7 · 2018-10-23T14:13:38.000-06:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,12 +30,19 @@ module.exports = {
         peerDependencies: false
       }
     ],
+    'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/label-has-associated-control': [
+      'error', {
+        depth: 3,
+      },
+    ],
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
     'jsx-a11y/no-noninteractive-tabindex': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',
     'no-underscore-dangle': 'off',
     'no-use-before-define': 'off',
+    'react/destructuring-assignment': 'off',
     'react/jsx-filename-extension': 'off',
     'react/jsx-no-bind': 'error',
     'react/no-find-dom-node': 'off',
diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
@@ -46,7 +46,7 @@ const factory = (IconButton) => {
       scrollHide: false,
     };
 
-    state = { hidden: false, height: 0 };
+    state = { hidden: false, height: 0 }; // eslint-disable-line react/no-unused-state
 
     componentDidMount() {
       if (this.props.scrollHide) {
@@ -70,26 +70,27 @@ const factory = (IconButton) => {
       }
     }
 
-    initializeScroll() {
+    handleScroll = () => {
+      const scrollDiff = this.curScroll - window.scrollY;
+      this.setState(state => ({
+        hidden: scrollDiff < 0
+            && window.scrollY !== undefined
+            && window.scrollY > state.height,
+      }));
+      this.curScroll = window.scrollY;
+    };
+
+    initializeScroll = () => {
       window.addEventListener('scroll', this.handleScroll);
       const { height } = this.rootNode.getBoundingClientRect();
       this.curScroll = window.scrollY;
-      this.setState({ height });
+      this.setState({ height }); // eslint-disable-line react/no-unused-state
     }
 
     endScroll() {
       window.removeEventListener('scroll', this.handleScroll);
     }
 
-    handleScroll = () => {
-      const scrollDiff = this.curScroll - window.scrollY;
-      const hidden = scrollDiff < 0
-        && window.scrollY !== undefined
-        && window.scrollY > this.state.height;
-      this.setState({ hidden });
-      this.curScroll = window.scrollY;
-    };
-
     render() {
       const {
         children,
diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js
@@ -56,11 +56,6 @@ const factory = (IconButton) => {
       document.body.removeEventListener('keydown', this.handleKeys);
     }
 
-    scrollToActive() {
-      const offset = (this.yearsNode.offsetHeight / 2) + (this.activeYearNode.offsetHeight / 2);
-      this.yearsNode.scrollTop = this.activeYearNode.offsetTop - offset;
-    }
-
     handleDayClick = (day) => {
       this.props.onChange(time.setDay(this.state.viewDate, day), true);
     };
@@ -96,12 +91,17 @@ const factory = (IconButton) => {
 
     changeViewMonth = (event) => {
       const direction = event.currentTarget.id;
-      this.setState({
+      this.setState(state => ({
         direction,
-        viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction]),
-      });
+        viewDate: time.addMonths(state.viewDate, DIRECTION_STEPS[direction]),
+      }));
     };
 
+    scrollToActive() {
+      const offset = (this.yearsNode.offsetHeight / 2) + (this.activeYearNode.offsetHeight / 2);
+      this.yearsNode.scrollTop = this.activeYearNode.offsetTop - offset;
+    }
+
     renderYears() {
       return (
         <ul
diff --git a/components/date_picker/CalendarDay.js b/components/date_picker/CalendarDay.js
@@ -18,6 +18,12 @@ class Day extends Component {
     viewDate: PropTypes.instanceOf(Date),
   };
 
+  handleClick = () => {
+    if (!this.props.disabled && this.props.onClick) {
+      this.props.onClick(this.props.day);
+    }
+  };
+
   dayStyle() {
     if (this.props.day === 1) {
       const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
@@ -36,12 +42,6 @@ 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(),
diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js
@@ -51,6 +51,17 @@ const factory = (Dialog, Calendar) => {
       date: this.props.value,
     };
 
+    actions = [{
+      label: this.props.cancelLabel,
+      className: this.props.theme.button,
+      onClick: this.props.onDismiss,
+    }, {
+      label: this.props.okLabel,
+      className: this.props.theme.button,
+      name: this.props.name,
+      onClick: this.handleSelect,
+    }];
+
     componentWillMount() {
       this.updateStateDate(this.props.value);
     }
@@ -88,17 +99,6 @@ const factory = (Dialog, Calendar) => {
       }
     };
 
-    actions = [{
-      label: this.props.cancelLabel,
-      className: this.props.theme.button,
-      onClick: this.props.onDismiss,
-    }, {
-      label: this.props.okLabel,
-      className: this.props.theme.button,
-      name: this.props.name,
-      onClick: this.handleSelect,
-    }];
-
     render() {
       const { theme } = this.props;
       const display = `${this.state.display}Display`;
diff --git a/components/hoc/ActivableRenderer.js b/components/hoc/ActivableRenderer.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-const ActivableRendererFactory = (options = { delay: 500 }) => ActivableComponent => class ActivableRenderer extends Component {
+const ActivableRendererFactory = (options = { delay: 500 }) => ActivableComponent => class ActivableRenderer extends Component { // eslint-disable-line max-len
     static propTypes = {
       active: PropTypes.bool.isRequired,
       children: PropTypes.node,
diff --git a/components/input/Input.js b/components/input/Input.js
@@ -113,7 +113,7 @@ const factory = (FontIcon) => {
 
     handleAutoresize = () => {
       const element = this.inputNode;
-      const rows = this.props.rows;
+      const { rows } = this.props;
 
       if (typeof rows === 'number' && !Number.isNaN(rows)) {
         element.style.height = null;
@@ -139,7 +139,7 @@ const factory = (FontIcon) => {
         // replace the selected characters, so the length of value doesn't actually
         // increase.
         const isReplacing = event.target.selectionEnd - event.target.selectionStart;
-        const value = event.target.value;
+        const { value } = event.target;
 
         if (!isReplacing && value.length === maxLength) {
           event.preventDefault();
diff --git a/components/layout/Sidebar.js b/components/layout/Sidebar.js
@@ -41,6 +41,7 @@ const factory = (Drawer) => {
     clipped: PropTypes.bool,
     permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
     pinned: PropTypes.bool,
+    right: PropTypes.bool,
     theme: PropTypes.shape({
       clipped: PropTypes.string,
       pinned: PropTypes.string,
diff --git a/components/list/List.js b/components/list/List.js
@@ -16,6 +16,8 @@ const factory = (ListItem) => {
     static propTypes = {
       children: PropTypes.node,
       className: PropTypes.string,
+      ripple: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
+      selectable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
       theme: PropTypes.shape({
         list: PropTypes.string,
       }),
diff --git a/components/list/ListItemAction.js b/components/list/ListItemAction.js
@@ -8,7 +8,11 @@ const ListItemAction = ({ action, theme }) => {
   const stopRipple = onClick && !onMouseDown;
   const stop = e => e.stopPropagation();
   return (
-    <span className={theme.itemAction} onMouseDown={stopRipple && stop} onClick={onClick && stop}>
+    <span
+      className={theme.itemAction}
+      onMouseDown={stopRipple ? stop : undefined}
+      onClick={onClick && stop}
+    >
       {action}
     </span>
   );
diff --git a/components/menu/IconMenu.js b/components/menu/IconMenu.js
@@ -53,7 +53,7 @@ const factory = (IconButton, Menu) => {
     }
 
     handleButtonClick = (event) => {
-      this.setState({ active: !this.state.active });
+      this.setState(state => ({ active: !state.active }));
       if (this.props.onClick) this.props.onClick(event);
     };
 
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
@@ -170,18 +170,6 @@ const factory = (MenuItem) => {
         : undefined;
     }
 
-    calculatePosition() {
-      const parentNode = ReactDOM.findDOMNode(this).parentNode;
-      if (!parentNode) return undefined;
-      const {
-        top, left, height, width,
-      } = parentNode.getBoundingClientRect();
-      const { height: wh, width: ww } = getViewport();
-      const toTop = top < ((wh / 2) - (height / 2));
-      const toLeft = left < ((ww / 2) - (width / 2));
-      return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
-    }
-
     handleDocumentClick = (event) => {
       if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
         this.setState({ active: false, rippled: false });
@@ -197,6 +185,18 @@ const factory = (MenuItem) => {
       });
     };
 
+    calculatePosition() {
+      const { parentNode } = ReactDOM.findDOMNode(this);
+      if (!parentNode) return undefined;
+      const {
+        top, left, height, width,
+      } = parentNode.getBoundingClientRect();
+      const { height: wh, width: ww } = getViewport();
+      const toTop = top < ((wh / 2) - (height / 2));
+      const toLeft = left < ((ww / 2) - (width / 2));
+      return `${toTop ? 'top' : 'bottom'}${toLeft ? 'Left' : 'Right'}`;
+    }
+
     show() {
       const { width, height } = this.menuNode.getBoundingClientRect();
       this.setState({ active: true, width, height });
diff --git a/components/ripple/Ripple.js b/components/ripple/Ripple.js
@@ -62,6 +62,11 @@ const rippleFactory = (options = {}) => {
         ripples: {},
       };
 
+      /**
+       * Variable to store the ripple references
+       */
+      rippleNodes = {};
+
       componentDidUpdate(prevProps, prevState) {
         // If a new ripple was just added, add a remove event listener to its animation
         if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
@@ -117,10 +122,23 @@ const rippleFactory = (options = {}) => {
         return `ripple${this.currentCount}`;
       }
 
-      /**
-       * Variable to store the ripple references
-       */
-      rippleNodes = {};
+      doRipple = () => (!this.props.disabled && this.props.ripple)
+
+      handleMouseDown = (event) => {
+        if (this.props.onMouseDown) this.props.onMouseDown(event);
+        if (this.doRipple()) {
+          const { x, y } = events.getMousePosition(event);
+          this.animateRipple(x, y, false);
+        }
+      };
+
+      handleTouchStart = (event) => {
+        if (this.props.onTouchStart) this.props.onTouchStart(event);
+        if (this.doRipple()) {
+          const { x, y } = events.getTouchPosition(event);
+          this.animateRipple(x, y, true);
+        }
+      };
 
       /**
        * Determine if a ripple should start depending if its a touch event. For mobile both
@@ -159,15 +177,18 @@ const rippleFactory = (options = {}) => {
             active: false, restarting: true, top, left, width, endRipple,
           };
           const runningState = { active: true, restarting: false };
-          const ripples = { ...this.state.ripples, [key]: initialState };
-          this.setState({ ripples }, () => {
+
+          this.setState(state => ({
+            ripples: { ...state.ripples, [key]: initialState },
+          }), () => {
             if (this.rippleNodes[key]) this.rippleNodes[key].offsetWidth; // eslint-disable-line
-            this.setState({
+
+            this.setState(state => ({
               ripples: {
-                ...this.state.ripples,
-                [key]: Object.assign({}, this.state.ripples[key], runningState),
+                ...state.ripples,
+                [key]: Object.assign({}, state.ripples[key], runningState),
               },
-            });
+            }));
           });
         }
       }
@@ -231,24 +252,6 @@ const rippleFactory = (options = {}) => {
         };
       }
 
-      doRipple = () => (!this.props.disabled && this.props.ripple)
-
-      handleMouseDown = (event) => {
-        if (this.props.onMouseDown) this.props.onMouseDown(event);
-        if (this.doRipple()) {
-          const { x, y } = events.getMousePosition(event);
-          this.animateRipple(x, y, false);
-        }
-      };
-
-      handleTouchStart = (event) => {
-        if (this.props.onTouchStart) this.props.onTouchStart(event);
-        if (this.doRipple()) {
-          const { x, y } = events.getTouchPosition(event);
-          this.animateRipple(x, y, true);
-        }
-      };
-
       renderRipple(key, className, {
         active, left, restarting, top, width,
       }) {
@@ -283,7 +286,7 @@ const rippleFactory = (options = {}) => {
           ...other
         } = this.props;
         const { ripples } = this.state;
-        const childRipples = Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key]));
+        const childRipples = Object.keys(ripples).map(key => this.renderRipple(key, rippleClassName, ripples[key])); // eslint-disable-line max-len
         const childProps = {
           onMouseDown: this.handleMouseDown,
           onTouchStart: this.handleTouchStart,
diff --git a/components/slider/Slider.js b/components/slider/Slider.js
@@ -124,12 +124,6 @@ const factory = (ProgressBar, Input) => {
       };
     }
 
-    addToValue(increment) {
-      let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
-      value = this.trimValue(value + increment);
-      if (value !== this.props.value) this.props.onChange(value);
-    }
-
     handleInputFocus = () => {
       this.setState({
         inputFocused: true,
@@ -205,6 +199,12 @@ const factory = (ProgressBar, Input) => {
       events.pauseEvent(event);
     };
 
+    addToValue(increment) {
+      let value = this.state.inputFocused ? parseFloat(this.state.inputValue) : this.props.value;
+      value = this.trimValue(value + increment);
+      if (value !== this.props.value) this.props.onChange(value);
+    }
+
     end(revents) {
       events.removeEventsFromDocument(revents);
       this.setState({ pressed: false });
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js
diff --git a/components/time_picker/ClockHand.js b/components/time_picker/ClockHand.js
diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js
diff --git a/components/tooltip/Tooltip.js b/components/tooltip/Tooltip.js
