feat: add support to pass a component type as mapper value

Author: pedronauck

package.json

@@ -34,7 +34,9 @@
     "compose"
   ],
   "dependencies": {
-    "react": "^16.3.2"
+    "hoist-non-react-statics": "^2.5.0",
+    "react": "^16.3.2",
+    "react-display-name": "^0.2.4"
   },
   "peerDependencies": {
     "react": ">= 0.14.0"

src/index.test.tsx

@@ -201,3 +201,33 @@ test('mapping props as prop of <Adopt />', () => {
 
   expect(children).toHaveBeenCalledWith({ foobar: 'foobar' })
 })
+
+test('hoisting non-static react methods from mapper values', () => {
+  interface GreeterProps {
+    name: string
+    render?: (name: string) => JSX.Element
+  }
+
+  class Greeter extends React.Component<GreeterProps> {
+    public static sayHello = (name: string): string => `Hello ${name}`
+
+    public render(): any {
+      const { render } = this.props
+      return render && typeof render === 'function' && render(`Hello John`)
+    }
+  }
+
+  const getHelloFromStatic = jest.fn((value: string) => value)
+  const children = jest.fn(() => null)
+
+  const Composed: any = adopt({
+    name: ({ render }) => render('John'),
+    greeter: Greeter,
+  })
+
+  mount(<Composed>{children}</Composed>)
+  getHelloFromStatic(Composed.sayHello('John'))
+
+  expect(getHelloFromStatic).toHaveBeenCalledWith('Hello John')
+  expect(children).toHaveBeenCalledWith({ greeter: 'Hello John', name: 'John' })
+})

src/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import { ReactNode, ReactElement } from 'react'
+import hoistNonReactStatic from 'hoist-non-react-statics'
+import getDisplayName from 'react-display-name'
 
 const { values, keys, assign } = Object
 
@@ -25,14 +27,14 @@ const isFn = (val: any): boolean => Boolean(val) && typeof val === 'function'
 const isValidRenderProp = (prop: ReactNode | ChildrenFn<any>): boolean =>
   React.isValidElement(prop) || isFn(prop)
 
-export declare type RPC<RP, P = {}> = React.SFC<
+export declare type RPC<RP, P = {}> = React.ComponentType<
   P & {
     children?: ChildrenFn<RP>
     render?: ChildrenFn<RP>
   }
 >
 
-export declare type MapperComponent<RP, P> = React.SFC<
+export declare type MapperComponent<RP, P> = React.ComponentType<
   RP &
     P & {
       render?: ChildrenFn<any>
@@ -63,40 +65,53 @@ export function adopt<RP = any, P = any>(
       ? render(rest)
       : children && isFn(children) && children(rest)
 
-  const reducer = (Component: RPC<RP>, key: string, idx: number): RPC<RP> => ({
-    render: pRender,
-    children,
-    ...rest
-  }) => (
-    <Component {...rest}>
-      {props => {
-        const element = prop(key, mapper)
-        const propsWithoutRest = omit<RP>(keys(rest), props)
-        const isLast = idx === mapperKeys.length - 1
-        const render = pRender && isFn(pRender) ? pRender : children
-
-        const renderFn: ChildrenFn<RP> = cProps => {
-          const renderProps = assign({}, propsWithoutRest, {
-            [key]: cProps,
-          })
-
-          const propsToPass =
-            mapProps && isFn(mapProps) && isLast
-              ? mapProps(renderProps)
-              : renderProps
-
-          return render && isFn(render) ? render(propsToPass) : null
-        }
-
-        return isFn(element)
-          ? React.createElement(
-              element,
-              assign({}, rest, props, { render: renderFn })
-            )
-          : React.cloneElement(element, {}, renderFn)
-      }}
-    </Component>
-  )
+  Children.displayName = 'Adopt'
+
+  const reducer = (Component: RPC<RP>, key: string, idx: number): RPC<RP> => {
+    const element = prop(key, mapper)
+    const displayName = getDisplayName(Component)
+    const nextDisplayName = getDisplayName(element)
+    const isLast = idx === mapperKeys.length - 1
+
+    const NewComponent: RPC<RP> = ({
+      render: pRender,
+      children,
+      ...rest
+    }: any) => (
+      <Component {...rest}>
+        {props => {
+          const propsWithoutRest = omit<RP>(keys(rest), props)
+          const render = pRender && isFn(pRender) ? pRender : children
+
+          const renderFn: ChildrenFn<RP> = cProps => {
+            const renderProps = assign({}, propsWithoutRest, {
+              [key]: cProps,
+            })
+
+            const propsToPass =
+              mapProps && isFn(mapProps) && isLast
+                ? mapProps(renderProps)
+                : renderProps
+
+            return render && isFn(render) ? render(propsToPass) : null
+          }
+
+          return isFn(element)
+            ? React.createElement(
+                element,
+                assign({}, rest, props, { render: renderFn })
+              )
+            : React.cloneElement(element, {}, renderFn)
+        }}
+      </Component>
+    )
+
+    NewComponent.displayName = `${displayName}(${nextDisplayName})`
+
+    return isFn(element)
+      ? hoistNonReactStatic(NewComponent, element)
+      : NewComponent
+  }
 
   return mapperKeys.reduce(reducer, Children)
 }

yarn.lock

@@ -2214,6 +2214,10 @@ [email protected]:
   version "4.2.1"
   resolved "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
+hoist-non-react-statics@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -4288,6 +4292,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-display-name@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf"
+
 react-dom@^16.3.2:
   version "16.3.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df"