Visitar URL original
fix(webapp): align tree mouse and keyboard interactions · triggerdotdev/trigger.dev@a3d702a · GitHub
Skip to content

Commit a3d702a

Browse files
cardernecarderne
committed
fix(webapp): align tree mouse and keyboard interactions
1 parent 1de4d9c commit a3d702a

2 files changed

Lines changed: 36 additions & 18 deletions

File tree

  • apps/webapp/app/routes
    • _app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam
    • storybook.tree-view

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -968,6 +968,14 @@ function TasksTreeView({
968968
},
969969
});
970970

971+
const getInteractiveNodeProps = useCallback(
972+
(id: string) => ({
973+
...getNodeProps(id),
974+
onClick: () => selectNode(id),
975+
}),
976+
[getNodeProps, selectNode]
977+
);
978+
971979
return (
972980
<div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
973981
<div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-1.5">
@@ -1047,7 +1055,7 @@ function TasksTreeView({
10471055
autoFocus
10481056
tree={events}
10491057
nodes={nodes}
1050-
getNodeProps={getNodeProps}
1058+
getNodeProps={getInteractiveNodeProps}
10511059
getTreeProps={getTreeProps}
10521060
parentClassName="pl-3"
10531061
renderNode={({ node, state, index }) => (
@@ -1058,9 +1066,6 @@ function TasksTreeView({
10581066
? "bg-grid-dimmed hover:bg-grid-bright"
10591067
: "bg-transparent hover:bg-grid-dimmed"
10601068
)}
1061-
onClick={() => {
1062-
selectNode(node.id);
1063-
}}
10641069
>
10651070
<div className="flex h-8 items-center">
10661071
{Array.from({ length: node.level }).map((_, index) => (
@@ -1070,9 +1075,12 @@ function TasksTreeView({
10701075
isSelected={state.selected}
10711076
/>
10721077
))}
1073-
<div
1078+
<button
1079+
type="button"
1080+
disabled={!node.hasChildren}
1081+
aria-label={state.expanded ? "Collapse task" : "Expand task"}
10741082
className={cn(
1075-
"flex h-8 w-4 items-center",
1083+
"flex h-8 w-4 items-center focus-custom",
10761084
node.hasChildren && "hover:bg-surface-control"
10771085
)}
10781086
onClick={(e) => {
@@ -1098,7 +1106,7 @@ function TasksTreeView({
10981106
) : (
10991107
<div className="h-8 w-4" />
11001108
)}
1101-
</div>
1109+
</button>
11021110
</div>
11031111

11041112
<div className="flex w-full items-center justify-between gap-2 pl-1">

‎apps/webapp/app/routes/storybook.tree-view/route.tsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
FolderOpenIcon,
55
MagnifyingGlassIcon,
66
} from "@heroicons/react/20/solid";
7-
import { useRef, useState } from "react";
7+
import { useCallback, useRef, useState } from "react";
88
import { Button } from "~/components/primitives/Buttons";
99
import { Input } from "~/components/primitives/Input";
1010
import type { Tree } from "~/components/primitives/TreeView/TreeView";
@@ -177,6 +177,14 @@ function TreeViewParent({
177177
},
178178
});
179179

180+
const getInteractiveNodeProps = useCallback(
181+
(id: string) => ({
182+
...getNodeProps(id),
183+
onClick: () => toggleNodeSelection(id),
184+
}),
185+
[getNodeProps, toggleNodeSelection]
186+
);
187+
180188
return (
181189
<div className="flex w-72 flex-col items-start gap-y-4 p-4">
182190
<div className="flex items-center gap-2">
@@ -203,7 +211,7 @@ function TreeViewParent({
203211
autoFocus
204212
tree={tree}
205213
nodes={nodes}
206-
getNodeProps={getNodeProps}
214+
getNodeProps={getInteractiveNodeProps}
207215
getTreeProps={getTreeProps}
208216
parentClassName="h-96 bg-background-deep"
209217
renderNode={({ node, state, index, virtualizer, virtualItem }) => (
@@ -215,20 +223,22 @@ function TreeViewParent({
215223
"flex cursor-pointer items-center gap-2 py-1 hover:bg-blue-500/10",
216224
state.selected && "bg-blue-500/20 hover:bg-blue-500/30"
217225
)}
218-
onClick={() => {
219-
toggleNodeSelection(node.id);
220-
}}
221226
>
222-
<div
223-
className="h-4 w-4"
227+
<button
228+
type="button"
229+
aria-label={
230+
node.hasChildren
231+
? state.expanded
232+
? "Collapse node"
233+
: "Expand node"
234+
: "Select node"
235+
}
236+
className="h-4 w-4 focus-custom"
224237
onClick={(e) => {
225238
e.stopPropagation();
226239
toggleExpandNode(node.id);
227240
selectNode(node.id, true);
228241
}}
229-
onKeyDown={(e) => {
230-
console.log(e.key);
231-
}}
232242
>
233243
{node.hasChildren ? (
234244
state.expanded ? (
@@ -239,7 +249,7 @@ function TreeViewParent({
239249
) : (
240250
<DocumentIcon className="h-4 w-4" />
241251
)}
242-
</div>
252+
</button>
243253
<div>{node.data.title}</div>
244254
</div>
245255
)}

0 commit comments

Comments
 (0)