@tap-payments/os-micro-frontend-shared 0.0.80 → 0.0.81

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.
Files changed (43) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +12 -12
  3. package/build/components/SearchButton/styles.d.ts +1 -1
  4. package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -1
  5. package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.d.ts +1 -1
  6. package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.js +2 -2
  7. package/build/components/TableCells/CustomCells/ApplicationStatusCell/type.d.ts +0 -2
  8. package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts +1 -1
  9. package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -1
  10. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts +1 -1
  11. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +2 -6
  12. package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.d.ts +5 -5
  13. package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.js +7 -9
  14. package/build/components/VirtualTable/hooks/useScrollBackShadow.d.ts +1 -2
  15. package/build/components/VirtualTable/hooks/useScrollBackShadow.js +2 -2
  16. package/build/components/VirtualTable/index.d.ts +0 -1
  17. package/build/components/VirtualTable/index.js +0 -1
  18. package/build/components/VirtualTable/style.d.ts +2 -3
  19. package/build/components/VirtualTable/style.js +0 -3
  20. package/build/components/index.d.ts +0 -1
  21. package/build/components/index.js +0 -1
  22. package/build/constants/apps.d.ts +0 -17
  23. package/build/constants/apps.js +0 -4
  24. package/build/constants/assets.d.ts +0 -2
  25. package/build/constants/assets.js +0 -2
  26. package/build/constants/table/cell/walletStatementTableCellWidth.d.ts +1 -1
  27. package/build/constants/table/cell/walletStatementTableCellWidth.js +1 -1
  28. package/build/constants/table.d.ts +1 -1
  29. package/build/constants/table.js +1 -1
  30. package/build/types/table.d.ts +0 -3
  31. package/package.json +129 -129
  32. package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts +0 -17
  33. package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js +0 -69
  34. package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.d.ts +0 -10
  35. package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +0 -120
  36. package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.d.ts +0 -11
  37. package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.js +0 -62
  38. package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.d.ts +0 -8
  39. package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.js +0 -30
  40. package/build/components/VirtualTable/SheetView/index.d.ts +0 -3
  41. package/build/components/VirtualTable/SheetView/index.js +0 -3
  42. package/build/components/VirtualTable/SheetView/style.d.ts +0 -31
  43. package/build/components/VirtualTable/SheetView/style.js +0 -86
package/package.json CHANGED
@@ -1,129 +1,129 @@
1
- {
2
- "name": "@tap-payments/os-micro-frontend-shared",
3
- "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.80",
5
- "type": "module",
6
- "main": "build/index.js",
7
- "module": "build/index.js",
8
- "types": "build/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./build/index.d.ts",
12
- "import": "./build/index.js",
13
- "require": "./build/index.js"
14
- },
15
- "./constants": {
16
- "types": "./build/constants/index.d.ts",
17
- "import": "./build/constants/index.js",
18
- "require": "./build/constants/index.js"
19
- },
20
- "./components": {
21
- "types": "./build/components/index.d.ts",
22
- "import": "./build/components/index.js",
23
- "require": "./build/components/index.js"
24
- },
25
- "./components/*": {
26
- "types": "./build/components/*/index.d.ts",
27
- "import": "./build/components/*/index.js",
28
- "require": "./build/components/*/index.js"
29
- },
30
- "./hooks": {
31
- "types": "./build/hooks/index.d.ts",
32
- "import": "./build/hooks/index.js",
33
- "require": "./build/hooks/index.js"
34
- },
35
- "./utils": {
36
- "types": "./build/utils/index.d.ts",
37
- "import": "./build/utils/index.js",
38
- "require": "./build/utils/index.js"
39
- },
40
- "./theme": {
41
- "types": "./build/theme/index.d.ts",
42
- "import": "./build/theme/index.js",
43
- "require": "./build/theme/index.js"
44
- },
45
- "./types": {
46
- "types": "./build/types/index.d.ts",
47
- "import": "./build/types/index.js",
48
- "require": "./build/types/index.js"
49
- }
50
- },
51
- "license": "MIT",
52
- "author": {
53
- "name": "Ahmed Sharkawy",
54
- "email": "a.elsharkawy@tap.company"
55
- },
56
- "files": [
57
- "build",
58
- "readme.md"
59
- ],
60
- "scripts": {
61
- "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
62
- "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
63
- "dev": "vite",
64
- "build": "tsc -b && vite build ",
65
- "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
66
- "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
67
- "lint": "eslint . --color",
68
- "lint:fix": "eslint src --fix --color",
69
- "preview": "vite preview",
70
- "prepare": "husky"
71
- },
72
- "dependencies": {
73
- "@emotion/react": "^11.11.0",
74
- "@emotion/styled": "^11.11.0",
75
- "@hookform/resolvers": "^3.3.1",
76
- "@mui/material": "^5.12.3",
77
- "@uiw/react-json-view": "^2.0.0-alpha.16",
78
- "axios": "^1.4.0",
79
- "dayjs": "^1.11.8",
80
- "framer-motion": "10.11.0",
81
- "i18next": "^22.4.15",
82
- "memoize-one": "^6.0.0",
83
- "re-resizable": "^6.9.9",
84
- "react": "^18.2.0",
85
- "react-currency-input-field": "^3.6.11",
86
- "react-dom": "^18.2.0",
87
- "react-draggable": "^4.4.6",
88
- "react-dropzone": "^14.2.3",
89
- "react-hook-form": "^7.45.4",
90
- "react-hot-toast": "^2.4.1",
91
- "react-i18next": "^12.2.2",
92
- "react-multi-date-picker": "^4.1.2",
93
- "react-router-dom": "^6.14.2",
94
- "react-virtualized-auto-sizer": "^1.0.20",
95
- "react-window": "^1.8.9",
96
- "react-window-infinite-loader": "^1.0.9",
97
- "react18-input-otp": "^1.1.4",
98
- "recharts": "^2.15.1"
99
- },
100
- "devDependencies": {
101
- "@eslint/js": "^9.17.0",
102
- "@testing-library/jest-dom": "^5.16.5",
103
- "@types/lodash": "^4.17.15",
104
- "@types/react": "^18.2.6",
105
- "@types/react-dom": "^18.3.5",
106
- "@types/react-virtualized-auto-sizer": "^1.0.8",
107
- "@types/react-window": "^1.8.5",
108
- "@types/react-window-infinite-loader": "^1.0.6",
109
- "@vitejs/plugin-react": "^4.3.4",
110
- "eslint": "^9.17.0",
111
- "eslint-plugin-react-hooks": "^5.0.0",
112
- "eslint-plugin-react-refresh": "^0.4.16",
113
- "globals": "^15.14.0",
114
- "husky": "^8.0.3",
115
- "lint-staged": "^13.2.2",
116
- "prettier": "^2.8.8",
117
- "tsc-alias": "^1.8.16",
118
- "typescript": "5.0.2",
119
- "typescript-eslint": "^8.18.2",
120
- "vite": "6.0.5",
121
- "vite-tsconfig-paths": "^4.2.0"
122
- },
123
- "lint-staged": {
124
- "src/**/*.{ts,tsx,json,js,jsx}": [
125
- "yarn run prettier:fix",
126
- "yarn run lint"
127
- ]
128
- }
129
- }
1
+ {
2
+ "name": "@tap-payments/os-micro-frontend-shared",
3
+ "description": "Shared components and utilities for Tap Payments micro frontends",
4
+ "version": "0.0.81",
5
+ "type": "module",
6
+ "main": "build/index.js",
7
+ "module": "build/index.js",
8
+ "types": "build/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./build/index.d.ts",
12
+ "import": "./build/index.js",
13
+ "require": "./build/index.js"
14
+ },
15
+ "./constants": {
16
+ "types": "./build/constants/index.d.ts",
17
+ "import": "./build/constants/index.js",
18
+ "require": "./build/constants/index.js"
19
+ },
20
+ "./components": {
21
+ "types": "./build/components/index.d.ts",
22
+ "import": "./build/components/index.js",
23
+ "require": "./build/components/index.js"
24
+ },
25
+ "./components/*": {
26
+ "types": "./build/components/*/index.d.ts",
27
+ "import": "./build/components/*/index.js",
28
+ "require": "./build/components/*/index.js"
29
+ },
30
+ "./hooks": {
31
+ "types": "./build/hooks/index.d.ts",
32
+ "import": "./build/hooks/index.js",
33
+ "require": "./build/hooks/index.js"
34
+ },
35
+ "./utils": {
36
+ "types": "./build/utils/index.d.ts",
37
+ "import": "./build/utils/index.js",
38
+ "require": "./build/utils/index.js"
39
+ },
40
+ "./theme": {
41
+ "types": "./build/theme/index.d.ts",
42
+ "import": "./build/theme/index.js",
43
+ "require": "./build/theme/index.js"
44
+ },
45
+ "./types": {
46
+ "types": "./build/types/index.d.ts",
47
+ "import": "./build/types/index.js",
48
+ "require": "./build/types/index.js"
49
+ }
50
+ },
51
+ "license": "MIT",
52
+ "author": {
53
+ "name": "Ahmed Sharkawy",
54
+ "email": "a.elsharkawy@tap.company"
55
+ },
56
+ "files": [
57
+ "build",
58
+ "readme.md"
59
+ ],
60
+ "scripts": {
61
+ "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
62
+ "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
63
+ "dev": "vite",
64
+ "build": "tsc -b && vite build ",
65
+ "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
66
+ "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
67
+ "lint": "eslint . --color",
68
+ "lint:fix": "eslint src --fix --color",
69
+ "preview": "vite preview",
70
+ "prepare": "husky"
71
+ },
72
+ "dependencies": {
73
+ "@emotion/react": "^11.11.0",
74
+ "@emotion/styled": "^11.11.0",
75
+ "@hookform/resolvers": "^3.3.1",
76
+ "@mui/material": "^5.12.3",
77
+ "@uiw/react-json-view": "^2.0.0-alpha.16",
78
+ "axios": "^1.4.0",
79
+ "dayjs": "^1.11.8",
80
+ "framer-motion": "10.11.0",
81
+ "i18next": "^22.4.15",
82
+ "memoize-one": "^6.0.0",
83
+ "re-resizable": "^6.9.9",
84
+ "react": "^18.2.0",
85
+ "react-currency-input-field": "^3.6.11",
86
+ "react-dom": "^18.2.0",
87
+ "react-draggable": "^4.4.6",
88
+ "react-dropzone": "^14.2.3",
89
+ "react-hook-form": "^7.45.4",
90
+ "react-hot-toast": "^2.4.1",
91
+ "react-i18next": "^12.2.2",
92
+ "react-multi-date-picker": "^4.1.2",
93
+ "react-router-dom": "^6.14.2",
94
+ "react-virtualized-auto-sizer": "^1.0.20",
95
+ "react-window": "^1.8.9",
96
+ "react-window-infinite-loader": "^1.0.9",
97
+ "react18-input-otp": "^1.1.4",
98
+ "recharts": "^2.15.1"
99
+ },
100
+ "devDependencies": {
101
+ "@eslint/js": "^9.17.0",
102
+ "@testing-library/jest-dom": "^5.16.5",
103
+ "@types/lodash": "^4.17.15",
104
+ "@types/react": "^18.2.6",
105
+ "@types/react-dom": "^18.3.5",
106
+ "@types/react-virtualized-auto-sizer": "^1.0.8",
107
+ "@types/react-window": "^1.8.5",
108
+ "@types/react-window-infinite-loader": "^1.0.6",
109
+ "@vitejs/plugin-react": "^4.3.4",
110
+ "eslint": "^9.17.0",
111
+ "eslint-plugin-react-hooks": "^5.0.0",
112
+ "eslint-plugin-react-refresh": "^0.4.16",
113
+ "globals": "^15.14.0",
114
+ "husky": "^8.0.3",
115
+ "lint-staged": "^13.2.2",
116
+ "prettier": "^2.8.8",
117
+ "tsc-alias": "^1.8.16",
118
+ "typescript": "5.0.2",
119
+ "typescript-eslint": "^8.18.2",
120
+ "vite": "6.0.5",
121
+ "vite-tsconfig-paths": "^4.2.0"
122
+ },
123
+ "lint-staged": {
124
+ "src/**/*.{ts,tsx,json,js,jsx}": [
125
+ "yarn run prettier:fix",
126
+ "yarn run lint"
127
+ ]
128
+ }
129
+ }
@@ -1,17 +0,0 @@
1
- /// <reference types="react" />
2
- import { type TableHeadProps } from '@mui/material';
3
- import type { IColumnProps, IVirtualTable } from '../../../types/index.js';
4
- interface SheetViewTableHeaderProps {
5
- columns: IColumnProps[];
6
- headerProps?: TableHeadProps;
7
- columnsSorting?: IVirtualTable['columnsSorting'];
8
- onColumnSort?: IVirtualTable['onColumnSort'];
9
- showBackDrop: boolean;
10
- pinnedColumns?: string[];
11
- onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
12
- isPinnable?: boolean;
13
- lastColumnId?: string | null;
14
- }
15
- declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
16
- declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
17
- export default _default;
@@ -1,69 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { memo, useState } from 'react';
3
- import { Box, useTheme } from '@mui/material';
4
- import Dropdown from '../../DropdownMenu';
5
- import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../../constants/index.js';
6
- import ColumnFilter from '../components/ColumnFilter';
7
- import { StyledCell } from '../style';
8
- import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow } from './style';
9
- function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, }) {
10
- const [anchorEl, setAnchorEl] = useState(null);
11
- const open = Boolean(anchorEl);
12
- const theme = useTheme();
13
- const handleClick = (event) => {
14
- setAnchorEl(event.currentTarget);
15
- };
16
- const handleClose = () => {
17
- setAnchorEl(null);
18
- };
19
- const handleSortingOption = (columnId, order) => {
20
- if (columnId) {
21
- onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
22
- [columnId]: order,
23
- });
24
- handleClose();
25
- }
26
- };
27
- const handlePinClick = (columnId) => {
28
- const isCurrentlyPinned = pinnedColumns.includes(columnId);
29
- if (isCurrentlyPinned) {
30
- onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
31
- }
32
- else {
33
- if (columnId === lastColumnId) {
34
- onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'end');
35
- }
36
- else {
37
- onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'start');
38
- }
39
- }
40
- };
41
- return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
42
- const { header, id, align, headerStyle, sortable, filter, pinnable } = column;
43
- const isFirst = id === columns[0].id;
44
- const isLast = id === columns[columns.length - 1].id;
45
- const isPinned = pinnedColumns.includes(id);
46
- const isDefaultPinned = !!column.isDefaultPinned;
47
- return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: () => handlePinClick(id), title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
48
- }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
49
- {
50
- label: 'Sort A-Z',
51
- name: 'asc',
52
- icon: _jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }),
53
- selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc',
54
- onClick: () => {
55
- handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
56
- },
57
- },
58
- {
59
- label: 'Sort Z-A',
60
- name: 'desc',
61
- icon: _jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }),
62
- selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'desc',
63
- onClick: () => {
64
- handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
65
- },
66
- },
67
- ] })] })));
68
- }
69
- export default memo(SheetViewTableHeader);
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- import type { IVirtualTable } from '../../../types/index.js';
3
- interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
4
- onColumnPin?: (columnId: string, isPinned: boolean) => void;
5
- isPinnable?: boolean;
6
- clearBackdropVisibilityTimeout?: number;
7
- }
8
- declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
9
- declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
10
- export default _default;
@@ -1,120 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
- import { useMemo, memo, useState, useCallback } from 'react';
12
- import { useTheme } from '@mui/material/styles';
13
- import memoize from 'memoize-one';
14
- import InfiniteLoader from 'react-window-infinite-loader';
15
- import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, TABLE_ROW_HEIGHT } from '../../../constants/index.js';
16
- import { useDelayToSetValue } from '../../../hooks/index.js';
17
- import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
18
- import TableFooter from '../components/TableFooter/TableFooter';
19
- import TableLastItem from '../components/TableLastItem';
20
- import TableNoData from '../components/TableNoData';
21
- import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
22
- import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../style';
23
- import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
24
- import SheetViewTableHeader from './SheetViewTableHeader';
25
- import AutoSizer from 'react-virtualized-auto-sizer';
26
- import { usePinnedColumns } from './hooks/usePinnedColumns';
27
- import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
28
- const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned) => ({
29
- columns,
30
- isLoading,
31
- rows,
32
- rowProps,
33
- scrollToIndex,
34
- totalCount,
35
- lastItemIndex,
36
- isError,
37
- areAllRowsLoaded,
38
- limit: totalCount,
39
- newLoadedRowsEndIndex: lastItemIndex,
40
- isSheetView: true,
41
- isPinned,
42
- }));
43
- function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, }) {
44
- var _a, _b, _c;
45
- const theme = useTheme();
46
- const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
47
- const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
48
- const onPointerDown = (e) => {
49
- dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
50
- };
51
- const isDelayedFetchingNextPage = useDelayToSetValue({
52
- value: isFetchingNextPage,
53
- delay: 1000,
54
- });
55
- const [showBackDrop, setShowBackdrop] = useState(false);
56
- const isError = hasError(error);
57
- const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
58
- const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
59
- const tableEmpty = !isLoading && rows.length === 0;
60
- const hasTimeoutError = isTimeoutError(error);
61
- const lastItemIndex = rows.length - 1;
62
- const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
63
- const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
64
- const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
65
- const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
66
- const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false);
67
- const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
68
- const tableItemsCount = itemsCount;
69
- const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
70
- if (areAllRowsLoaded)
71
- return;
72
- yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
73
- });
74
- const currentItemData = containerKey === 'pinnedStart' ? pinnedStartItemData : containerKey === 'pinnedEnd' ? pinnedEndItemData : unpinnedItemData;
75
- const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
76
- const handleScrollCallback = (scrollProps) => {
77
- const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
78
- handleScroll(scrollProps, source);
79
- };
80
- return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
81
- overflowX: isPinned ? 'hidden' : 'auto',
82
- } }, { children: ListItemWrapper }))) })) })));
83
- }, [
84
- itemsCount,
85
- areAllRowsLoaded,
86
- loadMoreItems,
87
- threshold,
88
- rowHeight,
89
- pinnedStartItemData,
90
- pinnedEndItemData,
91
- unpinnedItemData,
92
- handleScroll,
93
- scrollToIndex,
94
- areTotalRowsNotFillingHeight,
95
- ]);
96
- const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
97
- const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
98
- const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
99
- return acc + width;
100
- }, 0), [pinnedStartColumnsData]);
101
- const pinnedEndColumnsWidth = useMemo(() => pinnedEndColumnsData.reduce((acc, col) => {
102
- const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
103
- return acc + width;
104
- }, 0), [pinnedEndColumnsData]);
105
- const renderPinnedColumn = (position, columnsData, columnsWidth, pinnedColumnsList) => {
106
- const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
107
- const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
108
- if (columnsData.length === 0)
109
- return null;
110
- return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
111
- width: '100%',
112
- minWidth: 'fit-content',
113
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
114
- };
115
- return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
116
- width: '100%',
117
- minWidth: 'fit-content',
118
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
119
- }
120
- export default memo(SheetViewVirtualTable);
@@ -1,11 +0,0 @@
1
- import type { IColumnProps } from '../../../../types/index.js';
2
- export declare const usePinnedColumns: (columns: readonly IColumnProps[], isPinnable: boolean, onColumnPin?: ((columnId: string, isPinned: boolean) => void) | undefined) => {
3
- pinnedStartColumns: string[];
4
- pinnedEndColumns: string[];
5
- handleColumnPin: (columnId: string, position?: 'start' | 'end' | 'unpin') => void;
6
- pinnedStartColumnsData: IColumnProps<any>[];
7
- pinnedEndColumnsData: IColumnProps<any>[];
8
- unpinnedColumnsData: IColumnProps<any>[];
9
- orderedColumns: IColumnProps<any>[];
10
- lastColumnId: string | null;
11
- };
@@ -1,62 +0,0 @@
1
- import { useState, useCallback, useMemo } from 'react';
2
- export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
3
- const [pinnedStartColumns, setPinnedStartColumns] = useState(() => {
4
- const userPinned = isPinnable ? columns.filter((c) => c.pinned === 'start').map((c) => c.id) : [];
5
- const defaultPinned = columns.filter((c) => c.isDefaultPinned).map((c) => c.id);
6
- return Array.from(new Set([...defaultPinned, ...userPinned]));
7
- });
8
- const [pinnedEndColumns, setPinnedEndColumns] = useState(() => {
9
- return isPinnable ? columns.filter((c) => c.pinned === 'end').map((c) => c.id) : [];
10
- });
11
- const handleColumnPin = useCallback((columnId, position = 'start') => {
12
- if (!isPinnable)
13
- return;
14
- let newPinnedStart = [...pinnedStartColumns];
15
- let newPinnedEnd = [...pinnedEndColumns];
16
- if (position === 'unpin') {
17
- newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
18
- newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
19
- }
20
- else if (position === 'start') {
21
- newPinnedStart = [...newPinnedStart.filter((id) => id !== columnId), columnId];
22
- newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
23
- }
24
- else if (position === 'end') {
25
- newPinnedEnd = [...newPinnedEnd.filter((id) => id !== columnId), columnId];
26
- newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
27
- }
28
- setPinnedStartColumns(newPinnedStart);
29
- setPinnedEndColumns(newPinnedEnd);
30
- const isPinned = newPinnedStart.includes(columnId) || newPinnedEnd.includes(columnId);
31
- onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, isPinned);
32
- }, [pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable]);
33
- const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
34
- const { pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData } = useMemo(() => {
35
- const start = shownColumns.filter((column) => pinnedStartColumns.includes(column.id));
36
- const end = shownColumns.filter((column) => pinnedEndColumns.includes(column.id));
37
- const unpinned = shownColumns.filter((column) => !pinnedStartColumns.includes(column.id) && !pinnedEndColumns.includes(column.id));
38
- const sortedStart = start.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
39
- const sortedEnd = end.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
40
- const sortedUnpinned = unpinned.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
41
- return {
42
- pinnedStartColumnsData: sortedStart,
43
- pinnedEndColumnsData: sortedEnd,
44
- unpinnedColumnsData: sortedUnpinned,
45
- };
46
- }, [shownColumns, pinnedStartColumns, pinnedEndColumns]);
47
- const orderedColumns = useMemo(() => [...pinnedStartColumnsData, ...unpinnedColumnsData, ...pinnedEndColumnsData], [pinnedStartColumnsData, unpinnedColumnsData, pinnedEndColumnsData]);
48
- const lastColumnId = useMemo(() => {
49
- const lastCol = orderedColumns[orderedColumns.length - 1];
50
- return lastCol ? lastCol.id : null;
51
- }, [orderedColumns]);
52
- return {
53
- pinnedStartColumns,
54
- pinnedEndColumns,
55
- handleColumnPin,
56
- pinnedStartColumnsData,
57
- pinnedEndColumnsData,
58
- unpinnedColumnsData,
59
- orderedColumns,
60
- lastColumnId,
61
- };
62
- };
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import { VariableSizeList, ListOnScrollProps } from 'react-window';
3
- export declare const useSynchronizedScroll: () => {
4
- pinnedStartVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
5
- scrollableVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
6
- pinnedEndVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
7
- handleScroll: ({ scrollOffset }: ListOnScrollProps, source: 'start' | 'end' | 'scrollable') => void;
8
- };
@@ -1,30 +0,0 @@
1
- import { useRef, useCallback } from 'react';
2
- export const useSynchronizedScroll = () => {
3
- const pinnedStartVirtualListRef = useRef(null);
4
- const scrollableVirtualListRef = useRef(null);
5
- const pinnedEndVirtualListRef = useRef(null);
6
- const isScrollingSyncRef = useRef(false);
7
- const handleScroll = useCallback(({ scrollOffset }, source) => {
8
- if (isScrollingSyncRef.current)
9
- return;
10
- isScrollingSyncRef.current = true;
11
- if (source !== 'start' && pinnedStartVirtualListRef.current) {
12
- pinnedStartVirtualListRef.current.scrollTo(scrollOffset);
13
- }
14
- if (source !== 'end' && pinnedEndVirtualListRef.current) {
15
- pinnedEndVirtualListRef.current.scrollTo(scrollOffset);
16
- }
17
- if (source !== 'scrollable' && scrollableVirtualListRef.current) {
18
- scrollableVirtualListRef.current.scrollTo(scrollOffset);
19
- }
20
- requestAnimationFrame(() => {
21
- isScrollingSyncRef.current = false;
22
- });
23
- }, []);
24
- return {
25
- pinnedStartVirtualListRef,
26
- scrollableVirtualListRef,
27
- pinnedEndVirtualListRef,
28
- handleScroll,
29
- };
30
- };
@@ -1,3 +0,0 @@
1
- export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
2
- export { default as SheetViewTableHeader } from './SheetViewTableHeader';
3
- export * from './style';
@@ -1,3 +0,0 @@
1
- export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
2
- export { default as SheetViewTableHeader } from './SheetViewTableHeader';
3
- export * from './style';