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 74 75 76 77 78 79 80 81 82 83 84 85 86 | 1x 1x 1x 1x 1x 1x 1x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 7x 1x 1x 11x 11x 11x 2x 2x 2x 11x 11x 11x 11x 11x 11x 11x 11x 11x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 44x 11x 11x 11x | // Libs
import { useCallback, useEffect, useState } from 'react';
// Constants
import { PERIODIC_STATISTICS } from '@/constants/filterOptions';
// Types
import { ChartMode, PeriodicMode } from '@/types/chart';
// Components
import { FilterLabel } from '@/components/common/FilterLabel';
import { Button } from '@/components/common/Button';
// Utils
import { combineClasses } from '@shared/utils';
import './style.css';
type FilterTabProps = {
data: PeriodicMode[];
selectedItem?: ChartMode;
disabledItems?: ChartMode[];
isOnlyIcon?: boolean;
className?: string;
isShowTooltip?: boolean;
onChange?: (period: ChartMode) => void;
};
export const FilterTab = ({
data = PERIODIC_STATISTICS,
selectedItem = ChartMode.Week,
disabledItems = [],
isOnlyIcon = false,
className = '',
isShowTooltip = false,
onChange = () => {},
}: FilterTabProps) => {
const [selectedPeriod, setSelectedPeriod] = useState<ChartMode>(selectedItem);
useEffect(() => {
if (selectedItem && selectedItem !== selectedPeriod) {
setSelectedPeriod(selectedItem);
}
}, [selectedItem]);
const handlePeriodClick = useCallback(
(label: ChartMode) => () => {
setSelectedPeriod(label);
onChange?.(label);
},
[],
);
return (
<div
className={combineClasses(
'flex justify-between gap-1 sm:gap-8.5 w-full sm:w-fit',
className,
)}
>
{data.map((item) => {
const disabled = !!item.label
? disabledItems.includes(item.label)
: false;
return (
<Button
key={item.label}
className="focus:outline-none"
disabled={disabled}
onClick={handlePeriodClick(item.label)}
>
<FilterLabel
icon={item.icon}
{...(isShowTooltip && { tooltipContent: item.label })}
{...(!isOnlyIcon && { label: item.label })}
selected={selectedPeriod === item.label}
variant="primary"
/>
</Button>
);
})}
</div>
);
};
|