From 59cc31b3888ea0f7f5b9a4370fcd976254756dd7 Mon Sep 17 00:00:00 2001 From: Aleka Cheung Date: Mon, 22 Jan 2024 17:21:11 -0500 Subject: [PATCH] update to add a TR inside table instead --- src/components/CollapsibleTable.tsx | 91 ----------------------------- src/components/Table.tsx | 60 ++++++++++++++++--- 2 files changed, 53 insertions(+), 98 deletions(-) delete mode 100644 src/components/CollapsibleTable.tsx diff --git a/src/components/CollapsibleTable.tsx b/src/components/CollapsibleTable.tsx deleted file mode 100644 index 295f5e6..0000000 --- a/src/components/CollapsibleTable.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Key, useState } from 'react'; -import styled, { type AnyStyledComponent, css } from 'styled-components'; - -import { STRING_KEYS } from '@/constants/localization'; - -import { useStringGetter } from '@/hooks'; -import { CaretIcon } from '@/icons'; - -import { Button } from './Button'; - -import { - Table, - type ElementProps as TableElementProps, - type StyleProps as TableStyleProps, -} from './Table'; - -type CollapsibleTableAdditionalProps = { - initialNumRowsToShow: number; -}; - -type CollapsibleTableProps< - TableRowData extends object, - TableRowKey extends Key -> = TableElementProps & - TableStyleProps & - CollapsibleTableAdditionalProps; - -export const CollapsibleTable = ({ - data = [], - initialNumRowsToShow, - - className, - ...tableProps -}: CollapsibleTableProps) => { - const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow); - const stringGetter = useStringGetter(); - const showViewMoreButton = numRowsToShow !== undefined && numRowsToShow < data.length; - - return ( - - - {showViewMoreButton && ( - setNumRowsToShow(data.length)} - slotRight={} - > - {stringGetter({ key: STRING_KEYS.VIEW_MORE })} - - )} - - ); -}; - -const Styled: Record = {}; - -Styled.Container = styled.div` - display: grid; - grid-template-areas: 'table' 'viewmore'; - grid-template-rows: auto 1fr; -`; - -Styled.Table = styled(Table)<{ showViewMoreButton?: boolean }>` - grid-area: table; - - ${({ showViewMoreButton }) => - showViewMoreButton && - css` - table tbody tr:last-of-type { - box-shadow: 0 calc(-1 * var(--border-width)) 0 0 var(--border-color); - } - `} -`; - -Styled.ViewMoreButton = styled(Button)` - --button-backgroundColor: var(--color-layer-2); - --button-textColor: var(--color-text-1); - - width: 100%; - grid-area: viewmore; - - svg { - width: 0.675rem; - margin-left: 0.5ch; - } -`; diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 9573ccc..36f9283 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -33,15 +33,20 @@ import { import { useAsyncList } from 'react-stately'; -import { useBreakpoints } from '@/hooks'; +import { useBreakpoints, useStringGetter } from '@/hooks'; import { MediaQueryKeys } from '@/hooks/useBreakpoints'; import { breakpoints } from '@/styles'; import { layoutMixins } from '@/styles/layoutMixins'; +import { CaretIcon } from '@/icons'; + +import { STRING_KEYS } from '@/constants/localization'; + +import { MustBigNumber } from '@/lib/numbers'; import { Icon, IconName } from './Icon'; import { Tag } from './Tag'; -import { MustBigNumber } from '@/lib/numbers'; +import { Button } from './Button'; export { TableCell } from './Table/TableCell'; export { TableColumnHeader } from './Table/TableColumnHeader'; @@ -63,7 +68,7 @@ export type TableItem = { onSelect?: (key: TableRowData) => void; }; -export type ColumnDef = { +type ColumnDef = { columnKey: string; label: React.ReactNode; tag?: React.ReactNode; @@ -90,12 +95,12 @@ export type ElementProps void; slotEmpty?: React.ReactNode; - numRowsToShow?: number; + initialNumRowsToShow?: number; // collection: TableCollection; // children: React.ReactNode; }; -export type StyleProps = { +type StyleProps = { hideHeader?: boolean; withGradientCardRows?: boolean; withFocusStickyRows?: boolean; @@ -120,7 +125,7 @@ export const Table = ({ selectionMode = 'single', selectionBehavior = 'toggle', slotEmpty, - numRowsToShow = data.length, + initialNumRowsToShow = data.length, // shouldRowRender, // collection, @@ -136,6 +141,7 @@ export const Table = ({ style, }: ElementProps & StyleProps) => { const [selectedKeys, setSelectedKeys] = useState(new Set()); + const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow); const currentBreakpoints = useBreakpoints(); const shownColumns = columns.filter( @@ -209,6 +215,12 @@ export const Table = ({ onRowAction && ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!)) } + numColumns={shownColumns.length} + onViewMoreClick={ + numRowsToShow !== undefined && numRowsToShow < data.length + ? () => setNumRowsToShow(data.length) + : undefined + } // shouldRowRender={shouldRowRender} hideHeader={hideHeader} withGradientCardRows={withGradientCardRows} @@ -267,6 +279,8 @@ const TableRoot = void; // shouldRowRender?: (prevRowData: object, currentRowData: object) => boolean; children: CollectionChildren; + numColumns: number; + onViewMoreClick?: () => void; hideHeader?: boolean; withGradientCardRows?: boolean; @@ -276,7 +290,7 @@ const TableRoot = { - const { selectionMode, selectionBehavior } = props; + const { selectionMode, selectionBehavior, numColumns, onViewMoreClick } = props; const state = useTableState({ ...props, @@ -383,6 +397,9 @@ const TableRoot = ) )} + {onViewMoreClick ? ( + + ) : undefined} ); @@ -492,6 +509,23 @@ const TableColumnHeader = ({ ); }; +export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => { + const stringGetter = useStringGetter(); + return ( + + e.preventDefault()} + onPointerDown={(e: MouseEvent) => e.preventDefault()} + > + } onClick={onClick}> + {stringGetter({ key: STRING_KEYS.VIEW_MORE })} + + + + ); +}; + export const TableRow = ({ item, children, @@ -937,3 +971,15 @@ Styled.Row = styled.div` ${layoutMixins.inlineRow} padding: var(--tableCell-padding); `; + +Styled.ViewMoreButton = styled(Button)` + --button-backgroundColor: var(--color-layer-2); + --button-textColor: var(--color-text-1); + + width: 100%; + + svg { + width: 0.675rem; + margin-left: 0.5ch; + } +`;