@tap-payments/os-micro-frontend-shared 0.0.79 → 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.
- package/LICENSE +21 -21
- package/README.md +12 -12
- package/build/components/SearchButton/styles.d.ts +1 -1
- package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -1
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.d.ts +1 -1
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.js +2 -2
- package/build/components/TableCells/CustomCells/ApplicationStatusCell/type.d.ts +0 -2
- package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts +1 -1
- package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -1
- package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts +1 -1
- package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +2 -6
- package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.d.ts +5 -5
- package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.js +7 -9
- package/build/components/VirtualTable/hooks/useScrollBackShadow.d.ts +1 -2
- package/build/components/VirtualTable/hooks/useScrollBackShadow.js +2 -2
- package/build/components/VirtualTable/index.d.ts +0 -1
- package/build/components/VirtualTable/index.js +0 -1
- package/build/components/VirtualTable/style.d.ts +2 -3
- package/build/components/VirtualTable/style.js +0 -3
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/constants/apps.d.ts +0 -17
- package/build/constants/apps.js +0 -4
- package/build/constants/assets.d.ts +0 -2
- package/build/constants/assets.js +0 -2
- package/build/constants/table/cell/walletStatementTableCellWidth.d.ts +1 -1
- package/build/constants/table/cell/walletStatementTableCellWidth.js +1 -1
- package/build/constants/table.d.ts +1 -1
- package/build/constants/table.js +1 -1
- package/build/types/table.d.ts +0 -3
- package/package.json +129 -129
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts +0 -17
- package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js +0 -69
- package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.d.ts +0 -10
- package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +0 -121
- package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.d.ts +0 -11
- package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.js +0 -62
- package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.d.ts +0 -8
- package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.js +0 -30
- package/build/components/VirtualTable/SheetView/index.d.ts +0 -3
- package/build/components/VirtualTable/SheetView/index.js +0 -3
- package/build/components/VirtualTable/SheetView/style.d.ts +0 -31
- 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.
|
|
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,121 +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, 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 shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
|
|
63
|
-
const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
|
|
64
|
-
const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
|
|
65
|
-
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);
|
|
66
|
-
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);
|
|
67
|
-
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);
|
|
68
|
-
const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
|
|
69
|
-
const tableItemsCount = itemsCount;
|
|
70
|
-
const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
|
|
71
|
-
if (areAllRowsLoaded)
|
|
72
|
-
return;
|
|
73
|
-
yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
|
|
74
|
-
});
|
|
75
|
-
const currentItemData = containerKey === 'pinnedStart' ? pinnedStartItemData : containerKey === 'pinnedEnd' ? pinnedEndItemData : unpinnedItemData;
|
|
76
|
-
const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
|
|
77
|
-
const handleScrollCallback = (scrollProps) => {
|
|
78
|
-
const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
|
|
79
|
-
handleScroll(scrollProps, source);
|
|
80
|
-
};
|
|
81
|
-
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: {
|
|
82
|
-
overflowX: isPinned ? 'hidden' : 'auto',
|
|
83
|
-
} }, { children: ListItemWrapper }))) })) })));
|
|
84
|
-
}, [
|
|
85
|
-
itemsCount,
|
|
86
|
-
areAllRowsLoaded,
|
|
87
|
-
loadMoreItems,
|
|
88
|
-
threshold,
|
|
89
|
-
rowHeight,
|
|
90
|
-
pinnedStartItemData,
|
|
91
|
-
pinnedEndItemData,
|
|
92
|
-
unpinnedItemData,
|
|
93
|
-
handleScroll,
|
|
94
|
-
scrollToIndex,
|
|
95
|
-
areTotalRowsNotFillingHeight,
|
|
96
|
-
]);
|
|
97
|
-
const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
|
|
98
|
-
const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
|
|
99
|
-
const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
|
|
100
|
-
return acc + width;
|
|
101
|
-
}, 0), [pinnedStartColumnsData]);
|
|
102
|
-
const pinnedEndColumnsWidth = useMemo(() => pinnedEndColumnsData.reduce((acc, col) => {
|
|
103
|
-
const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
|
|
104
|
-
return acc + width;
|
|
105
|
-
}, 0), [pinnedEndColumnsData]);
|
|
106
|
-
const renderPinnedColumn = (position, columnsData, columnsWidth, pinnedColumnsList) => {
|
|
107
|
-
const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
|
|
108
|
-
const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
|
|
109
|
-
if (columnsData.length === 0)
|
|
110
|
-
return null;
|
|
111
|
-
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: {
|
|
112
|
-
width: '100%',
|
|
113
|
-
minWidth: 'fit-content',
|
|
114
|
-
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
|
|
115
|
-
};
|
|
116
|
-
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: {
|
|
117
|
-
width: '100%',
|
|
118
|
-
minWidth: 'fit-content',
|
|
119
|
-
} }, { 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))] }));
|
|
120
|
-
}
|
|
121
|
-
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
|
-
};
|