@vendorflow/components 2.0.71 → 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/components/material-ui/AudioPlayer/AudioPlayer.d.ts +3 -2
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.js +2 -2
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.story.js +1 -1
- 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/Modal/Modal.d.ts +1 -0
- package/lib/components/material-ui/Modal/Modal.js +13 -7
- package/lib/components/material-ui/Modal/Modal.story.js +30 -3
- package/package.json +5 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import 'react-h5-audio-player/lib/styles.css';
|
|
2
2
|
export interface AudioPlayerProps {
|
|
3
|
-
|
|
3
|
+
src: string;
|
|
4
|
+
onError?: any;
|
|
4
5
|
}
|
|
5
|
-
export default function AudioPlayer({
|
|
6
|
+
export default function AudioPlayer({ src, onError }: AudioPlayerProps): JSX.Element;
|
|
@@ -52,7 +52,7 @@ require("react-h5-audio-player/lib/styles.css");
|
|
|
52
52
|
var ButtonMenu_1 = __importDefault(require("../ButtonMenu"));
|
|
53
53
|
var MobileBreakpoint = 768;
|
|
54
54
|
function AudioPlayer(_a) {
|
|
55
|
-
var
|
|
55
|
+
var src = _a.src, onError = _a.onError;
|
|
56
56
|
var player = (0, react_2.createRef)();
|
|
57
57
|
var _b = __read((0, react_2.useState)(1), 2), playbackRate = _b[0], setPlaybackRate = _b[1];
|
|
58
58
|
var isOnMobile = useIsOnMobile();
|
|
@@ -87,7 +87,7 @@ function AudioPlayer(_a) {
|
|
|
87
87
|
var _a, _b, _c, _d;
|
|
88
88
|
return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rhap_main-controls-button {\n color: ", ";\n }\n .rhap_progress-indicator {\n background: ", ";\n }\n .rhap_additional-controls {\n flex: 1;\n }\n "], ["\n .rhap_main-controls-button {\n color: ", ";\n }\n .rhap_progress-indicator {\n background: ", ";\n }\n .rhap_additional-controls {\n flex: 1;\n }\n "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)', ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d.main) || 'hsl(321, 53%, 31%)');
|
|
89
89
|
} },
|
|
90
|
-
(0, react_1.jsx)(react_h5_audio_player_1.default, { ref: player, src:
|
|
90
|
+
(0, react_1.jsx)(react_h5_audio_player_1.default, { ref: player, src: src, showFilledProgress: true, progressJumpSteps: { backward: 10000, forward: 10000 }, customAdditionalControls: isOnMobile ? [PlaybackRateOptions] : [react_h5_audio_player_1.RHAP_UI.LOOP, PlaybackRateOptions], customVolumeControls: isOnMobile ? [] : [react_h5_audio_player_1.RHAP_UI.VOLUME], customControlsSection: isIOS ? [] : [react_h5_audio_player_1.RHAP_UI.ADDITIONAL_CONTROLS, react_h5_audio_player_1.RHAP_UI.MAIN_CONTROLS, react_h5_audio_player_1.RHAP_UI.VOLUME_CONTROLS], onError: onError })));
|
|
91
91
|
}
|
|
92
92
|
exports.default = AudioPlayer;
|
|
93
93
|
function useIsOnMobile() {
|
|
@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.AudioPlayer = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
8
|
var AudioPlayer_1 = __importDefault(require("./AudioPlayer"));
|
|
9
|
-
var AudioPlayer = function () { return (react_1.default.createElement(AudioPlayer_1.default, {
|
|
9
|
+
var AudioPlayer = function () { return (react_1.default.createElement(AudioPlayer_1.default, { src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' })); };
|
|
10
10
|
exports.AudioPlayer = AudioPlayer;
|
|
@@ -25,7 +25,7 @@ exports.Columns = [
|
|
|
25
25
|
__assign({ Header: 'Last Name', accessor: 'lastName', filterName: 'Custom LN' }, (0, DataTable_1.getColumnFilterConfig)('multi-select')),
|
|
26
26
|
],
|
|
27
27
|
},
|
|
28
|
-
__assign({ Header: 'Age', accessor: 'age', sortType: 'number', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('range')),
|
|
28
|
+
__assign(__assign({ Header: 'Age', accessor: 'age', sortType: 'number', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('range')), { width: 100 }),
|
|
29
29
|
__assign({ Header: 'Occupation', accessor: 'occupation', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
|
|
30
30
|
__assign({ Header: 'Company', id: 'company', accessor: function (originalRow) { return originalRow.company.name; }, disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
|
|
31
31
|
];
|
|
@@ -18,7 +18,6 @@ export interface TableFeatureOptions<D extends object> {
|
|
|
18
18
|
rowExpanding?: {
|
|
19
19
|
enabled: boolean;
|
|
20
20
|
mode: Mode;
|
|
21
|
-
colSpan?: number;
|
|
22
21
|
Component: (props: {
|
|
23
22
|
data: D;
|
|
24
23
|
}) => JSX.Element;
|
|
@@ -49,13 +48,17 @@ export interface TableFeatureOptions<D extends object> {
|
|
|
49
48
|
table?: {
|
|
50
49
|
getRowId?: UseTableOptions<D>['getRowId'];
|
|
51
50
|
};
|
|
51
|
+
virtualize?: {
|
|
52
|
+
enabled: boolean;
|
|
53
|
+
defaultRowHeight?: number;
|
|
54
|
+
};
|
|
52
55
|
}
|
|
56
|
+
export declare const CELL_PADDING = 4;
|
|
53
57
|
interface Props<D extends object> {
|
|
54
58
|
title?: string;
|
|
55
59
|
'data-testid'?: string;
|
|
56
60
|
labels?: {
|
|
57
61
|
noMatchLabel?: string;
|
|
58
|
-
noMatchColSpan?: number;
|
|
59
62
|
};
|
|
60
63
|
columns: Partial<EnhancedColumn<D>>[];
|
|
61
64
|
instance: EnhancedTableInstance<D>;
|
|
@@ -70,8 +73,9 @@ export interface UseDefaultTableInstanceProps<D extends object> {
|
|
|
70
73
|
data: D[];
|
|
71
74
|
options?: TableFeatureOptions<D>;
|
|
72
75
|
initialState?: Partial<EnhancedTableState<D>>;
|
|
76
|
+
defaultColumn?: Partial<Column<D>>;
|
|
73
77
|
}
|
|
74
|
-
export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, }: UseDefaultTableInstanceProps<D>): EnhancedTableInstance<D>;
|
|
78
|
+
export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, defaultColumn, }: UseDefaultTableInstanceProps<D>): EnhancedTableInstance<D>;
|
|
75
79
|
export declare type FilterType = 'text' | 'select' | 'multi-select' | 'range';
|
|
76
80
|
export declare function getColumnFilterConfig<D extends object>(filterType: FilterType): {
|
|
77
81
|
filter: string;
|
|
@@ -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 {};
|