Merge pull request #27 from raveclassic/filter_themr_props

Filter themr props

Author: javivelasco

src/components/themr.js

@@ -27,8 +27,8 @@ const THEMR_CONFIG = typeof Symbol !== 'undefined' ?
 /**
  * Themr decorator
  * @param {String|Number|Symbol} componentName - Component name
- * @param {TReactCSSThemrTheme} localTheme - Base theme
- * @param {{}} options - Themr options
+ * @param {TReactCSSThemrTheme} [localTheme] - Base theme
+ * @param {{}} [options] - Themr options
  * @returns {function(ThemedComponent:Function):Function} - ThemedComponent
  */
 export default (componentName, localTheme, options = {}) => (ThemedComponent) => {
@@ -46,6 +46,9 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
     localTheme
   }
 
+  /**
+   * @property {{wrappedInstance: *}} refs
+   */
   class Themed extends Component {
     static displayName = `Themed${ThemedComponent.name}`;
 
@@ -134,16 +137,19 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
 
     render() {
       let renderedElement
+      //exclude themr-only props
+      //noinspection JSUnusedLocalSymbols
+      const { composeTheme, themeNamespace, ...props } = this.props //eslint-disable-line no-unused-vars
 
       if (optionWithRef) {
         renderedElement = React.createElement(ThemedComponent, {
-          ...this.props,
+          ...props,
           ref: 'wrappedInstance',
           theme: this.theme_
         })
       } else {
         renderedElement = React.createElement(ThemedComponent, {
-          ...this.props,
+          ...props,
           theme: this.theme_
         })
       }
@@ -159,8 +165,8 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
 
 /**
  * Merges two themes by concatenating values with the same keys
- * @param {TReactCSSThemrTheme} original - Original theme object
- * @param {TReactCSSThemrTheme} mixin - Mixing theme object
+ * @param {TReactCSSThemrTheme} [original] - Original theme object
+ * @param {TReactCSSThemrTheme} [mixin] - Mixing theme object
  * @returns {TReactCSSThemrTheme} - Merged resulting theme
  */
 export function themeable(original = {}, mixin) {

test/components/themr.spec.js

@@ -9,7 +9,8 @@ import { themr, themeable } from '../../src/index'
 describe('Themr decorator function', () => {
   class Passthrough extends Component {
     render() {
-      return <div {...this.props} />
+      const { theme, ...props } = this.props //eslint-disable-line no-unused-vars
+      return <div {...props} />
     }
   }
 
@@ -495,6 +496,25 @@ describe('Themr decorator function', () => {
       expect(spy.callCount === 4).toBe(true)
     }
   )
+
+  it('should not pass internal themr props to WrappedComponent', () => {
+    @themr('Container')
+    class Container extends Component {
+      render() {
+        return <Passthrough {...this.props} />
+      }
+    }
+
+    const tree = TestUtils.renderIntoDocument(
+      <Container/>
+    )
+
+    const stub = TestUtils.findRenderedComponentWithType(tree, Passthrough)
+    // expect(stub.props.theme).toEqual(containerTheme)
+    expect(stub.props.themeNamespace).toNotExist()
+    expect(stub.props.composeTheme).toNotExist()
+    expect(stub.props.theme).toExist()
+  })
 })
 
 describe('themeable function', () => {