Deprecate withRef for innerRef (javivelasco#46)

Author: javivelasco

Diff for: README.md

@@ -158,13 +158,12 @@ Makes available a `theme` context to use in styled components. The shape of the
 
 Returns a `function` to wrap a component and make it themeable.
 
-The returned component accepts a `theme` and `composeTheme`  apart from the props of the original component. They are used to provide a `theme` to the component and to configure the style composition, which can be configured via options too. The function arguments are:
+The returned component accepts a `theme`, `composeTheme` and `innerRef` props apart from the props of the original component. They former two are used to provide a `theme` to the component and to configure the style composition, which can be configured via options too, while the latter is used to pass a ref callback to the decorated component. The function arguments are:
 
 - `Identifier` *(String)* used to provide a unique identifier to the component that will be used to get a theme from context.
 - `[defaultTheme]` (*Object*) is  classname object resolved from CSS modules. It will be used as the default theme to calculate a new theme that will be passed to the component.
 - `[options]` (*Object*) If specified it allows to customize the behavior: 
   - [`composeTheme = 'deeply'`] *(String)* allows to customize the way themes are merged or to disable merging completely. The accepted values are `deeply` to deeply merge themes, `softly` to softly merge themes and `false` to disable theme merging.
-  - [`withRef = false`] *(Boolean)* if true, stores a ref to the wrapped component instance and makes it available via `getWrappedInstance()` method. Defaults to false.
 
 ## About
 

Diff for: index.d.ts

@@ -6,12 +6,11 @@ declare module "react-css-themr"
 	{
 		/** @default "deeply" */
 		composeTheme?: "deeply" | "softly" | false,
-		/** @default false */
-		withRef?: boolean
 	}
 
 	export interface ThemeProviderProps
 	{
+    innerRef?: Function,
 		theme: {}
 	}
 
@@ -22,7 +21,7 @@ declare module "react-css-themr"
 
 	interface ThemedComponent<P, S> extends React.Component<P, S>
 	{
-		getWrappedInstance(): React.Component<P, S>;
+
 	}
 
 	interface ThemedComponentClass<P, S> extends React.ComponentClass<P>

Diff for: src/components/themr.js

@@ -8,16 +8,14 @@ import invariant from 'invariant'
 /**
  * @typedef {{}} TReactCSSThemrOptions
  * @property {String|Boolean} [composeTheme=COMPOSE_DEEPLY]
- * @property {Boolean} [withRef=false]
  */
 
 const COMPOSE_DEEPLY = 'deeply'
 const COMPOSE_SOFTLY = 'softly'
 const DONT_COMPOSE = false
 
 const DEFAULT_OPTIONS = {
-  composeTheme: COMPOSE_DEEPLY,
-  withRef: false
+  composeTheme: COMPOSE_DEEPLY
 }
 
 const THEMR_CONFIG = typeof Symbol !== 'undefined' ?
@@ -32,7 +30,7 @@ const THEMR_CONFIG = typeof Symbol !== 'undefined' ?
  * @returns {function(ThemedComponent:Function):Function} - ThemedComponent
  */
 export default (componentName, localTheme, options = {}) => (ThemedComponent) => {
-  const { composeTheme: optionComposeTheme, withRef: optionWithRef } = { ...DEFAULT_OPTIONS, ...options }
+  const { composeTheme: optionComposeTheme } = { ...DEFAULT_OPTIONS, ...options }
   validateComposeOption(optionComposeTheme)
 
   let config = ThemedComponent[THEMR_CONFIG]
@@ -59,6 +57,7 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
     static propTypes = {
       ...ThemedComponent.propTypes,
       composeTheme: PropTypes.oneOf([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ]),
+      innerRef: PropTypes.func,
       theme: PropTypes.object,
       themeNamespace: PropTypes.string
     }
@@ -74,9 +73,9 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
     }
 
     getWrappedInstance() {
-      invariant(optionWithRef,
-        'To access the wrapped instance, you need to specify ' +
-        '{ withRef: true } as the third argument of the themr() call.'
+      invariant(true,
+        'DEPRECATED: To access the wrapped instance, you have to pass ' +
+        '{ innerRef: fn } and retrieve with a callback ref style.'
       )
 
       return this.refs.wrappedInstance
@@ -136,25 +135,15 @@ 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, {
-          ...props,
-          ref: 'wrappedInstance',
-          theme: this.theme_
-        })
-      } else {
-        renderedElement = React.createElement(ThemedComponent, {
-          ...props,
-          theme: this.theme_
-        })
-      }
+      const { composeTheme, innerRef, themeNamespace, ...props } = this.props //eslint-disable-line no-unused-vars
 
-      return renderedElement
+      return React.createElement(ThemedComponent, {
+        ...props,
+        ref: innerRef,
+        theme: this.theme_
+      })
     }
   }
 

Diff for: test/components/themr.spec.js

@@ -10,7 +10,7 @@ describe('Themr decorator function', () => {
   class Passthrough extends Component {
     render() {
       const { theme, ...props } = this.props //eslint-disable-line no-unused-vars
-      return <div {...props} />
+      return <div ref={(node) => { this.rootNode = node }} {...props} />
     }
   }
 
@@ -278,55 +278,18 @@ describe('Themr decorator function', () => {
     expect(stub.props.theme).toEqual({})
   })
 
-  it('should throw when trying to access the wrapped instance if withRef is not specified', () => {
-    const theme = { Container: { foo: 'foo_1234' } }
-
-    @themr('Container')
+  it('gets the reference to a decorated component using innerRef prop', () => {
     class Container extends Component {
       render() {
         return <Passthrough {...this.props} />
       }
     }
 
-    const tree = TestUtils.renderIntoDocument(
-      <ProviderMock theme={theme}>
-        <Container />
-      </ProviderMock>
-    )
-
-    const container = TestUtils.findRenderedComponentWithType(tree, Container)
-    expect(() => container.getWrappedInstance()).toThrow(
-      /To access the wrapped instance, you need to specify \{ withRef: true \} as the third argument of the themr\(\) call\./
-    )
-  })
-
-  it('should return the instance of the wrapped component for use in calling child methods', () => {
-    const someData = {
-      some: 'data'
-    }
-
-    class Container extends Component {
-      someInstanceMethod() {
-        return someData
-      }
-
-      render() {
-        return <Passthrough />
-      }
-    }
-
-    const decorator = themr('Component', null, { withRef: true })
-    const Decorated = decorator(Container)
-
-    const tree = TestUtils.renderIntoDocument(
-      <Decorated />
-    )
-
-    const decorated = TestUtils.findRenderedComponentWithType(tree, Decorated)
-
-    expect(() => decorated.someInstanceMethod()).toThrow()
-    expect(decorated.getWrappedInstance().someInstanceMethod()).toBe(someData)
-    expect(decorated.refs.wrappedInstance.someInstanceMethod()).toBe(someData)
+    const spy = sinon.stub()
+    const ThemedContainer = themr('Container')(Container)
+    const tree = TestUtils.renderIntoDocument(<ThemedContainer innerRef={spy} />)
+    const stub = TestUtils.findRenderedComponentWithType(tree, Container)
+    expect(spy.withArgs(stub).calledOnce).toBe(true)
   })
 
   it('should throw if themeNamespace passed without theme', () => {
@@ -510,7 +473,6 @@ describe('Themr decorator function', () => {
     )
 
     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()