[core] Upgrade eslint

.eslintrc.js

@@ -27,12 +27,13 @@ module.exports = {
     },
   },
   rules: {
-    'linebreak-style': 'off', // Don't play nicely with Windows.
-    'arrow-body-style': 'off', // Not our taste?
+    'linebreak-style': 'off', // Don't play nicely with Windows
+    'arrow-body-style': 'off', // Incompatible with prettier
     'arrow-parens': 'off', // Incompatible with prettier
     'object-curly-newline': 'off', // Incompatible with prettier
     'function-paren-newline': 'off', // Incompatible with prettier
     indent: 'off', // Incompatible with prettier
+    'implicit-arrow-linebreak': 'off', // Incompatible with prettier
     'space-before-function-paren': 'off', // Incompatible with prettier
     'no-confusing-arrow': 'off', // Incompatible with prettier
     'no-mixed-operators': 'off', // Incompatible with prettier
@@ -46,18 +47,15 @@ module.exports = {
       },
     ], // airbnb is allowing some edge cases
     'no-console': 'error', // airbnb is using warn
+    'prefer-destructuring': 'off', // airbnb is using error. destructuring harm grep potential.
     'no-alert': 'error', // airbnb is using warn
-    'no-param-reassign': 'off', // Not our taste?
+    'no-param-reassign': 'off', // airbnb use error
     'no-prototype-builtins': 'off', // airbnb use error
-    'object-curly-spacing': 'off', // use babel plugin rule
-    'no-restricted-properties': 'off', // To remove once react-docgen support ** operator.
-    'prefer-destructuring': 'off', // To remove once react-docgen support ** operator.
+    'operator-linebreak': 'off', // airbnb use error
 
-    'babel/object-curly-spacing': ['error', 'always'],
-
-    'import/unambiguous': 'off', // scripts
-    'import/namespace': ['error', { allowComputed: true }],
+    // It would be better to enable this rule, but it might slow us down.
     'import/no-extraneous-dependencies': 'off',
+    'import/namespace': ['error', { allowComputed: true }],
     'import/order': [
       'error',
       {
@@ -70,6 +68,7 @@ module.exports = {
     'react/jsx-closing-bracket-location': 'off', // Incompatible with prettier
     'react/jsx-wrap-multilines': 'off', // Incompatible with prettier
     'react/jsx-indent-props': 'off', // Incompatible with prettier
+    'react/jsx-one-expression-per-line': 'off', // Incompatible with prettier
     'react/jsx-handler-names': [
       'error',
       {
@@ -78,16 +77,15 @@ module.exports = {
         eventHandlerPropPrefix: 'on',
       },
     ],
-    'react/require-default-props': 'off', // airbnb use error
+    'react/jsx-curly-brace-presence': 'off', // airbnb use error, it's buggy
     'react/forbid-prop-types': 'off', // airbnb use error
+    'react/require-default-props': 'off', // airbnb use error, it's buggy
+    'react/destructuring-assignment': 'off', // airbnb use error
     'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
     'react/no-danger': 'error', // airbnb is using warn
-    'react/no-direct-mutation-state': 'error', // airbnb is disabling this rule
-    'react/no-find-dom-node': 'off', // I don't know
-    'react/no-unused-prop-types': 'off', // Is still buggy
-    'react/sort-prop-types': 'error', // airbnb do nothing here.
-    'react/default-props-match-prop-types': 'off', // Buggy
-    'react/jsx-curly-brace-presence': 'off', // Buggy
+    'react/no-direct-mutation-state': 'error', // airbnb is using off
+    'react/no-find-dom-node': 'off', // airbnb use error
+    'react/sort-prop-types': 'error', // airbnb use off
 
     'material-ui/docgen-ignore-before-comment': 'error',
 

docs/src/modules/components/AppDrawerNavItem.js

@@ -57,7 +57,7 @@ class AppDrawerNavItem extends React.Component {
   }
 
   handleClick = () => {
-    this.setState({ open: !this.state.open });
+    this.setState(state => ({ open: !state.open }));
   };
 
   render() {

docs/src/modules/components/AppSearch.js

@@ -153,6 +153,8 @@ const styles = theme => ({
 });
 
 class AppSearch extends React.Component {
+  input = null;
+
   handleKeyDown = event => {
     if (
       ['/', 's'].indexOf(keycode(event)) !== -1 &&
@@ -164,8 +166,6 @@ class AppSearch extends React.Component {
     }
   };
 
-  input = null;
-
   render() {
     const { classes, width } = this.props;
 

docs/src/modules/components/AppWrapper.js

@@ -30,6 +30,28 @@ function uiThemeSideEffect(uiTheme) {
 class AppWrapper extends React.Component {
   state = {};
 
+  componentDidMount() {
+    uiThemeSideEffect(this.props.uiTheme);
+
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentNode) {
+      jssStyles.parentNode.removeChild(jssStyles);
+    }
+
+    if (
+      'serviceWorker' in navigator &&
+      process.env.NODE_ENV === 'production' &&
+      window.location.host === 'material-ui.com'
+    ) {
+      navigator.serviceWorker.register('/sw.js');
+    }
+  }
+
+  componentDidUpdate() {
+    uiThemeSideEffect(this.props.uiTheme);
+  }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     if (typeof prevState.pageContext === 'undefined') {
       return {
@@ -53,28 +75,6 @@ class AppWrapper extends React.Component {
     return null;
   }
 
-  componentDidMount() {
-    uiThemeSideEffect(this.props.uiTheme);
-
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles && jssStyles.parentNode) {
-      jssStyles.parentNode.removeChild(jssStyles);
-    }
-
-    if (
-      'serviceWorker' in navigator &&
-      process.env.NODE_ENV === 'production' &&
-      window.location.host === 'material-ui.com'
-    ) {
-      navigator.serviceWorker.register('/sw.js');
-    }
-  }
-
-  componentDidUpdate() {
-    uiThemeSideEffect(this.props.uiTheme);
-  }
-
   render() {
     const { children } = this.props;
     const { pageContext } = this.state;
@@ -97,6 +97,7 @@ class AppWrapper extends React.Component {
 
 AppWrapper.propTypes = {
   children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
   pageContext: PropTypes.object,
   uiTheme: PropTypes.object.isRequired,
 };

docs/src/modules/components/Carbon.js

@@ -89,6 +89,8 @@ const styles = theme => ({
 });
 
 class Carbon extends React.Component {
+  timerAdblock = null;
+
   state = {
     adblock: null,
   };
@@ -114,8 +116,6 @@ class Carbon extends React.Component {
     clearTimeout(this.timerAdblock);
   }
 
-  timerAdblock = null;
-
   checkAdblock = (attempt = 1) => {
     if (document.querySelector('#carbonads')) {
       this.setState({

docs/src/modules/components/Demo.js

@@ -133,9 +133,9 @@ class Demo extends React.Component {
   };
 
   handleClickCodeOpen = () => {
-    this.setState({
-      codeOpen: !this.state.codeOpen,
-    });
+    this.setState(state => ({
+      codeOpen: !state.codeOpen,
+    }));
   };
 
   handleClickCodeSandbox = () => {

docs/src/modules/components/GoogleTag.js

@@ -2,6 +2,8 @@ import React from 'react';
 import config from 'docs/src/config';
 
 class GoogleTag extends React.Component {
+  googleTimer = null;
+
   componentDidMount() {
     // Wait for the title to be updated.
     this.googleTimer = setTimeout(() => {
@@ -15,8 +17,6 @@ class GoogleTag extends React.Component {
     clearTimeout(this.googleTimer);
   }
 
-  googleTimer = null;
-
   render() {
     return null;
   }

docs/src/modules/components/Notifications.js

@@ -38,6 +38,8 @@ async function getMessages() {
 }
 
 class Notifications extends React.Component {
+  mounted = false;
+
   state = {
     open: false,
     message: {},
@@ -55,12 +57,6 @@ class Notifications extends React.Component {
     this.handleMessage();
   }
 
-  componentWillUnmout() {
-    this.mounted = false;
-  }
-
-  mounted = false;
-
   handleMessage = () => {
     const lastSeen = getLastSeenNotification();
     const unseenMessages = messages.filter(message => message.id > lastSeen);
@@ -74,6 +70,10 @@ class Notifications extends React.Component {
     document.cookie = `lastSeenNotification=${this.state.message.id};path=/;max-age=31536000`;
   };
 
+  componentWillUnmout() {
+    this.mounted = false;
+  }
+
   render() {
     const { message, open } = this.state;
 

docs/src/modules/components/withRoot.js

@@ -262,6 +262,8 @@ function findActivePage(currentPages, router) {
 
 function withRoot(Component) {
   class WithRoot extends React.Component {
+    redux = null;
+
     constructor(props) {
       super(props);
 
@@ -284,8 +286,6 @@ function withRoot(Component) {
       };
     }
 
-    redux = null;
-
     render() {
       const { pageContext, ...other } = this.props;
 

docs/src/modules/utils/generateMarkdown.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-foreign-prop-types */
+
 import { parse as parseDoctrine } from 'doctrine';
 import recast from 'recast';
 import { pageToTitle } from './helpers';

docs/src/pages/customization/css-in-js/JssRegistry.js

@@ -8,6 +8,8 @@ const sheetsRegistry = new SheetsRegistry();
 const theme = createMuiTheme();
 
 class JssRegistry extends React.Component {
+  timer = null;
+
   state = {
     length: 0,
   };
@@ -24,8 +26,6 @@ class JssRegistry extends React.Component {
     clearTimeout(this.timer);
   }
 
-  timer = null;
-
   update() {
     if (this.state.length !== sheetsRegistry.registry.length) {
       this.setState({

docs/src/pages/demos/autocomplete/IntegrationDownshift.js

@@ -137,10 +137,11 @@ class DownshiftMultiple extends React.Component {
   };
 
   handleDelete = item => () => {
-    const selectedItem = [...this.state.selectedItem];
-    selectedItem.splice(selectedItem.indexOf(item), 1);
-
-    this.setState({ selectedItem });
+    this.setState(state => {
+      const selectedItem = [...state.selectedItem];
+      selectedItem.splice(selectedItem.indexOf(item), 1);
+      return { selectedItem };
+    });
   };
 
   render() {

docs/src/pages/demos/cards/RecipeReviewCard.js

@@ -47,7 +47,7 @@ class RecipeReviewCard extends React.Component {
   state = { expanded: false };
 
   handleExpandClick = () => {
-    this.setState({ expanded: !this.state.expanded });
+    this.setState(state => ({ expanded: !state.expanded }));
   };
 
   render() {

docs/src/pages/demos/chips/ChipsArray.js

@@ -35,10 +35,12 @@ class ChipsArray extends React.Component {
       return;
     }
 
-    const chipData = [...this.state.chipData];
-    const chipToDelete = chipData.indexOf(data);
-    chipData.splice(chipToDelete, 1);
-    this.setState({ chipData });
+    this.setState(state => {
+      const chipData = [...state.chipData];
+      const chipToDelete = chipData.indexOf(data);
+      chipData.splice(chipToDelete, 1);
+      return { chipData };
+    });
   };
 
   render() {