diff --git a/src/components/CollapsibleTable.tsx b/src/components/CollapsibleTable.tsx new file mode 100644 index 0000000..295f5e6 --- /dev/null +++ b/src/components/CollapsibleTable.tsx @@ -0,0 +1,91 @@ +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 36f9283..cfa2c8b 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -982,4 +982,4 @@ Styled.ViewMoreButton = styled(Button)` width: 0.675rem; margin-left: 0.5ch; } -`; +`; \ No newline at end of file