Accept Drag Data From Other Places

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;
 }

modules/react-arborist/src/components/row-container.tsx

@@ -35,8 +35,8 @@ export const RowContainer = React.memo(function RowContainer<T>({
   const node = useFreshNode<T>(index);
 
   const el = useRef<HTMLDivElement | null>(null);
-  const dragRef = useDragHook<T>(node);
-  const dropRef = useDropHook(el, node);
+  const dragRef = useDragHook<T>(node,tree.props.dropType);
+  const dropRef = useDropHook(el, node,tree.props.accept);
   const innerRef = useCallback(
     (n: any) => {
       el.current = n;

modules/react-arborist/src/components/tree.tsx

@@ -15,7 +15,7 @@ function TreeComponent<T>(
   const treeProps = useValidatedProps(props);
   return (
     <TreeProvider treeProps={treeProps} imperativeHandle={ref}>
-      <OuterDrop>
+      <OuterDrop accept={props.accept}>
         <TreeContainer />
       </OuterDrop>
       <DragPreviewContainer />

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<T>(node: NodeApi<T>): ConnectDragSource {
+export function useDragHook<T>(node: NodeApi<T>,type?:(node:T)=>string): ConnectDragSource {
   const tree = useTreeApi();
   const ids = tree.selectedIds;
   const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
     () => ({
       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();

modules/react-arborist/src/dnd/drop-hook.ts

@@ -13,12 +13,13 @@ export type DropResult = {
 
 export function useDropHook(
   el: RefObject<HTMLElement | null>,
-  node: NodeApi<any>
+  node: NodeApi<any>,
+  accept?:string[]
 ): ConnectDropTarget {
   const tree = useTreeApi();
   const [_, dropRef] = useDrop<DragItem, DropResult | null, void>(
     () => ({
-      accept: "NODE",
+      accept: accept?accept:"NODE",
       canDrop: () => tree.canDrop(),
       hover: (_item, m) => {
         const offset = m.getClientOffset();

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<DragItem, DropResult | null, { isOver: boolean }>(
     () => ({
-      accept: "NODE",
+      accept: accept?accept:"NODE",
       canDrop: (_item, m) => {
         if (!m.isOver({ shallow: true })) return false;
         return tree.canDrop();

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<T> {
   /* Data Options */
   data?: readonly T[];
   initialData?: readonly T[];
-
+  accept?: string[];
+  dropType?:(node:T)=>string
   /* Data Handlers */
   onCreate?: handlers.CreateHandler<T>;
   onMove?: handlers.MoveHandler<T>;