diff --git a/examples/patois.web/src/App.js b/examples/patois.web/src/App.js index e4ff973..7d3c977 100644 --- 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 ( - +
logo

Welcome to React

- +
-
+ ); } } diff --git a/examples/patois.web/src/components/Space/Form.js b/examples/patois.web/src/components/Space/Form.js index 7006737..32447f9 100644 --- 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} />
-   + +   + ); diff --git a/examples/patois.web/src/components/Space/index.js b/examples/patois.web/src/components/Space/index.js index 2cf79c1..40ecdd6 100644 --- 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 = () => ( + + + {(tao, data) => } + + {/**/} + + {(tao, data) => } + + + {(tao, data) => } + + + {(tao, data) =>
} + + {/**/} + +); + +export { SpaceAltContainer }; diff --git a/packages/react-tao/src/Provider.js b/packages/react-tao/src/Provider.js index 0c94500..f2e931f 100644 --- 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 ( diff --git a/packages/react-tao/src/RenderHandler.js b/packages/react-tao/src/RenderHandler.js index a01addb..a1bb664 100644 --- 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 {children(tao, data)}; + } const ctxList = Array.isArray(context) ? context : [context]; return recursiveContextGenerator( ctxList,