diff --git a/demo/demos/DoRenderDemo.tsx b/demo/demos/DoRenderDemo.tsx new file mode 100644 index 0000000..2b16e09 --- /dev/null +++ b/demo/demos/DoRenderDemo.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { withState } from '../../src/lib/withState'; +import { ChainableComponent } from '../../src/ChainableComponent'; +import Step from '../Step'; + +export const DoRenderDemo = + ChainableComponent.DoRender( + withState(5), + () => withState(5), + () => withState('foo'), + (foo, inner, outer) => +
+ {foo.value} +
outer: {outer.value}
+ + +
inner: {inner.value}
+ +
+ ) + +export default () => ( + +
+      {`import { withState, ChainableComponent } from 'chainable-components';
+
+ChainableComponent.DoRender(
+    withState(5),
+    () => withState(5),
+    () => withState('foo'),
+    (foo, inner, outer) =>
+      
+ {foo.value} +
outer: {outer.value}
+ + +
inner: {inner.value}
+ +
+ )`} +
+ {DoRenderDemo} +
+); diff --git a/src/ChainableComponent.ts b/src/ChainableComponent.ts index 224a6b6..f79e385 100644 --- a/src/ChainableComponent.ts +++ b/src/ChainableComponent.ts @@ -404,6 +404,66 @@ function Do(a: ChainableComponent, ...fns: Function[]): ChainableComponent< return doIt(a.map(a2 => [a2]), fns); } +function DoRender( + c: ChainableComponent, + f1: (t1: T1) => React.ReactNode, +): React.ReactNode + +function DoRender( + c: ChainableComponent, + f1: (t1: T1) => ChainableComponent, + z: (t2: T2, t1: T1) => React.ReactNode +): React.ReactNode + +function DoRender( + c: ChainableComponent, + f1: (t1: T1) => ChainableComponent, + f2: (t2: T2, t1: T1) => ChainableComponent, + z: (t3: T3, t2: T2, t1: T1) => React.ReactNode +): React.ReactNode + +function DoRender( + c: ChainableComponent, + f1: (t1: T1) => ChainableComponent, + f2: (t2: T2, t1: T1) => ChainableComponent, + f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent, + z: (t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode +): React.ReactNode + +function DoRender( + c: ChainableComponent, + f1: (t1: T1) => ChainableComponent, + f2: (t2: T2, t1: T1) => ChainableComponent, + f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent, + f4: (t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent, + z: (t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode +): React.ReactNode + +function DoRender( + c: ChainableComponent, + f1: (t1: T1) => ChainableComponent, + f2: (t2: T2, t1: T1) => ChainableComponent, + f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent, + f4: (t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent, + f5: (t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent, + z: (t6: T6, t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode +): React.ReactNode + +function DoRender(a: ChainableComponent, ...fns: Function[]): React.ReactNode { + function doIt(as: ChainableComponent, fns: Function[]): any { + const [fn, ...rest] = fns; + if(rest.length === 0) { + return as.render(a2s => fn.apply(null, a2s)); + } else { + return as.render(a2s => { + const aPrime = fn.apply(null, a2s); + return doIt(aPrime.map((aP: any) => [aP, ...a2s]), rest); + }); + } + } + return doIt(a.map(a2 => [a2]), fns); +} + const isChainableComponent = (a: any) => { return typeof a.chain === 'function' && typeof a.map === 'function' && @@ -424,4 +484,5 @@ export const ChainableComponent = { 'fantasy-land/of': of, all, Do, + DoRender };