From a15fb89c906e01d8ca903881fd85470538826680 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Thu, 12 Oct 2023 00:03:10 -0700 Subject: [PATCH] Added card mode to DataTable. --- package.json | 2 +- .../settings/websites/WebsitesDataTable.tsx | 3 + .../(main)/settings/websites/WebsitesTable.js | 3 +- src/components/common/DataTable.module.css | 6 ++ src/components/input/ThemeButton.js | 2 +- src/components/metrics/ListTable.js | 2 +- src/components/metrics/MetricCard.js | 2 +- yarn.lock | 66 ++----------------- 8 files changed, 22 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index 5b2ef173..7a3f34c3 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "node-fetch": "^3.2.8", "npm-run-all": "^4.1.5", "react": "^18.2.0", - "react-basics": "^0.100.0", + "react-basics": "^0.102.0", "react-beautiful-dnd": "^13.1.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.4", diff --git a/src/app/(main)/settings/websites/WebsitesDataTable.tsx b/src/app/(main)/settings/websites/WebsitesDataTable.tsx index 6e716291..cfdf147a 100644 --- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx +++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx @@ -6,6 +6,7 @@ import useApi from 'components/hooks/useApi'; import DataTable from 'components/common/DataTable'; import useFilterQuery from 'components/hooks/useFilterQuery'; import useCache from 'store/cache'; +import { useBreakpoint } from 'react-basics'; export interface WebsitesDataTableProps { allowEdit?: boolean; @@ -45,6 +46,7 @@ export function WebsitesDataTable({ children, }: WebsitesDataTableProps) { const queryResult = useWebsites({ includeTeams, onlyTeams }); + const breakpoint = useBreakpoint(); return ( @@ -55,6 +57,7 @@ export function WebsitesDataTable({ showActions={showActions} allowEdit={allowEdit} allowView={allowView} + cardMode={['xs', 'sm', 'md'].includes(breakpoint)} > {children} diff --git a/src/app/(main)/settings/websites/WebsitesTable.js b/src/app/(main)/settings/websites/WebsitesTable.js index f8b12923..ed663f6f 100644 --- a/src/app/(main)/settings/websites/WebsitesTable.js +++ b/src/app/(main)/settings/websites/WebsitesTable.js @@ -9,13 +9,14 @@ export function WebsitesTable({ showActions, allowEdit, allowView, + cardMode, children, }) { const { formatMessage, labels } = useMessages(); const { user } = useUser(); return ( - + {showTeam && ( diff --git a/src/components/common/DataTable.module.css b/src/components/common/DataTable.module.css index 6e925bc0..c7cab642 100644 --- a/src/components/common/DataTable.module.css +++ b/src/components/common/DataTable.module.css @@ -19,6 +19,7 @@ .body { display: flex; + flex-direction: column; position: relative; overflow-x: auto; } @@ -31,6 +32,11 @@ min-width: min-content; } +.body > div > div > div { + display: flex; + gap: 10px; +} + .pager { margin: 20px 0; } diff --git a/src/components/input/ThemeButton.js b/src/components/input/ThemeButton.js index 3a6a9d14..76d1b370 100644 --- a/src/components/input/ThemeButton.js +++ b/src/components/input/ThemeButton.js @@ -1,4 +1,4 @@ -import { useTransition, animated } from 'react-spring'; +import { useTransition, animated } from '@react-spring/web'; import { Button, Icon } from 'react-basics'; import useTheme from 'components/hooks/useTheme'; import Icons from 'components/icons'; diff --git a/src/components/metrics/ListTable.js b/src/components/metrics/ListTable.js index 38ea40eb..e4ea5ea8 100644 --- a/src/components/metrics/ListTable.js +++ b/src/components/metrics/ListTable.js @@ -1,6 +1,6 @@ import useMeasure from 'react-use-measure'; import { FixedSizeList } from 'react-window'; -import { useSpring, animated, config } from 'react-spring'; +import { useSpring, animated, config } from '@react-spring/web'; import classNames from 'classnames'; import Empty from 'components/common/Empty'; import { formatLongNumber } from 'lib/format'; diff --git a/src/components/metrics/MetricCard.js b/src/components/metrics/MetricCard.js index e32ec3a1..5fff3960 100644 --- a/src/components/metrics/MetricCard.js +++ b/src/components/metrics/MetricCard.js @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { useSpring, animated } from 'react-spring'; +import { useSpring, animated } from '@react-spring/web'; import { formatNumber } from 'lib/format'; import styles from './MetricCard.module.css'; diff --git a/yarn.lock b/yarn.lock index 97b2f95e..5d64e01c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2027,7 +2027,7 @@ "@react-spring/shared" "~9.7.3" "@react-spring/types" "~9.7.3" -"@react-spring/core@~9.7.1", "@react-spring/core@~9.7.3": +"@react-spring/core@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095" integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ== @@ -2036,26 +2036,6 @@ "@react-spring/shared" "~9.7.3" "@react-spring/types" "~9.7.3" -"@react-spring/konva@~9.7.1": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.7.3.tgz#16bd29dd4860a99e960a72987c8bcfc828b22119" - integrity sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/native@~9.7.1": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.7.3.tgz#ee38d7c23482cfb4916c9b3c021de2995a4f553a" - integrity sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - "@react-spring/shared@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53" @@ -2063,22 +2043,12 @@ dependencies: "@react-spring/types" "~9.7.3" -"@react-spring/three@~9.7.1": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.7.3.tgz#4358a0c4640efe2972c4f7d0f7cd4efe927471c1" - integrity sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - "@react-spring/types@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b" integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw== -"@react-spring/web@^9.7.3", "@react-spring/web@~9.7.1": +"@react-spring/web@^9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d" integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg== @@ -2088,16 +2058,6 @@ "@react-spring/shared" "~9.7.3" "@react-spring/types" "~9.7.3" -"@react-spring/zdog@~9.7.1": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.7.3.tgz#8ccc7316f6d3460ed244d9e3f60de9b4c4a848ac" - integrity sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - "@redis/bloom@1.1.0": version "1.1.0" resolved "https://registry.npmjs.org/@redis/bloom/-/bloom-1.1.0.tgz" @@ -7606,15 +7566,15 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-basics@^0.100.0: - version "0.100.0" - resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.100.0.tgz#14a36769af89f3e01641997f897e4073f16f5035" - integrity sha512-ET6DX/FYAcjGRauBE4jwqwVpd/hKmA2Nu/fi1dakwsv17hkyV5FEAhdWhQAxJX3VnaCH//QysN8+ae12KuNA9g== +react-basics@^0.102.0: + version "0.102.0" + resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.102.0.tgz#61dbc837963facb2d409044046eb55f7c689411e" + integrity sha512-MhLHgjVnOwdm1YX1Lwkyg37kPCTOk+b3NXWGORlh4dJThq/qq/s0lF09yqEq09Gye5yyTDbeNDPXlkXIPtadog== dependencies: + "@react-spring/web" "^9.7.3" classnames "^2.3.1" date-fns "^2.29.3" react-hook-form "^7.34.2" - react-spring "^9.5.5" react-window "^1.8.6" react-beautiful-dnd@^13.1.0: @@ -7698,18 +7658,6 @@ react-simple-maps@^2.3.0: d3-zoom "^2.0.0" topojson-client "^3.1.0" -react-spring@^9.5.5: - version "9.7.1" - resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.7.1.tgz#8acfed700823490a4d9d4cf131c5fea12d1aaa93" - integrity sha512-o2+r2DNQDVEuefiz33ZF76DPd/gLq3kbdObJmllGF2IUfv2W6x+ZP0gR97QYCSR4QLbmOl1mPKUBbI+FJdys2Q== - dependencies: - "@react-spring/core" "~9.7.1" - "@react-spring/konva" "~9.7.1" - "@react-spring/native" "~9.7.1" - "@react-spring/three" "~9.7.1" - "@react-spring/web" "~9.7.1" - "@react-spring/zdog" "~9.7.1" - react-use-measure@^2.0.4: version "2.1.1" resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz"