import { useCallback, useEffect, useMemo } from "react"; import type { DragEvent } from "react"; import { createImageDragTransferManager, type CreateImageDragTransferManagerOptions, type ImageDragTransferManager } from "@/utils/imageDragTransfer"; export type ImageDragStartOptions = { previewUrl?: unknown; preferDomDragImage?: boolean; }; export type ImageDragTransferHandle = { startDrag: (evt: DragEvent, dragUrl: unknown, options?: ImageDragStartOptions) => boolean; warmupPreviewUrls: (urls: unknown[]) => void; ensurePreviewImage: ImageDragTransferManager["ensurePreviewImage"]; getDragProps: ( dragUrl: unknown, options?: ImageDragStartOptions, ) => { draggable: true; onDragStart: (evt: DragEvent) => boolean; }; }; /** 创建并管理图片拖拽传输器:自动 dispose,提供 startDrag / getDragProps 等。 */ export function useImageDragTransfer(options?: CreateImageDragTransferManagerOptions): ImageDragTransferHandle { const manager = useMemo(() => createImageDragTransferManager(options), []); useEffect(() => () => manager.dispose(), [manager]); const startDrag = useCallback( (evt: DragEvent, dragUrl: unknown, dragOptions?: ImageDragStartOptions) => manager.startImageDrag({ evt, dragUrl, previewUrl: dragOptions?.previewUrl ?? dragUrl, preferDomDragImage: dragOptions?.preferDomDragImage, }), [manager], ); const warmupPreviewUrls = useCallback( (urls: unknown[]) => { manager.warmupPreviewImages(urls); }, [manager], ); const ensurePreviewImage = useCallback((rawUrl?: unknown) => manager.ensurePreviewImage(rawUrl), [manager]); const getDragProps = useCallback( (dragUrl: unknown, dragOptions?: ImageDragStartOptions) => ({ draggable: true as const, onDragStart: (evt: DragEvent) => startDrag(evt, dragUrl, dragOptions), }), [startDrag], ); return { startDrag, warmupPreviewUrls, ensurePreviewImage, getDragProps }; } /** 列表变化时预热拖拽预览图。 */ export function useWarmupImageDragUrls(warmupPreviewUrls: (urls: unknown[]) => void, urls: unknown[]) { useEffect(() => { warmupPreviewUrls(urls); }, [warmupPreviewUrls, urls]); }