Adding global DoRender

pfgray · Oct 12, 2018 · 35788e7 · 35788e7
1 parent a29eef2
commit 35788e7
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/demo/demos/DoRenderDemo.tsx 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) =>
+      <div>
+        {foo.value}
+        <div>outer: {outer.value}</div>
+        <button onClick={() => outer.update(outer.value + 1)}>+</button>
+
+        <div>inner: {inner.value}</div>
+        <button onClick={() => inner.update(inner.value + 1)}>+</button>
+      </div>
+  )
+
+export default () => (
+  <Step title="DoRender Demo">
+    <pre className='code-sample'>
+      {`import { withState, ChainableComponent } from 'chainable-components';
+
+ChainableComponent.DoRender(
+    withState(5),
+    () => withState(5),
+    () => withState('foo'),
+    (foo, inner, outer) =>
+      <div>
+        {foo.value}
+        <div>outer: {outer.value}</div>
+        <button onClick={() => outer.update(outer.value + 1)}>+</button>
+
+        <div>inner: {inner.value}</div>
+        <button onClick={() => inner.update(inner.value + 1)}>+</button>
+      </div>
+  )`}
+    </pre>
+    {DoRenderDemo}
+  </Step>
+);
diff --git a/src/ChainableComponent.ts b/src/ChainableComponent.ts
@@ -404,6 +404,66 @@ function Do(a: ChainableComponent<any>, ...fns: Function[]): ChainableComponent<
   return doIt(a.map(a2 => [a2]), fns);
 }
 
+function DoRender<T1, Z>(
+  c: ChainableComponent<T1>,
+  f1: (t1: T1) => React.ReactNode,
+): React.ReactNode
+
+function DoRender<T1, T2, Z>(
+  c: ChainableComponent<T1>,
+  f1: (t1: T1) => ChainableComponent<T2>,
+  z:  (t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender<T1, T2, T3, Z>(
+  c: ChainableComponent<T1>,
+  f1: (t1: T1) => ChainableComponent<T2>,
+  f2: (t2: T2, t1: T1) => ChainableComponent<T3>,
+  z:  (t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender<T1, T2, T3, T4, Z>(
+  c: ChainableComponent<T1>,
+  f1: (t1: T1) => ChainableComponent<T2>,
+  f2: (t2: T2, t1: T1) => ChainableComponent<T3>,
+  f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent<T4>,
+  z:  (t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender<T1, T2, T3, T4, T5, Z>(
+  c: ChainableComponent<T1>,
+  f1: (t1: T1) => ChainableComponent<T2>,
+  f2: (t2: T2, t1: T1) => ChainableComponent<T3>,
+  f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent<T4>,
+  f4: (t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent<T5>,
+  z:  (t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender<T1, T2, T3, T4, T5, T6, Z>(
+  c: ChainableComponent<T1>,
+  f1: (t1: T1) => ChainableComponent<T2>,
+  f2: (t2: T2, t1: T1) => ChainableComponent<T3>,
+  f3: (t3: T3, t2: T2, t1: T1) => ChainableComponent<T4>,
+  f4: (t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent<T5>,
+  f5: (t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => ChainableComponent<T6>,
+  z:  (t6: T6, t5: T5, t4: T4, t3: T3, t2: T2, t1: T1) => React.ReactNode
+): React.ReactNode
+
+function DoRender(a: ChainableComponent<any>, ...fns: Function[]): React.ReactNode {
+  function doIt(as: ChainableComponent<any[]>, 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
 };