This repository was archived by the owner on Sep 9, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathleafNode.tsx
More file actions
59 lines (49 loc) · 1.68 KB
/
leafNode.tsx
File metadata and controls
59 lines (49 loc) · 1.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import * as React from 'react';
import { CommonNodeProps } from './commonNodeProps';
import { NodeRenderStrategy } from './nodeRenderStrategy';
import { TreeViewNavigationUtils } from './treeViewNavigationUtils';
export interface LeafNodeProps extends CommonNodeProps {
node: NodeRenderStrategy;
}
export class LeafNode extends React.Component<LeafNodeProps, {}> {
onClick() {
this.props.node.onClickBinded()
this.props.globals.callbacks.onAccessibleSelection(this.props.id);
}
onKeyDown(event: KeyboardEvent) {
TreeViewNavigationUtils.normalizeKeyboardEventBehaviour(event);
TreeViewNavigationUtils.handleMovementKeyboardEvent(this.props.id, this.props.treeViewId, event, this.props.globals.callbacks.onAccessibleSelection);
switch (event.keyCode) {
case 32:
// Space
this.props.node.onClickBinded();
break;
default:
break;
}
}
componentDidMount() {
const { focusOnMount, id } = this.props;
if (focusOnMount) {
const self = document.querySelector(`[data-id='${id}']`) as HTMLElement;
self.focus();
}
}
private level() {
return this.props.level || 1;
}
private descendentId() {
return this.props.treeViewId + this.props.id;
}
render() {
return (
<li>
<a id={this.descendentId()} className='picker-row' onClick={this.onClick.bind(this)} onKeyDown={this.onKeyDown.bind(this)}
data-treeviewid={this.props.treeViewId} data-id={this.props.id} tabIndex={this.props.ariaSelected ? 0 : -1}
role='treeitem' aria-labelledby={this.descendentId()} aria-level={this.level()}
aria-selected={this.props.selected} aria-setsize={this.props.setsize} aria-posinset={this.props.posinset}>
{this.props.node.element()}
</a>
</li>);
}
}