@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
246 lines (245 loc) • 10.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Center, Loader, useProps, useStyles } from '@mantine/core';
import { useClickOutside, useMergedRef } from '@mantine/hooks';
import { defaultColumnSizing, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import isEqual from 'fast-deep-equal';
import { Children, useEffect, useRef } from 'react';
import { identity } from '../../utils';
import classes from './Table.module.css';
import { TableProvider } from './TableContext';
import { TableLayouts } from './layouts/TableLayouts';
import { TableActionItem } from './table-actions';
import { TableActionsColumn } from './table-column/TableActionsColumn';
import { TableAccordionColumn, TableCollapsibleColumn } from './table-column/TableCollapsibleColumn';
import { TableSelectableColumn } from './table-column/TableSelectableColumn';
import { TableColumnsSelector } from './table-columns-selector/TableColumnsSelector';
import { TableDateRangePicker } from './table-date-range-picker/TableDateRangePicker';
import { TableFilter } from './table-filter/TableFilter';
import { TableFooter } from './table-footer/TableFooter';
import { TableHeader } from './table-header/TableHeader';
import { TableLastUpdated } from './table-last-updated/TableLastUpdated';
import { TableLoading } from './table-loading/TableLoading';
import { TableNoData } from './table-no-data/TableNoData';
import { TablePagination } from './table-pagination/TablePagination';
import { TablePerPage } from './table-per-page/TablePerPage';
import { TablePredicate } from './table-predicate/TablePredicate';
const defaultProps = {
layouts: [
TableLayouts.Rows
],
layoutProps: {},
loading: false,
additionalRootNodes: [],
options: {},
getRowActions: ()=>[]
};
export const Table = (props)=>{
const { store, data, getRowId, getRowAttributes, getRowExpandedContent, getRowActions, columns, layouts, layoutProps, children, loading, additionalRootNodes, options, ref, // Style props
style, className, classNames, styles, unstyled, ...others } = useProps('PlasmaTable', defaultProps, props);
const getStyles = useStyles({
name: 'PlasmaTable',
classes,
props: props,
className,
style,
classNames,
styles,
unstyled
});
const convertedChildren = Children.toArray(children);
const header = convertedChildren.find((child)=>child.type === TableHeader);
const footer = convertedChildren.find((child)=>child.type === TableFooter);
const lastUpdated = convertedChildren.find((child)=>child.type === TableLastUpdated);
const noData = convertedChildren.find((child)=>child.type === TableNoData);
const table = useReactTable({
data,
state: {
globalFilter: store.state.globalFilter,
sorting: store.state.sorting,
pagination: store.state.pagination,
columnVisibility: store.state.columnVisibility,
expanded: store.state.expanded
},
onGlobalFilterChange: store.setGlobalFilter,
onExpandedChange: store.setExpanded,
onSortingChange: store.setSorting,
onPaginationChange: store.setPagination,
onColumnVisibilityChange: store.setColumnVisibility,
columns: store.multiRowSelectionEnabled ? [
TableSelectableColumn
].concat(columns) : columns,
getCoreRowModel: getCoreRowModel(),
manualPagination: options?.getPaginationRowModel === undefined,
enableMultiRowSelection: !!store.multiRowSelectionEnabled,
getRowId,
getRowCanExpand: (row)=>!!getRowExpandedContent?.(row.original, row.index, row),
enableRowSelection: !loading,
defaultColumn: {
size: undefined,
minSize: defaultColumnSizing.minSize,
maxSize: defaultColumnSizing.maxSize
},
rowCount: options?.getFilteredRowModel ? undefined : store.state.totalEntries,
...options
});
table.setOptions((prev)=>({
...prev,
state: {
...prev.state,
rowSelection: store.state.rowSelection
},
onRowSelectionChange: (rowSelectionUpdater)=>{
store.setRowSelection((old)=>{
const newRowSelection = rowSelectionUpdater instanceof Function ? rowSelectionUpdater(old) : rowSelectionUpdater;
if (isEqual(old, newRowSelection)) {
return old;
}
const rows = table.getRowModel().rowsById;
Object.keys(newRowSelection).forEach((rowId)=>{
if (newRowSelection[rowId] === true) {
if (!rows[rowId]) {
console.error('The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.');
}
newRowSelection[rowId] = rows[rowId]?.original ?? true;
}
});
return newRowSelection;
});
}
}));
useEffect(()=>{
// Update the selected rows data when the data prop changes
if (store.getSelectedRows().length > 0) {
store.setRowSelection((old)=>{
const rowsById = table.getRowModel().rowsById;
const newSelection = {
...old
};
Object.keys(old).forEach((rowId)=>{
if (rowsById[rowId]) {
newSelection[rowId] = rowsById[rowId].original;
}
});
return isEqual(newSelection, old) ? old : newSelection;
});
}
}, [
data
]);
const containerRef = useRef();
useClickOutside(()=>{
if (!store.multiRowSelectionEnabled && store.getSelectedRows().length > 0) {
store.clearRowSelection();
}
}, null, [
containerRef.current,
...additionalRootNodes
]);
const mergedRef = useMergedRef(containerRef, ref);
if (!data) {
return /*#__PURE__*/ _jsx(Center, {
style: {
flexGrow: 1
},
children: /*#__PURE__*/ _jsx(Loader, {})
});
}
const Layout = store.state.layout === null ? layouts[0] : layouts.find(({ displayName })=>displayName === store.state.layout);
const hasRows = table.getRowModel().rows.length > 0;
return /*#__PURE__*/ _jsx(Box, {
ref: mergedRef,
...others,
...getStyles('root'),
children: /*#__PURE__*/ _jsx(TableProvider, {
value: {
getStyles,
getRowActions,
store,
table,
layouts,
containerRef
},
children: /*#__PURE__*/ _jsx(Layout, {
children: store.isVacant && !store.isFiltered ? noData : /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsxs(Box, {
component: "table",
...getStyles('table'),
mod: {
loading
},
children: [
/*#__PURE__*/ _jsxs("thead", {
...getStyles('header'),
children: [
header ? /*#__PURE__*/ _jsx("tr", {
children: /*#__PURE__*/ _jsx("th", {
style: {
padding: 0
},
colSpan: table.getAllColumns().length,
children: header
})
}) : null,
/*#__PURE__*/ _jsx(Layout.Header, {
getRowExpandedContent: getRowExpandedContent,
getRowAttributes: getRowAttributes,
loading: loading,
...layoutProps
})
]
}),
/*#__PURE__*/ _jsx("tbody", {
...getStyles('body'),
children: hasRows ? /*#__PURE__*/ _jsx(Layout.Body, {
getRowExpandedContent: getRowExpandedContent,
getRowAttributes: getRowAttributes,
loading: loading,
...layoutProps
}) : /*#__PURE__*/ _jsx("tr", {
children: /*#__PURE__*/ _jsx("td", {
colSpan: table.getAllColumns().length,
children: /*#__PURE__*/ _jsx(TableLoading, {
visible: loading || !store.isFiltered,
children: noData
})
})
})
})
]
}),
footer,
lastUpdated
]
})
})
})
});
};
export const TableComponentsOrder = {
MultiSelectInfo: 7,
Actions: 6,
Predicate: 5,
Filter: 4,
DateRangePicker: 3,
ColumnsSelector: 2,
LayoutControl: 1
};
Table.AccordionColumn = TableAccordionColumn;
Table.ActionsColumn = TableActionsColumn;
Table.ActionItem = TableActionItem;
Table.CollapsibleColumn = TableCollapsibleColumn;
Table.ColumnsSelector = TableColumnsSelector;
Table.DateRangePicker = TableDateRangePicker;
Table.Filter = TableFilter;
Table.Footer = TableFooter;
Table.Header = TableHeader;
Table.LastUpdated = TableLastUpdated;
Table.Layouts = TableLayouts;
Table.Loading = TableLoading;
Table.NoData = TableNoData;
Table.Pagination = TablePagination;
Table.PerPage = TablePerPage;
Table.Predicate = TablePredicate;
Table.extend = identity;
//# sourceMappingURL=Table.js.map