@addsign/moje-agenda-shared-lib 2.0.61 → 2.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/datatable/DataTableServer.js +18 -0
- package/dist/components/datatable/DataTableServer.js.map +1 -1
- package/dist/components/form/FileInput.d.ts +3 -6
- package/dist/components/form/FileInput.js +22 -15
- package/dist/components/form/FileInput.js.map +1 -1
- package/dist/components/form/FileInputMultiple.d.ts +2 -5
- package/dist/components/form/FileInputMultiple.js +18 -14
- package/dist/components/form/FileInputMultiple.js.map +1 -1
- package/dist/form-Bb28hcCd.js +404 -0
- package/dist/form-Bb28hcCd.js.map +1 -0
- package/lib/components/form/FileInput.tsx +211 -209
- package/lib/components/form/FileInputMultiple.tsx +22 -15
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ export interface FileData {
|
|
|
8
8
|
createdByEmpId: string;
|
|
9
9
|
created: string;
|
|
10
10
|
}
|
|
11
|
-
interface FileInputProps {
|
|
11
|
+
export interface FileInputProps {
|
|
12
12
|
name: string;
|
|
13
13
|
label?: string;
|
|
14
14
|
initialFile?: FileData;
|
|
@@ -16,12 +16,9 @@ interface FileInputProps {
|
|
|
16
16
|
required?: boolean;
|
|
17
17
|
description?: string;
|
|
18
18
|
disabled?: boolean;
|
|
19
|
-
errors?: {
|
|
20
|
-
[key: string]: {
|
|
21
|
-
message: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
19
|
attachmentName?: string;
|
|
20
|
+
attachmentType?: string;
|
|
21
|
+
hasError?: boolean;
|
|
25
22
|
}
|
|
26
23
|
declare const FileInput: React.FC<FileInputProps>;
|
|
27
24
|
export default FileInput;
|
|
@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from "react";
|
|
|
3
3
|
import { u as useDropzone } from "../../index-qqHvAsVd.js";
|
|
4
4
|
import "../../tailwind-l0sNRNKZ.js";
|
|
5
5
|
import { d as MdInsertDriveFile, e as MdDeleteOutline } from "../../index-CrfjcbOs.js";
|
|
6
|
+
import { cn } from "../../utils/utils.js";
|
|
6
7
|
import "../ui/input.js";
|
|
7
8
|
import "../ui/multi-select.js";
|
|
8
9
|
import "../ui/select.js";
|
|
@@ -34,10 +35,10 @@ const FileInput = ({
|
|
|
34
35
|
required,
|
|
35
36
|
description,
|
|
36
37
|
disabled,
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
attachmentName,
|
|
39
|
+
attachmentType,
|
|
40
|
+
hasError
|
|
39
41
|
}) => {
|
|
40
|
-
var _a, _b, _c, _d;
|
|
41
42
|
const [fileData, setFileData] = useState(
|
|
42
43
|
initialFile || null
|
|
43
44
|
);
|
|
@@ -63,6 +64,14 @@ const FileInput = ({
|
|
|
63
64
|
return;
|
|
64
65
|
}
|
|
65
66
|
const formData = new FormData();
|
|
67
|
+
const dataObject = {
|
|
68
|
+
...attachmentName && { attachmentName },
|
|
69
|
+
...attachmentType && { attachmentType }
|
|
70
|
+
};
|
|
71
|
+
formData.append(
|
|
72
|
+
"data",
|
|
73
|
+
new Blob([JSON.stringify(dataObject)], { type: "application/json" })
|
|
74
|
+
);
|
|
66
75
|
formData.append("file", file);
|
|
67
76
|
try {
|
|
68
77
|
const response = await federationContext.apiClient.post(
|
|
@@ -71,8 +80,7 @@ const FileInput = ({
|
|
|
71
80
|
{
|
|
72
81
|
headers: {
|
|
73
82
|
"Content-Type": "multipart/form-data"
|
|
74
|
-
}
|
|
75
|
-
params: attachmentName ? { attachmentName } : void 0
|
|
83
|
+
}
|
|
76
84
|
}
|
|
77
85
|
);
|
|
78
86
|
setFileData(response.data);
|
|
@@ -91,7 +99,8 @@ const FileInput = ({
|
|
|
91
99
|
federationContext.emitter,
|
|
92
100
|
onFileChanged,
|
|
93
101
|
name,
|
|
94
|
-
attachmentName
|
|
102
|
+
attachmentName,
|
|
103
|
+
attachmentType
|
|
95
104
|
]
|
|
96
105
|
);
|
|
97
106
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
@@ -120,7 +129,13 @@ const FileInput = ({
|
|
|
120
129
|
/* @__PURE__ */ jsx(
|
|
121
130
|
"div",
|
|
122
131
|
{
|
|
123
|
-
className:
|
|
132
|
+
className: cn(
|
|
133
|
+
`self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border`,
|
|
134
|
+
isFocused && !hasError && "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300",
|
|
135
|
+
hasError && "outline-4 outline-red-200 outline-offset-0 border-none",
|
|
136
|
+
!isFocused && hasError && "border-red-200 ",
|
|
137
|
+
disabled ? "bg-gray-100" : "bg-transparent"
|
|
138
|
+
),
|
|
124
139
|
onFocus: () => setIsFocused(true),
|
|
125
140
|
onBlur: () => setIsFocused(false),
|
|
126
141
|
children: /* @__PURE__ */ jsx("div", { className: "flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full ", children: !fileData ? /* @__PURE__ */ jsxs(
|
|
@@ -170,14 +185,6 @@ const FileInput = ({
|
|
|
170
185
|
id: name + ":description",
|
|
171
186
|
children: description
|
|
172
187
|
}
|
|
173
|
-
),
|
|
174
|
-
errors[name] && /* @__PURE__ */ jsx(
|
|
175
|
-
"div",
|
|
176
|
-
{
|
|
177
|
-
className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight",
|
|
178
|
-
id: name + ":error",
|
|
179
|
-
children: (_d = errors[name]) == null ? void 0 : _d.message
|
|
180
|
-
}
|
|
181
188
|
)
|
|
182
189
|
] });
|
|
183
190
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","sources":["../../../lib/components/form/FileInput.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { AxiosError } from \"axios\";\r\n\r\nexport interface FileData {\r\n id: number;\r\n mimeType: string;\r\n size: number;\r\n filename: string;\r\n createdByEmpId: string;\r\n created: string;\r\n}\r\n\r\ninterface FileInputProps {\r\n name: string;\r\n label?: string;\r\n initialFile?: FileData;\r\n onFileChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n errors?: { [key: string]: { message: string } };\r\n attachmentName?: string;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInput: React.FC<FileInputProps> = ({\r\n initialFile,\r\n onFileChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n errors = {},\r\n attachmentName,\r\n}) => {\r\n const [fileData, setFileData] = useState<FileData | null>(\r\n initialFile || null\r\n );\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const federationContext = useFederationContext();\r\n useEffect(() => {\r\n if (initialFile) {\r\n setFileData(initialFile);\r\n }\r\n }, [initialFile]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n if (acceptedFiles.length > 0) {\r\n const file = acceptedFiles[0];\r\n\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n return;\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response = await federationContext.apiClient.post<FileData>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n params: attachmentName ? { attachmentName } : undefined,\r\n }\r\n );\r\n setFileData(response.data);\r\n onFileChanged({\r\n target: { name, value: response.data.id.toString() },\r\n });\r\n setIsFocused(false);\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n }\r\n }\r\n },\r\n [\r\n federationContext.apiClient,\r\n federationContext.emitter,\r\n onFileChanged,\r\n name,\r\n attachmentName,\r\n ]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n multiple: false,\r\n });\r\n\r\n const handleRemove = () => {\r\n setFileData(null);\r\n onFileChanged({ target: { name, value: null } });\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border` +\r\n ` ${\r\n isFocused && !errors[name]?.message\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n }` +\r\n ` ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } ` +\r\n ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`\r\n }\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={() => setIsFocused(false)}\r\n >\r\n <div className=\"flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full \">\r\n {!fileData ? (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${\r\n isDragActive\r\n ? \"border-indigo-300 bg-indigo-50\"\r\n : \"border-gray-300\"\r\n }`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubor\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souboru\"}\r\n </p>\r\n </div>\r\n ) : (\r\n <div className=\"w-full flex items-center justify-between\">\r\n <div className=\" flex\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${fileData.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {fileData.filename}\r\n </a>\r\n </div>\r\n {!disabled && (\r\n <div\r\n onClick={handleRemove}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"15px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInput;\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileInput.js","sources":["../../../lib/components/form/FileInput.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { handleErrors, useFederationContext } from \"../../main\";\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\nimport { AxiosError } from \"axios\";\nimport { cn } from \"../../utils/utils\";\n\nexport interface FileData {\n id: number;\n mimeType: string;\n size: number;\n filename: string;\n createdByEmpId: string;\n created: string;\n}\n\nexport interface FileInputProps {\n name: string;\n label?: string;\n initialFile?: FileData;\n onFileChanged: (e: any) => void;\n required?: boolean;\n description?: string;\n disabled?: boolean;\n attachmentName?: string;\n attachmentType?: string;\n hasError?: boolean;\n}\n\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\n\nconst FileInput: React.FC<FileInputProps> = ({\n initialFile,\n onFileChanged,\n label,\n name,\n required,\n description,\n disabled,\n attachmentName,\n attachmentType,\n hasError,\n}) => {\n const [fileData, setFileData] = useState<FileData | null>(\n initialFile || null\n );\n const [isFocused, setIsFocused] = useState(false);\n\n const federationContext = useFederationContext();\n useEffect(() => {\n if (initialFile) {\n setFileData(initialFile);\n }\n }, [initialFile]);\n\n const onDrop = useCallback(\n async (acceptedFiles: File[]) => {\n if (acceptedFiles.length > 0) {\n const file = acceptedFiles[0];\n\n if (file.size > MAX_FILE_SIZE) {\n // Handle the case when the file size is exceeded\n federationContext.emitter.emit(\"message\", {\n title: \"Velikost souboru byla překročena\",\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\n classes: \"bg-danger \",\n timeout: 0,\n type: \"error\",\n });\n return;\n }\n\n const formData = new FormData();\n\n // Add the JSON data object\n const dataObject = {\n ...(attachmentName && { attachmentName }),\n ...(attachmentType && { attachmentType }),\n };\n\n formData.append(\n \"data\",\n new Blob([JSON.stringify(dataObject)], { type: \"application/json\" })\n );\n formData.append(\"file\", file);\n\n try {\n const response = await federationContext.apiClient.post<FileData>(\n \"/files/upload\",\n formData,\n {\n headers: {\n \"Content-Type\": \"multipart/form-data\",\n },\n }\n );\n setFileData(response.data);\n onFileChanged({\n target: { name, value: response.data.id.toString() },\n });\n setIsFocused(false);\n } catch (error) {\n handleErrors(error as AxiosError, federationContext.emitter);\n console.error(\"There was an error!\", error);\n }\n }\n },\n [\n federationContext.apiClient,\n federationContext.emitter,\n onFileChanged,\n name,\n attachmentName,\n attachmentType,\n ]\n );\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n disabled,\n multiple: false,\n });\n\n const handleRemove = () => {\n setFileData(null);\n onFileChanged({ target: { name, value: null } });\n };\n\n return (\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\n {label && (\n <label\n className=\"text-slate-700 text-sm leading-tight font-medium\"\n htmlFor={name}\n >\n {label} {required ? \"*\" : \"\"}\n </label>\n )}\n <div\n className={cn(\n `self-stretch px-2 py-2 rounded-lg justify-start items-center gap-2 inline-flex outline-none border`,\n isFocused &&\n !hasError &&\n \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\",\n\n hasError &&\n \"outline-4 outline-red-200 outline-offset-0 border-none\",\n !isFocused && hasError && \"border-red-200 \",\n disabled ? \"bg-gray-100\" : \"bg-transparent\"\n )}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n <div className=\"flex relative grow shrink basis-0 min-h-5 lg:min-h-[32px] justify-start items-stretch gap-2 max-w-full \">\n {!fileData ? (\n <div\n {...getRootProps()}\n className={`w-full p-4 border-dashed border-2 rounded-lg text-center ${\n isDragActive\n ? \"border-indigo-300 bg-indigo-50\"\n : \"border-gray-300\"\n }`}\n >\n <input {...getInputProps()} id={name} />\n <p className=\"text-gray-500\">\n {isDragActive\n ? \"Sem přetáhněte soubor\"\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souboru\"}\n </p>\n </div>\n ) : (\n <div className=\"w-full flex items-center justify-between\">\n <div className=\" flex\">\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\n <a\n href={`/api/files/download/${fileData.id}`}\n className=\"pl-2 text-left underline text-primary\"\n target=\"_blank\"\n >\n {fileData.filename}\n </a>\n </div>\n {!disabled && (\n <div\n onClick={handleRemove}\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\n >\n <MdDeleteOutline\n style={{ fontSize: \"1.5rem\", margin: \"15px\" }}\n />\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n {description && (\n <div\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\n id={name + \":description\"}\n >\n {description}\n </div>\n )}\n </div>\n );\n};\n\nexport default FileInput;\n"],"names":[],"mappings":"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"}
|
|
@@ -9,13 +9,10 @@ interface FileInputMultipleProps {
|
|
|
9
9
|
required?: boolean;
|
|
10
10
|
description?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
|
-
errors?: {
|
|
13
|
-
[key: string]: {
|
|
14
|
-
message: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
12
|
initialFilesReadOnly?: boolean;
|
|
18
13
|
attachmentName?: string;
|
|
14
|
+
attachmentType?: string;
|
|
15
|
+
hasError?: boolean;
|
|
19
16
|
}
|
|
20
17
|
declare const FileInputMultiple: React.FC<FileInputMultipleProps>;
|
|
21
18
|
export default FileInputMultiple;
|
|
@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from "react";
|
|
|
3
3
|
import { u as useDropzone } from "../../index-qqHvAsVd.js";
|
|
4
4
|
import { d as MdInsertDriveFile, e as MdDeleteOutline } from "../../index-CrfjcbOs.js";
|
|
5
5
|
import "../../tailwind-l0sNRNKZ.js";
|
|
6
|
+
import { cn } from "../../utils/utils.js";
|
|
6
7
|
import "../ui/input.js";
|
|
7
8
|
import "../ui/multi-select.js";
|
|
8
9
|
import "../ui/select.js";
|
|
@@ -34,11 +35,11 @@ const FileInputMultiple = ({
|
|
|
34
35
|
required,
|
|
35
36
|
description,
|
|
36
37
|
disabled,
|
|
37
|
-
errors = {},
|
|
38
38
|
initialFilesReadOnly = true,
|
|
39
|
-
attachmentName
|
|
39
|
+
attachmentName,
|
|
40
|
+
attachmentType,
|
|
41
|
+
hasError
|
|
40
42
|
}) => {
|
|
41
|
-
var _a, _b;
|
|
42
43
|
const [fileDataList, setFileDataList] = useState(
|
|
43
44
|
initialFiles ? [...initialFiles].map((file) => ({
|
|
44
45
|
...file,
|
|
@@ -76,6 +77,14 @@ const FileInputMultiple = ({
|
|
|
76
77
|
return null;
|
|
77
78
|
}
|
|
78
79
|
const formData = new FormData();
|
|
80
|
+
const dataObject = {
|
|
81
|
+
...attachmentName && { attachmentName },
|
|
82
|
+
...attachmentType && { attachmentType }
|
|
83
|
+
};
|
|
84
|
+
formData.append(
|
|
85
|
+
"data",
|
|
86
|
+
new Blob([JSON.stringify(dataObject)], { type: "application/json" })
|
|
87
|
+
);
|
|
79
88
|
formData.append("file", file);
|
|
80
89
|
try {
|
|
81
90
|
const response = await federationContext.apiClient.post(
|
|
@@ -84,8 +93,7 @@ const FileInputMultiple = ({
|
|
|
84
93
|
{
|
|
85
94
|
headers: {
|
|
86
95
|
"Content-Type": "multipart/form-data"
|
|
87
|
-
}
|
|
88
|
-
params: attachmentName ? { attachmentName } : void 0
|
|
96
|
+
}
|
|
89
97
|
}
|
|
90
98
|
);
|
|
91
99
|
return response.data;
|
|
@@ -146,7 +154,11 @@ const FileInputMultiple = ({
|
|
|
146
154
|
/* @__PURE__ */ jsxs(
|
|
147
155
|
"div",
|
|
148
156
|
{
|
|
149
|
-
className:
|
|
157
|
+
className: cn(
|
|
158
|
+
`self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2 outline-none border bg-transparent `,
|
|
159
|
+
hasError && "outline-4 outline-red-200 outline-offset-0 border-none ",
|
|
160
|
+
disabled ? "bg-gray-100" : "bg-transparent"
|
|
161
|
+
),
|
|
150
162
|
children: [
|
|
151
163
|
!disabled && /* @__PURE__ */ jsxs(
|
|
152
164
|
"div",
|
|
@@ -206,14 +218,6 @@ const FileInputMultiple = ({
|
|
|
206
218
|
id: name + ":description",
|
|
207
219
|
children: description
|
|
208
220
|
}
|
|
209
|
-
),
|
|
210
|
-
errors[name] && /* @__PURE__ */ jsx(
|
|
211
|
-
"div",
|
|
212
|
-
{
|
|
213
|
-
className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight",
|
|
214
|
-
id: name + ":error",
|
|
215
|
-
children: (_b = errors[name]) == null ? void 0 : _b.message
|
|
216
|
-
}
|
|
217
221
|
)
|
|
218
222
|
] });
|
|
219
223
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInputMultiple.js","sources":["../../../lib/components/form/FileInputMultiple.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { IAttachment } from \"../../types\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { AxiosError } from \"axios\";\r\n\r\ninterface FileInputMultipleProps {\r\n name: string;\r\n label?: string;\r\n initialFiles?: IAttachment[];\r\n onFilesChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n errors?: { [key: string]: { message: string } };\r\n initialFilesReadOnly?: boolean;\r\n attachmentName?: string;\r\n}\r\n\r\ninterface IAttachmentReadOnly extends IAttachment {\r\n readonly?: boolean;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInputMultiple: React.FC<FileInputMultipleProps> = ({\r\n initialFiles,\r\n onFilesChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n errors = {},\r\n initialFilesReadOnly = true,\r\n attachmentName,\r\n}) => {\r\n const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(\r\n initialFiles\r\n ? [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n : []\r\n );\r\n const federationContext = useFederationContext();\r\n\r\n useEffect(() => {\r\n console.log(\r\n \"%clibcomponents\\formFileInputMultiple.tsx:40 initialFiles\",\r\n \"color: #007acc;\",\r\n initialFiles\r\n );\r\n if (!initialFiles || initialFiles.length === 0) return;\r\n setFileDataList(\r\n [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n );\r\n }, [initialFiles, initialFilesReadOnly]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n const uploadedFiles = await Promise.all(\r\n acceptedFiles.map(async (file) => {\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n\r\n return null;\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response =\r\n await federationContext.apiClient.post<IAttachment>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n params: attachmentName ? { attachmentName } : undefined,\r\n }\r\n );\r\n return response.data;\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n return null;\r\n }\r\n })\r\n );\r\n\r\n const validFiles = uploadedFiles.filter(\r\n (file) => file !== null\r\n ) as IAttachment[];\r\n const updatedFileDataList = [...fileDataList, ...validFiles];\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n },\r\n [federationContext, fileDataList, onFilesChanged, name, attachmentName]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n });\r\n\r\n const handleRemove = (fileId: number) => {\r\n const updatedFileDataList = fileDataList.filter(\r\n (file) => file.id !== fileId\r\n );\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n };\r\n if (disabled === true && fileDataList.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2 outline-none border bg-transparent ` +\r\n ` ${errors[name]?.message ? \"border-red-200\" : \"border-gray-300\"} `\r\n }\r\n >\r\n {!disabled && (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed cursor-pointer \r\n border-2 rounded-lg text-center hover:bg-gray-100\r\n ${isDragActive ? \"border-indigo-300 bg-indigo-50\" : \"border-gray-300\"}`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubory\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souborů\"}\r\n </p>\r\n </div>\r\n )}\r\n <div className=\"w-full\">\r\n {fileDataList.map((file) => (\r\n <div\r\n key={file.id}\r\n className=\"w-full flex items-center justify-between py-2 border-b \"\r\n >\r\n <div className=\"flex items-center content-center\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${file.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {file.filename}\r\n </a>\r\n </div>\r\n {!disabled && file.readonly !== true && (\r\n <div\r\n onClick={() => handleRemove(file.id)}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"10px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInputMultiple;\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileInputMultiple.js","sources":["../../../lib/components/form/FileInputMultiple.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport { MdDeleteOutline, MdInsertDriveFile } from \"react-icons/md\";\r\nimport { IAttachment } from \"../../types\";\r\nimport { handleErrors, useFederationContext } from \"../../main\";\r\nimport { AxiosError } from \"axios\";\r\nimport { cn } from \"../../utils/utils\";\r\n\r\ninterface FileInputMultipleProps {\r\n name: string;\r\n label?: string;\r\n initialFiles?: IAttachment[];\r\n onFilesChanged: (e: any) => void;\r\n required?: boolean;\r\n description?: string;\r\n disabled?: boolean;\r\n initialFilesReadOnly?: boolean;\r\n attachmentName?: string;\r\n attachmentType?: string;\r\n hasError?: boolean;\r\n}\r\n\r\ninterface IAttachmentReadOnly extends IAttachment {\r\n readonly?: boolean;\r\n}\r\n\r\nconst MAX_FILE_SIZE = 1024 * 1024; // 1MB\r\n\r\nconst FileInputMultiple: React.FC<FileInputMultipleProps> = ({\r\n initialFiles,\r\n onFilesChanged,\r\n label,\r\n name,\r\n required,\r\n description,\r\n disabled,\r\n initialFilesReadOnly = true,\r\n attachmentName,\r\n attachmentType,\r\n hasError,\r\n}) => {\r\n const [fileDataList, setFileDataList] = useState<IAttachmentReadOnly[]>(\r\n initialFiles\r\n ? [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n : []\r\n );\r\n const federationContext = useFederationContext();\r\n\r\n useEffect(() => {\r\n console.log(\r\n \"%clibcomponents\\formFileInputMultiple.tsx:40 initialFiles\",\r\n \"color: #007acc;\",\r\n initialFiles\r\n );\r\n if (!initialFiles || initialFiles.length === 0) return;\r\n setFileDataList(\r\n [...initialFiles].map((file) => ({\r\n ...file,\r\n readonly: initialFilesReadOnly,\r\n }))\r\n );\r\n }, [initialFiles, initialFilesReadOnly]);\r\n\r\n const onDrop = useCallback(\r\n async (acceptedFiles: File[]) => {\r\n const uploadedFiles = await Promise.all(\r\n acceptedFiles.map(async (file) => {\r\n if (file.size > MAX_FILE_SIZE) {\r\n // Handle the case when the file size is exceeded\r\n\r\n federationContext.emitter.emit(\"message\", {\r\n title: \"Velikost souboru byla překročena\",\r\n message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,\r\n classes: \"bg-danger \",\r\n timeout: 0,\r\n type: \"error\",\r\n });\r\n\r\n return null;\r\n }\r\n\r\n const formData = new FormData();\r\n\r\n // Add the JSON data object\r\n const dataObject = {\r\n ...(attachmentName && { attachmentName }),\r\n ...(attachmentType && { attachmentType }),\r\n };\r\n\r\n formData.append(\r\n \"data\",\r\n new Blob([JSON.stringify(dataObject)], { type: \"application/json\" })\r\n );\r\n formData.append(\"file\", file);\r\n\r\n try {\r\n const response =\r\n await federationContext.apiClient.post<IAttachment>(\r\n \"/files/upload\",\r\n formData,\r\n {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n }\r\n );\r\n return response.data;\r\n } catch (error) {\r\n handleErrors(error as AxiosError, federationContext.emitter);\r\n console.error(\"There was an error!\", error);\r\n return null;\r\n }\r\n })\r\n );\r\n\r\n const validFiles = uploadedFiles.filter(\r\n (file) => file !== null\r\n ) as IAttachment[];\r\n const updatedFileDataList = [...fileDataList, ...validFiles];\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n },\r\n [federationContext, fileDataList, onFilesChanged, name, attachmentName]\r\n );\r\n\r\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n onDrop,\r\n disabled,\r\n });\r\n\r\n const handleRemove = (fileId: number) => {\r\n const updatedFileDataList = fileDataList.filter(\r\n (file) => file.id !== fileId\r\n );\r\n setFileDataList(updatedFileDataList);\r\n onFilesChanged({\r\n target: {\r\n name,\r\n value: updatedFileDataList.map((file) => file.id.toString()),\r\n },\r\n });\r\n };\r\n if (disabled === true && fileDataList.length === 0) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={cn(\r\n `self-stretch px-3 py-2 rounded-lg justify-start items-center gap-2 outline-none border bg-transparent `,\r\n hasError &&\r\n \"outline-4 outline-red-200 outline-offset-0 border-none \",\r\n disabled ? \"bg-gray-100\" : \"bg-transparent\"\r\n )}\r\n >\r\n {!disabled && (\r\n <div\r\n {...getRootProps()}\r\n className={`w-full p-4 border-dashed cursor-pointer \r\n border-2 rounded-lg text-center hover:bg-gray-100\r\n ${isDragActive ? \"border-indigo-300 bg-indigo-50\" : \"border-gray-300\"}`}\r\n >\r\n <input {...getInputProps()} id={name} />\r\n <p className=\"text-gray-500\">\r\n {isDragActive\r\n ? \"Sem přetáhněte soubory\"\r\n : \"Klikněte pro nahrání, nebo nahrajte přetažením souborů\"}\r\n </p>\r\n </div>\r\n )}\r\n <div className=\"w-full\">\r\n {fileDataList.map((file) => (\r\n <div\r\n key={file.id}\r\n className=\"w-full flex items-center justify-between py-2 border-b \"\r\n >\r\n <div className=\"flex items-center content-center\">\r\n <MdInsertDriveFile style={{ fontSize: \"2rem\" }} />\r\n <a\r\n href={`/api/files/download/${file.id}`}\r\n className=\"pl-2 text-left underline text-primary\"\r\n target=\"_blank\"\r\n >\r\n {file.filename}\r\n </a>\r\n </div>\r\n {!disabled && file.readonly !== true && (\r\n <div\r\n onClick={() => handleRemove(file.id)}\r\n className=\"text-gray-600 cursor-pointer hover:text-primary hover:bg-gray-200 rounded-full ml-4\"\r\n >\r\n <MdDeleteOutline\r\n style={{ fontSize: \"1.5rem\", margin: \"10px\" }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div\r\n className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FileInputMultiple;\r\n"],"names":[],"mappings":"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"}
|