@rws-aoa/react-library 3.6.2 → 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.
|
@@ -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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"}
|