@asdp/ferryui 0.1.22-dev.8782 → 0.1.22-dev.8784
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/index.d.mts +24 -1
- package/dist/index.d.ts +24 -1
- package/dist/index.js +561 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +565 -7
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1,
|
|
1
|
+
import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Image, Caption1Strong, Caption2, Button, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Body1, Body1Strong, Caption1, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Title1, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import React5, { forwardRef, useState,
|
|
4
|
-
import { DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
|
|
5
|
-
import { Row, Col, Visible } from 'react-grid-system';
|
|
3
|
+
import React5, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
|
|
4
|
+
import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
|
|
5
|
+
import { Container, Row, Col, Visible } from 'react-grid-system';
|
|
6
6
|
import { Icon } from '@iconify/react';
|
|
7
7
|
import { Controller, useForm, useWatch } from 'react-hook-form';
|
|
8
8
|
import PhoneInputComponent from 'react-phone-input-2';
|
|
@@ -11798,8 +11798,566 @@ var ModalPriceDetail = ({
|
|
|
11798
11798
|
);
|
|
11799
11799
|
};
|
|
11800
11800
|
|
|
11801
|
-
// src/components/
|
|
11801
|
+
// src/components/FileUpload/FileUpload.constants.ts
|
|
11802
|
+
var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
|
|
11803
|
+
var MAX_FILE_SIZE_MB = 10;
|
|
11802
11804
|
var DEFAULT_LABELS38 = {
|
|
11805
|
+
id: {
|
|
11806
|
+
placeholder: "Ketuk untuk pilih file",
|
|
11807
|
+
maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
|
|
11808
|
+
sizeLabel: "Ukuran",
|
|
11809
|
+
preview: "Pratinjau",
|
|
11810
|
+
requiredError: "wajib diisi"
|
|
11811
|
+
},
|
|
11812
|
+
en: {
|
|
11813
|
+
placeholder: "Tap to select a file",
|
|
11814
|
+
maxSizeWarning: "Maximum {maxSize}MB per file in PDF, JPG, JPEG, PNG format.",
|
|
11815
|
+
sizeLabel: "Size",
|
|
11816
|
+
preview: "Preview",
|
|
11817
|
+
requiredError: "is required"
|
|
11818
|
+
}
|
|
11819
|
+
};
|
|
11820
|
+
var uploadStyles = makeStyles({
|
|
11821
|
+
container: {
|
|
11822
|
+
backgroundColor: "#F0FEFF",
|
|
11823
|
+
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%2300B3BD' stroke-width='3' stroke-dasharray='25%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
|
|
11824
|
+
...shorthands.padding(tokens.spacingHorizontalM, tokens.spacingHorizontalL),
|
|
11825
|
+
borderRadius: "16px",
|
|
11826
|
+
cursor: "pointer",
|
|
11827
|
+
width: "100%"
|
|
11828
|
+
},
|
|
11829
|
+
containerError: {
|
|
11830
|
+
backgroundColor: tokens.colorStatusWarningBackground1,
|
|
11831
|
+
backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23F7630C' stroke-width='3' stroke-dasharray='25%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
|
|
11832
|
+
...shorthands.padding(tokens.spacingHorizontalM, tokens.spacingHorizontalL),
|
|
11833
|
+
borderRadius: "16px",
|
|
11834
|
+
cursor: "pointer",
|
|
11835
|
+
width: "100%"
|
|
11836
|
+
},
|
|
11837
|
+
containerDisabled: {
|
|
11838
|
+
width: "100%"
|
|
11839
|
+
},
|
|
11840
|
+
fieldContainer: {
|
|
11841
|
+
display: "flex",
|
|
11842
|
+
flexDirection: "column",
|
|
11843
|
+
justifyContent: "end",
|
|
11844
|
+
height: "100%",
|
|
11845
|
+
gap: tokens.spacingHorizontalXS
|
|
11846
|
+
},
|
|
11847
|
+
disabledFileInfo: {
|
|
11848
|
+
display: "flex",
|
|
11849
|
+
flexDirection: "column"
|
|
11850
|
+
},
|
|
11851
|
+
disabledFileName: {
|
|
11852
|
+
color: tokens.colorNeutralForeground1
|
|
11853
|
+
},
|
|
11854
|
+
disabledFileSize: {
|
|
11855
|
+
color: tokens.colorNeutralForeground3
|
|
11856
|
+
},
|
|
11857
|
+
uploadIcon: {
|
|
11858
|
+
borderRadius: tokens.borderRadiusCircular,
|
|
11859
|
+
backgroundColor: tokens.colorNeutralBackground1,
|
|
11860
|
+
maxWidth: "48px",
|
|
11861
|
+
width: "48px",
|
|
11862
|
+
height: "48px",
|
|
11863
|
+
maxHeight: "48px",
|
|
11864
|
+
textAlign: "center",
|
|
11865
|
+
alignItems: "center",
|
|
11866
|
+
display: "flex",
|
|
11867
|
+
justifyContent: "center"
|
|
11868
|
+
},
|
|
11869
|
+
uploadText: {
|
|
11870
|
+
display: "flex",
|
|
11871
|
+
flexDirection: "column",
|
|
11872
|
+
gap: tokens.spacingVerticalXS,
|
|
11873
|
+
flex: 1
|
|
11874
|
+
},
|
|
11875
|
+
hiddenInput: {
|
|
11876
|
+
opacity: 0,
|
|
11877
|
+
position: "absolute",
|
|
11878
|
+
pointerEvents: "none"
|
|
11879
|
+
},
|
|
11880
|
+
filePreviewImage: {
|
|
11881
|
+
width: "48px",
|
|
11882
|
+
height: "48px",
|
|
11883
|
+
borderRadius: tokens.borderRadiusSmall,
|
|
11884
|
+
objectFit: "cover"
|
|
11885
|
+
},
|
|
11886
|
+
dialogImage: {
|
|
11887
|
+
maxWidth: "100%",
|
|
11888
|
+
maxHeight: "70vh",
|
|
11889
|
+
objectFit: "contain"
|
|
11890
|
+
}
|
|
11891
|
+
});
|
|
11892
|
+
var FileUpload = React5.forwardRef(
|
|
11893
|
+
({
|
|
11894
|
+
name,
|
|
11895
|
+
control,
|
|
11896
|
+
label,
|
|
11897
|
+
required = false,
|
|
11898
|
+
accept = ACCEPTED_FILES,
|
|
11899
|
+
maxSize = MAX_FILE_SIZE_MB,
|
|
11900
|
+
placeholder: placeholderProp,
|
|
11901
|
+
disabled = false,
|
|
11902
|
+
language = "id",
|
|
11903
|
+
labels: customLabels
|
|
11904
|
+
}, ref) => {
|
|
11905
|
+
const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
|
|
11906
|
+
const styles = uploadStyles();
|
|
11907
|
+
const fileInputRef = useRef(null);
|
|
11908
|
+
const [, setIsDragOver] = useState(false);
|
|
11909
|
+
const [previewUrl, setPreviewUrl] = useState(null);
|
|
11910
|
+
const [sizeError, setSizeError] = useState(null);
|
|
11911
|
+
const [currentFile, setCurrentFile] = useState(null);
|
|
11912
|
+
const [isPreviewOpen, setIsPreviewOpen] = useState(false);
|
|
11913
|
+
const formatFileSize = (bytes) => {
|
|
11914
|
+
if (bytes < 1024) return `${bytes} B`;
|
|
11915
|
+
const kb = bytes / 1024;
|
|
11916
|
+
if (kb < 1024) return `${kb.toFixed(1)} KB`;
|
|
11917
|
+
const mb = kb / 1024;
|
|
11918
|
+
return `${mb.toFixed(1)} MB`;
|
|
11919
|
+
};
|
|
11920
|
+
const isImageFile = (file) => {
|
|
11921
|
+
return file ? file.type.startsWith("image/") : false;
|
|
11922
|
+
};
|
|
11923
|
+
const getDisplayFileName = (file) => {
|
|
11924
|
+
if (!file) return "";
|
|
11925
|
+
if (file.type.startsWith("image/")) {
|
|
11926
|
+
return "Image";
|
|
11927
|
+
}
|
|
11928
|
+
const extension = file.name.split(".").pop()?.toLowerCase() || "";
|
|
11929
|
+
return `Document.${extension}`;
|
|
11930
|
+
};
|
|
11931
|
+
const handleFileSelect = (files, onChange) => {
|
|
11932
|
+
setSizeError(null);
|
|
11933
|
+
if (files && files.length > 0) {
|
|
11934
|
+
const file = files[0];
|
|
11935
|
+
setCurrentFile(file);
|
|
11936
|
+
if (file.size > maxSize * 1024 * 1024) {
|
|
11937
|
+
setSizeError(`${mergedLabels.sizeLabel} file melebihi ${maxSize}MB`);
|
|
11938
|
+
onChange(void 0);
|
|
11939
|
+
return;
|
|
11940
|
+
}
|
|
11941
|
+
onChange(file);
|
|
11942
|
+
setCurrentFile(null);
|
|
11943
|
+
}
|
|
11944
|
+
};
|
|
11945
|
+
const handleClick = () => {
|
|
11946
|
+
if (!disabled) {
|
|
11947
|
+
fileInputRef.current?.click();
|
|
11948
|
+
}
|
|
11949
|
+
};
|
|
11950
|
+
const handleDrop = (e, onChange) => {
|
|
11951
|
+
e.preventDefault();
|
|
11952
|
+
setIsDragOver(false);
|
|
11953
|
+
if (!disabled) {
|
|
11954
|
+
handleFileSelect(e.dataTransfer.files, onChange);
|
|
11955
|
+
}
|
|
11956
|
+
};
|
|
11957
|
+
const handleDragOver = (e) => {
|
|
11958
|
+
e.preventDefault();
|
|
11959
|
+
setIsDragOver(true);
|
|
11960
|
+
};
|
|
11961
|
+
const handleDragLeave = () => {
|
|
11962
|
+
setIsDragOver(false);
|
|
11963
|
+
};
|
|
11964
|
+
const handleRemoveFile = (e, onChange) => {
|
|
11965
|
+
e?.stopPropagation();
|
|
11966
|
+
setSizeError(null);
|
|
11967
|
+
setCurrentFile(null);
|
|
11968
|
+
onChange(void 0);
|
|
11969
|
+
if (previewUrl) {
|
|
11970
|
+
URL.revokeObjectURL(previewUrl);
|
|
11971
|
+
}
|
|
11972
|
+
setPreviewUrl(null);
|
|
11973
|
+
if (fileInputRef.current) fileInputRef.current.value = "";
|
|
11974
|
+
};
|
|
11975
|
+
const handlePreview = (e, file) => {
|
|
11976
|
+
e.stopPropagation();
|
|
11977
|
+
const fileToPreview = file;
|
|
11978
|
+
if (fileToPreview instanceof File) {
|
|
11979
|
+
if (isImageFile(fileToPreview)) {
|
|
11980
|
+
setIsPreviewOpen(true);
|
|
11981
|
+
} else {
|
|
11982
|
+
const fileUrl = URL.createObjectURL(fileToPreview);
|
|
11983
|
+
window.open(fileUrl, "_blank");
|
|
11984
|
+
setTimeout(() => URL.revokeObjectURL(fileUrl), 1e3);
|
|
11985
|
+
}
|
|
11986
|
+
}
|
|
11987
|
+
};
|
|
11988
|
+
const getContainerStyle = (hasFile, hasError) => {
|
|
11989
|
+
if (disabled && hasFile) return styles.containerDisabled;
|
|
11990
|
+
if (hasError) return styles.containerError;
|
|
11991
|
+
return styles.container;
|
|
11992
|
+
};
|
|
11993
|
+
return /* @__PURE__ */ jsx(
|
|
11994
|
+
Controller,
|
|
11995
|
+
{
|
|
11996
|
+
name,
|
|
11997
|
+
control,
|
|
11998
|
+
rules: { required: required ? `${label} ${mergedLabels.requiredError}` : false },
|
|
11999
|
+
render: ({ field: { onChange, value }, fieldState: { error } }) => {
|
|
12000
|
+
const displayFile = currentFile || value;
|
|
12001
|
+
useEffect(() => {
|
|
12002
|
+
const fileToPreview = currentFile || value;
|
|
12003
|
+
if (fileToPreview instanceof File) {
|
|
12004
|
+
if (fileToPreview.type.startsWith("image/")) {
|
|
12005
|
+
const url = URL.createObjectURL(fileToPreview);
|
|
12006
|
+
setPreviewUrl(url);
|
|
12007
|
+
return () => {
|
|
12008
|
+
URL.revokeObjectURL(url);
|
|
12009
|
+
setPreviewUrl(null);
|
|
12010
|
+
};
|
|
12011
|
+
} else {
|
|
12012
|
+
setPreviewUrl(null);
|
|
12013
|
+
}
|
|
12014
|
+
} else {
|
|
12015
|
+
setPreviewUrl(null);
|
|
12016
|
+
}
|
|
12017
|
+
}, [value, currentFile]);
|
|
12018
|
+
if (disabled && displayFile instanceof File) {
|
|
12019
|
+
return /* @__PURE__ */ jsxs(
|
|
12020
|
+
Field,
|
|
12021
|
+
{
|
|
12022
|
+
required,
|
|
12023
|
+
label: /* @__PURE__ */ jsx(Body1, { children: label }),
|
|
12024
|
+
className: styles.fieldContainer,
|
|
12025
|
+
children: [
|
|
12026
|
+
/* @__PURE__ */ jsx(
|
|
12027
|
+
Container,
|
|
12028
|
+
{
|
|
12029
|
+
style: { marginLeft: 0, width: "100%", padding: 0 },
|
|
12030
|
+
fluid: true,
|
|
12031
|
+
children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
12032
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(Row, { children: [
|
|
12033
|
+
/* @__PURE__ */ jsx(
|
|
12034
|
+
Col,
|
|
12035
|
+
{
|
|
12036
|
+
xs: "content",
|
|
12037
|
+
style: {
|
|
12038
|
+
display: "flex",
|
|
12039
|
+
justifyContent: "center",
|
|
12040
|
+
alignItems: "center",
|
|
12041
|
+
width: "max-content"
|
|
12042
|
+
},
|
|
12043
|
+
children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsx(
|
|
12044
|
+
"img",
|
|
12045
|
+
{
|
|
12046
|
+
src: previewUrl,
|
|
12047
|
+
alt: "preview",
|
|
12048
|
+
className: styles.filePreviewImage
|
|
12049
|
+
}
|
|
12050
|
+
) : /* @__PURE__ */ jsx(Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
|
|
12051
|
+
}
|
|
12052
|
+
),
|
|
12053
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", { className: styles.disabledFileInfo, children: [
|
|
12054
|
+
/* @__PURE__ */ jsx(Caption1Strong, { className: styles.disabledFileName, children: getDisplayFileName(displayFile) }),
|
|
12055
|
+
/* @__PURE__ */ jsxs(Caption2, { className: styles.disabledFileSize, children: [
|
|
12056
|
+
mergedLabels.sizeLabel,
|
|
12057
|
+
": ",
|
|
12058
|
+
formatFileSize(displayFile.size)
|
|
12059
|
+
] })
|
|
12060
|
+
] }) })
|
|
12061
|
+
] }) }),
|
|
12062
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
|
|
12063
|
+
Button,
|
|
12064
|
+
{
|
|
12065
|
+
appearance: "transparent",
|
|
12066
|
+
size: "small",
|
|
12067
|
+
style: { color: brandColors2[80] },
|
|
12068
|
+
onClick: (e) => handlePreview(e, displayFile),
|
|
12069
|
+
children: mergedLabels.preview
|
|
12070
|
+
}
|
|
12071
|
+
) })
|
|
12072
|
+
] })
|
|
12073
|
+
}
|
|
12074
|
+
),
|
|
12075
|
+
/* @__PURE__ */ jsx(
|
|
12076
|
+
Dialog,
|
|
12077
|
+
{
|
|
12078
|
+
open: isPreviewOpen,
|
|
12079
|
+
onOpenChange: (_, data) => setIsPreviewOpen(data.open),
|
|
12080
|
+
children: /* @__PURE__ */ jsx(
|
|
12081
|
+
DialogSurface,
|
|
12082
|
+
{
|
|
12083
|
+
style: {
|
|
12084
|
+
maxWidth: "90vw",
|
|
12085
|
+
maxHeight: "90vh",
|
|
12086
|
+
backgroundColor: "transparent",
|
|
12087
|
+
boxShadow: "none"
|
|
12088
|
+
},
|
|
12089
|
+
children: /* @__PURE__ */ jsxs(DialogBody, { children: [
|
|
12090
|
+
/* @__PURE__ */ jsx(
|
|
12091
|
+
DialogTitle,
|
|
12092
|
+
{
|
|
12093
|
+
action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
|
|
12094
|
+
Button,
|
|
12095
|
+
{
|
|
12096
|
+
appearance: "subtle",
|
|
12097
|
+
"aria-label": "close",
|
|
12098
|
+
icon: /* @__PURE__ */ jsx(Dismiss24Regular, {})
|
|
12099
|
+
}
|
|
12100
|
+
) })
|
|
12101
|
+
}
|
|
12102
|
+
),
|
|
12103
|
+
/* @__PURE__ */ jsx(
|
|
12104
|
+
DialogContent,
|
|
12105
|
+
{
|
|
12106
|
+
style: { alignItems: "center", textAlign: "center" },
|
|
12107
|
+
children: previewUrl && /* @__PURE__ */ jsx(
|
|
12108
|
+
"img",
|
|
12109
|
+
{
|
|
12110
|
+
src: previewUrl,
|
|
12111
|
+
alt: "Preview",
|
|
12112
|
+
className: styles.dialogImage
|
|
12113
|
+
}
|
|
12114
|
+
)
|
|
12115
|
+
}
|
|
12116
|
+
)
|
|
12117
|
+
] })
|
|
12118
|
+
}
|
|
12119
|
+
)
|
|
12120
|
+
}
|
|
12121
|
+
)
|
|
12122
|
+
]
|
|
12123
|
+
}
|
|
12124
|
+
);
|
|
12125
|
+
}
|
|
12126
|
+
return /* @__PURE__ */ jsxs(
|
|
12127
|
+
Field,
|
|
12128
|
+
{
|
|
12129
|
+
ref,
|
|
12130
|
+
required,
|
|
12131
|
+
label: /* @__PURE__ */ jsx(Body1, { children: label }),
|
|
12132
|
+
className: styles.fieldContainer,
|
|
12133
|
+
children: [
|
|
12134
|
+
/* @__PURE__ */ jsxs(
|
|
12135
|
+
Container,
|
|
12136
|
+
{
|
|
12137
|
+
className: getContainerStyle(!!displayFile, !!(error && (value || currentFile)) || !!sizeError),
|
|
12138
|
+
onClick: handleClick,
|
|
12139
|
+
onDrop: (e) => handleDrop(e, onChange),
|
|
12140
|
+
onDragOver: handleDragOver,
|
|
12141
|
+
onDragLeave: handleDragLeave,
|
|
12142
|
+
fluid: true,
|
|
12143
|
+
children: [
|
|
12144
|
+
/* @__PURE__ */ jsxs(
|
|
12145
|
+
Row,
|
|
12146
|
+
{
|
|
12147
|
+
nogutter: true,
|
|
12148
|
+
style: { gap: tokens.spacingVerticalL },
|
|
12149
|
+
justify: "center",
|
|
12150
|
+
align: "center",
|
|
12151
|
+
children: [
|
|
12152
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx("div", { className: styles.uploadIcon, children: sizeError ? /* @__PURE__ */ jsx(
|
|
12153
|
+
Icon,
|
|
12154
|
+
{
|
|
12155
|
+
icon: "fluent:warning-32-regular",
|
|
12156
|
+
style: {
|
|
12157
|
+
color: tokens.colorStatusWarningBackground3,
|
|
12158
|
+
maxWidth: "32px",
|
|
12159
|
+
width: "32px",
|
|
12160
|
+
maxHeight: "32px",
|
|
12161
|
+
height: "32px"
|
|
12162
|
+
}
|
|
12163
|
+
}
|
|
12164
|
+
) : /* @__PURE__ */ jsx(
|
|
12165
|
+
Icon,
|
|
12166
|
+
{
|
|
12167
|
+
icon: "fluent:arrow-upload-32-filled",
|
|
12168
|
+
style: {
|
|
12169
|
+
color: brandColors2[80],
|
|
12170
|
+
maxWidth: "32px",
|
|
12171
|
+
width: "32px",
|
|
12172
|
+
maxHeight: "32px",
|
|
12173
|
+
height: "32px"
|
|
12174
|
+
}
|
|
12175
|
+
}
|
|
12176
|
+
) }) }),
|
|
12177
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
|
|
12178
|
+
Row,
|
|
12179
|
+
{
|
|
12180
|
+
direction: "column",
|
|
12181
|
+
nogutter: true,
|
|
12182
|
+
style: { rowGap: tokens.spacingVerticalXS },
|
|
12183
|
+
children: [
|
|
12184
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(Body1Strong, { children: placeholderProp || mergedLabels.placeholder }) }),
|
|
12185
|
+
displayFile instanceof File ? /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingHorizontalS }, children: [
|
|
12186
|
+
/* @__PURE__ */ jsx(
|
|
12187
|
+
Col,
|
|
12188
|
+
{
|
|
12189
|
+
xs: "content",
|
|
12190
|
+
style: {
|
|
12191
|
+
display: "flex",
|
|
12192
|
+
justifyContent: "center",
|
|
12193
|
+
alignItems: "center",
|
|
12194
|
+
width: "max-content"
|
|
12195
|
+
},
|
|
12196
|
+
children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsx(
|
|
12197
|
+
"img",
|
|
12198
|
+
{
|
|
12199
|
+
src: previewUrl,
|
|
12200
|
+
alt: "preview",
|
|
12201
|
+
className: styles.filePreviewImage
|
|
12202
|
+
}
|
|
12203
|
+
) : /* @__PURE__ */ jsx(Image, { src: "/assets/images/icons/pdficon.svg", alt: "PDF Icon", width: 32, height: 32 })
|
|
12204
|
+
}
|
|
12205
|
+
),
|
|
12206
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
|
|
12207
|
+
"div",
|
|
12208
|
+
{
|
|
12209
|
+
style: { display: "flex", flexDirection: "column" },
|
|
12210
|
+
children: [
|
|
12211
|
+
/* @__PURE__ */ jsx(Caption1Strong, { children: getDisplayFileName(displayFile) }),
|
|
12212
|
+
/* @__PURE__ */ jsxs(
|
|
12213
|
+
Caption2,
|
|
12214
|
+
{
|
|
12215
|
+
style: { color: tokens.colorNeutralForeground3 },
|
|
12216
|
+
children: [
|
|
12217
|
+
mergedLabels.sizeLabel,
|
|
12218
|
+
": ",
|
|
12219
|
+
formatFileSize(displayFile.size),
|
|
12220
|
+
(error || sizeError) && /* @__PURE__ */ jsxs(
|
|
12221
|
+
"span",
|
|
12222
|
+
{
|
|
12223
|
+
style: {
|
|
12224
|
+
color: tokens.colorStatusWarningForeground1,
|
|
12225
|
+
marginLeft: tokens.spacingHorizontalXS
|
|
12226
|
+
},
|
|
12227
|
+
children: [
|
|
12228
|
+
"(",
|
|
12229
|
+
sizeError || error?.message,
|
|
12230
|
+
")"
|
|
12231
|
+
]
|
|
12232
|
+
}
|
|
12233
|
+
)
|
|
12234
|
+
]
|
|
12235
|
+
}
|
|
12236
|
+
)
|
|
12237
|
+
]
|
|
12238
|
+
}
|
|
12239
|
+
) }),
|
|
12240
|
+
/* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsxs(
|
|
12241
|
+
"div",
|
|
12242
|
+
{
|
|
12243
|
+
style: {
|
|
12244
|
+
display: "flex",
|
|
12245
|
+
gap: tokens.spacingVerticalS,
|
|
12246
|
+
justifyContent: "center",
|
|
12247
|
+
alignItems: "center",
|
|
12248
|
+
width: "max-content",
|
|
12249
|
+
height: "100%"
|
|
12250
|
+
},
|
|
12251
|
+
children: [
|
|
12252
|
+
/* @__PURE__ */ jsx(
|
|
12253
|
+
Button,
|
|
12254
|
+
{
|
|
12255
|
+
appearance: "transparent",
|
|
12256
|
+
size: "small",
|
|
12257
|
+
style: { color: brandColors2[80] },
|
|
12258
|
+
onClick: (e) => handlePreview(e, displayFile),
|
|
12259
|
+
children: mergedLabels.preview
|
|
12260
|
+
}
|
|
12261
|
+
),
|
|
12262
|
+
/* @__PURE__ */ jsx(
|
|
12263
|
+
Button,
|
|
12264
|
+
{
|
|
12265
|
+
appearance: "transparent",
|
|
12266
|
+
size: "small",
|
|
12267
|
+
onClick: (e) => handleRemoveFile(e, onChange),
|
|
12268
|
+
icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-16-regular" })
|
|
12269
|
+
}
|
|
12270
|
+
)
|
|
12271
|
+
]
|
|
12272
|
+
}
|
|
12273
|
+
) })
|
|
12274
|
+
] }) }) : /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
|
|
12275
|
+
Caption1,
|
|
12276
|
+
{
|
|
12277
|
+
style: { color: tokens.colorNeutralForeground3 },
|
|
12278
|
+
children: mergedLabels.maxSizeWarning.replace("{maxSize}", String(maxSize))
|
|
12279
|
+
}
|
|
12280
|
+
) })
|
|
12281
|
+
]
|
|
12282
|
+
}
|
|
12283
|
+
) })
|
|
12284
|
+
]
|
|
12285
|
+
}
|
|
12286
|
+
),
|
|
12287
|
+
/* @__PURE__ */ jsx(
|
|
12288
|
+
"input",
|
|
12289
|
+
{
|
|
12290
|
+
ref: fileInputRef,
|
|
12291
|
+
type: "file",
|
|
12292
|
+
accept,
|
|
12293
|
+
onChange: (e) => handleFileSelect(e.target.files, onChange),
|
|
12294
|
+
className: styles.hiddenInput,
|
|
12295
|
+
disabled
|
|
12296
|
+
}
|
|
12297
|
+
)
|
|
12298
|
+
]
|
|
12299
|
+
}
|
|
12300
|
+
),
|
|
12301
|
+
/* @__PURE__ */ jsx(
|
|
12302
|
+
Dialog,
|
|
12303
|
+
{
|
|
12304
|
+
open: isPreviewOpen,
|
|
12305
|
+
onOpenChange: (_, data) => setIsPreviewOpen(data.open),
|
|
12306
|
+
children: /* @__PURE__ */ jsx(
|
|
12307
|
+
DialogSurface,
|
|
12308
|
+
{
|
|
12309
|
+
style: {
|
|
12310
|
+
maxWidth: "90vw",
|
|
12311
|
+
maxHeight: "90vh",
|
|
12312
|
+
backgroundColor: "transparent",
|
|
12313
|
+
boxShadow: "none"
|
|
12314
|
+
},
|
|
12315
|
+
children: /* @__PURE__ */ jsxs(DialogBody, { children: [
|
|
12316
|
+
/* @__PURE__ */ jsx(
|
|
12317
|
+
DialogTitle,
|
|
12318
|
+
{
|
|
12319
|
+
action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
|
|
12320
|
+
Button,
|
|
12321
|
+
{
|
|
12322
|
+
appearance: "subtle",
|
|
12323
|
+
"aria-label": "close",
|
|
12324
|
+
icon: /* @__PURE__ */ jsx(Dismiss24Regular, {})
|
|
12325
|
+
}
|
|
12326
|
+
) })
|
|
12327
|
+
}
|
|
12328
|
+
),
|
|
12329
|
+
/* @__PURE__ */ jsx(
|
|
12330
|
+
DialogContent,
|
|
12331
|
+
{
|
|
12332
|
+
style: { alignItems: "center", textAlign: "center" },
|
|
12333
|
+
children: previewUrl && /* @__PURE__ */ jsx(
|
|
12334
|
+
"img",
|
|
12335
|
+
{
|
|
12336
|
+
src: previewUrl,
|
|
12337
|
+
alt: "Preview",
|
|
12338
|
+
className: styles.dialogImage
|
|
12339
|
+
}
|
|
12340
|
+
)
|
|
12341
|
+
}
|
|
12342
|
+
)
|
|
12343
|
+
] })
|
|
12344
|
+
}
|
|
12345
|
+
)
|
|
12346
|
+
}
|
|
12347
|
+
)
|
|
12348
|
+
]
|
|
12349
|
+
}
|
|
12350
|
+
);
|
|
12351
|
+
}
|
|
12352
|
+
}
|
|
12353
|
+
);
|
|
12354
|
+
}
|
|
12355
|
+
);
|
|
12356
|
+
FileUpload.displayName = "FileUpload";
|
|
12357
|
+
var FileUpload_default = FileUpload;
|
|
12358
|
+
|
|
12359
|
+
// src/components/CardProfileMenu/CardProfileMenu.constants.ts
|
|
12360
|
+
var DEFAULT_LABELS39 = {
|
|
11803
12361
|
id: {},
|
|
11804
12362
|
en: {}
|
|
11805
12363
|
};
|
|
@@ -11862,7 +12420,7 @@ var CardProfileMenu = ({
|
|
|
11862
12420
|
onTabSelect
|
|
11863
12421
|
}) => {
|
|
11864
12422
|
const styles = useStyles39();
|
|
11865
|
-
({ ...
|
|
12423
|
+
({ ...DEFAULT_LABELS39[language], ...labels });
|
|
11866
12424
|
const handleTabSelect = (_, data) => {
|
|
11867
12425
|
onTabSelect(data.value);
|
|
11868
12426
|
};
|
|
@@ -11891,6 +12449,6 @@ var CardProfileMenu = ({
|
|
|
11891
12449
|
) });
|
|
11892
12450
|
};
|
|
11893
12451
|
|
|
11894
|
-
export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
|
|
12452
|
+
export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
|
|
11895
12453
|
//# sourceMappingURL=index.mjs.map
|
|
11896
12454
|
//# sourceMappingURL=index.mjs.map
|