From 66e42d782e846367d832b97a80583448cb58b721 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Jun 2018 23:55:16 +0200 Subject: [PATCH] [core] Upgrade eslint (#11957) --- .eslintrc.js | 32 ++- .../modules/components/AppDrawerNavItem.js | 2 +- docs/src/modules/components/AppSearch.js | 4 +- docs/src/modules/components/AppWrapper.js | 45 ++-- docs/src/modules/components/Carbon.js | 4 +- docs/src/modules/components/Demo.js | 6 +- docs/src/modules/components/GoogleTag.js | 4 +- docs/src/modules/components/Notifications.js | 12 +- docs/src/modules/components/withRoot.js | 4 +- docs/src/modules/utils/generateMarkdown.js | 2 + .../customization/css-in-js/JssRegistry.js | 4 +- .../autocomplete/IntegrationDownshift.js | 9 +- .../src/pages/demos/cards/RecipeReviewCard.js | 2 +- docs/src/pages/demos/chips/ChipsArray.js | 10 +- .../pages/demos/dialogs/ConfirmationDialog.js | 24 +-- .../pages/demos/drawers/ResponsiveDrawer.js | 2 +- docs/src/pages/demos/lists/NestedList.js | 2 +- .../pages/demos/menus/MenuListComposition.js | 2 +- docs/src/pages/demos/menus/SimpleListMenu.js | 4 +- .../demos/progress/CircularDeterminate.js | 4 +- .../demos/progress/CircularIntegration.js | 4 +- .../pages/demos/progress/CircularStatic.js | 4 +- .../demos/progress/DelayingAppearance.js | 10 +- docs/src/pages/demos/progress/LinearBuffer.js | 4 +- .../pages/demos/progress/LinearDeterminate.js | 4 +- .../demos/snackbars/ConsecutiveSnackbars.js | 4 +- .../pages/demos/steppers/DotsMobileStepper.js | 12 +- .../demos/steppers/HorizontalLinearStepper.js | 29 +-- ...izontalNonLinearAlternativeLabelStepper.js | 69 +++--- .../steppers/HorizontalNonLinearStepper.js | 24 +-- .../HorizontalNonLinearStepperWithError.js | 29 +-- .../demos/steppers/ProgressMobileStepper.js | 12 +- .../demos/steppers/VerticalLinearStepper.js | 12 +- docs/src/pages/demos/tables/EnhancedTable.js | 2 +- .../demos/text-fields/InputAdornments.js | 2 +- docs/src/pages/lab/slider/DisabledSlider.js | 8 +- docs/src/pages/lab/slider/ReverseSlider.js | 13 +- docs/src/pages/lab/slider/SimpleSlider.js | 12 +- docs/src/pages/lab/slider/StepSlider.js | 12 +- docs/src/pages/lab/slider/VerticalSlider.js | 14 +- docs/src/pages/lab/slider/slider.md | 7 +- .../pages/lab/speed-dial/OpenIconSpeedDial.js | 12 +- docs/src/pages/lab/speed-dial/SpeedDials.js | 12 +- docs/src/pages/style/typography/Types.js | 12 +- .../pages/utils/popovers/AnchorPlayground.js | 4 +- docs/src/pages/utils/portal/SimplePortal.js | 6 +- .../pages/utils/transitions/SimpleCollapse.js | 2 +- .../src/pages/utils/transitions/SimpleFade.js | 2 +- .../src/pages/utils/transitions/SimpleGrow.js | 2 +- .../pages/utils/transitions/SimpleSlide.js | 2 +- .../src/pages/utils/transitions/SimpleZoom.js | 2 +- examples/gatsby/src/withRoot.js | 4 +- examples/nextjs/src/withRoot.js | 4 +- package.json | 10 +- .../src/v0.15.0/import-path.js | 4 +- packages/material-ui-lab/src/Slider/Slider.js | 106 ++++----- .../material-ui/src/ButtonBase/ButtonBase.js | 115 +++++----- .../material-ui/src/ButtonBase/TouchRipple.js | 68 +++--- .../ClickAwayListener/ClickAwayListener.js | 7 +- packages/material-ui/src/Collapse/Collapse.js | 10 +- .../src/CssBaseline/CssBaseline.js | 2 + .../src/DialogActions/DialogActions.test.js | 12 +- packages/material-ui/src/Drawer/Drawer.js | 10 +- .../src/ExpansionPanel/ExpansionPanel.js | 4 +- .../ExpansionPanelActions.test.js | 6 +- .../src/GridListTile/GridListTile.js | 12 +- packages/material-ui/src/Grow/Grow.js | 9 +- packages/material-ui/src/Input/Input.js | 7 +- packages/material-ui/src/Input/Textarea.js | 87 ++++---- packages/material-ui/src/Menu/Menu.js | 4 +- packages/material-ui/src/MenuList/MenuList.js | 12 +- packages/material-ui/src/Modal/Modal.js | 64 +++--- packages/material-ui/src/Popover/Popover.js | 24 +-- .../material-ui/src/Select/SelectInput.js | 39 ++-- packages/material-ui/src/Slide/Slide.js | 55 ++--- packages/material-ui/src/Snackbar/Snackbar.js | 36 ++-- .../src/StepContent/StepContent.test.js | 2 +- .../material-ui/src/StepIcon/StepIcon.test.js | 2 +- .../src/StepLabel/StepLabel.test.js | 2 +- .../src/SwipeableDrawer/SwipeableDrawer.js | 66 +++--- packages/material-ui/src/Tab/Tab.js | 4 +- .../TablePagination/TablePagination.test.js | 2 +- .../material-ui/src/Tabs/ScrollbarSize.js | 22 +- packages/material-ui/src/Tabs/Tabs.js | 85 ++++---- packages/material-ui/src/Tooltip/Tooltip.js | 37 ++-- .../material-ui/src/Tooltip/Tooltip.test.js | 22 +- .../material-ui/src/internal/SwitchBase.js | 7 +- .../src/styles/MuiThemeProvider.js | 12 +- .../src/styles/colorManipulator.js | 2 +- .../src/styles/createPalette.test.js | 4 +- packages/material-ui/src/styles/withStyles.js | 22 +- .../material-ui/src/styles/withStyles.test.js | 2 +- packages/material-ui/src/styles/withTheme.js | 4 +- .../material-ui/src/test-utils/until.test.js | 6 +- packages/material-ui/src/utils/ownerWindow.js | 2 +- .../src/utils/reactHelpers.test.js | 2 +- .../material-ui/src/withWidth/withWidth.js | 18 +- pages/api/popover.md | 2 +- test/regressions/tests/Input/Inputs.js | 4 +- yarn.lock | 201 ++++++++++-------- 100 files changed, 943 insertions(+), 821 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index cf70ab517d563d..3a2d667698d469 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,12 +27,13 @@ module.exports = { }, }, rules: { - 'linebreak-style': 'off', // Don't play nicely with Windows. - 'arrow-body-style': 'off', // Not our taste? + 'linebreak-style': 'off', // Don't play nicely with Windows + 'arrow-body-style': 'off', // Incompatible with prettier 'arrow-parens': 'off', // Incompatible with prettier 'object-curly-newline': 'off', // Incompatible with prettier 'function-paren-newline': 'off', // Incompatible with prettier indent: 'off', // Incompatible with prettier + 'implicit-arrow-linebreak': 'off', // Incompatible with prettier 'space-before-function-paren': 'off', // Incompatible with prettier 'no-confusing-arrow': 'off', // Incompatible with prettier 'no-mixed-operators': 'off', // Incompatible with prettier @@ -46,18 +47,15 @@ module.exports = { }, ], // airbnb is allowing some edge cases 'no-console': 'error', // airbnb is using warn + 'prefer-destructuring': 'off', // airbnb is using error. destructuring harm grep potential. 'no-alert': 'error', // airbnb is using warn - 'no-param-reassign': 'off', // Not our taste? + 'no-param-reassign': 'off', // airbnb use error 'no-prototype-builtins': 'off', // airbnb use error - 'object-curly-spacing': 'off', // use babel plugin rule - 'no-restricted-properties': 'off', // To remove once react-docgen support ** operator. - 'prefer-destructuring': 'off', // To remove once react-docgen support ** operator. + 'operator-linebreak': 'off', // airbnb use error - 'babel/object-curly-spacing': ['error', 'always'], - - 'import/unambiguous': 'off', // scripts - 'import/namespace': ['error', { allowComputed: true }], + // It would be better to enable this rule, but it might slow us down. 'import/no-extraneous-dependencies': 'off', + 'import/namespace': ['error', { allowComputed: true }], 'import/order': [ 'error', { @@ -70,6 +68,7 @@ module.exports = { 'react/jsx-closing-bracket-location': 'off', // Incompatible with prettier 'react/jsx-wrap-multilines': 'off', // Incompatible with prettier 'react/jsx-indent-props': 'off', // Incompatible with prettier + 'react/jsx-one-expression-per-line': 'off', // Incompatible with prettier 'react/jsx-handler-names': [ 'error', { @@ -78,16 +77,15 @@ module.exports = { eventHandlerPropPrefix: 'on', }, ], - 'react/require-default-props': 'off', // airbnb use error + 'react/jsx-curly-brace-presence': 'off', // airbnb use error, it's buggy 'react/forbid-prop-types': 'off', // airbnb use error + 'react/require-default-props': 'off', // airbnb use error, it's buggy + 'react/destructuring-assignment': 'off', // airbnb use error 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx 'react/no-danger': 'error', // airbnb is using warn - 'react/no-direct-mutation-state': 'error', // airbnb is disabling this rule - 'react/no-find-dom-node': 'off', // I don't know - 'react/no-unused-prop-types': 'off', // Is still buggy - 'react/sort-prop-types': 'error', // airbnb do nothing here. - 'react/default-props-match-prop-types': 'off', // Buggy - 'react/jsx-curly-brace-presence': 'off', // Buggy + 'react/no-direct-mutation-state': 'error', // airbnb is using off + 'react/no-find-dom-node': 'off', // airbnb use error + 'react/sort-prop-types': 'error', // airbnb use off 'material-ui/docgen-ignore-before-comment': 'error', diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 7b7c5e59d7534b..c92efa4e57ded6 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -57,7 +57,7 @@ class AppDrawerNavItem extends React.Component { } handleClick = () => { - this.setState({ open: !this.state.open }); + this.setState(state => ({ open: !state.open })); }; render() { diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index dee308426850a9..beceae5af8ad28 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -153,6 +153,8 @@ const styles = theme => ({ }); class AppSearch extends React.Component { + input = null; + handleKeyDown = event => { if ( ['/', 's'].indexOf(keycode(event)) !== -1 && @@ -164,8 +166,6 @@ class AppSearch extends React.Component { } }; - input = null; - render() { const { classes, width } = this.props; diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js index edc6f5c0944076..88be91e0945d08 100644 --- a/docs/src/modules/components/AppWrapper.js +++ b/docs/src/modules/components/AppWrapper.js @@ -30,6 +30,28 @@ function uiThemeSideEffect(uiTheme) { class AppWrapper extends React.Component { state = {}; + componentDidMount() { + uiThemeSideEffect(this.props.uiTheme); + + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side'); + if (jssStyles && jssStyles.parentNode) { + jssStyles.parentNode.removeChild(jssStyles); + } + + if ( + 'serviceWorker' in navigator && + process.env.NODE_ENV === 'production' && + window.location.host === 'material-ui.com' + ) { + navigator.serviceWorker.register('/sw.js'); + } + } + + componentDidUpdate() { + uiThemeSideEffect(this.props.uiTheme); + } + static getDerivedStateFromProps(nextProps, prevState) { if (typeof prevState.pageContext === 'undefined') { return { @@ -53,28 +75,6 @@ class AppWrapper extends React.Component { return null; } - componentDidMount() { - uiThemeSideEffect(this.props.uiTheme); - - // Remove the server-side injected CSS. - const jssStyles = document.querySelector('#jss-server-side'); - if (jssStyles && jssStyles.parentNode) { - jssStyles.parentNode.removeChild(jssStyles); - } - - if ( - 'serviceWorker' in navigator && - process.env.NODE_ENV === 'production' && - window.location.host === 'material-ui.com' - ) { - navigator.serviceWorker.register('/sw.js'); - } - } - - componentDidUpdate() { - uiThemeSideEffect(this.props.uiTheme); - } - render() { const { children } = this.props; const { pageContext } = this.state; @@ -97,6 +97,7 @@ class AppWrapper extends React.Component { AppWrapper.propTypes = { children: PropTypes.node.isRequired, + // eslint-disable-next-line react/no-unused-prop-types pageContext: PropTypes.object, uiTheme: PropTypes.object.isRequired, }; diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js index 883a0ab1c80d96..029c882f47b0d6 100644 --- a/docs/src/modules/components/Carbon.js +++ b/docs/src/modules/components/Carbon.js @@ -89,6 +89,8 @@ const styles = theme => ({ }); class Carbon extends React.Component { + timerAdblock = null; + state = { adblock: null, }; @@ -114,8 +116,6 @@ class Carbon extends React.Component { clearTimeout(this.timerAdblock); } - timerAdblock = null; - checkAdblock = (attempt = 1) => { if (document.querySelector('#carbonads')) { this.setState({ diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 4f97c7733d0165..5d5090b365255d 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -133,9 +133,9 @@ class Demo extends React.Component { }; handleClickCodeOpen = () => { - this.setState({ - codeOpen: !this.state.codeOpen, - }); + this.setState(state => ({ + codeOpen: !state.codeOpen, + })); }; handleClickCodeSandbox = () => { diff --git a/docs/src/modules/components/GoogleTag.js b/docs/src/modules/components/GoogleTag.js index de78ac354173d8..ed141b766df83f 100644 --- a/docs/src/modules/components/GoogleTag.js +++ b/docs/src/modules/components/GoogleTag.js @@ -2,6 +2,8 @@ import React from 'react'; import config from 'docs/src/config'; class GoogleTag extends React.Component { + googleTimer = null; + componentDidMount() { // Wait for the title to be updated. this.googleTimer = setTimeout(() => { @@ -15,8 +17,6 @@ class GoogleTag extends React.Component { clearTimeout(this.googleTimer); } - googleTimer = null; - render() { return null; } diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index b510f43c5789d5..01eb9ffedde123 100644 --- a/docs/src/modules/components/Notifications.js +++ b/docs/src/modules/components/Notifications.js @@ -38,6 +38,8 @@ async function getMessages() { } class Notifications extends React.Component { + mounted = false; + state = { open: false, message: {}, @@ -55,12 +57,6 @@ class Notifications extends React.Component { this.handleMessage(); } - componentWillUnmout() { - this.mounted = false; - } - - mounted = false; - handleMessage = () => { const lastSeen = getLastSeenNotification(); const unseenMessages = messages.filter(message => message.id > lastSeen); @@ -74,6 +70,10 @@ class Notifications extends React.Component { document.cookie = `lastSeenNotification=${this.state.message.id};path=/;max-age=31536000`; }; + componentWillUnmout() { + this.mounted = false; + } + render() { const { message, open } = this.state; diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js index da4df01b2cf03b..763cf600ace49c 100644 --- a/docs/src/modules/components/withRoot.js +++ b/docs/src/modules/components/withRoot.js @@ -262,6 +262,8 @@ function findActivePage(currentPages, router) { function withRoot(Component) { class WithRoot extends React.Component { + redux = null; + constructor(props) { super(props); @@ -284,8 +286,6 @@ function withRoot(Component) { }; } - redux = null; - render() { const { pageContext, ...other } = this.props; diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index e3ce2054bd6745..9a4729e7db198b 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/docs/src/modules/utils/generateMarkdown.js @@ -1,3 +1,5 @@ +/* eslint-disable react/forbid-foreign-prop-types */ + import { parse as parseDoctrine } from 'doctrine'; import recast from 'recast'; import { pageToTitle } from './helpers'; diff --git a/docs/src/pages/customization/css-in-js/JssRegistry.js b/docs/src/pages/customization/css-in-js/JssRegistry.js index 8e6c6eb1bd960e..667b3871aa6dd7 100644 --- a/docs/src/pages/customization/css-in-js/JssRegistry.js +++ b/docs/src/pages/customization/css-in-js/JssRegistry.js @@ -8,6 +8,8 @@ const sheetsRegistry = new SheetsRegistry(); const theme = createMuiTheme(); class JssRegistry extends React.Component { + timer = null; + state = { length: 0, }; @@ -24,8 +26,6 @@ class JssRegistry extends React.Component { clearTimeout(this.timer); } - timer = null; - update() { if (this.state.length !== sheetsRegistry.registry.length) { this.setState({ diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js index 663dd4c9299c9b..b16eef6fa24597 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js +++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js @@ -137,10 +137,11 @@ class DownshiftMultiple extends React.Component { }; handleDelete = item => () => { - const selectedItem = [...this.state.selectedItem]; - selectedItem.splice(selectedItem.indexOf(item), 1); - - this.setState({ selectedItem }); + this.setState(state => { + const selectedItem = [...state.selectedItem]; + selectedItem.splice(selectedItem.indexOf(item), 1); + return { selectedItem }; + }); }; render() { diff --git a/docs/src/pages/demos/cards/RecipeReviewCard.js b/docs/src/pages/demos/cards/RecipeReviewCard.js index 771cf2a68f7dce..3f8b940d5fb8c5 100644 --- a/docs/src/pages/demos/cards/RecipeReviewCard.js +++ b/docs/src/pages/demos/cards/RecipeReviewCard.js @@ -47,7 +47,7 @@ class RecipeReviewCard extends React.Component { state = { expanded: false }; handleExpandClick = () => { - this.setState({ expanded: !this.state.expanded }); + this.setState(state => ({ expanded: !state.expanded })); }; render() { diff --git a/docs/src/pages/demos/chips/ChipsArray.js b/docs/src/pages/demos/chips/ChipsArray.js index 8275f47dd9f0f0..b2fe078221c023 100644 --- a/docs/src/pages/demos/chips/ChipsArray.js +++ b/docs/src/pages/demos/chips/ChipsArray.js @@ -35,10 +35,12 @@ class ChipsArray extends React.Component { return; } - const chipData = [...this.state.chipData]; - const chipToDelete = chipData.indexOf(data); - chipData.splice(chipToDelete, 1); - this.setState({ chipData }); + this.setState(state => { + const chipData = [...state.chipData]; + const chipToDelete = chipData.indexOf(data); + chipData.splice(chipToDelete, 1); + return { chipData }; + }); }; render() { diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js index 9ff25bf78dfc5c..26a6996c17aa8e 100644 --- a/docs/src/pages/demos/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/demos/dialogs/ConfirmationDialog.js @@ -32,7 +32,9 @@ const options = [ 'Umbriel', ]; -class ConfirmationDialog extends React.Component { +class ConfirmationDialogRaw extends React.Component { + radioGroup = null; + constructor(props) { super(props); @@ -48,8 +50,6 @@ class ConfirmationDialog extends React.Component { } } - radioGroup = null; - handleEntering = () => { this.radioGroup.focus(); }; @@ -107,7 +107,7 @@ class ConfirmationDialog extends React.Component { } } -ConfirmationDialog.propTypes = { +ConfirmationDialogRaw.propTypes = { onClose: PropTypes.func, value: PropTypes.string, }; @@ -118,20 +118,20 @@ const styles = theme => ({ maxWidth: 360, backgroundColor: theme.palette.background.paper, }, - dialog: { + paper: { width: '80%', maxHeight: 435, }, }); -class ConfirmationDialogDemo extends React.Component { +class ConfirmationDialog extends React.Component { + button = null; + state = { open: false, value: 'Dione', }; - button = undefined; - handleClickListItem = () => { this.setState({ open: true }); }; @@ -161,9 +161,9 @@ class ConfirmationDialogDemo extends React.Component { - { - this.setState({ mobileOpen: !this.state.mobileOpen }); + this.setState(state => ({ mobileOpen: !state.mobileOpen })); }; render() { diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js index ab7be4ed8157d5..2321f470dc5bb4 100644 --- a/docs/src/pages/demos/lists/NestedList.js +++ b/docs/src/pages/demos/lists/NestedList.js @@ -29,7 +29,7 @@ class NestedList extends React.Component { state = { open: true }; handleClick = () => { - this.setState({ open: !this.state.open }); + this.setState(state => ({ open: !state.open })); }; render() { diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js index 86d194dc049f5f..62e3fcfb1d5efb 100644 --- a/docs/src/pages/demos/menus/MenuListComposition.js +++ b/docs/src/pages/demos/menus/MenuListComposition.js @@ -30,7 +30,7 @@ class MenuListComposition extends React.Component { }; handleToggle = () => { - this.setState({ open: !this.state.open }); + this.setState(state => ({ open: !state.open })); }; handleClose = event => { diff --git a/docs/src/pages/demos/menus/SimpleListMenu.js b/docs/src/pages/demos/menus/SimpleListMenu.js index bca03cfd070ec7..d48d1bd15d7fca 100644 --- a/docs/src/pages/demos/menus/SimpleListMenu.js +++ b/docs/src/pages/demos/menus/SimpleListMenu.js @@ -23,13 +23,13 @@ const options = [ ]; class SimpleListMenu extends React.Component { + button = null; + state = { anchorEl: null, selectedIndex: 1, }; - button = undefined; - handleClickListItem = event => { this.setState({ anchorEl: event.currentTarget }); }; diff --git a/docs/src/pages/demos/progress/CircularDeterminate.js b/docs/src/pages/demos/progress/CircularDeterminate.js index 84c90bb6e841fb..72eddb68e16032 100644 --- a/docs/src/pages/demos/progress/CircularDeterminate.js +++ b/docs/src/pages/demos/progress/CircularDeterminate.js @@ -10,6 +10,8 @@ const styles = theme => ({ }); class CircularDeterminate extends React.Component { + timer = null; + state = { completed: 0, }; @@ -22,8 +24,6 @@ class CircularDeterminate extends React.Component { clearInterval(this.timer); } - timer; - progress = () => { const { completed } = this.state; this.setState({ completed: completed >= 100 ? 0 : completed + 1 }); diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js index cfe5be2cde8b14..a33c7df6b6cbc0 100644 --- a/docs/src/pages/demos/progress/CircularIntegration.js +++ b/docs/src/pages/demos/progress/CircularIntegration.js @@ -41,6 +41,8 @@ const styles = theme => ({ }); class CircularIntegration extends React.Component { + timer = null; + state = { loading: false, success: false, @@ -69,8 +71,6 @@ class CircularIntegration extends React.Component { } }; - timer = undefined; - render() { const { loading, success } = this.state; const { classes } = this.props; diff --git a/docs/src/pages/demos/progress/CircularStatic.js b/docs/src/pages/demos/progress/CircularStatic.js index 72d1594c3039df..58ae7a9c5c8c4e 100644 --- a/docs/src/pages/demos/progress/CircularStatic.js +++ b/docs/src/pages/demos/progress/CircularStatic.js @@ -10,6 +10,8 @@ const styles = theme => ({ }); class CircularStatic extends React.Component { + timer = null; + state = { completed: 0, }; @@ -22,8 +24,6 @@ class CircularStatic extends React.Component { clearInterval(this.timer); } - timer; - progress = () => { const { completed } = this.state; this.setState({ completed: completed >= 100 ? 0 : completed + 10 }); diff --git a/docs/src/pages/demos/progress/DelayingAppearance.js b/docs/src/pages/demos/progress/DelayingAppearance.js index f57d705c88b2f2..c73db3c5eb302d 100644 --- a/docs/src/pages/demos/progress/DelayingAppearance.js +++ b/docs/src/pages/demos/progress/DelayingAppearance.js @@ -21,6 +21,8 @@ const styles = theme => ({ }); class DelayingAppearance extends React.Component { + timer = null; + state = { loading: false, query: 'idle', @@ -30,12 +32,10 @@ class DelayingAppearance extends React.Component { clearTimeout(this.timer); } - timer = null; - handleClickLoading = () => { - this.setState({ - loading: !this.state.loading, - }); + this.setState(state => ({ + loading: !state.loading, + })); }; handleClickQuery = () => { diff --git a/docs/src/pages/demos/progress/LinearBuffer.js b/docs/src/pages/demos/progress/LinearBuffer.js index 7bcf4ea7ca414f..e74e372d441196 100644 --- a/docs/src/pages/demos/progress/LinearBuffer.js +++ b/docs/src/pages/demos/progress/LinearBuffer.js @@ -10,6 +10,8 @@ const styles = { }; class LinearBuffer extends React.Component { + timer = null; + state = { completed: 0, buffer: 10, @@ -23,8 +25,6 @@ class LinearBuffer extends React.Component { clearInterval(this.timer); } - timer = null; - progress = () => { const { completed } = this.state; if (completed > 100) { diff --git a/docs/src/pages/demos/progress/LinearDeterminate.js b/docs/src/pages/demos/progress/LinearDeterminate.js index 2a0625cba93f61..d9965ca952cc96 100644 --- a/docs/src/pages/demos/progress/LinearDeterminate.js +++ b/docs/src/pages/demos/progress/LinearDeterminate.js @@ -10,6 +10,8 @@ const styles = { }; class LinearDeterminate extends React.Component { + timer = null; + state = { completed: 0, }; @@ -22,8 +24,6 @@ class LinearDeterminate extends React.Component { clearInterval(this.timer); } - timer = null; - progress = () => { const { completed } = this.state; if (completed === 100) { diff --git a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js index 772f016c93e0b7..dc77ed157038bd 100644 --- a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js @@ -14,13 +14,13 @@ const styles = theme => ({ }); class ConsecutiveSnackbars extends React.Component { + queue = []; + state = { open: false, messageInfo: {}, }; - queue = []; - handleClick = message => () => { this.queue.push({ message, diff --git a/docs/src/pages/demos/steppers/DotsMobileStepper.js b/docs/src/pages/demos/steppers/DotsMobileStepper.js index b14062bf370fba..9dd06c28d68c44 100644 --- a/docs/src/pages/demos/steppers/DotsMobileStepper.js +++ b/docs/src/pages/demos/steppers/DotsMobileStepper.js @@ -19,15 +19,15 @@ class DotsMobileStepper extends React.Component { }; handleNext = () => { - this.setState({ - activeStep: this.state.activeStep + 1, - }); + this.setState(state => ({ + activeStep: state.activeStep + 1, + })); }; handleBack = () => { - this.setState({ - activeStep: this.state.activeStep - 1, - }); + this.setState(state => ({ + activeStep: state.activeStep - 1, + })); }; render() { diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js index 01c6fe3352a89e..d4c84d028f4cc9 100644 --- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js @@ -38,10 +38,6 @@ function getStepContent(step) { } class HorizontalLinearStepper extends React.Component { - static propTypes = { - classes: PropTypes.object, - }; - state = { activeStep: 0, skipped: new Set(), @@ -51,10 +47,6 @@ class HorizontalLinearStepper extends React.Component { return step === 1; }; - isStepSkipped(step) { - return this.state.skipped.has(step); - } - handleNext = () => { const { activeStep } = this.state; let { skipped } = this.state; @@ -82,11 +74,14 @@ class HorizontalLinearStepper extends React.Component { // it should never occur unless someone's actively trying to break something. throw new Error("You can't skip a step that isn't optional."); } - const skipped = new Set(this.state.skipped.values()); - skipped.add(activeStep); - this.setState({ - activeStep: this.state.activeStep + 1, - skipped, + + this.setState(state => { + const skipped = new Set(state.skipped.values()); + skipped.add(activeStep); + return { + activeStep: state.activeStep + 1, + skipped, + }; }); }; @@ -96,6 +91,10 @@ class HorizontalLinearStepper extends React.Component { }); }; + isStepSkipped(step) { + return this.state.skipped.has(step); + } + render() { const { classes } = this.props; const steps = getSteps(); @@ -168,4 +167,8 @@ class HorizontalLinearStepper extends React.Component { } } +HorizontalLinearStepper.propTypes = { + classes: PropTypes.object, +}; + export default withStyles(styles)(HorizontalLinearStepper); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js index 7d914ace2f42a9..ca56f0393f574f 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js @@ -54,30 +54,10 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component { return getSteps().length; }; - isStepComplete(step) { - return this.state.completed.has(step); - } - - completedSteps() { - return this.state.completed.size; - } - - allStepsCompleted() { - return this.completedSteps() === this.totalSteps() - this.skippedSteps(); - } - - isLastStep() { - return this.state.activeStep === this.totalSteps() - 1; - } - isStepOptional = step => { return step === 1; }; - isStepSkipped(step) { - return this.state.skipped.has(step); - } - handleSkip = () => { const { activeStep } = this.state; if (!this.isStepOptional(activeStep)) { @@ -85,18 +65,17 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component { // it should never occur unless someone's actively trying to break something. throw new Error("You can't skip a step that isn't optional."); } - const skipped = new Set(this.state.skipped); - skipped.add(activeStep); - this.setState({ - activeStep: this.state.activeStep + 1, - skipped, + + this.setState(state => { + const skipped = new Set(state.skipped.values()); + skipped.add(activeStep); + return { + activeStep: state.activeStep + 1, + skipped, + }; }); }; - skippedSteps() { - return this.state.skipped.size; - } - handleNext = () => { let activeStep; @@ -114,9 +93,9 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component { }; handleBack = () => { - this.setState({ - activeStep: this.state.activeStep - 1, - }); + this.setState(state => ({ + activeStep: state.activeStep - 1, + })); }; handleStep = step => () => { @@ -126,11 +105,13 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component { }; handleComplete = () => { + // eslint-disable-next-line react/no-access-state-in-setstate const completed = new Set(this.state.completed); completed.add(this.state.activeStep); this.setState({ completed, }); + /** * Sigh... it would be much nicer to replace the following if conditional with * `if (!this.allStepsComplete())` however state is not set when we do this, @@ -149,6 +130,30 @@ class HorizontalNonLinearAlternativeLabelStepper extends React.Component { }); }; + skippedSteps() { + return this.state.skipped.size; + } + + isStepSkipped(step) { + return this.state.skipped.has(step); + } + + isStepComplete(step) { + return this.state.completed.has(step); + } + + completedSteps() { + return this.state.completed.size; + } + + allStepsCompleted() { + return this.completedSteps() === this.totalSteps() - this.skippedSteps(); + } + + isLastStep() { + return this.state.activeStep === this.totalSteps() - 1; + } + render() { const { classes } = this.props; const steps = getSteps(); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js index e1a69cae762878..8b39ae66d242b1 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js @@ -46,22 +46,10 @@ class HorizontalNonLinearStepper extends React.Component { completed: {}, }; - completedSteps() { - return Object.keys(this.state.completed).length; - } - totalSteps = () => { return getSteps().length; }; - isLastStep() { - return this.state.activeStep === this.totalSteps() - 1; - } - - allStepsCompleted() { - return this.completedSteps() === this.totalSteps(); - } - handleNext = () => { let activeStep; @@ -107,6 +95,18 @@ class HorizontalNonLinearStepper extends React.Component { }); }; + completedSteps() { + return Object.keys(this.state.completed).length; + } + + isLastStep() { + return this.state.activeStep === this.totalSteps() - 1; + } + + allStepsCompleted() { + return this.completedSteps() === this.totalSteps(); + } + render() { const { classes } = this.props; const steps = getSteps(); diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js index 09b540032f3884..0613f1e90959a6 100644 --- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js +++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js @@ -38,10 +38,6 @@ function getStepContent(step) { } class HorizontalNonLinearStepperWithError extends React.Component { - static propTypes = { - classes: PropTypes.object, - }; - state = { activeStep: 0, skipped: new Set(), @@ -51,10 +47,6 @@ class HorizontalNonLinearStepperWithError extends React.Component { return step === 1; }; - isStepSkipped(step) { - return this.state.skipped.has(step); - } - isStepFailed = step => { return step === 1; }; @@ -86,11 +78,14 @@ class HorizontalNonLinearStepperWithError extends React.Component { // it should never occur unless someone's actively trying to break something. throw new Error("You can't skip a step that isn't optional."); } - const skipped = new Set(this.state.skipped.values()); - skipped.add(activeStep); - this.setState({ - activeStep: this.state.activeStep + 1, - skipped, + + this.setState(state => { + const skipped = new Set(state.skipped.values()); + skipped.add(activeStep); + return { + activeStep: state.activeStep + 1, + skipped, + }; }); }; @@ -100,6 +95,10 @@ class HorizontalNonLinearStepperWithError extends React.Component { }); }; + isStepSkipped(step) { + return this.state.skipped.has(step); + } + render() { const { classes } = this.props; const steps = getSteps(); @@ -179,4 +178,8 @@ class HorizontalNonLinearStepperWithError extends React.Component { } } +HorizontalNonLinearStepperWithError.propTypes = { + classes: PropTypes.object, +}; + export default withStyles(styles)(HorizontalNonLinearStepperWithError); diff --git a/docs/src/pages/demos/steppers/ProgressMobileStepper.js b/docs/src/pages/demos/steppers/ProgressMobileStepper.js index acb7f4beb31669..7f80735c59c218 100644 --- a/docs/src/pages/demos/steppers/ProgressMobileStepper.js +++ b/docs/src/pages/demos/steppers/ProgressMobileStepper.js @@ -19,15 +19,15 @@ class ProgressMobileStepper extends React.Component { }; handleNext = () => { - this.setState({ - activeStep: this.state.activeStep + 1, - }); + this.setState(state => ({ + activeStep: state.activeStep + 1, + })); }; handleBack = () => { - this.setState({ - activeStep: this.state.activeStep - 1, - }); + this.setState(state => ({ + activeStep: state.activeStep - 1, + })); }; render() { diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.js index 0827a032036bff..f4e8bc4a574378 100644 --- a/docs/src/pages/demos/steppers/VerticalLinearStepper.js +++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.js @@ -53,15 +53,15 @@ class VerticalLinearStepper extends React.Component { }; handleNext = () => { - this.setState({ - activeStep: this.state.activeStep + 1, - }); + this.setState(state => ({ + activeStep: state.activeStep + 1, + })); }; handleBack = () => { - this.setState({ - activeStep: this.state.activeStep - 1, - }); + this.setState(state => ({ + activeStep: state.activeStep - 1, + })); }; handleReset = () => { diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index a51434f0ca6b55..eb320694a1110c 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -222,7 +222,7 @@ class EnhancedTable extends React.Component { handleSelectAllClick = (event, checked) => { if (checked) { - this.setState({ selected: this.state.data.map(n => n.id) }); + this.setState(state => ({ selected: state.data.map(n => n.id) })); return; } this.setState({ selected: [] }); diff --git a/docs/src/pages/demos/text-fields/InputAdornments.js b/docs/src/pages/demos/text-fields/InputAdornments.js index 2ecd4e965db6ce..ed150111d00469 100644 --- a/docs/src/pages/demos/text-fields/InputAdornments.js +++ b/docs/src/pages/demos/text-fields/InputAdornments.js @@ -62,7 +62,7 @@ class InputAdornments extends React.Component { }; handleClickShowPassword = () => { - this.setState({ showPassword: !this.state.showPassword }); + this.setState(state => ({ showPassword: !state.showPassword })); }; render() { diff --git a/docs/src/pages/lab/slider/DisabledSlider.js b/docs/src/pages/lab/slider/DisabledSlider.js index f2f1096b9d7e2e..e300209d20b2af 100644 --- a/docs/src/pages/lab/slider/DisabledSlider.js +++ b/docs/src/pages/lab/slider/DisabledSlider.js @@ -4,14 +4,16 @@ import { withStyles } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/Slider'; const styles = { - container: { + root: { width: 300, }, }; -function DisabledSlider({ classes }) { +function DisabledSlider(props) { + const { classes } = props; + return ( -
+
diff --git a/docs/src/pages/lab/slider/ReverseSlider.js b/docs/src/pages/lab/slider/ReverseSlider.js index a87e05b1e3c1d4..6bf3ead624b9b2 100644 --- a/docs/src/pages/lab/slider/ReverseSlider.js +++ b/docs/src/pages/lab/slider/ReverseSlider.js @@ -4,21 +4,26 @@ import { withStyles } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/Slider'; const styles = { - container: { + root: { width: 300, }, }; class ReverseSlider extends React.Component { - state = { value: 50 }; + state = { + value: 50, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; - handleChange = (event, value) => this.setState({ value }); render() { const { classes } = this.props; const { value } = this.state; return ( -
+
diff --git a/docs/src/pages/lab/slider/SimpleSlider.js b/docs/src/pages/lab/slider/SimpleSlider.js index 491ee41acf9968..b564e5a9116611 100644 --- a/docs/src/pages/lab/slider/SimpleSlider.js +++ b/docs/src/pages/lab/slider/SimpleSlider.js @@ -5,22 +5,26 @@ import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/lab/Slider'; const styles = { - container: { + root: { width: 300, }, }; class SimpleSlider extends React.Component { - state = { value: 50 }; + state = { + value: 50, + }; - handleChange = (event, value) => this.setState({ value }); + handleChange = (event, value) => { + this.setState({ value }); + }; render() { const { classes } = this.props; const { value } = this.state; return ( -
+
Slider label
diff --git a/docs/src/pages/lab/slider/StepSlider.js b/docs/src/pages/lab/slider/StepSlider.js index 9777c822c0d3a5..593b5800c9a108 100644 --- a/docs/src/pages/lab/slider/StepSlider.js +++ b/docs/src/pages/lab/slider/StepSlider.js @@ -4,22 +4,26 @@ import { withStyles } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/Slider'; const styles = { - container: { + root: { width: 300, }, }; class StepSlider extends React.Component { - state = { value: 3 }; + state = { + value: 3, + }; - handleChange = (event, value) => this.setState({ value }); + handleChange = (event, value) => { + this.setState({ value }); + }; render() { const { classes } = this.props; const { value } = this.state; return ( -
+
); diff --git a/docs/src/pages/lab/slider/VerticalSlider.js b/docs/src/pages/lab/slider/VerticalSlider.js index 08c5d6d9658779..42fd8d6905a700 100644 --- a/docs/src/pages/lab/slider/VerticalSlider.js +++ b/docs/src/pages/lab/slider/VerticalSlider.js @@ -4,21 +4,27 @@ import { withStyles } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/Slider'; const styles = { - container: { + root: { display: 'flex', height: 300, }, }; class VerticalSlider extends React.Component { - state = { value: 50 }; - handleChange = (event, value) => this.setState({ value }); + state = { + value: 50, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + render() { const { classes } = this.props; const { value } = this.state; return ( -
+
diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md index 877122c2b6e515..94dfeb4f30755d 100644 --- a/docs/src/pages/lab/slider/slider.md +++ b/docs/src/pages/lab/slider/slider.md @@ -7,16 +7,21 @@ components: Slider A [slider](https://material.io/guidelines/components/sliders.html) is an interface for users to input a value in a range. Sliders can be continuous or discrete and can be enabled or disabled. ## Simple slider + {{"demo": "pages/lab/slider/SimpleSlider.js"}} ## Slider with steps + {{"demo": "pages/lab/slider/StepSlider.js"}} ## Disabled slider + {{"demo": "pages/lab/slider/DisabledSlider.js"}} ## Vertical slider + {{"demo": "pages/lab/slider/VerticalSlider.js"}} ## Reverse slider -{{"demo": "pages/lab/slider/ReverseSlider.js"}} \ No newline at end of file + +{{"demo": "pages/lab/slider/ReverseSlider.js"}} diff --git a/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js b/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js index 4b66f462dc58ff..cd42b725909601 100644 --- a/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js +++ b/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js @@ -38,16 +38,16 @@ class OpenIconSpeedDial extends React.Component { }; handleVisibility = () => { - this.setState({ + this.setState(state => ({ open: false, - hidden: !this.state.hidden, - }); + hidden: !state.hidden, + })); }; handleClick = () => { - this.setState({ - open: !this.state.open, - }); + this.setState(state => ({ + open: !state.open, + })); }; handleOpen = () => { diff --git a/docs/src/pages/lab/speed-dial/SpeedDials.js b/docs/src/pages/lab/speed-dial/SpeedDials.js index a8f3f90720e018..f296b1d530f2cb 100644 --- a/docs/src/pages/lab/speed-dial/SpeedDials.js +++ b/docs/src/pages/lab/speed-dial/SpeedDials.js @@ -37,16 +37,16 @@ class SpeedDials extends React.Component { }; handleVisibility = () => { - this.setState({ + this.setState(state => ({ open: false, - hidden: !this.state.hidden, - }); + hidden: !state.hidden, + })); }; handleClick = () => { - this.setState({ - open: !this.state.open, - }); + this.setState(state => ({ + open: !state.open, + })); }; handleOpen = () => { diff --git a/docs/src/pages/style/typography/Types.js b/docs/src/pages/style/typography/Types.js index 6efac84f640758..fa1bf03045f87e 100644 --- a/docs/src/pages/style/typography/Types.js +++ b/docs/src/pages/style/typography/Types.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Typography from '@material-ui/core/Typography'; -import withTheme from '@material-ui/core/styles/withTheme'; +import { withStyles } from '@material-ui/core/styles'; const styles = { root: { @@ -10,9 +10,11 @@ const styles = { }, }; -function Types() { +function Types(props) { + const { classes } = props; + return ( -
+
Display 4 @@ -57,7 +59,7 @@ function Types() { } Types.propTypes = { - theme: PropTypes.object.isRequired, + classes: PropTypes.object.isRequired, }; -export default withTheme()(Types); +export default withStyles(styles)(Types); diff --git a/docs/src/pages/utils/popovers/AnchorPlayground.js b/docs/src/pages/utils/popovers/AnchorPlayground.js index 529e17bd42aa99..9398a1227730a4 100644 --- a/docs/src/pages/utils/popovers/AnchorPlayground.js +++ b/docs/src/pages/utils/popovers/AnchorPlayground.js @@ -65,6 +65,8 @@ const inlineStyles = { }; class AnchorPlayground extends React.Component { + anchorEl = null; + state = { open: false, anchorOriginVertical: 'top', @@ -100,8 +102,6 @@ class AnchorPlayground extends React.Component { }); }; - anchorEl = null; - render() { const { classes } = this.props; const { diff --git a/docs/src/pages/utils/portal/SimplePortal.js b/docs/src/pages/utils/portal/SimplePortal.js index 18a678490a0125..c08f64d0929b5d 100644 --- a/docs/src/pages/utils/portal/SimplePortal.js +++ b/docs/src/pages/utils/portal/SimplePortal.js @@ -15,16 +15,16 @@ const styles = theme => ({ }); class SimplePortal extends React.Component { + container = null; + state = { show: false, }; handleClick = () => { - this.setState({ show: !this.state.show }); + this.setState(state => ({ show: !state.show })); }; - container = null; - render() { const { classes } = this.props; const { show } = this.state; diff --git a/docs/src/pages/utils/transitions/SimpleCollapse.js b/docs/src/pages/utils/transitions/SimpleCollapse.js index 807a0ed82c6ebc..433fae0e662073 100644 --- a/docs/src/pages/utils/transitions/SimpleCollapse.js +++ b/docs/src/pages/utils/transitions/SimpleCollapse.js @@ -32,7 +32,7 @@ class SimpleCollapse extends React.Component { }; handleChange = () => { - this.setState({ checked: !this.state.checked }); + this.setState(state => ({ checked: !state.checked })); }; render() { diff --git a/docs/src/pages/utils/transitions/SimpleFade.js b/docs/src/pages/utils/transitions/SimpleFade.js index 5d092dd79a4799..9fa64ed007ffde 100644 --- a/docs/src/pages/utils/transitions/SimpleFade.js +++ b/docs/src/pages/utils/transitions/SimpleFade.js @@ -29,7 +29,7 @@ class SimpleFade extends React.Component { }; handleChange = () => { - this.setState({ checked: !this.state.checked }); + this.setState(state => ({ checked: !state.checked })); }; render() { diff --git a/docs/src/pages/utils/transitions/SimpleGrow.js b/docs/src/pages/utils/transitions/SimpleGrow.js index decdd844201224..0674c42ab56608 100644 --- a/docs/src/pages/utils/transitions/SimpleGrow.js +++ b/docs/src/pages/utils/transitions/SimpleGrow.js @@ -32,7 +32,7 @@ class SimpleGrow extends React.Component { }; handleChange = () => { - this.setState({ checked: !this.state.checked }); + this.setState(state => ({ checked: !state.checked })); }; render() { diff --git a/docs/src/pages/utils/transitions/SimpleSlide.js b/docs/src/pages/utils/transitions/SimpleSlide.js index 424f29a73c67ff..b0ee2e3c107a2c 100644 --- a/docs/src/pages/utils/transitions/SimpleSlide.js +++ b/docs/src/pages/utils/transitions/SimpleSlide.js @@ -34,7 +34,7 @@ class SimpleSlide extends React.Component { }; handleChange = () => { - this.setState({ checked: !this.state.checked }); + this.setState(state => ({ checked: !state.checked })); }; render() { diff --git a/docs/src/pages/utils/transitions/SimpleZoom.js b/docs/src/pages/utils/transitions/SimpleZoom.js index cd0331a4e170c5..c51328de47817e 100644 --- a/docs/src/pages/utils/transitions/SimpleZoom.js +++ b/docs/src/pages/utils/transitions/SimpleZoom.js @@ -32,7 +32,7 @@ class SimpleZoom extends React.Component { }; handleChange = () => { - this.setState({ checked: !this.state.checked }); + this.setState(state => ({ checked: !state.checked })); }; render() { diff --git a/examples/gatsby/src/withRoot.js b/examples/gatsby/src/withRoot.js index 978b2d9e0de4d2..15fcda5f4f8859 100644 --- a/examples/gatsby/src/withRoot.js +++ b/examples/gatsby/src/withRoot.js @@ -6,6 +6,8 @@ import getPageContext from './getPageContext'; function withRoot(Component) { class WithRoot extends React.Component { + pageContext = null; + constructor(props) { super(props); @@ -20,8 +22,6 @@ function withRoot(Component) { } } - pageContext = null; - render() { // MuiThemeProvider makes the theme available down the React tree thanks to React context. return ( diff --git a/examples/nextjs/src/withRoot.js b/examples/nextjs/src/withRoot.js index 6991e050f3a178..579b728752e038 100644 --- a/examples/nextjs/src/withRoot.js +++ b/examples/nextjs/src/withRoot.js @@ -6,6 +6,8 @@ import getPageContext from './getPageContext'; function withRoot(Component) { class WithRoot extends React.Component { + pageContext = null; + constructor(props) { super(props); @@ -20,8 +22,6 @@ function withRoot(Component) { } } - pageContext = null; - render() { // MuiThemeProvider makes the theme available down the React tree thanks to React context. return ( diff --git a/package.json b/package.json index ecf90b649a03c0..89809b416828ba 100644 --- a/package.json +++ b/package.json @@ -85,11 +85,11 @@ "clipboard-copy": "^2.0.0", "cross-env": "^5.1.1", "doctrine": "^2.0.0", - "downshift": "^1.22.1", + "downshift": "^2.0.0", "enzyme": "^3.2.0", "enzyme-adapter-react-16": "^1.1.0", - "eslint": "^4.11.0", - "eslint-config-airbnb": "^16.1.0", + "eslint": "^5.0.0", + "eslint-config-airbnb": "^17.0.0", "eslint-import-resolver-webpack": "^0.10.0", "eslint-plugin-babel": "^5.0.0", "eslint-plugin-flowtype": "^2.40.1", @@ -142,14 +142,14 @@ "redux": "^4.0.0", "redux-logger": "^3.0.6", "rimraf": "^2.6.2", - "rollup": "^0.59.4", + "rollup": "^0.61.0", "rollup-plugin-babel": "^4.0.0-beta.4", "rollup-plugin-commonjs": "^9.1.3", "rollup-plugin-node-globals": "^1.2.1", "rollup-plugin-node-resolve": "^3.3.0", "rollup-plugin-size-snapshot": "^0.5.1", "rollup-plugin-uglify": "^4.0.0", - "sinon": "^5.0.3", + "sinon": "^5.0.0", "size-limit": "^0.18.0", "typescript": "^2.6.1", "url-loader": "^1.0.1", diff --git a/packages/material-ui-codemod/src/v0.15.0/import-path.js b/packages/material-ui-codemod/src/v0.15.0/import-path.js index 54e7d336be5a16..64cfa1138cd087 100644 --- a/packages/material-ui-codemod/src/v0.15.0/import-path.js +++ b/packages/material-ui-codemod/src/v0.15.0/import-path.js @@ -62,7 +62,9 @@ const pathBasePackage = ['material-ui/lib/', 'material-ui/']; function getPathsBase(path) { if (path.indexOf(pathBaseSource[0]) === 0) { return pathBaseSource; - } else if (path.indexOf(pathBasePackage[0]) === 0) { + } + + if (path.indexOf(pathBasePackage[0]) === 0) { return pathBasePackage; } diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index d80f61234e8f07..5b9249d08b08c6 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -207,18 +207,6 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) { class Slider extends React.Component { state = { currentState: 'initial' }; - static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.disabled) { - return { currentState: 'disabled' }; - } - - if (!nextProps.disabled && prevState.currentState === 'disabled') { - return { currentState: 'normal' }; - } - - return null; - } - componentDidMount() { if (this.container) { this.container.addEventListener('touchstart', preventPageScrolling, { passive: false }); @@ -229,51 +217,16 @@ class Slider extends React.Component { this.container.removeEventListener('touchstart', preventPageScrolling, { passive: false }); } - emitChange(event, rawValue, callback) { - const { step, value: previousValue, onChange, disabled } = this.props; - let value = rawValue; - - if (disabled) { - return; - } - - if (step) { - value = roundToStep(rawValue, step); - } else { - value = Number(rawValue.toFixed(3)); - } - - if (typeof onChange === 'function' && value !== previousValue) { - onChange(event, value); - - if (typeof callback === 'function') { - callback(); - } + static getDerivedStateFromProps(nextProps, prevState) { + if (nextProps.disabled) { + return { currentState: 'disabled' }; } - } - - calculateTrackAfterStyles(percent) { - const { currentState } = this.state; - switch (currentState) { - case 'activated': - return `calc(100% - ${percent === 0 ? 7 : 5}px)`; - case 'disabled': - return `calc(${100 - percent}% - 6px)`; - default: - return 'calc(100% - 5px)'; + if (!nextProps.disabled && prevState.currentState === 'disabled') { + return { currentState: 'normal' }; } - } - - calculateTrackBeforeStyles(percent) { - const { currentState } = this.state; - switch (currentState) { - case 'disabled': - return `calc(${percent}% - 6px)`; - default: - return `${percent}%`; - } + return null; } handleKeyDown = event => { @@ -378,6 +331,53 @@ class Slider extends React.Component { this.emitChange(event, value); }; + emitChange(event, rawValue, callback) { + const { step, value: previousValue, onChange, disabled } = this.props; + let value = rawValue; + + if (disabled) { + return; + } + + if (step) { + value = roundToStep(rawValue, step); + } else { + value = Number(rawValue.toFixed(3)); + } + + if (typeof onChange === 'function' && value !== previousValue) { + onChange(event, value); + + if (typeof callback === 'function') { + callback(); + } + } + } + + calculateTrackAfterStyles(percent) { + const { currentState } = this.state; + + switch (currentState) { + case 'activated': + return `calc(100% - ${percent === 0 ? 7 : 5}px)`; + case 'disabled': + return `calc(${100 - percent}% - 6px)`; + default: + return 'calc(100% - 5px)'; + } + } + + calculateTrackBeforeStyles(percent) { + const { currentState } = this.state; + + switch (currentState) { + case 'disabled': + return `calc(${percent}% - 6px)`; + default: + return `${percent}%`; + } + } + playJumpAnimation() { this.setState({ currentState: 'jumped' }, () => { setTimeout(() => { diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index e3895a0819e5ec..dc96c98f997baa 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -55,29 +55,47 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) { * It contains a load of style reset and some focus/ripple logic. */ class ButtonBase extends React.Component { - state = {}; + ripple = null; - static getDerivedStateFromProps(nextProps, prevState) { - if (typeof prevState.focusVisible === 'undefined') { - return { - focusVisible: false, - lastDisabled: nextProps.disabled, - }; + keyDown = false; // Used to help track keyboard activation keyDown + + button = null; + + focusVisibleTimeout = null; + + focusVisibleCheckTime = 50; + + focusVisibleMaxCheckTimes = 5; + + handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => { + clearTimeout(this.focusVisibleTimeout); + if (this.state.focusVisible) { + this.setState({ focusVisible: false }); } + }); - // The blur won't fire when the disabled state is set on a focused input. - // We need to book keep the focused state manually. - if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) { - return { - focusVisible: false, - lastDisabled: nextProps.disabled, - }; + handleMouseUp = createRippleHandler(this, 'MouseUp', 'stop'); + + handleMouseLeave = createRippleHandler(this, 'MouseLeave', 'stop', event => { + if (this.state.focusVisible) { + event.preventDefault(); } + }); - return { - lastDisabled: nextProps.disabled, - }; - } + handleTouchStart = createRippleHandler(this, 'TouchStart', 'start'); + + handleTouchEnd = createRippleHandler(this, 'TouchEnd', 'stop'); + + handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop'); + + handleBlur = createRippleHandler(this, 'Blur', 'stop', () => { + clearTimeout(this.focusVisibleTimeout); + if (this.state.focusVisible) { + this.setState({ focusVisible: false }); + } + }); + + state = {}; componentDidMount() { this.button = ReactDOM.findDOMNode(this); @@ -109,6 +127,10 @@ class ButtonBase extends React.Component { clearTimeout(this.focusVisibleTimeout); } + onRippleRef = node => { + this.ripple = node; + }; + onFocusVisibleHandler = event => { this.keyDown = false; this.setState({ focusVisible: true }); @@ -118,16 +140,27 @@ class ButtonBase extends React.Component { } }; - onRippleRef = node => { - this.ripple = node; - }; + static getDerivedStateFromProps(nextProps, prevState) { + if (typeof prevState.focusVisible === 'undefined') { + return { + focusVisible: false, + lastDisabled: nextProps.disabled, + }; + } - ripple = null; - keyDown = false; // Used to help track keyboard activation keyDown - button = null; - focusVisibleTimeout = null; - focusVisibleCheckTime = 50; - focusVisibleMaxCheckTimes = 5; + // The blur won't fire when the disabled state is set on a focused input. + // We need to book keep the focused state manually. + if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) { + return { + focusVisible: false, + lastDisabled: nextProps.disabled, + }; + } + + return { + lastDisabled: nextProps.disabled, + }; + } handleKeyDown = event => { const { component, focusRipple, onKeyDown, onClick } = this.props; @@ -179,34 +212,6 @@ class ButtonBase extends React.Component { } }; - handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => { - clearTimeout(this.focusVisibleTimeout); - if (this.state.focusVisible) { - this.setState({ focusVisible: false }); - } - }); - - handleMouseUp = createRippleHandler(this, 'MouseUp', 'stop'); - - handleMouseLeave = createRippleHandler(this, 'MouseLeave', 'stop', event => { - if (this.state.focusVisible) { - event.preventDefault(); - } - }); - - handleTouchStart = createRippleHandler(this, 'TouchStart', 'start'); - - handleTouchEnd = createRippleHandler(this, 'TouchEnd', 'stop'); - - handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop'); - - handleBlur = createRippleHandler(this, 'Blur', 'stop', () => { - clearTimeout(this.focusVisibleTimeout); - if (this.state.focusVisible) { - this.setState({ focusVisible: false }); - } - }); - handleFocus = event => { if (this.props.disabled) { return; diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js index 24cbb84ebe7b1b..efe6303e7a7502 100644 --- a/packages/material-ui/src/ButtonBase/TouchRipple.js +++ b/packages/material-ui/src/ButtonBase/TouchRipple.js @@ -88,7 +88,18 @@ export const styles = theme => ({ }); class TouchRipple extends React.PureComponent { + // Used to filter out mouse emulated events on mobile. + ignoringMouseDown = false; + + // We use a timer in order to only show the ripples for touch "click" like events. + // We don't want to display the ripple for touch scroll events. + startTimer = null; + + // This is the hook called once the previous timeout is ready. + startTimerCommit = null; + state = { + // eslint-disable-next-line react/no-unused-state nextKey: 0, ripples: [], }; @@ -97,14 +108,6 @@ class TouchRipple extends React.PureComponent { clearTimeout(this.startTimer); } - // Used to filter out mouse emulated events on mobile. - ignoringMouseDown = false; - // We use a timer in order to only show the ripples for touch "click" like events. - // We don't want to display the ripple for touch scroll events. - startTimer = null; - // This is the hook called once the previous timeout is ready. - startTimerCommit = null; - pulsate = () => { this.start({}, { pulsate: true }); }; @@ -155,7 +158,7 @@ class TouchRipple extends React.PureComponent { } if (center) { - rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); + rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even. if (rippleSize % 2 === 0) { @@ -166,7 +169,7 @@ class TouchRipple extends React.PureComponent { Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2; const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2; - rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2)); + rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2); } // Touche devices @@ -189,32 +192,27 @@ class TouchRipple extends React.PureComponent { startCommit = params => { const { pulsate, rippleX, rippleY, rippleSize, cb } = params; - let ripples = this.state.ripples; - - // Add a ripple to the ripples array. - ripples = [ - ...ripples, - , - ]; - this.setState( - { - nextKey: this.state.nextKey + 1, - ripples, - }, - cb, - ); + this.setState(state => { + return { + nextKey: state.nextKey + 1, + ripples: [ + ...state.ripples, + , + ], + }; + }, cb); }; stop = (event, cb) => { diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js index e79a3533c54a54..a73e00dd594804 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js @@ -11,6 +11,10 @@ import ownerDocument from '../utils/ownerDocument'; * For instance, if you need to hide a menu when people click anywhere else on your page. */ class ClickAwayListener extends React.Component { + node = null; + + mounted = null; + componentDidMount() { this.node = ReactDOM.findDOMNode(this); this.mounted = true; @@ -20,9 +24,6 @@ class ClickAwayListener extends React.Component { this.mounted = false; } - node = null; - mounted = null; - handleClickAway = event => { // Ignore events that have been `event.preventDefault()` marked. if (event.defaultPrevented) { diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index bbc5ff661ded43..3c0244b21139fa 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -32,14 +32,16 @@ export const styles = theme => ({ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. */ class Collapse extends React.Component { + wrapper = null; + + autoTransitionDuration = null; + + timer = null; + componentWillUnmount() { clearTimeout(this.timer); } - wrapper = null; - autoTransitionDuration = undefined; - timer = null; - handleEnter = node => { node.style.height = this.props.collapsedHeight; diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js index 97730441a366e1..dd5fd1187f1c7a 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.js @@ -1,3 +1,5 @@ +/* eslint-disable react/no-unused-prop-types */ + import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '../styles'; diff --git a/packages/material-ui/src/DialogActions/DialogActions.test.js b/packages/material-ui/src/DialogActions/DialogActions.test.js index 75fbdf46f47993..8fb16efa6fc2a6 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.test.js +++ b/packages/material-ui/src/DialogActions/DialogActions.test.js @@ -37,7 +37,9 @@ describe('', () => { it('should render children with the button class wrapped in a div with the action class', () => { const wrapper = shallow( - + , ); const button = wrapper.childAt(0); @@ -50,8 +52,12 @@ describe('', () => { const showButton = true; const wrapper = shallow( - {showButton ? : null} - {!showButton ? : null} + {showButton ? ( + + ) : null} + {!showButton ? : null} , ); diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 52b1c64ad07e8c..7761c61325e7d4 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -89,15 +89,15 @@ export const styles = theme => ({ * when `variant="temporary"` is set. */ class Drawer extends React.Component { - componentDidMount() { - this.mounted = true; - } - // Let's assume that the Drawer will always be rendered on user space. - // We use that state is order to skip the appear transition during the + // We use this state is order to skip the appear transition during the // initial mount of the component. mounted = false; + componentDidMount() { + this.mounted = true; + } + render() { const { anchor: anchorProp, diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 8d327bb8236f20..d439da8170d18c 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -77,6 +77,8 @@ export const styles = theme => { }; class ExpansionPanel extends React.Component { + isControlled = null; + constructor(props) { super(props); @@ -89,8 +91,6 @@ class ExpansionPanel extends React.Component { state = {}; - isControlled = null; - handleChange = event => { const expanded = this.isControlled ? this.props.expanded : this.state.expanded; diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js index 4489d883e50cc8..32621fab6cf824 100644 --- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js +++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js @@ -39,7 +39,9 @@ describe('', () => { it('should render children with the button class wrapped in a div with the action class', () => { const wrapper = shallow( - + , ); const button = wrapper.childAt(0); @@ -55,7 +57,7 @@ describe('', () => { it('should render a valid children', () => { const wrapper = shallow( - + {null} , ); diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js index 2a82910c86d73c..97a971fc318c6c 100644 --- a/packages/material-ui/src/GridListTile/GridListTile.js +++ b/packages/material-ui/src/GridListTile/GridListTile.js @@ -31,6 +31,12 @@ export const styles = { }; class GridListTile extends React.Component { + imgElement = null; + + handleResize = debounce(() => { + this.fit(); + }, 166); // Corresponds to 10 frames at 60 Hz. + componentDidMount() { this.ensureImageCover(); } @@ -43,12 +49,6 @@ class GridListTile extends React.Component { this.handleResize.clear(); } - imgElement = null; - - handleResize = debounce(() => { - this.fit(); - }, 166); // Corresponds to 10 frames at 60 Hz. - fit = () => { const imgElement = this.imgElement; diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js index befede91acb004..cb6464636ea6ab 100644 --- a/packages/material-ui/src/Grow/Grow.js +++ b/packages/material-ui/src/Grow/Grow.js @@ -7,7 +7,7 @@ import withTheme from '../styles/withTheme'; import { reflow, getTransitionProps } from '../transitions/utils'; function getScale(value) { - return `scale(${value}, ${Math.pow(value, 2)})`; + return `scale(${value}, ${value ** 2})`; } const styles = { @@ -26,13 +26,14 @@ const styles = { * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. */ class Grow extends React.Component { + autoTimeout = null; + + timer = null; + componentWillUnmount() { clearTimeout(this.timer); } - autoTimeout = undefined; - timer = null; - handleEnter = node => { const { theme, timeout } = this.props; reflow(node); // So the animation always start from the start. diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 9ca693ca4e3bd2..6483dd5665e129 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -217,6 +217,10 @@ function formControlState(props, context) { } class Input extends React.Component { + isControlled = this.props.value != null; + + input = null; // Holds the input reference + constructor(props, context) { super(props, context); @@ -285,9 +289,6 @@ class Input extends React.Component { } // else performed in the onChange } - isControlled = this.props.value != null; - input = null; // Holds the input reference - handleFocus = event => { // Fix a bug with IE11 where the focus/blur events are triggered // while the input is disabled. diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js index 9ec321ed76ff06..acea9db73d44eb 100644 --- a/packages/material-ui/src/Input/Textarea.js +++ b/packages/material-ui/src/Input/Textarea.js @@ -42,6 +42,18 @@ export const styles = { * @ignore - internal component. */ class Textarea extends React.Component { + shadow = null; + + singlelineShadow = null; + + input = null; + + value = null; + + handleResize = debounce(() => { + this.syncHeightWithShadow(); + }, 166); // Corresponds to 10 frames at 60 Hz. + constructor(props) { super(props); @@ -69,14 +81,40 @@ class Textarea extends React.Component { this.handleResize.clear(); } - shadow = null; - singlelineShadow = null; - input = null; - value = null; + handleRefInput = node => { + this.input = node; - handleResize = debounce(() => { - this.syncHeightWithShadow(); - }, 166); // Corresponds to 10 frames at 60 Hz. + const { textareaRef } = this.props; + if (textareaRef) { + if (typeof textareaRef === 'function') { + textareaRef(node); + } else { + textareaRef.current = node; + } + } + }; + + handleRefSinglelineShadow = node => { + this.singlelineShadow = node; + }; + + handleRefShadow = node => { + this.shadow = node; + }; + + handleChange = event => { + this.value = event.target.value; + + if (typeof this.props.value === 'undefined' && this.shadow) { + // The component is not controlled, we need to update the shallow value. + this.shadow.value = this.value; + this.syncHeightWithShadow(); + } + + if (this.props.onChange) { + this.props.onChange(event); + } + }; syncHeightWithShadow() { const props = this.props; @@ -113,41 +151,6 @@ class Textarea extends React.Component { } } - handleRefInput = node => { - this.input = node; - - const { textareaRef } = this.props; - if (textareaRef) { - if (typeof textareaRef === 'function') { - textareaRef(node); - } else { - textareaRef.current = node; - } - } - }; - - handleRefSinglelineShadow = node => { - this.singlelineShadow = node; - }; - - handleRefShadow = node => { - this.shadow = node; - }; - - handleChange = event => { - this.value = event.target.value; - - if (typeof this.props.value === 'undefined' && this.shadow) { - // The component is not controlled, we need to update the shallow value. - this.shadow.value = this.value; - this.syncHeightWithShadow(); - } - - if (this.props.onChange) { - this.props.onChange(event); - } - }; - render() { const { classes, diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index a5e9d0cbfda9cb..7342cc9ab71a68 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -30,6 +30,8 @@ export const styles = { }; class Menu extends React.Component { + menuList = null; + componentDidMount() { if (this.props.open) { this.focus(); @@ -44,8 +46,6 @@ class Menu extends React.Component { return ReactDOM.findDOMNode(this.menuList.selectedItem); }; - menuList = undefined; - focus = () => { if (this.menuList && this.menuList.selectedItem) { ReactDOM.findDOMNode(this.menuList.selectedItem).focus(); diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js index 50ff7a305a4ffc..a32ffbf2617150 100644 --- a/packages/material-ui/src/MenuList/MenuList.js +++ b/packages/material-ui/src/MenuList/MenuList.js @@ -8,8 +8,14 @@ import ownerDocument from '../utils/ownerDocument'; import List from '../List'; class MenuList extends React.Component { + list = null; + + selectedItem = null; + + blurTimer = null; + state = { - currentTabIndex: undefined, + currentTabIndex: null, }; componentDidMount() { @@ -24,10 +30,6 @@ class MenuList extends React.Component { this.setState({ currentTabIndex: index }); } - list = undefined; - selectedItem = undefined; - blurTimer = undefined; - handleBlur = event => { this.blurTimer = setTimeout(() => { if (this.list) { diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 81de306ba3935d..439191844e2347 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -44,6 +44,12 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) { } class Modal extends React.Component { + dialogElement = null; + + mounted = false; + + mountNode = null; + constructor(props) { super(props); @@ -52,21 +58,6 @@ class Modal extends React.Component { }; } - static getDerivedStateFromProps(nextProps) { - if (nextProps.open) { - return { - exited: false, - }; - } else if (!getHasTransition(nextProps)) { - // Otherwise let handleExited take care of marking exited. - return { - exited: true, - }; - } - - return null; - } - componentDidMount() { this.mounted = true; if (this.props.open) { @@ -95,9 +86,22 @@ class Modal extends React.Component { } } - dialogElement = null; - mounted = false; - mountNode = null; + static getDerivedStateFromProps(nextProps) { + if (nextProps.open) { + return { + exited: false, + }; + } + + if (!getHasTransition(nextProps)) { + // Otherwise let handleExited take care of marking exited. + return { + exited: true, + }; + } + + return null; + } handleRendered = () => { this.autoFocus(); @@ -161,6 +165,18 @@ class Modal extends React.Component { this.lastFocus = ownerDocument(this.mountNode).activeElement; }; + enforceFocus = () => { + if (this.props.disableEnforceFocus || !this.mounted || !this.isTopModal()) { + return; + } + + const currentActiveElement = ownerDocument(this.mountNode).activeElement; + + if (this.dialogElement && !this.dialogElement.contains(currentActiveElement)) { + this.dialogElement.focus(); + } + }; + autoFocus() { if (this.props.disableAutoFocus) { return; @@ -204,18 +220,6 @@ class Modal extends React.Component { } } - enforceFocus = () => { - if (this.props.disableEnforceFocus || !this.mounted || !this.isTopModal()) { - return; - } - - const currentActiveElement = ownerDocument(this.mountNode).activeElement; - - if (this.dialogElement && !this.dialogElement.contains(currentActiveElement)) { - this.dialogElement.focus(); - } - }; - isTopModal() { return this.props.manager.isTopModal(this); } diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 399c669b8ae04d..e10c5bdd55904a 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -82,6 +82,17 @@ export const styles = { }; class Popover extends React.Component { + transitionEl = null; + + handleGetOffsetTop = getOffsetTop; + + handleGetOffsetLeft = getOffsetLeft; + + handleResize = debounce(() => { + const element = ReactDOM.findDOMNode(this.transitionEl); + this.setPositioningStyles(element); + }, 166); // Corresponds to 10 frames at 60 Hz. + componentDidMount() { if (this.props.action) { this.props.action({ @@ -247,12 +258,6 @@ class Popover extends React.Component { }; } - transitionEl = undefined; - - handleGetOffsetTop = getOffsetTop; - - handleGetOffsetLeft = getOffsetLeft; - handleEnter = element => { if (this.props.onEnter) { this.props.onEnter(element); @@ -261,11 +266,6 @@ class Popover extends React.Component { this.setPositioningStyles(element); }; - handleResize = debounce(() => { - const element = ReactDOM.findDOMNode(this.transitionEl); - this.setPositioningStyles(element); - }, 166); // Corresponds to 10 frames at 60 Hz. - render() { const { action, @@ -378,8 +378,8 @@ Popover.propTypes = { * the application's client area. */ anchorPosition: PropTypes.shape({ - top: PropTypes.number, left: PropTypes.number, + top: PropTypes.number, }), /* * This determines which anchor prop to refer to to set diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index 71071df5f57f7f..6e77209b236d24 100644 --- a/packages/material-ui/src/Select/SelectInput.js +++ b/packages/material-ui/src/Select/SelectInput.js @@ -9,6 +9,12 @@ import { isFilled } from '../Input/Input'; * @ignore - internal component. */ class SelectInput extends React.Component { + ignoreNextBlur = false; + + displayNode = null; + + isOpenControlled = this.props.open !== undefined; + state = { menuMinWidth: null, open: false, @@ -28,25 +34,22 @@ class SelectInput extends React.Component { } } - ignoreNextBlur = false; - displayNode = null; - isOpenControlled = this.props.open !== undefined; - - update = this.isOpenControlled - ? ({ event, open }) => { - if (open) { - this.props.onOpen(event); - } else { - this.props.onClose(event); - } + update = ({ event, open }) => { + if (this.isOpenControlled) { + if (open) { + this.props.onOpen(event); + } else { + this.props.onClose(event); } - : ({ open }) => { - this.setState({ - // Perfom the layout computation outside of the render method. - menuMinWidth: this.props.autoWidth ? null : this.displayNode.clientWidth, - open, - }); - }; + return; + } + + this.setState({ + // Perfom the layout computation outside of the render method. + menuMinWidth: this.props.autoWidth ? null : this.displayNode.clientWidth, + open, + }); + }; handleClick = event => { // Opening the menu is going to blur the. It will be focused back when closed. diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index 5ae681767f59f4..52b5f3fbc1d0af 100644 --- a/packages/material-ui/src/Slide/Slide.js +++ b/packages/material-ui/src/Slide/Slide.js @@ -45,9 +45,13 @@ function getTranslateValue(props, node) { if (direction === 'left') { return `translateX(100vw) translateX(-${rect.left - offsetX}px)`; - } else if (direction === 'right') { + } + + if (direction === 'right') { return `translateX(-${rect.left + rect.width + GUTTER - offsetX}px)`; - } else if (direction === 'up') { + } + + if (direction === 'up') { return `translateY(100vh) translateY(-${rect.top - offsetY}px)`; } @@ -69,6 +73,22 @@ export function setTranslateValue(props, node) { * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. */ class Slide extends React.Component { + mounted = false; + + transition = null; + + handleResize = debounce(() => { + // Skip configuration where the position is screen size invariant. + if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') { + return; + } + + const node = ReactDOM.findDOMNode(this.transition); + if (node) { + setTranslateValue(this.props, node); + } + }, 166); // Corresponds to 10 frames at 60 Hz. + componentDidMount() { // state.mounted handle SSR, once the component is mounted, we need // to properly hide it. @@ -93,29 +113,6 @@ class Slide extends React.Component { this.handleResize.clear(); } - mounted = false; - transition = null; - - updatePosition() { - const node = ReactDOM.findDOMNode(this.transition); - if (node) { - node.style.visibility = 'inherit'; - setTranslateValue(this.props, node); - } - } - - handleResize = debounce(() => { - // Skip configuration where the position is screen size invariant. - if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') { - return; - } - - const node = ReactDOM.findDOMNode(this.transition); - if (node) { - setTranslateValue(this.props, node); - } - }, 166); // Corresponds to 10 frames at 60 Hz. - handleEnter = node => { setTranslateValue(this.props, node); reflow(node); @@ -177,6 +174,14 @@ class Slide extends React.Component { } }; + updatePosition() { + const node = ReactDOM.findDOMNode(this.transition); + if (node) { + node.style.visibility = 'inherit'; + setTranslateValue(this.props, node); + } + } + render() { const { children, diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index bc48782c46d9ea..09c689489226c0 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -92,23 +92,9 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) { } class Snackbar extends React.Component { - state = {}; - - static getDerivedStateFromProps(nextProps, prevState) { - if (typeof prevState.exited === 'undefined') { - return { - exited: !nextProps.open, - }; - } - - if (nextProps.open) { - return { - exited: false, - }; - } + timerAutoHide = null; - return null; - } + state = {}; componentDidMount() { if (this.props.open) { @@ -130,6 +116,22 @@ class Snackbar extends React.Component { clearTimeout(this.timerAutoHide); } + static getDerivedStateFromProps(nextProps, prevState) { + if (typeof prevState.exited === 'undefined') { + return { + exited: !nextProps.open, + }; + } + + if (nextProps.open) { + return { + exited: false, + }; + } + + return null; + } + // Timer that controls delay before snackbar auto hides setAutoHideTimer(autoHideDuration = null) { if (!this.props.onClose || this.props.autoHideDuration == null) { @@ -146,8 +148,6 @@ class Snackbar extends React.Component { }, autoHideDuration || this.props.autoHideDuration || 0); } - timerAutoHide = null; - handleMouseEnter = event => { if (this.props.onMouseEnter) { this.props.onMouseEnter(event); diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js index aa600c20cbcba2..5376a839ab3e66 100644 --- a/packages/material-ui/src/StepContent/StepContent.test.js +++ b/packages/material-ui/src/StepContent/StepContent.test.js @@ -1,8 +1,8 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow, createMount } from '../test-utils'; -import StepContent from '../StepContent'; import Collapse from '../Collapse'; +import StepContent from './StepContent'; describe('', () => { let shallow; diff --git a/packages/material-ui/src/StepIcon/StepIcon.test.js b/packages/material-ui/src/StepIcon/StepIcon.test.js index 6d3679b9f3bb33..a103f5b89206db 100644 --- a/packages/material-ui/src/StepIcon/StepIcon.test.js +++ b/packages/material-ui/src/StepIcon/StepIcon.test.js @@ -3,8 +3,8 @@ import { assert } from 'chai'; import CheckCircle from '../internal/svg-icons/CheckCircle'; import Warning from '../internal/svg-icons/Warning'; import { createShallow, createMount } from '../test-utils'; -import StepIcon from '../StepIcon'; import StepPositionIcon from './StepPositionIcon'; +import StepIcon from './StepIcon'; describe('', () => { let shallow; diff --git a/packages/material-ui/src/StepLabel/StepLabel.test.js b/packages/material-ui/src/StepLabel/StepLabel.test.js index a262854e7a94e7..f4238c35548278 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.test.js +++ b/packages/material-ui/src/StepLabel/StepLabel.test.js @@ -2,8 +2,8 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow, createMount, getClasses } from '../test-utils'; import Typography from '../Typography'; -import StepLabel from '../StepLabel'; import StepIcon from '../StepIcon'; +import StepLabel from './StepLabel'; describe('', () => { let shallow; diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js index e52a34fbfadfb0..fc82f4176c2cab 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js @@ -30,27 +30,17 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) { } class SwipeableDrawer extends React.Component { - state = {}; + backdrop = null; - static getDerivedStateFromProps(nextProps, prevState) { - if (typeof prevState.maybeSwiping === 'undefined') { - return { - maybeSwiping: false, - open: nextProps.open, - }; - } + paper = null; - if (!nextProps.open && prevState.open) { - return { - maybeSwiping: false, - open: nextProps.open, - }; - } + isSwiping = null; - return { - open: nextProps.open, - }; - } + startX = null; + + startY = null; + + state = {}; componentDidMount() { if (this.props.variant === 'temporary') { @@ -81,6 +71,26 @@ class SwipeableDrawer extends React.Component { } } + static getDerivedStateFromProps(nextProps, prevState) { + if (typeof prevState.maybeSwiping === 'undefined') { + return { + maybeSwiping: false, + open: nextProps.open, + }; + } + + if (!nextProps.open && prevState.open) { + return { + maybeSwiping: false, + open: nextProps.open, + }; + } + + return { + open: nextProps.open, + }; + } + getMaxTranslate() { return isHorizontal(this.props) ? this.paper.clientWidth : this.paper.clientHeight; } @@ -298,11 +308,13 @@ class SwipeableDrawer extends React.Component { this.isSwiping = null; }; - backdrop = null; - paper = null; - isSwiping = null; - startX = null; - startY = null; + handleBackdropRef = node => { + this.backdrop = node ? ReactDOM.findDOMNode(node) : null; + }; + + handlePaperRef = node => { + this.paper = node ? ReactDOM.findDOMNode(node) : null; + }; listenTouchStart() { document.body.addEventListener('touchstart', this.handleBodyTouchStart); @@ -318,14 +330,6 @@ class SwipeableDrawer extends React.Component { document.body.removeEventListener('touchcancel', this.handleBodyTouchEnd); } - handleBackdropRef = node => { - this.backdrop = node ? ReactDOM.findDOMNode(node) : null; - }; - - handlePaperRef = node => { - this.paper = node ? ReactDOM.findDOMNode(node) : null; - }; - render() { const { disableBackdropTransition, diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js index fdbaf42a4dcb30..bdea8c4d5511d3 100644 --- a/packages/material-ui/src/Tab/Tab.js +++ b/packages/material-ui/src/Tab/Tab.js @@ -91,6 +91,8 @@ export const styles = theme => ({ }); class Tab extends React.Component { + label = null; + state = { labelWrapped: false, }; @@ -122,8 +124,6 @@ class Tab extends React.Component { } }; - label = undefined; - checkTextWrap = () => { if (this.label) { const labelWrapped = this.label.getClientRects().length > 1; diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index d63b3c24c03283..48f4e9c4fd7340 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -7,9 +7,9 @@ import Select from '../Select'; import IconButton from '../IconButton'; import TableFooter from '../TableFooter'; import TableCell from '../TableCell'; -import TablePagination from '../TablePagination'; import Typography from '../Typography'; import TableRow from '../TableRow'; +import TablePagination from './TablePagination'; describe('', () => { const noop = () => {}; diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js index 68b31343da797f..8906bf42bcb115 100644 --- a/packages/material-ui/src/Tabs/ScrollbarSize.js +++ b/packages/material-ui/src/Tabs/ScrollbarSize.js @@ -18,6 +18,17 @@ const styles = { * It has been moved into the core in order to minimize the bundle size. */ class ScrollbarSize extends React.Component { + handleResize = debounce(() => { + const { onChange } = this.props; + + const prevHeight = this.scrollbarHeight; + const prevWidth = this.scrollbarWidth; + this.setMeasurements(); + if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) { + onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth }); + } + }, 166); // Corresponds to 10 frames at 60 Hz. + componentDidMount() { this.setMeasurements(); this.props.onLoad({ @@ -39,17 +50,6 @@ class ScrollbarSize extends React.Component { this.scrollbarWidth = this.node.offsetWidth - this.node.clientWidth; }; - handleResize = debounce(() => { - const { onChange } = this.props; - - const prevHeight = this.scrollbarHeight; - const prevWidth = this.scrollbarWidth; - this.setMeasurements(); - if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) { - onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth }); - } - }, 166); // Corresponds to 10 frames at 60 Hz. - render() { const { onChange } = this.props; diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 39214efc861fbc..c689a90d8e572b 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -48,6 +48,19 @@ export const styles = theme => ({ }); class Tabs extends React.Component { + tabs = null; + + valueToIndex = new Map(); + + handleResize = debounce(() => { + this.updateIndicatorState(this.props); + this.updateScrollButtonState(); + }, 166); // Corresponds to 10 frames at 60 Hz. + + handleTabsScroll = debounce(() => { + this.updateScrollButtonState(); + }, 166); // Corresponds to 10 frames at 60 Hz. + state = { indicatorStyle: {}, scrollerStyle: { @@ -153,14 +166,6 @@ class Tabs extends React.Component { return { tabsMeta, tabMeta }; }; - tabs = undefined; - valueToIndex = new Map(); - - handleResize = debounce(() => { - this.updateIndicatorState(this.props); - this.updateScrollButtonState(); - }, 166); // Corresponds to 10 frames at 60 Hz. - handleLeftScrollClick = () => { if (this.tabs) { this.moveTabsScroll(-this.tabs.clientWidth); @@ -181,10 +186,6 @@ class Tabs extends React.Component { }); }; - handleTabsScroll = debounce(() => { - this.updateScrollButtonState(); - }, 166); // Corresponds to 10 frames at 60 Hz. - moveTabsScroll = delta => { const { theme } = this.props; @@ -197,36 +198,6 @@ class Tabs extends React.Component { } }; - updateIndicatorState(props) { - const { theme, value } = props; - - const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction); - let left = 0; - - if (tabMeta && tabsMeta) { - const correction = - theme.direction === 'rtl' - ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth - : tabsMeta.scrollLeft; - left = tabMeta.left - tabsMeta.left + correction; - } - - const indicatorStyle = { - left, - // May be wrong until the font is loaded. - width: tabMeta ? tabMeta.width : 0, - }; - - if ( - (indicatorStyle.left !== this.state.indicatorStyle.left || - indicatorStyle.width !== this.state.indicatorStyle.width) && - !isNaN(indicatorStyle.left) && - !isNaN(indicatorStyle.width) - ) { - this.setState({ indicatorStyle }); - } - } - scrollSelectedIntoView = () => { const { theme, value } = this.props; const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction); @@ -268,6 +239,36 @@ class Tabs extends React.Component { } }; + updateIndicatorState(props) { + const { theme, value } = props; + + const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction); + let left = 0; + + if (tabMeta && tabsMeta) { + const correction = + theme.direction === 'rtl' + ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth + : tabsMeta.scrollLeft; + left = tabMeta.left - tabsMeta.left + correction; + } + + const indicatorStyle = { + left, + // May be wrong until the font is loaded. + width: tabMeta ? tabMeta.width : 0, + }; + + if ( + (indicatorStyle.left !== this.state.indicatorStyle.left || + indicatorStyle.width !== this.state.indicatorStyle.width) && + !isNaN(indicatorStyle.left) && + !isNaN(indicatorStyle.width) + ) { + this.setState({ indicatorStyle }); + } + } + render() { const { action, diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 6e7d1ede3dd6b5..23ad7057fefeb8 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -97,6 +97,28 @@ function flipPlacement(placement) { } class Tooltip extends React.Component { + enterTimer = null; + + leaveTimer = null; + + touchTimer = null; + + closeTimer = null; + + isControlled = null; + + popper = null; + + children = null; + + ignoreNonTouchEvents = false; + + handleResize = debounce(() => { + if (this.popper) { + this.popper._popper.scheduleUpdate(); + } + }, 166); // Corresponds to 10 frames at 60 Hz. + constructor(props) { super(props); @@ -132,21 +154,6 @@ class Tooltip extends React.Component { this.handleResize.clear(); } - enterTimer = null; - leaveTimer = null; - touchTimer = null; - closeTimer = null; - isControlled = null; - popper = null; - children = null; - ignoreNonTouchEvents = false; - - handleResize = debounce(() => { - if (this.popper) { - this.popper._popper.scheduleUpdate(); - } - }, 166); // Corresponds to 10 frames at 60 Hz. - handleEnter = event => { const { children, enterDelay } = this.props; const childrenProps = children.props; diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js index ce302b635cbb11..ceddcaaf58adba 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.test.js +++ b/packages/material-ui/src/Tooltip/Tooltip.test.js @@ -140,7 +140,7 @@ describe('', () => { it('should respond to external events', () => { const wrapper = shallow( - + , ); const children = getTargetChildren(wrapper); @@ -163,7 +163,7 @@ describe('', () => { onOpen={handleRequestOpen} onClose={handleClose} > - + , ); const children = getTargetChildren(wrapper); @@ -191,7 +191,7 @@ describe('', () => { it('should not respond to quick events', () => { const wrapper = shallow( - + , ); const children = getTargetChildren(wrapper); @@ -205,7 +205,7 @@ describe('', () => { it('should open on long press', () => { const wrapper = shallow( - + , ); const children = getTargetChildren(wrapper); @@ -224,7 +224,7 @@ describe('', () => { it('should mount without any issue', () => { mount( - + , ); }); @@ -244,7 +244,7 @@ describe('', () => { it('should take the enterDelay into account', () => { const wrapper = shallow( - + , ); const children = getTargetChildren(wrapper); @@ -257,7 +257,7 @@ describe('', () => { it('should take the leaveDelay into account', () => { const wrapper = shallow( - + , ); const children = getTargetChildren(wrapper); @@ -277,7 +277,9 @@ describe('', () => { const handler = spy(); const wrapper = shallow( - + , ); const children = getTargetChildren(wrapper); @@ -329,7 +331,9 @@ describe('', () => { it('should raise a warning when we can listen to events', () => { mount( - + , ); assert.strictEqual(consoleErrorMock.callCount(), 1, 'should call console.error'); diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index 804d64a57e78f6..cd5e0565133bb0 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -32,6 +32,10 @@ export const styles = { }; class SwitchBase extends React.Component { + input = null; + + isControlled = null; + constructor(props) { super(props); @@ -44,9 +48,6 @@ class SwitchBase extends React.Component { state = {}; - input = null; - isControlled = null; - handleFocus = event => { if (this.props.onFocus) { this.props.onFocus(event); diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js index 7a66597786cd9c..bd585729d0143e 100644 --- a/packages/material-ui/src/styles/MuiThemeProvider.js +++ b/packages/material-ui/src/styles/MuiThemeProvider.js @@ -11,6 +11,13 @@ import exactProp from '../utils/exactProp'; * This component should preferably be used at **the root of your component tree**. */ class MuiThemeProvider extends React.Component { + broadcast = createBroadcast(); + + unsubscribeId = null; + + // We are not using the React state in order to avoid unnecessary rerender. + outerTheme = null; + constructor(props, context) { super(props, context); @@ -60,11 +67,6 @@ class MuiThemeProvider extends React.Component { } } - broadcast = createBroadcast(); - unsubscribeId = null; - // We are not using the React state in order to avoid unnecessary rerender. - outerTheme = null; - // Simple merge between the outer theme and the local theme mergeOuterLocalTheme(localTheme) { // To support composition of theme. diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index c98935fe476694..68aa9a2fc9c22e 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -132,7 +132,7 @@ export function getLuminance(color: string) { if (decomposedColor.type.indexOf('rgb') !== -1) { const rgb = decomposedColor.values.map(val => { val /= 255; // normalized - return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4); + return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4; }); // Truncate at 3 digits return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3)); diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 4d353cd2dc12d8..ee90d0d3d38ac5 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -2,9 +2,9 @@ import { assert } from 'chai'; import consoleErrorMock from 'test/utils/consoleErrorMock'; -import createPalette, { dark, light } from './createPalette'; import { indigo, pink, deepOrange, green, red } from '../colors'; -import { lighten, darken } from '../styles/colorManipulator'; +import { lighten, darken } from './colorManipulator'; +import createPalette, { dark, light } from './createPalette'; describe('createPalette()', () => { before(() => { diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js index 6cae7524736507..c2b64c647d9a01 100644 --- a/packages/material-ui/src/styles/withStyles.js +++ b/packages/material-ui/src/styles/withStyles.js @@ -69,6 +69,20 @@ const withStyles = (stylesOrCreator, options = {}) => Component => { ); class WithStyles extends React.Component { + disableStylesGeneration = false; + + jss = null; + + sheetOptions = null; + + sheetsManager = sheetsManager; + + stylesCreatorSaved = null; + + theme = null; + + unsubscribeId = null; + constructor(props, context) { super(props, context); @@ -259,14 +273,6 @@ const withStyles = (stylesOrCreator, options = {}) => Component => { } } - disableStylesGeneration = false; - jss = null; - sheetOptions = null; - sheetsManager = sheetsManager; - stylesCreatorSaved = null; - theme = null; - unsubscribeId = null; - render() { const { classes, innerRef, ...other } = this.props; diff --git a/packages/material-ui/src/styles/withStyles.test.js b/packages/material-ui/src/styles/withStyles.test.js index 83c769ba9478de..f0a263b588a0c4 100644 --- a/packages/material-ui/src/styles/withStyles.test.js +++ b/packages/material-ui/src/styles/withStyles.test.js @@ -14,7 +14,7 @@ import createGenerateClassName from './createGenerateClassName'; import { createShallow, createMount, getClasses } from '../test-utils'; // eslint-disable-next-line react/prefer-stateless-function -class Empty extends React.Component<{ classes: Object, theme?: Object }> { +class Empty extends React.Component<{}> { render() { return
; } diff --git a/packages/material-ui/src/styles/withTheme.js b/packages/material-ui/src/styles/withTheme.js index 17591de6c3ebd4..bedd447f25fd11 100644 --- a/packages/material-ui/src/styles/withTheme.js +++ b/packages/material-ui/src/styles/withTheme.js @@ -18,6 +18,8 @@ function getDefaultTheme() { // Provide the theme object as a property to the input component. const withTheme = () => Component => { class WithTheme extends React.Component { + unsubscribeId = null; + constructor(props, context) { super(props, context); @@ -41,8 +43,6 @@ const withTheme = () => Component => { } } - unsubscribeId = null; - render() { return ; } diff --git a/packages/material-ui/src/test-utils/until.test.js b/packages/material-ui/src/test-utils/until.test.js index 2b98857365cc11..7cd99e3b73957d 100644 --- a/packages/material-ui/src/test-utils/until.test.js +++ b/packages/material-ui/src/test-utils/until.test.js @@ -102,8 +102,12 @@ describe('until', () => { // eslint-disable-next-line react/no-multi-comp class Bar extends React.Component<{}> { static childContextTypes = { quux: PropTypes.bool }; + getChildContext = () => ({ quux: true }); - render = () => ; + + render() { + return ; + } } it('context propagation passes down context from an intermediary component', () => { diff --git a/packages/material-ui/src/utils/ownerWindow.js b/packages/material-ui/src/utils/ownerWindow.js index e40c3d828978b6..4cb952a4c1a3b7 100644 --- a/packages/material-ui/src/utils/ownerWindow.js +++ b/packages/material-ui/src/utils/ownerWindow.js @@ -1,6 +1,6 @@ // @flow -import ownerDocument from '../utils/ownerDocument'; +import ownerDocument from './ownerDocument'; function ownerWindow(node: Node, fallback: window = window) { const doc: Document = ownerDocument(node); diff --git a/packages/material-ui/src/utils/reactHelpers.test.js b/packages/material-ui/src/utils/reactHelpers.test.js index e7d58cf6fccd8c..14b92f80f3f00b 100644 --- a/packages/material-ui/src/utils/reactHelpers.test.js +++ b/packages/material-ui/src/utils/reactHelpers.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { assert } from 'chai'; import { isMuiComponent, isMuiElement } from './reactHelpers'; -import { Input, ListItemAvatar, ListItemSecondaryAction, SvgIcon } from '../'; +import { Input, ListItemAvatar, ListItemSecondaryAction, SvgIcon } from '..'; describe('utils/reactHelpers.js', () => { describe('isMuiElement', () => { diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js index 380a0675d2f1d9..127c8b4f5a0487 100644 --- a/packages/material-ui/src/withWidth/withWidth.js +++ b/packages/material-ui/src/withWidth/withWidth.js @@ -35,6 +35,15 @@ const withWidth = (options = {}) => Component => { } = options; class WithWidth extends React.Component { + handleResize = debounce(() => { + const width = this.getWidth(); + if (width !== this.state.width) { + this.setState({ + width, + }); + } + }, resizeInterval); + constructor(props) { super(props); @@ -88,15 +97,6 @@ const withWidth = (options = {}) => Component => { return width; } - handleResize = debounce(() => { - const width = this.getWidth(); - if (width !== this.state.width) { - this.setState({ - width, - }); - } - }, resizeInterval); - render() { const { initialWidth, theme, width, ...other } = this.props; diff --git a/pages/api/popover.md b/pages/api/popover.md index a0056cd09569c8..d48069bec32b10 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -15,7 +15,7 @@ filename: /packages/material-ui/src/Popover/Popover.js | action | func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all posible actions that can be triggered programmatically. | | anchorEl | union: object |
 func
|   | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. | | anchorOrigin | {horizontal?: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical?: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | -| anchorPosition | {top?: number, left?: number} |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | +| anchorPosition | {left?: number, top?: number} |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | | anchorReference | enum: 'anchorEl' |
 'anchorPosition' |
 'none'
| 'anchorEl' | | | children | node |   | The content of the component. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | diff --git a/test/regressions/tests/Input/Inputs.js b/test/regressions/tests/Input/Inputs.js index 33e8289a997fde..b87aa83aa10aca 100644 --- a/test/regressions/tests/Input/Inputs.js +++ b/test/regressions/tests/Input/Inputs.js @@ -19,12 +19,12 @@ const styles = { }; class Inputs extends React.Component { + focusInput = null; + componentDidMount() { this.focusInput.focus(); } - focusInput = null; - render() { const { classes } = this.props; diff --git a/yarn.lock b/yarn.lock index 2ab0ed02aed6d4..e529110961aa69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1254,21 +1254,17 @@ acorn-globals@^4.1.0: dependencies: acorn "^5.0.0" -acorn-jsx@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b" +acorn-jsx@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e" dependencies: - acorn "^3.0.4" - -acorn@^3.0.4: - version "3.3.0" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a" + acorn "^5.0.3" acorn@^4.0.3: version "4.0.13" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787" -acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2: +acorn@^5.0.0, acorn@^5.0.3, acorn@^5.3.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.0, acorn@^5.6.2: version "5.7.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8" @@ -1297,7 +1293,7 @@ agent-base@4, agent-base@^4.1.0, agent-base@^4.2.0: dependencies: es6-promisify "^5.0.0" -ajv-keywords@^2.0.0, ajv-keywords@^2.1.0: +ajv-keywords@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762" @@ -1305,7 +1301,7 @@ ajv-keywords@^3.0.0, ajv-keywords@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a" -ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0: +ajv@^5.1.0, ajv@^5.1.5: version "5.5.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965" dependencies: @@ -1314,7 +1310,7 @@ ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0: fast-json-stable-stringify "^2.0.0" json-schema-traverse "^0.3.0" -ajv@^6.0.1, ajv@^6.1.0: +ajv@^6.0.1, ajv@^6.1.0, ajv@^6.5.0: version "6.5.1" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.1.tgz#88ebc1263c7133937d108b80c5572e64e1d9322d" dependencies: @@ -1667,7 +1663,7 @@ axobject-query@^0.1.0: dependencies: ast-types-flow "0.0.7" -babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: +babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" dependencies: @@ -3188,7 +3184,7 @@ concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" -concat-stream@1.6.2, concat-stream@^1.5.0, concat-stream@^1.6.0: +concat-stream@1.6.2, concat-stream@^1.5.0: version "1.6.2" resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34" dependencies: @@ -3360,7 +3356,7 @@ cross-spawn-async@^1.0.1: lru-cache "^2.6.5" which "^1.1.1" -cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0: +cross-spawn@5.1.0, cross-spawn@^5.0.1: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" dependencies: @@ -3867,9 +3863,11 @@ double-ended-queue@^2.1.0-0: version "2.1.0-0" resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c" -downshift@^1.22.1: - version "1.31.16" - resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.16.tgz#acd81631539502d4112d01bd573654419fd9f640" +downshift@^2.0.0: + version "2.0.10" + resolved "https://registry.yarnpkg.com/downshift/-/downshift-2.0.10.tgz#598b93c5598c4c45caf8c46479fdfde587da7860" + dependencies: + prop-types "^15.6.0" duplexer2@~0.1.4: version "0.1.4" @@ -4091,7 +4089,7 @@ error-stack-parser@^2.0.0: dependencies: stackframe "^1.0.4" -es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0: +es-abstract@^1.10.0, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0: version "1.12.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165" dependencies: @@ -4200,17 +4198,21 @@ escope@^3.6.0: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-config-airbnb-base@^12.1.0: - version "12.1.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz#386441e54a12ccd957b0a92564a4bafebd747944" +eslint-config-airbnb-base@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.0.0.tgz#2ee6279c4891128e49d6445b24aa13c2d1a21450" dependencies: eslint-restricted-globals "^0.1.1" + object.assign "^4.1.0" + object.entries "^1.0.4" -eslint-config-airbnb@^16.1.0: - version "16.1.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz#2546bfb02cc9fe92284bf1723ccf2e87bc45ca46" +eslint-config-airbnb@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.0.0.tgz#1bb8c4255483320bb68c3b614f71ae6058b0b2db" dependencies: - eslint-config-airbnb-base "^12.1.0" + eslint-config-airbnb-base "^13.0.0" + object.assign "^4.1.0" + object.entries "^1.0.4" eslint-import-resolver-node@^0.3.1: version "0.3.2" @@ -4328,59 +4330,66 @@ eslint-scope@^3.7.1, eslint-scope@~3.7.1: esrecurse "^4.1.0" estraverse "^4.1.1" +eslint-scope@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172" + dependencies: + esrecurse "^4.1.0" + estraverse "^4.1.1" + eslint-visitor-keys@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d" -eslint@^4.11.0: - version "4.19.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300" +eslint@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.0.0.tgz#3576704f7377aca072da69c00862277c5fe57153" dependencies: - ajv "^5.3.0" - babel-code-frame "^6.22.0" + ajv "^6.5.0" + babel-code-frame "^6.26.0" chalk "^2.1.0" - concat-stream "^1.6.0" - cross-spawn "^5.1.0" + cross-spawn "^6.0.5" debug "^3.1.0" doctrine "^2.1.0" - eslint-scope "^3.7.1" + eslint-scope "^4.0.0" eslint-visitor-keys "^1.0.0" - espree "^3.5.4" - esquery "^1.0.0" + espree "^4.0.0" + esquery "^1.0.1" esutils "^2.0.2" file-entry-cache "^2.0.0" functional-red-black-tree "^1.0.1" glob "^7.1.2" - globals "^11.0.1" + globals "^11.5.0" ignore "^3.3.3" imurmurhash "^0.1.4" - inquirer "^3.0.6" - is-resolvable "^1.0.0" - js-yaml "^3.9.1" + inquirer "^5.2.0" + is-resolvable "^1.1.0" + js-yaml "^3.11.0" json-stable-stringify-without-jsonify "^1.0.1" levn "^0.3.0" - lodash "^4.17.4" - minimatch "^3.0.2" + lodash "^4.17.5" + minimatch "^3.0.4" mkdirp "^0.5.1" natural-compare "^1.4.0" optionator "^0.8.2" path-is-inside "^1.0.2" pluralize "^7.0.0" progress "^2.0.0" - regexpp "^1.0.1" + regexpp "^1.1.0" require-uncached "^1.0.3" - semver "^5.3.0" + semver "^5.5.0" + string.prototype.matchall "^2.0.0" strip-ansi "^4.0.0" - strip-json-comments "~2.0.1" - table "4.0.2" - text-table "~0.2.0" + strip-json-comments "^2.0.1" + table "^4.0.3" + text-table "^0.2.0" -espree@^3.5.4: - version "3.5.4" - resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7" +espree@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/espree/-/espree-4.0.0.tgz#253998f20a0f82db5d866385799d912a83a36634" dependencies: - acorn "^5.5.0" - acorn-jsx "^3.0.0" + acorn "^5.6.0" + acorn-jsx "^4.1.1" esprima@3.x.x, esprima@^3.1.3: version "3.1.3" @@ -4398,7 +4407,7 @@ esprima@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9" -esquery@^1.0.0: +esquery@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708" dependencies: @@ -4555,7 +4564,7 @@ extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" -external-editor@^2.0.4: +external-editor@^2.1.0: version "2.2.0" resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5" dependencies: @@ -5139,14 +5148,14 @@ global@~4.3.0: min-document "^2.19.0" process "~0.5.1" -globals@^11.0.1, globals@^11.3.0: - version "11.6.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.6.0.tgz#7e4d12ffd6b8d174851ff5a246bfb2b8b002a6c7" - -globals@^11.1.0: +globals@^11.1.0, globals@^11.5.0: version "11.7.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673" +globals@^11.3.0: + version "11.6.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.6.0.tgz#7e4d12ffd6b8d174851ff5a246bfb2b8b002a6c7" + globals@^9.18.0: version "9.18.0" resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a" @@ -5702,21 +5711,20 @@ ini@^1.3.4, ini@~1.3.0: version "1.3.5" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" -inquirer@^3.0.6: - version "3.3.0" - resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9" +inquirer@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726" dependencies: ansi-escapes "^3.0.0" chalk "^2.0.0" cli-cursor "^2.1.0" cli-width "^2.0.0" - external-editor "^2.0.4" + external-editor "^2.1.0" figures "^2.0.0" lodash "^4.3.0" mute-stream "0.0.7" run-async "^2.2.0" - rx-lite "^4.0.8" - rx-lite-aggregates "^4.0.8" + rxjs "^5.5.2" string-width "^2.1.0" strip-ansi "^4.0.0" through "^2.3.6" @@ -6022,7 +6030,7 @@ is-regex@^1.0.4: dependencies: has "^1.0.1" -is-resolvable@^1.0.0: +is-resolvable@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88" @@ -6214,7 +6222,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@^3.9.0, js-yaml@^3.9.1: +js-yaml@^3.11.0, js-yaml@^3.9.0: version "3.12.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1" dependencies: @@ -9101,7 +9109,13 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" -regexpp@^1.0.1: +regexp.prototype.flags@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c" + dependencies: + define-properties "^1.1.2" + +regexpp@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab" @@ -9427,9 +9441,9 @@ rollup-pluginutils@^2.0.1: estree-walker "^0.5.2" micromatch "^2.3.11" -rollup@^0.59.4: - version "0.59.4" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.59.4.tgz#6f80f7017c22667ff1bf3e62adf8624a44cc44aa" +rollup@^0.61.0: + version "0.61.2" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.61.2.tgz#30a953736964683a5b8ea952b137a393d84e6302" dependencies: "@types/estree" "0.0.39" "@types/node" "*" @@ -9457,15 +9471,11 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -rx-lite-aggregates@^4.0.8: - version "4.0.8" - resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be" +rxjs@^5.5.2: + version "5.5.11" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.11.tgz#f733027ca43e3bec6b994473be4ab98ad43ced87" dependencies: - rx-lite "*" - -rx-lite@*, rx-lite@^4.0.8: - version "4.0.8" - resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444" + symbol-observable "1.0.1" safe-buffer@5.1.1: version "5.1.1" @@ -9649,7 +9659,7 @@ signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" -sinon@^5.0.3: +sinon@^5.0.0: version "5.1.1" resolved "https://registry.yarnpkg.com/sinon/-/sinon-5.1.1.tgz#19c59810ffb733ea6e76a28b94a71fc4c2f523b8" dependencies: @@ -10023,6 +10033,16 @@ string-width@^1.0.1: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" +string.prototype.matchall@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-2.0.0.tgz#2af8fe3d2d6dc53ca2a59bd376b089c3c152b3c8" + dependencies: + define-properties "^1.1.2" + es-abstract "^1.10.0" + function-bind "^1.1.1" + has-symbols "^1.0.0" + regexp.prototype.flags "^1.2.0" + string_decoder@^1.0.0, string_decoder@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8" @@ -10067,7 +10087,7 @@ strip-eof@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" -strip-json-comments@~2.0.1: +strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" @@ -10132,6 +10152,10 @@ svgo@^0.7.0: sax "~1.2.1" whet.extend "~0.9.9" +symbol-observable@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4" + symbol-observable@1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d" @@ -10144,18 +10168,7 @@ symbol-tree@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" -table@4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36" - dependencies: - ajv "^5.2.3" - ajv-keywords "^2.1.0" - chalk "^2.1.0" - lodash "^4.17.4" - slice-ansi "1.0.0" - string-width "^2.1.1" - -table@^4.0.2: +table@^4.0.2, table@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc" dependencies: @@ -10224,7 +10237,7 @@ text-encoding@^0.6.4: version "0.6.4" resolved "https://registry.yarnpkg.com/text-encoding/-/text-encoding-0.6.4.tgz#e399a982257a276dae428bb92845cb71bdc26d19" -text-table@~0.2.0: +text-table@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"