Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 1x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 7x 7x 7x 7x 7x 7x | import { Fragment, ReactElement, useState } from 'react'
import { Menu } from '@headlessui/react'
import { Nullable } from '@/shared/@types/utils'
import cn from 'classnames'
import { Button, CurrentFilter, SizeEnum, TFunction, TableFilterGroup, TableFilterItem } from '@tmk/ui-kit'
export interface TableFiltersInterface {
filters: (TableFilterItem | TableFilterGroup)[]
extraContent?: ReactElement
buttonTitle?: string
t: TFunction
size?: SizeEnum
}
export const TableFilters = ({
filters,
extraContent,
buttonTitle,
t,
size = SizeEnum.Normal,
}: TableFiltersInterface) => {
const [selectedFilter, setSelectedFilter] = useState<Nullable<TableFilterItem>>(null)
return (
<>
{selectedFilter ? (
<div className={cn('pb-5', { 'pb-6': selectedFilter.type === 'range-date' })}>
<CurrentFilter {...selectedFilter} setCurrentFilter={setSelectedFilter} t={t} />
</div>
) : (
<div className='flex items-end gap-x-5'>
{extraContent && extraContent}
<Menu as='div' className='relative'>
<Menu.Button as={Fragment}>
<Button variant='outlined' color='secondary' childrenClassName='flex items-center gap-x-2.5'>
<h3>{buttonTitle || t('Filters')}</h3>
</Button>
</Menu.Button>
<Menu.Items className='overflow-x-hidden z-20 absolute top-11 flex flex-col bg-white border border-gray rounded-base max-w-[250px]'>
{filters?.map(filter => (
<Fragment key={filter.label}>
{(filter as TableFilterGroup).items && filter.label && (
<p className='px-5 py-2 border-b text-text-secondary border-b-gray'>{filter.label}</p>
)}
{((filter as TableFilterGroup).items || [filter]).map(
item =>
!item.isHidden && (
<Menu.Item
as='div'
key={filter.label}
className='hover:cursor-pointer px-5 py-2.5 hover:bg-background m-t'
onClick={() => setSelectedFilter(item)}
>
<span
className={cn({
'text-h4-large': size === SizeEnum.Large,
'text-main-regular': size === SizeEnum.Normal,
})}
>
{item.label}
</span>
</Menu.Item>
)
)}
</Fragment>
))}
</Menu.Items>
</Menu>
</div>
)}
</>
)
}
|