|
| 1 | +import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'; |
| 2 | +import classNames from 'classnames'; |
| 3 | +import { isFileType } from './utils'; |
| 4 | + |
| 5 | +export type FileType = string; |
| 6 | +export type FileDropListener = (filename: string, buffer: ArrayBuffer) => void; |
| 7 | + |
| 8 | +type FileDropContext = { |
| 9 | + on: (type: FileType, listener: FileDropListener) => void, |
| 10 | + off: (type: FileType, listener: FileDropListener) => void, |
| 11 | +}; |
| 12 | + |
| 13 | +const FileDropContext = createContext({} as FileDropContext); |
| 14 | + |
| 15 | +type Props = { |
| 16 | + className: string, |
| 17 | + children: JSX.Element, |
| 18 | +}; |
| 19 | + |
| 20 | +const FileDropProvider = ({ className, children }: Props) => { |
| 21 | + const [listeners, setListeners] = useState<[FileType, FileDropListener][]>([]); |
| 22 | + const [active, setActive] = useState(false); |
| 23 | + |
| 24 | + const onDragOver = (event: DragEvent) => { |
| 25 | + event.preventDefault(); |
| 26 | + setActive(true); |
| 27 | + }; |
| 28 | + |
| 29 | + const onDragLeave = () => { |
| 30 | + setActive(false); |
| 31 | + }; |
| 32 | + |
| 33 | + const onDrop = useCallback((event: DragEvent) => { |
| 34 | + event.preventDefault(); |
| 35 | + const { dataTransfer } = event; |
| 36 | + |
| 37 | + if (dataTransfer && dataTransfer?.files.length > 0) { |
| 38 | + const file = dataTransfer.files[0]; |
| 39 | + |
| 40 | + file |
| 41 | + .arrayBuffer() |
| 42 | + .then((buffer) => { |
| 43 | + listeners |
| 44 | + .filter(([type]) => file.type ? type === file.type : isFileType(buffer, type)) |
| 45 | + .forEach(([, listerner]) => listerner(file.name, buffer)); |
| 46 | + }); |
| 47 | + } |
| 48 | + |
| 49 | + setActive(false); |
| 50 | + }, [listeners]); |
| 51 | + |
| 52 | + const on = (type: FileType, listener: FileDropListener) => { |
| 53 | + setListeners((listeners) => { |
| 54 | + return [...listeners, [type, listener]]; |
| 55 | + }); |
| 56 | + }; |
| 57 | + |
| 58 | + const off = (type: FileType, listener: FileDropListener) => { |
| 59 | + setListeners((listeners) => { |
| 60 | + return listeners.filter(([key, value]) => key !== type && value !== listener); |
| 61 | + }); |
| 62 | + }; |
| 63 | + |
| 64 | + useEffect(() => { |
| 65 | + window.addEventListener('dragover', onDragOver); |
| 66 | + window.addEventListener('dragleave', onDragLeave); |
| 67 | + window.addEventListener('drop', onDrop); |
| 68 | + |
| 69 | + return () => { |
| 70 | + window.removeEventListener('dragover', onDragOver); |
| 71 | + window.removeEventListener('dragleave', onDragLeave); |
| 72 | + window.removeEventListener('drop', onDrop); |
| 73 | + }; |
| 74 | + }, [onDrop]); |
| 75 | + |
| 76 | + return ( |
| 77 | + <FileDropContext.Provider value={{ on, off }}> |
| 78 | + { children } |
| 79 | + <div className={classNames(className, { 'active': active })} /> |
| 80 | + </FileDropContext.Provider> |
| 81 | + ); |
| 82 | +}; |
| 83 | + |
| 84 | +const useFileDrop = () => { |
| 85 | + return useContext(FileDropContext); |
| 86 | +}; |
| 87 | + |
| 88 | +export { |
| 89 | + FileDropProvider, |
| 90 | + useFileDrop, |
| 91 | +}; |
0 commit comments