diff --git a/types/recompose/index.d.ts b/types/recompose/index.d.ts index 6f61888954..e44ca48706 100644 --- a/types/recompose/index.d.ts +++ b/types/recompose/index.d.ts @@ -1,10 +1,11 @@ -// Type definitions for Recompose 0.27 +// Type definitions for Recompose 0.30 // Project: https://github.com/acdlite/recompose // Definitions by: Iskander Sierra // Curtis Layne // Rasmus Eneman // Lucas Terra // Brian Adams +// Mathieu Masy // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -265,6 +266,17 @@ declare module 'recompose' { // toClass: https://github.com/acdlite/recompose/blob/master/docs/API.md#toClass export const toClass: InferableComponentEnhancer<{}>; + // toRenderProps: https://github.com/acdlite/recompose/blob/master/docs/API.md#torenderprops + export function toRenderProps( + hoc: InferableComponentEnhancerWithProps + ): StatelessComponent React.ReactElement }>; + + // fromRenderProps: https://github.com/acdlite/recompose/blob/master/docs/API.md#fromrenderprops + export function fromRenderProps( + RenderPropsComponent: StatelessComponent, + propsMapper: (props: TRenderProps) => Partial, + renderPropName?: string + ): ComponentEnhancer; // Static property helpers: https://github.com/acdlite/recompose/blob/master/docs/API.md#static-property-helpers @@ -586,6 +598,18 @@ declare module 'recompose/toClass' { export default toClass; } +// https://github.com/acdlite/recompose/blob/master/docs/API.md#torenderprops +declare module 'recompose/toRenderProps' { + import { toRenderProps } from 'recompose'; + export default toRenderProps; +} + +// https://github.com/acdlite/recompose/blob/master/docs/API.md#fromrenderprops +declare module 'recompose/fromRenderProps' { + import { fromRenderProps } from 'recompose'; + export default fromRenderProps; +} + // https://github.com/acdlite/recompose/blob/master/docs/API.md#setstatic declare module 'recompose/setStatic' { import { setStatic } from 'recompose'; diff --git a/types/recompose/recompose-tests.tsx b/types/recompose/recompose-tests.tsx index 4958f32e48..a0ba38a87a 100644 --- a/types/recompose/recompose-tests.tsx +++ b/types/recompose/recompose-tests.tsx @@ -7,7 +7,7 @@ import { withState, withReducer, branch, renderComponent, renderNothing, shouldUpdate, pure, onlyUpdateForKeys, onlyUpdateForPropTypes, withContext, getContext, - lifecycle, toClass, withStateHandlers, + lifecycle, toClass, toRenderProps, fromRenderProps, withStateHandlers, // Static property helpers setStatic, setPropTypes, setDisplayName, // Utilities @@ -51,6 +51,8 @@ import withContextStandalone from "recompose/withContext"; import getContextStandalone from "recompose/getContext"; import lifecycleStandalone from "recompose/lifecycle"; import toClassStandalone from "recompose/toClass"; +import toRenderPropsStandalone from "recompose/toRenderProps"; +import fromRenderPropsStandalone from "recompose/fromRenderProps"; import setStaticStandalone from "recompose/setStatic"; import setPropTypesStandalone from "recompose/setPropTypes"; import setDisplayNameStandalone from "recompose/setDisplayName"; @@ -496,3 +498,47 @@ function testSetDisplayName() { ClassResult = hoc(ClassComp); ClassResult = hoc(SfcComp); // $ExpectError } + +function testToRenderProps() { + interface OutterProps { + foo: number; + } + + interface InnerProps { + fooPlusOne: number; + } + + const enhance = withProps(({ foo }) => ({ fooPlusOne: foo + 1 })); + const Enhanced = toRenderProps(enhance); + + return {({ fooPlusOne }) =>

{fooPlusOne}

}
; +} + +function testFromRenderProps() { + interface RenderProps { + value: string; + } + + interface InnerProps { + renderValue: string; + outterValue: number; + } + + interface OutterProps { + outterValue: number; + } + + const RenderPropComponent: React.StatelessComponent<{ + render: (renderProps: RenderProps) => React.ReactElement; + }> = ({ render }) => render({ value: 'test' }); + + const component: React.StatelessComponent = ({ renderValue }) =>
{renderValue}
; + + const Enhanced = fromRenderProps( + RenderPropComponent, + ({ value }) => ({ renderValue: value }), + 'render' + )(component); + + return ; +}