feat(fromRenderProps): add support for multiple arguments (Apollo use…

… case) acdlite#693 (acdlite#694)

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "lib/packages/recompose/dist/Recompose.umd.js": {
-    "bundled": 85956,
-    "minified": 31664,
-    "gzipped": 10060
+    "bundled": 85972,
+    "minified": 31684,
+    "gzipped": 10057
   },
   "lib/packages/recompose/dist/Recompose.min.js": {
-    "bundled": 82334,
-    "minified": 30381,
-    "gzipped": 9668
+    "bundled": 82350,
+    "minified": 30401,
+    "gzipped": 9666
   },
   "lib/packages/recompose/dist/Recompose.esm.js": {
-    "bundled": 32320,
-    "minified": 16089,
-    "gzipped": 3579,
+    "bundled": 32336,
+    "minified": 16109,
+    "gzipped": 3577,
     "treeshaked": {
       "rollup": 601,
       "webpack": 1863

docs/API.md

@@ -590,7 +590,7 @@ const Enhanced = toRenderProps(enhance)
 ```js
 fromRenderProps(
   RenderPropsComponent: ReactClass | ReactFunctionalComponent,
-  propsMapper: (props: Object) => Object,
+  propsMapper: (...props: any[]) => Object,
   renderPropName?: string
 ): HigherOrderComponent
 ```

src/packages/recompose/__tests__/fromRenderProps-test.js

@@ -70,3 +70,19 @@ test('fromRenderProps meet toRenderProps', () => {
   const div = mount(<EnhancedComponent />)
   expect(div.html()).toBe(`<div foo="bar1"></div>`)
 })
+
+test('fromRenderProps with multiple arguments #693', () => {
+  const RenderPropsComponent = ({ children }) =>
+    children({ theme: 'dark' }, { data: 'data' })
+  const EnhancedComponent = compose(
+    fromRenderProps(
+      RenderPropsComponent,
+      ({ theme }, { data }) => ({ theme, data }),
+      'children'
+    )
+  )('div')
+  expect(EnhancedComponent.displayName).toBe('fromRenderProps(div)')
+
+  const div = mount(<EnhancedComponent />)
+  expect(div.html()).toBe(`<div theme="dark" data="data"></div>`)
+})

src/packages/recompose/__tests__/types/test_fromRenderProps.js

@@ -6,13 +6,16 @@ import type { HOC } from '../..'
 
 const RenderPropsComponent1 = ({ children }) => children({ theme: 'dark' })
 const RenderPropsComponent2 = ({ render }) => render({ i18n: 'zh-TW' })
+const RenderPropsComponent3 = ({ children }) =>
+  children({ theme: 'dark' }, { data: 'data' })
 
 type EnhancedCompProps = {||}
 
-const Comp = ({ i18n, theme }) =>
+const Comp = ({ i18n, theme, data }) =>
   <div>
     {i18n}
     {theme}
+    {data}
     {
       // $ExpectError
       (i18n: number)
@@ -21,6 +24,10 @@ const Comp = ({ i18n, theme }) =>
       // $ExpectError
       (theme: number)
     }
+    {
+      // $ExpectError
+      (data: number)
+    }
   </div>
 
 const enhancer: HOC<*, EnhancedCompProps> = compose(
@@ -37,7 +44,13 @@ const enhancer: HOC<*, EnhancedCompProps> = compose(
       err: props.iMNotExists,
     }),
     'render'
-  )
+  ),
+  fromRenderProps(RenderPropsComponent3, (props, data) => ({
+    theme: props.theme,
+    data: data.data,
+    // $ExpectError property not found
+    err: data.iMNotExists,
+  }))
 )
 
 const EnhancedComponent = enhancer(Comp)

src/packages/recompose/fromRenderProps.js

@@ -12,8 +12,8 @@ const fromRenderProps = (
 
   const FromRenderProps = ownerProps =>
     renderPropsFactory({
-      [renderPropName]: props =>
-        baseFactory({ ...ownerProps, ...propsMapper(props) }),
+      [renderPropName]: (...props) =>
+        baseFactory({ ...ownerProps, ...propsMapper(...props) }),
     })
 
   if (process.env.NODE_ENV !== 'production') {

src/packages/recompose/index.js.flow

@@ -271,8 +271,8 @@ declare export function toRenderProps<B, E>(
 
 declare export function fromRenderProps<B, E, RenderPropName, Props>(
   RenderPropsComponent: Component<{
-    [RenderPropName]: (Props) => React$Node,
+    [RenderPropName]: (...props: Props) => React$Node,
   }>,
-  propsMapper: ((props: Props) => B),
+  propsMapper: ((...props: Props) => B),
   renderPropName?: RenderPropName
 ): HOC<{ ...$Exact<E>, ...B }, E>