@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
298 lines (297 loc) • 14.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Table: function() {
return Table;
},
TableComponentsOrder: function() {
return TableComponentsOrder;
}
});
var _instanceof = require("@swc/helpers/_/_instanceof");
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _hooks = require("@mantine/hooks");
var _reacttable = require("@tanstack/react-table");
var _fastdeepequal = /*#__PURE__*/ _interop_require_default._(require("fast-deep-equal"));
var _react = require("react");
var _utils = require("../../utils");
var _Tablemodulecss = /*#__PURE__*/ _interop_require_default._(require("./Table.module.css"));
var _TableContext = require("./TableContext");
var _TableLayouts = require("./layouts/TableLayouts");
var _tableactions = require("./table-actions");
var _TableActionsColumn = require("./table-column/TableActionsColumn");
var _TableCollapsibleColumn = require("./table-column/TableCollapsibleColumn");
var _TableSelectableColumn = require("./table-column/TableSelectableColumn");
var _TableColumnsSelector = require("./table-columns-selector/TableColumnsSelector");
var _TableDateRangePicker = require("./table-date-range-picker/TableDateRangePicker");
var _TableFilter = require("./table-filter/TableFilter");
var _TableFooter = require("./table-footer/TableFooter");
var _TableHeader = require("./table-header/TableHeader");
var _TableLastUpdated = require("./table-last-updated/TableLastUpdated");
var _TableLoading = require("./table-loading/TableLoading");
var _TableNoData = require("./table-no-data/TableNoData");
var _TablePagination = require("./table-pagination/TablePagination");
var _TablePerPage = require("./table-per-page/TablePerPage");
var _TablePredicate = require("./table-predicate/TablePredicate");
var defaultProps = {
layouts: [
_TableLayouts.TableLayouts.Rows
],
layoutProps: {},
loading: false,
additionalRootNodes: [],
options: {},
getRowActions: function() {
return [];
}
};
var Table = function(props) {
var _useProps = (0, _core.useProps)('PlasmaTable', defaultProps, props), store = _useProps.store, data = _useProps.data, getRowId = _useProps.getRowId, getRowAttributes = _useProps.getRowAttributes, getRowExpandedContent = _useProps.getRowExpandedContent, getRowActions = _useProps.getRowActions, columns = _useProps.columns, layouts = _useProps.layouts, layoutProps = _useProps.layoutProps, children = _useProps.children, loading = _useProps.loading, additionalRootNodes = _useProps.additionalRootNodes, options = _useProps.options, ref = _useProps.ref, // Style props
style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, others = _object_without_properties._(_useProps, [
"store",
"data",
"getRowId",
"getRowAttributes",
"getRowExpandedContent",
"getRowActions",
"columns",
"layouts",
"layoutProps",
"children",
"loading",
"additionalRootNodes",
"options",
"ref",
"style",
"className",
"classNames",
"styles",
"unstyled"
]);
var getStyles = (0, _core.useStyles)({
name: 'PlasmaTable',
classes: _Tablemodulecss.default,
props: props,
className: className,
style: style,
classNames: classNames,
styles: styles,
unstyled: unstyled
});
var convertedChildren = _react.Children.toArray(children);
var header = convertedChildren.find(function(child) {
return child.type === _TableHeader.TableHeader;
});
var footer = convertedChildren.find(function(child) {
return child.type === _TableFooter.TableFooter;
});
var lastUpdated = convertedChildren.find(function(child) {
return child.type === _TableLastUpdated.TableLastUpdated;
});
var noData = convertedChildren.find(function(child) {
return child.type === _TableNoData.TableNoData;
});
var table = (0, _reacttable.useReactTable)(_object_spread._({
data: 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.TableSelectableColumn
].concat(columns) : columns,
getCoreRowModel: (0, _reacttable.getCoreRowModel)(),
manualPagination: (options === null || options === void 0 ? void 0 : options.getPaginationRowModel) === undefined,
enableMultiRowSelection: !!store.multiRowSelectionEnabled,
getRowId: getRowId,
getRowCanExpand: function(row) {
return !!(getRowExpandedContent === null || getRowExpandedContent === void 0 ? void 0 : getRowExpandedContent(row.original, row.index, row));
},
enableRowSelection: !loading,
defaultColumn: {
size: undefined,
minSize: _reacttable.defaultColumnSizing.minSize,
maxSize: _reacttable.defaultColumnSizing.maxSize
},
rowCount: (options === null || options === void 0 ? void 0 : options.getFilteredRowModel) ? undefined : store.state.totalEntries
}, options));
table.setOptions(function(prev) {
return _object_spread_props._(_object_spread._({}, prev), {
state: _object_spread_props._(_object_spread._({}, prev.state), {
rowSelection: store.state.rowSelection
}),
onRowSelectionChange: function(rowSelectionUpdater) {
store.setRowSelection(function(old) {
var newRowSelection = _instanceof._(rowSelectionUpdater, Function) ? rowSelectionUpdater(old) : rowSelectionUpdater;
if ((0, _fastdeepequal.default)(old, newRowSelection)) {
return old;
}
var rows = table.getRowModel().rowsById;
Object.keys(newRowSelection).forEach(function(rowId) {
if (newRowSelection[rowId] === true) {
var _rows_rowId;
if (!rows[rowId]) {
console.error('The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.');
}
var _rows_rowId_original;
newRowSelection[rowId] = (_rows_rowId_original = (_rows_rowId = rows[rowId]) === null || _rows_rowId === void 0 ? void 0 : _rows_rowId.original) !== null && _rows_rowId_original !== void 0 ? _rows_rowId_original : true;
}
});
return newRowSelection;
});
}
});
});
(0, _react.useEffect)(function() {
// Update the selected rows data when the data prop changes
if (store.getSelectedRows().length > 0) {
store.setRowSelection(function(old) {
var rowsById = table.getRowModel().rowsById;
var newSelection = _object_spread._({}, old);
Object.keys(old).forEach(function(rowId) {
if (rowsById[rowId]) {
newSelection[rowId] = rowsById[rowId].original;
}
});
return (0, _fastdeepequal.default)(newSelection, old) ? old : newSelection;
});
}
}, [
data
]);
var containerRef = (0, _react.useRef)();
(0, _hooks.useClickOutside)(function() {
if (!store.multiRowSelectionEnabled && store.getSelectedRows().length > 0) {
store.clearRowSelection();
}
}, null, [
containerRef.current
].concat(_to_consumable_array._(additionalRootNodes)));
var mergedRef = (0, _hooks.useMergedRef)(containerRef, ref);
if (!data) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
style: {
flexGrow: 1
},
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Loader, {})
});
}
var Layout = store.state.layout === null ? layouts[0] : layouts.find(function(param) {
var displayName = param.displayName;
return displayName === store.state.layout;
});
var hasRows = table.getRowModel().rows.length > 0;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({
ref: mergedRef
}, others, getStyles('root')), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableContext.TableProvider, {
value: {
getStyles: getStyles,
getRowActions: getRowActions,
store: store,
table: table,
layouts: layouts,
containerRef: containerRef
},
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Layout, {
children: store.isVacant && !store.isFiltered ? noData : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, _object_spread_props._(_object_spread._({
component: "table"
}, getStyles('table')), {
mod: {
loading: loading
},
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("thead", _object_spread_props._(_object_spread._({}, getStyles('header')), {
children: [
header ? /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
style: {
padding: 0
},
colSpan: table.getAllColumns().length,
children: header
})
}) : null,
/*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Header, _object_spread._({
getRowExpandedContent: getRowExpandedContent,
getRowAttributes: getRowAttributes,
loading: loading
}, layoutProps))
]
})),
/*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", _object_spread_props._(_object_spread._({}, getStyles('body')), {
children: hasRows ? /*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Body, _object_spread._({
getRowExpandedContent: getRowExpandedContent,
getRowAttributes: getRowAttributes,
loading: loading
}, layoutProps)) : /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
colSpan: table.getAllColumns().length,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLoading.TableLoading, {
visible: loading || !store.isFiltered,
children: noData
})
})
})
}))
]
})),
footer,
lastUpdated
]
})
})
})
}));
};
var TableComponentsOrder = {
MultiSelectInfo: 7,
Actions: 6,
Predicate: 5,
Filter: 4,
DateRangePicker: 3,
ColumnsSelector: 2,
LayoutControl: 1
};
Table.AccordionColumn = _TableCollapsibleColumn.TableAccordionColumn;
Table.ActionsColumn = _TableActionsColumn.TableActionsColumn;
Table.ActionItem = _tableactions.TableActionItem;
Table.CollapsibleColumn = _TableCollapsibleColumn.TableCollapsibleColumn;
Table.ColumnsSelector = _TableColumnsSelector.TableColumnsSelector;
Table.DateRangePicker = _TableDateRangePicker.TableDateRangePicker;
Table.Filter = _TableFilter.TableFilter;
Table.Footer = _TableFooter.TableFooter;
Table.Header = _TableHeader.TableHeader;
Table.LastUpdated = _TableLastUpdated.TableLastUpdated;
Table.Layouts = _TableLayouts.TableLayouts;
Table.Loading = _TableLoading.TableLoading;
Table.NoData = _TableNoData.TableNoData;
Table.Pagination = _TablePagination.TablePagination;
Table.PerPage = _TablePerPage.TablePerPage;
Table.Predicate = _TablePredicate.TablePredicate;
Table.extend = _utils.identity;
//# sourceMappingURL=Table.js.map