@vendorflow/components 2.0.12 → 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.
|
@@ -109,50 +109,51 @@ function DataTable(_a) {
|
|
|
109
109
|
return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
|
|
110
110
|
}, [selectedRowIds]), hasRowsSelected = _f.hasRowsSelected, numRowsSelected = _f.numRowsSelected;
|
|
111
111
|
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
112
|
-
return ((0, react_1.jsx)(material_1.
|
|
113
|
-
(0, react_1.jsx)(
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
// eslint-disable-next-line react/jsx-key
|
|
120
|
-
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) {
|
|
121
|
-
var col = column;
|
|
122
|
-
var _a = col.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? col.getSortByToggleProps() : undefined), key = _a.key, restOfProps = __rest(_a, ["key"]);
|
|
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) {
|
|
123
119
|
return (
|
|
124
120
|
// @ts-ignore
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
(0, react_1.jsx)(material_1.
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
(0, react_1.jsx)(
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
(0, react_1.jsx)(material_1.
|
|
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 }))));
|
|
156
157
|
}
|
|
157
158
|
exports.default = DataTable;
|
|
158
159
|
function usePluginConfig(options) {
|
|
@@ -186,7 +187,7 @@ function usePluginConfig(options) {
|
|
|
186
187
|
Header: function (props) {
|
|
187
188
|
var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
|
|
188
189
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
189
|
-
(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 "]))) })),
|
|
190
191
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
|
|
191
192
|
// @ts-ignore
|
|
192
193
|
(0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), {
|
|
@@ -199,7 +200,7 @@ function usePluginConfig(options) {
|
|
|
199
200
|
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
|
|
200
201
|
// @ts-ignore
|
|
201
202
|
(0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { size: "small" }),
|
|
202
|
-
(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') }))),
|
|
203
204
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), {
|
|
204
205
|
// @ts-ignore
|
|
205
206
|
size: "small" })))));
|
|
@@ -275,4 +276,4 @@ function getColumnFilterConfig(filterType) {
|
|
|
275
276
|
}
|
|
276
277
|
}
|
|
277
278
|
exports.getColumnFilterConfig = getColumnFilterConfig;
|
|
278
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
279
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -53,8 +53,8 @@ function DataTable() {
|
|
|
53
53
|
enabled: true,
|
|
54
54
|
},
|
|
55
55
|
};
|
|
56
|
-
var instance = (0, DataTable_1.useDefaultTableInstance)(columns,
|
|
56
|
+
var instance = (0, DataTable_1.useDefaultTableInstance)(columns, data, options);
|
|
57
57
|
return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
|
|
58
|
-
react_1.default.createElement(DataTable_1.default, { title: "People", data:
|
|
58
|
+
react_1.default.createElement(DataTable_1.default, { title: "People", data: data, columns: columns, instance: instance, options: options, renderActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, renderRowSelectActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); } })));
|
|
59
59
|
}
|
|
60
60
|
exports.DataTable = DataTable;
|
|
@@ -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) {
|