[eslint] Enforce new react rules

.eslintrc

@@ -66,11 +66,13 @@ rules:
   # React
   react/display-name: [2, {acceptTranspilerName: true}]
   react/jsx-boolean-value: [2, always]
+  react/jsx-closing-bracket-location: 2
   react/jsx-curly-spacing: 2
   react/jsx-indent-props: [2, 2]
-  react/jsx-max-props-per-line: [2, {maximum: 4}]
+  react/jsx-max-props-per-line: [2, {maximum: 3}]
   react/jsx-no-duplicate-props: 2
   react/jsx-no-undef: 2
+  react/jsx-pascal-case: 2
   react/jsx-sort-prop-types: 2
   react/jsx-uses-react: 2
   react/jsx-uses-vars: 2
@@ -91,7 +93,6 @@ rules:
   # React Disabled
   react/jsx-no-bind: 0
   react/jsx-no-literals: 0
-  react/jsx-closing-bracket-location: 0
   react/jsx-sort-props: 0
   react/no-set-state: 0
 

docs/src/app/components/component-doc.jsx

@@ -100,7 +100,8 @@ const ComponentDoc = React.createClass({
           key={i}
           name={info.name}
           style={infoStyle}
-          infoArray={info.infoArray} />
+          infoArray={info.infoArray}
+        />
       );
     }, this);
 

docs/src/app/components/full-width-section.jsx

@@ -70,12 +70,14 @@ const FullWidthSection = React.createClass({
     }
 
     return (
-      <ClearFix {...other}
+      <ClearFix
+        {...other}
         style={this.mergeStyles(
           styles.root,
           style,
           this.isDeviceSize(StyleResizable.statics.Sizes.SMALL) && styles.rootWhenSmall,
-          this.isDeviceSize(StyleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)}>
+          this.isDeviceSize(StyleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)}
+      >
         {content}
       </ClearFix>
     );

docs/src/app/components/master.jsx

@@ -207,8 +207,10 @@ const Master = React.createClass({
               Call-Em-All
             </a>
             {' and our awesome '}
-            <a style={this.prepareStyles(styles.a)}
-              href="https://github.com/callemall/material-ui/graphs/contributors">
+            <a
+              style={this.prepareStyles(styles.a)}
+              href="https://github.com/callemall/material-ui/graphs/contributors"
+            >
               contributors
             </a>.
           </p>

docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx

@@ -12,7 +12,8 @@ const CardExampleWithAvatar = () => (
     <CardHeader
       title="URL Avatar"
       subtitle="Subtitle"
-      avatar="http://lorempixel.com/100/100/nature/" />
+      avatar="http://lorempixel.com/100/100/nature/"
+    />
     <CardMedia
       overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
     >

docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx

@@ -11,7 +11,8 @@ const CardExampleWithoutAvatar = () => (
       title="Without Avatar"
       subtitle="Subtitle"
       actAsExpander={true}
-      showExpandableButton={true} />
+      showExpandableButton={true}
+    />
     <CardText expandable={true}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

docs/src/app/components/pages/components/DatePicker/ExampleInline.jsx

@@ -5,11 +5,13 @@ const DatePickerExampleInline = () => (
   <div>
     <DatePicker
       hintText="Inline"
-      container="inline" />
+      container="inline"
+    />
     <DatePicker
       hintText="Inline (AutoOk)"
       container="inline"
-      autoOk={true} />
+      autoOk={true}
+    />
   </div>
 );
 

docs/src/app/components/pages/components/DatePicker/ExampleInternational.jsx

@@ -8,7 +8,8 @@ const DatePickerExampleInternational = () => (
     // Intl is supported by most modern browsers, see http://caniuse.com/#search=intl
     // for browsers that don't support it use this polyfill https://github.com/andyearnshaw/Intl.js
     wordings={{ok: 'OK', cancel: 'Annuler'}}
-    locale="fr" />
+    locale="fr"
+  />
 );
 
 export default DatePickerExampleInternational;

docs/src/app/components/pages/components/DatePicker/ExampleSimple.jsx

@@ -3,11 +3,11 @@ import DatePicker from 'material-ui/lib/date-picker/date-picker';
 
 const DatePickerExampleSimple = () => (
   <div>
-    <DatePicker
-      hintText="Portrait Dialog" />
+    <DatePicker hintText="Portrait Dialog" />
     <DatePicker
       hintText="Landscape Dialog"
-      mode="landscape" />
+      mode="landscape"
+    />
   </div>
 );
 

docs/src/app/components/pages/components/DatePicker/ExampleToggle.jsx

@@ -49,39 +49,38 @@ export default class DatePickerExampleToggle extends React.Component {
   render() {
     return (
       <div>
-
         <DatePicker
           hintText="Ranged Date Picker"
           autoOk={this.state.autoOk}
           minDate={this.state.minDate}
           maxDate={this.state.maxDate}
-          disableYearSelection={this.state.disableYearSelection} />
-
-
+          disableYearSelection={this.state.disableYearSelection}
+        />
         <div style={optionsStyle}>
           <TextField
             floatingLabelText="Min Date"
             defaultValue={this.state.minDate.toDateString()}
-            onChange={this.handleChangeMinDate} />
-
+            onChange={this.handleChangeMinDate}
+          />
           <TextField
             floatingLabelText="Max Date"
             defaultValue={this.state.maxDate.toDateString()}
-            onChange={this.handleChangeMaxDate} />
-
+            onChange={this.handleChangeMaxDate}
+          />
           <Toggle
             name="autoOk"
             value="autoOk"
             label="Auto Accept"
             defaultToggled={this.state.autoOk}
-            onToggle={this.handleToggle} />
-
+            onToggle={this.handleToggle}
+          />
           <Toggle
             name="disableYearSelection"
             value="disableYearSelection"
             label="Disable Year Selection"
             defaultToggled={this.state.disableYearSelection}
-            onToggle={this.handleToggle} />
+            onToggle={this.handleToggle}
+          />
         </div>
       </div>
     );

docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.jsx

@@ -29,11 +29,13 @@ export default class DialogExampleCustomWidth extends React.Component {
       <FlatButton
         label="Cancel"
         secondary={true}
-        onTouchTap={this.handleClose} />,
+        onTouchTap={this.handleClose}
+      />,
       <FlatButton
         label="Submit"
         primary={true}
-        onTouchTap={this.handleClose} />,
+        onTouchTap={this.handleClose}
+      />,
     ];
 
     return (

docs/src/app/components/pages/components/Dialog/ExampleModal.jsx

@@ -24,12 +24,14 @@ export default class DialogExampleModal extends React.Component {
       <FlatButton
         label="Cancel"
         secondary={true}
-        onTouchTap={this.handleClose} />,
+        onTouchTap={this.handleClose}
+      />,
       <FlatButton
         label="Submit"
         primary={true}
         disabled={true}
-        onTouchTap={this.handleClose} />,
+        onTouchTap={this.handleClose}
+      />,
     ];
 
     return (
@@ -39,7 +41,8 @@ export default class DialogExampleModal extends React.Component {
           title="Dialog With Actions"
           actions={actions}
           modal={true}
-          open={this.state.open}>
+          open={this.state.open}
+        >
           Only actions can close this dialog.
         </Dialog>
       </div>

docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx

@@ -24,12 +24,14 @@ export default class DialogExampleSimple extends React.Component {
       <FlatButton
         label="Cancel"
         secondary={true}
-        onTouchTap={this.handleClose} />,
+        onTouchTap={this.handleClose}
+      />,
       <FlatButton
         label="Submit"
         primary={true}
         keyboardFocused={true}
-        onTouchTap={this.handleClose} />,
+        onTouchTap={this.handleClose}
+      />,
     ];
 
     return (
@@ -40,7 +42,8 @@ export default class DialogExampleSimple extends React.Component {
           actions={actions}
           modal={false}
           open={this.state.open}
-          onRequestClose={this.handleClose}>
+          onRequestClose={this.handleClose}
+        >
           The actions in this window were passed in as an array of React objects.
         </Dialog>
       </div>

docs/src/app/components/pages/components/FontIcon/ExampleSimple.jsx

@@ -10,16 +10,19 @@ const FontIconExampleSimple = () => (
   <div>
     <FontIcon
       className="muidocs-icon-action-home"
-      style={iconStyles} />
+      style={iconStyles}
+    />
     <FontIcon
       className="muidocs-icon-action-home"
       style={iconStyles}
-      color={Colors.blue500} />
+      color={Colors.blue500}
+    />
     <FontIcon
       className="muidocs-icon-action-home"
       style={iconStyles}
       color={Colors.red500}
-      hoverColor={Colors.greenA200} />
+      hoverColor={Colors.greenA200}
+    />
   </div>
 );
 

docs/src/app/components/pages/components/GridList/ExampleComplex.jsx

@@ -4,6 +4,20 @@ import GridTile from 'material-ui/lib/grid-list/grid-tile';
 import StarBorder from 'material-ui/lib/svg-icons/toggle/star-border';
 import IconButton from 'material-ui/lib/icon-button';
 
+const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+  },
+  gridList: {
+    width: 500,
+    height: 400,
+    overflowY: 'auto',
+    marginBottom: 24,
+  },
+};
+
 const tilesData = [
   {
     img: 'images/grid-list/00-52-29-429_640.jpg',
@@ -49,29 +63,28 @@ const tilesData = [
   },
 ];
 
-const gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)';
-const tileElements = tilesData.map(tile => <GridTile
-  key={tile.img}
-  title={tile.title}
-  actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-  actionPosition="left"
-  titlePosition="top"
-  titleBackground={gradientBg}
-  cols={tile.featured ? 2 : 1}
-  rows={tile.featured ? 2 : 1}
-  ><img src={tile.img} /></GridTile>);
-const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24};
-
 const GridListExampleComplex = () => (
-  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
-    {/*Grid list with all possible overrides*/}
+  <div style={styles.root}>
     <GridList
       cols={2}
       cellHeight={200}
       padding={1}
-      style={gridListStyle}
-      >
-      {tileElements}
+      style={styles.gridList}
+    >
+      {tilesData.map(tile => (
+        <GridTile
+          key={tile.img}
+          title={tile.title}
+          actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+          actionPosition="left"
+          titlePosition="top"
+          titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
+          cols={tile.featured ? 2 : 1}
+          rows={tile.featured ? 2 : 1}
+        >
+          <img src={tile.img} />
+        </GridTile>
+      ))}
     </GridList>
   </div>
 );

docs/src/app/components/pages/components/GridList/ExampleSimple.jsx

@@ -4,6 +4,20 @@ import GridTile from 'material-ui/lib/grid-list/grid-tile';
 import StarBorder from 'material-ui/svg-icons/toggle/star-border';
 import IconButton from 'material-ui/lib/icon-button';
 
+const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+  },
+  gridList: {
+    width: 500,
+    height: 400,
+    overflowY: 'auto',
+    marginBottom: 24,
+  },
+};
+
 const tilesData = [
   {
     img: 'images/grid-list/00-52-29-429_640.jpg',
@@ -47,22 +61,23 @@ const tilesData = [
   },
 ];
 
-const tileElements = tilesData.map(tile => <GridTile
-  key={tile.img}
-  title={tile.title}
-  subtitle={<span>by <b>{tile.author}</b></span>}
-  actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-  ><img src={tile.img} /></GridTile>);
-const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24};
 
 const GridListExampleSimple = () => (
-  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
-    {/* Basic grid list with mostly default options */}
+  <div style={styles.root}>
     <GridList
       cellHeight={200}
-      style={gridListStyle}
-      >
-      {tileElements}
+      style={styles.gridList}
+    >
+      {tilesData.map(tile => (
+        <GridTile
+          key={tile.img}
+          title={tile.title}
+          subtitle={<span>by <b>{tile.author}</b></span>}
+          actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+        >
+          <img src={tile.img} />
+        </GridTile>
+      ))}
     </GridList>
   </div>
 );