@rws-aoa/react-library
Version:
RWS AOA Design System
195 lines (194 loc) • 5.82 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 D, gridClasses as t } from "@mui/x-data-grid";
import { l as p } from "../../../chunks/lodash.CA_K01A9.js";
import { useState as r, useEffect as v, useMemo as G } from "react";
import { FontNormalSxProps as R } from "../../../_constants.js";
import { QuickSearchToolbar as I } from "./_QuickSearchToolbar.js";
function z({
...e
}) {
const [k, d] = r(!1), [l, x] = r({
page: 0,
pageSize: 10
}), [i, h] = r([]), [n, C] = r({
items: []
}), [S, w] = r(null), [M, u] = r(e.data?.rowCount ?? 0), a = e.mode ?? "server", g = a === "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(l, i, n);
}, [l, i, n]);
const y = G(() => ({
pagination: {
paginationModel: {
page: 0,
pageSize: 10
},
rowCount: 0
},
sorting: {
sortModel: e.initialSort ? [e.initialSort] : []
},
filter: {
filterModel: {
items: [],
logicOperator: f.And,
quickFilterLogicOperator: f.And,
quickFilterValues: []
}
}
}), [e.initialSort]), $ = 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 next */
case "first":
return "Ga naar eerste pagina";
/* v8 ignore next */
case "last":
return "Ga naar laatste pagina";
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(D, { columns: e.columns, disableColumnFilter: !0, disableColumnMenu: !0, disableColumnSelector: !0, disableDensitySelector: !0, disableRowSelectionOnClick: !0, disableVirtualization: !0, filterMode: a, getRowHeight: () => "auto", ignoreDiacritics: !0, initialState: y, loading: k, localeText: $, onFilterModelChange: (o) => C(o), onPaginationModelChange: x, onSortModelChange: (o) => h(o), pageSizeOptions: [5, 10, 20, 40, 80], paginationMode: a, paginationModel: l, 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: S
},
toolbar: {
setFilterButtonEl: w,
showQuickFilter: e.dataGridOverridableProps?.disableColumnFilter === !1,
quickFilterProps: {
debounceMs: 500
},
mode: a,
getData: async () => m(l, i, n),
actionButtons: e.actionButtons,
localeText: e.localeText
},
root: {
"data-qa": e["data-qa"]
}
}, slots: {
toolbar: I
}, sortingMode: a, 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, R), ...e.dataGridOverridableProps });
}
export {
z as AoaTable
};
//# sourceMappingURL=Table.js.map