From fa98e692bde293055f56349f139f24873d20e12e Mon Sep 17 00:00:00 2001 From: Dreamacro <8615343+Dreamacro@users.noreply.github.com> Date: Fri, 25 Mar 2022 19:28:40 +0800 Subject: [PATCH] Feature: use react-table v8 --- package.json | 6 +- pnpm-lock.yaml | 296 ++++++++++++++------------ src/containers/Connections/index.tsx | 275 ++++++++++++------------ src/containers/Connections/style.scss | 8 +- 4 files changed, 295 insertions(+), 290 deletions(-) diff --git a/package.json b/package.json index 4c7fab4..b47004e 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "devDependencies": { "@types/lodash-es": "^4.17.6", "@types/node": "^17.0.23", - "@types/react": "^17.0.42", + "@types/react": "^17.0.43", "@types/react-dom": "^17.0.14", "@types/react-router-dom": "^5.3.3", "@types/react-table": "^7.7.10", @@ -47,7 +47,7 @@ "eslint-plugin-react-hooks": "^4.3.0", "sass": "^1.49.9", "type-fest": "^2.12.1", - "typescript": "^4.6.2", + "typescript": "^4.6.3", "vite": "^2.8.6", "vite-plugin-pwa": "^0.11.13", "vite-plugin-windicss": "^1.8.3", @@ -55,6 +55,7 @@ "windicss": "^3.5.1" }, "dependencies": { + "@tanstack/react-table": "^8.0.0-alpha.8", "axios": "^0.26.1", "classnames": "^2.3.1", "dayjs": "^1.11.0", @@ -66,7 +67,6 @@ "react": "^18.0.0-rc.3", "react-dom": "^18.0.0-rc.3", "react-router-dom": "^6.2.2", - "react-table": "^7.7.0", "react-use": "^17.3.2", "react-virtualized-auto-sizer": "^1.0.6", "react-window": "^1.8.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fe284ee..8e9bd21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,10 @@ lockfileVersion: 5.3 specifiers: + '@tanstack/react-table': ^8.0.0-alpha.8 '@types/lodash-es': ^4.17.6 '@types/node': ^17.0.23 - '@types/react': ^17.0.42 + '@types/react': ^17.0.43 '@types/react-dom': ^17.0.14 '@types/react-router-dom': ^5.3.3 '@types/react-table': ^7.7.10 @@ -32,14 +33,13 @@ specifiers: react: ^18.0.0-rc.3 react-dom: ^18.0.0-rc.3 react-router-dom: ^6.2.2 - react-table: ^7.7.0 react-use: ^17.3.2 react-virtualized-auto-sizer: ^1.0.6 react-window: ^1.8.6 sass: ^1.49.9 swr: ^1.2.2 type-fest: ^2.12.1 - typescript: ^4.6.2 + typescript: ^4.6.3 use-immer: ^0.6.0 vite: ^2.8.6 vite-plugin-pwa: ^0.11.13 @@ -48,6 +48,7 @@ specifiers: windicss: ^3.5.1 dependencies: + '@tanstack/react-table': 8.0.0-alpha.8_581fa33d3647c30d8078674dcd1b240a axios: 0.26.1 classnames: 2.3.1 dayjs: 1.11.0 @@ -59,7 +60,6 @@ dependencies: react: 18.0.0-rc.3 react-dom: 18.0.0-rc.3_react@18.0.0-rc.3 react-router-dom: 6.2.2_581fa33d3647c30d8078674dcd1b240a - react-table: 7.7.0_react@18.0.0-rc.3 react-use: 17.3.2_581fa33d3647c30d8078674dcd1b240a react-virtualized-auto-sizer: 1.0.6_581fa33d3647c30d8078674dcd1b240a react-window: 1.8.6_581fa33d3647c30d8078674dcd1b240a @@ -69,19 +69,19 @@ dependencies: devDependencies: '@types/lodash-es': 4.17.6 '@types/node': 17.0.23 - '@types/react': 17.0.42 + '@types/react': 17.0.43 '@types/react-dom': 17.0.14 '@types/react-router-dom': 5.3.3 '@types/react-table': 7.7.10 '@types/react-virtualized-auto-sizer': 1.0.1 '@types/react-window': 1.8.5 - '@typescript-eslint/eslint-plugin': 5.16.0_3fed250b11519414a4c7d52468dd6bf5 - '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.2 + '@typescript-eslint/eslint-plugin': 5.16.0_bc68a9cd5bf604202498b1a9faaf9387 + '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.3 '@vitejs/plugin-react': 1.2.0 eslint: 8.11.0 eslint-config-airbnb: 19.0.4_21dd17da442cb057dd6c2041daee4072 eslint-config-airbnb-typescript: 16.1.4_199a3777d25e90e3898667ddb95142b1 - eslint-config-standard-with-typescript: 21.0.1_315c78f51e15e2bcdd46c27787a90888 + eslint-config-standard-with-typescript: 21.0.1_9af640a1891a7e55dd23a89beb2108f1 eslint-import-resolver-typescript: 2.7.0_fe22d862ffeecaee86c93a006d59e41e eslint-plugin-import: 2.25.4_eslint@8.11.0 eslint-plugin-node: 11.1.0_eslint@8.11.0 @@ -89,7 +89,7 @@ devDependencies: eslint-plugin-react-hooks: 4.3.0_eslint@8.11.0 sass: 1.49.9 type-fest: 2.12.1 - typescript: 4.6.2 + typescript: 4.6.3 vite: 2.8.6_sass@1.49.9 vite-plugin-pwa: 0.11.13_vite@2.8.6 vite-plugin-windicss: 1.8.3_vite@2.8.6 @@ -1443,6 +1443,18 @@ packages: string.prototype.matchall: 4.0.7 dev: true + /@tanstack/react-table/8.0.0-alpha.8_581fa33d3647c30d8078674dcd1b240a: + resolution: {integrity: sha512-Byp6ScoGxVRLXAWJQm24LbFS5VfYSDJgo7mN4+DuuhBJY88VaWLPcbDcj60OHfxWA+ttUemLJqHEqjlH1ELa9w==} + engines: {node: '>=12'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + react: 18.0.0-rc.3 + react-dom: 18.0.0-rc.3_react@18.0.0-rc.3 + use-sync-external-store: 1.0.0-rc.0_react@18.0.0-rc.3 + dev: false + /@types/estree/0.0.39: resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==} dev: true @@ -1484,14 +1496,14 @@ packages: /@types/react-dom/17.0.14: resolution: {integrity: sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==} dependencies: - '@types/react': 17.0.42 + '@types/react': 17.0.43 dev: true /@types/react-router-dom/5.3.3: resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==} dependencies: '@types/history': 4.7.11 - '@types/react': 17.0.42 + '@types/react': 17.0.43 '@types/react-router': 5.1.18 dev: true @@ -1499,29 +1511,29 @@ packages: resolution: {integrity: sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==} dependencies: '@types/history': 4.7.11 - '@types/react': 17.0.42 + '@types/react': 17.0.43 dev: true /@types/react-table/7.7.10: resolution: {integrity: sha512-yt7FHv/2cFsucStSWLBOB3OmsRZF08DvVHzz8Zg41B4tzRL6pQ+5VYvmhaR1dKS//tDG4UOJ1RQJPEINHYoRtg==} dependencies: - '@types/react': 17.0.42 + '@types/react': 17.0.43 dev: true /@types/react-virtualized-auto-sizer/1.0.1: resolution: {integrity: sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==} dependencies: - '@types/react': 17.0.42 + '@types/react': 17.0.43 dev: true /@types/react-window/1.8.5: resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==} dependencies: - '@types/react': 17.0.42 + '@types/react': 17.0.43 dev: true - /@types/react/17.0.42: - resolution: {integrity: sha512-nuab3x3CpJ7VFeNA+3HTUuEkvClYHXqWtWd7Ud6AZYW7Z3NH9WKtgU+tFB0ZLcHq+niB/HnzLcaZPqMJ95+k5Q==} + /@types/react/17.0.43: + resolution: {integrity: sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==} dependencies: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 @@ -1542,7 +1554,7 @@ packages: resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==} dev: true - /@typescript-eslint/eslint-plugin/5.16.0_3fed250b11519414a4c7d52468dd6bf5: + /@typescript-eslint/eslint-plugin/5.16.0_bc68a9cd5bf604202498b1a9faaf9387: resolution: {integrity: sha512-SJoba1edXvQRMmNI505Uo4XmGbxCK9ARQpkvOd00anxzri9RNQk0DDCxD+LIl+jYhkzOJiOMMKYEHnHEODjdCw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1553,23 +1565,23 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.2 + '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.3 '@typescript-eslint/scope-manager': 5.16.0 - '@typescript-eslint/type-utils': 5.16.0_eslint@8.11.0+typescript@4.6.2 - '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.2 + '@typescript-eslint/type-utils': 5.16.0_eslint@8.11.0+typescript@4.6.3 + '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.3 debug: 4.3.4 eslint: 8.11.0 functional-red-black-tree: 1.0.1 ignore: 5.2.0 regexpp: 3.2.0 semver: 7.3.5 - tsutils: 3.21.0_typescript@4.6.2 - typescript: 4.6.2 + tsutils: 3.21.0_typescript@4.6.3 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser/4.33.0_eslint@8.11.0+typescript@4.6.2: + /@typescript-eslint/parser/4.33.0_eslint@8.11.0+typescript@4.6.3: resolution: {integrity: sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==} engines: {node: ^10.12.0 || >=12.0.0} peerDependencies: @@ -1581,15 +1593,15 @@ packages: dependencies: '@typescript-eslint/scope-manager': 4.33.0 '@typescript-eslint/types': 4.33.0 - '@typescript-eslint/typescript-estree': 4.33.0_typescript@4.6.2 + '@typescript-eslint/typescript-estree': 4.33.0_typescript@4.6.3 debug: 4.3.4 eslint: 8.11.0 - typescript: 4.6.2 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser/5.16.0_eslint@8.11.0+typescript@4.6.2: + /@typescript-eslint/parser/5.16.0_eslint@8.11.0+typescript@4.6.3: resolution: {integrity: sha512-fkDq86F0zl8FicnJtdXakFs4lnuebH6ZADDw6CYQv0UZeIjHvmEw87m9/29nk2Dv5Lmdp0zQ3zDQhiMWQf/GbA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1601,10 +1613,10 @@ packages: dependencies: '@typescript-eslint/scope-manager': 5.16.0 '@typescript-eslint/types': 5.16.0 - '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.2 + '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.3 debug: 4.3.4 eslint: 8.11.0 - typescript: 4.6.2 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true @@ -1625,7 +1637,7 @@ packages: '@typescript-eslint/visitor-keys': 5.16.0 dev: true - /@typescript-eslint/type-utils/5.16.0_eslint@8.11.0+typescript@4.6.2: + /@typescript-eslint/type-utils/5.16.0_eslint@8.11.0+typescript@4.6.3: resolution: {integrity: sha512-SKygICv54CCRl1Vq5ewwQUJV/8padIWvPgCxlWPGO/OgQLCijY9G7lDu6H+mqfQtbzDNlVjzVWQmeqbLMBLEwQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1635,11 +1647,11 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.2 + '@typescript-eslint/utils': 5.16.0_eslint@8.11.0+typescript@4.6.3 debug: 4.3.4 eslint: 8.11.0 - tsutils: 3.21.0_typescript@4.6.2 - typescript: 4.6.2 + tsutils: 3.21.0_typescript@4.6.3 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true @@ -1654,7 +1666,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@typescript-eslint/typescript-estree/4.33.0_typescript@4.6.2: + /@typescript-eslint/typescript-estree/4.33.0_typescript@4.6.3: resolution: {integrity: sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==} engines: {node: ^10.12.0 || >=12.0.0} peerDependencies: @@ -1669,13 +1681,13 @@ packages: globby: 11.1.0 is-glob: 4.0.3 semver: 7.3.5 - tsutils: 3.21.0_typescript@4.6.2 - typescript: 4.6.2 + tsutils: 3.21.0_typescript@4.6.3 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/typescript-estree/5.16.0_typescript@4.6.2: + /@typescript-eslint/typescript-estree/5.16.0_typescript@4.6.3: resolution: {integrity: sha512-SE4VfbLWUZl9MR+ngLSARptUv2E8brY0luCdgmUevU6arZRY/KxYoLI/3V/yxaURR8tLRN7bmZtJdgmzLHI6pQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1690,13 +1702,13 @@ packages: globby: 11.1.0 is-glob: 4.0.3 semver: 7.3.5 - tsutils: 3.21.0_typescript@4.6.2 - typescript: 4.6.2 + tsutils: 3.21.0_typescript@4.6.3 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils/5.16.0_eslint@8.11.0+typescript@4.6.2: + /@typescript-eslint/utils/5.16.0_eslint@8.11.0+typescript@4.6.3: resolution: {integrity: sha512-iYej2ER6AwmejLWMWzJIHy3nPJeGDuCqf8Jnb+jAQVoPpmWzwQOfa9hWVB8GIQE5gsCv/rfN4T+AYb/V06WseQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1705,7 +1717,7 @@ packages: '@types/json-schema': 7.0.10 '@typescript-eslint/scope-manager': 5.16.0 '@typescript-eslint/types': 5.16.0 - '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.2 + '@typescript-eslint/typescript-estree': 5.16.0_typescript@4.6.3 eslint: 8.11.0 eslint-scope: 5.1.1 eslint-utils: 3.0.0_eslint@8.11.0 @@ -1764,7 +1776,7 @@ packages: debug: 4.3.4 fast-glob: 3.2.11 magic-string: 0.25.9 - micromatch: 4.0.4 + micromatch: 4.0.5 windicss: 3.5.1 transitivePeerDependencies: - supports-color @@ -1949,8 +1961,8 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001319 - electron-to-chromium: 1.4.91 + caniuse-lite: 1.0.30001320 + electron-to-chromium: 1.4.93 escalade: 3.1.1 node-releases: 2.0.2 picocolors: 1.0.0 @@ -1977,8 +1989,8 @@ packages: engines: {node: '>=6'} dev: true - /caniuse-lite/1.0.30001319: - resolution: {integrity: sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==} + /caniuse-lite/1.0.30001320: + resolution: {integrity: sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==} dev: true /chalk/2.4.2: @@ -2179,8 +2191,8 @@ packages: jake: 10.8.4 dev: true - /electron-to-chromium/1.4.91: - resolution: {integrity: sha512-Z7Jkc4+ouEg8F6RrrgLOs0kkJjI0cnyFQmnGVpln8pPifuKBNbUr37GMgJsCTSwy6Z9TK7oTwW33Oe+3aERYew==} + /electron-to-chromium/1.4.93: + resolution: {integrity: sha512-ywq9Pc5Gwwpv7NG767CtoU8xF3aAUQJjH9//Wy3MBCg4w5JSLbJUq2L8IsCdzPMjvSgxuue9WcVaTOyyxCL0aQ==} dev: true /error-stack-parser/2.0.7: @@ -2470,8 +2482,8 @@ packages: eslint: ^7.32.0 || ^8.2.0 eslint-plugin-import: ^2.25.3 dependencies: - '@typescript-eslint/eslint-plugin': 5.16.0_3fed250b11519414a4c7d52468dd6bf5 - '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.2 + '@typescript-eslint/eslint-plugin': 5.16.0_bc68a9cd5bf604202498b1a9faaf9387 + '@typescript-eslint/parser': 5.16.0_eslint@8.11.0+typescript@4.6.3 eslint: 8.11.0 eslint-config-airbnb-base: 15.0.0_fe22d862ffeecaee86c93a006d59e41e eslint-plugin-import: 2.25.4_eslint@8.11.0 @@ -2495,7 +2507,7 @@ packages: object.entries: 1.1.5 dev: true - /eslint-config-standard-with-typescript/21.0.1_315c78f51e15e2bcdd46c27787a90888: + /eslint-config-standard-with-typescript/21.0.1_9af640a1891a7e55dd23a89beb2108f1: resolution: {integrity: sha512-FeiMHljEJ346Y0I/HpAymNKdrgKEpHpcg/D93FvPHWfCzbT4QyUJba/0FwntZeGLXfUiWDSeKmdJD597d9wwiw==} peerDependencies: '@typescript-eslint/eslint-plugin': ^4.0.1 @@ -2505,14 +2517,14 @@ packages: eslint-plugin-promise: ^4.2.1 || ^5.0.0 typescript: ^3.9 || ^4.0.0 dependencies: - '@typescript-eslint/eslint-plugin': 5.16.0_3fed250b11519414a4c7d52468dd6bf5 - '@typescript-eslint/parser': 4.33.0_eslint@8.11.0+typescript@4.6.2 + '@typescript-eslint/eslint-plugin': 5.16.0_bc68a9cd5bf604202498b1a9faaf9387 + '@typescript-eslint/parser': 4.33.0_eslint@8.11.0+typescript@4.6.3 eslint: 8.11.0 eslint-config-standard: 16.0.3_7dc77a0be22b3241d34262bf15f20ff9 eslint-plugin-import: 2.25.4_eslint@8.11.0 eslint-plugin-node: 11.1.0_eslint@8.11.0 eslint-plugin-promise: 6.0.0_eslint@8.11.0 - typescript: 4.6.2 + typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true @@ -2783,7 +2795,7 @@ packages: '@nodelib/fs.walk': 1.2.8 glob-parent: 5.1.2 merge2: 1.4.1 - micromatch: 4.0.4 + micromatch: 4.0.5 dev: true /fast-json-stable-stringify/2.1.0: @@ -3412,8 +3424,8 @@ packages: engines: {node: '>= 8'} dev: true - /micromatch/4.0.4: - resolution: {integrity: sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==} + /micromatch/4.0.5: + resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} engines: {node: '>=8.6'} dependencies: braces: 3.0.2 @@ -3667,14 +3679,6 @@ packages: react: 18.0.0-rc.3 dev: false - /react-table/7.7.0_react@18.0.0-rc.3: - resolution: {integrity: sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==} - peerDependencies: - react: ^16.8.3 || ^17.0.0-0 - dependencies: - react: 18.0.0-rc.3 - dev: false - /react-universal-interface/0.6.2_react@18.0.0-rc.3+tslib@2.3.1: resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: @@ -4195,14 +4199,14 @@ packages: resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} dev: false - /tsutils/3.21.0_typescript@4.6.2: + /tsutils/3.21.0_typescript@4.6.3: resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} peerDependencies: typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' dependencies: tslib: 1.14.1 - typescript: 4.6.2 + typescript: 4.6.3 dev: true /type-check/0.4.0: @@ -4227,8 +4231,8 @@ packages: engines: {node: '>=12.20'} dev: true - /typescript/4.6.2: - resolution: {integrity: sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==} + /typescript/4.6.3: + resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==} engines: {node: '>=4.2.0'} hasBin: true dev: true @@ -4298,6 +4302,14 @@ packages: react: 18.0.0-rc.3 dev: false + /use-sync-external-store/1.0.0-rc.0_react@18.0.0-rc.3: + resolution: {integrity: sha512-0U9Xlc2QDFzSGMB0DvcJQL0+DIdxDPJC7mnZlYFbl7wrSrPMcs89X5TVkNB6Dzg618m8lZop+U+J6ow3vq9RAQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0-rc + dependencies: + react: 18.0.0-rc.3 + dev: false + /v8-compile-cache/2.3.0: resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} dev: true @@ -4312,8 +4324,8 @@ packages: pretty-bytes: 5.6.0 rollup: 2.70.1 vite: 2.8.6_sass@1.49.9 - workbox-build: 6.5.1 - workbox-window: 6.5.1 + workbox-build: 6.5.2 + workbox-window: 6.5.2 transitivePeerDependencies: - '@types/babel__core' - supports-color @@ -4413,21 +4425,21 @@ packages: engines: {node: '>=0.10.0'} dev: true - /workbox-background-sync/6.5.1: - resolution: {integrity: sha512-T5a35fagLXQvV8Dr4+bDU+XYsP90jJ3eBLjZMKuCNELMQZNj+VekCODz1QK44jgoBeQk+vp94pkZV6G+e41pgg==} + /workbox-background-sync/6.5.2: + resolution: {integrity: sha512-EjG37LSMDJ1TFlFg56wx6YXbH4/NkG09B9OHvyxx+cGl2gP5OuOzsCY3rOPJSpbcz6jpuA40VIC3HzSD4OvE1g==} dependencies: idb: 6.1.5 - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-broadcast-update/6.5.1: - resolution: {integrity: sha512-mb/oyblyEpDbw167cCTyHnC3RqCnCQHtFYuYZd+QTpuExxM60qZuBH1AuQCgvLtDcztBKdEYK2VFD9SZYgRbaQ==} + /workbox-broadcast-update/6.5.2: + resolution: {integrity: sha512-DjJYraYnprTZE/AQNoeogaxI1dPuYmbw+ZJeeP8uXBSbg9SNv5wLYofQgywXeRepv4yr/vglMo9yaHUmBMc+4Q==} dependencies: - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-build/6.5.1: - resolution: {integrity: sha512-coDUDzHvFZ1ADOl3wKCsCSyOBvkPKlPgcQDb6LMMShN1zgF31Mev/1HzN3+9T2cjjWAgFwZKkuRyExqc1v21Zw==} + /workbox-build/6.5.2: + resolution: {integrity: sha512-TVi4Otf6fgwikBeMpXF9n0awHfZTMNu/nwlMIT9W+c13yvxkmDFMPb7vHYK6RUmbcxwPnz4I/R+uL76+JxG4JQ==} engines: {node: '>=10.0.0'} dependencies: '@apideck/better-ajv-errors': 0.3.3_ajv@8.11.0 @@ -4452,111 +4464,111 @@ packages: strip-comments: 2.0.1 tempy: 0.6.0 upath: 1.2.0 - workbox-background-sync: 6.5.1 - workbox-broadcast-update: 6.5.1 - workbox-cacheable-response: 6.5.1 - workbox-core: 6.5.1 - workbox-expiration: 6.5.1 - workbox-google-analytics: 6.5.1 - workbox-navigation-preload: 6.5.1 - workbox-precaching: 6.5.1 - workbox-range-requests: 6.5.1 - workbox-recipes: 6.5.1 - workbox-routing: 6.5.1 - workbox-strategies: 6.5.1 - workbox-streams: 6.5.1 - workbox-sw: 6.5.1 - workbox-window: 6.5.1 + workbox-background-sync: 6.5.2 + workbox-broadcast-update: 6.5.2 + workbox-cacheable-response: 6.5.2 + workbox-core: 6.5.2 + workbox-expiration: 6.5.2 + workbox-google-analytics: 6.5.2 + workbox-navigation-preload: 6.5.2 + workbox-precaching: 6.5.2 + workbox-range-requests: 6.5.2 + workbox-recipes: 6.5.2 + workbox-routing: 6.5.2 + workbox-strategies: 6.5.2 + workbox-streams: 6.5.2 + workbox-sw: 6.5.2 + workbox-window: 6.5.2 transitivePeerDependencies: - '@types/babel__core' - supports-color dev: true - /workbox-cacheable-response/6.5.1: - resolution: {integrity: sha512-3TdtH/luDiytmM+Cn72HCBLZXmbeRNJqZx2yaVOfUZhj0IVwZqQXhNarlGE9/k6U5Jelb+TtpH2mLVhnzfiSMg==} + /workbox-cacheable-response/6.5.2: + resolution: {integrity: sha512-UnHGih6xqloV808T7ve1iNKZMbpML0jGLqkkmyXkJbZc5j16+HRSV61Qrh+tiq3E3yLvFMGJ3AUBODOPNLWpTg==} dependencies: - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-core/6.5.1: - resolution: {integrity: sha512-qObXZ39aFJ2N8X7IUbGrJHKWguliCuU1jOXM/I4MTT84u9BiKD2rHMkIzgeRP1Ixu9+cXU4/XHJq3Cy0Qqc5hw==} + /workbox-core/6.5.2: + resolution: {integrity: sha512-IlxLGQf+wJHCR+NM0UWqDh4xe/Gu6sg2i4tfZk6WIij34IVk9BdOQgi6WvqSHd879jbQIUgL2fBdJUJyAP5ypQ==} dev: true - /workbox-expiration/6.5.1: - resolution: {integrity: sha512-iY/cTADAQATMmPkUBRmQdacqq0TJd2wMHimBQz+tRnPGHSMH+/BoLPABPnu7O7rT/g/s59CUYYRGxe3mEgoJCA==} + /workbox-expiration/6.5.2: + resolution: {integrity: sha512-5Hfp0uxTZJrgTiy9W7AjIIec+9uTOtnxY/tRBm4DbqcWKaWbVTa+izrKzzOT4MXRJJIJUmvRhWw4oo8tpmMouw==} dependencies: idb: 6.1.5 - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-google-analytics/6.5.1: - resolution: {integrity: sha512-qZU46/h4dbionYT6Yk6iBkUwpiEzAfnO1W7KkI+AMmY7G9/gA03dQQ7rpTw8F4vWrG7ahTUGWDFv6fERtaw1BQ==} + /workbox-google-analytics/6.5.2: + resolution: {integrity: sha512-8SMar+N0xIreP5/2we3dwtN1FUmTMScoopL86aKdXBpio8vXc8Oqb5fCJG32ialjN8BAOzDqx/FnGeCtkIlyvw==} dependencies: - workbox-background-sync: 6.5.1 - workbox-core: 6.5.1 - workbox-routing: 6.5.1 - workbox-strategies: 6.5.1 + workbox-background-sync: 6.5.2 + workbox-core: 6.5.2 + workbox-routing: 6.5.2 + workbox-strategies: 6.5.2 dev: true - /workbox-navigation-preload/6.5.1: - resolution: {integrity: sha512-aKrgAbn2IMgzTowTi/ZyKdQUcES2m++9aGtpxqsX7Gn9ovCY8zcssaMEAMMwrIeveij5HiWNBrmj6MWDHi+0rg==} + /workbox-navigation-preload/6.5.2: + resolution: {integrity: sha512-iqDNWWMswjCsZuvGFDpcX1Z8InBVAlVBELJ28xShsWWntALzbtr0PXMnm2WHkXCc56JimmGldZi1N5yDPiTPOg==} dependencies: - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-precaching/6.5.1: - resolution: {integrity: sha512-EzlPBxvmjGfE56YZzsT/vpVkpLG1XJhoplgXa5RPyVWLUL1LbwEAxhkrENElSS/R9tgiTw80IFwysidfUqLihg==} + /workbox-precaching/6.5.2: + resolution: {integrity: sha512-OZAlQ8AAT20KugGKKuJMHdQ8X1IyNQaLv+mPTHj+8Dmv8peBq5uWNzs4g/1OSFmXsbXZ6a1CBC6YtQWVPhJQ9w==} dependencies: - workbox-core: 6.5.1 - workbox-routing: 6.5.1 - workbox-strategies: 6.5.1 + workbox-core: 6.5.2 + workbox-routing: 6.5.2 + workbox-strategies: 6.5.2 dev: true - /workbox-range-requests/6.5.1: - resolution: {integrity: sha512-57Da/qRbd9v33YlHX0rlSUVFmE4THCjKqwkmfhY3tNLnSKN2L5YBS3qhWeDO0IrMNgUj+rGve2moKYXeUqQt4A==} + /workbox-range-requests/6.5.2: + resolution: {integrity: sha512-zi5VqF1mWqfCyJLTMXn1EuH/E6nisqWDK1VmOJ+TnjxGttaQrseOhMn+BMvULFHeF8AvrQ0ogfQ6bSv0rcfAlg==} dependencies: - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-recipes/6.5.1: - resolution: {integrity: sha512-DGsyKygHggcGPQpWafC/Nmbm1Ny3sB2vE9r//3UbeidXiQ+pLF14KEG1/0NNGRaY+lfOXOagq6d1H7SC8KA+rA==} + /workbox-recipes/6.5.2: + resolution: {integrity: sha512-2lcUKMYDiJKvuvRotOxLjH2z9K7jhj8GNUaHxHNkJYbTCUN3LsX1cWrsgeJFDZ/LgI565t3fntpbG9J415ZBXA==} dependencies: - workbox-cacheable-response: 6.5.1 - workbox-core: 6.5.1 - workbox-expiration: 6.5.1 - workbox-precaching: 6.5.1 - workbox-routing: 6.5.1 - workbox-strategies: 6.5.1 + workbox-cacheable-response: 6.5.2 + workbox-core: 6.5.2 + workbox-expiration: 6.5.2 + workbox-precaching: 6.5.2 + workbox-routing: 6.5.2 + workbox-strategies: 6.5.2 dev: true - /workbox-routing/6.5.1: - resolution: {integrity: sha512-yAAncdTwanvlR8KPjubyvFKeAok8ZcIws6UKxvIAg0I+wsf7UYi93DXNuZr6RBSQrByrN6HkCyjuhmk8P63+PA==} + /workbox-routing/6.5.2: + resolution: {integrity: sha512-nR1w5PjF6IVwo0SX3oE88LhmGFmTnqqU7zpGJQQPZiKJfEKgDENQIM9mh3L1ksdFd9Y3CZVkusopHfxQvit/BA==} dependencies: - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-strategies/6.5.1: - resolution: {integrity: sha512-JNaTXPy8wXzKkr+6za7/eJX9opoZk7UgY261I2kPxl80XQD8lMjz0vo9EOcBwvD72v3ZhGJbW84ZaDwFEhFvWA==} + /workbox-strategies/6.5.2: + resolution: {integrity: sha512-fgbwaUMxbG39BHjJIs2y2X21C0bmf1Oq3vMQxJ1hr6y5JMJIm8rvKCcf1EIdAr+PjKdSk4ddmgyBQ4oO8be4Uw==} dependencies: - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true - /workbox-streams/6.5.1: - resolution: {integrity: sha512-7jaTWm6HRGJ/ewECnhb+UgjTT50R42E0/uNCC4eTKQwnLO/NzNGjoXTdQgFjo4zteR+L/K6AtFAiYKH3ZJbAYw==} + /workbox-streams/6.5.2: + resolution: {integrity: sha512-ovD0P4UrgPtZ2Lfc/8E8teb1RqNOSZr+1ZPqLR6sGRZnKZviqKbQC3zVvvkhmOIwhWbpL7bQlWveLVONHjxd5w==} dependencies: - workbox-core: 6.5.1 - workbox-routing: 6.5.1 + workbox-core: 6.5.2 + workbox-routing: 6.5.2 dev: true - /workbox-sw/6.5.1: - resolution: {integrity: sha512-hVrQa19yo9wzN1fQQ/h2JlkzFpkuH2qzYT2/rk7CLaWt6tLnTJVFCNHlGRRPhytZSf++LoIy7zThT714sowT/Q==} + /workbox-sw/6.5.2: + resolution: {integrity: sha512-2KhlYqtkoqlnPdllj2ujXUKRuEFsRDIp6rdE4l1PsxiFHRAFaRTisRQpGvRem5yxgXEr+fcEKiuZUW2r70KZaw==} dev: true - /workbox-window/6.5.1: - resolution: {integrity: sha512-oRlun9u7b7YEjo2fIDBqJkU2hXtrEljXcOytRhfeQRbqXxjUOpFgXSGRSAkmDx1MlKUNOSbr+zfi8h5n7In3yA==} + /workbox-window/6.5.2: + resolution: {integrity: sha512-2kZH37r9Wx8swjEOL4B8uGM53lakMxsKkQ7mOKzGA/QAn/DQTEZGrdHWtypk2tbhKY5S0jvPS+sYDnb2Z3378A==} dependencies: '@types/trusted-types': 2.0.2 - workbox-core: 6.5.1 + workbox-core: 6.5.2 dev: true /wrappy/1.0.2: diff --git a/src/containers/Connections/index.tsx b/src/containers/Connections/index.tsx index e4d5117..b21b4b1 100644 --- a/src/containers/Connections/index.tsx +++ b/src/containers/Connections/index.tsx @@ -1,7 +1,9 @@ +import { columnFilterRowsFn, createTable, sortRowsFn } from '@tanstack/react-table' +import { type ColumnSort } from '@tanstack/react-table/build/types/features/Sorting' import classnames from 'classnames' +import produce from 'immer' import { groupBy } from 'lodash-es' -import { useMemo, useLayoutEffect, useCallback, useRef, useState, useEffect } from 'react' -import { Cell, Column, ColumnInstance, TableInstance, TableOptions, useBlockLayout, useFilters, UseFiltersColumnOptions, UseFiltersInstanceProps, UseFiltersOptions, useResizeColumns, UseResizeColumnsColumnProps, UseResizeColumnsOptions, useSortBy, UseSortByColumnOptions, UseSortByColumnProps, UseSortByOptions, useTable } from 'react-table' +import { useMemo, useLayoutEffect, useRef, useState, useEffect } from 'react' import { useLatest, useScroll } from 'react-use' import { Header, Checkbox, Modal, Icon, Drawer, Card, Button } from '@components' @@ -9,7 +11,7 @@ import { fromNow } from '@lib/date' import { formatTraffic } from '@lib/helper' import { useObject, useVisible } from '@lib/hook' import * as API from '@lib/request' -import { RuleType } from '@models' +import { BaseComponentProps, RuleType } from '@models' import { useClient, useConnectionStreamReader, useI18n } from '@stores' import { Devices } from './Devices' @@ -32,26 +34,6 @@ enum Columns { const shouldCenter = new Set([Columns.Network, Columns.Type, Columns.Rule, Columns.Speed, Columns.Upload, Columns.Download, Columns.SourceIP, Columns.Time]) -interface TableColumn extends - ColumnInstance, - UseSortByColumnProps, - UseResizeColumnsColumnProps {} - -type TableColumnOption = - Column & - UseResizeColumnsOptions & - UseFiltersColumnOptions & - UseSortByColumnOptions - -interface ITableOptions extends - TableOptions, - UseSortByOptions, - UseFiltersOptions {} - -interface ITableInstance extends - TableInstance, - UseFiltersInstanceProps {} - function formatSpeed (upload: number, download: number) { switch (true) { case upload === 0 && download === 0: @@ -65,6 +47,8 @@ function formatSpeed (upload: number, download: number) { } } +const table = createTable().RowType() + export default function Connections () { const { translation, lang } = useI18n() const t = useMemo(() => translation('Connections').t, [translation]) @@ -113,34 +97,47 @@ export default function Connections () { // table const tableRef = useRef(null) const { x: scrollX } = useScroll(tableRef) - const columns: Array> = useMemo(() => [ - { Header: t(`columns.${Columns.Host}`), accessor: Columns.Host, minWidth: 260, width: 260 }, - { Header: t(`columns.${Columns.Network}`), accessor: Columns.Network, minWidth: 80, width: 80 }, - { Header: t(`columns.${Columns.Type}`), accessor: Columns.Type, minWidth: 120, width: 120 }, - { Header: t(`columns.${Columns.Chains}`), accessor: Columns.Chains, minWidth: 200, width: 200 }, - { Header: t(`columns.${Columns.Rule}`), accessor: Columns.Rule, minWidth: 140, width: 140 }, - { - id: Columns.Speed, - Header: t(`columns.${Columns.Speed}`), - accessor (originalRow: FormatConnection) { - return [originalRow.speed.upload, originalRow.speed.download] - }, - sortType (rowA, rowB) { - const speedA = rowA.original.speed - const speedB = rowB.original.speed - return speedA.download === speedB.download - ? speedA.upload - speedB.upload - : speedA.download - speedB.download - }, - minWidth: 200, - width: 200, - sortDescFirst: true, - }, - { Header: t(`columns.${Columns.Upload}`), accessor: Columns.Upload, minWidth: 100, width: 100, sortDescFirst: true }, - { Header: t(`columns.${Columns.Download}`), accessor: Columns.Download, minWidth: 100, width: 100, sortDescFirst: true }, - { Header: t(`columns.${Columns.SourceIP}`), accessor: Columns.SourceIP, minWidth: 140, width: 140, filter: 'equals' }, - { Header: t(`columns.${Columns.Time}`), accessor: Columns.Time, minWidth: 120, width: 120, sortType (rowA, rowB) { return rowB.original.time - rowA.original.time } }, - ] as Array>, [t]) + const columns = useMemo( + () => table.createColumns([ + table.createDataColumn(Columns.Host, { minWidth: 260, width: 260, header: t(`columns.${Columns.Host}`) }), + table.createDataColumn(Columns.Network, { minWidth: 80, width: 80, header: t(`columns.${Columns.Network}`) }), + table.createDataColumn(Columns.Type, { minWidth: 120, width: 120, header: t(`columns.${Columns.Type}`) }), + table.createDataColumn(Columns.Chains, { minWidth: 200, width: 200, header: t(`columns.${Columns.Chains}`) }), + table.createDataColumn(Columns.Rule, { minWidth: 140, width: 140, header: t(`columns.${Columns.Rule}`) }), + table.createDataColumn( + row => [row.speed.upload, row.speed.download], + { + id: Columns.Speed, + header: t(`columns.${Columns.Speed}`), + minWidth: 200, + width: 200, + sortDescFirst: true, + sortType (rowA, rowB) { + const speedA = rowA.original.speed + const speedB = rowB.original.speed + return speedA.download === speedB.download + ? speedA.upload - speedB.upload + : speedA.download - speedB.download + }, + cell: cell => formatSpeed(cell.value[0], cell.value[1]), + }, + ), + table.createDataColumn(Columns.Upload, { minWidth: 100, width: 100, header: t(`columns.${Columns.Upload}`), cell: cell => formatTraffic(cell.value) }), + table.createDataColumn(Columns.Download, { minWidth: 100, width: 100, header: t(`columns.${Columns.Download}`), cell: cell => formatTraffic(cell.value) }), + table.createDataColumn(Columns.SourceIP, { minWidth: 140, width: 140, header: t(`columns.${Columns.SourceIP}`), filterType: 'equals' }), + table.createDataColumn( + Columns.Time, + { + minWidth: + 120, + width: 120, + header: t(`columns.${Columns.Time}`), + cell: cell => fromNow(new Date(cell.value), lang), + sortType: (rowA, rowB) => rowB.original.time - rowA.original.time, + }), + ]), + [lang, t], + ) useLayoutEffect(() => { function handleConnection (snapshots: API.Snapshot[]) { @@ -161,46 +158,27 @@ export default function Connections () { } }, [connStreamReader, feed, setTraffic]) - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow, - setFilter, - } = useTable( - { - columns, - data, - autoResetSortBy: false, - autoResetFilters: false, - initialState: { sortBy: [{ id: Columns.Time, desc: false }] }, - } as ITableOptions, - useResizeColumns, - useBlockLayout, - useFilters, - useSortBy, - ) as ITableInstance - const headerGroup = useMemo(() => headerGroups[0], [headerGroups]) - const renderCell = useCallback(function (cell: Cell) { - switch (cell.column.id) { - case Columns.Speed: - return formatSpeed(cell.value[0], cell.value[1]) - case Columns.Upload: - case Columns.Download: - return formatTraffic(cell.value) - case Columns.Time: - return fromNow(new Date(cell.value), lang) - default: - return cell.value - } - }, [lang]) + const instance = table.useTable({ + data, + columns, + sortRowsFn, + columnFilterRowsFn, + initialState: { + sorting: [{ id: Columns.Time, desc: true }], + }, + columnResizeMode: 'onChange', + enableColumnResizing: true, + autoResetSorting: false, + autoResetColumnFilters: false, + }) + + const headerGroup = instance.getHeaderGroups()[0] // filter const [device, setDevice] = useState('') function handleDeviceSelected (label: string) { setDevice(label) - setFilter?.(Columns.SourceIP, label || undefined) + instance.setColumnFilterValue(Columns.SourceIP, label || undefined) } // click item @@ -229,67 +207,76 @@ export default function Connections () { }, [data, drawerState.selectedID, latestConntion, setDrawerState]) const scrolled = useMemo(() => scrollX > 0, [scrollX]) - const headers = useMemo(() => headerGroup.headers.map((column, idx) => { - const realColumn = column as unknown as TableColumn - const id = realColumn.id + const headers = headerGroup.headers.map((header, idx) => { + const column = header.column // as unknown as TableColumn + const id = column.id return ( -
produce(props, props => { + props.className = classnames('connections-th', { + resizing: column.getIsResizing(), + fixed: column.id === Columns.Host, + shadow: scrolled && column.id === Columns.Host, + }) + !props.style && (props.style = {}) + props.style.width = header.getWidth() + }), + )} key={id}> -
- {column.render('Header')} +
+ {header.renderHeader()} { - realColumn.isSorted - ? realColumn.isSortedDesc ? ' ↓' : ' ↑' + column.getIsSorted() !== false + ? column.getIsSorted() === 'desc' ? ' ↓' : ' ↑' : null }
{ idx !== headerGroup.headers.length - 1 && -
+
} -
+ ) - }), [headerGroup.headers, scrolled]) + }) - const content = useMemo( - () => rows.map(row => { - prepareRow(row) - return ( -
setDrawerState({ visible: true, selectedID: row.original.id })}> - { - row.cells.map(cell => { - const classname = classnames( - 'connections-block', - { 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed }, - { - fixed: cell.column.id === Columns.Host, - shadow: scrollX > 0 && cell.column.id === Columns.Host, - }, - ) - return ( -
- { renderCell(cell)} -
- ) - }) - } -
- ) - }), - [prepareRow, renderCell, rows, scrollX, setDrawerState], - ) + const content = instance.getRows().map(row => { + return ( + setDrawerState({ visible: true, selectedID: row.original?.id })}> + { + row.getAllCells().map(cell => { + const classname = classnames( + 'connections-block', + { 'text-center': shouldCenter.has(cell.column.id), completed: row.original?.completed }, + { + fixed: cell.column.id === Columns.Host, + shadow: scrollX > 0 && cell.column.id === Columns.Host, + }, + ) + return ( + produce(props, props => { + !props.style && (props.style = {}) + props.className = classname + props.style.width = cell.column.getWidth() + }), + )} + key={cell.column.id}> + { cell.renderCell() } + + ) + }) + } + + ) + }) return ( -
+
{`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`} @@ -299,14 +286,18 @@ export default function Connections () {
{ devices.length > 1 && } -
-
- { headers } -
+
+ + + + { headers } + + -
- { content } -
+ + { content } + +
{t('closeAll.content')} diff --git a/src/containers/Connections/style.scss b/src/containers/Connections/style.scss index 8655d1f..af7b732 100644 --- a/src/containers/Connections/style.scss +++ b/src/containers/Connections/style.scss @@ -1,6 +1,5 @@ .connections-card { display: flex; - flex-direction: column; flex: 1; margin-top: 10px; padding: 0; @@ -9,6 +8,7 @@ .connections-th { $height: 30px; + display: inline-block; position: relative; text-align: center; color: $color-gray-darken; @@ -19,9 +19,11 @@ font-size: 14px; cursor: pointer; user-select: none; + -webkit-user-select: none; &.resizing .connections-resizer { opacity: 1; + cursor: col-resize; } &.fixed { @@ -49,6 +51,7 @@ font-size: 14px; font-weight: 300; touch-action: none; + cursor: col-resize; &::before { content: ''; @@ -74,8 +77,7 @@ } .connections-block { - display: flex; - align-items: center; + display: inline-block; font-size: 14px; line-height: 36px; padding: 0 10px;