@tap-payments/os-micro-frontend-shared 0.1.69 → 0.1.70-test.21
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/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts +1 -1
- package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js +3 -3
- package/build/components/VirtualTables/SheetViewVirtualTable/components/VirtualTable.d.ts +2 -1
- package/build/components/VirtualTables/SheetViewVirtualTable/components/VirtualTable.js +3 -3
- package/build/components/VirtualTables/SheetViewVirtualTable/types.d.ts +1 -0
- package/build/constants/table/cell/authorizationTableCellWidth.d.ts +45 -0
- package/build/constants/table/cell/authorizationTableCellWidth.js +45 -0
- package/build/constants/table.d.ts +2 -0
- package/build/constants/table.js +2 -0
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ISheetViewVirtualTable } from './types';
|
|
3
|
-
declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
|
|
5
5
|
export default _default;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useCallback } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
|
|
4
4
|
import TableFooter from '../components/TableFooter/TableFooter';
|
|
5
5
|
import { SheetViewTableContainer } from '../components/style';
|
|
6
6
|
import { SheetViewVirtualTableWrapper } from './style';
|
|
7
7
|
import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
|
|
8
8
|
import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
|
|
9
|
-
function SheetViewVirtualTable({ columns, rows, threshold =
|
|
9
|
+
function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
|
|
10
10
|
const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
|
|
11
11
|
const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
|
|
12
12
|
rows,
|
|
@@ -43,7 +43,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
43
43
|
const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
|
|
44
44
|
handleScroll(scrollProps, source);
|
|
45
45
|
};
|
|
46
|
-
return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef }));
|
|
46
|
+
return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
|
|
47
47
|
}, [
|
|
48
48
|
itemsCount,
|
|
49
49
|
lastItemIndex,
|
|
@@ -39,7 +39,8 @@ interface VirtualTableProps {
|
|
|
39
39
|
onScroll?: (scrollProps: ListOnScrollProps) => void;
|
|
40
40
|
setBackdropVisibility: (visible: boolean) => void;
|
|
41
41
|
listRef: React.RefObject<VariableSizeList>;
|
|
42
|
+
overscanCount?: number;
|
|
42
43
|
}
|
|
43
|
-
declare function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, }: VirtualTableProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
declare function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, overscanCount, }: VirtualTableProps): import("react/jsx-runtime").JSX.Element;
|
|
44
45
|
declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
|
|
45
46
|
export default _default;
|
|
@@ -11,10 +11,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
11
11
|
import { memo } from 'react';
|
|
12
12
|
import InfiniteLoader from 'react-window-infinite-loader';
|
|
13
13
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
14
|
-
import {
|
|
14
|
+
import { SHEET_VIEW_TABLE_LIST_OVER_SCAN } from '../../../../constants/index.js';
|
|
15
15
|
import ListItemWrapper from '../../components/virtualScroll/ListItemWrapper';
|
|
16
16
|
import { StyledVirtualList } from '../../components/style';
|
|
17
|
-
function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, }) {
|
|
17
|
+
function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, overscanCount = SHEET_VIEW_TABLE_LIST_OVER_SCAN, }) {
|
|
18
18
|
const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
|
|
19
19
|
if (areAllRowsLoaded)
|
|
20
20
|
return;
|
|
@@ -23,7 +23,7 @@ function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded,
|
|
|
23
23
|
return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
|
|
24
24
|
const itemSize = (index) => getItemSize(index, height);
|
|
25
25
|
const itemData = getItemData(columnsData, isPinned, height);
|
|
26
|
-
return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount:
|
|
26
|
+
return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
|
|
27
27
|
overflowX: isPinned ? 'hidden' : 'auto',
|
|
28
28
|
paddingBottom: isPinned ? '25px' : '13px',
|
|
29
29
|
backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
|
|
@@ -5,6 +5,7 @@ export interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView
|
|
|
5
5
|
onColumnPin?: (columnId: string, isPinned: boolean) => void;
|
|
6
6
|
isPinnable?: boolean;
|
|
7
7
|
clearBackdropVisibilityTimeout?: number;
|
|
8
|
+
overscanCount?: number;
|
|
8
9
|
}
|
|
9
10
|
export interface SheetViewTableHeaderProps {
|
|
10
11
|
columns: IColumnProps[];
|
|
@@ -164,4 +164,49 @@ export declare const authorizationTableCellWidth: {
|
|
|
164
164
|
readonly text: "116px";
|
|
165
165
|
readonly sheet: "116px";
|
|
166
166
|
};
|
|
167
|
+
readonly payment_initiated: {
|
|
168
|
+
readonly default: "150px";
|
|
169
|
+
readonly text: "150px";
|
|
170
|
+
readonly sheet: "150px";
|
|
171
|
+
};
|
|
172
|
+
readonly payment_issuers: {
|
|
173
|
+
readonly default: "150px";
|
|
174
|
+
readonly text: "150px";
|
|
175
|
+
readonly sheet: "350px";
|
|
176
|
+
};
|
|
177
|
+
readonly card_number: {
|
|
178
|
+
readonly default: "120px";
|
|
179
|
+
readonly text: "120px";
|
|
180
|
+
readonly sheet: "155px";
|
|
181
|
+
};
|
|
182
|
+
readonly payment_type: {
|
|
183
|
+
readonly default: "150px";
|
|
184
|
+
readonly text: "150px";
|
|
185
|
+
readonly sheet: "120px";
|
|
186
|
+
};
|
|
187
|
+
readonly payment_method: {
|
|
188
|
+
readonly default: "150px";
|
|
189
|
+
readonly text: "150px";
|
|
190
|
+
readonly sheet: "145px";
|
|
191
|
+
};
|
|
192
|
+
readonly payment_scheme: {
|
|
193
|
+
readonly default: "150px";
|
|
194
|
+
readonly text: "150px";
|
|
195
|
+
readonly sheet: "145px";
|
|
196
|
+
};
|
|
197
|
+
readonly auth_status: {
|
|
198
|
+
readonly default: "150px";
|
|
199
|
+
readonly text: "150px";
|
|
200
|
+
readonly sheet: "165px";
|
|
201
|
+
};
|
|
202
|
+
readonly auth_type: {
|
|
203
|
+
readonly default: "150px";
|
|
204
|
+
readonly text: "150px";
|
|
205
|
+
readonly sheet: "155px";
|
|
206
|
+
};
|
|
207
|
+
readonly eci: {
|
|
208
|
+
readonly default: "150px";
|
|
209
|
+
readonly text: "150px";
|
|
210
|
+
readonly sheet: "100px";
|
|
211
|
+
};
|
|
167
212
|
};
|
|
@@ -164,4 +164,49 @@ export const authorizationTableCellWidth = {
|
|
|
164
164
|
text: '116px',
|
|
165
165
|
sheet: '116px',
|
|
166
166
|
},
|
|
167
|
+
payment_initiated: {
|
|
168
|
+
default: '150px',
|
|
169
|
+
text: '150px',
|
|
170
|
+
sheet: '150px',
|
|
171
|
+
},
|
|
172
|
+
payment_issuers: {
|
|
173
|
+
default: '150px',
|
|
174
|
+
text: '150px',
|
|
175
|
+
sheet: '350px',
|
|
176
|
+
},
|
|
177
|
+
card_number: {
|
|
178
|
+
default: '120px',
|
|
179
|
+
text: '120px',
|
|
180
|
+
sheet: '155px',
|
|
181
|
+
},
|
|
182
|
+
payment_type: {
|
|
183
|
+
default: '150px',
|
|
184
|
+
text: '150px',
|
|
185
|
+
sheet: '120px',
|
|
186
|
+
},
|
|
187
|
+
payment_method: {
|
|
188
|
+
default: '150px',
|
|
189
|
+
text: '150px',
|
|
190
|
+
sheet: '145px',
|
|
191
|
+
},
|
|
192
|
+
payment_scheme: {
|
|
193
|
+
default: '150px',
|
|
194
|
+
text: '150px',
|
|
195
|
+
sheet: '145px',
|
|
196
|
+
},
|
|
197
|
+
auth_status: {
|
|
198
|
+
default: '150px',
|
|
199
|
+
text: '150px',
|
|
200
|
+
sheet: '165px',
|
|
201
|
+
},
|
|
202
|
+
auth_type: {
|
|
203
|
+
default: '150px',
|
|
204
|
+
text: '150px',
|
|
205
|
+
sheet: '155px',
|
|
206
|
+
},
|
|
207
|
+
eci: {
|
|
208
|
+
default: '150px',
|
|
209
|
+
text: '150px',
|
|
210
|
+
sheet: '100px',
|
|
211
|
+
},
|
|
167
212
|
};
|
|
@@ -3,4 +3,6 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
|
|
|
3
3
|
export declare const TABLE_ROW_HEIGHT = 57;
|
|
4
4
|
export declare const TABLE_THRESHOLD = 200;
|
|
5
5
|
export declare const TABLE_LIST_OVER_SCAN = 5;
|
|
6
|
+
export declare const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
|
|
7
|
+
export declare const SHEET_VIEW_TABLE_THRESHOLD = 20;
|
|
6
8
|
export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;
|
package/build/constants/table.js
CHANGED
|
@@ -3,4 +3,6 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
|
|
|
3
3
|
export const TABLE_ROW_HEIGHT = 57;
|
|
4
4
|
export const TABLE_THRESHOLD = 200;
|
|
5
5
|
export const TABLE_LIST_OVER_SCAN = 5;
|
|
6
|
+
export const SHEET_VIEW_TABLE_LIST_OVER_SCAN = 50;
|
|
7
|
+
export const SHEET_VIEW_TABLE_THRESHOLD = 20;
|
|
6
8
|
export const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/os-micro-frontend-shared",
|
|
3
3
|
"description": "Shared components and utilities for Tap Payments micro frontends",
|
|
4
|
-
"version": "0.1.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.70-test.21",
|
|
5
|
+
"testVersion": 21,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -134,4 +134,4 @@
|
|
|
134
134
|
"publishConfig": {
|
|
135
135
|
"registry": "https://registry.npmjs.org/"
|
|
136
136
|
}
|
|
137
|
-
}
|
|
137
|
+
}
|