feat(RenderHandler): working version of RenderHandler

affects: @tao.js/react, patois.web able to work with cartesian permutations fixed render when missing context prop works with router-based signals SwitchHandler not working so RenderHandlers don't disappear
zzyzxlab · Oct 30, 2018 · 8a0eaee · 8a0eaee
1 parent c768b0e
commit 8a0eaee
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 17 deletions.
diff --git a/examples/patois.web/src/App.js b/examples/patois.web/src/App.js
@@ -1,23 +1,22 @@
 import React, { Component } from 'react';
 import TAO from '@tao.js/core';
+import { Provider } from '@tao.js/react';
 import logo from './logo.svg';
 import './App.css';
-import Space from './components/Space';
-
-const TAOContext = React.createContext({ TAO });
+import Space, { SpaceAltContainer } from './components/Space';
 
 class App extends Component {
   render() {
     return (
-      <TAOContext.Provider TAO={TAO}>
+      <Provider TAO={TAO}>
         <div className="App">
           <header className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <h1 className="App-title">Welcome to React</h1>
           </header>
-          <Space />
+          <SpaceAltContainer />
         </div>
-      </TAOContext.Provider>
+      </Provider>
     );
   }
 }

diff --git a/examples/patois.web/src/components/Space/Form.js b/examples/patois.web/src/components/Space/Form.js
@@ -63,11 +63,9 @@ class SpaceForm extends Component {
             onChange={this.handleChange}
           />
           <br />
-          <input type="submit" value="Save" />&nbsp;<button
-            onClick={this.handleCancel}
-          >
-            Cancel
-          </button>
+          <input type="submit" value="Save" />
+          &nbsp;
+          <button onClick={this.handleCancel}>Cancel</button>
         </form>
       </div>
     );

diff --git a/examples/patois.web/src/components/Space/index.js b/examples/patois.web/src/components/Space/index.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import TAO, { AppCtx } from '@tao.js/core';
-import { Adapter, Reactor } from '@tao.js/react';
+import { Adapter, Reactor, SwitchHandler, RenderHandler } from '@tao.js/react';
 import List from './List';
 import View from './View';
 import Form from './Form';
@@ -50,3 +50,24 @@ const SpaceContainer = () => (
 // };
 
 export default SpaceContainer;
+
+const SpaceAltContainer = () => (
+  <Fragment>
+    <RenderHandler action="Fail">
+      {(tao, data) => <ErrorMessage Space={data.Space} Fail={data.Fail} />}
+    </RenderHandler>
+    {/*<SwitchHandler term="Space" orient="Portal">*/}
+    <RenderHandler term="Space" action="List" orient="Portal">
+      {(tao, data) => <List Space={data.Space} />}
+    </RenderHandler>
+    <RenderHandler term="Space" action="View" orient="Portal">
+      {(tao, data) => <View Space={data.Space} />}
+    </RenderHandler>
+    <RenderHandler term="Space" action={['New', 'Edit']} orient="Portal">
+      {(tao, data) => <Form Space={data.Space} a={tao.a} />}
+    </RenderHandler>
+    {/*</SwitchHandler>*/}
+  </Fragment>
+);
+
+export { SpaceAltContainer };
diff --git a/packages/react-tao/src/Provider.js b/packages/react-tao/src/Provider.js
@@ -32,7 +32,7 @@ export default class Provider extends Component {
   }
 
   render() {
-    const { TAO } = this.props;
+    const { TAO, children } = this.props;
     const dataContextFunctions = this.state;
     return (
       <Context.Provider value={{ TAO, ...dataContextFunctions }}>

diff --git a/packages/react-tao/src/RenderHandler.js b/packages/react-tao/src/RenderHandler.js
@@ -1,5 +1,7 @@
-import React, { Component } from 'react';
+import React, { Fragment, Component } from 'react';
+import PropTypes from 'prop-types';
 import { Context } from './Provider';
+import cartesian from 'cartesian';
 
 function recursiveContextGenerator(
   ctxList,
@@ -43,6 +45,13 @@ function recursiveContextGenerator(
 export default class RenderHandler extends Component {
   static contextType = Context;
 
+  static propTypes = {
+    term: PropTypes.any,
+    action: PropTypes.any,
+    orient: PropTypes.any,
+    children: PropTypes.func.isRequired
+  };
+
   constructor(props) {
     super(props);
     let { shouldRender } = props;
@@ -51,15 +60,27 @@ export default class RenderHandler extends Component {
   }
 
   componentWillMount() {
+    console.log('RenderHandler::props:', this.props);
     const { term, action, orient } = this.props;
+    console.log('RenderHandler::context:', this.context);
     const { TAO } = this.context;
-    TAO.addInlineHandler({ term, action, orient }, this.handleRender);
+    const permutations = cartesian({ term, action, orient });
+    if (permutations.length) {
+      permutations.forEach(({ term, action, orient }) =>
+        TAO.addInlineHandler({ term, action, orient }, this.handleRender)
+      );
+    }
   }
 
   componentWillUnmount() {
     const { term, action, orient } = this.props;
     const { TAO } = this.context;
-    TAO.removeInlineHandler({ term, action, orient }, this.handleRender);
+    const permutations = cartesian({ term, action, orient });
+    if (permutations.length) {
+      permutations.forEach(({ term, action, orient }) =>
+        TAO.removeInlineHandler({ term, action, orient }, this.handleRender)
+      );
+    }
   }
 
   handleRender = (tao, data) => {
@@ -74,6 +95,9 @@ export default class RenderHandler extends Component {
     if (!shouldRender) {
       return null;
     }
+    if (!context) {
+      return <Fragment>{children(tao, data)}</Fragment>;
+    }
     const ctxList = Array.isArray(context) ? context : [context];
     return recursiveContextGenerator(
       ctxList,