Merge branch 'master' of https://git.nejcraft.cz/Nejcraft/nej-react-utils

Form/Core/FileField.js

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { useApiClient, useCompany } from "@utils/NejManager/NejProvider";
 import axios from "axios";
 import { useField } from "formik";
-import NejDropzone from "@components/File/NejDropzone";
+import NejDropzone from "./NejDropzone";
 
 /**
  * Renders a file input field with dropzone functionality.

Form/Core/NejDropzone.js

@@ -0,0 +1,57 @@
+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>
+  );
+}