@vendorflow/components 2.0.18 → 2.0.19
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.
|
@@ -113,51 +113,54 @@ function DataTable(_a) {
|
|
|
113
113
|
return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
|
|
114
114
|
}, [selectedRowIds]), hasRowsSelected = _f.hasRowsSelected, numRowsSelected = _f.numRowsSelected;
|
|
115
115
|
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
116
|
-
return ((0, react_1.jsx)(
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
// eslint-disable-next-line react/jsx-key
|
|
126
|
-
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
|
|
127
|
-
var col = column;
|
|
128
|
-
var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
|
|
116
|
+
return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
|
|
117
|
+
var css = _a.css, cx = _a.cx;
|
|
118
|
+
return ((0, react_1.jsx)(material_1.Paper, { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n "], ["\n width: 100%;\n position: relative;\n "]))) },
|
|
119
|
+
(0, react_1.jsx)("div", null,
|
|
120
|
+
(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 }),
|
|
121
|
+
(filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
|
|
122
|
+
(0, react_1.jsx)(material_1.TableContainer, null,
|
|
123
|
+
(0, react_1.jsx)(material_1.Table, __assign({}, getTableProps(), { size: "small", "aria-label": "table" }),
|
|
124
|
+
(0, react_1.jsx)(material_1.TableHead, null, headerGroups.map(function (headerGroup) {
|
|
129
125
|
return (
|
|
130
126
|
// @ts-ignore
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
(0, react_1.jsx)(material_1.
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
(0, react_1.jsx)(
|
|
159
|
-
|
|
160
|
-
|
|
127
|
+
// eslint-disable-next-line react/jsx-key
|
|
128
|
+
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
|
|
129
|
+
var col = column;
|
|
130
|
+
var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
|
|
131
|
+
return (
|
|
132
|
+
// @ts-ignore
|
|
133
|
+
(0, react_1.jsx)(material_1.TableCell, __assign({ key: key }, restOfProps, { css: col.id === 'custom' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n width: ", ";\n "], ["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n width: ", ";\n "])), (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.enabled) && (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.enabled)
|
|
134
|
+
? (rowSelectConfig === null || rowSelectConfig === void 0 ? void 0 : rowSelectConfig.mode) === 'multi'
|
|
135
|
+
? '72px'
|
|
136
|
+
: '104px'
|
|
137
|
+
: '36px'), className: "col-" + col.id }),
|
|
138
|
+
(0, react_1.jsx)("div", { css: 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') },
|
|
139
|
+
(0, react_1.jsx)("span", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n "], ["\n font-weight: 600;\n "]))), col.minWidth !== undefined && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n min-width: ", ";\n "], ["\n min-width: ", ";\n "])), col.minWidth), col.maxWidth !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: ", ";\n "], ["\n max-width: ", ";\n "])), col.maxWidth)) }, col.render('Header')),
|
|
140
|
+
(0, react_1.jsx)(SortIndicator_1.default, { canSort: col.canSort, isSorted: col.isSorted, isSortedDesc: col.isSortedDesc }))));
|
|
141
|
+
})));
|
|
142
|
+
})),
|
|
143
|
+
(0, react_1.jsx)(material_1.TableBody, null, tableRows.length > 0 ? (tableRows.map(function (row) {
|
|
144
|
+
prepareRow(row);
|
|
145
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
146
|
+
var _a = row.getRowProps(), style = _a.style, key = _a.key, restOfRowProps = __rest(_a, ["style", "key"]);
|
|
147
|
+
var isExpanded = row.isExpanded;
|
|
148
|
+
return ((0, react_1.jsx)(react_2.Fragment, { key: key },
|
|
149
|
+
(0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps), row.cells.map(function (cell) {
|
|
150
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
151
|
+
var _a = cell.getCellProps(), style = _a.style, key = _a.key, restOfCellProps = __rest(_a, ["style", "key"]);
|
|
152
|
+
return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cell.column.id === 'custom' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n "], ["\n position: -webkit-sticky;\n position: sticky;\n background-color: white;\n left: 0;\n "]))), key: key }, restOfCellProps), cell.render('Cell')));
|
|
153
|
+
})),
|
|
154
|
+
isExpanded && ((0, react_1.jsx)(material_1.TableRow, null,
|
|
155
|
+
(0, react_1.jsx)(material_1.TableCell, { colSpan: (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.colSpan) || visibleColumns.length },
|
|
156
|
+
(0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
|
|
157
|
+
})) : ((0, react_1.jsx)(material_1.TableRow, null,
|
|
158
|
+
(0, react_1.jsx)(material_1.TableCell, { colSpan: noMatchColSpan || visibleColumns.length },
|
|
159
|
+
(0, react_1.jsx)("div", { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
|
|
160
|
+
(0, react_1.jsx)("span", null, noMatchLabel))),
|
|
161
|
+
noMatchColSpan != null && noMatchColSpan > 0 && visibleColumns.length - noMatchColSpan > 0 && ((0, react_1.jsx)(material_1.TableCell, { colSpan: visibleColumns.length - noMatchColSpan }))))))),
|
|
162
|
+
(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 }))));
|
|
163
|
+
}));
|
|
161
164
|
}
|
|
162
165
|
exports.default = DataTable;
|
|
163
166
|
function usePluginConfig(options) {
|
|
@@ -191,7 +194,7 @@ function usePluginConfig(options) {
|
|
|
191
194
|
Header: function (props) {
|
|
192
195
|
var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
|
|
193
196
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
194
|
-
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(
|
|
197
|
+
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 17px;\n "], ["\n padding: 17px;\n "]))) })),
|
|
195
198
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
|
|
196
199
|
// @ts-ignore
|
|
197
200
|
(0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), {
|
|
@@ -204,7 +207,7 @@ function usePluginConfig(options) {
|
|
|
204
207
|
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
|
|
205
208
|
// @ts-ignore
|
|
206
209
|
(0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { size: "small" }),
|
|
207
|
-
(0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(
|
|
210
|
+
(0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(templateObject_10 || (templateObject_10 = __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') }))),
|
|
208
211
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), {
|
|
209
212
|
// @ts-ignore
|
|
210
213
|
size: "small" })))));
|
|
@@ -282,4 +285,4 @@ function getColumnFilterConfig(filterType) {
|
|
|
282
285
|
}
|
|
283
286
|
}
|
|
284
287
|
exports.getColumnFilterConfig = getColumnFilterConfig;
|
|
285
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
288
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|