Merge pull request #686 from rofrischmann/theme-provider-merge-overwrite

Adding lost ability to auto-merge & overwrite themes

Author: robinweser

packages/fela-bindings/src/ThemeProviderFactory.js

@@ -5,26 +5,20 @@ export default function ThemeProviderFactory(
   BaseComponent: any,
   ThemeContext: any,
   createElement: Function,
-  renderChildren: Function,
-  statics?: Object
+  renderChildren: Function
 ): any {
-  class ThemeProvider extends BaseComponent {
-    render(): Object {
-      return createElement(
+  return function ThemeProvider({ theme = {}, overwrite = false, children }) {
+    return createElement(ThemeContext.Consumer, null, previousTheme =>
+      createElement(
         ThemeContext.Provider,
         {
-          value: this.props.theme,
+          value:
+            !overwrite && previousTheme
+              ? { ...previousTheme, ...theme }
+              : theme,
         },
-        renderChildren(this.props.children)
+        renderChildren(children)
       )
-    }
+    )
   }
-
-  if (statics) {
-    objectEach(statics, (value, key) => {
-      ThemeProvider[key] = value
-    })
-  }
-
-  return ThemeProvider
 }

packages/fela-integration/src/jest-react-fela_react-fela/__tests__/ThemeProviderFactory-test.js

@@ -15,4 +15,28 @@ describe('Using the ThemeProvider', () => {
 
     expect(snapshot).toMatchSnapshot()
   })
+
+  it('should merge theme objects', () => {
+    const snapshot = createSnapshot(
+      <ThemeProvider theme={{ color: 'red' }}>
+        <ThemeProvider theme={{ backgroundColor: 'blue' }}>
+          <FelaTheme>{theme => <div>{JSON.stringify(theme)}</div>}</FelaTheme>
+        </ThemeProvider>
+      </ThemeProvider>
+    )
+
+    expect(snapshot).toMatchSnapshot()
+  })
+
+  it('should overwrite theme objects', () => {
+    const snapshot = createSnapshot(
+      <ThemeProvider theme={{ color: 'red' }}>
+        <ThemeProvider overwrite theme={{ backgroundColor: 'blue' }}>
+          <FelaTheme>{theme => <div>{JSON.stringify(theme)}</div>}</FelaTheme>
+        </ThemeProvider>
+      </ThemeProvider>
+    )
+
+    expect(snapshot).toMatchSnapshot()
+  })
 })

packages/fela-integration/src/jest-react-fela_react-fela/__tests__/__snapshots__/ThemeProviderFactory-test.js.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Using the ThemeProvider should merge theme objects 1`] = `
+"
+
+<div>
+  {{}color:red,backgroundColor:blue{}}
+</div>;
+"
+`;
+
+exports[`Using the ThemeProvider should overwrite theme objects 1`] = `
+"
+
+<div>
+  {{}backgroundColor:blue{}}
+</div>;
+"
+`;
+
 exports[`Using the ThemeProvider should pass the theme to rule props 1`] = `
 "