Skip to content

Commit 8855a51

Browse files
stijnpotters1stijnpotters1
committed
Refactor file structure components to use TreeActionButton for improved code clarity and reusability
1 parent 7f776d6 commit 8855a51

3 files changed

Lines changed: 54 additions & 111 deletions

File tree

‎src/main/frontend/app/components/file-structure/editor-file-structure.tsx‎

Lines changed: 13 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { useTreeStore } from '~/stores/tree-store'
3131
import EditorFilesDataProvider, { type FileNode } from './editor-data-provider'
3232
import { useFileTreeContextMenu } from './use-file-tree-context-menu'
3333
import FileTreeDialogs from './file-tree-dialogs'
34+
import TreeActionButton from './tree-action-button'
3435

3536
const TREE_ID = 'editor-files-tree'
3637

@@ -371,8 +372,6 @@ export default function EditorFileStructure() {
371372

372373
const isHighlighted = highlightedItemId === item.index
373374

374-
const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
375-
376375
return (
377376
<div
378377
className="group/row flex h-full w-full items-center"
@@ -388,72 +387,36 @@ export default function EditorFileStructure() {
388387
</span>
389388
<div className="ml-1 hidden items-center gap-0.5 group-hover/row:flex">
390389
{item.isFolder && (
391-
<div
392-
role="button"
393-
tabIndex={0}
394-
className={actionBtnClass}
390+
<TreeActionButton
395391
title="New File"
396-
onClick={(mouseEvent) => {
397-
mouseEvent.stopPropagation()
398-
triggerItemAction(item.index, editorContextMenu.handleNewFile)
399-
}}
400-
onKeyDown={(keyboardEvent) =>
401-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleNewFile)
402-
}
392+
onAction={() => triggerItemAction(item.index, editorContextMenu.handleNewFile)}
403393
>
404394
<CodeFileIcon className="fill-foreground h-3.5 w-3.5" />
405-
</div>
395+
</TreeActionButton>
406396
)}
407397
{item.isFolder && (
408-
<div
409-
role="button"
410-
tabIndex={0}
411-
className={actionBtnClass}
398+
<TreeActionButton
412399
title="New Folder"
413-
onClick={(mouseEvent) => {
414-
mouseEvent.stopPropagation()
415-
triggerItemAction(item.index, editorContextMenu.handleNewFolder)
416-
}}
417-
onKeyDown={(keyboardEvent) =>
418-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleNewFolder)
419-
}
400+
onAction={() => triggerItemAction(item.index, editorContextMenu.handleNewFolder)}
420401
>
421402
<FolderIcon className="fill-foreground h-3.5 w-3.5" />
422-
</div>
403+
</TreeActionButton>
423404
)}
424405
{!isRoot && (
425-
<div
426-
role="button"
427-
tabIndex={0}
428-
className={actionBtnClass}
406+
<TreeActionButton
429407
title="Rename"
430-
onClick={(mouseEvent) => {
431-
mouseEvent.stopPropagation()
432-
triggerItemAction(item.index, editorContextMenu.handleRename)
433-
}}
434-
onKeyDown={(keyboardEvent) =>
435-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleRename)
436-
}
408+
onAction={() => triggerItemAction(item.index, editorContextMenu.handleRename)}
437409
>
438410
<Pen className="fill-foreground h-3.5 w-3.5" />
439-
</div>
411+
</TreeActionButton>
440412
)}
441413
{!isRoot && (
442-
<div
443-
role="button"
444-
tabIndex={0}
445-
className={actionBtnClass}
414+
<TreeActionButton
446415
title="Delete"
447-
onClick={(mouseEvent) => {
448-
mouseEvent.stopPropagation()
449-
triggerItemAction(item.index, editorContextMenu.handleDelete)
450-
}}
451-
onKeyDown={(keyboardEvent) =>
452-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleDelete)
453-
}
416+
onAction={() => triggerItemAction(item.index, editorContextMenu.handleDelete)}
454417
>
455418
<TrashBinIcon className="fill-foreground h-3.5 w-3.5" />
456-
</div>
419+
</TreeActionButton>
457420
)}
458421
</div>
459422
</div>

‎src/main/frontend/app/components/file-structure/studio-file-structure.tsx‎

Lines changed: 16 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { useProjectStore } from '~/stores/project-store'
3434
import { useTreeStore } from '~/stores/tree-store'
3535
import { useStudioContextMenu, detectItemType, getItemName, resolveItemPaths } from './use-studio-context-menu'
3636
import StudioFileTreeDialogs from './studio-file-tree-dialogs'
37+
import TreeActionButton from './tree-action-button'
3738

3839
const TREE_ID = 'studio-files-tree'
3940

@@ -415,7 +416,6 @@ export default function StudioFileStructure() {
415416
}
416417

417418
const isHighlighted = highlightedItemId == item.index
418-
const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
419419

420420
return (
421421
<div
@@ -432,89 +432,44 @@ export default function StudioFileStructure() {
432432
</span>
433433
<div className="ml-1 hidden items-center gap-0.5 group-hover/row:flex">
434434
{(isRoot || isPlainFolder) && (
435-
<div
436-
role="button"
437-
tabIndex={0}
438-
className={actionBtnClass}
435+
<TreeActionButton
439436
title="New Configuration File"
440-
onClick={(mouseEvent) => {
441-
mouseEvent.stopPropagation()
442-
triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)
443-
}}
444-
onKeyDown={(keyboardEvent) =>
445-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)
446-
}
437+
onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)}
447438
>
448439
<SettingsIcon className="fill-foreground h-3.5 w-3.5" />
449-
</div>
440+
</TreeActionButton>
450441
)}
451442
{(isRoot || isPlainFolder) && (
452-
<div
453-
role="button"
454-
tabIndex={0}
455-
className={actionBtnClass}
443+
<TreeActionButton
456444
title="New Folder"
457-
onClick={(mouseEvent) => {
458-
mouseEvent.stopPropagation()
459-
triggerItemAction(item.index, studioContextMenu.handleNewFolder)
460-
}}
461-
onKeyDown={(keyboardEvent) =>
462-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewFolder)
463-
}
445+
onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewFolder)}
464446
>
465447
<FolderIcon className="fill-foreground h-3.5 w-3.5" />
466-
</div>
448+
</TreeActionButton>
467449
)}
468450
{isConfigFile && (
469-
<div
470-
role="button"
471-
tabIndex={0}
472-
className={actionBtnClass}
451+
<TreeActionButton
473452
title="New Adapter"
474-
onClick={(mouseEvent) => {
475-
mouseEvent.stopPropagation()
476-
triggerItemAction(item.index, studioContextMenu.handleNewAdapter)
477-
}}
478-
onKeyDown={(keyboardEvent) =>
479-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewAdapter)
480-
}
453+
onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewAdapter)}
481454
>
482455
<CodeIcon className="fill-foreground h-4 w-4" />
483-
</div>
456+
</TreeActionButton>
484457
)}
485458
{!isRoot && (
486-
<div
487-
role="button"
488-
tabIndex={0}
489-
className={actionBtnClass}
459+
<TreeActionButton
490460
title="Rename"
491-
onClick={(mouseEvent) => {
492-
mouseEvent.stopPropagation()
493-
triggerItemAction(item.index, studioContextMenu.handleRename)
494-
}}
495-
onKeyDown={(keyboardEvent) =>
496-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleRename)
497-
}
461+
onAction={() => triggerItemAction(item.index, studioContextMenu.handleRename)}
498462
>
499463
<Pen className="stroke-foreground h-3.5 w-3.5" />
500-
</div>
464+
</TreeActionButton>
501465
)}
502466
{!isRoot && (
503-
<div
504-
role="button"
505-
tabIndex={0}
506-
className={actionBtnClass}
467+
<TreeActionButton
507468
title="Delete"
508-
onClick={(mouseEvent) => {
509-
mouseEvent.stopPropagation()
510-
triggerItemAction(item.index, studioContextMenu.handleDelete)
511-
}}
512-
onKeyDown={(keyboardEvent) =>
513-
keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleDelete)
514-
}
469+
onAction={() => triggerItemAction(item.index, studioContextMenu.handleDelete)}
515470
>
516471
<TrashBinIcon className="fill-foreground h-3.5 w-3.5" />
517-
</div>
472+
</TreeActionButton>
518473
)}
519474
</div>
520475
</div>

‎src/main/frontend/app/components/file-structure/tree-action-button.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
3+
interface TreeActionButtonProps {
4+
title: string
5+
onAction: () => void
6+
children: React.ReactNode
7+
}
8+
9+
export default function TreeActionButton({ title, onAction, children }: TreeActionButtonProps) {
10+
return (
11+
<div
12+
role="button"
13+
tabIndex={0}
14+
className="hover:bg-hover flex-shrink-0 cursor-pointer rounded p-0.5"
15+
title={title}
16+
onClick={(mouseEvent) => {
17+
mouseEvent.stopPropagation()
18+
onAction()
19+
}}
20+
onKeyDown={(keyboardEvent) => keyboardEvent.key === 'Enter' && onAction()}
21+
>
22+
{children}
23+
</div>
24+
)
25+
}

0 commit comments

Comments
 (0)