From 7b56b4570e1620fcd96cc7262b939b5ee90948dc Mon Sep 17 00:00:00 2001 From: Atmaram Naik Date: Tue, 12 Nov 2024 23:37:09 +0530 Subject: [PATCH 1/3] drag drop enhancement --- modules/react-arborist/src/components/outer-drop.ts | 4 ++-- modules/react-arborist/src/components/row-container.tsx | 4 ++-- modules/react-arborist/src/components/tree.tsx | 2 +- modules/react-arborist/src/dnd/drag-hook.ts | 6 +++--- modules/react-arborist/src/dnd/drop-hook.ts | 5 +++-- modules/react-arborist/src/dnd/outer-drop-hook.ts | 4 ++-- modules/react-arborist/src/types/tree-props.ts | 4 +++- 7 files changed, 16 insertions(+), 13 deletions(-) diff --git a/modules/react-arborist/src/components/outer-drop.ts b/modules/react-arborist/src/components/outer-drop.ts index 944d08ca..b5a8fad3 100644 --- a/modules/react-arborist/src/components/outer-drop.ts +++ b/modules/react-arborist/src/components/outer-drop.ts @@ -1,7 +1,7 @@ import { ReactElement } from "react"; import { useOuterDrop } from "../dnd/outer-drop-hook"; -export function OuterDrop(props: { children: ReactElement }) { - useOuterDrop(); +export function OuterDrop(props: { children: ReactElement,accept?:string[]}) { + useOuterDrop(props.accept); return props.children; } diff --git a/modules/react-arborist/src/components/row-container.tsx b/modules/react-arborist/src/components/row-container.tsx index 11f6e536..9a1f3e94 100644 --- a/modules/react-arborist/src/components/row-container.tsx +++ b/modules/react-arborist/src/components/row-container.tsx @@ -35,8 +35,8 @@ export const RowContainer = React.memo(function RowContainer({ const node = useFreshNode(index); const el = useRef(null); - const dragRef = useDragHook(node); - const dropRef = useDropHook(el, node); + const dragRef = useDragHook(node,tree.props.dropType); + const dropRef = useDropHook(el, node,tree.props.accept); const innerRef = useCallback( (n: any) => { el.current = n; diff --git a/modules/react-arborist/src/components/tree.tsx b/modules/react-arborist/src/components/tree.tsx index 82601a7a..24cdaeb2 100644 --- a/modules/react-arborist/src/components/tree.tsx +++ b/modules/react-arborist/src/components/tree.tsx @@ -15,7 +15,7 @@ function TreeComponent( const treeProps = useValidatedProps(props); return ( - + diff --git a/modules/react-arborist/src/dnd/drag-hook.ts b/modules/react-arborist/src/dnd/drag-hook.ts index 22ac564e..b19a1611 100644 --- a/modules/react-arborist/src/dnd/drag-hook.ts +++ b/modules/react-arborist/src/dnd/drag-hook.ts @@ -9,18 +9,18 @@ import { actions as dnd } from "../state/dnd-slice"; import { safeRun } from "../utils"; import { ROOT_ID } from "../data/create-root"; -export function useDragHook(node: NodeApi): ConnectDragSource { +export function useDragHook(node: NodeApi,type?:(node:T)=>string): ConnectDragSource { const tree = useTreeApi(); const ids = tree.selectedIds; const [_, ref, preview] = useDrag( () => ({ canDrag: () => node.isDraggable, - type: "NODE", + type: type?type(node.data):"NODE", item: () => { // This is fired once at the begging of a drag operation const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id]; tree.dispatch(dnd.dragStart(node.id, dragIds)); - return { id: node.id }; + return { id: node.id,data:node.data }; }, end: () => { tree.hideCursor(); diff --git a/modules/react-arborist/src/dnd/drop-hook.ts b/modules/react-arborist/src/dnd/drop-hook.ts index 6be259de..fb1ebcee 100644 --- a/modules/react-arborist/src/dnd/drop-hook.ts +++ b/modules/react-arborist/src/dnd/drop-hook.ts @@ -13,12 +13,13 @@ export type DropResult = { export function useDropHook( el: RefObject, - node: NodeApi + node: NodeApi, + accept?:string[] ): ConnectDropTarget { const tree = useTreeApi(); const [_, dropRef] = useDrop( () => ({ - accept: "NODE", + accept: accept?accept:"NODE", canDrop: () => tree.canDrop(), hover: (_item, m) => { const offset = m.getClientOffset(); diff --git a/modules/react-arborist/src/dnd/outer-drop-hook.ts b/modules/react-arborist/src/dnd/outer-drop-hook.ts index b150f1ab..10b5d51b 100644 --- a/modules/react-arborist/src/dnd/outer-drop-hook.ts +++ b/modules/react-arborist/src/dnd/outer-drop-hook.ts @@ -5,13 +5,13 @@ import { computeDrop } from "./compute-drop"; import { DropResult } from "./drop-hook"; import { actions as dnd } from "../state/dnd-slice"; -export function useOuterDrop() { +export function useOuterDrop(accept?:string[]) { const tree = useTreeApi(); // In case we drop an item at the bottom of the list const [, drop] = useDrop( () => ({ - accept: "NODE", + accept: accept?accept:"NODE", canDrop: (_item, m) => { if (!m.isOver({ shallow: true })) return false; return tree.canDrop(); diff --git a/modules/react-arborist/src/types/tree-props.ts b/modules/react-arborist/src/types/tree-props.ts index 440bcc40..9335d70e 100644 --- a/modules/react-arborist/src/types/tree-props.ts +++ b/modules/react-arborist/src/types/tree-props.ts @@ -6,12 +6,14 @@ import { ListOnScrollProps } from "react-window"; import { NodeApi } from "../interfaces/node-api"; import { OpenMap } from "../state/open-slice"; import { useDragDropManager } from "react-dnd"; +import { TreeApi } from "../interfaces/tree-api"; export interface TreeProps { /* Data Options */ data?: readonly T[]; initialData?: readonly T[]; - + accept?: string[]; + dropType?:(node:T)=>string /* Data Handlers */ onCreate?: handlers.CreateHandler; onMove?: handlers.MoveHandler; From 33cd4d4ce86b5ace498633fd2b184dbf8bd61269 Mon Sep 17 00:00:00 2001 From: Atmaram Naik Date: Wed, 13 Nov 2024 00:12:01 +0530 Subject: [PATCH 2/3] Initial commit --- modules/react-arborist/package.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/modules/react-arborist/package.json b/modules/react-arborist/package.json index f60dde68..6b2627d8 100644 --- a/modules/react-arborist/package.json +++ b/modules/react-arborist/package.json @@ -1,5 +1,5 @@ { - "name": "react-arborist", + "name": "@atmnksd/react-arborist", "version": "3.4.0", "license": "MIT", "source": "src/index.ts", @@ -22,10 +22,12 @@ ], "repository": { "type": "git", - "url": "https://github.com/brimdata/react-arborist.git" + "url": "git+https://github.com/atmnksd/react-arborist.git" }, "homepage": "https://react-arborist.netlify.app", - "bugs": "https://github.com/brimdata/react-arborist/issues", + "bugs": { + "url": "https://github.com/atmnksd/react-arborist/issues" + }, "keywords": [ "react", "arborist", @@ -58,5 +60,7 @@ "rimraf": "^5.0.5", "ts-jest": "^29.1.1", "typescript": "^5.3.3" - } + }, + "author": "", + "description": "" } From 9815e130626f56e058d3f5b4c5bd8a73c44e3881 Mon Sep 17 00:00:00 2001 From: Atmaram Naik Date: Wed, 13 Nov 2024 00:25:06 +0530 Subject: [PATCH 3/3] Revert "Initial commit" This reverts commit 33cd4d4ce86b5ace498633fd2b184dbf8bd61269. --- modules/react-arborist/package.json | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/modules/react-arborist/package.json b/modules/react-arborist/package.json index 6b2627d8..f60dde68 100644 --- a/modules/react-arborist/package.json +++ b/modules/react-arborist/package.json @@ -1,5 +1,5 @@ { - "name": "@atmnksd/react-arborist", + "name": "react-arborist", "version": "3.4.0", "license": "MIT", "source": "src/index.ts", @@ -22,12 +22,10 @@ ], "repository": { "type": "git", - "url": "git+https://github.com/atmnksd/react-arborist.git" + "url": "https://github.com/brimdata/react-arborist.git" }, "homepage": "https://react-arborist.netlify.app", - "bugs": { - "url": "https://github.com/atmnksd/react-arborist/issues" - }, + "bugs": "https://github.com/brimdata/react-arborist/issues", "keywords": [ "react", "arborist", @@ -60,7 +58,5 @@ "rimraf": "^5.0.5", "ts-jest": "^29.1.1", "typescript": "^5.3.3" - }, - "author": "", - "description": "" + } }