@addev-be/ui 3.3.0 → 3.3.3

package/src/components/common/TreeView/TreeContext.tsx

@@ -1,379 +1,379 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import React, {
-  ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-} from 'react';
-
-type DropPosition = {
-  nodeId: string;
-  position: 'before' | 'after' | 'inside';
-} | null;
-
-export type DragDropType = 'none' | true | 'level';
-
-interface TreeContextValue {
-  idPropertyName?: string;
-  childrenPropertyName?: string;
-  displayPropertyName?: string;
-  ItemComponent?: React.FC<{ item: any }>;
-  expandedIds: Set<string>;
-  toggleExpand: (id: string) => void;
-  isExpanded: (id: string) => boolean;
-  draggedNodeId: string | null;
-  draggedNodeLevel: number | null;
-  dropPosition: DropPosition;
-  dragDropType: DragDropType;
-  handleDragStart: (
-    e: React.DragEvent,
-    nodeId: string,
-    content: string,
-    level: number
-  ) => void;
-  handleDragOver: (
-    e: React.DragEvent,
-    nodeId: string,
-    level: number,
-    isLastChild: boolean,
-    parentId: string | null,
-    hasChildren: boolean
-  ) => void;
-  handleDragLeave: (e: React.DragEvent) => void;
-  handleDrop: (e: React.DragEvent) => void;
-  handleDragEnd: () => void;
-  handleDrag: (e: React.DragEvent) => void;
-}
-
-const TreeContext = createContext<TreeContextValue | null>(null);
-
-export function useTreeContext() {
-  const context = useContext(TreeContext);
-  if (!context) {
-    throw new Error('TreeNode must be used within TreeView');
-  }
-  return context;
-}
-
-interface TreeProviderProps {
-  children: ReactNode;
-  treeId: string;
-  items: any[];
-  idPropertyName?: string;
-  childrenPropertyName?: string;
-  displayPropertyName?: string;
-  ItemComponent?: React.FC<{ item: any }>;
-  defaultExpanded?: boolean;
-  dragDropType?: DragDropType;
-  onItemMove?: (
-    draggedId: string,
-    targetId: string,
-    position: 'before' | 'after' | 'inside'
-  ) => void;
-  onItemsChanged?: (items: any[]) => void;
-  dragGhost: { x: number; y: number; content: string } | null;
-  setDragGhost: (
-    ghost: { x: number; y: number; content: string } | null
-  ) => void;
-}
-
-export function TreeProvider({
-  children,
-  treeId,
-  items,
-  idPropertyName,
-  childrenPropertyName,
-  displayPropertyName,
-  ItemComponent,
-  dragDropType = 'none',
-  onItemMove,
-  onItemsChanged,
-  dragGhost,
-  setDragGhost,
-}: TreeProviderProps) {
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set());
-  const [draggedNodeId, setDraggedNodeId] = useState<string | null>(null);
-  const [draggedNodeLevel, setDraggedNodeLevel] = useState<number | null>(null);
-  const [dropPosition, setDropPosition] = useState<DropPosition>(null);
-
-  const defaultItemMove = useCallback(
-    (
-      draggedId: string,
-      targetId: string,
-      position: 'before' | 'after' | 'inside'
-    ) => {
-      if (!onItemsChanged) return;
-
-      const clonedItems = structuredClone(items);
-
-      const getItemId = (item: any): string => {
-        if (idPropertyName && item[idPropertyName]) {
-          return String(item[idPropertyName]);
-        }
-        return String(item);
-      };
-
-      const findNodeAndParent = (
-        itemsArray: any[],
-        targetId: string
-      ): { node: any; parent: any[] | null; index: number } | null => {
-        for (let i = 0; i < itemsArray.length; i++) {
-          const item = itemsArray[i];
-          if (getItemId(item) === targetId) {
-            return { node: item, parent: itemsArray, index: i };
-          }
-
-          if (childrenPropertyName && item[childrenPropertyName]) {
-            const found = findNodeAndParent(
-              item[childrenPropertyName],
-              targetId
-            );
-            if (found) return found;
-          }
-        }
-
-        return null;
-      };
-
-      const draggedResult = findNodeAndParent(clonedItems, draggedId);
-      if (!draggedResult || !draggedResult.parent) return;
-
-      const {
-        node: draggedNode,
-        parent: draggedParent,
-        index: draggedIndex,
-      } = draggedResult;
-      draggedParent.splice(draggedIndex, 1);
-
-      const targetResult = findNodeAndParent(clonedItems, targetId);
-      if (!targetResult) return;
-
-      const {
-        node: targetNode,
-        parent: targetParent,
-        index: targetIndex,
-      } = targetResult;
-
-      if (position === 'inside') {
-        if (childrenPropertyName) {
-          if (!targetNode[childrenPropertyName]) {
-            targetNode[childrenPropertyName] = [];
-          }
-          targetNode[childrenPropertyName].push(draggedNode);
-        }
-      } else {
-        if (!targetParent) return;
-
-        const insertIndex =
-          position === 'before' ? targetIndex : targetIndex + 1;
-        targetParent.splice(insertIndex, 0, draggedNode);
-      }
-
-      onItemsChanged(clonedItems);
-    },
-    [items, idPropertyName, childrenPropertyName, onItemsChanged]
-  );
-
-  const toggleExpand = useCallback((id: string) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  const isExpanded = useCallback(
-    (id: string) => {
-      return expandedIds.has(id);
-    },
-    [expandedIds]
-  );
-
-  const handleDragStart = useCallback(
-    (e: React.DragEvent, nodeId: string, content: string, level: number) => {
-      if (dragDropType === 'none') {
-        e.preventDefault();
-        return;
-      }
-
-      setDraggedNodeId(nodeId);
-      setDraggedNodeLevel(level);
-
-      e.dataTransfer.setData('text/plain', treeId);
-      e.dataTransfer.setData('application/x-tree-id', treeId);
-
-      const img = new Image();
-      img.src =
-        'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setDragImage(img, 0, 0);
-
-      setDragGhost({ x: e.clientX, y: e.clientY, content });
-    },
-    [treeId, setDragGhost, dragDropType]
-  );
-
-  const handleDragOver = useCallback(
-    (
-      e: React.DragEvent,
-      nodeId: string,
-      level: number,
-      isLastChild: boolean,
-      parentId: string | null,
-      hasChildren: boolean
-    ) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const draggedFromTreeId = e.dataTransfer.types.includes(
-        'application/x-tree-id'
-      )
-        ? e.dataTransfer.getData('application/x-tree-id') ||
-          e.dataTransfer.getData('text/plain')
-        : null;
-
-      if (draggedFromTreeId && draggedFromTreeId !== treeId) {
-        setDropPosition(null);
-        return;
-      }
-
-      if (draggedNodeId === nodeId) {
-        setDropPosition(null);
-        return;
-      }
-
-      if (draggedNodeId && nodeId.startsWith(draggedNodeId + '-')) {
-        setDropPosition(null);
-        return;
-      }
-
-      if (
-        dragDropType === 'level' &&
-        draggedNodeLevel !== null &&
-        draggedNodeLevel !== level
-      ) {
-        setDropPosition(null);
-        return;
-      }
-
-      const rect = e.currentTarget.getBoundingClientRect();
-      const relativeY = e.clientY - rect.top;
-      const height = rect.height;
-
-      let newPosition: 'before' | 'after' | 'inside';
-
-      if (hasChildren) {
-        const threshold = height * 0.4;
-        if (relativeY < threshold) {
-          newPosition = 'before';
-        } else {
-          newPosition = 'inside';
-        }
-      } else {
-        if (relativeY < height / 2) {
-          newPosition = 'before';
-        } else {
-          newPosition = 'after';
-        }
-      }
-
-      if (dragDropType === 'level' && newPosition === 'inside') {
-        setDropPosition(null);
-        return;
-      }
-
-      setDropPosition({ nodeId, position: newPosition });
-    },
-    [treeId, draggedNodeId, dragDropType, draggedNodeLevel]
-  );
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    const relatedTarget = e.relatedTarget as HTMLElement;
-    if (!relatedTarget || !e.currentTarget.contains(relatedTarget)) {
-      setDropPosition(null);
-    }
-  }, []);
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const draggedFromTreeId =
-        e.dataTransfer.getData('application/x-tree-id') ||
-        e.dataTransfer.getData('text/plain');
-
-      if (draggedFromTreeId !== treeId) {
-        setDraggedNodeId(null);
-        setDropPosition(null);
-        setDragGhost(null);
-        return;
-      }
-
-      if (draggedNodeId && dropPosition) {
-        const moveHandler = onItemMove || defaultItemMove;
-        moveHandler(draggedNodeId, dropPosition.nodeId, dropPosition.position);
-      }
-
-      setDraggedNodeId(null);
-      setDropPosition(null);
-      setDragGhost(null);
-    },
-    [
-      treeId,
-      draggedNodeId,
-      dropPosition,
-      onItemMove,
-      defaultItemMove,
-      setDragGhost,
-    ]
-  );
-
-  const handleDragEnd = useCallback(() => {
-    setDraggedNodeId(null);
-    setDraggedNodeLevel(null);
-    setDropPosition(null);
-    setDragGhost(null);
-  }, [setDragGhost]);
-
-  const handleDrag = useCallback(
-    (e: React.DragEvent) => {
-      if (e.clientX === 0 && e.clientY === 0) return;
-      if (dragGhost) {
-        setDragGhost({ ...dragGhost, x: e.clientX, y: e.clientY });
-      }
-    },
-    [dragGhost, setDragGhost]
-  );
-
-  const contextValue: TreeContextValue = {
-    idPropertyName,
-    childrenPropertyName,
-    displayPropertyName,
-    ItemComponent,
-    expandedIds,
-    toggleExpand,
-    isExpanded,
-    draggedNodeId,
-    draggedNodeLevel,
-    dropPosition,
-    dragDropType,
-    handleDragStart,
-    handleDragOver,
-    handleDragLeave,
-    handleDrop,
-    handleDragEnd,
-    handleDrag,
-  };
-
-  return (
-    <TreeContext.Provider value={contextValue}>{children}</TreeContext.Provider>
-  );
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import React, {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
+
+type DropPosition = {
+  nodeId: string;
+  position: 'before' | 'after' | 'inside';
+} | null;
+
+export type DragDropType = 'none' | true | 'level';
+
+interface TreeContextValue {
+  idPropertyName?: string;
+  childrenPropertyName?: string;
+  displayPropertyName?: string;
+  ItemComponent?: React.FC<{ item: any }>;
+  expandedIds: Set<string>;
+  toggleExpand: (id: string) => void;
+  isExpanded: (id: string) => boolean;
+  draggedNodeId: string | null;
+  draggedNodeLevel: number | null;
+  dropPosition: DropPosition;
+  dragDropType: DragDropType;
+  handleDragStart: (
+    e: React.DragEvent,
+    nodeId: string,
+    content: string,
+    level: number
+  ) => void;
+  handleDragOver: (
+    e: React.DragEvent,
+    nodeId: string,
+    level: number,
+    isLastChild: boolean,
+    parentId: string | null,
+    hasChildren: boolean
+  ) => void;
+  handleDragLeave: (e: React.DragEvent) => void;
+  handleDrop: (e: React.DragEvent) => void;
+  handleDragEnd: () => void;
+  handleDrag: (e: React.DragEvent) => void;
+}
+
+const TreeContext = createContext<TreeContextValue | null>(null);
+
+export function useTreeContext() {
+  const context = useContext(TreeContext);
+  if (!context) {
+    throw new Error('TreeNode must be used within TreeView');
+  }
+  return context;
+}
+
+interface TreeProviderProps {
+  children: ReactNode;
+  treeId: string;
+  items: any[];
+  idPropertyName?: string;
+  childrenPropertyName?: string;
+  displayPropertyName?: string;
+  ItemComponent?: React.FC<{ item: any }>;
+  defaultExpanded?: boolean;
+  dragDropType?: DragDropType;
+  onItemMove?: (
+    draggedId: string,
+    targetId: string,
+    position: 'before' | 'after' | 'inside'
+  ) => void;
+  onItemsChanged?: (items: any[]) => void;
+  dragGhost: { x: number; y: number; content: string } | null;
+  setDragGhost: (
+    ghost: { x: number; y: number; content: string } | null
+  ) => void;
+}
+
+export function TreeProvider({
+  children,
+  treeId,
+  items,
+  idPropertyName,
+  childrenPropertyName,
+  displayPropertyName,
+  ItemComponent,
+  dragDropType = 'none',
+  onItemMove,
+  onItemsChanged,
+  dragGhost,
+  setDragGhost,
+}: TreeProviderProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set());
+  const [draggedNodeId, setDraggedNodeId] = useState<string | null>(null);
+  const [draggedNodeLevel, setDraggedNodeLevel] = useState<number | null>(null);
+  const [dropPosition, setDropPosition] = useState<DropPosition>(null);
+
+  const defaultItemMove = useCallback(
+    (
+      draggedId: string,
+      targetId: string,
+      position: 'before' | 'after' | 'inside'
+    ) => {
+      if (!onItemsChanged) return;
+
+      const clonedItems = structuredClone(items);
+
+      const getItemId = (item: any): string => {
+        if (idPropertyName && item[idPropertyName]) {
+          return String(item[idPropertyName]);
+        }
+        return String(item);
+      };
+
+      const findNodeAndParent = (
+        itemsArray: any[],
+        targetId: string
+      ): { node: any; parent: any[] | null; index: number } | null => {
+        for (let i = 0; i < itemsArray.length; i++) {
+          const item = itemsArray[i];
+          if (getItemId(item) === targetId) {
+            return { node: item, parent: itemsArray, index: i };
+          }
+
+          if (childrenPropertyName && item[childrenPropertyName]) {
+            const found = findNodeAndParent(
+              item[childrenPropertyName],
+              targetId
+            );
+            if (found) return found;
+          }
+        }
+
+        return null;
+      };
+
+      const draggedResult = findNodeAndParent(clonedItems, draggedId);
+      if (!draggedResult || !draggedResult.parent) return;
+
+      const {
+        node: draggedNode,
+        parent: draggedParent,
+        index: draggedIndex,
+      } = draggedResult;
+      draggedParent.splice(draggedIndex, 1);
+
+      const targetResult = findNodeAndParent(clonedItems, targetId);
+      if (!targetResult) return;
+
+      const {
+        node: targetNode,
+        parent: targetParent,
+        index: targetIndex,
+      } = targetResult;
+
+      if (position === 'inside') {
+        if (childrenPropertyName) {
+          if (!targetNode[childrenPropertyName]) {
+            targetNode[childrenPropertyName] = [];
+          }
+          targetNode[childrenPropertyName].push(draggedNode);
+        }
+      } else {
+        if (!targetParent) return;
+
+        const insertIndex =
+          position === 'before' ? targetIndex : targetIndex + 1;
+        targetParent.splice(insertIndex, 0, draggedNode);
+      }
+
+      onItemsChanged(clonedItems);
+    },
+    [items, idPropertyName, childrenPropertyName, onItemsChanged]
+  );
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const isExpanded = useCallback(
+    (id: string) => {
+      return expandedIds.has(id);
+    },
+    [expandedIds]
+  );
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, nodeId: string, content: string, level: number) => {
+      if (dragDropType === 'none') {
+        e.preventDefault();
+        return;
+      }
+
+      setDraggedNodeId(nodeId);
+      setDraggedNodeLevel(level);
+
+      e.dataTransfer.setData('text/plain', treeId);
+      e.dataTransfer.setData('application/x-tree-id', treeId);
+
+      const img = new Image();
+      img.src =
+        'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setDragImage(img, 0, 0);
+
+      setDragGhost({ x: e.clientX, y: e.clientY, content });
+    },
+    [treeId, setDragGhost, dragDropType]
+  );
+
+  const handleDragOver = useCallback(
+    (
+      e: React.DragEvent,
+      nodeId: string,
+      level: number,
+      isLastChild: boolean,
+      parentId: string | null,
+      hasChildren: boolean
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const draggedFromTreeId = e.dataTransfer.types.includes(
+        'application/x-tree-id'
+      )
+        ? e.dataTransfer.getData('application/x-tree-id') ||
+          e.dataTransfer.getData('text/plain')
+        : null;
+
+      if (draggedFromTreeId && draggedFromTreeId !== treeId) {
+        setDropPosition(null);
+        return;
+      }
+
+      if (draggedNodeId === nodeId) {
+        setDropPosition(null);
+        return;
+      }
+
+      if (draggedNodeId && nodeId.startsWith(draggedNodeId + '-')) {
+        setDropPosition(null);
+        return;
+      }
+
+      if (
+        dragDropType === 'level' &&
+        draggedNodeLevel !== null &&
+        draggedNodeLevel !== level
+      ) {
+        setDropPosition(null);
+        return;
+      }
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const relativeY = e.clientY - rect.top;
+      const height = rect.height;
+
+      let newPosition: 'before' | 'after' | 'inside';
+
+      if (hasChildren) {
+        const threshold = height * 0.4;
+        if (relativeY < threshold) {
+          newPosition = 'before';
+        } else {
+          newPosition = 'inside';
+        }
+      } else {
+        if (relativeY < height / 2) {
+          newPosition = 'before';
+        } else {
+          newPosition = 'after';
+        }
+      }
+
+      if (dragDropType === 'level' && newPosition === 'inside') {
+        setDropPosition(null);
+        return;
+      }
+
+      setDropPosition({ nodeId, position: newPosition });
+    },
+    [treeId, draggedNodeId, dragDropType, draggedNodeLevel]
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    if (!relatedTarget || !e.currentTarget.contains(relatedTarget)) {
+      setDropPosition(null);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const draggedFromTreeId =
+        e.dataTransfer.getData('application/x-tree-id') ||
+        e.dataTransfer.getData('text/plain');
+
+      if (draggedFromTreeId !== treeId) {
+        setDraggedNodeId(null);
+        setDropPosition(null);
+        setDragGhost(null);
+        return;
+      }
+
+      if (draggedNodeId && dropPosition) {
+        const moveHandler = onItemMove || defaultItemMove;
+        moveHandler(draggedNodeId, dropPosition.nodeId, dropPosition.position);
+      }
+
+      setDraggedNodeId(null);
+      setDropPosition(null);
+      setDragGhost(null);
+    },
+    [
+      treeId,
+      draggedNodeId,
+      dropPosition,
+      onItemMove,
+      defaultItemMove,
+      setDragGhost,
+    ]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedNodeId(null);
+    setDraggedNodeLevel(null);
+    setDropPosition(null);
+    setDragGhost(null);
+  }, [setDragGhost]);
+
+  const handleDrag = useCallback(
+    (e: React.DragEvent) => {
+      if (e.clientX === 0 && e.clientY === 0) return;
+      if (dragGhost) {
+        setDragGhost({ ...dragGhost, x: e.clientX, y: e.clientY });
+      }
+    },
+    [dragGhost, setDragGhost]
+  );
+
+  const contextValue: TreeContextValue = {
+    idPropertyName,
+    childrenPropertyName,
+    displayPropertyName,
+    ItemComponent,
+    expandedIds,
+    toggleExpand,
+    isExpanded,
+    draggedNodeId,
+    draggedNodeLevel,
+    dropPosition,
+    dragDropType,
+    handleDragStart,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd,
+    handleDrag,
+  };
+
+  return (
+    <TreeContext.Provider value={contextValue}>{children}</TreeContext.Provider>
+  );
+}