import { useState } from 'react' ; import { csvToArray } from '../../../../common/lib' ; type ChildItems = string [ ] | 'all' ; interface Arg { items : string [ ] | string | undefined ; } export interface ReturnValue { items : ChildItems ; hiddenItemsCount : number ; isShowingFullList : boolean ; setIsShowingFullList : ( showAll : boolean ) => void ; } const maximumItemPreviewCount = 10 ; export const useCollapsibleList = ( { items } ) : ReturnValue => { const [ isShowingFullList , setIsShowingFullList ] = useState < boolean > ( false ) ; const itemsArray = csvToArray ( items ) ?? [ ] ; const displayItems = items === undefined ? 'all' : itemsArray . slice ( 0 , isShowingFullList ? Infinity : maximumItemPreviewCount ) ; const hiddenItemsCount = itemsArray . length > maximumItemPreviewCount ? itemsArray . length - maximumItemPreviewCount : 0 ; return { items : displayItems , hiddenItemsCount , setIsShowingFullList , isShowingFullList , } ; } ;