[eslint] Enforce prefer-const

.eslintrc

@@ -49,7 +49,7 @@ rules:
   object-curly-spacing: [2, never]
   one-var: [2, never]
   prefer-arrow-callback: 0 # Wishlist, one day
-  prefer-const: 0 # Wishlist, one day
+  prefer-const: 2
   prefer-template: 2
   quotes: [2, single, avoid-escape]
   semi: [2, always]

docs/src/app/app.native.js

@@ -28,7 +28,7 @@ class App extends Component {
 
   render() {
     const {instructions} = this.props;
-    let {platform} = this.state;
+    const {platform} = this.state;
 
     return (
       <View style={styles.container}>
@@ -46,7 +46,7 @@ class App extends Component {
   }
 }
 
-let styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',

docs/src/app/components/CodeExample/index.jsx

@@ -18,16 +18,16 @@ class CodeExample extends React.Component {
 
   render() {
 
-    let {
+    const {
       children,
       code,
       layoutSideBySide,
     } = this.props;
 
-    let palette = this.context.muiTheme.rawTheme.palette;
-    let canvasColor = palette.canvasColor;
+    const palette = this.context.muiTheme.rawTheme.palette;
+    const canvasColor = palette.canvasColor;
 
-    let styles = {
+    const styles = {
       root: {
         backgroundColor: canvasColor,
         marginBottom: 32,

docs/src/app/components/ComponentDoc.jsx

@@ -20,7 +20,7 @@ const ComponentDoc = React.createClass({
   },
 
   getStyles() {
-    let borderColor = this.context.muiTheme.rawTheme.palette.borderColor;
+    const borderColor = this.context.muiTheme.rawTheme.palette.borderColor;
     return {
       desc: {
         borderBottom: `solid 1px ${borderColor}`,
@@ -64,9 +64,9 @@ const ComponentDoc = React.createClass({
       prepareStyles,
     } = this.context.muiTheme;
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
-    let componentInfo = this.props.componentInfo.map(function(info, i) {
+    const componentInfo = this.props.componentInfo.map(function(info, i) {
       let infoStyle = styles.componentInfo;
       if (i === 0) infoStyle = Object.assign({}, infoStyle, styles.componentInfoWhenFirstChild);
       return (

docs/src/app/components/ComponentInfo.jsx

@@ -19,9 +19,9 @@ const ComponentInfo = React.createClass({
   mixins: [StyleResizable],
 
   getStyles() {
-    let desktopGutter = Spacing.desktopGutter;
-    let borderColor = this.context.muiTheme.rawTheme.palette.borderColor;
-    let styles = {
+    const desktopGutter = Spacing.desktopGutter;
+    const borderColor = this.context.muiTheme.rawTheme.palette.borderColor;
+    const styles = {
       root: {
         fontSize: 15,
         letterSpacing: '0',
@@ -119,10 +119,10 @@ const ComponentInfo = React.createClass({
       prepareStyles,
     } = this.context.muiTheme;
 
-    let propElements = [];
+    const propElements = [];
     let typesSpan;
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
     this.props.infoArray.forEach(function(info, i) {
 
       if (info.type) typesSpan = <span style={prepareStyles(Object.assign({}, styles.type))}>{info.type}</span>;

docs/src/app/components/FullWidthSection.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {ClearFix, Mixins, Styles} from 'material-ui';
-let {StyleResizable} = Mixins;
+const {StyleResizable} = Mixins;
 const desktopGutter = Styles.Spacing.desktopGutter;
 
 const FullWidthSection = React.createClass({
@@ -46,15 +46,15 @@ const FullWidthSection = React.createClass({
   },
 
   render() {
-    let {
+    const {
       style,
       useContent,
       contentType,
       contentStyle,
       ...other,
     } = this.props;
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
     let content;
     if (useContent) {

docs/src/app/components/pages/HomeFeature.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import {Link} from 'react-router';
 import {Paper, Mixins, Styles} from 'material-ui';
 
-let {StyleResizable} = Mixins;
-let {Colors, Spacing, Transitions, Typography} = Styles;
+const {StyleResizable} = Mixins;
+const {Colors, Spacing, Transitions, Typography} = Styles;
 
 
-let HomeFeature = React.createClass({
+const HomeFeature = React.createClass({
 
   propTypes: {
     firstChild: React.PropTypes.bool,
@@ -32,9 +32,9 @@ let HomeFeature = React.createClass({
   },
 
   getStyles() {
-    let desktopGutter = Spacing.desktopGutter;
-    let desktopKeylineIncrement = Spacing.desktopKeylineIncrement;
-    let styles = {
+    const desktopGutter = Spacing.desktopGutter;
+    const desktopKeylineIncrement = Spacing.desktopKeylineIncrement;
+    const styles = {
       root: {
         transition: Transitions.easeOut(),
         maxWidth: '300px',
@@ -102,7 +102,7 @@ let HomeFeature = React.createClass({
   },
 
   render() {
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
     return (
       <Paper

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

@@ -13,8 +13,8 @@ export default class DatePickerExampleToggle extends React.Component {
   constructor(props) {
     super(props);
 
-    let minDate = new Date();
-    let maxDate = new Date();
+    const minDate = new Date();
+    const maxDate = new Date();
     minDate.setFullYear(minDate.getFullYear() - 1);
     minDate.setHours(0, 0, 0, 0);
     maxDate.setFullYear(maxDate.getFullYear() + 1);

docs/src/app/components/pages/customization/InlineStyles.jsx

@@ -32,7 +32,7 @@ class InlineStyles extends React.Component {
   }
 
   render() {
-    let codeOverrideStyles =
+    const codeOverrideStyles =
       '<Checkbox\n' +
       '  id="checkboxId1"\n' +
       '  name="checkboxName1"\n' +
@@ -45,7 +45,7 @@ class InlineStyles extends React.Component {
       '  iconStyle={{\n' +
       '    fill: \'#FF4081\'\n' +
       '  }}/>';
-    let codeMixStyles =
+    const codeMixStyles =
       '<Checkbox\n' +
       '  id="checkboxId1"\n' +
       '  name="checkboxName1"\n' +
@@ -61,7 +61,7 @@ class InlineStyles extends React.Component {
       '  background-color: #FF9800;\n' +
       '}';
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
     return (
       <div>

docs/src/app/components/pages/customization/colors.jsx

@@ -19,7 +19,7 @@ const ColorsPage = React.createClass({
   ],
 
   getStyles() {
-    let styles = {
+    const styles = {
       name: {
         display: 'block',
         marginBottom: 60,
@@ -65,11 +65,11 @@ const ColorsPage = React.createClass({
   },
 
   _getColorGroup(color, showAltPalette) {
-    let mainPalette = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-    let altPalette = ['A100', 'A200', 'A400', 'A700'];
-    let cssColor = color.replace(' ', '').replace(color.charAt(0), color.charAt(0).toLowerCase());
-    let colors = [];
-    let colorGroupStyle = this.getStyles().colorGroup;
+    const mainPalette = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+    const altPalette = ['A100', 'A200', 'A400', 'A700'];
+    const cssColor = color.replace(' ', '').replace(color.charAt(0), color.charAt(0).toLowerCase());
+    const colors = [];
+    const colorGroupStyle = this.getStyles().colorGroup;
 
     mainPalette.forEach((mainValue) => {
       colors.push(this._getColorBlock(cssColor, mainValue));
@@ -90,16 +90,16 @@ const ColorsPage = React.createClass({
   },
 
   _getColorBlock(colorName, colorValue, colorTitle) {
-    let bgColorText = colorName + colorValue;
-    let bgColor = Colors[bgColorText];
+    const bgColorText = colorName + colorValue;
+    const bgColor = Colors[bgColorText];
     let fgColor = Colors.fullBlack;
-    let contrastRatio = ColorManipulator.contrastRatio(bgColor, fgColor);
+    const contrastRatio = ColorManipulator.contrastRatio(bgColor, fgColor);
     let blockTitle;
 
     if (contrastRatio < 7) fgColor = Colors.fullWhite;
     if (colorTitle) blockTitle = <span style={this.getStyles().name}>{colorTitle}</span>;
 
-    let styles = {
+    const styles = {
       backgroundColor: bgColor,
       color: fgColor,
       listStyle: 'none',
@@ -115,13 +115,13 @@ const ColorsPage = React.createClass({
   },
 
   render() {
-    let mainColors = [
+    const mainColors = [
       'Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue',
       'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep Orange',
     ];
-    let neutralColors = ['Brown', 'Blue Grey', 'Grey'];
-    let colorGroups = [];
-    let neutralGroups = [];
+    const neutralColors = ['Brown', 'Blue Grey', 'Grey'];
+    const colorGroups = [];
+    const neutralGroups = [];
 
     mainColors.forEach((color) => {
       colorGroups.push(this._getColorGroup(color, true));
@@ -131,8 +131,8 @@ const ColorsPage = React.createClass({
       neutralGroups.push(this._getColorGroup(color, false));
     }, this);
 
-    let googleLink = 'https://www.google.com/design/spec/style/color.html#color-ui-color-palette';
-    let githubLink = 'https://github.com/callemall/material-ui/blob/master/src/styles/colors.js';
+    const googleLink = 'https://www.google.com/design/spec/style/color.html#color-ui-color-palette';
+    const githubLink = 'https://github.com/callemall/material-ui/blob/master/src/styles/colors.js';
 
     return (
       <div>

docs/src/app/components/pages/customization/themes.jsx

@@ -55,9 +55,9 @@ const ThemesPage = React.createClass({
   },
 
   getStyles() {
-    let canvasColor = this.props.muiTheme.baseTheme.palette.canvasColor;
-    let borderColor = this.props.muiTheme.baseTheme.palette.borderColor;
-    let styles = {
+    const canvasColor = this.props.muiTheme.baseTheme.palette.canvasColor;
+    const borderColor = this.props.muiTheme.baseTheme.palette.borderColor;
+    const styles = {
       group: {
         float: 'left',
         width: '100%',
@@ -361,7 +361,7 @@ const ThemesPage = React.createClass({
 
   render() {
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
     return (
       <div>

docs/src/app/components/pages/home.jsx

@@ -15,7 +15,7 @@ const HomePage = React.createClass({
   ],
 
   _getHomePageHero() {
-    let styles = {
+    const styles = {
       root: {
         backgroundColor: Colors.cyan500,
         overflow: 'hidden',

src/TextField/TextField.jsx

@@ -223,7 +223,7 @@ const TextField = React.createClass({
   },
 
   getInitialState() {
-    let props = (this.props.children) ? this.props.children.props : this.props;
+    const props = (this.props.children) ? this.props.children.props : this.props;
 
     return {
       isFocused: false,
@@ -245,7 +245,7 @@ const TextField = React.createClass({
   },
 
   componentWillReceiveProps(nextProps, nextContext) {
-    let newState = {};
+    const newState = {};
     newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
 
     newState.errorText = nextProps.errorText;
@@ -277,7 +277,7 @@ const TextField = React.createClass({
       errorColor,
     } = this.constructor.getRelevantContextKeys(this.state.muiTheme);
 
-    let styles = {
+    const styles = {
       root: {
         fontSize: 16,
         lineHeight: '24px',
@@ -404,7 +404,7 @@ const TextField = React.createClass({
   },
 
   render() {
-    let {
+    const {
       className,
       disabled,
       errorStyle,
@@ -431,15 +431,15 @@ const TextField = React.createClass({
       ...other,
     } = this.props;
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
     const inputId = id || this._uniqueId;
 
-    let errorTextElement = this.state.errorText ? (
+    const errorTextElement = this.state.errorText ? (
       <div style={this.prepareStyles(styles.error)}>{this.state.errorText}</div>
     ) : null;
 
-    let floatingLabelTextElement = floatingLabelText ? (
+    const floatingLabelTextElement = floatingLabelText ? (
       <TextFieldLabel
         muiTheme={this.state.muiTheme}
         style={this.mergeStyles(styles.floatingLabel, this.props.floatingLabelStyle)}

src/app-bar.jsx

@@ -270,7 +270,7 @@ const AppBar = React.createClass({
           </div>
         );
       } else {
-        let child = iconClassNameLeft ? '' : <NavigationMenu style={Object.assign({}, styles.iconButtonIconStyle)}/>;
+        const child = iconClassNameLeft ? '' : <NavigationMenu style={Object.assign({}, styles.iconButtonIconStyle)}/>;
         menuElementLeft = (
           <IconButton
             style={styles.iconButtonStyle}

src/app-canvas.jsx

@@ -47,7 +47,7 @@ const AppCanvas = React.createClass({
       direction: 'ltr',
     };
 
-    let newChildren = React.Children.map(this.props.children, (currentChild) => {
+    const newChildren = React.Children.map(this.props.children, (currentChild) => {
       if (!currentChild) { // If undefined, skip it
         return null;
       }

src/auto-complete.jsx

@@ -471,7 +471,7 @@ const AutoComplete = React.createClass({
 });
 
 AutoComplete.levenshteinDistance = (searchText, key) => {
-  let current = [];
+  const current = [];
   let prev;
   let value;
 

src/avatar.jsx

@@ -120,7 +120,7 @@ const Avatar = React.createClass({
   },
 
   render() {
-    let {
+    const {
       icon,
       src,
       style,