@vendorflow/components 2.0.9 → 2.0.13
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.
|
@@ -7,7 +7,9 @@ export declare type CustomColumnConfigProps<D extends object> = {
|
|
|
7
7
|
};
|
|
8
8
|
export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & CustomColumnConfigProps<D>;
|
|
9
9
|
export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
|
|
10
|
-
export declare type EnhancedTableInstance<D extends object> = TableInstance<D> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseSortByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D
|
|
10
|
+
export declare type EnhancedTableInstance<D extends object> = Omit<TableInstance<D>, 'state'> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseSortByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & {
|
|
11
|
+
state: EnhancedTableState<D>;
|
|
12
|
+
};
|
|
11
13
|
export declare type EnhancedTableState<D extends object> = TableState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseSortByState<D> & UsePaginationState<D> & UseRowSelectState<D>;
|
|
12
14
|
export declare type EnhancedColumn<D extends object> = CustomColumnConfigProps<D> & Partial<Omit<Column<D>, 'columns'>> & Partial<UseFiltersColumnOptions<D>> & Partial<UseSortByColumnOptions<D>>;
|
|
13
15
|
export declare type EnhancedRow<D extends object> = Row<D> & UseExpandedRowProps<D> & UseRowSelectRowProps<D>;
|
|
@@ -36,8 +38,6 @@ export interface TableFeatureOptions<D extends object> {
|
|
|
36
38
|
rowSelect?: {
|
|
37
39
|
enabled: boolean;
|
|
38
40
|
mode: Mode;
|
|
39
|
-
toggleRowSelected?: (index: number, checked: boolean) => void;
|
|
40
|
-
toggleAllRowsSelected?: (index: number[], checked: boolean) => void;
|
|
41
41
|
};
|
|
42
42
|
sorting?: {
|
|
43
43
|
enabled: boolean;
|
|
@@ -45,6 +45,10 @@ export interface TableFeatureOptions<D extends object> {
|
|
|
45
45
|
}
|
|
46
46
|
interface Props<D extends object> {
|
|
47
47
|
title?: string;
|
|
48
|
+
labels?: {
|
|
49
|
+
noMatchLabel?: string;
|
|
50
|
+
noMatchColSpan?: number;
|
|
51
|
+
};
|
|
48
52
|
columns: Partial<EnhancedColumn<D>>[];
|
|
49
53
|
data: D[];
|
|
50
54
|
instance: EnhancedTableInstance<D>;
|
|
@@ -52,7 +56,7 @@ interface Props<D extends object> {
|
|
|
52
56
|
renderActions?: () => ReactNode;
|
|
53
57
|
renderRowSelectActions?: () => ReactNode;
|
|
54
58
|
}
|
|
55
|
-
export default function DataTable<D extends object>({ title, columns, data, instance, options, renderActions, renderRowSelectActions, }: Props<D>): JSX.Element;
|
|
59
|
+
export default function DataTable<D extends object>({ title, labels, columns, data, instance, options, renderActions, renderRowSelectActions, }: Props<D>): JSX.Element;
|
|
56
60
|
export declare function usePluginConfig<D extends object>(options: TableFeatureOptions<D>): PluginHook<D>[];
|
|
57
61
|
export declare function useDefaultTableInstance<D extends object>(columns: EnhancedColumn<D>[], data: D[], options?: TableFeatureOptions<D>): EnhancedTableInstance<D>;
|
|
58
62
|
export declare type FilterType = 'text' | 'select' | 'multi-select' | 'range';
|
|
@@ -72,9 +72,11 @@ var SingleSelectFilter_1 = __importDefault(require("./FilterTool/Filters/SingleS
|
|
|
72
72
|
var MultiSelectFilter_1 = __importDefault(require("./FilterTool/Filters/MultiSelectFilter"));
|
|
73
73
|
var RangeFilter_1 = __importDefault(require("./FilterTool/Filters/RangeFilter"));
|
|
74
74
|
var TextFilter_1 = __importDefault(require("./FilterTool/Filters/TextFilter"));
|
|
75
|
+
var NO_MATCH_TEXT = 'Sorry, no matching records found';
|
|
75
76
|
function DataTable(_a) {
|
|
76
|
-
var title = _a.title, columns = _a.columns, data = _a.data, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions;
|
|
77
|
-
var _b =
|
|
77
|
+
var title = _a.title, labels = _a.labels, columns = _a.columns, data = _a.data, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions;
|
|
78
|
+
var _b = labels || { noMatchLabel: NO_MATCH_TEXT }, _c = _b.noMatchLabel, noMatchLabel = _c === void 0 ? NO_MATCH_TEXT : _c, noMatchColSpan = _b.noMatchColSpan;
|
|
79
|
+
var _d = options || {}, rowExpandingConfig = _d.rowExpanding, filtersConfig = _d.filters, globalSearchConfig = _d.globalSearch, columnHidingConfig = _d.columnHiding, paginationConfig = _d.pagination, rowSelectConfig = _d.rowSelect, sortingConfig = _d.sorting;
|
|
78
80
|
var ExpandedComponent = (rowExpandingConfig || {}).Component;
|
|
79
81
|
var allColumns = instance.allColumns, getTableProps = instance.getTableProps, gotoPage = instance.gotoPage, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, rows = instance.rows, setAllFilters = instance.setAllFilters, setPageSize = instance.setPageSize, setFilter = instance.setFilter, setGlobalFilter = instance.setGlobalFilter, state = instance.state, visibleColumns = instance.visibleColumns;
|
|
80
82
|
var columnNameById = (0, react_2.useMemo)(function () {
|
|
@@ -100,48 +102,58 @@ function DataTable(_a) {
|
|
|
100
102
|
addNamesToMap(columns, result);
|
|
101
103
|
return result;
|
|
102
104
|
}, [columns]);
|
|
103
|
-
var
|
|
104
|
-
var
|
|
105
|
+
var _e = state, filters = _e.filters, globalFilter = _e.globalFilter, pageIndex = _e.pageIndex, pageSize = _e.pageSize, selectedRowIds = _e.selectedRowIds;
|
|
106
|
+
var _f = (0, react_2.useMemo)(function () {
|
|
105
107
|
var hasRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).some(Boolean) : false;
|
|
106
108
|
var numRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).filter(Boolean).length : 0;
|
|
107
109
|
return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
|
|
108
|
-
}, [selectedRowIds]), hasRowsSelected =
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
(
|
|
112
|
-
|
|
113
|
-
(0, react_1.jsx)(
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
|
|
118
|
-
var col = column;
|
|
119
|
-
var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
|
|
110
|
+
}, [selectedRowIds]), hasRowsSelected = _f.hasRowsSelected, numRowsSelected = _f.numRowsSelected;
|
|
111
|
+
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
112
|
+
return ((0, react_1.jsx)(material_1.Paper, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "]))) },
|
|
113
|
+
(0, react_1.jsx)("div", null,
|
|
114
|
+
(0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
|
|
115
|
+
(filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
|
|
116
|
+
(0, react_1.jsx)(material_1.TableContainer, null,
|
|
117
|
+
(0, react_1.jsx)(material_1.Table, __assign({}, getTableProps(), { size: "small", "aria-label": "table" }),
|
|
118
|
+
(0, react_1.jsx)(material_1.TableHead, null, headerGroups.map(function (headerGroup) {
|
|
120
119
|
return (
|
|
121
120
|
// @ts-ignore
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
121
|
+
// eslint-disable-next-line react/jsx-key
|
|
122
|
+
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
|
|
123
|
+
var col = column;
|
|
124
|
+
var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
|
|
125
|
+
return (
|
|
126
|
+
// @ts-ignore
|
|
127
|
+
(0, react_1.jsx)(material_1.TableCell, __assign({ key: key }, restOfProps, { css: col.id === 'custom' && (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.enabled) && (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.enabled)
|
|
128
|
+
? (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.mode) === 'multi'
|
|
129
|
+
? '72px'
|
|
130
|
+
: '104px'
|
|
131
|
+
: '36px') }),
|
|
132
|
+
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n "], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n "])), col.columns != null ? 'center' : 'flex-start') },
|
|
133
|
+
(0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n "], ["\n font-weight: 600;\n "]))) }, col.render('Header')),
|
|
134
|
+
(0, react_1.jsx)(SortIndicator_1.default, { canSort: col.canSort, isSorted: col.isSorted, isSortedDesc: col.isSortedDesc }))));
|
|
135
|
+
})));
|
|
136
|
+
})),
|
|
137
|
+
(0, react_1.jsx)(material_1.TableBody, null, tableRows.length > 0 ? (tableRows.map(function (row) {
|
|
138
|
+
prepareRow(row);
|
|
139
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
140
|
+
var _a = row.getRowProps(), style = _a.style, key = _a.key, restOfRowProps = __rest(_a, ["style", "key"]);
|
|
141
|
+
var isExpanded = row.isExpanded;
|
|
142
|
+
return ((0, react_1.jsx)(react_2.Fragment, { key: key },
|
|
143
|
+
(0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps), row.cells.map(function (cell) {
|
|
144
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
145
|
+
var _a = cell.getCellProps(), style = _a.style, key = _a.key, restOfCellProps = __rest(_a, ["style", "key"]);
|
|
146
|
+
return ((0, react_1.jsx)(material_1.TableCell, __assign({ key: key }, restOfCellProps), cell.render('Cell')));
|
|
147
|
+
})),
|
|
148
|
+
isExpanded && ((0, react_1.jsx)(material_1.TableRow, null,
|
|
149
|
+
(0, react_1.jsx)(material_1.TableCell, { colSpan: (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.colSpan) || visibleColumns.length },
|
|
150
|
+
(0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
|
|
151
|
+
})) : ((0, react_1.jsx)(material_1.TableRow, null,
|
|
152
|
+
(0, react_1.jsx)(material_1.TableCell, { colSpan: noMatchColSpan || visibleColumns.length },
|
|
153
|
+
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
|
|
154
|
+
(0, react_1.jsx)("span", null, noMatchLabel))),
|
|
155
|
+
noMatchColSpan != null && noMatchColSpan > 0 && visibleColumns.length - noMatchColSpan > 0 && ((0, react_1.jsx)(material_1.TableCell, { colSpan: visibleColumns.length - noMatchColSpan }))))))),
|
|
156
|
+
(paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { component: "div", count: data.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize }))));
|
|
145
157
|
}
|
|
146
158
|
exports.default = DataTable;
|
|
147
159
|
function usePluginConfig(options) {
|
|
@@ -175,7 +187,7 @@ function usePluginConfig(options) {
|
|
|
175
187
|
Header: function (props) {
|
|
176
188
|
var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
|
|
177
189
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
178
|
-
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(
|
|
190
|
+
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: 17px;\n "], ["\n padding: 17px;\n "]))) })),
|
|
179
191
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
|
|
180
192
|
// @ts-ignore
|
|
181
193
|
(0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), {
|
|
@@ -188,7 +200,7 @@ function usePluginConfig(options) {
|
|
|
188
200
|
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
|
|
189
201
|
// @ts-ignore
|
|
190
202
|
(0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { size: "small" }),
|
|
191
|
-
(0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(
|
|
203
|
+
(0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n transform: rotate3d(0, 0, 1, ", ");\n transition: transform 0.25s;\n "], ["\n transform: rotate3d(0, 0, 1, ", ");\n transition: transform 0.25s;\n "])), isExpanded ? '90deg' : '0deg') }))),
|
|
192
204
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), {
|
|
193
205
|
// @ts-ignore
|
|
194
206
|
size: "small" })))));
|
|
@@ -264,4 +276,4 @@ function getColumnFilterConfig(filterType) {
|
|
|
264
276
|
}
|
|
265
277
|
}
|
|
266
278
|
exports.getColumnFilterConfig = getColumnFilterConfig;
|
|
267
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
279
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
8
8
|
/** @jsx jsx */
|
|
9
9
|
var react_1 = require("@emotion/react");
|
|
10
10
|
var icons_material_1 = require("@mui/icons-material");
|
|
11
|
-
var iconStyle = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: 0.25rem;\n color: #b2b2b2;\n
|
|
12
|
-
var smallIconStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n font-size: 0.75rem;\n"], ["\n ", ";\n font-size: 0.75rem;\n"])), iconStyle);
|
|
11
|
+
var iconStyle = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: 0.25rem;\n color: #b2b2b2;\n line-height: 0;\n\n && {\n font-size: 1rem;\n }\n"], ["\n margin-left: 0.25rem;\n color: #b2b2b2;\n line-height: 0;\n\n && {\n font-size: 1rem;\n }\n"])));
|
|
12
|
+
var smallIconStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n && {\n font-size: 0.75rem;\n }\n"], ["\n ", ";\n && {\n font-size: 0.75rem;\n }\n"])), iconStyle);
|
|
13
13
|
var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 0;\n"], ["\n line-height: 0;\n"])));
|
|
14
14
|
var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n ", ";\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), wrapperStyle);
|
|
15
15
|
function SortIndicator(_a) {
|