@addsign/moje-agenda-shared-lib 2.0.62 → 2.0.63

package/lib/components/form/FileInput.tsx

@@ -1,222 +1,211 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { useDropzone } from "react-dropzone";
-import { handleErrors, useFederationContext } from "../../main";
-import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
-import { AxiosError } from "axios";
-
-export interface FileData {
-  id: number;
-  mimeType: string;
-  size: number;
-  filename: string;
-  createdByEmpId: string;
-  created: string;
-}
-
-interface FileInputProps {
-  name: string;
-  label?: string;
-  initialFile?: FileData;
-  onFileChanged: (e: any) => void;
-  required?: boolean;
-  description?: string;
-  disabled?: boolean;
-  errors?: { [key: string]: { message: string } };
-  attachmentName?: string;
-  attachmentType?: string;
-}
-
-const MAX_FILE_SIZE = 1024 * 1024; // 1MB
-
-const FileInput: React.FC<FileInputProps> = ({
-  initialFile,
-  onFileChanged,
-  label,
-  name,
-  required,
-  description,
-  disabled,
-  errors = {},
-  attachmentName,
-  attachmentType,
-}) => {
-  const [fileData, setFileData] = useState<FileData | null>(
-    initialFile || null
-  );
-  const [isFocused, setIsFocused] = useState(false);
-
-  const federationContext = useFederationContext();
-  useEffect(() => {
-    if (initialFile) {
-      setFileData(initialFile);
-    }
-  }, [initialFile]);
-
-  const onDrop = useCallback(
-    async (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        const file = acceptedFiles[0];
-
-        if (file.size > MAX_FILE_SIZE) {
-          // Handle the case when the file size is exceeded
-          federationContext.emitter.emit("message", {
-            title: "Velikost souboru byla překročena",
-            message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,
-            classes: "bg-danger ",
-            timeout: 0,
-            type: "error",
-          });
-          return;
-        }
-
-        const formData = new FormData();
-
-        // Add the JSON data object
-        const dataObject = {
-          ...(attachmentName && { attachmentName }),
-          ...(attachmentType && { attachmentType }),
-        };
-
-        formData.append(
-          "data",
-          new Blob([JSON.stringify(dataObject)], { type: "application/json" })
-        );
-        formData.append("file", file);
-
-        try {
-          const response = await federationContext.apiClient.post<FileData>(
-            "/files/upload",
-            formData,
-            {
-              headers: {
-                "Content-Type": "multipart/form-data",
-              },
-            }
-          );
-          setFileData(response.data);
-          onFileChanged({
-            target: { name, value: response.data.id.toString() },
-          });
-          setIsFocused(false);
-        } catch (error) {
-          handleErrors(error as AxiosError, federationContext.emitter);
-          console.error("There was an error!", error);
-        }
-      }
-    },
-    [
-      federationContext.apiClient,
-      federationContext.emitter,
-      onFileChanged,
-      name,
-      attachmentName,
-      attachmentType,
-    ]
-  );
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    disabled,
-    multiple: false,
-  });
-
-  const handleRemove = () => {
-    setFileData(null);
-    onFileChanged({ target: { name, value: null } });
-  };
-
-  return (
-    <div className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary">
-      <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
-        {label && (
-          <label
-            className="text-slate-700 text-sm leading-tight font-medium"
-            htmlFor={name}
-          >
-            {label} {required ? "*" : ""}
-          </label>
-        )}
-        <div
-          className={
-            `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +
-            ` ${
-              isFocused && !errors[name]?.message
-                ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300"
-                : ""
-            }` +
-            ` ${
-              isFocused && errors[name]?.message
-                ? "outline-4 outline-red-200 outline-offset-0 border-none"
-                : ""
-            } ` +
-            ` ${!isFocused && errors[name]?.message ? "border-red-200" : ""} ` +
-            ` ${disabled ? "bg-gray-100" : "bg-transparent"}`
-          }
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-        >
-          <div className="flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full ">
-            {!fileData ? (
-              <div
-                {...getRootProps()}
-                className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${
-                  isDragActive
-                    ? "border-indigo-300 bg-indigo-50"
-                    : "border-gray-300"
-                }`}
-              >
-                <input {...getInputProps()} id={name} />
-                <p className="text-gray-500">
-                  {isDragActive
-                    ? "Sem přetáhněte soubor"
-                    : "Klikněte pro nahrání, nebo nahrajte přetažením souboru"}
-                </p>
-              </div>
-            ) : (
-              <div className="w-full flex items-center justify-between">
-                <div className=" flex">
-                  <MdInsertDriveFile style={{ fontSize: "2rem" }} />
-                  <a
-                    href={`/api/files/download/${fileData.id}`}
-                    className="pl-2 text-left underline text-primary"
-                    target="_blank"
-                  >
-                    {fileData.filename}
-                  </a>
-                </div>
-                {!disabled && (
-                  <div
-                    onClick={handleRemove}
-                    className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
-                  >
-                    <MdDeleteOutline
-                      style={{ fontSize: "1.5rem", margin: "15px" }}
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      {description && (
-        <div
-          className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
-          id={name + ":description"}
-        >
-          {description}
-        </div>
-      )}
-      {errors[name] && (
-        <div
-          className="HintText self-stretch text-red-600 text-sm font-normal leading-tight"
-          id={name + ":error"}
-        >
-          {errors[name]?.message}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default FileInput;
+import React, { useState, useEffect, useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import { handleErrors, useFederationContext } from "../../main";
+import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
+import { AxiosError } from "axios";
+import { cn } from "../../utils/utils";
+
+export interface FileData {
+  id: number;
+  mimeType: string;
+  size: number;
+  filename: string;
+  createdByEmpId: string;
+  created: string;
+}
+
+export interface FileInputProps {
+  name: string;
+  label?: string;
+  initialFile?: FileData;
+  onFileChanged: (e: any) => void;
+  required?: boolean;
+  description?: string;
+  disabled?: boolean;
+  attachmentName?: string;
+  attachmentType?: string;
+  hasError?: boolean;
+}
+
+const MAX_FILE_SIZE = 1024 * 1024; // 1MB
+
+const FileInput: React.FC<FileInputProps> = ({
+  initialFile,
+  onFileChanged,
+  label,
+  name,
+  required,
+  description,
+  disabled,
+  attachmentName,
+  attachmentType,
+  hasError,
+}) => {
+  const [fileData, setFileData] = useState<FileData | null>(
+    initialFile || null
+  );
+  const [isFocused, setIsFocused] = useState(false);
+
+  const federationContext = useFederationContext();
+  useEffect(() => {
+    if (initialFile) {
+      setFileData(initialFile);
+    }
+  }, [initialFile]);
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        const file = acceptedFiles[0];
+
+        if (file.size > MAX_FILE_SIZE) {
+          // Handle the case when the file size is exceeded
+          federationContext.emitter.emit("message", {
+            title: "Velikost souboru byla překročena",
+            message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,
+            classes: "bg-danger ",
+            timeout: 0,
+            type: "error",
+          });
+          return;
+        }
+
+        const formData = new FormData();
+
+        // Add the JSON data object
+        const dataObject = {
+          ...(attachmentName && { attachmentName }),
+          ...(attachmentType && { attachmentType }),
+        };
+
+        formData.append(
+          "data",
+          new Blob([JSON.stringify(dataObject)], { type: "application/json" })
+        );
+        formData.append("file", file);
+
+        try {
+          const response = await federationContext.apiClient.post<FileData>(
+            "/files/upload",
+            formData,
+            {
+              headers: {
+                "Content-Type": "multipart/form-data",
+              },
+            }
+          );
+          setFileData(response.data);
+          onFileChanged({
+            target: { name, value: response.data.id.toString() },
+          });
+          setIsFocused(false);
+        } catch (error) {
+          handleErrors(error as AxiosError, federationContext.emitter);
+          console.error("There was an error!", error);
+        }
+      }
+    },
+    [
+      federationContext.apiClient,
+      federationContext.emitter,
+      onFileChanged,
+      name,
+      attachmentName,
+      attachmentType,
+    ]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled,
+    multiple: false,
+  });
+
+  const handleRemove = () => {
+    setFileData(null);
+    onFileChanged({ target: { name, value: null } });
+  };
+
+  return (
+    <div className="w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary">
+      <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
+        {label && (
+          <label
+            className="text-slate-700 text-sm leading-tight font-medium"
+            htmlFor={name}
+          >
+            {label} {required ? "*" : ""}
+          </label>
+        )}
+        <div
+          className={cn(
+            `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border`,
+            isFocused &&
+              !hasError &&
+              "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300",
+
+            hasError &&
+              "outline-4 outline-red-200 outline-offset-0 border-none",
+            !isFocused && hasError && "border-red-200 ",
+            disabled ? "bg-gray-100" : "bg-transparent"
+          )}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        >
+          <div className="flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full ">
+            {!fileData ? (
+              <div
+                {...getRootProps()}
+                className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${
+                  isDragActive
+                    ? "border-indigo-300 bg-indigo-50"
+                    : "border-gray-300"
+                }`}
+              >
+                <input {...getInputProps()} id={name} />
+                <p className="text-gray-500">
+                  {isDragActive
+                    ? "Sem přetáhněte soubor"
+                    : "Klikněte pro nahrání, nebo nahrajte přetažením souboru"}
+                </p>
+              </div>
+            ) : (
+              <div className="w-full flex items-center justify-between">
+                <div className=" flex">
+                  <MdInsertDriveFile style={{ fontSize: "2rem" }} />
+                  <a
+                    href={`/api/files/download/${fileData.id}`}
+                    className="pl-2 text-left underline text-primary"
+                    target="_blank"
+                  >
+                    {fileData.filename}
+                  </a>
+                </div>
+                {!disabled && (
+                  <div
+                    onClick={handleRemove}
+                    className="text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4"
+                  >
+                    <MdDeleteOutline
+                      style={{ fontSize: "1.5rem", margin: "15px" }}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {description && (
+        <div
+          className="HintText self-stretch text-slate-600 text-sm font-normal leading-tight"
+          id={name + ":description"}
+        >
+          {description}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileInput;

package/lib/components/form/FileInputMultiple.tsx

@@ -4,6 +4,7 @@ import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
 import { IAttachment } from "../../types";
 import { handleErrors, useFederationContext } from "../../main";
 import { AxiosError } from "axios";
+import { cn } from "../../utils/utils";
 
 interface FileInputMultipleProps {
   name: string;
@@ -13,10 +14,10 @@ interface FileInputMultipleProps {
   required?: boolean;
   description?: string;
   disabled?: boolean;
-  errors?: { [key: string]: { message: string } };
   initialFilesReadOnly?: boolean;
   attachmentName?: string;
   attachmentType?: string;
+  hasError?: boolean;
 }
 
 interface IAttachmentReadOnly extends IAttachment {
@@ -33,10 +34,10 @@ const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
   required,
   description,
   disabled,
-  errors = {},
   initialFilesReadOnly = true,
   attachmentName,
   attachmentType,
+  hasError,
 }) => {
   const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(
     initialFiles
@@ -163,10 +164,12 @@ const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
           </label>
         )}
         <div
-          className={
-            `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2  outline-none border bg-transparent ` +
-            ` ${errors[name]?.message ? "border-red-200" : "border-gray-300"} `
-          }
+          className={cn(
+            `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2  outline-none border bg-transparent   `,
+            hasError &&
+              "outline-4 outline-red-200 outline-offset-0 border-none ",
+            disabled ? "bg-gray-100" : "bg-transparent"
+          )}
         >
           {!disabled && (
             <div
@@ -222,14 +225,6 @@ const FileInputMultiple: React.FC<FileInputMultipleProps> = ({
           {description}
         </div>
       )}
-      {errors[name] && (
-        <div
-          className="HintText self-stretch text-red-600 text-sm font-normal leading-tight"
-          id={name + ":error"}
-        >
-          {errors[name]?.message}
-        </div>
-      )}
     </div>
   );
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.62",
+  "version": "2.0.63",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",