feat: Added replaceTheme function (#1920)

Added replaceTheme function to merge the theme passed in with the default theme.
react-native-elements · Aug 1, 2019 · e2f2e6e · e2f2e6e
1 parent f3c78e0
commit e2f2e6e
Show file tree

Hide file tree

Showing 22 changed files with 65 additions and 12 deletions.
diff --git a/docs/customization.md b/docs/customization.md
@@ -229,23 +229,23 @@ const theme = {
 ### Using the theme in your own components
 
 You may want to make use of the theming utilities in your own components. For
-this you can use the `withTheme` HOC exported from this library. It adds two
-props to the component it wraps - `theme` and `updateTheme`.
+this you can use the `withTheme` HOC exported from this library. It adds three
+props to the component it wraps - `theme`, `updateTheme` and `replaceTheme`.
 
 ```jsx
 import React from 'react';
 import { Text } from 'react-native';
 import { withTheme } from 'react-native-elements';
 
 function MyComponent(props) {
-  const { theme, updateTheme } = props;
+  const { theme, updateTheme, replaceTheme } = props;
   return <Text style={{ color: theme.colors.primary }}>Yo!</Text>;
 }
 
 export default withTheme(MyComponent);
 ```
 
-The `updateTheme` merges the theme passed in with the current theme.
+The `updateTheme` function merges the theme passed in with the current theme.
 
 ```jsx
 const theme = {
@@ -258,6 +258,8 @@ const theme = {
 updateTheme({ colors: { primary: 'red' } });
 ```
 
+The `replaceTheme` function merges the theme passed in with the default theme.
+
 Don't want to wrap your components? You can use the `ThemeConsumer` component
 which uses render props!
 

diff --git a/src/avatar/__tests__/__snapshots__/Avatar.js.snap b/src/avatar/__tests__/__snapshots__/Avatar.js.snap
@@ -608,6 +608,7 @@ exports[`Avatar Component renders touchable if onPress given 1`] = `
 
 exports[`Avatar Component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   style={
     Object {
       "backgroundColor": "transparent",
@@ -670,6 +671,7 @@ exports[`Avatar Component should apply values from theme 1`] = `
   >
     <Image
       onLoadEnd={[Function]}
+      replaceTheme={[Function]}
       source={
         Object {
           "uri": "https://i.imgur.com/0y8Ftya.jpg",

diff --git a/src/buttons/__tests__/__snapshots__/ButtonGroup.js.snap b/src/buttons/__tests__/__snapshots__/ButtonGroup.js.snap
@@ -498,6 +498,7 @@ exports[`ButtonGroup Component Disabled should disable only some items 1`] = `
 
 exports[`ButtonGroup Component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   style={
     Object {
       "backgroundColor": "#fff",
@@ -554,6 +555,7 @@ exports[`ButtonGroup Component should apply values from theme 1`] = `
         }
       >
         <Text
+          replaceTheme={[Function]}
           style={
             Object {
               "color": "red",
@@ -649,6 +651,7 @@ exports[`ButtonGroup Component should apply values from theme 1`] = `
         }
       >
         <Text
+          replaceTheme={[Function]}
           style={
             Object {
               "color": "#5e6977",
@@ -742,6 +745,7 @@ exports[`ButtonGroup Component should apply values from theme 1`] = `
         }
       >
         <Text
+          replaceTheme={[Function]}
           style={
             Object {
               "color": "#5e6977",

diff --git a/src/card/__tests__/__snapshots__/Card.js.snap b/src/card/__tests__/__snapshots__/Card.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Card Component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   style={
     Object {
       "backgroundColor": "white",
@@ -30,6 +31,7 @@ exports[`Card Component should apply values from theme 1`] = `
   >
     <View>
       <Text
+        replaceTheme={[Function]}
         style={
           Object {
             "color": "#43484d",
@@ -85,6 +87,7 @@ exports[`Card Component should apply values from theme 1`] = `
         Yea b
       </Text>
       <View
+        replaceTheme={[Function]}
         style={
           Object {
             "backgroundColor": "#bcbbc1",

diff --git a/src/config/ThemeProvider.js b/src/config/ThemeProvider.js
@@ -10,13 +10,14 @@ export default class ThemeProvider extends React.Component {
   constructor(props) {
     super(props);
 
+    this.defaultTheme = deepmerge(
+      {
+        colors,
+      },
+      props.theme
+    );
     this.state = {
-      theme: deepmerge(
-        {
-          colors,
-        },
-        props.theme
-      ),
+      theme: this.defaultTheme,
     };
   }
 
@@ -26,6 +27,12 @@ export default class ThemeProvider extends React.Component {
     }));
   };
 
+  replaceTheme = theme => {
+    this.setState(() => ({
+      theme: deepmerge(this.defaultTheme, theme),
+    }));
+  };
+
   getTheme = () => this.state.theme;
 
   render() {
@@ -34,6 +41,7 @@ export default class ThemeProvider extends React.Component {
         value={{
           theme: this.state.theme,
           updateTheme: this.updateTheme,
+          replaceTheme: this.replaceTheme,
         }}
       >
         {this.props.children}

diff --git a/src/config/__tests__/ThemeProvider.js b/src/config/__tests__/ThemeProvider.js
@@ -17,7 +17,7 @@ describe('ThemeProvider', () => {
     expect(toJson(component)).toMatchSnapshot();
   });
 
-  it('should update theme', () => {
+  it('should update and replace theme', () => {
     const component = shallow(
       <ThemeProvider>
         <View />
@@ -44,6 +44,12 @@ describe('ThemeProvider', () => {
         },
       },
     });
+
+    instance.replaceTheme({});
+
+    expect(instance.state).toEqual({
+      theme,
+    });
   });
 
   it('should get the theme', () => {

diff --git a/src/config/__tests__/__snapshots__/ThemeProvider.js.snap b/src/config/__tests__/__snapshots__/ThemeProvider.js.snap
@@ -4,6 +4,7 @@ exports[`ThemeProvider should work 1`] = `
 <ContextProvider
   value={
     Object {
+      "replaceTheme": [Function],
       "theme": Object {
         "colors": Object {
           "disabled": "hsl(208, 8%, 90%)",

diff --git a/src/config/withTheme.js b/src/config/withTheme.js
@@ -27,10 +27,11 @@ const withTheme = (WrappedComponent, themeKey) => {
               );
             }
 
-            const { theme, updateTheme } = context;
+            const { theme, updateTheme, replaceTheme } = context;
             const props = {
               theme,
               updateTheme,
+              replaceTheme,
               ...deepmerge((themeKey && theme[themeKey]) || {}, rest),
               children,
             };

diff --git a/src/divider/__tests__/__snapshots__/Divider.js.snap b/src/divider/__tests__/__snapshots__/Divider.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Divider Component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   style={
     Object {
       "backgroundColor": "red",

diff --git a/src/header/__tests__/__snapshots__/Header.js.snap b/src/header/__tests__/__snapshots__/Header.js.snap
@@ -18,6 +18,7 @@ exports[`Header Component should apply values from theme 1`] = `
   }
 >
   <Image
+    replaceTheme={[Function]}
     style={
       Array [
         Object {

diff --git a/src/icons/__tests__/__snapshots__/Icon.js.snap b/src/icons/__tests__/__snapshots__/Icon.js.snap
@@ -172,6 +172,7 @@ exports[`Icon component should apply reverse styles 1`] = `
 exports[`Icon component should apply values from theme 1`] = `
 <View>
   <View
+    replaceTheme={[Function]}
     style={
       Object {
         "alignItems": "center",

diff --git a/src/image/__tests__/__snapshots__/Image.js.snap b/src/image/__tests__/__snapshots__/Image.js.snap
@@ -32,6 +32,7 @@ exports[`Image Component should apply values from theme 1`] = `
     />
   </View>
   <Image
+    replaceTheme={[Function]}
     source={
       Object {
         "uri": "https://i.imgur.com/0y8Ftya.jpg",

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -2019,9 +2019,12 @@ export type Theme<T = {}> = Partial<FullTheme> & T;
 
 export type UpdateTheme = (updates: RecursivePartial<FullTheme>) => void;
 
+export type ReplaceTheme = (updates: RecursivePartial<FullTheme>) => void;
+
 export interface ThemeProps<T> {
   theme: Theme<T>;
   updateTheme: UpdateTheme;
+  replaceTheme: ReplaceTheme;
 }
 
 /**
@@ -2034,6 +2037,7 @@ export interface ThemeProviderProps<T> {
 
 export class ThemeProvider<T> extends React.Component<ThemeProviderProps<T>> {
   updateTheme: UpdateTheme;
+  replaceTheme: ReplaceTheme;
 
   getTheme(): Theme<T>;
 }

diff --git a/src/input/__tests__/__snapshots__/Input.js.snap b/src/input/__tests__/__snapshots__/Input.js.snap
@@ -732,6 +732,7 @@ exports[`Input component should apply values from theme 1`] = `
     <TextInput
       allowFontScaling={true}
       placeholder="Enter text"
+      replaceTheme={[Function]}
       style={
         Object {
           "alignSelf": "center",

diff --git a/src/list/__tests__/__snapshots__/ListItem.js.snap b/src/list/__tests__/__snapshots__/ListItem.js.snap
@@ -2,6 +2,7 @@
 
 exports[`ListItem component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   updateTheme={[Function]}
 >
   <View
@@ -24,6 +25,7 @@ exports[`ListItem component should apply values from theme 1`] = `
       }
     >
       <Text
+        replaceTheme={[Function]}
         style={
           Object {
             "backgroundColor": "transparent",

diff --git a/src/overlay/__tests__/__snapshots__/Overlay.js.snap b/src/overlay/__tests__/__snapshots__/Overlay.js.snap
@@ -4,6 +4,7 @@ exports[`Overlay should apply values from theme 1`] = `
 <Modal
   hardwareAccelerated={false}
   onRequestClose={[Function]}
+  replaceTheme={[Function]}
   theme={
     Object {
       "Overlay": Object {

diff --git a/src/pricing/__tests__/__snapshots__/PricingCard.js.snap b/src/pricing/__tests__/__snapshots__/PricingCard.js.snap
@@ -2,6 +2,7 @@
 
 exports[`PricingCard component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   style={
     Object {
       "backgroundColor": "white",
@@ -29,6 +30,7 @@ exports[`PricingCard component should apply values from theme 1`] = `
     }
   >
     <Text
+      replaceTheme={[Function]}
       style={
         Object {
           "color": "#2089dc",
@@ -83,6 +85,7 @@ exports[`PricingCard component should apply values from theme 1`] = `
       ALL YOU CAN EAT
     </Text>
     <Text
+      replaceTheme={[Function]}
       style={
         Object {
           "fontSize": 50,
@@ -137,6 +140,7 @@ exports[`PricingCard component should apply values from theme 1`] = `
       $0
     </Text>
     <Text
+      replaceTheme={[Function]}
       style={
         Object {
           "color": "#86939e",
@@ -191,6 +195,7 @@ exports[`PricingCard component should apply values from theme 1`] = `
       1 User
     </Text>
     <Text
+      replaceTheme={[Function]}
       style={
         Object {
           "color": "#86939e",
@@ -245,6 +250,7 @@ exports[`PricingCard component should apply values from theme 1`] = `
       Basic Support
     </Text>
     <Text
+      replaceTheme={[Function]}
       style={
         Object {
           "color": "#86939e",
@@ -338,6 +344,7 @@ exports[`PricingCard component should apply values from theme 1`] = `
         >
           <View>
             <View
+              replaceTheme={[Function]}
               style={
                 Object {
                   "alignItems": "center",

diff --git a/src/searchbar/__tests__/__snapshots__/SearchBar.js.snap b/src/searchbar/__tests__/__snapshots__/SearchBar.js.snap
@@ -46,6 +46,7 @@ exports[`SearchBar wrapper component should apply values from theme 1`] = `
       >
         <View>
           <View
+            replaceTheme={[Function]}
             style={
               Object {
                 "alignItems": "center",
@@ -131,6 +132,7 @@ exports[`SearchBar wrapper component should apply values from theme 1`] = `
         onFocus={[Function]}
         placeholder="Enter search term"
         platform="android"
+        replaceTheme={[Function]}
         style={
           Object {
             "alignSelf": "center",

diff --git a/src/social/__tests__/__snapshots__/SocialIcon.js.snap b/src/social/__tests__/__snapshots__/SocialIcon.js.snap
@@ -2,6 +2,7 @@
 
 exports[`SocialIcon component should apply values from theme 1`] = `
 <View
+  replaceTheme={[Function]}
   style={
     Object {
       "alignItems": "center",

diff --git a/src/text/__tests__/__snapshots__/Text.js.snap b/src/text/__tests__/__snapshots__/Text.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Text Component local props should override style props on theme 1`] = `
 <Text
+  replaceTheme={[Function]}
   style={
     Object {
       "fontSize": 42.5,
@@ -63,6 +64,7 @@ exports[`Text Component should render without issues 1`] = `
 
 exports[`Text Component should use values from the theme 1`] = `
 <Text
+  replaceTheme={[Function]}
   style={
     Object {
       "fontSize": 27.5,

diff --git a/src/tile/__tests__/__snapshots__/FeaturedTile.js.snap b/src/tile/__tests__/__snapshots__/FeaturedTile.js.snap
@@ -157,6 +157,7 @@ exports[`FeaturedTitle component should apply values from theme 1`] = `
         }
       />
       <Text
+        replaceTheme={[Function]}
         style={
           Object {
             "backgroundColor": "rgba(0,0,0,0)",

diff --git a/src/tile/__tests__/__snapshots__/Tile.js.snap b/src/tile/__tests__/__snapshots__/Tile.js.snap
@@ -135,6 +135,7 @@ exports[`Tile component should apply styles from theme 1`] = `
     }
   >
     <Text
+      replaceTheme={[Function]}
       style={
         Object {
           "backgroundColor": "rgba(0,0,0,0)",