diff --git a/src/core/ui/list/LinksList.tsx b/src/core/ui/list/LinksList.tsx index 2bed060294..3f41d5d43b 100644 --- a/src/core/ui/list/LinksList.tsx +++ b/src/core/ui/list/LinksList.tsx @@ -1,10 +1,18 @@ -import React, { FC, ReactNode } from 'react'; +import React, { FC, ReactNode, useState } from 'react'; import { styled } from '@mui/styles'; -import { List as MuiList, ListItem as MuiListItem, ListItemIcon as MuiListItemIcon, Skeleton } from '@mui/material'; +import { + Box, + Collapse, + List as MuiList, + ListItem as MuiListItem, + ListItemIcon as MuiListItemIcon, + Skeleton, +} from '@mui/material'; import { BlockSectionTitle, CaptionSmall } from '../typography'; import RouterLink from '../link/RouterLink'; import { gutters } from '../grid/utils'; import { times } from 'lodash'; +import CardExpandButton from '../card/CardExpandButton'; const List = styled(MuiList)(() => ({ padding: 0 })); @@ -33,14 +41,22 @@ export interface LinksListProps { loading?: boolean; } +const COLLAPSED_LIST_ITEM_LIMIT = 5; + const LinksList: FC = ({ items = [], emptyListCaption, loading = false }) => { + const [isExpanded, setIsExpanded] = useState(false); + + const handleExpand = () => { + setIsExpanded(!isExpanded); + }; + return ( {loading && times(3, i => )} {!loading && items.length === 0 && emptyListCaption && {emptyListCaption}} {!loading && items.length > 0 && - items.map(item => ( + items.slice(0, COLLAPSED_LIST_ITEM_LIMIT).map(item => ( {item.icon} @@ -48,6 +64,28 @@ const LinksList: FC = ({ items = [], emptyListCaption, loading = ))} + {!loading && items.length > COLLAPSED_LIST_ITEM_LIMIT && ( + + {items.slice(COLLAPSED_LIST_ITEM_LIMIT).map(item => ( + + {item.icon} + + {item.title} + + + ))} + + )} + + {!loading && items.length > COLLAPSED_LIST_ITEM_LIMIT && } + ); };