Fix lint

Author: jorrit

.eslintrc.json

@@ -6,6 +6,7 @@
    },
    "rules": {
      "react/jsx-filename-extension": 0,
-     "import/no-extraneous-dependencies": 0
+     "import/no-extraneous-dependencies": 0,
+     "react/jsx-props-no-spreading": 0
    }
 }

demo/src/index.js

@@ -1,4 +1,3 @@
-/* globals document */
 import React from 'react';
 import { render } from 'react-dom';
 
@@ -60,7 +59,7 @@ const rows = [
       </a>),
   },
 ];
-const keyGetter = row => row.name;
+const keyGetter = (row) => row.name;
 
 const Demo = () => (
   <div>
@@ -78,7 +77,7 @@ const Demo = () => (
       withClasses
       tableStyling={({ narrow }) => (narrow ? 'narrowtable' : 'widetable')}
     />
-  </div>);
-
+  </div>
+);
 
 render(<Demo />, document.querySelector('#demo'));

package-lock.json

@@ -13,6 +13,7 @@
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
+    "expect": "^1.20.2",
     "gh-pages": "^3.1.0",
     "match-media-mock": "^0.1.1",
     "nwb": "^0.25.2",

package.json

@@ -38,43 +38,22 @@ const inBrowser = typeof window !== 'undefined';
 const matchMedia = inBrowser && window.matchMedia !== null;
 
 class HyperResponsiveTable extends Component {
-  static propTypes = {
-    headers: objectOfStringOrElement.isRequired,
-    rows: PropTypes.arrayOf(objectOfStringOrElement).isRequired,
-    breakpoint: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]).isRequired,
-    keyGetter: PropTypes.func.isRequired,
-    tableStyling: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-      PropTypes.func,
-    ]),
-    initialNarrow: PropTypes.bool,
-    withClasses: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    initialNarrow: false,
-    withClasses: false,
-    tableStyling: null,
-  };
-
   constructor(props, context) {
     super(props, context);
     this.state = {
       narrow: props.initialNarrow,
     };
   }
 
-  componentWillMount() {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillMount() {
     if (inBrowser) {
       this.updateQuery(this.props);
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.updateQuery(nextProps);
   }
 
@@ -92,7 +71,7 @@ class HyperResponsiveTable extends Component {
     const { breakpoint } = props;
     if (matchMedia) {
       mql = window.matchMedia(typeof breakpoint === 'string' ? breakpoint : `screen and (min-width: ${breakpoint}px)`);
-      mql.addListener(this.handleMatch);
+      mql.addEventListener('change', this.handleMatch);
       narrow = !mql.matches;
     }
 
@@ -132,33 +111,60 @@ class HyperResponsiveTable extends Component {
     if (narrow) {
       return (
         <table {...getClassNameOrStyleProps(tableStyling, this.state)}>
-          {rows.map(row => (
+          {rows.map((row) => (
             <tbody key={keyGetter(row)}>
-              {dataKeys.map(key => (
+              {dataKeys.map((key) => (
                 <tr key={key} {...rowClass(withClasses, keyGetter(row))}>
                   <th {...headerClass(withClasses, key)} scope="row">{headers[key]}</th>
                   <td>{row[key]}</td>
-                </tr>))}
-            </tbody>))
-          }
-        </table>);
+                </tr>
+              ))}
+            </tbody>
+          ))}
+        </table>
+      );
     }
 
     return (
       <table {...getClassNameOrStyleProps(tableStyling, this.state)}>
         <thead>
           <tr>
-            {dataKeys.map(key => <th key={key} {...headerClass(withClasses, key)} scope="col">{headers[key]}</th>)}
+            {dataKeys.map((key) => <th key={key} {...headerClass(withClasses, key)} scope="col">{headers[key]}</th>)}
           </tr>
         </thead>
         <tbody>
-          {rows.map(row => (
+          {rows.map((row) => (
             <tr key={keyGetter(row)} {...rowClass(withClasses, keyGetter(row))}>
-              {dataKeys.map(key => <td key={key}>{row[key]}</td>)}
-            </tr>))}
+              {dataKeys.map((key) => <td key={key}>{row[key]}</td>)}
+            </tr>
+          ))}
         </tbody>
-      </table>);
+      </table>
+    );
   }
 }
 
+HyperResponsiveTable.propTypes = {
+  headers: objectOfStringOrElement.isRequired,
+  rows: PropTypes.arrayOf(objectOfStringOrElement).isRequired,
+  breakpoint: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+  keyGetter: PropTypes.func.isRequired,
+  tableStyling: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  initialNarrow: PropTypes.bool,
+  withClasses: PropTypes.bool,
+};
+
+HyperResponsiveTable.defaultProps = {
+  initialNarrow: false,
+  withClasses: false,
+  tableStyling: null,
+};
+
 export default HyperResponsiveTable;

src/index.js

@@ -22,7 +22,7 @@ const rows = [
     b: 'B 2',
   },
 ];
-const keyGetter = r => r.a;
+const keyGetter = (r) => r.a;
 
 describe('Component', () => {
   let node;
@@ -88,7 +88,7 @@ describe('Component', () => {
   });
 
   it('tableStyling function value should give dynamic class when string is returned', () => {
-    const tableStyling = opts => (opts.narrow ? 'narrow' : 'wide');
+    const tableStyling = (opts) => (opts.narrow ? 'narrow' : 'wide');
     const props = {
       headers,
       rows,
@@ -129,7 +129,7 @@ describe('Component', () => {
 
   it('wide to narrow change should trigger tableStyling function call', (done) => {
     const breakpoint = 1000;
-    const tableStyling = opts => (opts.narrow ? 'narrow' : 'wide');
+    const tableStyling = (opts) => (opts.narrow ? 'narrow' : 'wide');
     const props = {
       headers,
       rows,