chore(suite): update used address table to use Table component

trezor · Oct 8, 2024 · 7919015 · 7919015
1 parent 7babc8f
commit 7919015
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 175 deletions.
diff --git a/packages/components/src/components/Table/Table.stories.tsx b/packages/components/src/components/Table/Table.stories.tsx
@@ -16,7 +16,7 @@ export default meta;
 
 interface TableProps {
     colWidths?: { minWidth?: string | undefined; maxWidth?: string | undefined }[];
-    highlightRowOnHover?: boolean;
+    isRowHighlightedOnHover?: boolean;
 }
 
 export const Table: StoryObj = {
@@ -33,7 +33,7 @@ export const Table: StoryObj = {
                 {EXAMPLE_TOKENS.map((token, i) => (
                     <TableComponent.Row
                         key={i}
-                        onClick={props.highlightRowOnHover ? () => {} : undefined}
+                        onClick={props.isRowHighlightedOnHover ? () => {} : undefined}
                     >
                         <TableComponent.Cell>{token.name}</TableComponent.Cell>
                         <TableComponent.Cell>{token.balance}</TableComponent.Cell>
@@ -46,7 +46,7 @@ export const Table: StoryObj = {
     args: {
         ...getFramePropsStory(allowedTableFrameProps).args,
         colWidths: 'none',
-        highlightRowOnHover: 'true',
+        isRowHighlightedOnHover: true,
     },
     argTypes: {
         ...getFramePropsStory(allowedTableFrameProps).argTypes,
@@ -64,18 +64,9 @@ export const Table: StoryObj = {
                 },
             },
         },
-        highlightRowOnHover: {
-            options: ['true', 'false'],
-            mapping: {
-                true: true,
-                false: false,
-            },
+        isRowHighlightedOnHover: {
             control: {
-                type: 'select',
-                labels: {
-                    true: 'true',
-                    false: 'false',
-                },
+                type: 'boolean',
             },
         },
     },

diff --git a/packages/components/src/components/Table/Table.tsx b/packages/components/src/components/Table/Table.tsx
@@ -15,10 +15,10 @@ export const allowedTableFrameProps = ['margin'] as const satisfies FramePropsKe
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedTableFrameProps)[number]>;
 
 interface TableContextProps {
-    highlightRowOnHover: boolean;
+    isRowHighlightedOnHover: boolean;
 }
 
-const TableContext = createContext<TableContextProps>({ highlightRowOnHover: false });
+const TableContext = createContext<TableContextProps>({ isRowHighlightedOnHover: false });
 
 export const useTable = () => useContext(TableContext);
 
@@ -41,15 +41,20 @@ export type TableProps = AllowedFrameProps & {
         minWidth?: string;
         maxWidth?: string;
     }[];
-    highlightRowOnHover?: boolean;
+    isRowHighlightedOnHover?: boolean;
 };
 
-export const Table = ({ children, margin, colWidths, highlightRowOnHover = false }: TableProps) => {
+export const Table = ({
+    children,
+    margin,
+    colWidths,
+    isRowHighlightedOnHover = false,
+}: TableProps) => {
     const { scrollElementRef, onScroll, ShadowContainer, ShadowRight } = useScrollShadow();
     const { parentElevation } = useElevation();
 
     return (
-        <TableContext.Provider value={{ highlightRowOnHover }}>
+        <TableContext.Provider value={{ isRowHighlightedOnHover }}>
             <ShadowContainer>
                 <ScrollContainer onScroll={onScroll} ref={scrollElementRef}>
                     <Container {...makePropsTransient({ margin })}>

diff --git a/packages/components/src/components/Table/TableCell.tsx b/packages/components/src/components/Table/TableCell.tsx
@@ -6,7 +6,6 @@ import { typography, spacingsPx, Elevation, mapElevationToBackground } from '@tr
 import { useTableHeader } from './TableHeader';
 import { UIHorizontalAlignment } from '../../config/types';
 import { useElevation } from '../ElevationContext/ElevationContext';
-import { useTable } from './Table';
 
 export type TableCellProps = {
     children?: ReactNode;
@@ -24,7 +23,7 @@ const mapAlignmentToJustifyContent = (align: UIHorizontalAlignment) => {
     return map[align];
 };
 
-const Cell = styled.td<{ $isHeader: boolean; $elevation: Elevation; $highlight: boolean }>`
+const Cell = styled.td<{ $isHeader: boolean; $elevation: Elevation }>`
     ${({ $isHeader }) => ($isHeader ? typography.hint : typography.body)}
     color: ${({ theme, $isHeader }) => ($isHeader ? theme.textSubdued : theme.textDefault)};
     text-align: left;
@@ -48,15 +47,13 @@ const Content = styled.div<{ $align: UIHorizontalAlignment }>`
 export const TableCell = ({ children, colSpan = 1, align = 'left' }: TableCellProps) => {
     const isHeader = useTableHeader();
     const { parentElevation } = useElevation();
-    const { highlightRowOnHover } = useTable();
 
     return (
         <Cell
             as={isHeader ? 'th' : 'td'}
             colSpan={colSpan}
             $isHeader={isHeader}
             $elevation={parentElevation}
-            $highlight={highlightRowOnHover}
         >
             <Content $align={align}>{children}</Content>
         </Cell>

diff --git a/packages/components/src/components/Table/TableRow.tsx b/packages/components/src/components/Table/TableRow.tsx
@@ -15,7 +15,7 @@ import { useTableHeader } from './TableHeader';
 export const Row = styled.tr<{
     $elevation: Elevation;
     $isCollapsed: boolean;
-    $highlight: boolean;
+    $isHighlighted: boolean;
     $isHeader: boolean;
 }>`
     border-top: 1px solid ${mapElevationToBorder};
@@ -24,8 +24,8 @@ export const Row = styled.tr<{
         border-top: 0;
     }
 
-    ${({ $highlight, theme, $elevation, $isHeader }) =>
-        $highlight &&
+    ${({ $isHighlighted, theme, $elevation, $isHeader }) =>
+        $isHighlighted &&
         !$isHeader &&
         css`
             &:hover {
@@ -68,21 +68,31 @@ export const Row = styled.tr<{
 export interface TableRowProps {
     children: ReactNode;
     isCollapsed?: boolean;
+    isHighlightedOnHover?: boolean;
     onClick?: () => void;
+    onHover?: (isHovering: boolean) => void;
 }
 
-export const TableRow = ({ children, isCollapsed = false, onClick }: TableRowProps) => {
+export const TableRow = ({
+    children,
+    isCollapsed = false,
+    onClick,
+    onHover,
+    isHighlightedOnHover,
+}: TableRowProps) => {
     const { elevation } = useElevation();
     const isHeader = useTableHeader();
-    const { highlightRowOnHover } = useTable();
+    const { isRowHighlightedOnHover } = useTable();
 
     return (
         <Row
             $elevation={elevation}
             $isCollapsed={isCollapsed}
-            $highlight={highlightRowOnHover}
+            $isHighlighted={isHighlightedOnHover ?? isRowHighlightedOnHover}
             $isHeader={isHeader}
             onClick={onClick}
+            onMouseEnter={() => onHover?.(true)}
+            onMouseLeave={() => onHover?.(false)}
         >
             {children}
         </Row>

diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx
@@ -26,7 +26,7 @@ export const AssetTable = ({
     assetsData,
     assetsFiatBalances,
 }: AssetTableProps) => (
-    <Table highlightRowOnHover={true} margin={{ top: spacings.md, bottom: spacings.md }}>
+    <Table isRowHighlightedOnHover margin={{ top: spacings.md, bottom: spacings.md }}>
         <Table.Header>
             <Table.Row>
                 <Table.Cell colSpan={3}>