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 });
 		}
 	};
 
@@ -290,7 +290,7 @@ class Example extends React.Component {
 			<IconSettings iconPath="/assets/icons">
 				<div style={{ overflow: 'auto' }}>
 					<TreeGrid
-						id="example"
+						id="example-tree-grid"
 						nodes={this.state.nodes['0'].nodes}
 						isBorderless={this.props.isBorderless}
 						getNodes={this.getNodes}
@@ -335,7 +335,7 @@ class Example extends React.Component {
 									id="file-more-actions"
 									iconCategory="utility"
 									iconName="chevrondown"
-									iconVariant="small"
+									iconVariant="container"
 									iconSize="x-small"
 									align="right"
 									onSelect={(event, data) => {
@@ -367,7 +367,7 @@ class Example extends React.Component {
 									id="file-more-actions"
 									iconCategory="utility"
 									iconName="chevrondown"
-									iconVariant="small"
+									iconVariant="container"
 									iconSize="x-small"
 									align="right"
 									onSelect={(event, data) => {
@@ -399,7 +399,7 @@ class Example extends React.Component {
 									id="file-more-actions"
 									iconCategory="utility"
 									iconName="chevrondown"
-									iconVariant="small"
+									iconVariant="container"
 									iconSize="x-small"
 									align="right"
 									onSelect={(event, data) => {
@@ -434,7 +434,7 @@ class Example extends React.Component {
 									id="file-more-actions"
 									iconCategory="utility"
 									iconName="chevrondown"
-									iconVariant="small"
+									iconVariant="container"
 									iconSize="x-small"
 									align="right"
 									onSelect={(event, data) => {
@@ -466,7 +466,7 @@ class Example extends React.Component {
 									id="file-more-actions"
 									iconCategory="utility"
 									iconName="chevrondown"
-									iconVariant="small"
+									iconVariant="container"
 									iconSize="x-small"
 									align="right"
 									onSelect={(event, data) => {

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/column.jsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import isFunction from 'lodash.isfunction';
 
 import Icon from '../icon';
 
@@ -35,7 +36,7 @@ const TreeGridColumn = (props) => {
 		>
 			<a
 				className="slds-th__action slds-text-link_reset"
-				href="javascript:void(0);"
+				onClick={isFunction(props.onClick) ? props.onClick : null}
 				role="button"
 				tabIndex="-1"
 			>
@@ -77,7 +78,6 @@ TreeGridColumn.propTypes = {
 	assistiveText: PropTypes.shape({
 		sortBy: PropTypes.string,
 	}),
-	children: PropTypes.element,
 	/**
 	 * Some columns, such as "date last viewed" or "date recently updated," should sort descending first, since that is what the user probably wants. How often does one want to see their oldest files first in a table? If sortable and the `DataTable`'s parent has not defined the sort order, then ascending (A at the top to Z at the bottom) is the default sort order on first click.
 	 */

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() {
@@ -193,7 +188,6 @@ class TreeGrid extends React.Component {
 				const { children, ...columnProps } = child.props;
 
 				const props = assign({}, this.props);
-				delete props.children;
 				assign(props, columnProps);
 
 				columns.push({
@@ -208,6 +202,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 +267,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) },
 			},
 		});
 	};