diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js index b571b4b4a6b954..015cd06ea868d3 100644 --- a/docs/src/modules/components/withRoot.js +++ b/docs/src/modules/components/withRoot.js @@ -277,9 +277,8 @@ function withRoot(Component) { redux = null; constructor(props) { - super(props); - - this.redux = initRedux(this.props.reduxServerState || {}); + super(); + this.redux = initRedux(props.reduxServerState || {}); } getChildContext() { diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js index 242f5583e7f1d2..e5f23c3903ed67 100644 --- a/docs/src/pages/demos/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/demos/dialogs/ConfirmationDialog.js @@ -36,9 +36,8 @@ class ConfirmationDialogRaw extends React.Component { radioGroupRef = null; constructor(props) { - super(props); - - this.state.value = this.props.value; + super(); + this.state.value = props.value; } state = {}; diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js index 29a048921ed6fe..c7335134f49f65 100644 --- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js +++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js @@ -113,29 +113,25 @@ const styles = theme => ({ }); class CustomPaginationActionsTable extends React.Component { - constructor(props) { - super(props); - - this.state = { - rows: [ - createData('Cupcake', 305, 3.7), - createData('Donut', 452, 25.0), - createData('Eclair', 262, 16.0), - createData('Frozen yoghurt', 159, 6.0), - createData('Gingerbread', 356, 16.0), - createData('Honeycomb', 408, 3.2), - createData('Ice cream sandwich', 237, 9.0), - createData('Jelly Bean', 375, 0.0), - createData('KitKat', 518, 26.0), - createData('Lollipop', 392, 0.2), - createData('Marshmallow', 318, 0), - createData('Nougat', 360, 19.0), - createData('Oreo', 437, 18.0), - ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), - page: 0, - rowsPerPage: 5, - }; - } + state = { + rows: [ + createData('Cupcake', 305, 3.7), + createData('Donut', 452, 25.0), + createData('Eclair', 262, 16.0), + createData('Frozen yoghurt', 159, 6.0), + createData('Gingerbread', 356, 16.0), + createData('Honeycomb', 408, 3.2), + createData('Ice cream sandwich', 237, 9.0), + createData('Jelly Bean', 375, 0.0), + createData('KitKat', 518, 26.0), + createData('Lollipop', 392, 0.2), + createData('Marshmallow', 318, 0), + createData('Nougat', 360, 19.0), + createData('Oreo', 437, 18.0), + ].sort((a, b) => (a.calories < b.calories ? -1 : 1)), + page: 0, + rowsPerPage: 5, + }; handleChangePage = (event, page) => { this.setState({ page }); diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index 044ef47db6254c..5ad77d614f7470 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -180,32 +180,28 @@ const styles = theme => ({ }); class EnhancedTable extends React.Component { - constructor(props) { - super(props); - - this.state = { - order: 'asc', - orderBy: 'calories', - selected: [], - data: [ - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Donut', 452, 25.0, 51, 4.9), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Gingerbread', 356, 16.0, 49, 3.9), - createData('Honeycomb', 408, 3.2, 87, 6.5), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Jelly Bean', 375, 0.0, 94, 0.0), - createData('KitKat', 518, 26.0, 65, 7.0), - createData('Lollipop', 392, 0.2, 98, 0.0), - createData('Marshmallow', 318, 0, 81, 2.0), - createData('Nougat', 360, 19.0, 9, 37.0), - createData('Oreo', 437, 18.0, 63, 4.0), - ], - page: 0, - rowsPerPage: 5, - }; - } + state = { + order: 'asc', + orderBy: 'calories', + selected: [], + data: [ + createData('Cupcake', 305, 3.7, 67, 4.3), + createData('Donut', 452, 25.0, 51, 4.9), + createData('Eclair', 262, 16.0, 24, 6.0), + createData('Frozen yoghurt', 159, 6.0, 24, 4.0), + createData('Gingerbread', 356, 16.0, 49, 3.9), + createData('Honeycomb', 408, 3.2, 87, 6.5), + createData('Ice cream sandwich', 237, 9.0, 37, 4.3), + createData('Jelly Bean', 375, 0.0, 94, 0.0), + createData('KitKat', 518, 26.0, 65, 7.0), + createData('Lollipop', 392, 0.2, 98, 0.0), + createData('Marshmallow', 318, 0, 81, 2.0), + createData('Nougat', 360, 19.0, 9, 37.0), + createData('Oreo', 437, 18.0, 63, 4.0), + ], + page: 0, + rowsPerPage: 5, + }; handleRequestSort = (event, property) => { const orderBy = property; diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 72190ba2500f63..febe65b1e0ddc1 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -84,8 +84,7 @@ class ExpansionPanel extends React.Component { isControlled = null; constructor(props) { - super(props); - + super(); this.isControlled = props.expanded != null; if (!this.isControlled) { // not controlled, use internal state diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index 82fdc84e56e3c5..9443ac760b4f42 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -46,11 +46,10 @@ export const styles = { */ class FormControl extends React.Component { constructor(props) { - super(props); - + super(); // We need to iterate through the children and find the Input in order // to fully support server side rendering. - const { children } = this.props; + const { children } = props; if (children) { React.Children.forEach(children, child => { if (!isMuiElement(child, ['Input', 'Select', 'NativeSelect'])) { diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 983fd3b4e0a890..e40c8045a7c774 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -233,13 +233,15 @@ function formControlState(props, context) { } class Input extends React.Component { - isControlled = this.props.value != null; + isControlled = null; input = null; // Holds the input reference constructor(props, context) { super(props, context); + this.isControlled = props.value != null; + if (this.isControlled) { this.checkDirty(props); } diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js index 96cce5840a2880..f81cafa2bfa6e2 100644 --- a/packages/material-ui/src/Input/Textarea.js +++ b/packages/material-ui/src/Input/Textarea.js @@ -42,7 +42,7 @@ export const styles = { * @ignore - internal component. */ class Textarea extends React.Component { - isControlled = this.props.value != null; + isControlled = null; shadowRef = null; @@ -57,8 +57,8 @@ class Textarea extends React.Component { }, 166); // Corresponds to 10 frames at 60 Hz. constructor(props) { - super(props); - + super(); + this.isControlled = props.value != null; // expects the components it renders to respond to 'value' // so that it can check whether they are filled. this.value = props.value || props.defaultValue || ''; diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 4080ea76ebe870..91b06a021b3c48 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -55,10 +55,9 @@ class Modal extends React.Component { mounted = false; constructor(props) { - super(props); - + super(); this.state = { - exited: !this.props.open, + exited: !props.open, }; } diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 0907531ec3c0a4..f4a6ca9118aea3 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -35,10 +35,9 @@ class Popper extends React.Component { popper = null; constructor(props) { - super(props); - + super(); this.state = { - exited: !this.props.open, + exited: !props.open, }; } diff --git a/packages/material-ui/src/RootRef/RootRef.js b/packages/material-ui/src/RootRef/RootRef.js index 41ad39eb436b78..e689ad676b223a 100644 --- a/packages/material-ui/src/RootRef/RootRef.js +++ b/packages/material-ui/src/RootRef/RootRef.js @@ -22,8 +22,8 @@ function setRef(ref, value) { * import RootRef from '@material-ui/core/RootRef'; * * class MyComponent extends React.Component { - * constructor(props) { - * super(props); + * constructor() { + * super(); * this.domRef = React.createRef(); * } * diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index b2c780e0c5fcc4..53fd5e47d08cdf 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -91,8 +91,7 @@ class Tooltip extends React.Component { }; constructor(props) { - super(props); - + super(); this.isControlled = props.open != null; this.state = { open: null, diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index dab8d0cfc133d2..ea9ea03738a212 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -40,8 +40,7 @@ class SwitchBase extends React.Component { isControlled = null; constructor(props) { - super(props); - + super(); this.isControlled = props.checked != null; if (!this.isControlled) { // not controlled, use internal state diff --git a/packages/material-ui/src/styles/MuiThemeProvider.js b/packages/material-ui/src/styles/MuiThemeProvider.js index 1a9986827aacdb..c2cafd64c33393 100644 --- a/packages/material-ui/src/styles/MuiThemeProvider.js +++ b/packages/material-ui/src/styles/MuiThemeProvider.js @@ -19,12 +19,11 @@ class MuiThemeProvider extends React.Component { outerTheme = null; constructor(props, context) { - super(props, context); - + super(); // Get the outer theme from the context, can be null this.outerTheme = themeListener.initial(context); // Propagate the theme so it can be accessed by the children - this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme)); + this.broadcast.setState(this.mergeOuterLocalTheme(props.theme)); } getChildContext() { diff --git a/packages/material-ui/src/styles/withStyles.js b/packages/material-ui/src/styles/withStyles.js index c2b64c647d9a01..1409caa3bd7036 100644 --- a/packages/material-ui/src/styles/withStyles.js +++ b/packages/material-ui/src/styles/withStyles.js @@ -85,10 +85,9 @@ const withStyles = (stylesOrCreator, options = {}) => Component => { constructor(props, context) { super(props, context); + this.jss = context[ns.jss] || jss; - this.jss = this.context[ns.jss] || jss; - - const { muiThemeProviderOptions } = this.context; + const { muiThemeProviderOptions } = context; if (muiThemeProviderOptions) { if (muiThemeProviderOptions.sheetsManager) { this.sheetsManager = muiThemeProviderOptions.sheetsManager; @@ -103,7 +102,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => { this.stylesCreatorSaved = stylesCreator; this.sheetOptions = { generateClassName, - ...this.context[ns.sheetOptions], + ...context[ns.sheetOptions], }; // We use || as the function call is lazy evaluated. this.theme = listenToTheme ? themeListener.initial(context) || getDefaultTheme() : noopTheme; diff --git a/packages/material-ui/src/styles/withTheme.js b/packages/material-ui/src/styles/withTheme.js index 0c18daae0f50b2..7d4f087146563e 100644 --- a/packages/material-ui/src/styles/withTheme.js +++ b/packages/material-ui/src/styles/withTheme.js @@ -22,8 +22,7 @@ const withTheme = () => Component => { unsubscribeId = null; constructor(props, context) { - super(props, context); - + super(); this.state = { // We use || as the function call is lazy evaluated. theme: themeListener.initial(context) || getDefaultTheme(), diff --git a/pages/api/root-ref.md b/pages/api/root-ref.md index a8a22dace44f64..4c5bbea41c6716 100644 --- a/pages/api/root-ref.md +++ b/pages/api/root-ref.md @@ -19,8 +19,8 @@ import React from 'react'; import RootRef from '@material-ui/core/RootRef'; class MyComponent extends React.Component { - constructor(props) { - super(props); + constructor() { + super(); this.domRef = React.createRef(); }