+ {(ref, innerText) => (
+
+ {(ariaLabel: string) => {
+ const label:
+ | { 'aria-label': string }
+ | { 'aria-labelledby': string } = hasAriaLabel(rest)
+ ? {
+ 'aria-label': ariaLabel,
+ }
+ : {
+ 'aria-labelledby': `${buttonId} ${rest['aria-labelledby']}`,
+ };
- const nodeClasses = classNames(
- 'euiTreeView__node',
- display ? displayToClassNameMap[display] : null,
- { 'euiTreeView__node--expanded': this.isNodeOpen(node) }
- );
+ const nodeClasses = classNames(
+ 'euiTreeView__node',
+ display ? displayToClassNameMap[display] : null,
+ {
+ 'euiTreeView__node--expanded': this.isNodeOpen(
+ node
+ ),
+ }
+ );
- const nodeButtonClasses = classNames(
- 'euiTreeView__nodeInner',
- showExpansionArrows && node.children
- ? 'euiTreeView__nodeInner--withArrows'
- : null,
- this.state.activeItem === node.id
- ? 'euiTreeView__node--active'
- : null,
- node.className ? node.className : null
- );
+ const nodeButtonClasses = classNames(
+ 'euiTreeView__nodeInner',
+ showExpansionArrows && node.children
+ ? 'euiTreeView__nodeInner--withArrows'
+ : null,
+ this.state.activeItem === node.id
+ ? 'euiTreeView__node--active'
+ : null,
+ node.className ? node.className : null
+ );
- return (
-
-
-
- );
- }}
-
+ onClick={() => this.handleNodeClick(node)}
+ className={nodeButtonClasses}>
+ {showExpansionArrows && node.children ? (
+
+ ) : null}
+ {node.icon && !node.useEmptyIcon ? (
+
+ {this.isNodeOpen(node) &&
+ node.iconWhenExpanded
+ ? node.iconWhenExpanded
+ : node.icon}
+
+ ) : null}
+ {node.useEmptyIcon && !node.icon ? (
+
+ ) : null}
+
+ {node.label}
+
+
+
+ this.onChildrenKeydown(event, index)
+ }>
+ {node.children && this.isNodeOpen(node) ? (
+
+ ) : null}
+
+
+
+ );
+ }}
+