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;