@rws-aoa/react-library 3.6.1 → 3.6.3
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/atoms/table/Table.d.ts +1 -1
- package/dist/components/atoms/table/Table.d.ts.map +1 -1
- package/dist/components/atoms/table/Table.js +37 -22
- package/dist/components/atoms/table/Table.js.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.d.ts.map +1 -1
- package/dist/components/molecules/file-dropzone/FileDropzone.js +36 -31
- 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;"}
|
|
@@ -51,7 +51,7 @@ export type AoaTableProps<T extends NonNullObject = any> = ModeProps & {
|
|
|
51
51
|
refreshTable: string;
|
|
52
52
|
};
|
|
53
53
|
/** Overwrite a safe selection of the {@link DataGrid} properties */
|
|
54
|
-
dataGridOverridableProps?: Pick<DataGridProps<T>, "ignoreDiacritics" | "loading" | "getRowId">;
|
|
54
|
+
dataGridOverridableProps?: Pick<DataGridProps<T>, "ignoreDiacritics" | "loading" | "getRowId" | "checkboxSelection" | "isRowSelectable" | "rowSelectionModel" | "onRowSelectionModelChange">;
|
|
55
55
|
};
|
|
56
56
|
/**
|
|
57
57
|
* Constructs a table using pre-defined Rijks styling
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGhJ,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG5E,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG;IACzD,6DAA6D;IAC7D,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AAE7E,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,SAAS,EAAE,aAAa,CAAC;IACzB,oCAAoC;IACpC,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,KAAK,SAAS;AACZ,gGAAgG;AAE9F;IAAE,OAAO,EAAE,CAAC,YAAY,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE;AACzF,8GAA8G;GAC5G;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI,SAAS,GAAG;IACrE,wDAAwD;IACxD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,+CAA+C;IAC/C,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,uDAAuD;IACvD,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,0GAA0G;IAC1G,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,kFAAkF;IAClF,UAAU,CAAC,EAAE,cAAc,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,oEAAoE;IACpE,wBAAwB,CAAC,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGhJ,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAG5E,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG;IACzD,6DAA6D;IAC7D,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AAE7E,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,SAAS,EAAE,aAAa,CAAC;IACzB,oCAAoC;IACpC,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,KAAK,SAAS;AACZ,gGAAgG;AAE9F;IAAE,OAAO,EAAE,CAAC,YAAY,EAAE,oBAAoB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE;AACzF,8GAA8G;GAC5G;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,IAAI,SAAS,GAAG;IACrE,wDAAwD;IACxD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,+CAA+C;IAC/C,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,uDAAuD;IACvD,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,0GAA0G;IAC1G,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IACtD,kFAAkF;IAClF,UAAU,CAAC,EAAE,cAAc,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,oEAAoE;IACpE,wBAAwB,CAAC,EAAE,IAAI,CAC7B,aAAa,CAAC,CAAC,CAAC,EAChB,kBAAkB,GAAG,SAAS,GAAG,UAAU,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,2BAA2B,CAC1I,CAAC;CACH,CAAC;AAOF;;;;;;;;;;;GAWG;AAEH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,GAAG,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6LjF;AAED,eAAO,MAAM,QAAQ,EAA+B,OAAO,kBAAkB,CAAC"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsx as w } from "react/jsx-runtime";
|
|
2
2
|
import "@mui/material";
|
|
3
|
-
import { DataGrid as
|
|
4
|
-
import { m as
|
|
5
|
-
import { memo as
|
|
3
|
+
import { DataGrid as R } from "@mui/x-data-grid";
|
|
4
|
+
import { m as P } from "../../../chunks/index.CtmQWjvP.js";
|
|
5
|
+
import { memo as F, useState as i, useCallback as k, useEffect as v } from "react";
|
|
6
6
|
import { FontNormalSxProps as I } from "../../../_constants.js";
|
|
7
7
|
import { QuickSearchToolbar as T } from "./_QuickSearchToolbar.js";
|
|
8
8
|
function j(e) {
|
|
9
|
-
var
|
|
10
|
-
const [
|
|
9
|
+
var b, m, M;
|
|
10
|
+
const [h, c] = i(!1), [l, D] = i({
|
|
11
11
|
page: 0,
|
|
12
12
|
pageSize: 10
|
|
13
|
-
}), [n,
|
|
13
|
+
}), [n, f] = i([]), [d, x] = i({
|
|
14
14
|
items: []
|
|
15
|
-
}), r = e.mode ?? "server", s = r === "server",
|
|
16
|
-
|
|
17
|
-
}, []),
|
|
18
|
-
|
|
19
|
-
}, []), [
|
|
15
|
+
}), r = e.mode ?? "server", s = r === "server", S = k((o) => {
|
|
16
|
+
f(o);
|
|
17
|
+
}, []), C = k((o) => {
|
|
18
|
+
x(o);
|
|
19
|
+
}, []), [G, u] = i(((b = e.data) == null ? void 0 : b.totalItems) || 0), g = (o, t, a) => {
|
|
20
20
|
if (s && e.getData) {
|
|
21
21
|
const y = async () => {
|
|
22
22
|
await e.getData({ ...o, sortModel: t, filterModel: a });
|
|
@@ -29,10 +29,10 @@ function j(e) {
|
|
|
29
29
|
var t, a;
|
|
30
30
|
return ((t = e.data) == null ? void 0 : t.totalItems) !== void 0 ? (a = e.data) == null ? void 0 : a.totalItems : o;
|
|
31
31
|
});
|
|
32
|
-
}, [(
|
|
32
|
+
}, [(m = e.data) == null ? void 0 : m.totalItems, u]), v(() => {
|
|
33
33
|
g(l, n, d);
|
|
34
34
|
}, [l, n, d]), /* @__PURE__ */ w(
|
|
35
|
-
|
|
35
|
+
R,
|
|
36
36
|
{
|
|
37
37
|
initialState: {
|
|
38
38
|
sorting: {
|
|
@@ -47,16 +47,16 @@ function j(e) {
|
|
|
47
47
|
disableVirtualization: !0,
|
|
48
48
|
columns: e.columns,
|
|
49
49
|
rows: (M = e.data) == null ? void 0 : M.items,
|
|
50
|
-
rowCount: s ?
|
|
50
|
+
rowCount: s ? G : void 0,
|
|
51
51
|
getRowHeight: () => "auto",
|
|
52
52
|
pageSizeOptions: [5, 10, 20, 40, 80],
|
|
53
53
|
paginationModel: l,
|
|
54
54
|
paginationMode: r,
|
|
55
|
-
onPaginationModelChange:
|
|
55
|
+
onPaginationModelChange: D,
|
|
56
56
|
sortingMode: r,
|
|
57
|
-
onSortModelChange:
|
|
57
|
+
onSortModelChange: S,
|
|
58
58
|
filterMode: r,
|
|
59
|
-
onFilterModelChange:
|
|
59
|
+
onFilterModelChange: C,
|
|
60
60
|
slots: {
|
|
61
61
|
toolbar: T
|
|
62
62
|
},
|
|
@@ -71,9 +71,9 @@ function j(e) {
|
|
|
71
71
|
localeText: e.localeText
|
|
72
72
|
}
|
|
73
73
|
},
|
|
74
|
-
loading:
|
|
74
|
+
loading: h,
|
|
75
75
|
"data-qa": e["data-qa"],
|
|
76
|
-
sx:
|
|
76
|
+
sx: P(
|
|
77
77
|
{
|
|
78
78
|
border: 0,
|
|
79
79
|
color: "var(--color-text)",
|
|
@@ -128,6 +128,20 @@ function j(e) {
|
|
|
128
128
|
},
|
|
129
129
|
".MuiPaginationItem-root": {
|
|
130
130
|
borderRadius: 0
|
|
131
|
+
},
|
|
132
|
+
".MuiCheckbox-root": {
|
|
133
|
+
color: "var(--color-primary)",
|
|
134
|
+
":focus": {
|
|
135
|
+
outline: "2px dashed var(--color-text)",
|
|
136
|
+
outlineOffset: "-9px",
|
|
137
|
+
borderRadius: 0
|
|
138
|
+
},
|
|
139
|
+
":disabled": {
|
|
140
|
+
color: "var(--color-disabled)"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
".MuiDataGrid-columnHeader .MuiCheckbox-root": {
|
|
144
|
+
color: "white"
|
|
131
145
|
}
|
|
132
146
|
},
|
|
133
147
|
e.sx,
|
|
@@ -143,14 +157,15 @@ function j(e) {
|
|
|
143
157
|
MuiTablePagination: {
|
|
144
158
|
labelDisplayedRows: ({ from: o, to: t, count: a }) => `${o} - ${t} van ${a}`,
|
|
145
159
|
labelRowsPerPage: "Regels per pagina"
|
|
146
|
-
}
|
|
160
|
+
},
|
|
161
|
+
footerRowSelected: (o) => `${o} regels geselecteerd`
|
|
147
162
|
},
|
|
148
163
|
...e.dataGridOverridableProps
|
|
149
164
|
}
|
|
150
165
|
);
|
|
151
166
|
}
|
|
152
|
-
const
|
|
167
|
+
const q = F(j);
|
|
153
168
|
export {
|
|
154
|
-
|
|
169
|
+
q as AoaTable
|
|
155
170
|
};
|
|
156
171
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { type SxProps } from \"@mui/material\";\nimport { DataGrid, type DataGridProps, type GridColDef, type GridFilterModel, type GridLocaleText, type GridSortModel } from \"@mui/x-data-grid\";\nimport merge from \"lodash.merge\";\nimport { memo, useCallback, useEffect, useState } from \"react\";\nimport { FontNormalSxProps, type NonNullObject } from \"../../../_constants\";\nimport { QuickSearchToolbar } from \"./_QuickSearchToolbar\";\n\nexport interface AoaTableData<T extends NonNullObject = any> {\n /** The paged, filtered and sorted items from the database */\n items: T[];\n /** The total number of items present in the database table */\n totalItems: number;\n}\n\nexport type AoaTableColumns<T extends NonNullObject = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n /** The current page of the table */\n page: number;\n /** The maximum number of items that are shown on a page */\n pageSize: number;\n /** Material UI's GridSortModel */\n sortModel: GridSortModel;\n /** Material UI's GridFilterModel */\n filterModel: GridFilterModel;\n}\n\ntype ModeProps =\n /** The Redux action that takes PaginationModel as parameter to retrieve data from the server */\n // eslint-disable-next-line no-unused-vars\n | { getData: (queryOptions: AoaTableQueryOptions) => Promise<void> | void; mode?: never }\n /** Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side */\n | { getData?: never; mode: \"client\" };\n\nexport type AoaTableProps<T extends NonNullObject = any> = ModeProps & {\n /** The TableData object to be displayed in the table */\n data: AoaTableData<T>;\n /** The column structure to display the data */\n columns: GridColDef<T>[];\n /** Data-qa tag for E2E test purposes */\n \"data-qa\"?: string;\n /** Material UI's property to apply styling */\n sx?: SxProps;\n /** Action buttons shown in the toolbar of the table */\n actionButtons?: JSX.Element[];\n /** Sets the initial sortModel in case the required sorting differs from the back-end's default sorting */\n initialSort?: { field: string; sort: \"asc\" | \"desc\" };\n /** Overwrites the default labels when you need a different language than Dutch */\n localeText?: GridLocaleText & { refreshTable: string };\n /** Overwrite a safe selection of the {@link DataGrid} properties */\n dataGridOverridableProps?: Pick<DataGridProps<T>, \"ignoreDiacritics\" | \"loading\" | \"getRowId\">;\n};\n\ninterface PaginationModel {\n page: number;\n pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n * @param props Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n * getData={(queryOptions) => getMockData(queryOptions)}\n * data={mockData}\n * columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends NonNullObject = any>(props: AoaTableProps<T>) {\n const [isLoading, setIsLoading] = useState(false);\n const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n page: 0,\n pageSize: 10\n });\n const [sortModel, setSortModel] = useState<GridSortModel>([]);\n const [filterModel, setFilterModel] = useState<GridFilterModel>({\n items: []\n });\n\n const mode = props.mode ?? \"server\";\n const isServerMode = mode === \"server\";\n\n const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n setSortModel(sortModel);\n }, []);\n\n const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n setFilterModel(filterModel);\n }, []);\n\n const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n const getData = (paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) => {\n if (isServerMode && props.getData) {\n const fetchData = async () => {\n await props.getData({ ...paginationModel, sortModel, filterModel });\n };\n setIsLoading(true);\n fetchData();\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n setRowCountState((prevRowCountState) => (props.data?.totalItems !== undefined ? props.data?.totalItems : prevRowCountState));\n }, [props.data?.totalItems, setRowCountState]);\n\n useEffect(() => {\n getData(paginationModel, sortModel, filterModel);\n }, [paginationModel, sortModel, filterModel]);\n\n return (\n <DataGrid\n initialState={{\n sorting: {\n sortModel: props.initialSort ? [props.initialSort] : []\n }\n }}\n disableColumnMenu\n disableColumnFilter\n disableColumnSelector\n disableDensitySelector\n disableRowSelectionOnClick\n disableVirtualization\n columns={props.columns}\n rows={props.data?.items}\n rowCount={isServerMode ? rowCountState : undefined}\n getRowHeight={() => \"auto\"}\n pageSizeOptions={[5, 10, 20, 40, 80]}\n paginationModel={paginationModel}\n paginationMode={mode}\n onPaginationModelChange={setPaginationModel}\n sortingMode={mode}\n onSortModelChange={handleSortModelChange}\n filterMode={mode}\n onFilterModelChange={onFilterChange}\n slots={{\n toolbar: QuickSearchToolbar\n }}\n slotProps={{\n toolbar: {\n showQuickFilter: true,\n quickFilterProps: { debounceMs: 500 },\n mode,\n isServerMode,\n getData: () => getData(paginationModel, sortModel, filterModel),\n actionButtons: props.actionButtons,\n localeText: props.localeText\n }\n }}\n loading={isLoading}\n data-qa={props[\"data-qa\"]}\n sx={merge(\n {\n border: 0,\n color: \"var(--color-text)\",\n letterSpacing: \"normal\",\n minHeight: \"300px\",\n\n \"&.MuiDataGrid-root--densityCompact\": {\n \".MuiDataGrid-cell\": {\n py: \"8px\"\n }\n },\n \"&.MuiDataGrid-root--densityStandard\": {\n \".MuiDataGrid-cell\": {\n py: \"15px\"\n }\n },\n \"&.MuiDataGrid-root--densityComfortable\": {\n \".MuiDataGrid-cell\": {\n py: \"22px\"\n }\n },\n\n /**\n * The 'no results' message does not show if the DataGrid does not have a fixed height.\n * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n * the min-height of the virtualScroller to half of that height.\n */\n \".MuiDataGrid-virtualScroller\": {\n minHeight: \"150px\",\n overflow: \"hidden\",\n position: \"relative\"\n },\n\n \".MuiDataGrid-columnHeaders\": {\n \"--DataGrid-containerBackground\": \"var(--color-rijks-skyblue)\",\n backgroundCcolor: \"var(--color-rijks-skyblue)\",\n color: \"var(--color-text-light)\"\n },\n\n \".MuiDataGrid-row\": {\n \":hover\": {\n backgroundColor: \"var(--color-rijks-skyblue-light)\"\n },\n\n \":nth-of-type(even)\": {\n backgroundColor: \"var(--color-rijks-grey-1)\",\n\n \":hover\": {\n backgroundColor: \"var(--color-rijks-skyblue-light)\"\n }\n }\n },\n\n \".MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell\": {\n borderRight: \"1px solid var(--color-rijks-grey-2)\"\n },\n\n \".MuiDataGrid-cell\": {\n color: \"var(--color-text)\"\n },\n\n \".MuiPaginationItem-root\": {\n borderRadius: 0\n }\n },\n props.sx,\n FontNormalSxProps\n )}\n localeText={\n props.localeText ?? {\n columnHeaderSortIconLabel: \"Sorteren\",\n toolbarQuickFilterPlaceholder: \"Zoeken...\",\n toolbarQuickFilterLabel: \"Zoeken\",\n toolbarQuickFilterDeleteIconLabel: \"Wissen\",\n noRowsLabel: \"Geen regels beschikbaar\",\n noResultsOverlayLabel: \"Geen regels gevonden.\",\n MuiTablePagination: {\n labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n labelRowsPerPage: \"Regels per pagina\"\n }\n }\n }\n {...props.dataGridOverridableProps}\n />\n );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","_c","QuickSearchToolbar","merge","FontNormalSxProps","from","to","count","AoaTable","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { type SxProps } from \"@mui/material\";\nimport { DataGrid, type DataGridProps, type GridColDef, type GridFilterModel, type GridLocaleText, type GridSortModel } from \"@mui/x-data-grid\";\nimport merge from \"lodash.merge\";\nimport { memo, useCallback, useEffect, useState } from \"react\";\nimport { FontNormalSxProps, type NonNullObject } from \"../../../_constants\";\nimport { QuickSearchToolbar } from \"./_QuickSearchToolbar\";\n\nexport interface AoaTableData<T extends NonNullObject = any> {\n /** The paged, filtered and sorted items from the database */\n items: T[];\n /** The total number of items present in the database table */\n totalItems: number;\n}\n\nexport type AoaTableColumns<T extends NonNullObject = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n /** The current page of the table */\n page: number;\n /** The maximum number of items that are shown on a page */\n pageSize: number;\n /** Material UI's GridSortModel */\n sortModel: GridSortModel;\n /** Material UI's GridFilterModel */\n filterModel: GridFilterModel;\n}\n\ntype ModeProps =\n /** The Redux action that takes PaginationModel as parameter to retrieve data from the server */\n // eslint-disable-next-line no-unused-vars\n | { getData: (queryOptions: AoaTableQueryOptions) => Promise<void> | void; mode?: never }\n /** Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side */\n | { getData?: never; mode: \"client\" };\n\nexport type AoaTableProps<T extends NonNullObject = any> = ModeProps & {\n /** The TableData object to be displayed in the table */\n data: AoaTableData<T>;\n /** The column structure to display the data */\n columns: GridColDef<T>[];\n /** Data-qa tag for E2E test purposes */\n \"data-qa\"?: string;\n /** Material UI's property to apply styling */\n sx?: SxProps;\n /** Action buttons shown in the toolbar of the table */\n actionButtons?: JSX.Element[];\n /** Sets the initial sortModel in case the required sorting differs from the back-end's default sorting */\n initialSort?: { field: string; sort: \"asc\" | \"desc\" };\n /** Overwrites the default labels when you need a different language than Dutch */\n localeText?: GridLocaleText & { refreshTable: string };\n /** Overwrite a safe selection of the {@link DataGrid} properties */\n dataGridOverridableProps?: Pick<\n DataGridProps<T>,\n \"ignoreDiacritics\" | \"loading\" | \"getRowId\" | \"checkboxSelection\" | \"isRowSelectable\" | \"rowSelectionModel\" | \"onRowSelectionModelChange\"\n >;\n};\n\ninterface PaginationModel {\n page: number;\n pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n * @param props Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n * getData={(queryOptions) => getMockData(queryOptions)}\n * data={mockData}\n * columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends NonNullObject = any>(props: AoaTableProps<T>) {\n const [isLoading, setIsLoading] = useState(false);\n const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n page: 0,\n pageSize: 10\n });\n const [sortModel, setSortModel] = useState<GridSortModel>([]);\n const [filterModel, setFilterModel] = useState<GridFilterModel>({\n items: []\n });\n\n const mode = props.mode ?? \"server\";\n const isServerMode = mode === \"server\";\n\n const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n setSortModel(sortModel);\n }, []);\n\n const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n setFilterModel(filterModel);\n }, []);\n\n const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n const getData = (paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) => {\n if (isServerMode && props.getData) {\n const fetchData = async () => {\n await props.getData({ ...paginationModel, sortModel, filterModel });\n };\n setIsLoading(true);\n fetchData();\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n setRowCountState((prevRowCountState) => (props.data?.totalItems !== undefined ? props.data?.totalItems : prevRowCountState));\n }, [props.data?.totalItems, setRowCountState]);\n\n useEffect(() => {\n getData(paginationModel, sortModel, filterModel);\n }, [paginationModel, sortModel, filterModel]);\n\n return (\n <DataGrid\n initialState={{\n sorting: {\n sortModel: props.initialSort ? [props.initialSort] : []\n }\n }}\n disableColumnMenu\n disableColumnFilter\n disableColumnSelector\n disableDensitySelector\n disableRowSelectionOnClick\n disableVirtualization\n columns={props.columns}\n rows={props.data?.items}\n rowCount={isServerMode ? rowCountState : undefined}\n getRowHeight={() => \"auto\"}\n pageSizeOptions={[5, 10, 20, 40, 80]}\n paginationModel={paginationModel}\n paginationMode={mode}\n onPaginationModelChange={setPaginationModel}\n sortingMode={mode}\n onSortModelChange={handleSortModelChange}\n filterMode={mode}\n onFilterModelChange={onFilterChange}\n slots={{\n toolbar: QuickSearchToolbar\n }}\n slotProps={{\n toolbar: {\n showQuickFilter: true,\n quickFilterProps: { debounceMs: 500 },\n mode,\n isServerMode,\n getData: () => getData(paginationModel, sortModel, filterModel),\n actionButtons: props.actionButtons,\n localeText: props.localeText\n }\n }}\n loading={isLoading}\n data-qa={props[\"data-qa\"]}\n sx={merge(\n {\n border: 0,\n color: \"var(--color-text)\",\n letterSpacing: \"normal\",\n minHeight: \"300px\",\n\n \"&.MuiDataGrid-root--densityCompact\": {\n \".MuiDataGrid-cell\": {\n py: \"8px\"\n }\n },\n \"&.MuiDataGrid-root--densityStandard\": {\n \".MuiDataGrid-cell\": {\n py: \"15px\"\n }\n },\n \"&.MuiDataGrid-root--densityComfortable\": {\n \".MuiDataGrid-cell\": {\n py: \"22px\"\n }\n },\n\n /**\n * The 'no results' message does not show if the DataGrid does not have a fixed height.\n * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n * the min-height of the virtualScroller to half of that height.\n */\n \".MuiDataGrid-virtualScroller\": {\n minHeight: \"150px\",\n overflow: \"hidden\",\n position: \"relative\"\n },\n\n \".MuiDataGrid-columnHeaders\": {\n \"--DataGrid-containerBackground\": \"var(--color-rijks-skyblue)\",\n backgroundCcolor: \"var(--color-rijks-skyblue)\",\n color: \"var(--color-text-light)\"\n },\n\n \".MuiDataGrid-row\": {\n \":hover\": {\n backgroundColor: \"var(--color-rijks-skyblue-light)\"\n },\n\n \":nth-of-type(even)\": {\n backgroundColor: \"var(--color-rijks-grey-1)\",\n\n \":hover\": {\n backgroundColor: \"var(--color-rijks-skyblue-light)\"\n }\n }\n },\n\n \".MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell\": {\n borderRight: \"1px solid var(--color-rijks-grey-2)\"\n },\n\n \".MuiDataGrid-cell\": {\n color: \"var(--color-text)\"\n },\n\n \".MuiPaginationItem-root\": {\n borderRadius: 0\n },\n\n \".MuiCheckbox-root\": {\n color: \"var(--color-primary)\",\n\n \":focus\": {\n outline: \"2px dashed var(--color-text)\",\n outlineOffset: \"-9px\",\n borderRadius: 0\n },\n\n \":disabled\": {\n color: \"var(--color-disabled)\"\n }\n },\n\n \".MuiDataGrid-columnHeader .MuiCheckbox-root\": {\n color: \"white\"\n }\n },\n props.sx,\n FontNormalSxProps\n )}\n localeText={\n props.localeText ?? {\n columnHeaderSortIconLabel: \"Sorteren\",\n toolbarQuickFilterPlaceholder: \"Zoeken...\",\n toolbarQuickFilterLabel: \"Zoeken\",\n toolbarQuickFilterDeleteIconLabel: \"Wissen\",\n noRowsLabel: \"Geen regels beschikbaar\",\n noResultsOverlayLabel: \"Geen regels gevonden.\",\n MuiTablePagination: {\n labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n labelRowsPerPage: \"Regels per pagina\"\n },\n footerRowSelected: (count) => `${count} regels geselecteerd`\n }\n }\n {...props.dataGridOverridableProps}\n />\n );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","_c","QuickSearchToolbar","merge","FontNormalSxProps","from","to","count","AoaTable","memo"],"mappings":"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"}
|
|
@@ -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;;;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,
|
|
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
|
|
1
|
+
import { jsxs as y, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { Box as f } from "@mui/material";
|
|
3
3
|
import { useCallback as D } from "react";
|
|
4
4
|
import { useDropzone as U } from "react-dropzone";
|
|
5
|
-
import { toast as
|
|
6
|
-
import { isExtensionAllowed as
|
|
7
|
-
function
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
5
|
+
import { toast as x } from "react-toastify";
|
|
6
|
+
import { isExtensionAllowed as W } from "../../../_constants.js";
|
|
7
|
+
function A(e) {
|
|
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, {
|
|
17
22
|
file: n,
|
|
18
|
-
...((
|
|
19
|
-
}) :
|
|
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.maxUploadFiles &&
|
|
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)",
|
|
@@ -70,6 +75,6 @@ function w(e) {
|
|
|
70
75
|
);
|
|
71
76
|
}
|
|
72
77
|
export {
|
|
73
|
-
|
|
78
|
+
A as AoaFileDropzone
|
|
74
79
|
};
|
|
75
80
|
//# sourceMappingURL=FileDropzone.js.map
|
|
@@ -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 /**\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 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 if (props.maxUploadFiles && filesClone.length > props.maxUploadFiles) {\n
|
|
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;"}
|