[Breaking Change] Use React.createContext

xotahal · Jun 26, 2018 · ebb0bc5 · ebb0bc5
1 parent 82de3c2
commit ebb0bc5
Show file tree

Hide file tree

Showing 34 changed files with 235 additions and 304 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-ui",
-  "version": "1.22.4",
+  "version": "1.30.0",
   "description": "React Native Material Design Components",
   "main": "./index.js",
   "scripts": {
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "color": "3.0.0",
+    "hoist-non-react-statics": "^2.5.5",
     "lodash.merge": "^4.0.0",
     "prop-types": "^15.5.10",
     "react-native-material-design-styles": "^0.2.6"

diff --git a/src/ActionButton/ActionButton.react.js b/src/ActionButton/ActionButton.react.js
@@ -18,6 +18,7 @@ import RippleFeedback from '../RippleFeedback';
 /* eslint-disable import/no-unresolved, import/extensions */
 import getPlatformElevation from '../styles/getPlatformElevation';
 /* eslint-enable import/no-unresolved, import/extensions */
+import withTheme from '../styles/withTheme';
 
 function darkenOrLighten(color, ratio = 0.5) {
   const c = Color(color);
@@ -83,13 +84,10 @@ const defaultProps = {
   hidden: false,
   rippleColor: null,
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context, state) {
-  const { actionButton } = context.uiTheme;
-  const { size } = props;
+function getStyles(props, state) {
+  const { size, theme } = props;
+  const { actionButton } = theme;
 
   const local = {
     container: {},
@@ -230,7 +228,7 @@ class ActionButton extends PureComponent {
       return rippleColor;
     }
 
-    const styles = getStyles(this.props, this.context, this.state);
+    const styles = getStyles(this.props, this.state);
 
     const { backgroundColor } = StyleSheet.flatten(styles.container);
 
@@ -471,7 +469,7 @@ class ActionButton extends PureComponent {
   render() {
     const { render } = this.state;
 
-    const styles = getStyles(this.props, this.context, this.state);
+    const styles = getStyles(this.props, this.state);
 
     if (render === 'toolbar') {
       return this.renderToolbarTransition(styles);
@@ -486,6 +484,5 @@ class ActionButton extends PureComponent {
 
 ActionButton.propTypes = propTypes;
 ActionButton.defaultProps = defaultProps;
-ActionButton.contextTypes = contextTypes;
 
-export default ActionButton;
+export default withTheme(ActionButton);
diff --git a/src/Avatar/Avatar.react.js b/src/Avatar/Avatar.react.js
@@ -5,6 +5,7 @@ import { View, Image, Text, StyleSheet } from 'react-native';
 import { ViewPropTypes } from '../utils';
 /* eslint-enable import/no-unresolved, import/extensions */
 import Icon from '../Icon';
+import withTheme from '../styles/withTheme';
 
 const propTypes = {
   /**
@@ -38,6 +39,10 @@ const propTypes = {
     container: ViewPropTypes.style,
     content: Text.propTypes.style, // eslint-disable-line
   }),
+  /**
+   * Theme
+   */
+  theme: PropTypes.any, // eslint-disable-line
 };
 const defaultProps = {
   image: null,
@@ -48,13 +53,10 @@ const defaultProps = {
   size: 48,
   style: {},
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context) {
-  const { avatar } = context.uiTheme;
-  const { size } = props;
+function getStyles(props) {
+  const { size, theme } = props;
+  const { avatar } = theme;
 
   const local = {};
 
@@ -74,13 +76,12 @@ function getStyles(props, context) {
 
 class Avatar extends PureComponent {
   render() {
-    const { image, icon, iconSize, iconColor, text } = this.props;
-    const { uiTheme } = this.context;
-    const { avatar, spacing } = uiTheme;
+    const { image, icon, iconSize, iconColor, text, theme } = this.props;
+    const { avatar, spacing } = theme;
 
     let content = null;
 
-    const styles = getStyles(this.props, this.context);
+    const styles = getStyles(this.props);
 
     if (icon) {
       const color = iconColor || StyleSheet.flatten(avatar.content).color;
@@ -102,6 +103,5 @@ class Avatar extends PureComponent {
 
 Avatar.propTypes = propTypes;
 Avatar.defaultProps = defaultProps;
-Avatar.contextTypes = contextTypes;
 
-export default Avatar;
+export default withTheme(Avatar);
diff --git a/src/Badge/Badge.react.js b/src/Badge/Badge.react.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 /* eslint-enable import/no-unresolved, import/extensions */
 import Icon from '../Icon';
 import { ViewPropTypes } from '../utils';
+import withTheme from '../styles/withTheme';
 
 const propTypes = {
   /**
@@ -59,13 +60,10 @@ const defaultProps = {
     },
   },
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context) {
-  const { badge, palette } = context.uiTheme;
-  const { accent, size, stroke } = props;
+function getStyles(props) {
+  const { accent, size, stroke, theme } = props;
+  const { badge, palette } = theme;
 
   const local = {
     container: {},
@@ -160,7 +158,7 @@ class Badge extends PureComponent {
   }
 
   render() {
-    const styles = getStyles(this.props, this.context);
+    const styles = getStyles(this.props);
 
     return (
       <View style={{ flexDirection: 'row' }}>
@@ -173,6 +171,5 @@ class Badge extends PureComponent {
 
 Badge.propTypes = propTypes;
 Badge.defaultProps = defaultProps;
-Badge.contextTypes = contextTypes;
 
-export default Badge;
+export default withTheme(Badge);
diff --git a/src/BottomNavigation/BottomNavigation.react.js b/src/BottomNavigation/BottomNavigation.react.js
@@ -5,6 +5,8 @@ import { View, Animated, Easing, StyleSheet } from 'react-native';
 import { ViewPropTypes } from '../utils';
 /* eslint-enable import/no-unresolved, import/extensions */
 
+import withTheme from '../styles/withTheme';
+
 import BottomNavigationAction from './BottomNavigationAction.react';
 
 const propTypes = {
@@ -32,12 +34,9 @@ const defaultProps = {
   hidden: false,
   style: {},
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context) {
-  const { bottomNavigation } = context.uiTheme;
+function getStyles(props) {
+  const { bottomNavigation } = props.theme;
   const local = {};
 
   return {
@@ -131,8 +130,9 @@ class BottomNavigation extends PureComponent {
 
 BottomNavigation.propTypes = propTypes;
 BottomNavigation.defaultProps = defaultProps;
-BottomNavigation.contextTypes = contextTypes;
 
 BottomNavigation.Action = BottomNavigationAction;
 
-export default BottomNavigation;
+const ThemedBottomNavigation = withTheme(BottomNavigation);
+
+export default ThemedBottomNavigation;
diff --git a/src/BottomNavigation/BottomNavigationAction.react.js b/src/BottomNavigation/BottomNavigationAction.react.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { StyleSheet, View, Text } from 'react-native';
 import { ViewPropTypes } from '../utils';
 /* eslint-enable import/no-unresolved, import/extensions */
+import withTheme from '../styles/withTheme';
 
 import RippleFeedback from '../RippleFeedback';
 import Icon from '../Icon';
@@ -46,12 +47,9 @@ const defaultProps = {
   disabled: false,
   style: {},
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context) {
-  const { bottomNavigationAction } = context.uiTheme;
+function getStyles(props) {
+  const { bottomNavigationAction } = props.theme;
 
   const local = {};
 
@@ -120,6 +118,5 @@ class BottomNavigationAction extends PureComponent {
 
 BottomNavigationAction.propTypes = propTypes;
 BottomNavigationAction.defaultProps = defaultProps;
-BottomNavigationAction.contextTypes = contextTypes;
 
-export default BottomNavigationAction;
+export default withTheme(BottomNavigationAction);
diff --git a/src/Button/Button.react.js b/src/Button/Button.react.js
@@ -9,6 +9,7 @@ import RippleFeedback from '../RippleFeedback';
 /* eslint-disable import/no-unresolved, import/extensions */
 import getPlatformElevation from '../styles/getPlatformElevation';
 /* eslint-enable import/no-unresolved, import/extensions */
+import withTheme from '../styles/withTheme';
 
 const propTypes = {
   testID: PropTypes.string,
@@ -62,21 +63,17 @@ const defaultProps = {
   upperCase: true,
   style: {},
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context, state) {
+function getStyles(props, state) {
+  const { primary, accent, disabled, raised, theme } = props;
   const {
     button,
     buttonFlat,
     buttonRaised,
     buttonDisabled,
     buttonRaisedDisabled,
-  } = context.uiTheme;
-
-  const { primary, accent, disabled, raised } = props;
-  const { palette } = context.uiTheme;
+    palette,
+  } = theme;
 
   const local = {
     container: {},
@@ -139,7 +136,7 @@ class Button extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-            elevation: 2, // eslint-disable-line
+      elevation: 2, // eslint-disable-line
     };
   }
 
@@ -153,13 +150,13 @@ class Button extends PureComponent {
 
   setElevation = () => {
     this.setState({
-            elevation: 4, // eslint-disable-line
+      elevation: 4, // eslint-disable-line
     });
   };
 
   removeElevation = () => {
     this.setState({
-            elevation: 2, // eslint-disable-line
+      elevation: 2, // eslint-disable-line
     });
   };
 
@@ -199,7 +196,7 @@ class Button extends PureComponent {
       testID,
     } = this.props;
 
-    const styles = getStyles(this.props, this.context, this.state);
+    const styles = getStyles(this.props, this.state);
 
     const content = (
       <View style={styles.container} pointerEvents="box-only">
@@ -229,6 +226,5 @@ class Button extends PureComponent {
 
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
-Button.contextTypes = contextTypes;
 
-export default Button;
+export default withTheme(Button);
diff --git a/src/Card/Card.react.js b/src/Card/Card.react.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 /* eslint-enable import/no-unresolved, import/extensions */
 import RippleFeedback from '../RippleFeedback';
 import { ViewPropTypes } from '../utils';
+import withTheme from '../styles/withTheme';
 
 const propTypes = {
   children: PropTypes.node,
@@ -18,12 +19,9 @@ const defaultProps = {
   onPress: null,
   style: {},
 };
-const contextTypes = {
-  uiTheme: PropTypes.object.isRequired, // eslint-disable-line
-};
 
-function getStyles(props, context) {
-  const { card } = context.uiTheme;
+function getStyles(props) {
+  const { card } = props.theme;
 
   const local = {};
 
@@ -43,12 +41,12 @@ class Card extends PureComponent {
     super(props, context);
 
     this.state = {
-      styles: getStyles(props, context),
+      styles: getStyles(props),
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ styles: getStyles(nextProps, this.context) });
+    this.setState({ styles: getStyles(nextProps) });
   }
 
   renderContent = () => {
@@ -79,6 +77,5 @@ class Card extends PureComponent {
 
 Card.propTypes = propTypes;
 Card.defaultProps = defaultProps;
-Card.contextTypes = contextTypes;
 
-export default Card;
+export default withTheme(Card);