Add namespace support

Author: denisborovikov

src/components/themr.js

@@ -22,7 +22,8 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
 
     static propTypes = {
       composeTheme: PropTypes.oneOf([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ]),
-      theme: PropTypes.object
+      theme: PropTypes.object,
+      namespace: PropTypes.string
     }
 
     static defaultProps = {
@@ -38,8 +39,19 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
       return this.refs.wrappedInstance
     }
 
+    getNamespacedTheme() {
+      const { namespace, theme } = this.props
+      if (!namespace) return theme
+      if (namespace &&  !theme) throw new Error('Invalid namespace use in react-css-themr. ' +
+        'Namespace prop should be used only with theme prop.')
+
+      return Object.keys(theme)
+        .filter(key => key.startsWith(namespace))
+        .reduce((p, c) => ({ ...p, [removeNamespace(c, namespace)]:  theme[c] }), {})
+    }
+
     getThemeNotComposed() {
-      if (this.props.theme) return this.props.theme
+      if (this.props.theme) return this.getNamespacedTheme()
       if (localTheme) return localTheme
       return this.getContextTheme()
     }
@@ -52,8 +64,8 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
 
     getTheme() {
       return this.props.composeTheme === COMPOSE_SOFTLY
-        ? Object.assign({}, this.getContextTheme(), localTheme, this.props.theme)
-        : themeable(themeable(this.getContextTheme(), localTheme), this.props.theme)
+        ? Object.assign({}, this.getContextTheme(), localTheme, this.getNamespacedTheme())
+        : themeable(themeable(this.getContextTheme(), localTheme), this.getNamespacedTheme())
     }
 
     render() {
@@ -101,3 +113,8 @@ function validateComposeOption(composeTheme) {
     )
   }
 }
+
+function removeNamespace(key, namespace) {
+  const capitilized = key.substr(namespace.length)
+  return capitilized.slice(0, 1).toLowerCase() + capitilized.slice(1)
+}

test/components/themr.spec.js

@@ -324,4 +324,45 @@ describe('Themr decorator function', () => {
     expect(decorated.getWrappedInstance().someInstanceMethod()).toBe(someData)
     expect(decorated.refs.wrappedInstance.someInstanceMethod()).toBe(someData)
   })
+
+  it('should throw if namespace passed without theme', () => {
+    const theme = { Container: { foo: 'foo_1234' } }
+
+    @themr('Container')
+    class Container extends Component {
+      render() {
+        return <Passthrough {...this.props} />
+      }
+    }
+
+    expect(() => TestUtils.renderIntoDocument(
+      <ProviderMock theme={theme}>
+        <Container namespace="container"/>
+      </ProviderMock>
+    )).toThrow(/Invalid namespace use in react-css-themr. Namespace prop should be used only with theme prop./)
+  })
+
+  it('when providing a namespace prop composes a theme', () => {
+    const containerTheme = { foo: 'foo_123' }
+    const containerThemeLocal = { foo: 'foo_567' }
+    const containerThemeProps = { foo: 'foo_89', containerFoo: 'foo_000' }
+    const theme = { Container: containerTheme }
+
+    @themr('Container', containerThemeLocal)
+    class Container extends Component {
+      render() {
+        return <Passthrough {...this.props} />
+      }
+    }
+
+    const tree = TestUtils.renderIntoDocument(
+      <ProviderMock theme={theme}>
+        <Container theme={containerThemeProps} namespace="container" />
+      </ProviderMock>
+    )
+
+    const stub = TestUtils.findRenderedComponentWithType(tree, Passthrough)
+    const expectedTheme = { foo: 'foo_123 foo_567 foo_000' }
+    expect(stub.props.theme).toEqual(expectedTheme)
+  })
 })