feat: Separating header click action from toggle click action.

__tests__/Container.test.js

@@ -14,6 +14,9 @@ const renderComponent = (props = {}) => {
         {...{decorators, onClick, animations}}
         node={data}
         style={style.tree.node}
+        onClick={onClick}
+        onClickToggle={onClick}
+        onClickHeader={onClick}
         {...props}
     />);
     wrapper.Toggle = () => wrapper.find('Toggle');
@@ -28,7 +31,11 @@ describe('<Container/>', () => {
             expect(
                 wrapper
                     .children()
-                    .contains(<decorators.Header node={data} style={style.tree.node.header}/>)
+                    .contains(<decorators.Header
+                      node={data}
+                      style={style.tree.node.header}
+                      onClick={onClick}
+                        />)
             ).toBe(true);
         });
     });

example/Header.js

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import {Div} from '../src/components/common';
 
 // Example: Customising The Header Decorator To Include Icons
-const Header = ({style, node}) => {
+const Header = ({style, node, onClick}) => {
     const iconType = node.children ? 'folder' : 'file-text';
     const iconClass = `fa fa-${iconType}`;
     const iconStyle = {marginRight: '5px'};
 
     return (
-        <Div style={style.base}>
+        <Div style={style.base} onClick={() => onClick()}>
             <Div style={style.title}>
                 <i className={iconClass} style={iconStyle}/>
 
@@ -23,6 +23,7 @@ const Header = ({style, node}) => {
 Header.propTypes = {
     node: PropTypes.object,
     style: PropTypes.object,
+    onClick: PropTypes.func,
 };
 
 export default Header;

example/app.js

@@ -14,10 +14,11 @@ class DemoTree extends PureComponent {
         super(props);
         this.state = {data};
         this.onToggle = this.onToggle.bind(this);
+        this.onClickHeader = this.onClickHeader.bind(this);
     }
 
     onToggle(node, toggled) {
-        const {cursor, data} = this.state;
+        const {data, cursor} = this.state;
 
         if (cursor) {
             this.setState(() => ({cursor, active: false}));
@@ -28,7 +29,11 @@ class DemoTree extends PureComponent {
             node.toggled = toggled;
         }
 
-        this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
+        this.setState(() => ({data: Object.assign({}, data)}));
+    }
+
+    onClickHeader(node) {
+        this.setState(() => ({cursor: node}));
     }
 
     onFilterMouseUp({target: {value}}) {
@@ -62,7 +67,9 @@ class DemoTree extends PureComponent {
                     <Treebeard
                         data={data}
                         decorators={{...decorators, Header}}
+                        separateToggleEvent={true}
                         onToggle={this.onToggle}
+                        onClickHeader={this.onClickHeader}
                     />
                 </Div>
                 <Div style={styles.component}>

src/components/Decorators/Container.js

@@ -21,19 +21,22 @@ class Container extends PureComponent {
     }
 
     renderToggleDecorator() {
-        const {style, decorators} = this.props;
-        return <decorators.Toggle style={style.toggle}/>;
+        const {style, decorators, onClickToggle} = this.props;
+        return <decorators.Toggle style={style.toggle} onClick={onClickToggle ? () => onClickToggle() : null}/>;
     }
 
     render() {
-        const {style, decorators, terminal, onClick, node} = this.props;
+        const {style, decorators, terminal, onClick, onClickHeader, node} = this.props;
         return (
             <div
-                onClick={onClick}
+                onClick={onClick ? () => onClick() : null}
                 style={node.active ? {...style.container} : {...style.link}}
             >
                 {!terminal ? this.renderToggle() : null}
-                <decorators.Header node={node} style={style.header}/>
+                <decorators.Header
+                    node={node}
+                    style={style.header}
+                    onClick={onClickHeader} />
             </div>
         );
     }
@@ -43,12 +46,14 @@ Container.propTypes = {
     style: PropTypes.object.isRequired,
     decorators: PropTypes.object.isRequired,
     terminal: PropTypes.bool.isRequired,
-    onClick: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
+    onClickToggle: PropTypes.func,
+    onClickHeader: PropTypes.func,
     animations: PropTypes.oneOfType([
         PropTypes.object,
-        PropTypes.bool
+        PropTypes.bool,
     ]).isRequired,
-    node: PropTypes.object.isRequired
+    node: PropTypes.object.isRequired,
 };
 
 export default Container;

src/components/Decorators/Header.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import {Div} from '../common';
 
-const Header = ({node, style}) => (
-    <Div style={style.base}>
+const Header = ({node, style, onClick}) => (
+    <Div style={style.base} onClick={onClick ? () => onClick() : null}>
         <Div style={style.title}>
             {node.name}
         </Div>
@@ -13,7 +13,8 @@ const Header = ({node, style}) => (
 
 Header.propTypes = {
     style: PropTypes.object,
-    node: PropTypes.object.isRequired
+    node: PropTypes.object.isRequired,
+    onClick: PropTypes.func,
 };
 
 export default Header;

src/components/Decorators/Toggle.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
@@ -8,13 +8,18 @@ const Polygon = styled('polygon', {
     shouldForwardProp: prop => ['className', 'children', 'points'].indexOf(prop) !== -1
 })((({style}) => style));
 
-const Toggle = ({style}) => {
+const Toggle = ({onClick, style}) => {
     const {height, width} = style;
     const midHeight = height * 0.5;
     const points = `0,0 0,${height} ${width},${midHeight}`;
+    const click = useCallback(() => {
+        if (onClick) {
+            onClick();
+        }
+    }, [onClick]);
 
     return (
-        <Div style={style.base}>
+        <Div style={style.base} onClick={click}>
             <Div style={style.wrapper}>
                 <svg {...{height, width}}>
                     <Polygon points={points} style={style.arrow}/>
@@ -25,7 +30,8 @@ const Toggle = ({style}) => {
 };
 
 Toggle.propTypes = {
-    style: PropTypes.object
+    style: PropTypes.object,
+    onClick: PropTypes.func,
 };
 
 export default Toggle;

src/components/NodeHeader.js

@@ -24,7 +24,7 @@ class NodeHeader extends Component {
     }
 
     render() {
-        const {animations, decorators, node, onClick, style} = this.props;
+        const {animations, decorators, node, onClick, onClickToggle, onClickHeader, style} = this.props;
         const {active, children} = node;
         const terminal = !children;
         let styles;
@@ -35,7 +35,7 @@ class NodeHeader extends Component {
         }
         return (
             <decorators.Container
-                {...{animations, decorators, node, onClick, terminal}}
+                {...{animations, decorators, node, onClick, onClickToggle, onClickHeader, terminal}}
                 style={styles}
             />
         );
@@ -50,7 +50,9 @@ NodeHeader.propTypes = {
         PropTypes.bool
     ]).isRequired,
     node: PropTypes.object.isRequired,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    onClickToggle: PropTypes.func,
+    onClickHeader: PropTypes.func,
 };
 
 export default NodeHeader;

src/components/TreeNode/index.js

@@ -11,10 +11,18 @@ import Drawer from './Drawer';
 import Loading from './Loading';
 
 const Li = styled('li', {
-    shouldForwardProp: prop => ['className', 'children', 'ref'].indexOf(prop) !== -1
+    shouldForwardProp: prop => ['className', 'children', 'ref'].indexOf(prop) !== -1,
 })(({style}) => style);
 
 class TreeNode extends PureComponent {
+
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+        this.onClickToggle = this.onClickToggle.bind(this);
+        this.onClickHeader = this.onClickHeader.bind(this);
+    }
+
     onClick() {
         const {node, onToggle} = this.props;
         const {toggled} = node;
@@ -23,17 +31,32 @@ class TreeNode extends PureComponent {
         }
     }
 
+    onClickToggle() {
+        const {node, onToggle} = this.props;
+        if (onToggle) {
+            const {toggled} = node;
+            onToggle(node, !toggled);
+        }
+    }
+
+    onClickHeader() {
+        const {node, onClickHeader} = this.props;
+        if (onClickHeader) {
+            onClickHeader(node);
+        }
+    }
+
     animations() {
         const {animations, node} = this.props;
         if (!animations) {
             return {
-                toggle: defaultAnimations.toggle(this.props, 0)
+                toggle: defaultAnimations.toggle(this.props, 0),
             };
         }
         const animation = Object.assign({}, animations, node.animations);
         return {
             toggle: animation.toggle(this.props),
-            drawer: animation.drawer(this.props)
+            drawer: animation.drawer(this.props),
         };
     }
 
@@ -45,7 +68,14 @@ class TreeNode extends PureComponent {
     }
 
     renderChildren(decorators) {
-        const {animations, decorators: propDecorators, node, style, onToggle} = this.props;
+        const {
+            animations, decorators: propDecorators,
+            node,
+            style,
+            separateToggleEvent,
+            onToggle,
+            onClickHeader,
+        } = this.props;
 
         if (node.loading) {
             return (
@@ -62,7 +92,7 @@ class TreeNode extends PureComponent {
             <Ul style={style.subtree}>
                 {children.map(child => (
                     <TreeNode
-                        {...{onToggle, animations, style}}
+                        {...{separateToggleEvent, onToggle, onClickHeader, animations, style}}
                         decorators={propDecorators}
                         key={child.id || randomString()}
                         node={child}
@@ -73,13 +103,18 @@ class TreeNode extends PureComponent {
     }
 
     render() {
-        const {node, style} = this.props;
+        const {node, style, separateToggleEvent} = this.props;
         const decorators = this.decorators();
         const animations = this.animations();
         const {...restAnimationInfo} = animations.drawer;
         return (
             <Li style={style.base}>
-                <NodeHeader {...{decorators, animations, node, style}} onClick={() => this.onClick()}/>
+                <NodeHeader
+                    {...{decorators, animations, node, style}}
+                    onClick={separateToggleEvent ? null : () => this.onClick()}
+                    onClickHeader={separateToggleEvent ? () => this.onClickHeader() : null}
+                    onClickToggle={separateToggleEvent ? () => this.onClickToggle() : null}
+                />
                 <Drawer restAnimationInfo={{...restAnimationInfo}}>
                     {node.toggled ? this.renderChildren(decorators, animations) : null}
                 </Drawer>
@@ -89,14 +124,16 @@ class TreeNode extends PureComponent {
 }
 
 TreeNode.propTypes = {
+    separateToggleEvent: PropTypes.bool,
     onToggle: PropTypes.func,
+    onClickHeader: PropTypes.func,
     style: PropTypes.object.isRequired,
     node: PropTypes.object.isRequired,
     decorators: PropTypes.object.isRequired,
     animations: PropTypes.oneOfType([
         PropTypes.object,
-        PropTypes.bool
-    ]).isRequired
+        PropTypes.bool,
+    ]).isRequired,
 };
 
 export default TreeNode;

src/components/common/index.js

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 export const Div = styled('div', {
-    shouldForwardProp: prop => ['className', 'children'].indexOf(prop) !== -1
+    shouldForwardProp: prop => ['className', 'children', 'onClick'].indexOf(prop) !== -1
 })((({style}) => style));
 
 export const Ul = styled('ul', {

src/components/index.js

@@ -9,11 +9,11 @@ import {Ul} from './common';
 import defaultDecorators from './Decorators';
 import TreeNode from './TreeNode';
 
-const TreeBeard = ({animations, decorators, data, onToggle, style}) => (
+const TreeBeard = ({animations, decorators, data, separateToggleEvent, onToggle, onClickHeader, style}) => (
     <Ul style={{...defaultTheme.tree.base, ...style.tree.base}}>
         {castArray(data).map(node => (
             <TreeNode
-                {...{decorators, node, onToggle, animations}}
+                {...{decorators, node, separateToggleEvent, onToggle, onClickHeader, animations}}
                 key={node.id || randomString()}
                 style={{...defaultTheme.tree.node, ...style.tree.node}}
             />
@@ -31,14 +31,16 @@ TreeBeard.propTypes = {
         PropTypes.object,
         PropTypes.bool
     ]),
+    separateToggleEvent: PropTypes.bool,
     onToggle: PropTypes.func,
+    onClickHeader: PropTypes.func,
     decorators: PropTypes.object
 };
 
 TreeBeard.defaultProps = {
     style: defaultTheme,
     animations: defaultAnimations,
-    decorators: defaultDecorators
+    decorators: defaultDecorators,
 };
 
 export default TreeBeard;