Add mapper functions. (#3)

feat: add support to pass a function as mapper value

Author: lucasconstantino

src/index.test.tsx

@@ -54,6 +54,52 @@ test('rendering children component', () => {
   expect(result.html()).toBe('<div>foobar</div>')
 })
 
+test('should allow a function as mapper', () => {
+  const Foo = ({ children }) => children('foo')
+  const foo = jest.fn(({ renderProp }) => <Foo children={renderProp} />)
+  const children = jest.fn(() => null)
+  const Composed = adopt({ foo })
+
+  mount(<Composed>{children}</Composed>)
+
+  expect(foo).toHaveBeenCalled()
+  expect(children).toHaveBeenCalledWith({ foo: 'foo' })
+})
+
+test('should provide a function mapper with all previous render prop results', () => {
+  const Foo = ({ children }) => children('foo')
+  const Bar = ({ children }) => children('bar')
+  const bar = jest.fn(({ renderProp }) => <Bar children={renderProp} />)
+  const children = jest.fn(() => null)
+
+  interface RenderProps {
+    foo: 'foo'
+    bar: 'bar'
+  }
+
+  const Composed = adopt<RenderProps>({
+    foo: <Foo />,
+    bar,
+  })
+
+  mount(<Composed>{children}</Composed>)
+
+  expect(bar.mock.calls[0][0]).toHaveProperty('foo', 'foo')
+  expect(children).toHaveBeenCalledWith({ foo: 'foo', bar: 'bar' })
+})
+
+test('should provide mapper functions with Composed component props', () => {
+  const Foo = ({ children }) => children('foo')
+  const foo = jest.fn(({ renderProp }) => <Foo children={renderProp} />)
+  const children = jest.fn(() => null)
+  const Composed = adopt({ foo })
+
+  mount(<Composed bar="bar">{children}</Composed>)
+
+  expect(foo.mock.calls[0][0]).toHaveProperty('bar', 'bar')
+  expect(children).toHaveBeenCalledWith({ foo: 'foo' })
+})
+
 test('throw with a wrong value on mapper', () => {
   expect(() => {
     const Composed = adopt({ foo: 'helo' })

src/index.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react'
 import { ComponentType, ReactNode, ReactElement } from 'react'
 
-const isAllElementValid = (values: ReactNode[]): boolean =>
-  !values.some(value => !React.isValidElement(value))
-
 export type ChildrenFn<P> = (props: P) => ReactNode
 
 export type RPC<Props> = ComponentType<{
@@ -12,31 +9,33 @@ export type RPC<Props> = ComponentType<{
 
 export type Mapper<R> = Record<keyof R, ReactElement<any> | any>
 
+const isValidRenderProp = (prop: ReactNode | ChildrenFn): boolean =>
+  React.isValidElement(prop) || typeof prop === 'function'
+
+const Children = ({ children }: any) => children()
+
 export function adopt<RP extends Record<string, any>>(
   mapper: Mapper<RP>
 ): RPC<RP> {
-  if (!isAllElementValid(Object.values(mapper))) {
+  if (!Object.values(mapper).some(isValidRenderProp)) {
     throw new Error(
       'The render props object mapper just accept valid elements as value'
     )
   }
 
-  const Initial = ({ children }: any) =>
-    children && typeof children === 'function' && children()
-
   return Object.keys(mapper).reduce(
-    (Component: RPC<RP>, key: keyof RP): RPC<RP> => ({ children }) => (
+    (Component: RPC<RP>, key: keyof RP): RPC<RP> => ({ children, ...rest }) => (
       <Component>
-        {props =>
-          React.cloneElement(mapper[key], {
-            children: (childProps: any) =>
-              children &&
-              typeof children === 'function' &&
-              children(Object.assign({}, props, { [key]: childProps })),
-          })
-        }
+        {props => {
+          const renderProp = (childProps: any) =>
+            children(Object.assign({}, props, { [key]: childProps }))
+
+          return typeof mapper[key] === 'function'
+            ? mapper[key](Object.assign({}, rest, props, { renderProp }))
+            : React.cloneElement(mapper[key], { children: renderProp })
+        }}
       </Component>
     ),
-    Initial
+    Children
   )
 }