Fix #25

Author: istarkov

src/components/themr.js

@@ -48,6 +48,11 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
       composeTheme: optionComposeTheme
     }
 
+    constructor(...args) {
+      super(...args)
+      this.theme_ = this.calcTheme(this.props)
+    }
+
     getWrappedInstance() {
       invariant(optionWithRef,
         'To access the wrapped instance, you need to specify ' +
@@ -57,8 +62,8 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
       return this.refs.wrappedInstance
     }
 
-    getNamespacedTheme() {
-      const { themeNamespace, theme } = this.props
+    getNamespacedTheme(props) {
+      const { themeNamespace, theme } = props
       if (!themeNamespace) return theme
       if (themeNamespace &&  !theme) throw new Error('Invalid themeNamespace use in react-css-themr. ' +
         'themeNamespace prop should be used only with theme prop.')
@@ -68,8 +73,8 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
         .reduce((result, key) => ({ ...result, [removeNamespace(key, themeNamespace)]:  theme[key] }), {})
     }
 
-    getThemeNotComposed() {
-      if (this.props.theme) return this.getNamespacedTheme()
+    getThemeNotComposed(props) {
+      if (props.theme) return this.getNamespacedTheme(props)
       if (config.localTheme) return config.localTheme
       return this.getContextTheme()
     }
@@ -80,30 +85,50 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
         : {}
     }
 
-    getTheme() {
-      return this.props.composeTheme === COMPOSE_SOFTLY
-        ? { ...this.getContextTheme(), ...config.localTheme, ...this.getNamespacedTheme() }
-        : themeable(themeable(this.getContextTheme(), config.localTheme), this.getNamespacedTheme())
+    getTheme(props) {
+      return props.composeTheme === COMPOSE_SOFTLY
+        ? {
+          ...this.getContextTheme(),
+          ...config.localTheme,
+          ...this.getNamespacedTheme(props)
+        }
+        : themeable(
+          themeable(this.getContextTheme(), config.localTheme),
+          this.getNamespacedTheme(props)
+        )
+    }
+
+    calcTheme(props) {
+      const { composeTheme } = props
+      return composeTheme
+        ? this.getTheme(props)
+        : this.getThemeNotComposed(props)
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (
+        nextProps.composeTheme !== this.props.composeTheme ||
+        nextProps.theme !== this.props.theme ||
+        nextProps.themeNamespace !== this.props.themeNamespace
+      ) {
+        this.theme_ = this.calcTheme(nextProps)
+      }
     }
 
     render() {
-      const { composeTheme, ...rest } = this.props
+      const { ...rest } = this.props
       let renderedElement
 
       if (optionWithRef) {
         renderedElement = React.createElement(ThemedComponent, {
           ...rest,
           ref: 'wrappedInstance',
-          theme: composeTheme
-            ? this.getTheme()
-            : this.getThemeNotComposed()
+          theme: this.theme_
         })
       } else {
         renderedElement = React.createElement(ThemedComponent, {
           ...rest,
-          theme: composeTheme
-            ? this.getTheme()
-            : this.getThemeNotComposed()
+          theme: this.theme_
         })
       }
 

test/components/themr.spec.js

@@ -438,6 +438,61 @@ describe('Themr decorator function', () => {
     )
 
     expect(spy.calledOnce).toBe(true)
-
   })
+
+  it(
+    'should update theme prop on rerender if theme or themeNamespace or composeTheme changed',
+    () => {
+      const spy = sinon.stub().returns(<div />)
+      const div = document.createElement('div')
+
+      @themr('Container')
+      class Container extends Component {
+        shouldComponentUpdate(nextProps) {
+          return !shallowEqual(nextProps, this.props)
+        }
+
+        render() {
+          return spy()
+        }
+      }
+      const themeA = {}
+      const themeB = {}
+      const themeNamespace = 'nsA'
+
+      render(
+        <Container theme={themeA} />,
+        div
+      )
+
+      render(
+        <Container theme={themeB} />,
+        div
+      )
+
+      expect(spy.calledTwice).toBe(true)
+
+      render(
+        <Container theme={themeB} themeNamespace={themeNamespace} />,
+        div
+      )
+
+      expect(spy.calledThrice).toBe(true)
+
+
+      render(
+        <Container theme={themeB} themeNamespace={themeNamespace} composeTheme={'deeply'} />,
+        div
+      )
+
+      expect(spy.calledThrice).toBe(true)
+
+      render(
+        <Container theme={themeB} themeNamespace={themeNamespace} composeTheme={'softly'} />,
+        div
+      )
+
+      expect(spy.callCount === 4).toBe(true)
+    }
+  )
 })