@rws-aoa/react-library
Version:
RWS AOA Design System
190 lines (189 loc) • 5.83 kB
JavaScript
import { jsx as F } from "react/jsx-runtime";
import { checkboxClasses as b, paginationItemClasses as L } from "@mui/material";
import { GridLogicOperator as f, DataGrid as O, gridClasses as t } from "@mui/x-data-grid";
import { l as p } from "../../../chunks/lodash.DPVO3Hgf.js";
import { useState as a, useEffect as v, useMemo as D } from "react";
import { FontNormalSxProps as G } from "../../../_constants.js";
import { QuickSearchToolbar as R } from "./_QuickSearchToolbar.js";
function z({
...e
}) {
const [k, d] = a(!1), [r, x] = a({
page: e.initialQueryOptions?.page ?? 0,
pageSize: e.initialQueryOptions?.pageSize ?? 10
}), [l, h] = a(e.initialQueryOptions?.sortModel ?? []), [i, C] = a(e.initialQueryOptions?.filterModel ?? {
items: [],
logicOperator: f.And,
quickFilterLogicOperator: f.And,
quickFilterValues: []
}), [y, w] = a(null), [M, u] = a(e.data?.rowCount ?? 0), n = e.mode ?? "server", g = n === "server";
async function m(o, s, c) {
if (g && e.getData) {
const P = async () => {
await e.getData({
...o,
sortModel: s,
filterModel: c
});
};
d(!0), await P(), d(!1);
}
}
v(() => {
u((o) => e.data?.rowCount ?? o);
}, [e.data?.rowCount, u]), v(() => {
m(r, l, i);
}, [r, l, i]);
const S = D(() => ({
pagination: {
paginationModel: r,
rowCount: 0
},
sorting: {
sortModel: l
},
filter: {
filterModel: i
}
}), [r, l, i]), $ = p.merge({
columnHeaderSortIconLabel: "Sorteren",
filterPanelColumns: "Kolom",
filterPanelInputLabel: "Zoekterm",
filterPanelInputPlaceholder: "Zoeken...",
toolbarQuickFilterPlaceholder: "Zoeken...",
toolbarQuickFilterLabel: "Zoeken",
toolbarQuickFilterDeleteIconLabel: "Wissen",
noRowsLabel: "Geen regels beschikbaar",
noResultsOverlayLabel: "Geen regels gevonden.",
paginationItemAriaLabel: (o) => {
switch (o) {
/* v8 ignore start */
case "first":
return "Ga naar eerste pagina";
case "last":
return "Ga naar laatste pagina";
/* v8 ignore stop */
case "next":
return "Ga naar volgende pagina";
case "previous":
return "Ga naar vorige pagina";
}
},
paginationDisplayedRows: ({
from: o,
to: s,
count: c
}) => `${o} - ${s} van ${c}`,
paginationRowsPerPage: "Regels per pagina",
footerRowSelected: (o) => `${o} regels geselecteerd`
}, e.localeText);
return /* @__PURE__ */ F(O, { columns: e.columns, disableColumnFilter: !0, disableColumnMenu: !0, disableColumnSelector: !0, disableDensitySelector: !0, disableRowSelectionOnClick: !0, disableVirtualization: !0, filterMode: n, getRowHeight: () => "auto", ignoreDiacritics: !0, initialState: S, loading: k, localeText: $, onFilterModelChange: (o) => C(o), onPaginationModelChange: x, onSortModelChange: (o) => h(o), pageSizeOptions: [5, 10, 20, 40, 80], paginationMode: n, paginationModel: r, rowCount: g ? M : void 0, rows: e.data?.rows, showToolbar: !0, slotProps: {
filterPanel: {
filterFormProps: {
operatorInputProps: {
disabled: !0,
sx: {
display: "none"
}
},
valueInputProps: {
sx: {
marginLeft: "15px"
}
}
}
},
panel: {
target: y
},
toolbar: {
setFilterButtonEl: w,
showQuickFilter: e.dataGridOverridableProps?.disableColumnFilter === !1,
quickFilterProps: {
debounceMs: 500
},
mode: n,
getData: async () => m(r, l, i),
actionButtons: e.actionButtons,
localeText: e.localeText
},
root: {
"data-qa": e["data-qa"]
}
}, slots: {
toolbar: R
}, sortingMode: n, sx: p.merge({
border: 0,
color: "var(--color-text)",
letterSpacing: "normal",
minHeight: "300px",
[`&.${t["root--densityCompact"]}`]: {
[`.${t.cell}`]: {
py: "8px"
}
},
[`&.${t["root--densityStandard"]}`]: {
[`.${t.cell}`]: {
py: "15px"
}
},
[`&.${t["root--densityComfortable"]}`]: {
[`.${t.cell}`]: {
py: "22px"
}
},
/**
* The 'no results' message does not show if the DataGrid does not have a fixed height.
* Because a fixed height is not desirable, we set a min-height on the DataGrid and set
* the min-height of the virtualScroller to half of that height.
*/
[`.${t.virtualScroller}`]: {
minHeight: "150px",
overflow: "hidden",
position: "relative"
},
[`.${t.columnHeader}`]: {
"--DataGrid-containerBackground": "var(--color-rijks-skyblue)",
backgroundColor: "var(--color-rijks-skyblue)",
color: "var(--color-text-light)"
},
[`.${t.row}`]: {
":hover": {
backgroundColor: "var(--color-rijks-skyblue-light)"
},
":nth-of-type(even)": {
backgroundColor: "var(--color-rijks-grey-1)",
":hover": {
backgroundColor: "var(--color-rijks-skyblue-light)"
}
}
},
[`.${t.columnHeader}, .${t.cell}, .MuiDataGrid-columnsContainer`]: {
borderRight: "1px solid var(--color-rijks-grey-2)"
},
[`.${t.cell}`]: {
color: "var(--color-text)"
},
[`.${L.root}`]: {
borderRadius: 0
},
[`.${b.root}`]: {
color: "var(--color-primary)",
":focus": {
outline: "2px dashed var(--color-text)",
outlineOffset: "-9px",
borderRadius: 0
},
":disabled": {
color: "var(--color-disabled)"
}
},
[`.${t.columnHeader} .${b.root}`]: {
color: "white"
}
}, e.sx, G), ...e.dataGridOverridableProps });
}
export {
z as AoaTable
};
//# sourceMappingURL=Table.js.map