diff --git a/.eslintrc b/.eslintrc index 6b3bd114f6f8d7..85cd428d6134e2 100644 --- a/.eslintrc +++ b/.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] diff --git a/docs/src/app/app.native.js b/docs/src/app/app.native.js index ac795649c0c141..cf63fbdda63bc7 100644 --- a/docs/src/app/app.native.js +++ b/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 ( @@ -46,7 +46,7 @@ class App extends Component { } } -let styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', diff --git a/docs/src/app/components/CodeExample/index.jsx b/docs/src/app/components/CodeExample/index.jsx index 3fe8dc90a52e56..c9475db355dc1f 100644 --- a/docs/src/app/components/CodeExample/index.jsx +++ b/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, diff --git a/docs/src/app/components/ComponentDoc.jsx b/docs/src/app/components/ComponentDoc.jsx index 816238801060de..d65ed0525a3645 100644 --- a/docs/src/app/components/ComponentDoc.jsx +++ b/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 ( diff --git a/docs/src/app/components/ComponentInfo.jsx b/docs/src/app/components/ComponentInfo.jsx index 970bbaf91a3af5..fdf0ed797756fd 100644 --- a/docs/src/app/components/ComponentInfo.jsx +++ b/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 = {info.type}; diff --git a/docs/src/app/components/FullWidthSection.jsx b/docs/src/app/components/FullWidthSection.jsx index 5f9c35b38e6ec8..495108ac7801ab 100644 --- a/docs/src/app/components/FullWidthSection.jsx +++ b/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,7 +46,7 @@ const FullWidthSection = React.createClass({ }, render() { - let { + const { style, useContent, contentType, @@ -54,7 +54,7 @@ const FullWidthSection = React.createClass({ ...other, } = this.props; - let styles = this.getStyles(); + const styles = this.getStyles(); let content; if (useContent) { diff --git a/docs/src/app/components/pages/HomeFeature.jsx b/docs/src/app/components/pages/HomeFeature.jsx index 5beea10c800fe3..cc5a229e092bd6 100644 --- a/docs/src/app/components/pages/HomeFeature.jsx +++ b/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 ( '; - let codeMixStyles = + const codeMixStyles = ' diff --git a/docs/src/app/components/pages/customization/colors.jsx b/docs/src/app/components/pages/customization/colors.jsx index 090ea146760d8c..fc65dfad0481ae 100644 --- a/docs/src/app/components/pages/customization/colors.jsx +++ b/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 = {colorTitle}; - 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 (
diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index 937f9b9bb0615c..a1e21fc5f37085 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/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 (
diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index 01428115cca1ce..4083cd512df701 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/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', diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index 89855307575bcf..26e718d6611ddb 100644 --- a/src/TextField/TextField.jsx +++ b/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 ? (
{this.state.errorText}
) : null; - let floatingLabelTextElement = floatingLabelText ? ( + const floatingLabelTextElement = floatingLabelText ? ( ); } else { - let child = iconClassNameLeft ? '' : ; + const child = iconClassNameLeft ? '' : ; menuElementLeft = ( { + const newChildren = React.Children.map(this.props.children, (currentChild) => { if (!currentChild) { // If undefined, skip it return null; } diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx index 2277a38954c2e6..f579db8ce287c1 100644 --- a/src/auto-complete.jsx +++ b/src/auto-complete.jsx @@ -471,7 +471,7 @@ const AutoComplete = React.createClass({ }); AutoComplete.levenshteinDistance = (searchText, key) => { - let current = []; + const current = []; let prev; let value; diff --git a/src/avatar.jsx b/src/avatar.jsx index 6e48557728304e..417313bf0d1a6a 100644 --- a/src/avatar.jsx +++ b/src/avatar.jsx @@ -120,7 +120,7 @@ const Avatar = React.createClass({ }, render() { - let { + const { icon, src, style, diff --git a/src/before-after-wrapper.jsx b/src/before-after-wrapper.jsx index ffcd5e5fd476b8..453eaa41b685f5 100644 --- a/src/before-after-wrapper.jsx +++ b/src/before-after-wrapper.jsx @@ -124,9 +124,9 @@ const BeforeAfterWrapper = React.createClass({ }); } - let children = [beforeElement, this.props.children, afterElement]; + const children = [beforeElement, this.props.children, afterElement]; - let props = other; + const props = other; props.style = prepareStyles(Object.assign({}, this.props.style)); return React.createElement(this.props.elementType, props, children); diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx index 738870b4272471..000d770c60997d 100644 --- a/src/card/card-actions.jsx +++ b/src/card/card-actions.jsx @@ -60,7 +60,7 @@ const CardActions = React.createClass({ const styles = getStyles(this.props, this.state); - let children = React.Children.map(this.props.children, (child) => { + const children = React.Children.map(this.props.children, (child) => { if (React.isValidElement(child)) { return React.cloneElement(child, { style: Object.assign({}, styles.action, child.props.style), diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index e6dae2882d3d0b..e029c7aaeb7a21 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -97,13 +97,13 @@ const CardMedia = React.createClass({ const subtitleColor = this.state.muiTheme.cardMedia.subtitleColor; const color = this.state.muiTheme.cardMedia.color; - let children = React.Children.map(this.props.children, (child) => { + const children = React.Children.map(this.props.children, (child) => { return React.cloneElement(child, { style: prepareStyles(Object.assign({}, styles.mediaChild, child.props.style)), }); }); - let overlayChildren = React.Children.map(this.props.overlay, (child) => { + const overlayChildren = React.Children.map(this.props.overlay, (child) => { if (child.type.displayName === 'CardHeader' || child.type.displayName === 'CardTitle') { return React.cloneElement(child, { titleColor: titleColor, diff --git a/src/card/card.jsx b/src/card/card.jsx index 2185e5e0d4124a..e1cd984b870d29 100644 --- a/src/card/card.jsx +++ b/src/card/card.jsx @@ -86,10 +86,10 @@ const Card = React.createClass({ render() { let lastElement; const expanded = this.state.expanded; - let newChildren = React.Children.map(this.props.children, (currentChild) => { + const newChildren = React.Children.map(this.props.children, (currentChild) => { let doClone = false; let newChild = undefined; - let newProps = {}; + const newProps = {}; let element = currentChild; if (!currentChild || !currentChild.props) { return null; @@ -113,9 +113,9 @@ const Card = React.createClass({ // If the last element is text or a title we should add // 8px padding to the bottom of the card - let addBottomPadding = (lastElement && (lastElement.type.displayName === 'CardText' || + const addBottomPadding = (lastElement && (lastElement.type.displayName === 'CardText' || lastElement.type.displayName === 'CardTitle')); - let { + const { style, ...other, } = this.props; diff --git a/src/checkbox.jsx b/src/checkbox.jsx index b739ba61d66c9b..94bb3bc6a6f467 100644 --- a/src/checkbox.jsx +++ b/src/checkbox.jsx @@ -189,7 +189,7 @@ const Checkbox = React.createClass({ }, render() { - let { + const { iconStyle, onCheck, checkedIcon, @@ -198,47 +198,47 @@ const Checkbox = React.createClass({ ...other, } = this.props; const styles = getStyles(this.props, this.state); - let boxStyles = + const boxStyles = Object.assign( styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled); - let checkStyles = + const checkStyles = Object.assign( styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled); - let checkedElement = checkedIcon ? React.cloneElement(checkedIcon, { + const checkedElement = checkedIcon ? React.cloneElement(checkedIcon, { style: Object.assign(checkStyles, checkedIcon.props.style), }) : React.createElement(CheckboxChecked, { style: checkStyles, }); - let unCheckedElement = (unCheckedIcon || uncheckedIcon) ? React.cloneElement((unCheckedIcon || uncheckedIcon), { + const unCheckedElement = (unCheckedIcon || uncheckedIcon) ? React.cloneElement((unCheckedIcon || uncheckedIcon), { style: Object.assign(boxStyles, (unCheckedIcon || uncheckedIcon).props.style), }) : React.createElement(CheckboxOutline, { style: boxStyles, }); - let checkboxElement = ( + const checkboxElement = (
{unCheckedElement} {checkedElement}
); - let rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill; - let mergedIconStyle = Object.assign(styles.icon, iconStyle); + const rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill; + const mergedIconStyle = Object.assign(styles.icon, iconStyle); - let labelStyle = Object.assign( + const labelStyle = Object.assign( styles.label, this.props.labelStyle ); - let enhancedSwitchProps = { + const enhancedSwitchProps = { ref: 'enhancedSwitch', inputType: 'checkbox', switched: this.state.switched, diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index fff5d5a99fd1fa..75dc266e955880 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -30,7 +30,7 @@ function getStyles(props, state) { if (margin < 0) margin = 0; - let styles = { + const styles = { root: { position: 'relative', margin: margin, @@ -202,7 +202,7 @@ const CircularProgress = React.createClass({ }, render() { - let { + const { style, innerStyle, size, diff --git a/src/date-picker/calendar-month.jsx b/src/date-picker/calendar-month.jsx index 9caab9c2705db2..5011d7095262b0 100644 --- a/src/date-picker/calendar-month.jsx +++ b/src/date-picker/calendar-month.jsx @@ -21,7 +21,7 @@ const CalendarMonth = React.createClass({ }, _getWeekElements() { - let weekArray = DateTime.getWeekArray(this.props.displayDate, this.props.firstDayOfWeek); + const weekArray = DateTime.getWeekArray(this.props.displayDate, this.props.firstDayOfWeek); return weekArray.map((week, i) => { return ( @@ -34,9 +34,9 @@ const CalendarMonth = React.createClass({ _getDayElements(week, i) { return week.map((day, j) => { - let isSameDate = DateTime.isEqualDate(this.props.selectedDate, day); - let disabled = this._shouldDisableDate(day); - let selected = !disabled && isSameDate; + const isSameDate = DateTime.isEqualDate(this.props.selectedDate, day); + const disabled = this._shouldDisableDate(day); + const selected = !disabled && isSameDate; if (isSameDate) { if (disabled) { @@ -71,7 +71,7 @@ const CalendarMonth = React.createClass({ }, render() { - let styles = { + const styles = { lineHeight: '32px', textAlign: 'center', padding: '16px 14px 0 14px', diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index 9dfe1b15dce013..cc7e625d40b7d0 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -68,7 +68,7 @@ const CalendarToolbar = React.createClass({ //to update theme inside state whenever a new theme is passed down //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); let direction; diff --git a/src/date-picker/calendar-year.jsx b/src/date-picker/calendar-year.jsx index 0f2bdd0b8032f3..49a58d41cfe898 100644 --- a/src/date-picker/calendar-year.jsx +++ b/src/date-picker/calendar-year.jsx @@ -23,21 +23,21 @@ const CalendarYear = React.createClass({ }, _getYears() { - let minYear = this.props.minDate.getFullYear(); - let maxYear = this.props.maxDate.getFullYear(); + const minYear = this.props.minDate.getFullYear(); + const maxYear = this.props.maxDate.getFullYear(); - let years = []; - let dateCheck = DateTime.clone(this.props.selectedDate); + const years = []; + const dateCheck = DateTime.clone(this.props.selectedDate); for (let year = minYear; year <= maxYear; year++) { dateCheck.setFullYear(year); if (!DateTime.isBetweenDates(dateCheck, this.props.minDate, this.props.maxDate)) continue; - let selected = this.props.selectedDate.getFullYear() === year; + const selected = this.props.selectedDate.getFullYear() === year; let selectedProps = {}; if (selected) { selectedProps = {ref: 'selectedYearButton'}; } - let yearButton = ( + const yearButton = ( this.state.displayDate ? 'left' : 'right'; + const newDisplayDate = DateTime.getFirstDayOfMonth(d); + const direction = newDisplayDate > this.state.displayDate ? 'left' : 'right'; if (newDisplayDate !== this.state.displayDate) { this.setState({ @@ -145,7 +145,7 @@ const Calendar = React.createClass({ adjustedDate = this.props.maxDate; } - let newDisplayDate = DateTime.getFirstDayOfMonth(adjustedDate); + const newDisplayDate = DateTime.getFirstDayOfMonth(adjustedDate); if (newDisplayDate !== this.state.displayDate) { this._setDisplayDate(newDisplayDate, adjustedDate); } else { @@ -168,7 +168,7 @@ const Calendar = React.createClass({ }, _handleYearTouchTap(e, year) { - let date = DateTime.clone(this.state.selectedDate); + const date = DateTime.clone(this.state.selectedDate); date.setFullYear(year); this._setSelectedDate(date, e); }, @@ -245,11 +245,11 @@ const Calendar = React.createClass({ prepareStyles, } = this.state.muiTheme; - let yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1; - let weekCount = DateTime.getWeekArray(this.state.displayDate, this.props.firstDayOfWeek).length; - let toolbarInteractions = this._getToolbarInteractions(); - let isLandscape = this.props.mode === 'landscape'; - let styles = { + const yearCount = DateTime.yearDiff(this.props.maxDate, this.props.minDate) + 1; + const weekCount = DateTime.getWeekArray(this.state.displayDate, this.props.firstDayOfWeek).length; + const toolbarInteractions = this._getToolbarInteractions(); + const isLandscape = this.props.mode === 'landscape'; + const styles = { root: { fontSize: 12, }, diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index eb2a8d36ebcc7e..87c43134438849 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -135,7 +135,7 @@ const DateDisplay = React.createClass({ }, render() { - let { + const { DateTimeFormat, locale, selectedDate, diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 4e7bcf3b4835b6..2a2b4a54652075 100644 --- a/src/date-picker/date-picker-dialog.jsx +++ b/src/date-picker/date-picker-dialog.jsx @@ -139,7 +139,7 @@ const DatePickerDialog = React.createClass({ }, render() { - let { + const { DateTimeFormat, locale, wordings, @@ -155,7 +155,7 @@ const DatePickerDialog = React.createClass({ calendarTextColor, } = this.constructor.getRelevantContextKeys(this.state.muiTheme); - let styles = { + const styles = { root: { fontSize: 14, color: calendarTextColor, @@ -174,7 +174,7 @@ const DatePickerDialog = React.createClass({ }, }; - let actions = [ + const actions = [ {this.props.label} @@ -352,7 +352,7 @@ const EnhancedSwitch = React.createClass({ onFocus: this._handleFocus, }; - let hideTouchRipple = this.props.disabled || disableTouchRipple; + const hideTouchRipple = this.props.disabled || disableTouchRipple; if (!hideTouchRipple) { inputProps.onMouseUp = this._handleMouseUp; @@ -366,14 +366,14 @@ const EnhancedSwitch = React.createClass({ inputProps.onChange = this._handleChange; } - let inputElement = ( + const inputElement = ( ); - let touchRipple = ( + const touchRipple = ( ); - let focusRipple = ( + const focusRipple = ( ); - let ripples = [ + const ripples = [ hideTouchRipple ? null : touchRipple, this.props.disabled || disableFocusRipple ? null : focusRipple, ]; // If toggle component (indicated by whether the style includes thumb) manually lay out // elements in order to nest ripple elements - let switchElement = !this.props.thumbStyle ? ( + const switchElement = !this.props.thumbStyle ? (
{this.props.switchElement} {ripples} @@ -413,10 +413,10 @@ const EnhancedSwitch = React.createClass({
); - let labelPositionExist = this.props.labelPosition; + const labelPositionExist = this.props.labelPosition; // Position is left if not defined or invalid. - let elementsInOrder = (labelPositionExist && + const elementsInOrder = (labelPositionExist && (this.props.labelPosition.toUpperCase() === 'RIGHT')) ? ( {switchElement} diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx index 6c1a7cd8e44e9a..c370e35f5457c4 100644 --- a/src/enhanced-textarea.jsx +++ b/src/enhanced-textarea.jsx @@ -104,7 +104,7 @@ const EnhancedTextarea = React.createClass({ }, _syncHeightWithShadow(newValue, event) { - let shadow = this.refs.shadow; + const shadow = this.refs.shadow; if (newValue !== undefined) { shadow.value = newValue; @@ -142,7 +142,7 @@ const EnhancedTextarea = React.createClass({ }, render() { - let { + const { onChange, onHeightChange, rows, diff --git a/src/flat-button.jsx b/src/flat-button.jsx index 7fdb10f9b37394..77c47d53c03df8 100644 --- a/src/flat-button.jsx +++ b/src/flat-button.jsx @@ -189,7 +189,7 @@ const FlatButton = React.createClass({ //to update theme inside state whenever a new theme is passed down //from the parent / owner using context componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); }, diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx index 33be86ce80970d..b52bfbb0827d53 100644 --- a/src/floating-action-button.jsx +++ b/src/floating-action-button.jsx @@ -270,7 +270,7 @@ const FloatingActionButton = React.createClass({ }, render() { - let { + const { className, disabled, mini, @@ -298,14 +298,14 @@ const FloatingActionButton = React.createClass({ ); } - let children = Children.extend(this.props.children, { + const children = Children.extend(this.props.children, { style: Object.assign({}, styles.icon, mini && styles.iconWhenMini, iconStyle), }); - let buttonEventHandlers = disabled ? null : { + const buttonEventHandlers = disabled ? null : { onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, onMouseLeave: this._handleMouseLeave, diff --git a/src/font-icon.jsx b/src/font-icon.jsx index bf1fc5229ae36a..6dc5d8da196456 100644 --- a/src/font-icon.jsx +++ b/src/font-icon.jsx @@ -111,7 +111,7 @@ const FontIcon = React.createClass({ }, render() { - let { + const { onMouseLeave, onMouseEnter, style, diff --git a/src/grid-list/grid-tile.jsx b/src/grid-list/grid-tile.jsx index cb422f67aef5ee..b72f8c9a6e15df 100644 --- a/src/grid-list/grid-tile.jsx +++ b/src/grid-list/grid-tile.jsx @@ -9,7 +9,7 @@ function getStyles(props, state) { const actionPos = props.actionIcon && props.actionPosition; - let styles = { + const styles = { root: { position: 'relative', display: 'block', @@ -177,7 +177,7 @@ const GridTile = React.createClass({ let imgEl = this.refs.img; if (imgEl) { - let fit = () => { + const fit = () => { if (imgEl.offsetWidth < imgEl.parentNode.offsetWidth) { imgEl.style.height = 'auto'; imgEl.style.left = '0'; diff --git a/src/hoc/selectable-enhance.js b/src/hoc/selectable-enhance.js index a3261432ea248b..2ef68b0f8ab3f0 100644 --- a/src/hoc/selectable-enhance.js +++ b/src/hoc/selectable-enhance.js @@ -51,13 +51,13 @@ export const SelectableContainerEnhance = (Component) => { extendChild(child, styles, selectedItemStyle) { if (child && child.type && child.type.displayName === 'ListItem') { - let selected = this.isChildSelected(child, this.props); + const selected = this.isChildSelected(child, this.props); let selectedChildrenStyles; if (selected) { selectedChildrenStyles = Object.assign({}, styles, selectedItemStyle); } - let mergedChildrenStyles = Object.assign({}, child.props.style, selectedChildrenStyles); + const mergedChildrenStyles = Object.assign({}, child.props.style, selectedChildrenStyles); this.keyIndex += 1; @@ -93,16 +93,16 @@ export const SelectableContainerEnhance = (Component) => { }, isChildSelected(child, props) { - let itemValue = this.getValueLink(props).value; - let childValue = child.props.value; + const itemValue = this.getValueLink(props).value; + const childValue = child.props.value; return (itemValue === childValue); }, handleItemTouchTap(e, item) { - let valueLink = this.getValueLink(this.props); - let itemValue = item.props.value; - let menuValue = valueLink.value; + const valueLink = this.getValueLink(this.props); + const itemValue = item.props.value; + const menuValue = valueLink.value; if ( itemValue !== menuValue) { valueLink.requestChange(e, itemValue); } @@ -114,14 +114,14 @@ export const SelectableContainerEnhance = (Component) => { let styles = {}; if (!selectedItemStyle) { - let textColor = this.state.muiTheme.rawTheme.palette.textColor; - let selectedColor = ColorManipulator.fade(textColor, 0.2); + const textColor = this.state.muiTheme.rawTheme.palette.textColor; + const selectedColor = ColorManipulator.fade(textColor, 0.2); styles = { backgroundColor: selectedColor, }; } - let newChildren = React.Children.map(children, (child) => this.extendChild(child, styles, selectedItemStyle)); + const newChildren = React.Children.map(children, (child) => this.extendChild(child, styles, selectedItemStyle)); return ( diff --git a/src/icon-button.jsx b/src/icon-button.jsx index 1f8d161943c05a..4c79a05abdfde7 100644 --- a/src/icon-button.jsx +++ b/src/icon-button.jsx @@ -237,7 +237,7 @@ const IconButton = React.createClass({ }, render() { - let { + const { disabled, iconClassName, tooltip, @@ -248,9 +248,9 @@ const IconButton = React.createClass({ let fonticon; const styles = getStyles(this.props, this.state); - let tooltipPosition = this.props.tooltipPosition.split('-'); + const tooltipPosition = this.props.tooltipPosition.split('-'); - let tooltipElement = tooltip ? ( + const tooltipElement = tooltip ? ( { //Set focus on the icon button when the menu close if (isKeyboard) { - let iconButton = this.refs[this.state.iconButtonRef]; + const iconButton = this.refs[this.state.iconButtonRef]; ReactDOM.findDOMNode(iconButton).focus(); iconButton.setKeyboardFocus(); } @@ -241,7 +241,7 @@ const IconMenu = React.createClass({ }, render() { - let { + const { anchorOrigin, className, iconButtonElement, @@ -265,7 +265,7 @@ const IconMenu = React.createClass({ const {open, anchorEl} = this.state; - let styles = { + const styles = { root: { display: 'inline-block', position: 'relative', @@ -276,10 +276,10 @@ const IconMenu = React.createClass({ }, }; - let mergedRootStyles = Object.assign(styles.root, style); - let mergedMenuStyles = Object.assign(styles.menu, menuStyle); + const mergedRootStyles = Object.assign(styles.root, style); + const mergedMenuStyles = Object.assign(styles.menu, menuStyle); - let iconButton = React.cloneElement(iconButtonElement, { + const iconButton = React.cloneElement(iconButtonElement, { onKeyboardFocus: this.props.onKeyboardFocus, iconStyle: Object.assign(iconStyle, iconButtonElement.props.iconStyle), onTouchTap: (e) => { @@ -289,7 +289,7 @@ const IconMenu = React.createClass({ ref: this.state.iconButtonRef, }); - let menu = ( + const menu = ( : null; diff --git a/src/menus/menu.jsx b/src/menus/menu.jsx index e735f305c4b0b5..528bbfaaed09fc 100644 --- a/src/menus/menu.jsx +++ b/src/menus/menu.jsx @@ -154,7 +154,7 @@ const Menu = React.createClass({ getInitialState() { const filteredChildren = this._getFilteredChildren(this.props.children); - let selectedIndex = this._getSelectedIndex(this.props, filteredChildren); + const selectedIndex = this._getSelectedIndex(this.props, filteredChildren); return { focusIndex: selectedIndex >= 0 ? selectedIndex : 0, @@ -178,7 +178,7 @@ const Menu = React.createClass({ componentWillReceiveProps(nextProps, nextContext) { const filteredChildren = this._getFilteredChildren(nextProps.children); - let selectedIndex = this._getSelectedIndex(nextProps, filteredChildren); + const selectedIndex = this._getSelectedIndex(nextProps, filteredChildren); this.setState({ focusIndex: selectedIndex >= 0 ? selectedIndex : 0, @@ -222,9 +222,9 @@ const Menu = React.createClass({ }, _animateOpen() { - let rootStyle = ReactDOM.findDOMNode(this).style; - let scrollContainerStyle = ReactDOM.findDOMNode(this.refs.scrollContainer).style; - let menuContainers = ReactDOM.findDOMNode(this.refs.list).childNodes; + const rootStyle = ReactDOM.findDOMNode(this).style; + const scrollContainerStyle = ReactDOM.findDOMNode(this.refs.scrollContainer).style; + const menuContainers = ReactDOM.findDOMNode(this.refs.list).childNodes; autoPrefix.set(rootStyle, 'transform', 'scaleX(1)', this.state.muiTheme); autoPrefix.set(scrollContainerStyle, 'transform', 'scaleY(1)', this.state.muiTheme); @@ -236,12 +236,12 @@ const Menu = React.createClass({ }, _cloneMenuItem(child, childIndex, styles) { - let { + const { desktop, selectedMenuItemStyle, } = this.props; - let selected = this._isChildSelected(child, this.props); + const selected = this._isChildSelected(child, this.props); let selectedChildrenStyles = {}; if (selected) { @@ -250,7 +250,7 @@ const Menu = React.createClass({ const mergedChildrenStyles = Object.assign({}, child.props.style, selectedChildrenStyles); - let isFocused = childIndex === this.state.focusIndex; + const isFocused = childIndex === this.state.focusIndex; let focusState = 'none'; if (isFocused) { focusState = this.state.isKeyboardFocused ? @@ -279,13 +279,13 @@ const Menu = React.createClass({ }, _getCascadeChildrenCount(filteredChildren) { - let { + const { desktop, maxHeight, } = this.props; let count = 1; let currentHeight = desktop ? 16 : 8; - let menuItemHeight = desktop ? 32 : 48; + const menuItemHeight = desktop ? 32 : 48; //MaxHeight isn't set - cascade all of the children if (!maxHeight) return filteredChildren.length; @@ -294,7 +294,7 @@ const Menu = React.createClass({ //max menu height filteredChildren.forEach((child) => { if (currentHeight < maxHeight) { - let childIsADivider = child.type && child.type.displayName === 'Divider'; + const childIsADivider = child.type && child.type.displayName === 'Divider'; currentHeight += childIsADivider ? 16 : menuItemHeight; count++; @@ -307,8 +307,8 @@ const Menu = React.createClass({ _getMenuItemCount(filteredChildren) { let menuItemCount = 0; filteredChildren.forEach((child) => { - let childIsADivider = child.type && child.type.displayName === 'Divider'; - let childIsDisabled = child.props.disabled; + const childIsADivider = child.type && child.type.displayName === 'Divider'; + const childIsDisabled = child.props.disabled; if (!childIsADivider && !childIsDisabled) menuItemCount++; }); return menuItemCount; @@ -319,7 +319,7 @@ const Menu = React.createClass({ let menuItemIndex = 0; filteredChildren.forEach((child) => { - let childIsADivider = child.type && child.type.displayName === 'Divider'; + const childIsADivider = child.type && child.type.displayName === 'Divider'; if (this._isChildSelected(child, props)) selectedIndex = menuItemIndex; if (!childIsADivider) menuItemIndex++; @@ -355,18 +355,18 @@ const Menu = React.createClass({ }, _handleMenuItemTouchTap(e, item) { - let children = this.props.children; - let multiple = this.props.multiple; - let valueLink = this.getValueLink(this.props); - let menuValue = valueLink.value; - let itemValue = item.props.value; - let focusIndex = React.isValidElement(children) ? 0 : children.indexOf(item); + const children = this.props.children; + const multiple = this.props.multiple; + const valueLink = this.getValueLink(this.props); + const menuValue = valueLink.value; + const itemValue = item.props.value; + const focusIndex = React.isValidElement(children) ? 0 : children.indexOf(item); this._setFocusIndex(focusIndex, false); if (multiple) { - let index = menuValue.indexOf(itemValue); - let newMenuValue = index === -1 ? + const index = menuValue.indexOf(itemValue); + const newMenuValue = index === -1 ? update(menuValue, {$push: [itemValue]}) : update(menuValue, {$splice: [[index, 1]]}); @@ -380,7 +380,7 @@ const Menu = React.createClass({ _incrementKeyboardFocusIndex(filteredChildren) { let index = this.state.focusIndex; - let maxIndex = this._getMenuItemCount(filteredChildren) - 1; + const maxIndex = this._getMenuItemCount(filteredChildren) - 1; index++; if (index > maxIndex) index = maxIndex; @@ -407,12 +407,12 @@ const Menu = React.createClass({ }, _setScollPosition() { - let desktop = this.props.desktop; - let focusedMenuItem = this.refs.focusedMenuItem; - let menuItemHeight = desktop ? 32 : 48; + const desktop = this.props.desktop; + const focusedMenuItem = this.refs.focusedMenuItem; + const menuItemHeight = desktop ? 32 : 48; if (focusedMenuItem) { - let selectedOffSet = ReactDOM.findDOMNode(focusedMenuItem).offsetTop; + const selectedOffSet = ReactDOM.findDOMNode(focusedMenuItem).offsetTop; //Make the focused item be the 2nd item in the list the //user sees @@ -424,11 +424,11 @@ const Menu = React.createClass({ }, _setWidth() { - let el = ReactDOM.findDOMNode(this); - let listEl = ReactDOM.findDOMNode(this.refs.list); - let elWidth = el.offsetWidth; - let keyWidth = this.state.keyWidth; - let minWidth = keyWidth * 1.5; + const el = ReactDOM.findDOMNode(this); + const listEl = ReactDOM.findDOMNode(this.refs.list); + const elWidth = el.offsetWidth; + const keyWidth = this.state.keyWidth; + const minWidth = keyWidth * 1.5; let keyIncrements = elWidth / keyWidth; let newWidth; @@ -442,7 +442,7 @@ const Menu = React.createClass({ }, render() { - let { + const { animated, autoWidth, children, @@ -465,13 +465,13 @@ const Menu = React.createClass({ prepareStyles, } = this.state.muiTheme; - let openDown = openDirection.split('-')[0] === 'bottom'; - let openLeft = openDirection.split('-')[1] === 'left'; + const openDown = openDirection.split('-')[0] === 'bottom'; + const openLeft = openDirection.split('-')[1] === 'left'; const muiTheme = this.state.muiTheme; const rawTheme = muiTheme.rawTheme; - let styles = { + const styles = { root: { //Nested div bacause the List scales x faster than //it scales y @@ -517,24 +517,24 @@ const Menu = React.createClass({ }, }; - let mergedRootStyles = Object.assign(styles.root, style); - let mergedListStyles = Object.assign(styles.list, listStyle); + const mergedRootStyles = Object.assign(styles.root, style); + const mergedListStyles = Object.assign(styles.list, listStyle); const filteredChildren = this._getFilteredChildren(children); //Cascade children opacity let cumulativeDelay = openDown ? 175 : 325; - let cascadeChildrenCount = this._getCascadeChildrenCount(filteredChildren); - let cumulativeDelayIncrement = Math.ceil(150 / cascadeChildrenCount); + const cascadeChildrenCount = this._getCascadeChildrenCount(filteredChildren); + const cumulativeDelayIncrement = Math.ceil(150 / cascadeChildrenCount); let menuItemIndex = 0; - let newChildren = React.Children.map(filteredChildren, (child) => { - let childIsADivider = child.type && child.type.displayName === 'Divider'; - let childIsDisabled = child.props.disabled; + const newChildren = React.Children.map(filteredChildren, (child) => { + const childIsADivider = child.type && child.type.displayName === 'Divider'; + const childIsDisabled = child.props.disabled; let childrenContainerStyles = {}; if (animated) { - let focusIndex = this.state.focusIndex; + const focusIndex = this.state.focusIndex; let transitionDelay = 0; //Only cascade the visible menu items @@ -551,7 +551,7 @@ const Menu = React.createClass({ }); } - let clonedChild = childIsADivider ? React.cloneElement(child, {style: styles.divider}) : + const clonedChild = childIsADivider ? React.cloneElement(child, {style: styles.divider}) : childIsDisabled ? React.cloneElement(child, {desktop: desktop}) : this._cloneMenuItem(child, menuItemIndex, styles); diff --git a/src/mixins/click-awayable.js b/src/mixins/click-awayable.js index 6fad865decd1c1..5f2350029a8414 100644 --- a/src/mixins/click-awayable.js +++ b/src/mixins/click-awayable.js @@ -16,7 +16,7 @@ export default { _checkClickAway(event) { if (this.isMounted()) { - let el = ReactDOM.findDOMNode(this); + const el = ReactDOM.findDOMNode(this); // Check if the target is inside the current component if (event.target !== el && diff --git a/src/mixins/window-listenable.js b/src/mixins/window-listenable.js index 88cb13cb684138..5975a5a978e3fe 100644 --- a/src/mixins/window-listenable.js +++ b/src/mixins/window-listenable.js @@ -4,19 +4,19 @@ import Events from '../utils/events'; export default { componentDidMount() { - let listeners = this.windowListeners; + const listeners = this.windowListeners; - for (let eventName in listeners) { - let callbackName = listeners[eventName]; + for (const eventName in listeners) { + const callbackName = listeners[eventName]; Events.on(window, eventName, this[callbackName]); } }, componentWillUnmount() { - let listeners = this.windowListeners; + const listeners = this.windowListeners; - for (let eventName in listeners) { - let callbackName = listeners[eventName]; + for (const eventName in listeners) { + const callbackName = listeners[eventName]; Events.off(window, eventName, this[callbackName]); } }, diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx index df532ebb89cba4..6eafe3648cba1d 100644 --- a/src/popover/popover.jsx +++ b/src/popover/popover.jsx @@ -148,7 +148,7 @@ const Popover = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; if (nextProps.open !== this.state.open) { if (nextProps.open) { @@ -274,9 +274,9 @@ const Popover = React.createClass({ return; } - let {targetOrigin, anchorOrigin} = this.props; + const {targetOrigin, anchorOrigin} = this.props; - let anchor = this.getAnchorPosition(anchorEl); + const anchor = this.getAnchorPosition(anchorEl); let target = this.getTargetPosition(targetEl); let targetPosition = { @@ -315,15 +315,15 @@ const Popover = React.createClass({ }, getPositions(anchor, target) { - let a = {...anchor}; - let t = {...target}; + const a = {...anchor}; + const t = {...target}; - let positions = { + const positions = { x: ['left', 'right'].filter((p) => p !== t.horizontal), y: ['top', 'bottom'].filter((p) => p !== t.vertical), }; - let overlap = { + const overlap = { x: this.getOverlapMode(a.horizontal, t.horizontal, 'middle'), y: this.getOverlapMode(a.vertical, t.vertical, 'center'), }; @@ -352,7 +352,7 @@ const Popover = React.createClass({ }, applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition) { - let {positions, anchorPos} = this.getPositions(anchorOrigin, targetOrigin); + const {positions, anchorPos} = this.getPositions(anchorOrigin, targetOrigin); if (targetPosition.top < 0 || targetPosition.top + target.bottom > window.innerHeight) { let newTop = anchor[anchorPos.vertical] - target[positions.y[0]]; diff --git a/src/radio-button-group.jsx b/src/radio-button-group.jsx index e8c1d8ea448c7b..8e12fcb159e341 100644 --- a/src/radio-button-group.jsx +++ b/src/radio-button-group.jsx @@ -93,7 +93,7 @@ const RadioButtonGroup = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newState = {muiTheme: nextContext.muiTheme || this.state.muiTheme}; + const newState = {muiTheme: nextContext.muiTheme || this.state.muiTheme}; if (nextProps.hasOwnProperty('valueSelected')) { newState.selected = nextProps.valueSelected; @@ -142,8 +142,8 @@ const RadioButtonGroup = React.createClass({ prepareStyles, } = this.state.muiTheme; - let options = React.Children.map(this.props.children, (option) => { - let { + const options = React.Children.map(this.props.children, (option) => { + const { name, value, label, diff --git a/src/raised-button.jsx b/src/raised-button.jsx index ad419ac0a3142e..714525a1145e5f 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -243,7 +243,7 @@ const RaisedButton = React.createClass({ }, getInitialState() { - let zDepth = this.props.disabled ? 0 : 1; + const zDepth = this.props.disabled ? 0 : 1; return { hovered: false, touched: false, @@ -260,7 +260,7 @@ const RaisedButton = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let zDepth = nextProps.disabled ? 0 : 1; + const zDepth = nextProps.disabled ? 0 : 1; this.setState({ zDepth: zDepth, initialZDepth: zDepth, @@ -309,7 +309,7 @@ const RaisedButton = React.createClass({ _handleKeyboardFocus: (styles) => (e, keyboardFocused) => { if (keyboardFocused && !this.props.disabled) { this.setState({zDepth: this.state.initialZDepth + 1}); - let amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08; + const amount = (this.props.primary || this.props.secondary) ? 0.4 : 0.08; this.refs.overlay.style.backgroundColor = ColorManipulator.fade(Object.assign({}, styles.label, this.props.labelStyle).color, amount); } else if (!this.state.hovered) { @@ -319,7 +319,7 @@ const RaisedButton = React.createClass({ }, render() { - let { + const { children, className, disabled, diff --git a/src/ripples/circle-ripple.jsx b/src/ripples/circle-ripple.jsx index 4b3ccf6a131bf2..801ec8134431d7 100644 --- a/src/ripples/circle-ripple.jsx +++ b/src/ripples/circle-ripple.jsx @@ -50,7 +50,7 @@ const CircleRipple = React.createClass({ }, componentWillLeave(callback) { - let style = ReactDOM.findDOMNode(this).style; + const style = ReactDOM.findDOMNode(this).style; style.opacity = 0; setTimeout(() => { if (this.isMounted()) callback(); @@ -58,7 +58,7 @@ const CircleRipple = React.createClass({ }, _animate() { - let style = ReactDOM.findDOMNode(this).style; + const style = ReactDOM.findDOMNode(this).style; const transitionValue = `${Transitions.easeOut('2s', 'opacity')}, ${ Transitions.easeOut('1s', 'transform')}`; autoPrefix.set(style, 'transition', transitionValue, this.props.muiTheme); @@ -66,7 +66,7 @@ const CircleRipple = React.createClass({ }, _initializeAnimation(callback) { - let style = ReactDOM.findDOMNode(this).style; + const style = ReactDOM.findDOMNode(this).style; style.opacity = this.props.opacity; autoPrefix.set(style, 'transform', 'scale(0)', this.props.muiTheme); setTimeout(() => { diff --git a/src/ripples/focus-ripple.jsx b/src/ripples/focus-ripple.jsx index dadade84b7d42b..3bbddaa0e80c26 100644 --- a/src/ripples/focus-ripple.jsx +++ b/src/ripples/focus-ripple.jsx @@ -75,7 +75,7 @@ const FocusRipple = React.createClass({ _pulsate() { if (!this.isMounted()) return; - let innerCircle = ReactDOM.findDOMNode(this.refs.innerCircle); + const innerCircle = ReactDOM.findDOMNode(this.refs.innerCircle); if (!innerCircle) return; const startScale = 'scale(1)'; @@ -92,7 +92,7 @@ const FocusRipple = React.createClass({ }, _setRippleSize() { - let el = ReactDOM.findDOMNode(this.refs.innerCircle); + const el = ReactDOM.findDOMNode(this.refs.innerCircle); const height = el.offsetHeight; const width = el.offsetWidth; const size = Math.max(height, width); diff --git a/src/ripples/touch-ripple.jsx b/src/ripples/touch-ripple.jsx index 92b59035006773..a48f88e81f4c56 100644 --- a/src/ripples/touch-ripple.jsx +++ b/src/ripples/touch-ripple.jsx @@ -116,7 +116,7 @@ const TouchRipple = React.createClass({ }, _getRippleStyle(e) { - let style = {}; + const style = {}; const el = ReactDOM.findDOMNode(this); const elHeight = el.offsetHeight; const elWidth = el.offsetWidth; diff --git a/src/slider.jsx b/src/slider.jsx index 54d15031f2f29f..8709b32d3738b6 100644 --- a/src/slider.jsx +++ b/src/slider.jsx @@ -13,12 +13,12 @@ import autoPrefix from './styles/auto-prefix'; * @param {String} componentName Name of the component whose property is being validated. * @returns {Object} Returns an Error if min >= max otherwise null. */ -let minMaxPropType = (props, propName, componentName) => { - let error = React.PropTypes.number(props, propName, componentName); +const minMaxPropType = (props, propName, componentName) => { + const error = React.PropTypes.number(props, propName, componentName); if (error !== null) return error; if (props.min >= props.max) { - let errorMsg = (propName === 'min') ? 'min should be less than max' : 'max should be greater than min'; + const errorMsg = (propName === 'min') ? 'min should be less than max' : 'max should be greater than min'; return new Error(errorMsg); } }; @@ -30,11 +30,11 @@ let minMaxPropType = (props, propName, componentName) => { * @param {String} componentName Name of the component whose property is being validated. * @returns {Object} Returns an Error if the value is not within the range otherwise null. */ -let valueInRangePropType = (props, propName, componentName) => { - let error = React.PropTypes.number(props, propName, componentName); +const valueInRangePropType = (props, propName, componentName) => { + const error = React.PropTypes.number(props, propName, componentName); if (error !== null) return error; - let value = props[propName]; + const value = props[propName]; if (value < props.min || props.max < value) { return new Error(`${propName} should be within the range specified by min and max`); } @@ -184,7 +184,7 @@ const Slider = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; + const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({muiTheme: newMuiTheme}); if (nextProps.value !== undefined && !this.state.dragging) { @@ -197,10 +197,10 @@ const Slider = React.createClass({ }, getStyles() { - let fillGutter = this.getTheme().handleSize / 2; - let disabledGutter = this.getTheme().trackSize + this.getTheme().handleSizeDisabled / 2; - let calcDisabledSpacing = this.props.disabled ? ` -${disabledGutter}px` : ''; - let styles = { + const fillGutter = this.getTheme().handleSize / 2; + const disabledGutter = this.getTheme().trackSize + this.getTheme().handleSizeDisabled / 2; + const calcDisabledSpacing = this.props.disabled ? ` -${disabledGutter}px` : ''; + const styles = { root: { touchCallout: 'none', userSelect: 'none', @@ -310,7 +310,7 @@ const Slider = React.createClass({ // In the future, we should consider use to avoid // similar issues. _toggleSelection(value) { - let body = document.getElementsByTagName('body')[0]; + const body = document.getElementsByTagName('body')[0]; autoPrefix.set(body.style, 'userSelect', value, this.state.muiTheme); }, @@ -396,9 +396,9 @@ const Slider = React.createClass({ }, setPercent(percent, callback) { - let value = this._alignValue(this._percentToValue(percent)); - let {min, max} = this.props; - let alignedPercent = (value - min) / (max - min); + const value = this._alignValue(this._percentToValue(percent)); + const {min, max} = this.props; + const alignedPercent = (value - min) / (max - min); if (this.state.value !== value) { this.setState({value: value, percent: alignedPercent}, callback); } @@ -409,8 +409,8 @@ const Slider = React.createClass({ }, _alignValue(val) { - let {step, min} = this.props; - let alignValue = Math.round((val - min) / step) * step + min; + const {step, min} = this.props; + const alignValue = Math.round((val - min) / step) * step + min; return parseFloat(alignValue.toFixed(5)); }, @@ -443,7 +443,7 @@ const Slider = React.createClass({ _onMouseUp(e) { if (!this.props.disabled) this.setState({active: false}); if (!this.state.dragging && Math.abs(this._pos - e.clientX) < 5) { - let pos = e.clientX - this._getTrackLeft(); + const pos = e.clientX - this._getTrackLeft(); this._dragX(e, pos); } @@ -472,7 +472,7 @@ const Slider = React.createClass({ }, _dragX(e, pos) { - let max = ReactDOM.findDOMNode(this.refs.track).clientWidth; + const max = ReactDOM.findDOMNode(this.refs.track).clientWidth; if (pos < 0) pos = 0; else if (pos > max) pos = max; this._updateWithChangeEvent(e, pos / max); }, @@ -488,11 +488,11 @@ const Slider = React.createClass({ }, render() { - let {...others} = this.props; + const {...others} = this.props; let percent = this.state.percent; if (percent > 1) percent = 1; else if (percent < 0) percent = 0; - let styles = this.getStyles(); + const styles = this.getStyles(); const sliderStyles = this.mergeStyles(styles.root, this.props.style); const handleStyles = percent === 0 ? this.mergeStyles( styles.handle, @@ -511,17 +511,17 @@ const Slider = React.createClass({ left: `${(percent * 100)}%`, } ); - let rippleStyle = this.mergeStyles( + const rippleStyle = this.mergeStyles( styles.ripple, percent === 0 && styles.rippleWhenPercentZero ); - let remainingStyles = styles.remaining; + const remainingStyles = styles.remaining; if ((this.state.hovered || this.state.focused) && !this.props.disabled) { remainingStyles.backgroundColor = this.getTheme().trackColorSelected; } - let rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active; - let rippleColor = this.state.percent === 0 ? this.getTheme().handleColorZero : this.getTheme().rippleColor; + const rippleShowCondition = (this.state.hovered || this.state.focused) && !this.state.active; + const rippleColor = this.state.percent === 0 ? this.getTheme().handleColorZero : this.getTheme().rippleColor; let focusRipple; if (!this.props.disabled && !this.props.disableFocusRipple) { focusRipple = ( diff --git a/src/styles/transformers/rtl.js b/src/styles/transformers/rtl.js index b2e5c284271c86..2be68b2982af72 100644 --- a/src/styles/transformers/rtl.js +++ b/src/styles/transformers/rtl.js @@ -21,7 +21,7 @@ export default function rtl(muiTheme) { borderLeft: 'borderRight', }; - let newStyle = {}; + const newStyle = {}; Object.keys(style).forEach(function(attribute) { let value = style[attribute]; diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx index bd1f26f97693f9..3d9e75653ed64d 100644 --- a/src/table/table-body.jsx +++ b/src/table/table-body.jsx @@ -174,7 +174,7 @@ const TableBody = React.createClass({ }, _createRows() { - let numChildren = React.Children.count(this.props.children); + const numChildren = React.Children.count(this.props.children); let rowNumber = 0; const handlers = { onCellClick: this._onCellClick, @@ -187,20 +187,20 @@ const TableBody = React.createClass({ return React.Children.map(this.props.children, (child) => { if (React.isValidElement(child)) { - let props = { + const props = { displayRowCheckbox: this.props.displayRowCheckbox, hoverable: this.props.showRowHover, selected: this._isRowSelected(rowNumber), striped: this.props.stripedRows && (rowNumber % 2 === 0), rowNumber: rowNumber++, }; - let checkboxColumn = this._createRowCheckboxColumn(props); + const checkboxColumn = this._createRowCheckboxColumn(props); if (rowNumber === numChildren) { props.displayBorder = false; } - let children = [checkboxColumn]; + const children = [checkboxColumn]; React.Children.forEach(child.props.children, (child) => { children.push(child); }); @@ -213,7 +213,7 @@ const TableBody = React.createClass({ _createRowCheckboxColumn(rowProps) { if (!this.props.displayRowCheckbox) return null; - let key = `${rowProps.rowNumber}-cb`; + const key = `${rowProps.rowNumber}-cb`; const checkbox = ( 0) ? -1 : 1; // This forces offset to approach 0 from either direction. + const values = []; + const dir = (offset > 0) ? -1 : 1; // This forces offset to approach 0 from either direction. while (offset !== 0) { values.push(start + offset); offset += dir; @@ -362,10 +362,10 @@ const TableBody = React.createClass({ }, _flattenRanges(selectedRows) { - let rows = []; - for (let selection of selectedRows) { + const rows = []; + for (const selection of selectedRows) { if (typeof selection === 'object') { - let values = this._genRangeOfValues(selection.end, selection.start - selection.end); + const values = this._genRangeOfValues(selection.end, selection.start - selection.end); rows.push(selection.end, ...values); } else { rows.push(selection); @@ -406,7 +406,7 @@ const TableBody = React.createClass({ }, render() { - let { + const { className, style, ...other, @@ -416,7 +416,7 @@ const TableBody = React.createClass({ prepareStyles, } = this.state.muiTheme; - let rows = this._createRows(); + const rows = this._createRows(); return ( diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx index f41658cbaf38cf..53e1115e54716d 100644 --- a/src/table/table-header-column.jsx +++ b/src/table/table-header-column.jsx @@ -110,7 +110,7 @@ const TableHeaderColumn = React.createClass({ }, render() { - let { + const { children, className, columnNumber, @@ -126,16 +126,18 @@ const TableHeaderColumn = React.createClass({ } = this.state.muiTheme; const styles = getStyles(this.props, this.state); - let handlers = { + const handlers = { onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: this._onClick, }; - if (this.props.tooltip !== undefined) { - tooltip = ( + let tooltipNode; + + if (tooltip !== undefined) { + tooltipNode = ( @@ -150,7 +152,7 @@ const TableHeaderColumn = React.createClass({ {...handlers} {...other} > - {tooltip} + {tooltipNode} {children} ); diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx index 632b84f8533d28..35384db225acee 100644 --- a/src/table/table-header.jsx +++ b/src/table/table-header.jsx @@ -103,16 +103,16 @@ const TableHeader = React.createClass({ }, _createSuperHeaderRows() { - let numChildren = React.Children.count(this.props.children); + const numChildren = React.Children.count(this.props.children); if (numChildren === 1) return undefined; - let superHeaders = []; + const superHeaders = []; for (let index = 0; index < numChildren - 1; index++) { - let child = this.props.children[index]; + const child = this.props.children[index]; if (!React.isValidElement(child)) continue; - let props = { + const props = { key: `sh${index}`, rowNumber: index, }; @@ -123,7 +123,7 @@ const TableHeader = React.createClass({ }, _createSuperHeaderRow(child, props) { - let children = []; + const children = []; if (this.props.adjustForCheckbox) { children.push(this._getCheckboxPlaceholder(props)); } @@ -135,14 +135,14 @@ const TableHeader = React.createClass({ }, _createBaseHeaderRow() { - let numChildren = React.Children.count(this.props.children); - let child = (numChildren === 1) ? this.props.children : this.props.children[numChildren - 1]; - let props = { + const numChildren = React.Children.count(this.props.children); + const child = (numChildren === 1) ? this.props.children : this.props.children[numChildren - 1]; + const props = { key: `h${numChildren}`, rowNumber: numChildren, }; - let children = [this._getSelectAllCheckboxColumn(props)]; + const children = [this._getSelectAllCheckboxColumn(props)]; React.Children.forEach(child.props.children, (child) => { children.push(child); }); @@ -188,7 +188,7 @@ const TableHeader = React.createClass({ }, render() { - let { + const { className, style, ...other, @@ -200,8 +200,8 @@ const TableHeader = React.createClass({ const styles = getStyles(this.props, this.state); - let superHeaderRows = this._createSuperHeaderRows(); - let baseHeaderRow = this._createBaseHeaderRow(); + const superHeaderRows = this._createSuperHeaderRows(); + const baseHeaderRow = this._createBaseHeaderRow(); return ( diff --git a/src/table/table-row-column.jsx b/src/table/table-row-column.jsx index 533f94ac57fc0d..5a1d489623886a 100644 --- a/src/table/table-row-column.jsx +++ b/src/table/table-row-column.jsx @@ -6,7 +6,7 @@ function getStyles(props, state) { tableRowColumn, } = state.muiTheme; - let styles = { + const styles = { root: { paddingLeft: tableRowColumn.spacing, paddingRight: tableRowColumn.spacing, @@ -125,7 +125,7 @@ const TableRowColumn = React.createClass({ }, render() { - let { + const { children, className, columnNumber, @@ -143,7 +143,7 @@ const TableRowColumn = React.createClass({ const styles = getStyles(this.props, this.state); - let handlers = { + const handlers = { onClick: this._onClick, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, diff --git a/src/table/table-row.jsx b/src/table/table-row.jsx index 69fa838edfc7d5..454c866ab7d0ca 100644 --- a/src/table/table-row.jsx +++ b/src/table/table-row.jsx @@ -200,7 +200,7 @@ const TableRow = React.createClass({ }, render() { - let { + const { className, displayBorder, hoverable, diff --git a/src/table/table.jsx b/src/table/table.jsx index 8106260bf191da..ef0b27adcc72a3 100644 --- a/src/table/table.jsx +++ b/src/table/table.jsx @@ -261,7 +261,7 @@ const Table = React.createClass({ }, render() { - let { + const { children, className, fixedFooter, @@ -287,7 +287,7 @@ const Table = React.createClass({ React.Children.forEach(children, (child) => { if (!React.isValidElement(child)) return; - let displayName = child.type.displayName; + const displayName = child.type.displayName; if (displayName === 'TableBody') { tBody = this._createTableBody(child); } else if (displayName === 'TableHeader') { @@ -300,7 +300,7 @@ const Table = React.createClass({ // If we could not find a table-header and a table-body, do not attempt to display anything. if (!tBody && !tHead) return null; - let mergedTableStyle = Object.assign(styles.root, style); + const mergedTableStyle = Object.assign(styles.root, style); let headerTable; let footerTable; let inlineHeader; diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx index 89fda8a4ca89cf..b15ff0bc3e8cca 100644 --- a/src/tabs/tabs.jsx +++ b/src/tabs/tabs.jsx @@ -100,8 +100,8 @@ const Tabs = React.createClass({ }, getInitialState() { - let valueLink = this.getValueLink(this.props); - let initialIndex = this.props.initialSelectedIndex; + const valueLink = this.getValueLink(this.props); + const initialIndex = this.props.initialSelectedIndex; return { selectedIndex: valueLink.value !== undefined ? @@ -153,7 +153,7 @@ const Tabs = React.createClass({ }, _getSelectedIndex(props) { - let valueLink = this.getValueLink(props); + const valueLink = this.getValueLink(props); let selectedIndex = -1; React.Children.forEach(props.children, (tab, index) => { @@ -166,8 +166,8 @@ const Tabs = React.createClass({ }, _handleTabTouchTap(value, e, tab) { - let valueLink = this.getValueLink(this.props); - let tabIndex = tab.props.tabIndex; + const valueLink = this.getValueLink(this.props); + const tabIndex = tab.props.tabIndex; if ((valueLink.value && valueLink.value !== value) || this.state.selectedIndex !== tabIndex) { @@ -182,13 +182,13 @@ const Tabs = React.createClass({ }, _getSelected(tab, index) { - let valueLink = this.getValueLink(this.props); + const valueLink = this.getValueLink(this.props); return valueLink.value ? valueLink.value === tab.props.value : this.state.selectedIndex === index; }, render() { - let { + const { children, contentContainerClassName, contentContainerStyle, @@ -206,13 +206,13 @@ const Tabs = React.createClass({ const styles = getStyles(this.props, this.state); - let valueLink = this.getValueLink(this.props); - let tabValue = valueLink.value; - let tabContent = []; + const valueLink = this.getValueLink(this.props); + const tabValue = valueLink.value; + const tabContent = []; const width = 100 / this.getTabCount(); - let tabs = React.Children.map(children, (tab, index) => { + const tabs = React.Children.map(children, (tab, index) => { warning(tab.type && tab.type.displayName === 'Tab', `Tabs only accepts Tab Components as children. Found ${tab.type.displayName || tab.type} as child number ${index + 1} of Tabs`); diff --git a/src/tooltip.jsx b/src/tooltip.jsx index 52a7d35a824fd4..42c31573e0881e 100644 --- a/src/tooltip.jsx +++ b/src/tooltip.jsx @@ -137,11 +137,11 @@ const Tooltip = React.createClass({ _setRippleSize() { const ripple = this.refs.ripple; const tooltip = this.refs.tooltip; - let tooltipWidth = parseInt(tooltip.offsetWidth, 10) / + const tooltipWidth = parseInt(tooltip.offsetWidth, 10) / (this.props.horizontalPosition === 'center' ? 2 : 1); - let tooltipHeight = parseInt(tooltip.offsetHeight, 10); + const tooltipHeight = parseInt(tooltip.offsetHeight, 10); - let rippleDiameter = Math.ceil((Math.sqrt(Math.pow(tooltipHeight, 2) + + const rippleDiameter = Math.ceil((Math.sqrt(Math.pow(tooltipHeight, 2) + Math.pow(tooltipWidth, 2) ) * 2)); if (this.props.show) { ripple.style.height = `${rippleDiameter}px`; diff --git a/src/utils/children.js b/src/utils/children.js index aa404564dcd817..714f73d6acf394 100644 --- a/src/utils/children.js +++ b/src/utils/children.js @@ -4,12 +4,12 @@ import createFragment from 'react-addons-create-fragment'; export default { create(fragments) { - let newFragments = {}; + const newFragments = {}; let validChildrenCount = 0; let firstKey; //Only create non-empty key fragments - for (let key in fragments) { + for (const key in fragments) { const currentChild = fragments[key]; if (currentChild) { diff --git a/src/utils/color-manipulator.js b/src/utils/color-manipulator.js index 6b3c6a006ef710..1c33783f8ca5bb 100644 --- a/src/utils/color-manipulator.js +++ b/src/utils/color-manipulator.js @@ -18,7 +18,7 @@ export default { color = this._decomposeColor(color); if (color.type.indexOf('rgb') > -1) { - let rgb = color.values.map((val) => { + const rgb = color.values.map((val) => { val /= 255; // normalized return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4); }); @@ -65,7 +65,7 @@ export default { color = extendedColor; } - let values = { + const values = { r: parseInt(color.substr(1, 2), 16), g: parseInt(color.substr(3, 2), 16), b: parseInt(color.substr(5, 2), 16), @@ -80,9 +80,9 @@ export default { return this._decomposeColor(this._convertHexToRGB(color)); } - let marker = color.indexOf('('); - let type = color.substring(0, marker); - let values = color.substring(marker + 1, color.length - 1).split(','); + const marker = color.indexOf('('); + const type = color.substring(0, marker); + const values = color.substring(marker + 1, color.length - 1).split(','); return {type: type, values: values}; }, @@ -135,8 +135,8 @@ export default { // // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef contrastRatio(background, foreground) { - let lumA = this.luminance(background); - let lumB = this.luminance(foreground); + const lumA = this.luminance(background); + const lumB = this.luminance(foreground); if (lumA >= lumB) { return ((lumA + 0.05) / (lumB + 0.05)).toFixed(2); @@ -151,7 +151,7 @@ export default { * https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js */ contrastRatioLevel(background, foreground) { - let levels = { + const levels = { 'fail': { range: [0, 3], color: 'hsl(0, 100%, 40%)', @@ -170,10 +170,10 @@ export default { }, }; - let ratio = this.contrastRatio(background, foreground); + const ratio = this.contrastRatio(background, foreground); - for (let level in levels) { - let range = levels[level].range; + for (const level in levels) { + const range = levels[level].range; if (ratio >= range[0] && ratio <= range[1]) return level; } }, diff --git a/src/utils/css-event.js b/src/utils/css-event.js index 98685bedd5a792..be4af021c7dfcc 100644 --- a/src/utils/css-event.js +++ b/src/utils/css-event.js @@ -34,7 +34,7 @@ export default { }, onTransitionEnd(el, callback) { - let transitionEnd = this.transitionEndEventName(); + const transitionEnd = this.transitionEndEventName(); Events.once(el, transitionEnd, () => { return callback(); @@ -42,7 +42,7 @@ export default { }, onAnimationEnd(el, callback) { - let animationEnd = this.animationEndEventName(); + const animationEnd = this.animationEndEventName(); Events.once(el, animationEnd, () => { return callback(); diff --git a/src/utils/date-time.js b/src/utils/date-time.js index f814f4b43a8e37..4b94dfe46509a5 100644 --- a/src/utils/date-time.js +++ b/src/utils/date-time.js @@ -60,7 +60,7 @@ export default { }, getDaysInMonth(d) { - let resultDate = this.getFirstDayOfMonth(d); + const resultDate = this.getFirstDayOfMonth(d); resultDate.setMonth(resultDate.getMonth() + 1); resultDate.setDate(resultDate.getDate() - 1); @@ -78,9 +78,9 @@ export default { }, getWeekArray(d, firstDayOfWeek) { - let dayArray = []; - let daysInMonth = this.getDaysInMonth(d); - let weekArray = []; + const dayArray = []; + const daysInMonth = this.getDaysInMonth(d); + const weekArray = []; let week = []; for (let i = 1; i <= daysInMonth; i++) { diff --git a/src/utils/dom.js b/src/utils/dom.js index 5964d26190b6d4..55af683d541b89 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -12,7 +12,7 @@ export default { }, offset(el) { - let rect = el.getBoundingClientRect(); + const rect = el.getBoundingClientRect(); return { top: rect.top + document.body.scrollTop, left: rect.left + document.body.scrollLeft, diff --git a/src/utils/events.js b/src/utils/events.js index f3145ae9023557..2d8df6032480a4 100644 --- a/src/utils/events.js +++ b/src/utils/events.js @@ -1,8 +1,8 @@ export default { once(el, type, callback) { - let typeArray = type ? type.split(' ') : []; - let recursiveFunction = (e) => { + const typeArray = type ? type.split(' ') : []; + const recursiveFunction = (e) => { e.target.removeEventListener(e.type, recursiveFunction); return callback(e); }; diff --git a/test/checkbox-spec.js b/test/checkbox-spec.js index 6947876a2a6649..820f173908caad 100644 --- a/test/checkbox-spec.js +++ b/test/checkbox-spec.js @@ -15,10 +15,10 @@ describe('Checkbox', () => { it('should display checkmark when checked by default', () => { - let render = TestUtils.renderIntoDocument(); - let input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); - let svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg'); - let checkMarkNode = svgs[1]; + const render = TestUtils.renderIntoDocument(); + const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); + const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg'); + const checkMarkNode = svgs[1]; expect(input.hasAttribute('checked')).to.be.true; expect(checkMarkNode.style.opacity).to.equal('1'); @@ -27,10 +27,10 @@ describe('Checkbox', () => { it('should NOT display checkmark when not checked by default', () => { - let render = TestUtils.renderIntoDocument(); - let input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); - let svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg'); - let checkMarkNode = svgs[1]; + const render = TestUtils.renderIntoDocument(); + const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); + const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg'); + const checkMarkNode = svgs[1]; expect(input.hasAttribute('checked')).to.be.false; expect(checkMarkNode.style.opacity).to.equal('0'); @@ -48,29 +48,29 @@ describe('Checkbox', () => { it('should display checkmark when clicked once', () => { - let input = TestUtils.findRenderedDOMComponentWithTag(renderedCheckbox, 'input'); - let inputNode = input; + const input = TestUtils.findRenderedDOMComponentWithTag(renderedCheckbox, 'input'); + const inputNode = input; inputNode.checked = !inputNode.checked; TestUtils.Simulate.change(input); - let svgs = TestUtils.scryRenderedDOMComponentsWithTag(renderedCheckbox, 'svg'); - let checkMarkNode = svgs[1]; + const svgs = TestUtils.scryRenderedDOMComponentsWithTag(renderedCheckbox, 'svg'); + const checkMarkNode = svgs[1]; expect(checkMarkNode.style.opacity).to.equal('1'); expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH); }); it('should NOT display checkmark when clicked twice', () => { - let input = TestUtils.findRenderedDOMComponentWithTag(renderedCheckbox, 'input'); - let inputNode = input; + const input = TestUtils.findRenderedDOMComponentWithTag(renderedCheckbox, 'input'); + const inputNode = input; // Simulate events inputNode.checked = !inputNode.checked; TestUtils.Simulate.change(input); inputNode.checked = !inputNode.checked; TestUtils.Simulate.change(input); - let svgs = TestUtils.scryRenderedDOMComponentsWithTag(renderedCheckbox, 'svg'); - let checkMarkNode = svgs[1]; + const svgs = TestUtils.scryRenderedDOMComponentsWithTag(renderedCheckbox, 'svg'); + const checkMarkNode = svgs[1]; expect(checkMarkNode.style.opacity).to.equal('0'); expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH); }); diff --git a/test/date-picker/calendar-spec.js b/test/date-picker/calendar-spec.js index ff3a4948835605..612b324588b62c 100644 --- a/test/date-picker/calendar-spec.js +++ b/test/date-picker/calendar-spec.js @@ -19,10 +19,10 @@ describe(`Calendar`, () => { describe(`Next Month Button`, () => { it(`should initially be disabled if the current month is the same as the month in the maxDate prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT - let maxDate = new Date(initialDate.toDateString()); + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const maxDate = new Date(initialDate.toDateString()); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { maxDate={maxDate} /> ); - let renderedCalendarToolbar = + const renderedCalendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(renderedCalendarToolbar.props.nextMonth).to.be.false; }); it(`should initially be disabled if the current month is after the month in the maxDate prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT let maxDate = new Date(initialDate.toDateString()); maxDate = DateTime.addMonths(maxDate, -1); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { maxDate={maxDate} /> ); - let renderedCalendarToolbar = + const renderedCalendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(renderedCalendarToolbar.props.nextMonth).to.be.false; }); it(`should initially enable the next month button if the current month is before the maxDate prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT let maxDate = new Date(initialDate.toDateString()); maxDate = DateTime.addMonths(maxDate, 1); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { /> ); - let renderedCalendarToolbar = + const renderedCalendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(renderedCalendarToolbar.props.nextMonth).to.be.true; }); it(`should reenable the next month button when the current month is before the maxDate prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT - let maxDate = new Date(initialDate.toDateString()); + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const maxDate = new Date(initialDate.toDateString()); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { maxDate={maxDate} /> ); - let prevMonthButton = ReactDOM.findDOMNode( + const prevMonthButton = ReactDOM.findDOMNode( TestUtils.scryRenderedComponentsWithType(render, IconButton)[0]); TestUtils.Simulate.touchTap(prevMonthButton); - let renderedCalendarToolbar = + const renderedCalendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(renderedCalendarToolbar.props.nextMonth).to.be.true; }); it(`should redisable the next month button when the current month is the same as the maxDate prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT let maxDate = new Date(initialDate.toDateString()); maxDate = DateTime.addMonths(maxDate, 1); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { maxDate={maxDate} /> ); - let nextMonthButton = ReactDOM.findDOMNode( + const nextMonthButton = ReactDOM.findDOMNode( TestUtils.scryRenderedComponentsWithType(render, IconButton)[1]); TestUtils.Simulate.touchTap(nextMonthButton); - let renderedCalendarToolbar = + const renderedCalendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(renderedCalendarToolbar.props.nextMonth).to.be.false; @@ -124,10 +124,10 @@ describe(`Calendar`, () => { describe('Previous Month Button', () => { it(`should initially disable the previous month button if the current month is the same as the minDate month prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT - let minDate = new Date(initialDate.toDateString()); + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const minDate = new Date(initialDate.toDateString()); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { minDate={minDate} /> ); - let calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); + const calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(calendarToolbar.props.prevMonth).to.be.false; }); it(`should initially disable the previous month button if the current month is before the minDate month prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT let minDate = new Date(initialDate.toDateString()); minDate = DateTime.addMonths(initialDate, 1); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { minDate={minDate} /> ); - let calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); + const calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(calendarToolbar.props.prevMonth).to.be.false; }); it(`should initially enable the previous month button if the current month is after the minDate month prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT let minDate = new Date(initialDate.toDateString()); minDate = DateTime.addMonths(initialDate, -1); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { minDate={minDate} /> ); - let calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); + const calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(calendarToolbar.props.prevMonth).to.be.true; }); it(`should enable the previous month button when the current month is after the minDate month prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT - let minDate = new Date(initialDate.toDateString()); + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const minDate = new Date(initialDate.toDateString()); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { /> ); - let nextMonthIconButton = ReactDOM.findDOMNode(TestUtils.scryRenderedComponentsWithType(render, IconButton)[1]); + const nextMonthIconButton = ReactDOM.findDOMNode(TestUtils.scryRenderedComponentsWithType(render, IconButton)[1]); TestUtils.Simulate.touchTap(nextMonthIconButton); - let calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); + const calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(calendarToolbar.props.prevMonth).to.be.true; }); it(`should disable the previous month button when the current month is the same as the minDate month prop`, () => { - let initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT + const initialDate = new Date(1448967059892); // Tue, 01 Dec 2015 10:50:59 GMT let minDate = new Date(initialDate.toDateString()); minDate = DateTime.addMonths(minDate, -1); - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( { /> ); - let prevMonthIconButton = ReactDOM.findDOMNode(TestUtils.scryRenderedComponentsWithType(render, IconButton)[0]); + const prevMonthIconButton = ReactDOM.findDOMNode(TestUtils.scryRenderedComponentsWithType(render, IconButton)[0]); TestUtils.Simulate.touchTap(prevMonthIconButton); - let calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); + const calendarToolbar = TestUtils.findRenderedComponentWithType(render, CalendarToolbar); expect(calendarToolbar.props.prevMonth).to.be.false; }); }); diff --git a/test/dialog-spec.js b/test/dialog-spec.js index 8b92ef24b50df2..a7415c711f96e9 100644 --- a/test/dialog-spec.js +++ b/test/dialog-spec.js @@ -5,7 +5,7 @@ import TestUtils from 'react-addons-test-utils'; describe('Dialog', () => { it('appends a dialog to the document body', () => { - let testClass = 'test-dialog-class'; + const testClass = 'test-dialog-class'; TestUtils.renderIntoDocument( { /> ); - let dialogEl = document.getElementsByClassName(testClass)[0]; + const dialogEl = document.getElementsByClassName(testClass)[0]; expect(dialogEl).to.be.ok; }); it('registers events on dialog actions', () => { - let clickSpy = spy(); - let testClass = 'dialog-action'; + const clickSpy = spy(); + const testClass = 'dialog-action'; TestUtils.renderIntoDocument( { /> ); - let actionEl = document.getElementsByClassName(testClass)[0]; + const actionEl = document.getElementsByClassName(testClass)[0]; expect(actionEl).to.be.ok; TestUtils.Simulate.click(actionEl); diff --git a/test/fixtures/inject-theme.jsx b/test/fixtures/inject-theme.jsx index 9062bd6579a052..40fc1e8701dad0 100644 --- a/test/fixtures/inject-theme.jsx +++ b/test/fixtures/inject-theme.jsx @@ -3,7 +3,7 @@ import stubContext from '../react-stub-context'; import getMuiTheme from 'styles/getMuiTheme'; function injectTheme(Component, theme) { - let injectedTheme = theme || getMuiTheme(); + const injectedTheme = theme || getMuiTheme(); return stubContext(Component, {muiTheme: injectedTheme}); } diff --git a/test/lists/list-item-spec.js b/test/lists/list-item-spec.js index 3b80aa2a4e972c..a938fc9e01291c 100644 --- a/test/lists/list-item-spec.js +++ b/test/lists/list-item-spec.js @@ -12,64 +12,64 @@ describe('ListItem', () => { }); it('should display a list-item', () => { - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( ); - let nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); - let itemSpan = nodeTree[0].firstChild; + const nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); + const itemSpan = nodeTree[0].firstChild; expect(itemSpan.tagName).to.equal('SPAN'); }); it('should display a list-item with text if primaryText is specified', () => { - let testText = 'Primary Text'; - let render = TestUtils.renderIntoDocument( + const testText = 'Primary Text'; + const render = TestUtils.renderIntoDocument( ); - let nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); - let itemSpan = nodeTree[0].firstChild; + const nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); + const itemSpan = nodeTree[0].firstChild; expect(itemSpan.childNodes[0].innerText).to.equal(testText); }); it('should display a list-item elment with a class if specified', () => { - let testClass = 'test-class'; - let render = TestUtils.renderIntoDocument( + const testClass = 'test-class'; + const render = TestUtils.renderIntoDocument( ); - let nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); - let itemSpan = nodeTree[0].firstChild; + const nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); + const itemSpan = nodeTree[0].firstChild; expect(itemSpan.hasAttribute('class')).to.be.true; expect(itemSpan.getAttribute('class')).to.equal(testClass); }); it('should display a disabled list-item if specified.', () => { - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( ); - let nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); - let itemDiv = nodeTree[0].firstChild; + const nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); + const itemDiv = nodeTree[0].firstChild; expect(itemDiv.tagName).to.equal('DIV'); }); it('should display a disabled list-item with a class if specified.', () => { - let testClass = 'test-class'; - let render = TestUtils.renderIntoDocument( + const testClass = 'test-class'; + const render = TestUtils.renderIntoDocument( ); - let nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); - let itemDiv = nodeTree[0].firstChild; + const nodeTree = TestUtils.scryRenderedDOMComponentsWithTag(render, 'div'); + const itemDiv = nodeTree[0].firstChild; expect(itemDiv.tagName).to.equal('DIV'); expect(itemDiv.hasAttribute('class')).to.be.true; @@ -77,28 +77,28 @@ describe('ListItem', () => { }); it('should display a checkbox in the list-item if specified.', () => { - let render = TestUtils.renderIntoDocument( + const render = TestUtils.renderIntoDocument( } /> ); - let input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); + const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); expect(input.parentElement.tagName).to.equal('DIV'); expect(input.hasAttribute('checked')).to.be.false; }); it('should have a class if specified with a checkbox.', () => { - let testClass = 'test-class'; - let render = TestUtils.renderIntoDocument( + const testClass = 'test-class'; + const render = TestUtils.renderIntoDocument( } className={testClass} /> ); - let input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); - let listItemDiv = input.parentElement.parentElement; + const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input'); + const listItemDiv = input.parentElement.parentElement; expect(listItemDiv.tagName).to.equal('LABEL'); expect(listItemDiv.hasAttribute('class')).to.be.true; diff --git a/test/react-stub-context.js b/test/react-stub-context.js index 9fc18ea94e0f4a..0ca3c00a53b580 100644 --- a/test/react-stub-context.js +++ b/test/react-stub-context.js @@ -5,8 +5,8 @@ const React = require('react'); function stubContext(BaseComponent, context) { if (typeof context === 'undefined' || context === null) context = {}; - let _contextTypes = {}; - let _context = context; + const _contextTypes = {}; + const _context = context; try { Object.keys(_context).forEach(function(key) { @@ -16,7 +16,7 @@ function stubContext(BaseComponent, context) { throw new TypeError('createdStubbedContextComponent requires an object'); } - let StubbedContextParent = React.createClass({ + const StubbedContextParent = React.createClass({ displayName: 'StubbedContextParent', propTypes: { children: React.PropTypes.node, @@ -31,7 +31,7 @@ function stubContext(BaseComponent, context) { }, }); - let StubbedContextHandler = React.createClass({ + const StubbedContextHandler = React.createClass({ displayName: 'StubbedContextHandler', childContextTypes: _contextTypes, getChildContext() { diff --git a/test/theming-v12-spec.js b/test/theming-v12-spec.js index 803347c5667637..b1ce5c5eeef3bd 100644 --- a/test/theming-v12-spec.js +++ b/test/theming-v12-spec.js @@ -14,9 +14,9 @@ describe('Theming', () => { describe('When no theme is specified, AppBar', () => { it('should display with default light theme', () => { - let renderedAppbar = TestUtils.renderIntoDocument(); - let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); - let firstDiv = appbarDivs[0]; + const renderedAppbar = TestUtils.renderIntoDocument(); + const appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + const firstDiv = appbarDivs[0]; expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 188, 212)'); }); @@ -28,21 +28,21 @@ describe('Theming', () => { it('should display with passed down dark theme', () => { - let renderedAppbar = TestUtils.renderIntoDocument(); - let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); - let firstDiv = appbarDivs[0]; + const renderedAppbar = TestUtils.renderIntoDocument(); + const appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + const firstDiv = appbarDivs[0]; expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)'); }); it('should display with passed down dark theme and overriden specific attribute', () => { - let renderedAppbar = TestUtils.renderIntoDocument(); - let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); - let firstDiv = appbarDivs[0]; + const renderedAppbar = TestUtils.renderIntoDocument(); + const appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + const firstDiv = appbarDivs[0]; - let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1'); - let firstH1 = appbarH1s[0]; + const appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1'); + const firstH1 = appbarH1s[0]; expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)'); expect(firstH1.style.color).to.equal('rgb(98, 0, 234)'); @@ -53,20 +53,20 @@ describe('Theming', () => { describe('using MuiThemeProvider, AppBar', () => { it('should display with passed down dark theme', () => { - let renderedAppbar = TestUtils.renderIntoDocument(); - let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); - let firstDiv = appbarDivs[0]; + const renderedAppbar = TestUtils.renderIntoDocument(); + const appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + const firstDiv = appbarDivs[0]; expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)'); }); it('should display with passed down dark theme and overriden specific attribute', () => { - let renderedAppbar = TestUtils.renderIntoDocument(); - let appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); - let firstDiv = appbarDivs[0]; + const renderedAppbar = TestUtils.renderIntoDocument(); + const appbarDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'div'); + const firstDiv = appbarDivs[0]; - let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1'); - let firstH1 = appbarH1s[0]; + const appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedAppbar, 'h1'); + const firstH1 = appbarH1s[0]; expect(firstDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)'); expect(firstH1.style.color).to.equal('rgb(98, 0, 234)'); @@ -78,13 +78,13 @@ describe('Theming', () => { describe('When theme is updated through button click, AppBar', () => { it('should display with updated theme', () => { - let renderedComponent = TestUtils.renderIntoDocument(); - let componentDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'div'); - let appbarDiv = componentDivs[1]; - let buttonNode = (TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'button'))[1]; + const renderedComponent = TestUtils.renderIntoDocument(); + const componentDivs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'div'); + const appbarDiv = componentDivs[1]; + const buttonNode = (TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'button'))[1]; - let appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'h1'); - let firstH1 = appbarH1s[0]; + const appbarH1s = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'h1'); + const firstH1 = appbarH1s[0]; expect(appbarDiv.style.backgroundColor).to.equal('rgb(0, 151, 167)'); expect(firstH1.style.color).to.equal('rgb(48, 48, 48)'); @@ -124,7 +124,7 @@ const AppBarDarkUsingContextWithOverride = React.createClass({ }, getInitialState() { - let newMuiTheme = getMuiTheme(darkBaseTheme); + const newMuiTheme = getMuiTheme(darkBaseTheme); newMuiTheme.appBar.textColor = Colors.deepPurpleA700; return { @@ -189,7 +189,7 @@ const ButtonToUpdateThemeWithAppBar = React.createClass({ }, handleClick() { - let newMuiThemeWithOverride = getMuiTheme(); + const newMuiThemeWithOverride = getMuiTheme(); newMuiThemeWithOverride.appBar.textColor = Colors.deepPurpleA700; this.setState({