Distinguish between toggle and click

riquito · May 25, 2016 · 2239141 · 2239141
1 parent d438b3c
commit 2239141
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/src/components/decorators.js b/src/components/decorators.js
@@ -23,7 +23,7 @@ const Toggle = (props) => {
     let midHeight = height * 0.5;
     let points = `0,0 0,${height} ${width},${midHeight}`;
     return (
-        <div style={style.base}>
+        <div style={style.base} onClick={props.onClick}>
             <div style={style.wrapper}>
                 <svg height={height} width={width}>
                     <polygon
@@ -37,13 +37,14 @@ const Toggle = (props) => {
 };
 
 Toggle.propTypes = {
-    style: React.PropTypes.object
+    style: React.PropTypes.object,
+    onClick: React.PropTypes.func.isRequired
 };
 
 const Header = (props) => {
     const style = props.style;
     return (
-        <div style={style.base}>
+        <div style={style.base} onClick={props.onClick}>
             <div style={style.title}>
                 {props.node.name}
             </div>
@@ -53,7 +54,8 @@ const Header = (props) => {
 
 Header.propTypes = {
     style: React.PropTypes.object,
-    node: React.PropTypes.object.isRequired
+    node: React.PropTypes.object.isRequired,
+    onClick: React.PropTypes.func.isRequired
 };
 
 @Radium
@@ -72,6 +74,7 @@ class Container extends React.Component {
                 <decorators.Header
                     node={node}
                     style={style.header}
+                    onClick={onClick}
                 />
             </div>
         );
@@ -89,7 +92,7 @@ class Container extends React.Component {
     }
     renderToggleDecorator(){
         const {style, decorators} = this.props;
-        return (<decorators.Toggle style={style.toggle}/>);
+        return (<decorators.Toggle style={style.toggle} onClick={this.props.onToggle} />);
     }
 }
 
@@ -98,6 +101,7 @@ Container.propTypes = {
     decorators: React.PropTypes.object.isRequired,
     terminal: React.PropTypes.bool.isRequired,
     onClick: React.PropTypes.func.isRequired,
+    onToggle: React.PropTypes.func.isRequired,
     animations: React.PropTypes.oneOfType([
         React.PropTypes.object,
         React.PropTypes.bool

diff --git a/src/components/header.js b/src/components/header.js
@@ -31,6 +31,7 @@ class NodeHeader extends React.Component {
                 decorators={decorators}
                 terminal={terminal}
                 onClick={this.props.onClick}
+                onToggle={this.props.onToggle}
                 animations={this.props.animations}
                 node={this.props.node}
             />
@@ -46,7 +47,8 @@ NodeHeader.propTypes = {
         React.PropTypes.bool
     ]).isRequired,
     node: React.PropTypes.object.isRequired,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    onToggle: React.PropTypes.func
 };
 
 export default NodeHeader;
diff --git a/src/components/node.js b/src/components/node.js
@@ -9,9 +9,14 @@ import NodeHeader from './header';
 class TreeNode extends React.Component {
     constructor(props){
         super(props);
+        this.onToggle = this.onToggle.bind(this);
         this.onClick = this.onClick.bind(this);
     }
     onClick(){
+        let onClick = this.props.onClick;
+        if(onClick){ onClick(this.props.node); }
+    }
+    onToggle(){
         let toggled = !this.props.node.toggled;
         let onToggle = this.props.onToggle;
         if(onToggle){ onToggle(this.props.node, toggled); }
@@ -61,6 +66,7 @@ class TreeNode extends React.Component {
                 style={this.props.style}
                 node={Object.assign({}, this.props.node)}
                 onClick={this.onClick}
+                onToggle={this.onToggle}
             />
         );
     }
@@ -91,7 +97,10 @@ class TreeNode extends React.Component {
         );
     }
     _eventBubbles(){
-        return { onToggle: this.props.onToggle };
+        return {
+            onClick: this.props.onClick,
+            onToggle: this.props.onToggle
+        };
     }
 }
 
@@ -103,7 +112,8 @@ TreeNode.propTypes = {
         React.PropTypes.object,
         React.PropTypes.bool
     ]).isRequired,
-    onToggle: React.PropTypes.func
+    onToggle: React.PropTypes.func,
+    onClick: React.PropTypes.func
 };
 
 export default TreeNode;
diff --git a/src/components/treebeard.js b/src/components/treebeard.js
@@ -21,6 +21,7 @@ class TreeBeard extends React.Component {
                     <TreeNode
                         key={node.id || index}
                         node={node}
+                        onClick={this.props.onClick}
                         onToggle={this.props.onToggle}
                         animations={this.props.animations}
                         decorators={this.props.decorators}
@@ -42,6 +43,7 @@ TreeBeard.propTypes = {
         React.PropTypes.object,
         React.PropTypes.bool
     ]),
+    onClick: React.PropTypes.func,
     onToggle: React.PropTypes.func,
     decorators: React.PropTypes.object
 };