@addsign/moje-agenda-shared-lib 2.0.36 → 2.0.38
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/form/FileInput.js +25 -9
- package/dist/components/form/FileInput.js.map +1 -1
- package/dist/components/ui/DatePicker.js +2 -1
- package/dist/components/ui/DatePicker.js.map +1 -1
- package/lib/components/form/FileInput.tsx +35 -17
- package/lib/components/ui/DatePicker.tsx +1 -0
- package/package.json +1 -1
|
@@ -24,6 +24,7 @@ import "../ui/button.js";
|
|
|
24
24
|
import "../../Calendar-DWT4e7Th.js";
|
|
25
25
|
import "../ui/DateTimePicker.js";
|
|
26
26
|
import "../ui/DatePicker.js";
|
|
27
|
+
const MAX_FILE_SIZE = 1024 * 1024;
|
|
27
28
|
const FileInput = ({
|
|
28
29
|
initialFile,
|
|
29
30
|
onFileChanged,
|
|
@@ -50,29 +51,44 @@ const FileInput = ({
|
|
|
50
51
|
async (acceptedFiles) => {
|
|
51
52
|
if (acceptedFiles.length > 0) {
|
|
52
53
|
const file = acceptedFiles[0];
|
|
54
|
+
if (file.size > MAX_FILE_SIZE) {
|
|
55
|
+
federationContext.emitter.emit("message", {
|
|
56
|
+
title: "Velikost souboru byla překročena",
|
|
57
|
+
message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,
|
|
58
|
+
classes: "bg-danger ",
|
|
59
|
+
timeout: 0,
|
|
60
|
+
type: "error"
|
|
61
|
+
});
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
53
64
|
const formData = new FormData();
|
|
54
65
|
formData.append("file", file);
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
|
|
66
|
+
try {
|
|
67
|
+
const response = await federationContext.apiClient.post(
|
|
68
|
+
"/files/upload",
|
|
69
|
+
formData,
|
|
70
|
+
{
|
|
71
|
+
headers: {
|
|
72
|
+
"Content-Type": "multipart/form-data"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
);
|
|
60
76
|
setFileData(response.data);
|
|
61
77
|
onFileChanged({
|
|
62
78
|
target: { name, value: response.data.id.toString() }
|
|
63
79
|
});
|
|
64
80
|
setIsFocused(false);
|
|
65
|
-
}
|
|
81
|
+
} catch (error) {
|
|
66
82
|
handleErrors(error, federationContext.emitter);
|
|
67
83
|
console.error("There was an error!", error);
|
|
68
|
-
}
|
|
84
|
+
}
|
|
69
85
|
}
|
|
70
86
|
},
|
|
71
87
|
[
|
|
72
88
|
federationContext.apiClient,
|
|
89
|
+
federationContext.emitter,
|
|
73
90
|
onFileChanged,
|
|
74
|
-
name
|
|
75
|
-
federationContext.emitter
|
|
91
|
+
name
|
|
76
92
|
]
|
|
77
93
|
);
|
|
78
94
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
@@ -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\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}\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}) => {\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 onFileChanged({ target: { name, value: initialFile.id.toString() } });\r\n }\r\n }, [initialFile, onFileChanged, name]);\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 const formData = new FormData();\r\n formData.append(\"file\", file);\r\n\r\n federationContext.apiClient\r\n .post<FileData>(\"/files/upload\", formData, {\r\n headers: {\r\n \"Content-Type\": \"multipart/form-data\",\r\n },\r\n })\r\n .then((response) => {\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 })\r\n .catch((error) => {\r\n handleErrors(error, 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 onFileChanged,\r\n name,\r\n federationContext.emitter,\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-3 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 p-2\">\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\";\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}\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}) => {\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 onFileChanged({ target: { name, value: initialFile.id.toString() } });\r\n }\r\n }, [initialFile, onFileChanged, name]);\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 }\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 ]\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-3 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 p-2\">\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/calendar.js","../../../lib/components/ui/DatePicker.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Calendar = createLucideIcon(\"Calendar\", [\n [\"path\", { d: \"M8 2v4\", key: \"1cmpym\" }],\n [\"path\", { d: \"M16 2v4\", key: \"4m81vk\" }],\n [\"rect\", { width: \"18\", height: \"18\", x: \"3\", y: \"4\", rx: \"2\", key: \"1hopcy\" }],\n [\"path\", { d: \"M3 10h18\", key: \"8toen8\" }]\n]);\n\nexport { Calendar as default };\n//# sourceMappingURL=calendar.js.map\n","import { format, isValid, parse } from \"date-fns\";\r\nimport { CalendarIcon, XIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Calendar } from \"./Calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport { cn } from \"../../utils/utils\";\r\nimport React, { forwardRef, useEffect, useState } from \"react\";\r\nimport { Input } from \"./input\";\r\n\r\nconst DATE_FORMAT = \"dd.MM.yyyy\";\r\n\r\ninterface DatePickerProps {\r\n value?: Date;\r\n onChange?: (date: Date | undefined) => void;\r\n className?: string;\r\n placeholder?: string;\r\n clearable?: boolean;\r\n disabled?: boolean;\r\n}\r\nconst validateDateFormat = (dateString: string): boolean => {\r\n // Regex for the desired date format dd.MM.yyyy\r\n const dateRegex =\r\n /^([0-9]|[0-2][0-9]|3[0-1])\\.([1-9]|0[1-9]|1[0-2])\\.(\\d{4})$/;\r\n return dateRegex.test(dateString);\r\n};\r\n\r\nconst DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\r\n (\r\n {\r\n value,\r\n onChange,\r\n className,\r\n clearable = true,\r\n placeholder,\r\n disabled,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [date, setDate] = useState<Date | undefined>(value);\r\n const [inputValue, setInputValue] = useState<string>(\"\");\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n if (value) {\r\n setDate(value);\r\n setInputValue(format(value, DATE_FORMAT));\r\n } else {\r\n setDate(undefined);\r\n setInputValue(\"\");\r\n }\r\n }, [value]);\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setInputValue(event.target.value);\r\n const parsedDate = parse(event.target.value, DATE_FORMAT, new Date());\r\n if (validateDateFormat(event.target.value) && isValid(parsedDate)) {\r\n handleCalendarSelect(parsedDate);\r\n } else {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n }\r\n };\r\n\r\n const handleInputBlur = () => {\r\n if (inputValue === \"\") {\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n setInputValue(\"\");\r\n return;\r\n }\r\n\r\n const parsedDate = parse(inputValue, DATE_FORMAT, new Date());\r\n if (isValid(parsedDate)) {\r\n setDate(parsedDate);\r\n onChange?.(parsedDate);\r\n setInputValue(format(parsedDate, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n }\r\n };\r\n\r\n const handleCalendarSelect = (selectedDate: Date | undefined) => {\r\n setDate(selectedDate);\r\n onChange?.(selectedDate);\r\n if (selectedDate) {\r\n setInputValue(format(selectedDate, DATE_FORMAT));\r\n setIsPopoverOpen(false); // Close the popover after a date is selected\r\n } else {\r\n setInputValue(\"\");\r\n }\r\n };\r\n\r\n const handleClear = () => {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n };\r\n\r\n return (\r\n <Popover\r\n open={!disabled && isPopoverOpen}\r\n onOpenChange={setIsPopoverOpen}\r\n >\r\n <PopoverTrigger asChild>\r\n <div className={cn(\"relative w-full\", className)}>\r\n <Input\r\n type=\"text\"\r\n value={inputValue}\r\n onChange={handleInputChange}\r\n onBlur={handleInputBlur}\r\n placeholder={placeholder}\r\n className={cn(\r\n \"w-full pl-8 pr-8\",\r\n !date && \"text-muted-foreground\"\r\n )}\r\n ref={ref}\r\n {...props}\r\n />\r\n <CalendarIcon className=\"absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\r\n {clearable && !disabled && inputValue && (\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0\"\r\n onClick={handleClear}\r\n >\r\n <XIcon className=\"h-4 w-4 text-muted-foreground\" />\r\n <span className=\"sr-only\">Smazat datum</span>\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n mode=\"single\"\r\n selected={date}\r\n onSelect={handleCalendarSelect}\r\n initialFocus\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n\r\nexport default DatePicker;\r\n"],"names":["CalendarIcon","XIcon","Calendar"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/calendar.js","../../../lib/components/ui/DatePicker.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Calendar = createLucideIcon(\"Calendar\", [\n [\"path\", { d: \"M8 2v4\", key: \"1cmpym\" }],\n [\"path\", { d: \"M16 2v4\", key: \"4m81vk\" }],\n [\"rect\", { width: \"18\", height: \"18\", x: \"3\", y: \"4\", rx: \"2\", key: \"1hopcy\" }],\n [\"path\", { d: \"M3 10h18\", key: \"8toen8\" }]\n]);\n\nexport { Calendar as default };\n//# sourceMappingURL=calendar.js.map\n","import { format, isValid, parse } from \"date-fns\";\r\nimport { CalendarIcon, XIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"./button\";\r\nimport { Calendar } from \"./Calendar\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport { cn } from \"../../utils/utils\";\r\nimport React, { forwardRef, useEffect, useState } from \"react\";\r\nimport { Input } from \"./input\";\r\n\r\nconst DATE_FORMAT = \"dd.MM.yyyy\";\r\n\r\ninterface DatePickerProps {\r\n value?: Date;\r\n onChange?: (date: Date | undefined) => void;\r\n className?: string;\r\n placeholder?: string;\r\n clearable?: boolean;\r\n disabled?: boolean;\r\n}\r\nconst validateDateFormat = (dateString: string): boolean => {\r\n // Regex for the desired date format dd.MM.yyyy\r\n const dateRegex =\r\n /^([0-9]|[0-2][0-9]|3[0-1])\\.([1-9]|0[1-9]|1[0-2])\\.(\\d{4})$/;\r\n return dateRegex.test(dateString);\r\n};\r\n\r\nconst DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\r\n (\r\n {\r\n value,\r\n onChange,\r\n className,\r\n clearable = true,\r\n placeholder,\r\n disabled,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [date, setDate] = useState<Date | undefined>(value);\r\n const [inputValue, setInputValue] = useState<string>(\"\");\r\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n if (value) {\r\n setDate(value);\r\n setInputValue(format(value, DATE_FORMAT));\r\n } else {\r\n setDate(undefined);\r\n setInputValue(\"\");\r\n }\r\n }, [value]);\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setInputValue(event.target.value);\r\n const parsedDate = parse(event.target.value, DATE_FORMAT, new Date());\r\n if (validateDateFormat(event.target.value) && isValid(parsedDate)) {\r\n handleCalendarSelect(parsedDate);\r\n } else {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n }\r\n };\r\n\r\n const handleInputBlur = () => {\r\n if (inputValue === \"\") {\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n setInputValue(\"\");\r\n return;\r\n }\r\n\r\n const parsedDate = parse(inputValue, DATE_FORMAT, new Date());\r\n if (isValid(parsedDate)) {\r\n setDate(parsedDate);\r\n onChange?.(parsedDate);\r\n setInputValue(format(parsedDate, DATE_FORMAT));\r\n } else {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n }\r\n };\r\n\r\n const handleCalendarSelect = (selectedDate: Date | undefined) => {\r\n setDate(selectedDate);\r\n onChange?.(selectedDate);\r\n if (selectedDate) {\r\n setInputValue(format(selectedDate, DATE_FORMAT));\r\n setIsPopoverOpen(false); // Close the popover after a date is selected\r\n } else {\r\n setInputValue(\"\");\r\n }\r\n };\r\n\r\n const handleClear = () => {\r\n setInputValue(\"\");\r\n setDate(undefined);\r\n onChange?.(undefined);\r\n };\r\n\r\n return (\r\n <Popover\r\n open={!disabled && isPopoverOpen}\r\n onOpenChange={setIsPopoverOpen}\r\n >\r\n <PopoverTrigger asChild>\r\n <div className={cn(\"relative w-full\", className)}>\r\n <Input\r\n type=\"text\"\r\n value={inputValue}\r\n onChange={handleInputChange}\r\n onBlur={handleInputBlur}\r\n placeholder={placeholder}\r\n className={cn(\r\n \"w-full pl-8 pr-8\",\r\n !date && \"text-muted-foreground\"\r\n )}\r\n ref={ref}\r\n {...props}\r\n />\r\n <CalendarIcon className=\"absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\r\n {clearable && !disabled && inputValue && (\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 p-0\"\r\n onClick={handleClear}\r\n >\r\n <XIcon className=\"h-4 w-4 text-muted-foreground\" />\r\n <span className=\"sr-only\">Smazat datum</span>\r\n </Button>\r\n )}\r\n </div>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n <Calendar\r\n mode=\"single\"\r\n selected={date}\r\n onSelect={handleCalendarSelect}\r\n initialFocus\r\n defaultMonth={date}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDatePicker.displayName = \"DatePicker\";\r\n\r\nexport default DatePicker;\r\n"],"names":["CalendarIcon","XIcon","Calendar"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
|
|
|
2
2
|
import { useDropzone } from "react-dropzone";
|
|
3
3
|
import { handleErrors, useFederationContext } from "../../main";
|
|
4
4
|
import { MdDeleteOutline, MdInsertDriveFile } from "react-icons/md";
|
|
5
|
+
import { AxiosError } from "axios";
|
|
5
6
|
|
|
6
7
|
export interface FileData {
|
|
7
8
|
id: number;
|
|
@@ -23,6 +24,8 @@ interface FileInputProps {
|
|
|
23
24
|
errors?: { [key: string]: { message: string } };
|
|
24
25
|
}
|
|
25
26
|
|
|
27
|
+
const MAX_FILE_SIZE = 1024 * 1024; // 1MB
|
|
28
|
+
|
|
26
29
|
const FileInput: React.FC<FileInputProps> = ({
|
|
27
30
|
initialFile,
|
|
28
31
|
onFileChanged,
|
|
@@ -50,33 +53,48 @@ const FileInput: React.FC<FileInputProps> = ({
|
|
|
50
53
|
async (acceptedFiles: File[]) => {
|
|
51
54
|
if (acceptedFiles.length > 0) {
|
|
52
55
|
const file = acceptedFiles[0];
|
|
56
|
+
|
|
57
|
+
if (file.size > MAX_FILE_SIZE) {
|
|
58
|
+
// Handle the case when the file size is exceeded
|
|
59
|
+
federationContext.emitter.emit("message", {
|
|
60
|
+
title: "Velikost souboru byla překročena",
|
|
61
|
+
message: `Maximální povolená velikost je ${MAX_FILE_SIZE / (1024 * 1024)} MB.`,
|
|
62
|
+
classes: "bg-danger ",
|
|
63
|
+
timeout: 0,
|
|
64
|
+
type: "error",
|
|
65
|
+
});
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
|
|
53
69
|
const formData = new FormData();
|
|
54
70
|
formData.append("file", file);
|
|
55
71
|
|
|
56
|
-
|
|
57
|
-
.post<FileData>(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
.catch((error) => {
|
|
70
|
-
handleErrors(error, federationContext.emitter);
|
|
71
|
-
console.error("There was an error!", error);
|
|
72
|
+
try {
|
|
73
|
+
const response = await federationContext.apiClient.post<FileData>(
|
|
74
|
+
"/files/upload",
|
|
75
|
+
formData,
|
|
76
|
+
{
|
|
77
|
+
headers: {
|
|
78
|
+
"Content-Type": "multipart/form-data",
|
|
79
|
+
},
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
setFileData(response.data);
|
|
83
|
+
onFileChanged({
|
|
84
|
+
target: { name, value: response.data.id.toString() },
|
|
72
85
|
});
|
|
86
|
+
setIsFocused(false);
|
|
87
|
+
} catch (error) {
|
|
88
|
+
handleErrors(error as AxiosError, federationContext.emitter);
|
|
89
|
+
console.error("There was an error!", error);
|
|
90
|
+
}
|
|
73
91
|
}
|
|
74
92
|
},
|
|
75
93
|
[
|
|
76
94
|
federationContext.apiClient,
|
|
95
|
+
federationContext.emitter,
|
|
77
96
|
onFileChanged,
|
|
78
97
|
name,
|
|
79
|
-
federationContext.emitter,
|
|
80
98
|
]
|
|
81
99
|
);
|
|
82
100
|
|