explorer: use keyboard accessible tree

2026-09-14 10:35:11 +00:00 · 2022-03-19 18:21:00 -05:00
parent d6d5b8826e
commit 9de4227ec1
12 changed files with 675 additions and 133 deletions
@@ -0,0 +1,197 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+/***/
+// react-complex-tree renderers for bluetprintjs integration
+// based on https://github.com/lukasbach/react-complex-tree/blob/239fb0c5f49f3c24e307142fb3d7e828440c3f55/packages/blueprintjs-renderers/src/renderers.tsx
+// Copyright (c) 2021 Lukas Bach
+
+import {
+    Button,
+    Classes,
+    Colors,
+    FocusStyleManager,
+    Icon,
+    IconName,
+    InputGroup,
+    MaybeElement,
+} from '@blueprintjs/core';
+import React, { createContext } from 'react';
+import { TreeItem, TreeRenderProps } from 'react-complex-tree';
+
+/** Combines class names into a string. */
+const cx = (...classNames: Array<string | undefined | false>): string =>
+    classNames.filter((cn) => !!cn).join(' ');
+
+/** Node item data similar to blueprintsjs TreeNodeInfo */
+export type TreeItemData = {
+    readonly label: string;
+    readonly icon?: IconName | MaybeElement;
+    readonly secondaryLabel?: string | MaybeElement;
+};
+
+/**
+ * Tree item context that can be used to get a reference to the tree item in
+ * elements passed to TreeItemData.
+ */
+export const TreeItemContext = createContext<TreeItem<TreeItemData>>({
+    index: '<default>',
+    data: {
+        label: '<default>',
+    },
+});
+
+export const renderers: Omit<
+    Required<TreeRenderProps<TreeItemData>>,
+    'renderDraggingItem' | 'renderDraggingItemTitle' | 'renderLiveDescriptorContainer'
+> = {
+    renderTreeContainer: (props) => (
+        <div
+            className={cx(Classes.TREE)}
+            onFocus={FocusStyleManager.alwaysShowFocus}
+            onBlur={FocusStyleManager.onlyShowFocusOnTabs}
+            {...props.containerProps}
+        >
+            {props.children}
+        </div>
+    ),
+
+    renderItemsContainer: (props) => (
+        <ul
+            className={cx(Classes.TREE_NODE_LIST, Classes.TREE_ROOT)}
+            {...props.containerProps}
+            // containerProps sets role="group", which is incorrect, so this
+            // has to be after
+            role={undefined}
+        >
+            {props.children}
+        </ul>
+    ),
+
+    renderItem: (props) => (
+        <TreeItemContext.Provider value={props.item}>
+            <li
+                className={cx(
+                    Classes.TREE_NODE,
+                    // TODO: include Classes.DISABLED if disabled
+                    props.context.isExpanded && Classes.TREE_NODE_EXPANDED,
+                    (props.context.isSelected || props.context.isDraggingOver) &&
+                        Classes.TREE_NODE_SELECTED,
+                )}
+                {...props.context.itemContainerWithChildrenProps}
+                {...props.context.interactiveElementProps}
+            >
+                <div
+                    className={cx(
+                        Classes.TREE_NODE_CONTENT,
+                        `${Classes.TREE_NODE_CONTENT}-${props.depth}`,
+                    )}
+                    {...props.context.itemContainerWithoutChildrenProps}
+                >
+                    {props.item.hasChildren ? (
+                        props.arrow
+                    ) : (
+                        <span className={Classes.TREE_NODE_CARET_NONE} />
+                    )}
+                    <Icon
+                        className={Classes.TREE_NODE_ICON}
+                        icon={props.item.data.icon}
+                        aria-hidden={true}
+                        tabIndex={-1}
+                    />
+                    {props.title}
+                    {props.item.data.secondaryLabel && (
+                        <span className={Classes.TREE_NODE_SECONDARY_LABEL}>
+                            {props.item.data.secondaryLabel}
+                        </span>
+                    )}
+                </div>
+                {props.context.isExpanded && props.children}
+            </li>
+        </TreeItemContext.Provider>
+    ),
+
+    renderItemArrow: (props) => (
+        <Icon
+            icon="chevron-right"
+            className={cx(
+                Classes.TREE_NODE_CARET,
+                props.context.isExpanded
+                    ? Classes.TREE_NODE_CARET_OPEN
+                    : Classes.TREE_NODE_CARET_CLOSED,
+            )}
+            {...(props.context.arrowProps as unknown)}
+        />
+    ),
+
+    renderItemTitle: ({ title, context, info }) => {
+        if (!info.isSearching || !context.isSearchMatching || !info.search) {
+            return <span className={Classes.TREE_NODE_LABEL}>{title}</span>;
+        } else {
+            const startIndex = title.toLowerCase().indexOf(info.search.toLowerCase());
+            return (
+                <React.Fragment>
+                    {startIndex > 0 && <span>{title.slice(0, startIndex)}</span>}
+                    <span className="rct-tree-item-search-highlight">
+                        {title.slice(startIndex, startIndex + info.search.length)}
+                    </span>
+                    {startIndex + info.search.length < title.length && (
+                        <span>
+                            {title.slice(startIndex + info.search.length, title.length)}
+                        </span>
+                    )}
+                </React.Fragment>
+            );
+        }
+    },
+
+    renderDragBetweenLine: ({ draggingPosition, lineProps }) => (
+        <div
+            {...lineProps}
+            style={{
+                position: 'absolute',
+                right: '0',
+                top:
+                    draggingPosition.targetType === 'between-items' &&
+                    draggingPosition.linePosition === 'top'
+                        ? '0px'
+                        : draggingPosition.targetType === 'between-items' &&
+                          draggingPosition.linePosition === 'bottom'
+                        ? '-4px'
+                        : '-2px',
+                left: `${draggingPosition.depth * 23}px`,
+                height: '4px',
+                backgroundColor: Colors.BLUE3,
+            }}
+        />
+    ),
+
+    renderRenameInput: (props) => (
+        <form {...props.formProps} style={{ display: 'contents' }}>
+            <span className={Classes.TREE_NODE_LABEL}>
+                <input
+                    {...props.inputProps}
+                    ref={props.inputRef}
+                    className="rct-tree-item-renaming-input"
+                />
+            </span>
+            <span className={Classes.TREE_NODE_SECONDARY_LABEL}>
+                <Button
+                    icon="tick"
+                    {...props.submitButtonProps}
+                    type="submit"
+                    minimal={true}
+                    small={true}
+                />
+            </span>
+        </form>
+    ),
+
+    renderSearchInput: (props) => (
+        <div className={cx('rct-tree-search-input-container')}>
+            <InputGroup {...(props.inputProps as unknown)} placeholder="Search..." />
+        </div>
+    ),
+
+    renderDepthOffset: 1,
+};