Do not trigger expand properties on nodes without children

Resolves #22.

Author: jakezatecky

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v0.4.2 (TBA)
+
+## Bug Fixes
+
+* [#22]: Remove expand-like behavior on nodes without children
+
 ## [v0.4.1](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.4.0...v0.4.1) (2017-02-15)
 
 ### Deprecations

src/js/TreeNode.js

@@ -57,17 +57,29 @@ class TreeNode extends React.Component {
 	}
 
 	renderCollapseIcon() {
-		if (this.props.rawChildren === null) {
-			return <i className="fa" />;
-		}
-
 		if (!this.props.expanded) {
 			return <i className="fa fa-chevron-right" />;
 		}
 
 		return <i className="fa fa-chevron-down" />;
 	}
 
+	renderCollapseButton() {
+		if (this.props.rawChildren === null) {
+			return (
+				<span className="rct-collapse">
+					<i className="fa" />
+				</span>
+			);
+		}
+
+		return (
+			<button aria-label="Toggle" className="rct-collapse rct-collapse-btn" title="Toggle" onClick={this.onExpand}>
+				{this.renderCollapseIcon()}
+			</button>
+		);
+	}
+
 	renderCheckboxIcon() {
 		if (this.props.checked === 0) {
 			return <i className="fa fa-square-o" />;
@@ -107,9 +119,7 @@ class TreeNode extends React.Component {
 		return (
 			<li className="rct-node">
 				<span className="rct-text">
-					<button aria-label="Toggle" className="rct-collapse" title="Toggle" onClick={this.onExpand}>
-						{this.renderCollapseIcon()}
-					</button>
+					{this.renderCollapseButton()}
 					<label htmlFor={inputId}>
 						<input checked={checked === 1} id={inputId} type="checkbox" onChange={this.onCheck} />
 						<span className="rct-checkbox">

src/less/react-checkbox-tree.less

@@ -56,12 +56,15 @@
 .rct-collapse {
   border: 0;
   background: none;
-  cursor: pointer;
   padding: 0;
   line-height: normal;
   color: inherit;
   font-size: 12px;
 
+  &.rct-collapse-btn {
+    cursor: pointer;
+  }
+
   .fa-chevron-right,
   .fa-chevron-down {
     text-align: center;

src/sass/react-checkbox-tree.scss

@@ -56,12 +56,15 @@ $rct-label-hover: rgba($rct-icon-color, .1) !default;
 .rct-collapse {
   border: 0;
   background: none;
-  cursor: pointer;
   padding: 0;
   line-height: normal;
   color: inherit;
   font-size: 12px;
 
+  &.rct-collapse-btn {
+    cursor: pointer;
+  }
+
   .fa-chevron-right,
   .fa-chevron-down {
     text-align: center;