From 4b5d43ea615cdb80b9b4a02a7b52a5b05c1d749f Mon Sep 17 00:00:00 2001 From: vctrth Date: Wed, 8 Apr 2026 14:18:42 +0200 Subject: [PATCH 1/4] Feat: enhance drag-and-drop functionality and styling in Tree and LeftBar components --- src/components/LeftBar.tsx | 197 +++++++++++++++++++++++++++++++++++++ src/components/Tree.css | 27 +++++ src/components/Tree.tsx | 15 ++- 3 files changed, 234 insertions(+), 5 deletions(-) create mode 100644 src/components/LeftBar.tsx diff --git a/src/components/LeftBar.tsx b/src/components/LeftBar.tsx new file mode 100644 index 0000000..84d9241 --- /dev/null +++ b/src/components/LeftBar.tsx @@ -0,0 +1,197 @@ +import { + Collection, + Button as RacButton, + useDragAndDrop, + useTreeData +} from 'react-aria-components' +import {IcRoundAdd} from '../stories/icons/IcRoundAdd.tsx' +import {IcRoundArrowBack} from '../stories/icons/IcRoundArrowBack.tsx' +import {IcRoundKeyboardArrowDown} from '../stories/icons/IcRoundKeyboardArrowDown.tsx' +import {IcRoundMoreVert} from '../stories/icons/IcRoundMoreVert.tsx' +import {IcRoundSearch} from '../stories/icons/IcRoundSearch.tsx' +import {Button} from './Button.tsx' +import {Rail, RailBody, RailFooter, RailHeader} from './Rail.tsx' + +import './LeftBar.css' +import {IcRoundAccountCircle} from '../stories/icons/IcRoundAccountCircle.tsx' +import {Menu, MenuItem} from './Menu.tsx' +import {Tree, TreeItem} from './Tree.tsx' + +function Tempaicon() { + return ( +
+

a

+
+ ) +} + +export function LeftBar() { + const tree = useTreeData({ + initialItems: [ + { + id: '1', + title: 'Documents', + type: 'directory', + children: [ + { + id: '2', + title: 'Project', + type: 'directory', + children: [ + {id: '3', title: 'Weekly Report', type: 'file', children: []}, + {id: '4', title: 'Budget', type: 'file', children: []} + ] + } + ] + }, + { + id: '5', + title: 'Photos', + type: 'directory', + children: [ + {id: '6', title: 'Image 1', type: 'file', children: []}, + {id: '7', title: 'Image 2', type: 'file', children: []} + ] + } + ] + }) + + const {dragAndDropHooks} = useDragAndDrop({ + getItems: keys => + [...keys].map(key => { + const item = tree.getItem(key) + return {'text/plain': item.value.title} + }), + onMove(e) { + if (e.target.dropPosition === 'before') { + tree.moveBefore(e.target.key, e.keys) + } else if (e.target.dropPosition === 'after') { + tree.moveAfter(e.target.key, e.keys) + } else if (e.target.dropPosition === 'on') { + // Move items to become children of the target + const targetNode = tree.getItem(e.target.key) + if (targetNode) { + const targetIndex = targetNode.children + ? targetNode.children.length + : 0 + const keyArray = Array.from(e.keys) + for (let i = 0; i < keyArray.length; i++) { + tree.move(keyArray[i], e.target.key, targetIndex + i) + } + } + } + } + }) + + const treeLayoutOptions = { + rowHeight: 34, + padding: 0, + gap: 1 + } + return ( + + + + + Workspace + + } + className="selectwidth" + > + + NL + + + FR + + + EN + + + + NL + + } + className="selectwidth" + > + + NL + + + FR + + + EN + + + + + + + + + + Root + + } + className="selectwidth" + > + + Pages + + + Workspace + + + Media + + + + + + + + {function renderItem(item) { + return ( + + {item.children && ( + {renderItem} + )} + + ) + }} + + + +
+ +

John Doe

+
+ + + + ) +} diff --git a/src/components/Tree.css b/src/components/Tree.css index 5652650..545aeaa 100644 --- a/src/components/Tree.css +++ b/src/components/Tree.css @@ -38,6 +38,7 @@ width: 100%; box-sizing: border-box; outline: none; + border-radius: 6px; /* Chevron */ @@ -109,6 +110,7 @@ &[data-focus-visible] { outline: 2px solid var(--alinea-focus-ring-color); + background: var(--alinea-background-color); outline-offset: -2px; } @@ -181,6 +183,10 @@ box-shadow: none; } } + + user-select: none; + -webkit-user-drag: element; /* Forceert Chrome om het als een versleepbaar element te zien */ + touch-action: none; } /* Drop indicator */ @@ -208,3 +214,24 @@ outline-offset: -1px; background: var(--alinea-highlight-overlay); } + +.react-aria-Button[data-invisible="true"] { + opacity: 0 !important; + &:focus-visible { + opacity: 1 !important; + + .react-aria-Button[data-invisible="false"] { + opacity: 0 !important; + } + } +} + +.alinea-rac-TreeItem-controls { + position: relative; + width: 16px; + height: 16px; + & > * { + position: absolute !important; + top: 0 !important; + left: 0 !important; + } +} diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx index 466630f..401c9af 100644 --- a/src/components/Tree.tsx +++ b/src/components/Tree.tsx @@ -47,16 +47,21 @@ export function TreeItemContent({ {({ selectionBehavior, selectionMode, - allowsDragging + allowsDragging, + isDragging }: TreeItemContentRenderProps) => ( <> - {allowsDragging && } {selectionBehavior === 'toggle' && selectionMode !== 'none' && ( )} - +
+ + +
{icon && ( From fa09621f11bdb35cad0f00e7bbeadbc72a654244 Mon Sep 17 00:00:00 2001 From: vctrth Date: Tue, 14 Apr 2026 14:32:17 +0200 Subject: [PATCH 2/4] fix --- src/components/LeftBar.tsx | 197 ------------------------------------- 1 file changed, 197 deletions(-) delete mode 100644 src/components/LeftBar.tsx diff --git a/src/components/LeftBar.tsx b/src/components/LeftBar.tsx deleted file mode 100644 index 84d9241..0000000 --- a/src/components/LeftBar.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { - Collection, - Button as RacButton, - useDragAndDrop, - useTreeData -} from 'react-aria-components' -import {IcRoundAdd} from '../stories/icons/IcRoundAdd.tsx' -import {IcRoundArrowBack} from '../stories/icons/IcRoundArrowBack.tsx' -import {IcRoundKeyboardArrowDown} from '../stories/icons/IcRoundKeyboardArrowDown.tsx' -import {IcRoundMoreVert} from '../stories/icons/IcRoundMoreVert.tsx' -import {IcRoundSearch} from '../stories/icons/IcRoundSearch.tsx' -import {Button} from './Button.tsx' -import {Rail, RailBody, RailFooter, RailHeader} from './Rail.tsx' - -import './LeftBar.css' -import {IcRoundAccountCircle} from '../stories/icons/IcRoundAccountCircle.tsx' -import {Menu, MenuItem} from './Menu.tsx' -import {Tree, TreeItem} from './Tree.tsx' - -function Tempaicon() { - return ( -
-

a

-
- ) -} - -export function LeftBar() { - const tree = useTreeData({ - initialItems: [ - { - id: '1', - title: 'Documents', - type: 'directory', - children: [ - { - id: '2', - title: 'Project', - type: 'directory', - children: [ - {id: '3', title: 'Weekly Report', type: 'file', children: []}, - {id: '4', title: 'Budget', type: 'file', children: []} - ] - } - ] - }, - { - id: '5', - title: 'Photos', - type: 'directory', - children: [ - {id: '6', title: 'Image 1', type: 'file', children: []}, - {id: '7', title: 'Image 2', type: 'file', children: []} - ] - } - ] - }) - - const {dragAndDropHooks} = useDragAndDrop({ - getItems: keys => - [...keys].map(key => { - const item = tree.getItem(key) - return {'text/plain': item.value.title} - }), - onMove(e) { - if (e.target.dropPosition === 'before') { - tree.moveBefore(e.target.key, e.keys) - } else if (e.target.dropPosition === 'after') { - tree.moveAfter(e.target.key, e.keys) - } else if (e.target.dropPosition === 'on') { - // Move items to become children of the target - const targetNode = tree.getItem(e.target.key) - if (targetNode) { - const targetIndex = targetNode.children - ? targetNode.children.length - : 0 - const keyArray = Array.from(e.keys) - for (let i = 0; i < keyArray.length; i++) { - tree.move(keyArray[i], e.target.key, targetIndex + i) - } - } - } - } - }) - - const treeLayoutOptions = { - rowHeight: 34, - padding: 0, - gap: 1 - } - return ( - - - - - Workspace - - } - className="selectwidth" - > - - NL - - - FR - - - EN - - - - NL - - } - className="selectwidth" - > - - NL - - - FR - - - EN - - - - - - - - - - Root - - } - className="selectwidth" - > - - Pages - - - Workspace - - - Media - - - - - - - - {function renderItem(item) { - return ( - - {item.children && ( - {renderItem} - )} - - ) - }} - - - -
- -

John Doe

-
- - - - ) -} From e5302d6c21e27b1a5f1ae92375a3339176d853d3 Mon Sep 17 00:00:00 2001 From: Ben Merckx Date: Thu, 16 Apr 2026 15:51:42 +0200 Subject: [PATCH 3/4] Cleanup --- src/components/Tree.css | 20 ++++++++++---------- src/components/Tree.tsx | 6 +++++- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/Tree.css b/src/components/Tree.css index 4dc8585..60283fa 100644 --- a/src/components/Tree.css +++ b/src/components/Tree.css @@ -213,16 +213,6 @@ background: var(--alinea-highlight-overlay); } -.react-aria-Button[data-invisible="true"] { - opacity: 0 !important; - &:focus-visible { - opacity: 1 !important; - + .react-aria-Button[data-invisible="false"] { - opacity: 0 !important; - } - } -} - .alinea-rac-TreeItem-controls { position: relative; width: 16px; @@ -233,3 +223,13 @@ left: 0 !important; } } + +.alinea-rac-TreeItem-dragHandle[data-invisible="true"] { + opacity: 0 !important; + &:focus-visible { + opacity: 1 !important; + + .react-aria-Button[data-invisible="false"] { + opacity: 0 !important; + } + } +} diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx index ad9b21f..18612c7 100644 --- a/src/components/Tree.tsx +++ b/src/components/Tree.tsx @@ -55,7 +55,11 @@ export const TreeItemContent = memo(function TreeItemContent({ )}
-