Format code per stricter linting rules

.eslintrc.json

@@ -13,6 +13,7 @@
     "comma-dangle": 0,
     "import/first": 0,
     "import/no-extraneous-dependencies": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "no-restricted-properties": 0,

src/AppBar/AppBar.js

@@ -6,7 +6,15 @@ import Styles from './AppBar.css';
 import Typography from '../Typography';
 import Variables from '../variables';
 
-function AppBar({backgroundColor, className, elevation, children, primary, secondary, ...other}) {
+function AppBar({
+  backgroundColor,
+  className,
+  elevation,
+  children,
+  primary,
+  secondary,
+  ...other
+}) {
   return (
     <Paper
       {...other}

src/Button/Button.js

@@ -123,8 +123,10 @@ class Button extends React.Component {
   };
 
   render() {
-    const {buttonColor, children, className, component,
-      focusRippleDisabled, icon, fab, style, textColor, ...other} = this.props;
+    const {
+      buttonColor, children, className, component,
+      focusRippleDisabled, icon, fab, style, textColor, ...other
+    } = this.props;
     const Component = component;
     const readableTextColor = this.readableTextColor();
     return (

src/Button/Button.spec.js

@@ -42,7 +42,7 @@ describe('Button', () => {
   });
 
   it('should set mouseFocused to true onMouseDown', () => {
-    const wrapper = mount(<Button label={'Label'} />);
+    const wrapper = mount(<Button label="Label" />);
     wrapper.simulate('mousedown', fakeEventProps);
     assert(wrapper.state('mouseFocused'));
   });

src/Collapse/Collapse.js

@@ -31,8 +31,13 @@ class Collapse extends React.Component {
     }
   }
 
+  registerRoot = (c) => { this.root = c; }
+  registerInner = (c) => { this.rootInner = c; }
+
   render() {
-    const {open, children, className, ...other} = this.props;
+    const {
+      open, children, className, ...other
+    } = this.props;
     return (
       <div
         {...other}
@@ -41,10 +46,10 @@ class Collapse extends React.Component {
           height: this.state.height,
           overflow: this.state.overflow
         }}
-        ref={c => (this.root = c)}
+        ref={this.registerRoot}
       >
         <div
-          ref={c => (this.rootInner = c)}
+          ref={this.registerInner}
         >
           {children}
         </div>

src/Collapse/Collapse.spec.js

@@ -44,11 +44,7 @@ describe('Collapse', () => {
   });
 
   it('should not animate on initial render if open is set to true', (done) => {
-    const wrapper = mount(
-      <Collapse open>
-        {longDiv}
-      </Collapse>,
-    );
+    const wrapper = mount(<Collapse open>{longDiv}</Collapse>);
     const initialHeight = wrapper.getDOMNode().style.height;
     assert(parseInt(initialHeight, 10) > '0');
     setTimeout(() => {
@@ -59,11 +55,7 @@ describe('Collapse', () => {
   });
 
   it('should animate when open changes from false to true', (done) => {
-    const wrapper = mount(
-      <Collapse open={false}>
-        {longDiv}
-      </Collapse>
-    );
+    const wrapper = mount(<Collapse open={false}>{longDiv}</Collapse>);
     const initialHeight = wrapper.getDOMNode().style.height;
     wrapper.setProps({open: true});
     setTimeout(() => {
@@ -74,11 +66,7 @@ describe('Collapse', () => {
   });
 
   it('should animate when open changes from true to false', (done) => {
-    const wrapper = mount(
-      <Collapse open>
-        {longDiv}
-      </Collapse>
-    );
+    const wrapper = mount(<Collapse open>{longDiv}</Collapse>);
     const initialHeight = wrapper.getDOMNode().style.height;
     setTimeout(() => {
       wrapper.setProps({open: false});

src/Dialog/Dialog.js

@@ -9,10 +9,12 @@ function FirstChild(props) {
 }
 
 class Dialog extends React.Component { // eslint-disable-line prefer-stateless-function
+  register = (c) => { this.inner = c; }
+
   render() {
     return (
       <TransitionGroup component={FirstChild}>
-        {this.props.open && <DialogInner {...this.props} ref={c => (this.inner = c)} />}
+        {this.props.open && <DialogInner {...this.props} ref={this.register} />}
       </TransitionGroup>
     );
   }

src/Dialog/Dialog.spec.js

@@ -44,20 +44,18 @@ describe('Dialog', () => {
   });
 
   it('should mount in an open state, then close', createTest(() => {
-    const wrapper = mount(
-      <Dialog
-        open
-        title="Title"
-        description="Description"
-        onClose={() => {
+    const wrapper = mount(<Dialog
+      open
+      title="Title"
+      description="Description"
+      onClose={() => {
           wrapper.setProps({open: false});
         }}
-        actions={[
-          <Button key={'one'}>Foo</Button>,
-          <Button key={'two'}>Bar</Button>
+      actions={[
+        <Button key="one">Foo</Button>,
+        <Button key="two">Bar</Button>
         ]}
-      />
-    );
+    />);
     assert(wrapper.find(`.${Styles.root}`).length === 1);
     setTimeout(() => {
       wrapper.find(`.${Styles.root}`).simulate('keydown', {keyCode: keycode('esc')});
@@ -69,20 +67,18 @@ describe('Dialog', () => {
 
 
   it('should focus the first action on tab key press when last button has current focus', createTest(() => {
-    const wrapper = mount(
-      <Dialog
-        open
-        title="Title"
-        description="Description"
-        onClose={() => {
+    const wrapper = mount(<Dialog
+      open
+      title="Title"
+      description="Description"
+      onClose={() => {
           wrapper.setProps({open: false});
         }}
-        actions={[
-          <Button key={'one'}>Foo</Button>,
-          <Button key={'two'}>Bar</Button>
+      actions={[
+        <Button key="one">Foo</Button>,
+        <Button key="two">Bar</Button>
         ]}
-      />
-    );
+    />);
     wrapper.find('button').last().instance().focus();
 
     setTimeout(() => {
@@ -95,17 +91,15 @@ describe('Dialog', () => {
   }));
 
   it('should focus the last action on shift+tab key press when first action has current focus', createTest(() => {
-    const wrapper = mount(
-      <Dialog
-        open
-        title="Title"
-        description="Description"
-        actions={[
-          <Button key={'one'}>Foo</Button>,
-          <Button key={'two'}>Bar</Button>
+    const wrapper = mount(<Dialog
+      open
+      title="Title"
+      description="Description"
+      actions={[
+        <Button key="one">Foo</Button>,
+        <Button key="two">Bar</Button>
         ]}
-      />
-    );
+    />);
     wrapper.find('button').first().instance().focus();
 
     setTimeout(() => {

src/Dialog/DialogInner.js

@@ -77,13 +77,18 @@ class DialogInner extends React.Component {
     }, 350);
   }
 
+  registerRoot = (c) => { this.root = c; }
+  registerActions = (c) => { this.actions = c; }
+
   render() {
-    const {actions, className, description, onClose, open, title, ...other} = this.props;
+    const {
+      actions, className, description, onClose, open, title, ...other
+    } = this.props;
     return (
       <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
         {...other}
         className={makeClass(Styles.root, {[Styles.open]: open}, className)}
-        ref={c => (this.root = c)}
+        ref={this.registerRoot}
         role="document"
         tabIndex={-1}
         onKeyDown={__TEST__ ? this.onKeyDown : ontouchmove}
@@ -104,7 +109,7 @@ class DialogInner extends React.Component {
           </div>
           <div
             className={Styles.actions}
-            ref={c => (this.actions = c)}
+            ref={this.registerActions}
           >
             {actions}
           </div>

src/Grid/Grid.js

@@ -5,7 +5,9 @@ import Styles from './Grid.css';
 
 class Grid extends React.Component {
   render() {
-    const {children, className, margin, gutter, ...other} = this.props;
+    const {
+      children, className, margin, gutter, ...other
+    } = this.props;
 
     const rootClasses = makeClass(
       Styles.root,

src/Grid/Grid.spec.js

@@ -19,26 +19,27 @@ describe('Grid', () => {
   });
 
   it('should render a Grid', createTest(() => {
-    const wrapper = mount(
+    const component = (
       <Grid margin={40} gutter={8}>
         {[1, 2, 3, 4, 5, 6, 7, 8].map(item => (
           <GridItem xs={12} sm={6} md={4} lg={3} key={item}>
             <div
               style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100px',
-                backgroundColor: variables.$black54,
-                color: variables.$white
-              }}
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100px',
+              backgroundColor: variables.$black54,
+              color: variables.$white
+            }}
             >
               xs=12, sm=6, md=4, lg=3
             </div>
           </GridItem>
         ))}
       </Grid>
     );
+    const wrapper = mount(component);
     assert(wrapper);
   }));
 });

src/Grid/GridItem.js

@@ -6,7 +6,9 @@ import Styles from './GridItem.css';
 
 class GridItem extends React.Component {
   render() {
-    const {children, className, xs, sm, md, lg, ...other} = this.props;
+    const {
+      children, className, xs, sm, md, lg, ...other
+    } = this.props;
     const classes = makeClass(
       Styles.root,
       GridStyles.gutterChild,

src/Grid/GridItem.spec.js

@@ -18,7 +18,7 @@ describe('GridItem', () => {
   });
 
   it('should render a GridItem', createTest(() => {
-    const wrapper = mount(
+    const component = (
       <GridItem xs={12}>
         <div
           style={{
@@ -34,6 +34,7 @@ describe('GridItem', () => {
         </div>
       </GridItem>
     );
+    const wrapper = mount(component);
     assert(wrapper);
   }));
 });

src/List/List.js

@@ -24,10 +24,14 @@ class List extends React.Component {
     this.props.onKeyDown(e, ...args);
   }
 
+  registerRoot = (c) => { this.root = c; }
+
   render() {
-    const {arrowNavigation, children, className, onKeyDown, ...other} = this.props;
+    const {
+      arrowNavigation, children, className, onKeyDown, ...other
+    } = this.props;
     return (
-      <div {...other} className={makeClass(Styles.root, className)} ref={c => (this.root = c)}>
+      <div {...other} className={makeClass(Styles.root, className)} ref={this.registerRoot}>
         {React.Children.map(children, (child) => {
           const props = {
             buttonProps: deepAssign({focusRippleDisabled: true}, child.props.buttonProps)

src/List/List.spec.js

@@ -34,8 +34,8 @@ describe('List', () => {
   it('should support arrow key navigation with arrowNavigation prop', createTest(() => {
     const component = (
       <List arrowNavigation>
-        <ListItem id="first" primary={'First List Item'} />
-        <ListItem id="second" primary={'Second List Item'} />
+        <ListItem id="first" primary="First List Item" />
+        <ListItem id="second" primary="Second List Item" />
       </List>
     );
     const wrapper = mount(component);

src/List/ListItem.js

@@ -6,14 +6,18 @@ import Styles from './ListItem.css';
 import Typography from '../Typography';
 
 class ListItem extends React.Component {
+  registerButton = (c) => { this.Button = c; }
+
   render() {
-    const {action, buttonProps, avatar, className, primary, secondary, ...other} = this.props;
+    const {
+      action, buttonProps, avatar, className, primary, secondary, ...other
+    } = this.props;
     return (
       <div {...other} className={makeClass(Styles.root, className)}>
         <Button
           {...buttonProps}
           className={Styles.button}
-          ref={c => (this.Button = c)}
+          ref={this.registerButton}
         >
           {avatar && (
             <div className={Styles.avatar}>