diff --git a/README.md b/README.md index 034d9fd..afb5a09 100644 --- a/README.md +++ b/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 --git a/index.d.ts b/index.d.ts index 5bce3d0..8145ac5 100644 --- a/index.d.ts +++ b/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 extends React.Component { - getWrappedInstance(): React.Component; + } interface ThemedComponentClass extends React.ComponentClass

diff --git a/src/components/themr.js b/src/components/themr.js index 97a2328..6f36fe9 100644 --- a/src/components/themr.js +++ b/src/components/themr.js @@ -8,7 +8,6 @@ import invariant from 'invariant' /** * @typedef {{}} TReactCSSThemrOptions * @property {String|Boolean} [composeTheme=COMPOSE_DEEPLY] - * @property {Boolean} [withRef=false] */ const COMPOSE_DEEPLY = 'deeply' @@ -16,8 +15,7 @@ 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 --git a/test/components/themr.spec.js b/test/components/themr.spec.js index 51b564b..c3677bb 100644 --- a/test/components/themr.spec.js +++ b/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

+ return
{ 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 } } - const tree = TestUtils.renderIntoDocument( - - - - ) - - 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 - } - } - - const decorator = themr('Component', null, { withRef: true }) - const Decorated = decorator(Container) - - const tree = TestUtils.renderIntoDocument( - - ) - - 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() + 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()