58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
import tw from "twin.macro";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { useMemo } from "react";
|
|
import { useApiClient, useCompany } from "@utils/NejManager/NejProvider";
|
|
import axios from "axios";
|
|
|
|
/**
|
|
* NejDropzone component for handling file uploads.
|
|
* @param {Object} props - Component props.
|
|
* @param {<T extends File>(files: T[], event: DropEvent) => void} props.onDrop - Callback function triggered when files are dropped.
|
|
* @param {string[]} props.accept - Array of supported file extensions.
|
|
* @param {Array<File>} props.value - The files to be uploaded.
|
|
* @param {boolean} props.single - Whether to allow only one file to be uploaded.
|
|
* @param {<T extends File>(file: T) => FileError | FileError[] | null} props.validator - The validator function to be used.
|
|
* @param {string} props.text - The text to be displayed in the dropzone.
|
|
* @returns {JSX.Element} - NejDropzone component.
|
|
*/
|
|
export default function NejDropzone({ value, accept, onDrop, validator, single, text, css, children, ...props }) {
|
|
|
|
const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone({
|
|
//validator: validator,
|
|
onDropAccepted: onDrop,
|
|
accept: accept,
|
|
validator: validator,
|
|
maxFiles: single ? 1 : undefined,
|
|
});
|
|
|
|
const style = useMemo(
|
|
() => ({
|
|
...tw`flex flex-col items-center min-h-32 justify-center text-primary p-2 border rounded-xl border-2 border-dashed bg-primary`,
|
|
...(isFocused && tw`bg-secondary`),
|
|
...(isDragAccept && tw`border-accent`),
|
|
...(isDragReject && tw`border-red-600`),
|
|
css
|
|
}),
|
|
[isFocused, isDragAccept, isDragReject, css]
|
|
);
|
|
|
|
let fil = value == null ? null : single ? [value] : value;
|
|
|
|
return (
|
|
<div {...getRootProps({ style })} {...props}>
|
|
<input {...getInputProps()} />
|
|
{children ?? (fil?.length > 0 ? (
|
|
fil.map((file) => (
|
|
<div key={file.name}>
|
|
<p>{file.name}</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<>
|
|
<p>{text ?? "Drag 'n' drop some files here, or click to select files"}</p>
|
|
</>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|