@modern-kit/react
Version:
1 lines • 3.83 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useDropZone/index.ts"],"sourcesContent":["import { useEventListener } from '../useEventListener';\nimport { usePreservedCallback } from '../usePreservedCallback';\nimport { RefObject, useCallback, useRef, useState } from 'react';\n\n/**\n * @description `드래그 앤 드롭 이벤트`를 처리하여 `파일`을 수신할 수 있는 영역을 생성하는 커스텀 훅입니다.\n *\n * @template T - HTML 엘리먼트 타입을 지정합니다.\n * @param {(files: File[]) => void} onDrop - 파일이 드롭되었을 때 호출되는 콜백 함수입니다.\n * 드롭된 파일들의 배열을 인자로 받습니다.\n *\n * @returns {{\n * ref: RefObject<T>;\n * isDragOver: boolean;\n * }} `ref`와 `isDragOver`를 포함한 객체를 반환합니다.\n * - `ref`: 드롭 영역으로 사용할 대상 요소의 참조입니다.\n * - `isDragOver`: 드래그한 파일이 드롭 영역 위에 있는지 여부를 나타내는 불리언 값입니다.\n *\n * @example\n * ```tsx\n * const { ref, isDragOver } = useDropZone<HTMLDivElement>((files) => {\n * console.log('Dropped files:', files);\n * });\n *\n * <div ref={ref}>\n * DropZone\n * </div>\n * ```\n */\nexport const useDropZone = <T extends HTMLElement>(\n onDrop: (files: File[]) => void\n): {\n ref: RefObject<T>;\n isDragOver: boolean;\n} => {\n const ref = useRef<T>(null);\n const counter = useRef(0);\n const [isDragOver, setIsDragOver] = useState(false);\n\n const preservedDropCallback = usePreservedCallback(onDrop);\n\n const handleDragOver = useCallback((e: DragEvent) => {\n e.preventDefault();\n }, []);\n\n const handleDragEnter = useCallback((e: DragEvent) => {\n e.preventDefault();\n\n counter.current += 1;\n setIsDragOver(true);\n }, []);\n\n const handleDragLeave = useCallback((e: DragEvent) => {\n e.preventDefault();\n\n counter.current -= 1;\n if (counter.current === 0) {\n setIsDragOver(false);\n }\n }, []);\n\n const handleDrop = useCallback(\n (e: DragEvent) => {\n e.preventDefault();\n setIsDragOver(false);\n\n const files = e.dataTransfer?.files;\n preservedDropCallback(Array.from(files || []));\n },\n [preservedDropCallback]\n );\n\n useEventListener(ref, 'dragover', handleDragOver);\n useEventListener(ref, 'dragenter', handleDragEnter);\n useEventListener(ref, 'dragleave', handleDragLeave);\n useEventListener(ref, 'drop', handleDrop);\n\n return { ref, isDragOver };\n};\n"],"names":[],"mappings":";;;;;;AA6BO,MAAM,WAAA,GAAc,CACzB,MAAA,KAIG;AACH,EAAA,MAAM,GAAA,GAAM,OAAU,IAAI,CAAA;AAC1B,EAAA,MAAM,OAAA,GAAU,OAAO,CAAC,CAAA;AACxB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAElD,EAAA,MAAM,qBAAA,GAAwB,qBAAqB,MAAM,CAAA;AAEzD,EAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,CAAC,CAAA,KAAiB;AACnD,IAAA,CAAA,CAAE,cAAA,EAAe;AAAA,EACnB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,CAAC,CAAA,KAAiB;AACpD,IAAA,CAAA,CAAE,cAAA,EAAe;AAEjB,IAAA,OAAA,CAAQ,OAAA,IAAW,CAAA;AACnB,IAAA,aAAA,CAAc,IAAI,CAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,CAAC,CAAA,KAAiB;AACpD,IAAA,CAAA,CAAE,cAAA,EAAe;AAEjB,IAAA,OAAA,CAAQ,OAAA,IAAW,CAAA;AACnB,IAAA,IAAI,OAAA,CAAQ,YAAY,CAAA,EAAG;AACzB,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IACrB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,CAAC,CAAA,KAAiB;AAChB,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,aAAA,CAAc,KAAK,CAAA;AAEnB,MAAA,MAAM,KAAA,GAAQ,EAAE,YAAA,EAAc,KAAA;AAC9B,MAAA,qBAAA,CAAsB,KAAA,CAAM,IAAA,CAAK,KAAA,IAAS,EAAE,CAAC,CAAA;AAAA,IAC/C,CAAA;AAAA,IACA,CAAC,qBAAqB;AAAA,GACxB;AAEA,EAAA,gBAAA,CAAiB,GAAA,EAAK,YAAY,cAAc,CAAA;AAChD,EAAA,gBAAA,CAAiB,GAAA,EAAK,aAAa,eAAe,CAAA;AAClD,EAAA,gBAAA,CAAiB,GAAA,EAAK,aAAa,eAAe,CAAA;AAClD,EAAA,gBAAA,CAAiB,GAAA,EAAK,QAAQ,UAAU,CAAA;AAExC,EAAA,OAAO,EAAE,KAAK,UAAA,EAAW;AAC3B;;;;"}