Skip to content

Commit 79156b9

Browse files
interactivellamainteractivellama
committed
Tree: Clarify internal function names
onClick -> onSelect onExpandClick -> onExpand
1 parent ee0788b commit 79156b9

File tree

4 files changed

+52
-52
lines changed

4 files changed

+52
-52
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,15 @@ const DemoTree = createReactClass({
7474

7575
return { selectedNode: data.node };
7676
});
77-
itemClicked('Node Clicked')(event, data);
77+
itemClicked('Node Selected')(event, data);
7878
} else if (
7979
!this.props.noBranchSelection ||
8080
(this.props.noBranchSelection && data.node.type !== 'branch')
8181
) {
8282
data.node.selected = data.select;
8383
// trigger render
8484
this.setState((prevState) => ({ ...prevState }));
85-
itemClicked('Node Clicked')(event, data);
85+
itemClicked('Node Selected')(event, data);
8686
}
8787
},
8888

‎components/tree/index.jsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ import { TREE } from '../../utilities/constants';
2929
class Tree extends React.Component {
3030
constructor (props) {
3131
super(props);
32-
this.handleClick = this.handleClick.bind(this);
32+
this.handleSelect = this.handleSelect.bind(this);
3333
this.handleNodeBlur = this.handleNodeBlur.bind(this);
34-
this.handleExpandClick = this.handleExpandClick.bind(this);
34+
this.handleExpand = this.handleExpand.bind(this);
3535
this.state = {
3636
flattenedNodes: this.flattenTree({
3737
nodes: this.props.nodes,
@@ -74,7 +74,7 @@ class Tree extends React.Component {
7474
return nodes;
7575
}
7676

77-
handleClick (event, data, clearSelectedNodes) {
77+
handleSelect (event, data, clearSelectedNodes) {
7878
// When triggered by a key event, other nodes should be deselected.
7979
if (clearSelectedNodes) {
8080
this.state.flattenedNodes.forEach((flattenedNode) => {
@@ -112,7 +112,7 @@ class Tree extends React.Component {
112112
this.treeHasFocus = false;
113113
}
114114

115-
handleExpandClick (event, data) {
115+
handleExpand (event, data) {
116116
this.treeHasFocus = true;
117117
this.props.onExpandClick(event, data);
118118
}
@@ -151,8 +151,8 @@ class Tree extends React.Component {
151151
focusedNodeIndex={this.state.focusedNodeIndex}
152152
treeHasFocus={this.treeHasFocus}
153153
onNodeBlur={this.handleNodeBlur}
154-
onClick={this.handleClick}
155-
onExpandClick={this.handleExpandClick}
154+
onSelect={this.handleSelect}
155+
onExpand={this.handleExpand}
156156
onScroll={this.props.onScroll}
157157
searchTerm={this.props.searchTerm}
158158
treeId={this.props.id}
@@ -209,11 +209,11 @@ Tree.propTypes = {
209209
*/
210210
nodes: PropTypes.array,
211211
/**
212-
* Function that will run whenever an item or branch is clicked.
212+
* Function that will run whenever an item or branch is selected due to click or keyboard navigation.
213213
*/
214214
onClick: PropTypes.func.isRequired,
215215
/**
216-
* This function triggers when the expand or collapse icon is clicked.
216+
* This function triggers when the expand or collapse icon is clicked or due to keyboard navigation.
217217
*/
218218
onExpandClick: PropTypes.func.isRequired,
219219
/**

‎components/tree/private/branch.jsx

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -36,22 +36,22 @@ import mapKeyEventCallbacks from '../../../utilities/key-callbacks';
3636
// ## Constants
3737
import { TREE_BRANCH } from '../../../utilities/constants';
3838

39-
const handleExpandClick = (event, props) => {
39+
const handleExpand = (event, props) => {
4040
EventUtil.trap(event);
4141

42-
if (isFunction(props.onExpandClick)) {
43-
props.onExpandClick(event, {
42+
if (isFunction(props.onExpand)) {
43+
props.onExpand(event, {
4444
node: props.node,
4545
expand: !props.node.expanded,
4646
treeIndex: props.treeIndex,
4747
});
4848
}
4949
};
5050

51-
const handleClick = (event, props) => {
51+
const handleSelect = (event, props) => {
5252
EventUtil.trap(event);
53-
if (isFunction(props.onClick)) {
54-
props.onClick(event, {
53+
if (isFunction(props.onSelect)) {
54+
props.onSelect(event, {
5555
node: props.node,
5656
select: !props.node.selected,
5757
treeIndex: props.treeIndex,
@@ -91,7 +91,7 @@ const handleKeyDownDown = (event, props) => {
9191
if (props.focusedNodeIndex === props.treeIndex) {
9292
// Select the next visible node
9393
const flattenedNode = findNextNode(props.flattenedNodes, props.node);
94-
props.onClick(
94+
props.onSelect(
9595
event,
9696
{
9797
node: flattenedNode.node,
@@ -107,7 +107,7 @@ const handleKeyDownUp = (event, props) => {
107107
if (props.focusedNodeIndex === props.treeIndex) {
108108
// Go to the previous visible node
109109
const flattenedNode = findPreviousNode(props.flattenedNodes, props.node);
110-
props.onClick(
110+
props.onSelect(
111111
event,
112112
{
113113
node: flattenedNode.node,
@@ -125,25 +125,25 @@ const handleKeyDownRight = (event, props) => {
125125
handleKeyDownDown(event, props);
126126
}
127127
} else {
128-
handleExpandClick(event, props);
128+
handleExpand(event, props);
129129
}
130130
};
131131

132132
const handleKeyDownLeft = (event, props) => {
133133
if (props.node.expanded) {
134-
handleExpandClick(event, props);
134+
handleExpand(event, props);
135135
} else {
136136
const nodes = props.flattenedNodes.map(
137137
(flattenedNode) => flattenedNode.node
138138
);
139139
const index = nodes.indexOf(props.parent);
140140
if (index !== -1) {
141-
props.onExpandClick(event, {
141+
props.onExpand(event, {
142142
node: props.parent,
143143
expand: !props.parent.expanded,
144144
treeIndex: props.flattenedNodes[index].treeIndex,
145145
});
146-
props.onClick(
146+
props.onSelect(
147147
event,
148148
{
149149
node: props.parent,
@@ -157,7 +157,7 @@ const handleKeyDownLeft = (event, props) => {
157157
};
158158

159159
const handleKeyDownEnter = (event, props) => {
160-
handleClick(event, props);
160+
handleSelect(event, props);
161161
};
162162

163163
const handleKeyDown = (event, props) => {
@@ -174,7 +174,7 @@ const handleKeyDown = (event, props) => {
174174

175175
const handleFocus = (event, props) => {
176176
if (!props.focusedNodeIndex) {
177-
handleClick(event, props);
177+
handleSelect(event, props);
178178
}
179179
};
180180

@@ -304,7 +304,7 @@ const renderBranch = (children, props) => {
304304
'slds-is-selected': isSelected,
305305
})}
306306
onClick={(event) => {
307-
handleClick(event, props);
307+
handleSelect(event, props);
308308
}}
309309
>
310310
{/* eslint-enable jsx-a11y/no-static-element-interactions */}
@@ -318,7 +318,7 @@ const renderBranch = (children, props) => {
318318
role="presentation"
319319
aria-controls={props.htmlId}
320320
onClick={(event) => {
321-
handleExpandClick(event, props);
321+
handleExpand(event, props);
322322
}}
323323
tabIndex="-1"
324324
/>
@@ -370,13 +370,13 @@ renderBranch.propTypes = {
370370
*/
371371
node: PropTypes.object.isRequired,
372372
/**
373-
* Function that will run whenever an item or branch is clicked.
373+
* This function triggers when the expand or collapse icon is clicked or due to keyboard navigation.
374374
*/
375-
onClick: PropTypes.func,
375+
onExpand: PropTypes.func.isRequired,
376376
/**
377-
* This function triggers when the expand or collapse icon is clicked.
377+
* Function that will run whenever an item or branch is clicked.
378378
*/
379-
onExpandClick: PropTypes.func.isRequired,
379+
onSelect: PropTypes.func,
380380
/**
381381
* Highlights term if found in node label
382382
*/
@@ -418,7 +418,7 @@ const Branch = (props) => {
418418
let treeIndex = '';
419419
let children;
420420

421-
const { treeId, level, onExpandClick, searchTerm } = props;
421+
const { treeId, level, onExpand, searchTerm } = props;
422422

423423
if (Array.isArray(props.getNodes(props.node))) {
424424
children = props.node.nodes.map((node, index) => {
@@ -444,8 +444,8 @@ const Branch = (props) => {
444444
treeHasFocus={props.treeHasFocus}
445445
onNodeBlur={props.onNodeBlur}
446446
nodes={node.nodes}
447-
onClick={props.onClick}
448-
onExpandClick={onExpandClick}
447+
onSelect={props.onSelect}
448+
onExpand={onExpand}
449449
searchTerm={searchTerm}
450450
treeId={treeId}
451451
treeIndex={treeIndex}
@@ -465,8 +465,8 @@ const Branch = (props) => {
465465
focusedNodeIndex={props.focusedNodeIndex}
466466
treeHasFocus={props.treeHasFocus}
467467
onNodeBlur={props.onNodeBlur}
468-
onClick={props.onClick}
469-
onExpandClick={onExpandClick}
468+
onSelect={props.onSelect}
469+
onExpand={onExpand}
470470
searchTerm={searchTerm}
471471
treeIndex={treeIndex}
472472
treeId={treeId}
@@ -529,13 +529,13 @@ Branch.propTypes = {
529529
*/
530530
node: PropTypes.object.isRequired,
531531
/**
532-
* Function that will run whenever an item or branch is clicked.
532+
* Function that will run whenever an item or branch is selected (click or keyboard).
533533
*/
534-
onClick: PropTypes.func,
534+
onSelect: PropTypes.func,
535535
/**
536536
* This function triggers when the expand or collapse icon is clicked.
537537
*/
538-
onExpandClick: PropTypes.func.isRequired,
538+
onExpand: PropTypes.func.isRequired,
539539
/**
540540
* Highlights term if found in node label
541541
*/

‎components/tree/private/item.jsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ import mapKeyEventCallbacks from '../../../utilities/key-callbacks';
3030
// ## Constants
3131
import { TREE_ITEM } from '../../../utilities/constants';
3232

33-
const handleClick = (event, props) => {
33+
const handleSelect = (event, props) => {
3434
EventUtil.trap(event);
3535

36-
if (isFunction(props.onClick)) {
37-
props.onClick(event, {
36+
if (isFunction(props.onSelect)) {
37+
props.onSelect(event, {
3838
node: props.node,
3939
select: !props.node.selected,
4040
treeIndex: props.treeIndex,
@@ -61,7 +61,7 @@ const handleKeyDownDown = (event, props) => {
6161
if (props.focusedNodeIndex === props.treeIndex) {
6262
// Select the next visible node
6363
const flattenedNode = findNextNode(props.flattenedNodes, props.node);
64-
props.onClick(
64+
props.onSelect(
6565
event,
6666
{
6767
node: flattenedNode.node,
@@ -77,7 +77,7 @@ const handleKeyDownUp = (event, props) => {
7777
if (props.focusedNodeIndex === props.treeIndex) {
7878
// Go to the previous visible node
7979
const flattenedNode = findPreviousNode(props.flattenedNodes, props.node);
80-
props.onClick(
80+
props.onSelect(
8181
event,
8282
{
8383
node: flattenedNode.node,
@@ -93,12 +93,12 @@ const handleKeyDownLeft = (event, props) => {
9393
const nodes = props.flattenedNodes.map((flattenedNode) => flattenedNode.node);
9494
const index = nodes.indexOf(props.parent);
9595
if (index !== -1) {
96-
props.onExpandClick(event, {
96+
props.onExpand(event, {
9797
node: props.parent,
9898
expand: !props.parent.expanded,
9999
treeIndex: props.flattenedNodes[index].treeIndex,
100100
});
101-
props.onClick(
101+
props.onSelect(
102102
event,
103103
{
104104
node: props.parent,
@@ -111,7 +111,7 @@ const handleKeyDownLeft = (event, props) => {
111111
};
112112

113113
const handleKeyDownEnter = (event, props) => {
114-
handleClick(event, props);
114+
handleSelect(event, props);
115115
};
116116

117117
const handleKeyDown = (event, props) => {
@@ -131,7 +131,7 @@ const handleKeyDown = (event, props) => {
131131

132132
const handleFocus = (event, props) => {
133133
if (!props.focusedNodeIndex) {
134-
handleClick(event, props);
134+
handleSelect(event, props);
135135
}
136136
};
137137

@@ -175,7 +175,7 @@ const Item = (props) => {
175175
'slds-is-selected': isSelected,
176176
})}
177177
onClick={(event) => {
178-
handleClick(event, props);
178+
handleSelect(event, props);
179179
}}
180180
>
181181
{/* eslint-enable jsx-a11y/no-static-element-interactions */}
@@ -229,13 +229,13 @@ Item.propTypes = {
229229
*/
230230
node: PropTypes.object.isRequired,
231231
/**
232-
* Function that will run whenever an item or branch is clicked.
232+
* This function triggers when the expand or collapse icon is clicked or due to keyboard navigation.
233233
*/
234-
onClick: PropTypes.func,
234+
onExpand: PropTypes.func.isRequired,
235235
/**
236-
* This function triggers when the expand or collapse icon is clicked.
236+
* Function that will run whenever an item or branch is selected (click or keyboard).
237237
*/
238-
onExpandClick: PropTypes.func.isRequired,
238+
onSelect: PropTypes.func,
239239
/**
240240
* Highlights term if found in node label
241241
*/

0 commit comments

Comments
 (0)