Add EventTrap for handling selection & expansion of rows in TreeGrid

Author: aswinshenoy

components/tree-grid/__docs__/storybook-stories.jsx

@@ -11,9 +11,7 @@ storiesOf(TREE_GRID, module)
 		<div className="slds-p-around_medium">{getStory()}</div>
 	))
 	.add('Default', () => <Default action={action} />)
-	.add('Single Select', () => (
-		<Default action={action} selectRows="single" />
-	))
+	.add('Single Select', () => <Default action={action} selectRows="single" />)
 	.add('w/o Border', () => <Default action={action} isBorderless />)
 	.add('Single Select w/o Border', () => (
 		<Default action={action} selectRows="single" isBorderless />

components/tree-grid/__examples__/default.jsx

@@ -182,7 +182,7 @@ class Example extends React.Component {
 		nodes: this.props.nodes || sampleData,
 		isIndeterminate: false,
 		allSelect: false,
-		selectedNode: null
+		selectedNode: null,
 	};
 
 	getNodes = (node) =>
@@ -236,8 +236,7 @@ class Example extends React.Component {
 			eventName: 'Select Branch',
 			data,
 		});
-		if(this.props.selectRows !== "single")
-		{
+		if (this.props.selectRows !== 'single') {
 			const curr = this.state.nodes;
 			curr[data.node.id].selected = data.selected;
 			const selectedCount = this.countSelected(curr['0'].nodes);
@@ -250,12 +249,13 @@ class Example extends React.Component {
 				isIndeterminate = null;
 			}
 			this.setState({ nodes: curr, isIndeterminate, allSelect });
-		}
-		else {
+		} else {
 			const { nodes, selectedNode } = this.state;
 			nodes[data.node.id].selected = true;
-			if(selectedNode != null) { nodes[selectedNode].selected = false; }
-			this.setState({ nodes, selectedNode: data.node.id })
+			if (selectedNode != null) {
+				nodes[selectedNode].selected = false;
+			}
+			this.setState({ nodes, selectedNode: data.node.id });
 		}
 	};
 

components/tree-grid/__examples__/headless.jsx

@@ -135,6 +135,18 @@ class Example extends React.Component {
 		this.setState({ nodes: updated });
 	};
 
+	findChildren = (node) => {
+		if (node.type === 'branch') {
+			let list = [];
+			node.nodes.forEach((child) => {
+				const c = this.findChildren(this.state.nodes[child]);
+				list = [...c, child, ...list];
+			});
+			return list;
+		}
+		return [];
+	};
+
 	handleSelection = (event, data) => {
 		log({
 			action: this.props.action,

components/tree-grid/index.jsx

@@ -10,6 +10,7 @@ import classNames from 'classnames';
 // shortid is a short, non-sequential, url-friendly, unique id generator
 import shortid from 'shortid';
 import assign from 'lodash.assign';
+import isFunction from 'lodash.isfunction';
 
 import { TREE_GRID } from '../../utilities/constants';
 import TreeGridColumn from './column';
@@ -73,15 +74,15 @@ const propTypes = {
 	/**
 	 * Callback function for selection of rows
 	 */
-	onSelect: PropTypes.func.isRequired,
+	onSelect: PropTypes.func,
 	/**
 	 * Callback function for selection of all rows
 	 */
-	onSelectAll: PropTypes.func.isRequired,
+	onSelectAll: PropTypes.func,
 	/**
 	 * Callback function for expansion of rows
 	 */
-	onExpand: PropTypes.func.isRequired,
+	onExpand: PropTypes.func,
 	/**
 	 * Whether the TreeGrid is headless
 	 */
@@ -168,16 +169,10 @@ class TreeGrid extends React.Component {
 		});
 	};
 
-	handleSelection = (event, data) => {
-		this.props.onSelect(event, data);
-	};
-
 	handleSelectAll = (event, data) => {
-		this.props.onSelectAll(event, data);
-	};
-
-	handleExpansion = (event, data) => {
-		this.props.onExpand(event, data);
+		if (isFunction(this.props.onSelectAll)) {
+			this.props.onSelectAll(event, data);
+		}
 	};
 
 	render() {
@@ -208,6 +203,7 @@ class TreeGrid extends React.Component {
 				id={this.getId()}
 				aria-readonly="true"
 				aria-multiselectable={this.props.selectRows === 'multiple'}
+				/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role */
 				role="treegrid"
 				className={classNames(
 					'slds-table',
@@ -272,8 +268,8 @@ class TreeGrid extends React.Component {
 							flattenedNodes={this.state.flattenedNodes}
 							focusedNodeIndex={this.state.focusedNodeIndex}
 							columns={columns}
-							onSelect={this.handleSelection}
-							onExpand={this.handleExpansion}
+							onSelect={this.props.onSelect}
+							onExpand={this.props.onExpand}
 							onFocus={this.handleFocus}
 							selectRows={this.props.selectRows}
 							moreActionsDropdown={this.props.moreActionsDropdown}

components/tree-grid/private/item.jsx

@@ -3,31 +3,19 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shortid from 'shortid';
 import findIndex from 'lodash.findindex';
+import isFunction from 'lodash.isfunction';
 
 import { TREE_GRID_ITEM } from '../../../utilities/constants';
 import Checkbox from '../../checkbox';
 import TreeGridCell from './cell';
 
+import EventUtil from '../../../utilities/event';
 import KEYS from '../../../utilities/key-code';
 import mapKeyEventCallbacks from '../../../utilities/key-callbacks';
 
 const Item = (props) => {
 	const isFocused = props.treeIndex === props.focusedNodeIndex;
 
-	const handleExpansion = (event) => {
-		props.onExpand(event, {
-			node: props.row,
-			expanded: !props.row.expanded,
-		});
-	};
-
-	const handleSelection = (event) => {
-		props.onSelect(event, {
-			node: props.row,
-			selected: !props.row.selected,
-		});
-	};
-
 	const findNextNode = (flattenedNodes, node) => {
 		const nodes = flattenedNodes.map((flattenedNode) => flattenedNode.node);
 		const index = findIndex(nodes, { id: node.id });
@@ -43,6 +31,26 @@ const Item = (props) => {
 		return flattenedNodes[index];
 	};
 
+	const handleExpansion = (event) => {
+		if (isFunction(props.onExpand)) {
+			EventUtil.trap(event);
+			props.onExpand(event, {
+				node: props.row,
+				expanded: !props.row.expanded,
+			});
+		}
+	};
+
+	const handleSelection = (event) => {
+		if (isFunction(props.onSelect)) {
+			EventUtil.trap(event);
+			props.onSelect(event, {
+				node: props.row,
+				selected: !props.row.selected,
+			});
+		}
+	};
+
 	const handleKeyDownDown = (event) => {
 		const flattenedNode = findNextNode(props.flattenedNodes, props.row);
 		props.onFocus(event, flattenedNode);
@@ -54,21 +62,25 @@ const Item = (props) => {
 	};
 
 	const handleKeyDownLeft = (event) => {
-		props.onExpand(event, {
-			node: props.row,
-			expanded: false,
-		});
+		if (props.row.nodes !== undefined) {
+			if (isFunction(props.onExpand)) {
+				props.onExpand(event, {
+					node: props.row,
+					expanded: false,
+				});
+			}
+		}
 	};
 
 	const handleKeyDownRight = (event) => {
-		props.onExpand(event, {
-			node: props.row,
-			expanded: true,
-		});
-	};
-
-	const handleKeyDownEnter = (event) => {
-		handleSelection(event);
+		if (props.row.nodes !== undefined) {
+			if (isFunction(props.onExpand)) {
+				props.onExpand(event, {
+					node: props.row,
+					expanded: true,
+				});
+			}
+		}
 	};
 
 	const handleKeyDown = (event) => {
@@ -78,7 +90,7 @@ const Item = (props) => {
 				[KEYS.UP]: { callback: (e) => handleKeyDownUp(e) },
 				[KEYS.LEFT]: { callback: (e) => handleKeyDownLeft(e) },
 				[KEYS.RIGHT]: { callback: (e) => handleKeyDownRight(e) },
-				[KEYS.ENTER]: { callback: (e) => handleKeyDownEnter(e) },
+				[KEYS.ENTER]: { callback: (e) => handleSelection(e) },
 			},
 		});
 	};