diff --git a/examples/patois.web/src/App.js b/examples/patois.web/src/App.js index d376b27..dd3d5b5 100644 --- a/examples/patois.web/src/App.js +++ b/examples/patois.web/src/App.js @@ -25,7 +25,7 @@ class App extends Component { /> )} - + ); diff --git a/examples/patois.web/src/components/Space/List.js b/examples/patois.web/src/components/Space/List.js index cdd3735..f804fcb 100644 --- a/examples/patois.web/src/components/Space/List.js +++ b/examples/patois.web/src/components/Space/List.js @@ -1,5 +1,16 @@ import React from 'react'; import TAO from '@tao.js/core'; +import { withContext } from '@tao.js/react'; +// const TAOContext = React.createContext(TAO); + +// const Link = props => { +// const { t, a, o, data } = props; +// return ( +// +// {Kernel => } +// +// ) +// } const SpaceItems = ({ spaces }) => spaces.map(s => { @@ -17,7 +28,7 @@ const SpaceItems = ({ spaces }) => ); }); -const SpaceList = ({ Space }) => ( +const SpaceList = ({ data: Space }) => (

Current list of Spaces

@@ -26,9 +37,13 @@ const SpaceList = ({ Space }) => (

    - +
); -export default SpaceList; +export default withContext( + { t: 'Space', a: 'List' }, + (tao, data, set) => ({ list: data.Space }), + () => ({ list: [] }) +)(SpaceList); diff --git a/examples/patois.web/src/components/Space/index.js b/examples/patois.web/src/components/Space/index.js index 1e38311..0441008 100644 --- a/examples/patois.web/src/components/Space/index.js +++ b/examples/patois.web/src/components/Space/index.js @@ -5,7 +5,8 @@ import { Reactor, DataHandler, SwitchHandler, - RenderHandler + RenderHandler, + withContext } from '@tao.js/react'; import List from './List'; import View from './View'; @@ -38,35 +39,46 @@ const SpaceContainer = () => ( export default SpaceContainer; -const SpaceAltContainer = () => ( - ({ list: [] })} - handler={(tao, data, set) => ({ list: data.Space })} - > - - +// const SpaceAltContainer_ = ({ data: spaceList }) => ( +const SpaceAltContainer = props => ( + // ({ list: [] })} + // handler={(tao, data, set) => ({ list: data.Space })} + // > + + {/* {(tao, data, spaceList) => } - - - {(tao, data) => } - - - {() =>
You must save for changes to take effect.
} -
- - {(tao, data) =>
} - - some random text -
some more text
- - {(tao, data) => } - - - + */} + + {/* (tao, data) => */} + {(tao, data) => } + + + {(tao, data) => } + + + {() =>
You must save for changes to take effect.
} +
+ + {(tao, data) => } + + some random text +
some more text
+ + {(tao, data) => } + + + // ); +// const SpaceAltContainer = withContext( +// { t: 'Space', a: 'List' }, +// (tao, data, set) => ({ list: data.Space }), +// () => ({ list: [] }) +// )(SpaceAltContainer_); + export { SpaceAltContainer }; diff --git a/packages/react-tao/src/SwitchHandler.js b/packages/react-tao/src/SwitchHandler.js index 62b2dd9..dae42af 100644 --- a/packages/react-tao/src/SwitchHandler.js +++ b/packages/react-tao/src/SwitchHandler.js @@ -68,16 +68,21 @@ export default class SwitchHandler extends Component { console.log('chosenList:', chosenList); chosenList.add(child); this.setState({ chosenList }); + console.log('SwitchHandler::handleSwitch::set state with:', this.state); }; render() { + console.log('SwitchHandler::render::state:', this.state); const { term, action, orient, children } = this.props; const { chosenList } = this.state; return React.Children.map(children, child => { if (!React.isValidElement(child) || child.type !== RenderHandler) { + console.log('SwitchHandler::render:returning child'); return child; } + console.log('SwitchHandler::render:testing child'); if (chosenList.has(child)) { + console.log('SwitchHandler::render:cloning child'); return React.cloneElement(child, { term, action, diff --git a/packages/react-tao/src/withContext.js b/packages/react-tao/src/withContext.js index c1271ef..f378a7b 100644 --- a/packages/react-tao/src/withContext.js +++ b/packages/react-tao/src/withContext.js @@ -7,11 +7,19 @@ export default function withContext(tao, handler, defaultValue) { throw new Error('withContext `handler` must be a function'); } const WrappingContext = createContextHandler(tao, handler, defaultValue); - return ComponentToWrap => props => ( - - - {value => } - - - ); + return ComponentToWrap => { + const wrappedComponent = props => ( + + + {/* value => + React.cloneElement(ComponentToWrap, { data: value, ...props }) + */} + {value => } + + + ); + wrappedComponent.displayName = `withContext(${ComponentToWrap.displayName || + ComponentToWrap.name}`; + return wrappedComponent; + }; }