@vendorflow/components 2.0.75 → 2.0.76
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/DataTable/DataTable.d.ts +80 -5
- package/lib/components/material-ui/DataTable/DataTable.js +17 -2
- package/lib/components/material-ui/DataTable/DataTable.story.js +3 -0
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +5 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsxRuntime classic */
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
|
-
import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions } from 'react-table';
|
|
4
|
+
import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, ColumnInstance, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, ActionType, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsState } from 'react-table';
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
export declare type Mode = 'single' | 'multi';
|
|
7
7
|
export declare type CustomColumnConfigProps<D extends object> = {
|
|
@@ -9,13 +9,13 @@ export declare type CustomColumnConfigProps<D extends object> = {
|
|
|
9
9
|
filterName?: string;
|
|
10
10
|
columns?: EnhancedColumn<D>[];
|
|
11
11
|
};
|
|
12
|
-
export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & CustomColumnConfigProps<D>;
|
|
12
|
+
export declare type EnhancedHeader<D extends object> = HeaderGroup<D> & UseFiltersColumnProps<D> & UseSortByColumnProps<D> & UseResizeColumnsColumnProps<D> & CustomColumnConfigProps<D>;
|
|
13
13
|
export declare type EnhancedTableOptions<D extends object> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseSortByOptions<D> & UsePaginationOptions<D> & UseRowSelectOptions<D>;
|
|
14
14
|
export declare type EnhancedTableInstance<D extends object> = Omit<TableInstance<D>, 'state'> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseSortByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & {
|
|
15
15
|
state: EnhancedTableState<D>;
|
|
16
16
|
};
|
|
17
|
-
export declare type EnhancedTableState<D extends object> = TableState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseSortByState<D> & UsePaginationState<D> & UseRowSelectState<D>;
|
|
18
|
-
export declare type EnhancedColumn<D extends object> = CustomColumnConfigProps<D> & Partial<Omit<Column<D>, 'columns'>> & Partial<UseFiltersColumnOptions<D>> & Partial<UseSortByColumnOptions<D>>;
|
|
17
|
+
export declare type EnhancedTableState<D extends object> = TableState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseSortByState<D> & UsePaginationState<D> & UseRowSelectState<D> & UseResizeColumnsState<D>;
|
|
18
|
+
export declare type EnhancedColumn<D extends object> = CustomColumnConfigProps<D> & Partial<Omit<Column<D>, 'columns'>> & Partial<UseFiltersColumnOptions<D>> & Partial<UseSortByColumnOptions<D>> & Partial<UseResizeColumnsColumnOptions<D>>;
|
|
19
19
|
export declare type EnhancedRow<D extends object> = Row<D> & UseExpandedRowProps<D> & UseRowSelectRowProps<D>;
|
|
20
20
|
export interface TableFeatureOptions<D extends object> {
|
|
21
21
|
rowExpanding?: {
|
|
@@ -36,6 +36,9 @@ export interface TableFeatureOptions<D extends object> {
|
|
|
36
36
|
columnHiding?: {
|
|
37
37
|
enabled: boolean;
|
|
38
38
|
};
|
|
39
|
+
columnResizing?: {
|
|
40
|
+
enabled: boolean;
|
|
41
|
+
};
|
|
39
42
|
pagination?: {
|
|
40
43
|
enabled: boolean;
|
|
41
44
|
pageSize?: number;
|
|
@@ -78,7 +81,79 @@ export interface UseDefaultTableInstanceProps<D extends object> {
|
|
|
78
81
|
initialState?: Partial<EnhancedTableState<D>>;
|
|
79
82
|
defaultColumn?: Partial<Column<D>>;
|
|
80
83
|
}
|
|
81
|
-
export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, defaultColumn, }: UseDefaultTableInstanceProps<D>):
|
|
84
|
+
export declare function useDefaultTableInstance<D extends object>({ columns, data, options, initialState, defaultColumn, }: UseDefaultTableInstanceProps<D>): {
|
|
85
|
+
setColumnWidth: (columnId: string, width: number) => void;
|
|
86
|
+
data: readonly D[];
|
|
87
|
+
columns: ColumnInstance<D>[];
|
|
88
|
+
headers: ColumnInstance<D>[];
|
|
89
|
+
rows: Row<D>[];
|
|
90
|
+
plugins: PluginHook<D>[];
|
|
91
|
+
allColumns: ColumnInstance<D>[];
|
|
92
|
+
initialState?: Partial<TableState<D>> | undefined;
|
|
93
|
+
stateReducer?: ((newState: TableState<D>, action: ActionType, previousState: TableState<D>, instance?: TableInstance<D> | undefined) => TableState<D>) | undefined;
|
|
94
|
+
useControlledState?: ((state: TableState<D>, meta: import("react-table").MetaBase<D>) => TableState<D>) | undefined;
|
|
95
|
+
defaultColumn?: Partial<Column<D>> | undefined;
|
|
96
|
+
getSubRows?: ((originalRow: D, relativeIndex: number) => D[]) | undefined;
|
|
97
|
+
getRowId?: ((originalRow: D, relativeIndex: number, parent?: Row<D> | undefined) => string) | undefined;
|
|
98
|
+
autoResetHiddenColumns?: boolean | undefined;
|
|
99
|
+
dispatch: import("react-table").TableDispatch<any>;
|
|
100
|
+
visibleColumns: ColumnInstance<D>[];
|
|
101
|
+
headerGroups: HeaderGroup<D>[];
|
|
102
|
+
footerGroups: HeaderGroup<D>[];
|
|
103
|
+
flatHeaders: ColumnInstance<D>[];
|
|
104
|
+
rowsById: Record<string, Row<D>>;
|
|
105
|
+
getTableProps: (propGetter?: import("react-table").TablePropGetter<D> | undefined) => import("react-table").TableProps;
|
|
106
|
+
getTableBodyProps: (propGetter?: import("react-table").TableBodyPropGetter<D> | undefined) => import("react-table").TableBodyProps;
|
|
107
|
+
prepareRow: (row: Row<D>) => void;
|
|
108
|
+
flatRows: Row<D>[];
|
|
109
|
+
totalColumnsWidth: number;
|
|
110
|
+
allColumnsHidden: boolean;
|
|
111
|
+
toggleHideColumn: (columnId: import("react-table").IdType<D>, value?: boolean | undefined) => void;
|
|
112
|
+
setHiddenColumns: (param: import("react-table").IdType<D>[] | ((oldHidden: import("react-table").IdType<D>[]) => import("react-table").IdType<D>[])) => void;
|
|
113
|
+
toggleHideAllColumns: (value?: boolean | undefined) => void;
|
|
114
|
+
getToggleHideAllColumnsProps: (props?: Partial<import("react-table").TableToggleHideAllColumnProps> | undefined) => import("react-table").TableToggleHideAllColumnProps;
|
|
115
|
+
getHooks: () => import("react-table").Hooks<D>;
|
|
116
|
+
preExpandedRows: Row<D>[];
|
|
117
|
+
expandedRows: Row<D>[];
|
|
118
|
+
expandedDepth: number;
|
|
119
|
+
isAllRowsExpanded: boolean;
|
|
120
|
+
toggleRowExpanded: (id: import("react-table").IdType<D>[], value?: boolean | undefined) => void;
|
|
121
|
+
toggleAllRowsExpanded: (value?: boolean | undefined) => void;
|
|
122
|
+
preFilteredRows: Row<D>[];
|
|
123
|
+
preFilteredFlatRows: Row<D>[];
|
|
124
|
+
preFilteredRowsById: Record<string, Row<D>>;
|
|
125
|
+
filteredRows: Row<D>[];
|
|
126
|
+
filteredFlatRows: Row<D>[];
|
|
127
|
+
filteredRowsById: Record<string, Row<D>>;
|
|
128
|
+
setFilter: (columnId: import("react-table").IdType<D>, updater: any) => void;
|
|
129
|
+
setAllFilters: (updater: import("react-table").Filters<D> | ((filters: import("react-table").Filters<D>) => import("react-table").Filters<D>)) => void;
|
|
130
|
+
preGlobalFilteredRows: Row<D>[];
|
|
131
|
+
preGlobalFilteredFlatRows: Row<D>[];
|
|
132
|
+
preGlobalFilteredRowsById: Record<string, Row<D>>;
|
|
133
|
+
globalFilteredRows: Row<D>[];
|
|
134
|
+
globalFilteredFlatRows: Row<D>[];
|
|
135
|
+
globalFilteredRowsById: Record<string, Row<D>>;
|
|
136
|
+
setGlobalFilter: (filterValue: any) => void;
|
|
137
|
+
preSortedRows: Row<D>[];
|
|
138
|
+
setSortBy: (sortBy: import("react-table").SortingRule<D>[]) => void;
|
|
139
|
+
toggleSortBy: (columnId: import("react-table").IdType<D>, descending?: boolean | undefined, isMulti?: boolean | undefined) => void;
|
|
140
|
+
page: Row<D>[];
|
|
141
|
+
pageCount: number;
|
|
142
|
+
pageOptions: number[];
|
|
143
|
+
canPreviousPage: boolean;
|
|
144
|
+
canNextPage: boolean;
|
|
145
|
+
gotoPage: (updater: number | ((pageIndex: number) => number)) => void;
|
|
146
|
+
previousPage: () => void;
|
|
147
|
+
nextPage: () => void;
|
|
148
|
+
setPageSize: (pageSize: number) => void;
|
|
149
|
+
toggleRowSelected: (rowId: import("react-table").IdType<D>, set?: boolean | undefined) => void;
|
|
150
|
+
toggleAllRowsSelected: (value?: boolean | undefined) => void;
|
|
151
|
+
getToggleAllRowsSelectedProps: (props?: Partial<import("react-table").TableToggleAllRowsSelectedProps> | undefined) => import("react-table").TableToggleAllRowsSelectedProps;
|
|
152
|
+
getToggleAllPageRowsSelectedProps: (props?: Partial<import("react-table").TableToggleAllRowsSelectedProps> | undefined) => import("react-table").TableToggleAllRowsSelectedProps;
|
|
153
|
+
isAllRowsSelected: boolean;
|
|
154
|
+
selectedFlatRows: Row<D>[];
|
|
155
|
+
state: EnhancedTableState<D>;
|
|
156
|
+
};
|
|
82
157
|
export declare function renderSingleLineCell(value: string): jsx.JSX.Element;
|
|
83
158
|
export declare type FilterType = 'text' | 'select' | 'multi-select' | 'range';
|
|
84
159
|
export declare function getColumnFilterConfig<D extends object>(filterType: FilterType): {
|
|
@@ -183,7 +183,7 @@ function DataTable(_a) {
|
|
|
183
183
|
}
|
|
184
184
|
exports.default = DataTable;
|
|
185
185
|
function usePluginConfig(options) {
|
|
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;
|
|
186
|
+
var filters = options.filters, globalSearch = options.globalSearch, pagination = options.pagination, rowExpanding = options.rowExpanding, sorting = options.sorting, rowSelect = options.rowSelect, columnHiding = options.columnHiding, columnResizing = options.columnResizing, virtualize = options.virtualize;
|
|
187
187
|
var customCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
|
|
188
188
|
? exports.CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH
|
|
189
189
|
: Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + exports.CELL_PADDING * 2;
|
|
@@ -208,6 +208,9 @@ function usePluginConfig(options) {
|
|
|
208
208
|
if (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) {
|
|
209
209
|
result.push(react_table_1.useRowSelect);
|
|
210
210
|
}
|
|
211
|
+
if (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.enabled) {
|
|
212
|
+
result.push(react_table_1.useResizeColumns);
|
|
213
|
+
}
|
|
211
214
|
// column customizations
|
|
212
215
|
if ((rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled) || (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled)) {
|
|
213
216
|
result.push(function (hooks) {
|
|
@@ -285,6 +288,14 @@ function useDefaultTableInstance(_a) {
|
|
|
285
288
|
});
|
|
286
289
|
}
|
|
287
290
|
}
|
|
291
|
+
if (action.type === 'manuallySetColumnWidth') {
|
|
292
|
+
var _c = action, columnId_1 = _c.columnId, width_1 = _c.width;
|
|
293
|
+
newState = (0, immer_1.default)(newState, function (draft) {
|
|
294
|
+
// @ts-ignore
|
|
295
|
+
;
|
|
296
|
+
draft.columnResizing.columnWidths[columnId_1] = width_1;
|
|
297
|
+
});
|
|
298
|
+
}
|
|
288
299
|
return newState;
|
|
289
300
|
}
|
|
290
301
|
var plugins = usePluginConfig(options);
|
|
@@ -304,7 +315,7 @@ function useDefaultTableInstance(_a) {
|
|
|
304
315
|
}
|
|
305
316
|
var getRowId = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowId;
|
|
306
317
|
var _e = ((options === null || options === void 0 ? void 0 : options.rowExpanding) || {}).autoResetExpanded, autoResetExpanded = _e === void 0 ? true : _e;
|
|
307
|
-
|
|
318
|
+
var instance = react_table_1.useTable.apply(void 0, __spreadArray([{
|
|
308
319
|
autoResetExpanded: autoResetExpanded,
|
|
309
320
|
autoResetGlobalFilter: false,
|
|
310
321
|
getRowId: getRowId,
|
|
@@ -315,6 +326,10 @@ function useDefaultTableInstance(_a) {
|
|
|
315
326
|
stateReducer: stateReducer,
|
|
316
327
|
initialState: state,
|
|
317
328
|
}], __read(plugins), false));
|
|
329
|
+
function setColumnWidth(columnId, width) {
|
|
330
|
+
instance.dispatch({ type: 'manuallySetColumnWidth', columnId: columnId, width: width });
|
|
331
|
+
}
|
|
332
|
+
return __assign(__assign({}, instance), { setColumnWidth: setColumnWidth });
|
|
318
333
|
}
|
|
319
334
|
exports.useDefaultTableInstance = useDefaultTableInstance;
|
|
320
335
|
function renderSingleLineCell(value) {
|
|
@@ -35,6 +35,7 @@ var react_1 = require("@emotion/react");
|
|
|
35
35
|
var classnames_1 = __importDefault(require("classnames"));
|
|
36
36
|
var SortIndicator_1 = __importDefault(require("./SortIndicator"));
|
|
37
37
|
var material_1 = require("@mui/material");
|
|
38
|
+
var icons_material_1 = require("@mui/icons-material");
|
|
38
39
|
var DataTable_1 = require("../DataTable");
|
|
39
40
|
function HeaderCell(_a) {
|
|
40
41
|
var className = _a.className, header = _a.header, headerProps = _a.headerProps;
|
|
@@ -44,10 +45,11 @@ function HeaderCell(_a) {
|
|
|
44
45
|
return ((0, react_1.jsx)(material_1.TableCell, __assign({}, restOfProps, { component: "div", variant: "head", css: cx(
|
|
45
46
|
// @ts-ignore
|
|
46
47
|
css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "], ["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "])), DataTable_1.CELL_PADDING), header.minWidth !== undefined && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), header.minWidth), header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: ", "px;\n "], ["\n max-width: ", "px;\n "])), header.maxWidth)), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
|
|
47
|
-
(0, react_1.jsx)("div", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "])), header.columns != null ? 'center' : 'flex-start')) },
|
|
48
|
+
(0, react_1.jsx)("div", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "], ["\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n "])), header.columns != null ? 'center' : 'flex-start')) },
|
|
48
49
|
(0, react_1.jsx)("span", { css: cx(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 600;\n flex: none;\n "], ["\n font-weight: 600;\n flex: none;\n "])))) }, header.render('Header')),
|
|
49
|
-
(0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc })
|
|
50
|
+
(0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }),
|
|
51
|
+
header.id !== 'custom' && !header.id.includes('_placeholder') && !!header.getResizerProps && ((0, react_1.jsx)(icons_material_1.DragIndicator, __assign({ css: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 50%;\n transform: translate(-50%, -50%);\n color: #b2b2b2;\n background-color: white;\n "], ["\n position: absolute;\n right: 0;\n top: 50%;\n transform: translate(-50%, -50%);\n color: #b2b2b2;\n background-color: white;\n "]))) }, header.getResizerProps()))))));
|
|
50
52
|
}));
|
|
51
53
|
}
|
|
52
54
|
exports.default = HeaderCell;
|
|
53
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
55
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|