diff --git a/src/buttons/flat-button-label.jsx b/src/buttons/flat-button-label.jsx index 19cb7619767ee3..41160ddf7ca97a 100644 --- a/src/buttons/flat-button-label.jsx +++ b/src/buttons/flat-button-label.jsx @@ -43,7 +43,7 @@ const FlatButtonLabel = React.createClass({ this.setState({muiTheme: newMuiTheme}); }, - static: { + statics: { getRelevantContextKeys(muiTheme) { return { spacingDesktopGutterLess: muiTheme.rawTheme.spacing.desktopGutterLess, @@ -57,7 +57,7 @@ const FlatButtonLabel = React.createClass({ style, } = this.props; - const contextKeys = this.getRelevantContextKeys(this.state.muiTheme); + const contextKeys = this.constructor.getRelevantContextKeys(this.state.muiTheme); const mergedRootStyles = Styles.mergeAndPrefix({ position: 'relative', diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx index 650ef6d738759b..e62db1797fed54 100644 --- a/src/card/card-expandable.jsx +++ b/src/card/card-expandable.jsx @@ -15,7 +15,7 @@ const CardExpandable = React.createClass({ ], getStyles() { - const contextKeys = this.getRelevantContextKeys(this.state.muiTheme); + const contextKeys = this.constructor.getRelevantContextKeys(this.state.muiTheme); const directionStyle = contextKeys.isRtl ? { left: 4, diff --git a/src/mixins/context-pure.js b/src/mixins/context-pure.js index d469da781e3810..2a24b14c5fb3dc 100644 --- a/src/mixins/context-pure.js +++ b/src/mixins/context-pure.js @@ -31,15 +31,25 @@ module.exports = { //Don't update if state, prop, and context are equal shouldComponentUpdate(nextProps, nextState, nextContext) { - const staticTheme = this.context.muiTheme && this.context.muiTheme.static; - const isExactlyOneThemeUndefined = (!this.context.muiTheme && nextContext.muiTheme) || (this.context.muiTheme && !nextContext.muiTheme); - - return ( - !shallowEqual(this.props, nextProps) || - !shallowEqual(this.state, nextState) || - isExactlyOneThemeUndefined || - (!staticTheme && !relevantContextKeysEqual(this.constructor, this.context.muiTheme, nextContext.muiTheme)) - ); + + //If either the props or state have changed, component should update + if(!shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)) { + return true; + } + + //If current theme and next theme are both undefined, do not update + if(!this.context.muiTheme && !nextContext.muiTheme) { + return false; + } + + //If both themes exist, compare keys only if current theme is not static + if(this.context.muiTheme && nextContext.muiTheme) { + return !this.context.muiTheme.static && + !relevantContextKeysEqual(this.constructor, this.context.muiTheme, nextContext.muiTheme); + } + + //At this point it is guaranteed that exactly one theme is undefined so simply update + return true; }, }; diff --git a/src/text-field.jsx b/src/text-field.jsx index 9eee0a4bd708e4..3a0f303d07cd9c 100644 --- a/src/text-field.jsx +++ b/src/text-field.jsx @@ -75,7 +75,7 @@ const TextField = React.createClass({ statics: { getRelevantContextKeys(muiTheme) { - const textFieldTheme = this.state.muiTheme.textField + const textFieldTheme = muiTheme.textField return { floatingLabelColor: textFieldTheme.floatingLabelColor, @@ -149,7 +149,7 @@ const TextField = React.createClass({ hintColor, errorColor, isRtl, - } = this.getRelevantContextKeys(this.state.muiTheme); + } = this.constructor.getRelevantContextKeys(this.state.muiTheme); let styles = { root: {