@vendorflow/components 2.0.73 → 2.0.74
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.
- package/lib/TempHooks.d.ts +9 -0
- package/lib/TempHooks.js +25 -0
- package/lib/components/InfiniteScroll/InfiniteScroll.d.ts +16 -0
- package/lib/components/InfiniteScroll/InfiniteScroll.js +159 -0
- package/lib/components/InfiniteScroll/index.d.ts +1 -0
- package/lib/components/InfiniteScroll/index.js +8 -0
- package/lib/components/blueprint/InputGroup/InputGroup.d.ts +20 -0
- package/lib/components/blueprint/InputGroup/InputGroup.js +13 -0
- package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts +2 -0
- package/lib/components/blueprint/InputGroup/InputGroup.story.js +11 -0
- package/lib/components/blueprint/InputGroup/index.d.ts +1 -0
- package/lib/components/blueprint/InputGroup/index.js +4 -0
- package/lib/components/blueprint/InputSelect/InputSelect.d.ts +51 -0
- package/lib/components/blueprint/InputSelect/InputSelect.js +98 -0
- package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts +3 -0
- package/lib/components/blueprint/InputSelect/InputSelect.story.js +19 -0
- package/lib/components/blueprint/InputSelect/index.d.ts +1 -0
- package/lib/components/blueprint/InputSelect/index.js +4 -0
- package/lib/components/blueprint/InputTime/InputTime.d.ts +24 -0
- package/lib/components/blueprint/InputTime/InputTime.js +28 -0
- package/lib/components/blueprint/InputTime/InputTime.story.d.ts +2 -0
- package/lib/components/blueprint/InputTime/InputTime.story.js +11 -0
- package/lib/components/blueprint/InputTime/index.d.ts +1 -0
- package/lib/components/blueprint/InputTime/index.js +4 -0
- package/lib/components/material-ui/DataTable/Data.js +1 -1
- package/lib/components/material-ui/DataTable/DataTable.d.ts +7 -3
- package/lib/components/material-ui/DataTable/DataTable.js +71 -66
- package/lib/components/material-ui/DataTable/DataTable.story.js +11 -2
- package/lib/components/material-ui/DataTable/SortIndicator.js +2 -2
- package/lib/components/material-ui/DataTable/TablePieces/AppliedFilters.d.ts +12 -0
- package/lib/components/material-ui/DataTable/TablePieces/AppliedFilters.js +26 -0
- package/lib/components/material-ui/DataTable/TablePieces/BodyCell.d.ts +10 -0
- package/lib/components/material-ui/DataTable/TablePieces/BodyCell.js +49 -0
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +15 -0
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +88 -0
- package/lib/components/material-ui/DataTable/TablePieces/GlobalSearchFilter.d.ts +10 -0
- package/lib/components/material-ui/DataTable/TablePieces/GlobalSearchFilter.js +49 -0
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.d.ts +12 -0
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +53 -0
- package/lib/components/material-ui/DataTable/TablePieces/IndeterminateCheckbox.d.ts +4 -0
- package/lib/components/material-ui/DataTable/TablePieces/IndeterminateCheckbox.js +65 -0
- package/lib/components/material-ui/DataTable/TablePieces/SortIndicator.d.ts +10 -0
- package/lib/components/material-ui/DataTable/TablePieces/SortIndicator.js +33 -0
- package/lib/components/material-ui/DataTable/TablePieces/Table.d.ts +12 -0
- package/lib/components/material-ui/DataTable/TablePieces/Table.js +47 -0
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts +25 -0
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +71 -0
- package/lib/components/material-ui/DataTable/TablePieces/Toolbar.d.ts +24 -0
- package/lib/components/material-ui/DataTable/TablePieces/Toolbar.js +63 -0
- package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.d.ts +11 -0
- package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.js +76 -0
- package/lib/components/material-ui/DataTable/Utils.d.ts +25 -0
- package/lib/components/material-ui/DataTable/Utils.js +119 -0
- package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +7 -0
- package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +20 -0
- package/lib/components/material-ui/ErrorBoundary/index.d.ts +1 -0
- package/lib/components/material-ui/ErrorBoundary/index.js +8 -0
- package/lib/services/Select.service.d.ts +5 -0
- package/lib/services/Select.service.js +67 -0
- package/package.json +5 -2
|
@@ -73,35 +73,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
73
73
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
74
74
|
};
|
|
75
75
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
76
|
-
exports.getColumnFilterConfig = exports.useDefaultTableInstance = exports.usePluginConfig = void 0;
|
|
76
|
+
exports.getColumnFilterConfig = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = void 0;
|
|
77
77
|
/** @jsxRuntime classic */
|
|
78
78
|
/** @jsx jsx */
|
|
79
79
|
var react_1 = require("@emotion/react");
|
|
80
80
|
var immer_1 = __importDefault(require("immer"));
|
|
81
81
|
var material_1 = require("@mui/material");
|
|
82
|
-
var classnames_1 = __importDefault(require("classnames"));
|
|
83
82
|
var icons_material_1 = require("@mui/icons-material");
|
|
84
83
|
var react_table_1 = require("react-table");
|
|
85
|
-
var IndeterminateCheckbox_1 = __importStar(require("./IndeterminateCheckbox"));
|
|
86
|
-
var
|
|
87
|
-
var Toolbar_1 = __importDefault(require("./Toolbar"));
|
|
84
|
+
var IndeterminateCheckbox_1 = __importStar(require("./TablePieces/IndeterminateCheckbox"));
|
|
85
|
+
var Toolbar_1 = __importDefault(require("./TablePieces/Toolbar"));
|
|
88
86
|
var react_2 = require("react");
|
|
89
|
-
var AppliedFilters_1 = __importDefault(require("./AppliedFilters"));
|
|
87
|
+
var AppliedFilters_1 = __importDefault(require("./TablePieces/AppliedFilters"));
|
|
90
88
|
var lodash_1 = require("lodash");
|
|
91
89
|
var SingleSelectFilter_1 = __importDefault(require("./FilterTool/Filters/SingleSelectFilter"));
|
|
92
90
|
var MultiSelectFilter_1 = __importDefault(require("./FilterTool/Filters/MultiSelectFilter"));
|
|
93
91
|
var RangeFilter_1 = __importDefault(require("./FilterTool/Filters/RangeFilter"));
|
|
94
92
|
var TextFilter_1 = __importDefault(require("./FilterTool/Filters/TextFilter"));
|
|
95
|
-
var
|
|
93
|
+
var hooks_1 = require("@vendorflow/common/lib/hooks");
|
|
94
|
+
var react_scrollbar_size_1 = __importDefault(require("react-scrollbar-size"));
|
|
95
|
+
var Table_1 = __importDefault(require("./TablePieces/Table"));
|
|
96
|
+
var HeaderCell_1 = __importDefault(require("./TablePieces/HeaderCell"));
|
|
97
|
+
var TableBodyContent_1 = __importDefault(require("./TablePieces/TableBodyContent"));
|
|
98
|
+
exports.CELL_PADDING = 4;
|
|
96
99
|
var EXPAND_BTN_WIDTH = 24;
|
|
97
100
|
var NO_MATCH_TEXT = 'Sorry, no matching records found';
|
|
98
101
|
function DataTable(_a) {
|
|
99
102
|
var _b;
|
|
100
103
|
var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, restOfProps = __rest(_a, ["title", "labels", "columns", "instance", "options", "renderActions", "renderRowSelectActions"]);
|
|
101
|
-
var
|
|
102
|
-
var
|
|
104
|
+
var tableHeadRef = (0, react_2.useRef)(null);
|
|
105
|
+
var tableBodyRef = (0, react_2.useRef)(null);
|
|
106
|
+
var scrollContainerRef = (0, react_2.useRef)(null);
|
|
107
|
+
var _c = (0, hooks_1.useMeasure)(), tableBodyMeasureRefCallback = _c.ref, tableBodyContentRect = _c.contentRect;
|
|
108
|
+
var _d = (0, hooks_1.useMeasure)(), rootRef = _d.ref, rootContentRect = _d.contentRect;
|
|
109
|
+
var _e = (0, hooks_1.useMeasure)(), toolbarRef = _e.ref, toolbarContentRect = _e.contentRect;
|
|
110
|
+
var _f = (0, hooks_1.useMeasure)(), paginationRef = _f.ref, paginationContentRect = _f.contentRect;
|
|
111
|
+
var _g = (0, hooks_1.useHasScrollbar)(), hasScrollbarRefCallback = _g.ref, hasScrollbar = _g.hasScrollbar;
|
|
112
|
+
var scrollbarWidth = (0, react_scrollbar_size_1.default)().width;
|
|
113
|
+
var _h = __read((0, react_2.useState)(0), 2), scrollLeft = _h[0], setScrollLeft = _h[1];
|
|
114
|
+
var _j = (labels || { noMatchLabel: NO_MATCH_TEXT }).noMatchLabel, noMatchLabel = _j === void 0 ? NO_MATCH_TEXT : _j;
|
|
115
|
+
var _k = options || {}, rowExpandingConfig = _k.rowExpanding, filtersConfig = _k.filters, globalSearchConfig = _k.globalSearch, columnHidingConfig = _k.columnHiding, paginationConfig = _k.pagination, sortingConfig = _k.sorting, virtualizeConfig = _k.virtualize;
|
|
103
116
|
var ExpandedComponent = (rowExpandingConfig || {}).Component;
|
|
104
|
-
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,
|
|
117
|
+
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, totalColumnsWidth = instance.totalColumnsWidth;
|
|
105
118
|
var pageOptions = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rowsPerPageOptions) || instance.pageOptions;
|
|
106
119
|
var columnNameById = (0, react_2.useMemo)(function () {
|
|
107
120
|
var result = {};
|
|
@@ -130,65 +143,53 @@ function DataTable(_a) {
|
|
|
130
143
|
addNamesToMap(columns, result);
|
|
131
144
|
return result;
|
|
132
145
|
}, [columns]);
|
|
133
|
-
var
|
|
134
|
-
var
|
|
146
|
+
var _l = state, filters = _l.filters, globalFilter = _l.globalFilter, pageIndex = _l.pageIndex, pageSize = _l.pageSize, selectedRowIds = _l.selectedRowIds;
|
|
147
|
+
var _m = (0, react_2.useMemo)(function () {
|
|
135
148
|
var hasRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).some(Boolean) : false;
|
|
136
149
|
var numRowsSelected = lodash_1.values != null ? (0, lodash_1.values)(selectedRowIds).filter(Boolean).length : 0;
|
|
137
150
|
return { hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected };
|
|
138
|
-
}, [selectedRowIds]), hasRowsSelected =
|
|
151
|
+
}, [selectedRowIds]), hasRowsSelected = _m.hasRowsSelected, numRowsSelected = _m.numRowsSelected;
|
|
139
152
|
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
return ((0, react_1.jsx)(react_2.Fragment, { key: key },
|
|
171
|
-
(0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps), row.cells.map(function (cell) {
|
|
172
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
173
|
-
var _a = cell.getCellProps(), style = _a.style, key = _a.key, className = _a.className, restOfCellProps = __rest(_a, ["style", "key", "className"]);
|
|
174
|
-
return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cx(cell.column.id === 'custom' && css(templateObject_8 || (templateObject_8 = __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 "]))), css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n && {\n padding: ", "px;\n }\n "], ["\n && {\n padding: ", "px;\n }\n "])), CELL_PADDING)), className: (0, classnames_1.default)(className, cell.column.id === 'custom' ? 'cell-Custom' : undefined), key: key }, restOfCellProps), cell.render('Cell')));
|
|
175
|
-
})),
|
|
176
|
-
isExpanded && ((0, react_1.jsx)(material_1.TableRow, null,
|
|
177
|
-
(0, react_1.jsx)(material_1.TableCell, { colSpan: (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.colSpan) || visibleColumns.length },
|
|
178
|
-
(0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
|
|
179
|
-
})) : ((0, react_1.jsx)(material_1.TableRow, null,
|
|
180
|
-
(0, react_1.jsx)(material_1.TableCell, { colSpan: noMatchColSpan || visibleColumns.length },
|
|
181
|
-
(0, react_1.jsx)("div", { css: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
|
|
182
|
-
(0, react_1.jsx)("span", null, noMatchLabel))),
|
|
183
|
-
noMatchColSpan != null && noMatchColSpan > 0 && visibleColumns.length - noMatchColSpan > 0 && ((0, react_1.jsx)(material_1.TableCell, { colSpan: visibleColumns.length - noMatchColSpan }))))))),
|
|
184
|
-
(paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
|
|
185
|
-
}));
|
|
153
|
+
var containerHeight = (rootContentRect.height || 0) - (toolbarContentRect.height || 0) - (paginationContentRect.height || 0);
|
|
154
|
+
var defaultRowHeight = (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.defaultRowHeight) || 50;
|
|
155
|
+
(0, react_2.useEffect)(function () {
|
|
156
|
+
if (tableHeadRef.current) {
|
|
157
|
+
tableHeadRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
|
|
158
|
+
}
|
|
159
|
+
if (scrollContainerRef.current) {
|
|
160
|
+
scrollContainerRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
|
|
161
|
+
}
|
|
162
|
+
}, [scrollLeft]);
|
|
163
|
+
return ((0, react_1.jsx)(material_1.Paper, __assign({ ref: rootRef, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: calc(100% - ", "px);\n height: 100%;\n position: relative;\n "], ["\n width: calc(100% - ", "px);\n height: 100%;\n position: relative;\n "])), hasScrollbar.vertical ? scrollbarWidth : 0), className: "DataTable" }, restOfProps),
|
|
164
|
+
(0, react_1.jsx)("div", { ref: toolbarRef, className: "DataTable__Toolbar" },
|
|
165
|
+
(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 }),
|
|
166
|
+
(filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
|
|
167
|
+
(0, react_1.jsx)("div", { className: "DataTable__TableContainer", css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", "px;\n "], ["\n height: ", "px;\n "])), containerHeight) },
|
|
168
|
+
(0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n "], ["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n "]))) },
|
|
169
|
+
(0, react_1.jsx)(material_1.TableHead, { ref: tableHeadRef, className: "DataTable__TableHead", component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n && {\n display: block;\n height: auto;\n width: calc(100% - ", "px);\n overflow-x: auto;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n }\n "], ["\n && {\n display: block;\n height: auto;\n width: calc(100% - ", "px);\n overflow-x: auto;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n }\n "])), hasScrollbar.vertical ? scrollbarWidth : 0), onScroll: function (evt) {
|
|
170
|
+
var scrollLeft = evt.target.scrollLeft;
|
|
171
|
+
setScrollLeft(scrollLeft);
|
|
172
|
+
} }, headerGroups.map(function (headerGroup) {
|
|
173
|
+
return (
|
|
174
|
+
// @ts-ignore
|
|
175
|
+
// eslint-disable-next-line react/jsx-key
|
|
176
|
+
(0, react_1.jsx)(material_1.TableRow, __assign({}, headerGroup.getHeaderGroupProps(), { component: "div" }), headerGroup.headers.map(function (header) {
|
|
177
|
+
var _a = header.getHeaderProps((sortingConfig === null || sortingConfig === void 0 ? void 0 : sortingConfig.enabled) ? header.getSortByToggleProps() : undefined), key = _a.key, restOfHeaderProps = __rest(_a, ["key"]);
|
|
178
|
+
return (0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps });
|
|
179
|
+
})));
|
|
180
|
+
})),
|
|
181
|
+
(0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
|
|
182
|
+
(paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { ref: paginationRef, className: "DataTable__Pagination", component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
|
|
186
183
|
}
|
|
187
184
|
exports.default = DataTable;
|
|
188
185
|
function usePluginConfig(options) {
|
|
189
|
-
var filters = options.filters, globalSearch = options.globalSearch, pagination = options.pagination, rowExpanding = options.rowExpanding, sorting = options.sorting, rowSelect = options.rowSelect, columnHiding = options.columnHiding;
|
|
186
|
+
var filters = options.filters, globalSearch = options.globalSearch, pagination = options.pagination, rowExpanding = options.rowExpanding, sorting = options.sorting, rowSelect = options.rowSelect, columnHiding = options.columnHiding, virtualize = options.virtualize;
|
|
187
|
+
var customCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
|
|
188
|
+
? exports.CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH
|
|
189
|
+
: Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + exports.CELL_PADDING * 2;
|
|
190
190
|
return (0, react_2.useMemo)(function () {
|
|
191
191
|
var result = [];
|
|
192
|
+
result.push(react_table_1.useBlockLayout);
|
|
192
193
|
if (filters === null || filters === void 0 ? void 0 : filters.enabled) {
|
|
193
194
|
result.push(react_table_1.useFilters);
|
|
194
195
|
}
|
|
@@ -213,10 +214,13 @@ function usePluginConfig(options) {
|
|
|
213
214
|
hooks.visibleColumns.push(function (columns) { return __spreadArray([
|
|
214
215
|
{
|
|
215
216
|
id: 'custom',
|
|
217
|
+
width: customCellWidth,
|
|
218
|
+
minWidth: customCellWidth,
|
|
219
|
+
maxWidth: customCellWidth,
|
|
216
220
|
Header: function (props) {
|
|
217
221
|
var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
|
|
218
222
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
219
|
-
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(
|
|
223
|
+
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && ((0, react_1.jsx)("span", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), EXPAND_BTN_WIDTH / 2) })),
|
|
220
224
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.mode) === 'multi' ? (
|
|
221
225
|
// @ts-ignore
|
|
222
226
|
(0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, ((pagination === null || pagination === void 0 ? void 0 : pagination.enabled) ? getToggleAllPageRowsSelectedProps() : getToggleAllRowsSelectedProps()), {
|
|
@@ -228,8 +232,8 @@ function usePluginConfig(options) {
|
|
|
228
232
|
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
229
233
|
(rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (
|
|
230
234
|
// @ts-ignore
|
|
231
|
-
(0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { css: (0, react_1.css)(
|
|
232
|
-
(0, react_1.jsx)(icons_material_1.KeyboardArrowRight, { css: (0, react_1.css)(
|
|
235
|
+
(0, react_1.jsx)(material_1.IconButton, __assign({}, getToggleRowExpandedProps(), { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &.MuiIconButton-root {\n padding: 0;\n }\n "], ["\n &.MuiIconButton-root {\n padding: 0;\n }\n "]))), size: "small" }),
|
|
236
|
+
(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') }))),
|
|
233
237
|
(rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) && ((0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({ name: index.toString() }, getToggleRowSelectedProps(), {
|
|
234
238
|
// @ts-ignore
|
|
235
239
|
size: "small" })))));
|
|
@@ -239,11 +243,11 @@ function usePluginConfig(options) {
|
|
|
239
243
|
});
|
|
240
244
|
}
|
|
241
245
|
return result;
|
|
242
|
-
}, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination]);
|
|
246
|
+
}, [rowExpanding, rowSelect, columnHiding, sorting, filters, globalSearch, pagination, virtualize]);
|
|
243
247
|
}
|
|
244
248
|
exports.usePluginConfig = usePluginConfig;
|
|
245
249
|
function useDefaultTableInstance(_a) {
|
|
246
|
-
var columns = _a.columns, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.initialState, initialState = _c === void 0 ? {} : _c;
|
|
250
|
+
var columns = _a.columns, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.initialState, initialState = _c === void 0 ? {} : _c, defaultColumn = _a.defaultColumn;
|
|
247
251
|
var filterTypes = (0, react_2.useMemo)(function () { return ({
|
|
248
252
|
equalsOneOf: function (rows, ids, filterValue) {
|
|
249
253
|
return rows.filter(function (row) {
|
|
@@ -306,6 +310,7 @@ function useDefaultTableInstance(_a) {
|
|
|
306
310
|
getRowId: getRowId,
|
|
307
311
|
columns: columns,
|
|
308
312
|
data: data,
|
|
313
|
+
defaultColumn: defaultColumn,
|
|
309
314
|
filterTypes: filterTypes,
|
|
310
315
|
stateReducer: stateReducer,
|
|
311
316
|
initialState: state,
|
|
@@ -326,4 +331,4 @@ function getColumnFilterConfig(filterType) {
|
|
|
326
331
|
}
|
|
327
332
|
}
|
|
328
333
|
exports.getColumnFilterConfig = getColumnFilterConfig;
|
|
329
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
334
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -47,6 +47,9 @@ function DataTable() {
|
|
|
47
47
|
rowsPerPageOptions: [5, 10, 20],
|
|
48
48
|
pageSize: 10,
|
|
49
49
|
},
|
|
50
|
+
virtualize: {
|
|
51
|
+
enabled: false,
|
|
52
|
+
},
|
|
50
53
|
rowSelect: {
|
|
51
54
|
enabled: true,
|
|
52
55
|
mode: 'multi',
|
|
@@ -58,8 +61,14 @@ function DataTable() {
|
|
|
58
61
|
getRowId: function (person) { return person.id; },
|
|
59
62
|
},
|
|
60
63
|
};
|
|
61
|
-
var instance = (0, DataTable_1.useDefaultTableInstance)({
|
|
64
|
+
var instance = (0, DataTable_1.useDefaultTableInstance)({
|
|
65
|
+
columns: columns,
|
|
66
|
+
data: data,
|
|
67
|
+
options: options,
|
|
68
|
+
defaultColumn: { minWidth: 50, width: 150, maxWidth: 200 },
|
|
69
|
+
});
|
|
62
70
|
return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
|
|
63
|
-
react_1.default.createElement(
|
|
71
|
+
react_1.default.createElement("div", { style: { height: '700px', width: '640px' } },
|
|
72
|
+
react_1.default.createElement(DataTable_1.default, { title: "People", 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"); } }))));
|
|
64
73
|
}
|
|
65
74
|
exports.DataTable = DataTable;
|
|
@@ -10,8 +10,8 @@ var react_1 = require("@emotion/react");
|
|
|
10
10
|
var icons_material_1 = require("@mui/icons-material");
|
|
11
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
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
|
-
var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 0;\n"], ["\n line-height: 0;\n"])));
|
|
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);
|
|
13
|
+
var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 0;\n flex: none;\n"], ["\n line-height: 0;\n flex: none;\n"])));
|
|
14
|
+
var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n flex: none;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n ", ";\n flex: none;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), wrapperStyle);
|
|
15
15
|
function SortIndicator(_a) {
|
|
16
16
|
var canSort = _a.canSort, isSorted = _a.isSorted, isSortedDesc = _a.isSortedDesc;
|
|
17
17
|
if (!canSort) {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** @jsxRuntime classic */
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { Filters, UseFiltersInstanceProps } from 'react-table';
|
|
5
|
+
import { SimpleMap } from '../../../../types/Internal.types';
|
|
6
|
+
interface Props<D extends object> {
|
|
7
|
+
columnNameById: SimpleMap<string>;
|
|
8
|
+
filters: Filters<D>;
|
|
9
|
+
setFilter: UseFiltersInstanceProps<D>['setFilter'];
|
|
10
|
+
}
|
|
11
|
+
export default function AppliedFilters<D extends object>({ columnNameById, filters, setFilter }: Props<D>): jsx.JSX.Element | null;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
/** @jsxRuntime classic */
|
|
8
|
+
/** @jsx jsx */
|
|
9
|
+
var react_1 = require("@emotion/react");
|
|
10
|
+
var material_1 = require("@mui/material");
|
|
11
|
+
var SingleSelectFilter_1 = require("../FilterTool/Filters/SingleSelectFilter");
|
|
12
|
+
var PADDING = 24;
|
|
13
|
+
function AppliedFilters(_a) {
|
|
14
|
+
var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
|
|
15
|
+
if (!filters.length) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
return ((0, react_1.jsx)(material_1.Stack, { direction: "row", overflow: "none", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: calc(100% - ", "px);\n padding: 8px ", "px;\n flex-wrap: wrap;\n gap: 0.25rem 0.25rem;\n "], ["\n width: calc(100% - ", "px);\n padding: 8px ", "px;\n flex-wrap: wrap;\n gap: 0.25rem 0.25rem;\n "])), PADDING * 2, PADDING) }, filters
|
|
19
|
+
.filter(function (filter) {
|
|
20
|
+
return (Array.isArray(filter.value) && !!filter.value.length) ||
|
|
21
|
+
(!Array.isArray(filter.value) && filter.value != null);
|
|
22
|
+
})
|
|
23
|
+
.map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
|
|
24
|
+
}
|
|
25
|
+
exports.default = AppliedFilters;
|
|
26
|
+
var templateObject_1;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/** @jsxRuntime classic */
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { Cell, TableCellProps } from 'react-table';
|
|
5
|
+
interface Props<D extends object> {
|
|
6
|
+
cell: Cell<D>;
|
|
7
|
+
cellProps: Omit<TableCellProps, 'key'>;
|
|
8
|
+
}
|
|
9
|
+
export default function BodyCell<D extends object>({ cell, cellProps }: Props<D>): jsx.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
|
+
var t = {};
|
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
20
|
+
t[p] = s[p];
|
|
21
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
22
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
23
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
24
|
+
t[p[i]] = s[p[i]];
|
|
25
|
+
}
|
|
26
|
+
return t;
|
|
27
|
+
};
|
|
28
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
29
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
|
+
};
|
|
31
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
+
/** @jsxRuntime classic */
|
|
33
|
+
/** @jsx jsx */
|
|
34
|
+
var react_1 = require("@emotion/react");
|
|
35
|
+
var material_1 = require("@mui/material");
|
|
36
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
37
|
+
var DataTable_1 = require("../DataTable");
|
|
38
|
+
function BodyCell(_a) {
|
|
39
|
+
var cell = _a.cell, cellProps = _a.cellProps;
|
|
40
|
+
var style = cellProps.style, className = cellProps.className, restOfCellProps = __rest(cellProps, ["style", "className"]);
|
|
41
|
+
return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
|
|
42
|
+
var css = _a.css, cx = _a.cx;
|
|
43
|
+
return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cx(
|
|
44
|
+
// @ts-ignore
|
|
45
|
+
css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n padding: ", "px;\n display: block;\n border-bottom: none;\n }\n "], ["\n && {\n padding: ", "px;\n display: block;\n border-bottom: none;\n }\n "])), DataTable_1.CELL_PADDING)), className: (0, classnames_1.default)(className, cell.column.id === 'custom' ? 'cell-Custom' : undefined) }, restOfCellProps, { component: "div", variant: "body" }), cell.render('Cell')));
|
|
46
|
+
}));
|
|
47
|
+
}
|
|
48
|
+
exports.default = BodyCell;
|
|
49
|
+
var templateObject_1;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { EnhancedRow } from '../DataTable';
|
|
3
|
+
import { TableRowProps } from 'react-table';
|
|
4
|
+
interface Props<D extends object> {
|
|
5
|
+
ExpandedComponent: ((props: {
|
|
6
|
+
data: D;
|
|
7
|
+
}) => JSX.Element) | undefined;
|
|
8
|
+
row: EnhancedRow<D>;
|
|
9
|
+
rowProps: Omit<TableRowProps, 'key'>;
|
|
10
|
+
innerRef?: ((element?: Element | undefined) => void) | undefined;
|
|
11
|
+
style?: CSSProperties;
|
|
12
|
+
measure?: () => void;
|
|
13
|
+
}
|
|
14
|
+
declare const BodyRow: import("react").NamedExoticComponent<Props<any>>;
|
|
15
|
+
export default BodyRow;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
|
+
var t = {};
|
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
20
|
+
t[p] = s[p];
|
|
21
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
22
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
23
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
24
|
+
t[p[i]] = s[p[i]];
|
|
25
|
+
}
|
|
26
|
+
return t;
|
|
27
|
+
};
|
|
28
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
29
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
30
|
+
if (!m) return o;
|
|
31
|
+
var i = m.call(o), r, ar = [], e;
|
|
32
|
+
try {
|
|
33
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
34
|
+
}
|
|
35
|
+
catch (error) { e = { error: error }; }
|
|
36
|
+
finally {
|
|
37
|
+
try {
|
|
38
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
39
|
+
}
|
|
40
|
+
finally { if (e) throw e.error; }
|
|
41
|
+
}
|
|
42
|
+
return ar;
|
|
43
|
+
};
|
|
44
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
45
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
46
|
+
};
|
|
47
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
|
+
/** @jsxRuntime classic */
|
|
49
|
+
/** @jsx jsx */
|
|
50
|
+
var react_1 = require("@emotion/react");
|
|
51
|
+
var react_2 = require("react");
|
|
52
|
+
var material_1 = require("@mui/material");
|
|
53
|
+
var BodyCell_1 = __importDefault(require("./BodyCell"));
|
|
54
|
+
var lodash_1 = require("lodash");
|
|
55
|
+
function Row(_a) {
|
|
56
|
+
var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, measure = _a.measure;
|
|
57
|
+
var _b = __read((0, react_2.useState)(null), 2), element = _b[0], setElement = _b[1];
|
|
58
|
+
var className = rowProps.className, rowPropsStyle = rowProps.style, restOfRowProps = __rest(rowProps, ["className", "style"]);
|
|
59
|
+
var isExpanded = row.isExpanded;
|
|
60
|
+
(0, react_2.useEffect)(function () {
|
|
61
|
+
if (!element)
|
|
62
|
+
return;
|
|
63
|
+
var resizeObserver = new ResizeObserver(measure ? measure : lodash_1.noop);
|
|
64
|
+
resizeObserver.observe(element);
|
|
65
|
+
return function () { return resizeObserver.disconnect(); };
|
|
66
|
+
}, [!!element]);
|
|
67
|
+
return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
|
|
68
|
+
var css = _a.css, cx = _a.cx;
|
|
69
|
+
return ((0, react_1.jsx)("div", { ref: function (node) {
|
|
70
|
+
setElement(node);
|
|
71
|
+
if (innerRef) {
|
|
72
|
+
innerRef(node);
|
|
73
|
+
}
|
|
74
|
+
}, css: cx(style && css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: auto;\n "], ["\n width: auto;\n "])))) },
|
|
75
|
+
(0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps, { component: "div", css: cx(
|
|
76
|
+
// @ts-ignore
|
|
77
|
+
css(rowPropsStyle), css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "])))), className: className }), row.cells.map(function (cell) {
|
|
78
|
+
var _a = cell.getCellProps(), key = _a.key, restOfCellProps = __rest(_a, ["key"]);
|
|
79
|
+
return (0, react_1.jsx)(BodyCell_1.default, { key: key, cell: cell, cellProps: restOfCellProps });
|
|
80
|
+
})),
|
|
81
|
+
isExpanded && !!ExpandedComponent && ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "]))) },
|
|
82
|
+
(0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n && {\n display: block;\n border-bottom: none;\n }\n "], ["\n && {\n display: block;\n border-bottom: none;\n }\n "]))) },
|
|
83
|
+
(0, react_1.jsx)(ExpandedComponent, { data: row.original }))))));
|
|
84
|
+
}));
|
|
85
|
+
}
|
|
86
|
+
var BodyRow = (0, react_2.memo)(Row);
|
|
87
|
+
exports.default = BodyRow;
|
|
88
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/** @jsxRuntime classic */
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
interface Props {
|
|
5
|
+
setShowSearch: (value: boolean) => void;
|
|
6
|
+
globalFilter: string;
|
|
7
|
+
setGlobalFilter: (filterValue: any) => void;
|
|
8
|
+
}
|
|
9
|
+
export default function GlobalSearchFilter({ globalFilter, setGlobalFilter, setShowSearch }: Props): jsx.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
7
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
8
|
+
if (!m) return o;
|
|
9
|
+
var i = m.call(o), r, ar = [], e;
|
|
10
|
+
try {
|
|
11
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
12
|
+
}
|
|
13
|
+
catch (error) { e = { error: error }; }
|
|
14
|
+
finally {
|
|
15
|
+
try {
|
|
16
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
17
|
+
}
|
|
18
|
+
finally { if (e) throw e.error; }
|
|
19
|
+
}
|
|
20
|
+
return ar;
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
+
/** @jsxRuntime classic */
|
|
24
|
+
/** @jsx jsx */
|
|
25
|
+
var react_1 = require("@emotion/react");
|
|
26
|
+
var material_1 = require("@mui/material");
|
|
27
|
+
var icons_material_1 = require("@mui/icons-material");
|
|
28
|
+
var react_table_1 = require("react-table");
|
|
29
|
+
var react_2 = require("react");
|
|
30
|
+
function GlobalSearchFilter(_a) {
|
|
31
|
+
var globalFilter = _a.globalFilter, setGlobalFilter = _a.setGlobalFilter, setShowSearch = _a.setShowSearch;
|
|
32
|
+
var _b = __read((0, react_2.useState)(globalFilter), 2), value = _b[0], setValue = _b[1];
|
|
33
|
+
var onChange = (0, react_table_1.useAsyncDebounce)(function (value) {
|
|
34
|
+
setGlobalFilter(value || undefined);
|
|
35
|
+
}, 300);
|
|
36
|
+
return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n min-width: 20rem;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n "], ["\n max-width: 100%;\n min-width: 20rem;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n "]))), "data-testid": "globalSearchFilter" },
|
|
37
|
+
(0, react_1.jsx)(icons_material_1.Search, null),
|
|
38
|
+
(0, react_1.jsx)(material_1.TextField, { value: value || '', onChange: function (evt) {
|
|
39
|
+
setValue(evt.target.value);
|
|
40
|
+
onChange(evt.target.value);
|
|
41
|
+
}, fullWidth: true, variant: "standard", autoFocus: true }),
|
|
42
|
+
(0, react_1.jsx)(material_1.IconButton, { onClick: function () {
|
|
43
|
+
setGlobalFilter(null);
|
|
44
|
+
setShowSearch(false);
|
|
45
|
+
} },
|
|
46
|
+
(0, react_1.jsx)(icons_material_1.Close, null))));
|
|
47
|
+
}
|
|
48
|
+
exports.default = GlobalSearchFilter;
|
|
49
|
+
var templateObject_1;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** @jsxRuntime classic */
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { jsx } from '@emotion/react';
|
|
4
|
+
import { EnhancedHeader } from '../DataTable';
|
|
5
|
+
import { TableHeaderProps } from 'react-table';
|
|
6
|
+
interface Props<D extends object> {
|
|
7
|
+
className?: string;
|
|
8
|
+
header: EnhancedHeader<D>;
|
|
9
|
+
headerProps: Omit<TableHeaderProps, 'key'>;
|
|
10
|
+
}
|
|
11
|
+
export default function HeaderCell<D extends object>({ className, header, headerProps }: Props<D>): jsx.JSX.Element;
|
|
12
|
+
export {};
|