@rws-aoa/react-library 3.6.0 → 3.6.2
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/atoms/_menu/user-menu/UserMenu.js.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.d.ts +5 -0
- package/dist/components/molecules/file-dropzone/FileDropzone.d.ts.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.js +37 -32
- package/dist/components/molecules/file-dropzone/FileDropzone.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserMenu.js","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"sourcesContent":["import { Avatar, Box, Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from \"@mui/material\";\nimport { Link } from \"@tanstack/react-router\";\nimport merge from \"lodash.merge\";\nimport { memo, useState, type MouseEvent, type ReactNode } from \"react\";\nimport { FontNormalSxProps } from \"../../../../_constants\";\n\ntype Action =\n /** The onClick function for situations where you don't want to navigate to another page (e.g. logout) */\n | { to?: never; onClick: () => void }\n /** The path that the menu item links to on click */\n | { to: string; onClick?: never };\n\nexport type AoaSetting = Action & {\n /** The lable of the menu item */\n label: string;\n /** Optional divider to be shown below menu item */\n divider?: boolean;\n};\n\ninterface UserMenuProps {\n /** A list of the user menu items */\n settings: AoaSetting[];\n /** Username to be displayed on the left of the settings menu icon */\n username?: string;\n}\n\n/**\n * Constructs a user menu using pre-defined Rijks styling\n * @param props Props to pass to the user menu\n * @example\n * ```jsx\n * <AoaUserMenu\n * settings={[\n * { label: \"Logout\", onClick: () => console.log(\"Logout\") }\n * ]}\n * />\n * ```\n */\n\nexport const AoaUserMenu = memo((props: UserMenuProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLLIElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n return (\n <Box display=\"flex\" alignItems=\"center\" sx={{ flexGrow: 0, minWidth:
|
|
1
|
+
{"version":3,"file":"UserMenu.js","sources":["../../../../../src/components/atoms/_menu/user-menu/UserMenu.tsx"],"sourcesContent":["import { Avatar, Box, Link as MUILink, MenuItem as MUIMenuItem, Popper, Typography } from \"@mui/material\";\nimport { Link } from \"@tanstack/react-router\";\nimport merge from \"lodash.merge\";\nimport { memo, useState, type MouseEvent, type ReactNode } from \"react\";\nimport { FontNormalSxProps } from \"../../../../_constants\";\n\ntype Action =\n /** The onClick function for situations where you don't want to navigate to another page (e.g. logout) */\n | { to?: never; onClick: () => void }\n /** The path that the menu item links to on click */\n | { to: string; onClick?: never };\n\nexport type AoaSetting = Action & {\n /** The lable of the menu item */\n label: string;\n /** Optional divider to be shown below menu item */\n divider?: boolean;\n};\n\ninterface UserMenuProps {\n /** A list of the user menu items */\n settings: AoaSetting[];\n /** Username to be displayed on the left of the settings menu icon */\n username?: string;\n}\n\n/**\n * Constructs a user menu using pre-defined Rijks styling\n * @param props Props to pass to the user menu\n * @example\n * ```jsx\n * <AoaUserMenu\n * settings={[\n * { label: \"Logout\", onClick: () => console.log(\"Logout\") }\n * ]}\n * />\n * ```\n */\n\nexport const AoaUserMenu = memo((props: UserMenuProps): ReactNode => {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n const [open, setOpen] = useState(false);\n\n function handleMenuOpen(event: MouseEvent<HTMLLIElement, globalThis.MouseEvent>) {\n setOpen(true);\n setAnchorEl(event.currentTarget);\n }\n\n function handleMenuClose() {\n setOpen(false);\n setAnchorEl(null);\n }\n\n return (\n <Box display=\"flex\" alignItems=\"center\" sx={{ flexGrow: 0, minWidth: \"fit-content\" }}>\n {props.username && (\n <Typography component=\"span\" sx={merge({ marginRight: \"16px\" }, FontNormalSxProps)}>\n {props.username}\n </Typography>\n )}\n <MUIMenuItem\n aria-controls={open ? \"usermenu\" : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? \"true\" : undefined}\n onMouseEnter={(e) => handleMenuOpen(e)}\n onMouseLeave={() => handleMenuClose()}\n sx={{\n padding: 0,\n\n \":hover\": {\n backgroundColor: \"transparent\"\n }\n }}\n >\n <Avatar />\n <Popper\n id=\"usermenu\"\n anchorEl={anchorEl}\n open={open}\n placement=\"bottom-end\"\n sx={{\n backgroundColor: \"var(--color-bg-light)\",\n padding: \"4px 0\",\n borderRadius: \"6px\",\n marginTop: \"8px\",\n minWidth: \"120px\",\n color: \"var(--color-text)\",\n boxShadow: `\n rgb(255 255 255) 0 0 0 0,\n rgb(0 0 0 / 5%) 0 0 0 1px,\n rgb(0 0 0 / 10%) 0 10px 15px -3px,\n rgb(0 0 0 / 5%) 0 4px 6px -2px\n `\n }}\n >\n {props.settings.map((setting, index) => (\n <MUIMenuItem\n disableRipple\n key={index}\n component={setting.to ? Link : MUILink}\n to={setting.to}\n onClick={(e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => {\n e.stopPropagation();\n setting.onClick && setting.onClick();\n setOpen(false);\n }}\n sx={{ ...FontNormalSxProps }}\n divider={setting.divider ?? false}\n >\n {setting.label}\n </MUIMenuItem>\n ))}\n </Popper>\n </MUIMenuItem>\n </Box>\n );\n});\n"],"names":["AoaUserMenu","memo","props","anchorEl","setAnchorEl","useState","open","setOpen","handleMenuOpen","event","handleMenuClose","jsxs","Box","jsx","Typography","merge","FontNormalSxProps","MUIMenuItem","e","Avatar","Popper","setting","index","Link","MUILink"],"mappings":";;;;;;AAuCa,MAAAA,IAAcC,EAAK,CAACC,MAAoC;AACnE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAA6B,IAAI,GAC3D,CAACC,GAAMC,CAAO,IAAIF,EAAS,EAAK;AAEtC,WAASG,EAAeC,GAAyD;AAC/E,IAAAF,EAAQ,EAAI,GACZH,EAAYK,EAAM,aAAa;AAAA,EACjC;AAEA,WAASC,IAAkB;AACzB,IAAAH,EAAQ,EAAK,GACbH,EAAY,IAAI;AAAA,EAClB;AAEA,SACG,gBAAAO,EAAAC,GAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,IAAI,EAAE,UAAU,GAAG,UAAU,cAAA,GAClE,UAAA;AAAA,IAAAV,EAAM,YACL,gBAAAW,EAACC,GAAW,EAAA,WAAU,QAAO,IAAIC,EAAM,EAAE,aAAa,OAAO,GAAGC,CAAiB,GAC9E,YAAM,UACT;AAAA,IAEF,gBAAAL;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,iBAAeX,IAAO,aAAa;AAAA,QACnC,iBAAc;AAAA,QACd,iBAAeA,IAAO,SAAS;AAAA,QAC/B,cAAc,CAACY,MAAMV,EAAeU,CAAC;AAAA,QACrC,cAAc,MAAMR,EAAgB;AAAA,QACpC,IAAI;AAAA,UACF,SAAS;AAAA,UAET,UAAU;AAAA,YACR,iBAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAG,EAACM,GAAO,EAAA;AAAA,UACR,gBAAAN;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,UAAAjB;AAAA,cACA,MAAAG;AAAA,cACA,WAAU;AAAA,cACV,IAAI;AAAA,gBACF,iBAAiB;AAAA,gBACjB,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMb;AAAA,cAEC,UAAMJ,EAAA,SAAS,IAAI,CAACmB,GAASC,MAC5B,gBAAAT;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,eAAa;AAAA,kBAEb,WAAWI,EAAQ,KAAKE,IAAOC;AAAAA,kBAC/B,IAAIH,EAAQ;AAAA,kBACZ,SAAS,CAACH,MAA4D;AACpE,oBAAAA,EAAE,gBAAgB,GACVG,EAAA,WAAWA,EAAQ,WAC3Bd,EAAQ,EAAK;AAAA,kBACf;AAAA,kBACA,IAAI,EAAE,GAAGS,EAAkB;AAAA,kBAC3B,SAASK,EAAQ,WAAW;AAAA,kBAE3B,UAAQA,EAAA;AAAA,gBAAA;AAAA,gBAXJC;AAAA,cAAA,CAaR;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -27,6 +27,11 @@ export interface AoaFileDropzoneProps<TProps extends NonNullObject, TFile extend
|
|
|
27
27
|
extensions: Accept;
|
|
28
28
|
/** The toast warning message to be shown when a file is rejection */
|
|
29
29
|
extensionWarning: string;
|
|
30
|
+
/**
|
|
31
|
+
* The toast warning message to be shown when the files to be uploaded exceeds the maximum,
|
|
32
|
+
* required if {@link AoaFileDropzoneProps.maxUploadFiles maxUploadFiles} is specified.
|
|
33
|
+
*/
|
|
34
|
+
maxUploadSizeExceededWarning?: string;
|
|
30
35
|
/** The children to show inside the box where files can be dropped */
|
|
31
36
|
fileDropChildren?: ReactNode;
|
|
32
37
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,MAAM,EAAsC,MAAM,gBAAgB,CAAC;AAI9F,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,aAAa,IAAI,MAAM,GAAG;IACnE,gCAAgC;IAChC,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,aAAa,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC;IACvG,sFAAsF;IACtF,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACjC,+FAA+F;IAC/F,cAAc,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,gBAAgB,EAAE,MAAM,CAAC;IACzB,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;IAC1C,qGAAqG;IACrG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,iBAAiB,CAAC,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC;IAC/C,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,aAAa,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC,EACjG,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"FileDropzone.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,MAAM,EAAsC,MAAM,gBAAgB,CAAC;AAI9F,MAAM,MAAM,eAAe,CAAC,MAAM,SAAS,aAAa,IAAI,MAAM,GAAG;IACnE,gCAAgC;IAChC,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,aAAa,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC;IACvG,sFAAsF;IACtF,YAAY,EAAE,KAAK,EAAE,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACjC,+FAA+F;IAC/F,cAAc,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;OAIG;IACH,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC;IAC1C,qGAAqG;IACrG,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,iBAAiB,CAAC,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC;IAC/C,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,wBAAgB,eAAe,CAAC,MAAM,SAAS,aAAa,EAAE,KAAK,SAAS,eAAe,CAAC,MAAM,CAAC,EACjG,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,2CA2FxE"}
|
|
@@ -1,58 +1,63 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Box as
|
|
3
|
-
import { useCallback as
|
|
4
|
-
import { useDropzone as
|
|
5
|
-
import { toast as
|
|
6
|
-
import { isExtensionAllowed as
|
|
1
|
+
import { jsxs as y, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { Box as f } from "@mui/material";
|
|
3
|
+
import { useCallback as D } from "react";
|
|
4
|
+
import { useDropzone as U } from "react-dropzone";
|
|
5
|
+
import { toast as x } from "react-toastify";
|
|
6
|
+
import { isExtensionAllowed as W } from "../../../_constants.js";
|
|
7
7
|
function A(e) {
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
var r, d;
|
|
9
|
+
function o() {
|
|
10
|
+
x(e.maxUploadSizeExceededWarning ?? `U heeft meer dan ${e.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {
|
|
11
|
+
type: "warning"
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
const g = D(
|
|
15
|
+
(a, i) => {
|
|
16
|
+
var s, m;
|
|
17
|
+
i.length > 0 && (i.every((n) => n.errors.every((l) => l.code === "too-many-files")) ? o() : x(e.extensionWarning, { type: "warning" }));
|
|
18
|
+
const t = [...e.currentFiles];
|
|
19
|
+
for (const n of a) {
|
|
20
|
+
const l = t.findIndex((b) => b.file.name === n.name);
|
|
21
|
+
l !== -1 ? t.splice(l, 1, {
|
|
22
|
+
file: n,
|
|
23
|
+
...((s = e.perFileProperties) == null ? void 0 : s.call(e, n)) ?? {}
|
|
24
|
+
}) : t.push({ file: n, ...((m = e.perFileProperties) == null ? void 0 : m.call(e, n)) ?? {} });
|
|
20
25
|
}
|
|
21
|
-
e.storeFiles(
|
|
26
|
+
e.maxUploadFiles && t.length > e.maxUploadFiles ? o() : e.storeFiles(t);
|
|
22
27
|
},
|
|
23
28
|
[e.extensionWarning, e.currentFiles, e.perFileProperties, e.storeFiles]
|
|
24
29
|
);
|
|
25
|
-
function u(
|
|
26
|
-
var
|
|
27
|
-
return (
|
|
30
|
+
function u(a) {
|
|
31
|
+
var i;
|
|
32
|
+
return (i = e.customFileValidator) != null && i.call(e, a) ? {
|
|
28
33
|
code: "custom-validator",
|
|
29
34
|
message: e.extensionWarning
|
|
30
|
-
} :
|
|
35
|
+
} : W(e.extensionRegex, a.name) ? null : {
|
|
31
36
|
code: "name-not-ok",
|
|
32
37
|
message: e.extensionWarning
|
|
33
38
|
};
|
|
34
39
|
}
|
|
35
|
-
const { getRootProps:
|
|
36
|
-
onDrop:
|
|
40
|
+
const { getRootProps: F, getInputProps: h } = U({
|
|
41
|
+
onDrop: g,
|
|
37
42
|
disabled: e.isDisabled,
|
|
38
43
|
accept: e.extensions,
|
|
39
44
|
maxFiles: e.maxUploadFiles,
|
|
40
45
|
validator: u
|
|
41
46
|
});
|
|
42
|
-
return /* @__PURE__ */
|
|
43
|
-
|
|
47
|
+
return /* @__PURE__ */ y(
|
|
48
|
+
f,
|
|
44
49
|
{
|
|
45
|
-
...
|
|
50
|
+
...F(),
|
|
46
51
|
sx: {
|
|
47
52
|
"&:focus": {
|
|
48
53
|
outline: "none"
|
|
49
54
|
}
|
|
50
55
|
},
|
|
51
|
-
"data-qa": ((
|
|
56
|
+
"data-qa": ((r = e.dataQas) == null ? void 0 : r.root) ?? "file-dropzone-root",
|
|
52
57
|
children: [
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
|
|
58
|
+
/* @__PURE__ */ c("input", { ...h(), "data-qa": ((d = e.dataQas) == null ? void 0 : d.input) ?? "file-drop-input" }),
|
|
59
|
+
/* @__PURE__ */ c(
|
|
60
|
+
f,
|
|
56
61
|
{
|
|
57
62
|
sx: {
|
|
58
63
|
backgroundColor: "var(--color-rijks-grey-2)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport { Box } from \"@mui/material\";\nimport type { NonNullObject } from \"@sapphire/utilities\";\nimport { useCallback, type PropsWithChildren, type ReactNode } from \"react\";\nimport { useDropzone, type Accept, type FileError, type FileRejection } from \"react-dropzone\";\nimport { toast } from \"react-toastify\";\nimport { isExtensionAllowed } from \"../../../_constants\";\n\nexport type AoaDropableFile<TProps extends NonNullObject> = TProps & {\n /** The file that was dropped */\n file: File;\n};\n\nexport interface AoaFileDropzoneDataQas {\n /** The data-qa tag for the root element */\n root: string;\n /** The data-qa tag for the input */\n input: string;\n}\n\nexport interface AoaFileDropzoneProps<TProps extends NonNullObject, TFile extends AoaDropableFile<TProps>> {\n /** The current set of files that are already dropped, coming from Redux or Zustand */\n currentFiles: TFile[];\n /**\n * The function to overwrite the files in the client store.\n * This should overwrite all files, not merge with current, which is handled in this component\n * @param files - The new set of files to be stored\n */\n storeFiles(files: TFile[]): void;\n /** The regular expression that validates if the dropped file should be accepted or rejected */\n extensionRegex: RegExp;\n /** The extension map to be passed to the dropzone component */\n extensions: Accept;\n /** The toast warning message to be shown when a file is rejection */\n extensionWarning: string;\n /** The children to show inside the box where files can be dropped */\n fileDropChildren?: ReactNode;\n /**\n * A custom function that can perform extra checks when validating files.\n * This should return `true` if the file should be rejected or `false` if it should be accepted\n * @param file - The file to be validated\n */\n customFileValidator?(file: File): boolean;\n /** A maximum count of files that should be accepted, if exceeded no save action will be performed */\n maxUploadFiles?: number;\n /** Additional properties to set for every file that is to be saved */\n perFileProperties?(acceptedFile: File): TProps;\n /** Whether the dropzone should be disabled or not */\n isDisabled?: boolean;\n /** data-qa tags for testing */\n dataQas?: AoaFileDropzoneDataQas;\n}\n\nexport function AoaFileDropzone<TProps extends NonNullObject, TFile extends AoaDropableFile<TProps>>(\n props: Readonly<PropsWithChildren<AoaFileDropzoneProps<TProps, TFile>>>\n) {\n const handleDrop = useCallback(\n (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n if (fileRejections.length > 0) {\n toast(props.extensionWarning, { type: \"warning\" });\n }\n\n const filesClone = [...props.currentFiles];\n for (const acceptedFile of acceptedFiles) {\n const existingFileIndex = filesClone.findIndex((file) => file.file.name === acceptedFile.name);\n if (existingFileIndex !== -1) {\n filesClone.splice(existingFileIndex, 1, {\n file: acceptedFile,\n ...(props.perFileProperties?.(acceptedFile) ?? {})\n } as TFile & TProps);\n } else {\n filesClone.push({ file: acceptedFile, ...(props.perFileProperties?.(acceptedFile) ?? {}) } as TFile & TProps);\n }\n }\n\n props.storeFiles(filesClone);\n },\n [props.extensionWarning, props.currentFiles, props.perFileProperties, props.storeFiles]\n );\n\n function fileValidator(file: File): FileError | null {\n if (props.customFileValidator?.(file)) {\n return {\n code: \"custom-validator\",\n message: props.extensionWarning\n };\n }\n\n if (isExtensionAllowed(props.extensionRegex, file.name)) {\n return null;\n }\n\n return {\n code: \"name-not-ok\",\n message: props.extensionWarning\n };\n }\n\n const { getRootProps, getInputProps } = useDropzone({\n onDrop: handleDrop,\n disabled: props.isDisabled,\n accept: props.extensions,\n maxFiles: props.maxUploadFiles,\n validator: fileValidator\n });\n\n return (\n <Box\n {...getRootProps()}\n sx={{\n \"&:focus\": {\n outline: \"none\"\n }\n }}\n data-qa={props.dataQas?.root ?? \"file-dropzone-root\"}\n >\n <input {...getInputProps()} data-qa={props.dataQas?.input ?? \"file-drop-input\"} />\n <Box\n sx={{\n backgroundColor: \"var(--color-rijks-grey-2)\",\n borderWidth: 1,\n borderStyle: \"dashed\",\n borderColor: \"black\",\n marginBottom: 0.5,\n textAlign: \"center\"\n }}\n >\n {props.fileDropChildren}\n </Box>\n </Box>\n );\n}\n"],"names":["AoaFileDropzone","props","handleDrop","useCallback","acceptedFiles","fileRejections","
|
|
1
|
+
{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/molecules/file-dropzone/FileDropzone.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\nimport { Box } from \"@mui/material\";\nimport type { NonNullObject } from \"@sapphire/utilities\";\nimport { useCallback, type PropsWithChildren, type ReactNode } from \"react\";\nimport { useDropzone, type Accept, type FileError, type FileRejection } from \"react-dropzone\";\nimport { toast } from \"react-toastify\";\nimport { isExtensionAllowed } from \"../../../_constants\";\n\nexport type AoaDropableFile<TProps extends NonNullObject> = TProps & {\n /** The file that was dropped */\n file: File;\n};\n\nexport interface AoaFileDropzoneDataQas {\n /** The data-qa tag for the root element */\n root: string;\n /** The data-qa tag for the input */\n input: string;\n}\n\nexport interface AoaFileDropzoneProps<TProps extends NonNullObject, TFile extends AoaDropableFile<TProps>> {\n /** The current set of files that are already dropped, coming from Redux or Zustand */\n currentFiles: TFile[];\n /**\n * The function to overwrite the files in the client store.\n * This should overwrite all files, not merge with current, which is handled in this component\n * @param files - The new set of files to be stored\n */\n storeFiles(files: TFile[]): void;\n /** The regular expression that validates if the dropped file should be accepted or rejected */\n extensionRegex: RegExp;\n /** The extension map to be passed to the dropzone component */\n extensions: Accept;\n /** The toast warning message to be shown when a file is rejection */\n extensionWarning: string;\n /**\n * The toast warning message to be shown when the files to be uploaded exceeds the maximum,\n * required if {@link AoaFileDropzoneProps.maxUploadFiles maxUploadFiles} is specified.\n */\n maxUploadSizeExceededWarning?: string;\n /** The children to show inside the box where files can be dropped */\n fileDropChildren?: ReactNode;\n /**\n * A custom function that can perform extra checks when validating files.\n * This should return `true` if the file should be rejected or `false` if it should be accepted\n * @param file - The file to be validated\n */\n customFileValidator?(file: File): boolean;\n /** A maximum count of files that should be accepted, if exceeded no save action will be performed */\n maxUploadFiles?: number;\n /** Additional properties to set for every file that is to be saved */\n perFileProperties?(acceptedFile: File): TProps;\n /** Whether the dropzone should be disabled or not */\n isDisabled?: boolean;\n /** data-qa tags for testing */\n dataQas?: AoaFileDropzoneDataQas;\n}\n\nexport function AoaFileDropzone<TProps extends NonNullObject, TFile extends AoaDropableFile<TProps>>(\n props: Readonly<PropsWithChildren<AoaFileDropzoneProps<TProps, TFile>>>\n) {\n function showMaxUploadFilesWarning() {\n toast(props.maxUploadSizeExceededWarning ?? `U heeft meer dan ${props.maxUploadFiles} bestand(en) geselecteerd. Dit is niet toegestaan.`, {\n type: \"warning\"\n });\n }\n\n const handleDrop = useCallback(\n (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n if (fileRejections.length > 0) {\n if (fileRejections.every((file) => file.errors.every((error) => error.code === \"too-many-files\"))) {\n showMaxUploadFilesWarning();\n } else {\n toast(props.extensionWarning, { type: \"warning\" });\n }\n }\n\n const filesClone = [...props.currentFiles];\n for (const acceptedFile of acceptedFiles) {\n const existingFileIndex = filesClone.findIndex((file) => file.file.name === acceptedFile.name);\n if (existingFileIndex !== -1) {\n filesClone.splice(existingFileIndex, 1, {\n file: acceptedFile,\n ...(props.perFileProperties?.(acceptedFile) ?? {})\n } as TFile & TProps);\n } else {\n filesClone.push({ file: acceptedFile, ...(props.perFileProperties?.(acceptedFile) ?? {}) } as TFile & TProps);\n }\n }\n\n if (props.maxUploadFiles && filesClone.length > props.maxUploadFiles) {\n showMaxUploadFilesWarning();\n } else {\n props.storeFiles(filesClone);\n }\n },\n [props.extensionWarning, props.currentFiles, props.perFileProperties, props.storeFiles]\n );\n\n function fileValidator(file: File): FileError | null {\n if (props.customFileValidator?.(file)) {\n return {\n code: \"custom-validator\",\n message: props.extensionWarning\n };\n }\n\n if (isExtensionAllowed(props.extensionRegex, file.name)) {\n return null;\n }\n\n return {\n code: \"name-not-ok\",\n message: props.extensionWarning\n };\n }\n\n const { getRootProps, getInputProps } = useDropzone({\n onDrop: handleDrop,\n disabled: props.isDisabled,\n accept: props.extensions,\n maxFiles: props.maxUploadFiles,\n validator: fileValidator\n });\n\n return (\n <Box\n {...getRootProps()}\n sx={{\n \"&:focus\": {\n outline: \"none\"\n }\n }}\n data-qa={props.dataQas?.root ?? \"file-dropzone-root\"}\n >\n <input {...getInputProps()} data-qa={props.dataQas?.input ?? \"file-drop-input\"} />\n <Box\n sx={{\n backgroundColor: \"var(--color-rijks-grey-2)\",\n borderWidth: 1,\n borderStyle: \"dashed\",\n borderColor: \"black\",\n marginBottom: 0.5,\n textAlign: \"center\"\n }}\n >\n {props.fileDropChildren}\n </Box>\n </Box>\n );\n}\n"],"names":["AoaFileDropzone","props","showMaxUploadFilesWarning","toast","handleDrop","useCallback","acceptedFiles","fileRejections","file","error","filesClone","acceptedFile","existingFileIndex","_a","_b","fileValidator","isExtensionAllowed","getRootProps","getInputProps","useDropzone","jsxs","Box","jsx"],"mappings":";;;;;;AA0DO,SAASA,EACdC,GACA;;AACA,WAASC,IAA4B;AACnC,IAAAC,EAAMF,EAAM,gCAAgC,oBAAoBA,EAAM,cAAc,sDAAsD;AAAA,MACxI,MAAM;AAAA,IAAA,CACP;AAAA,EACH;AAEA,QAAMG,IAAaC;AAAA,IACjB,CAACC,GAAuBC,MAAoC;;AACtD,MAAAA,EAAe,SAAS,MACtBA,EAAe,MAAM,CAACC,MAASA,EAAK,OAAO,MAAM,CAACC,MAAUA,EAAM,SAAS,gBAAgB,CAAC,IACpEP,MAE1BC,EAAMF,EAAM,kBAAkB,EAAE,MAAM,UAAW,CAAA;AAIrD,YAAMS,IAAa,CAAC,GAAGT,EAAM,YAAY;AACzC,iBAAWU,KAAgBL,GAAe;AAClC,cAAAM,IAAoBF,EAAW,UAAU,CAACF,MAASA,EAAK,KAAK,SAASG,EAAa,IAAI;AAC7F,QAAIC,MAAsB,KACbF,EAAA,OAAOE,GAAmB,GAAG;AAAA,UACtC,MAAMD;AAAA,UACN,KAAIE,IAAAZ,EAAM,sBAAN,gBAAAY,EAAA,KAAAZ,GAA0BU,OAAiB,CAAC;AAAA,QAAA,CAC/B,IAERD,EAAA,KAAK,EAAE,MAAMC,GAAc,KAAIG,IAAAb,EAAM,sBAAN,gBAAAa,EAAA,KAAAb,GAA0BU,OAAiB,CAAC,EAAA,CAAsB;AAAA,MAEhH;AAEA,MAAIV,EAAM,kBAAkBS,EAAW,SAAST,EAAM,iBAC1BC,MAE1BD,EAAM,WAAWS,CAAU;AAAA,IAE/B;AAAA,IACA,CAACT,EAAM,kBAAkBA,EAAM,cAAcA,EAAM,mBAAmBA,EAAM,UAAU;AAAA,EAAA;AAGxF,WAASc,EAAcP,GAA8B;;AAC/C,YAAAK,IAAAZ,EAAM,wBAAN,QAAAY,EAAA,KAAAZ,GAA4BO,KACvB;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IAAA,IAIfe,EAAmBf,EAAM,gBAAgBO,EAAK,IAAI,IAC7C,OAGF;AAAA,MACL,MAAM;AAAA,MACN,SAASP,EAAM;AAAA,IAAA;AAAA,EAEnB;AAEA,QAAM,EAAE,cAAAgB,GAAc,eAAAC,EAAc,IAAIC,EAAY;AAAA,IAClD,QAAQf;AAAA,IACR,UAAUH,EAAM;AAAA,IAChB,QAAQA,EAAM;AAAA,IACd,UAAUA,EAAM;AAAA,IAChB,WAAWc;AAAA,EAAA,CACZ;AAGC,SAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAa;AAAA,MACjB,IAAI;AAAA,QACF,WAAW;AAAA,UACT,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MACA,aAASJ,IAAAZ,EAAM,YAAN,gBAAAY,EAAe,SAAQ;AAAA,MAEhC,UAAA;AAAA,QAAC,gBAAAS,EAAA,SAAA,EAAO,GAAGJ,EAAc,GAAG,aAASJ,IAAAb,EAAM,YAAN,gBAAAa,EAAe,UAAS,mBAAmB;AAAA,QAChF,gBAAAQ;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,cAAc;AAAA,cACd,WAAW;AAAA,YACb;AAAA,YAEC,UAAMpB,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|