diff --git a/src/components/header.js b/src/components/header.js index 2d6ffbb..a6d4adb 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -10,8 +10,8 @@ class NodeHeader extends React.Component { super(props); } render(){ - const {style, animations, decorators} = this.props; - const terminal = !this.props.node.children; + const {style, animations, decorators, childrenGetter} = this.props; + const terminal = !childrenGetter(this.props.node); const active = this.props.node.active; const linkStyle = [style.link, active ? style.activeLink : null]; return ( @@ -45,7 +45,8 @@ NodeHeader.propTypes = { decorators: React.PropTypes.object.isRequired, animations: React.PropTypes.object.isRequired, node: React.PropTypes.object.isRequired, - onClick: React.PropTypes.func + onClick: React.PropTypes.func, + childrenGetter: React.PropTypes.func.isRequired }; export default NodeHeader; diff --git a/src/components/helpers/getter.js b/src/components/helpers/getter.js new file mode 100644 index 0000000..dad7996 --- /dev/null +++ b/src/components/helpers/getter.js @@ -0,0 +1,14 @@ +'use strict'; + +// Helper: Get value by function or property name +function Getter(node, field, defaultValue){ + if(!field){ + return defaultValue; + } + else if(typeof field === 'function'){ + return field(node); + } + return node[field]; +} + +export default Getter; diff --git a/src/components/node.js b/src/components/node.js index 255b035..a6b1248 100644 --- a/src/components/node.js +++ b/src/components/node.js @@ -13,7 +13,7 @@ class TreeNode extends React.Component { this.onClick = this.onClick.bind(this); } componentWillReceiveProps(props){ - let toggled = props.node.toggled; + let toggled = props.toggledGetter(props.node); if(toggled !== undefined){ this.setState({ toggled }); } @@ -52,8 +52,10 @@ class TreeNode extends React.Component { ); } renderHeader(decorators, animations){ + const {childrenGetter} = this.props; return ( - {rutils.children.map(this.props.node.children, (child, index) => + {rutils.children.map(childrenGetter(this.props.node), (child, index) => Getter(node, this.props.childrenField), + keyGetter: (node, index)=>Getter(node, this.props.keyField, index), + toggledGetter: node=>Getter(node, this.props.toggledField) + } + return ( @@ -46,7 +56,9 @@ TreeBeard.propTypes = { TreeBeard.defaultProps = { style: defaultTheme, animations: defaultAnimations, - decorators: defaultDecorators + decorators: defaultDecorators, + childrenField: 'children', + toggledField: 'toggled' }; export default TreeBeard; diff --git a/test/src/components/header-tests.js b/test/src/components/header-tests.js index 56ac51c..f2bc872 100644 --- a/test/src/components/header-tests.js +++ b/test/src/components/header-tests.js @@ -11,6 +11,7 @@ const factory = require('../utils/factory'); const defaults = { style: {}, node: { children: [] }, + childrenGetter: (node)=>node.children, animations: { toggle: {} }, decorators: factory.createDecorators() }; diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index f22ae40..8266021 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -11,6 +11,9 @@ const factory = require('../utils/factory'); const defaults = { style: {}, node: { chilren: [] }, + keyGetter: (node, index)=>index, + childrenGetter: node=>node.children, + toggledGetter: node=>node.toggled, animations: factory.createAnimations(), decorators: factory.createDecorators() }; @@ -33,7 +36,7 @@ describe('node component', () => { node={node} /> ); - const changedProps = { node: { toggled: true } }; + const changedProps = { ...defaults, node: { toggled: true } }; treeNode.componentWillReceiveProps(changedProps); treeNode.state.toggled.should.equal(changedProps.node.toggled); }); @@ -45,7 +48,7 @@ describe('node component', () => { node={original} /> ); - const changedProps = { node: { toggled: undefined } }; + const changedProps = { ...defaults, node: { toggled: undefined } }; treeNode.componentWillReceiveProps(changedProps); treeNode.state.toggled.should.equal(original.toggled); });