File size: 3,031 Bytes
ec4551b | 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 'use client';
import { FC, useMemo, useState } from 'react';
import { Select } from '@gitroom/react/form/select';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
import { useClickOutside } from '@mantine/hooks';
import { isUSCitizen } from '@gitroom/frontend/components/launches/helpers/isuscitizen.utils';
import clsx from 'clsx';
import { RepeatIcon, DropdownArrowIcon } from '@gitroom/frontend/components/ui/icons';
const getList = (t: (key: string, fallback: string) => string) => [
{
value: 1,
label: t('day', 'Day'),
},
{
value: 2,
label: t('two_days', 'Two Days'),
},
{
value: 3,
label: t('three_days', 'Three Days'),
},
{
value: 4,
label: t('four_days', 'Four Days'),
},
{
value: 5,
label: t('five_days', 'Five Days'),
},
{
value: 6,
label: t('six_days', 'Six Days'),
},
{
value: 7,
label: t('week', 'Week'),
},
{
value: 14,
label: t('two_weeks', 'Two Weeks'),
},
{
value: 30,
label: t('month', 'Month'),
},
{
value: null,
label: t('cancel', 'Cancel'),
},
];
export const RepeatComponent: FC<{
repeat: number | null;
onChange: (newVal: number) => void;
}> = (props) => {
const { repeat } = props;
const t = useT();
const list = getList(t);
const [isOpen, setIsOpen] = useState(false);
const ref = useClickOutside(() => {
if (!isOpen) {
return;
}
setIsOpen(false);
});
const everyLabel = useMemo(() => {
if (!repeat) {
return '';
}
return list.find((p) => p.value === repeat)?.label;
}, [repeat, list]);
return (
<div
ref={ref}
className={clsx(
'border rounded-[8px] justify-center flex items-center relative h-[44px] text-[15px] font-[600] select-none',
isOpen ? 'border-[#612BD3]' : 'border-newTextColor/10',
)}
>
<div
onClick={() => setIsOpen(!isOpen)}
className="px-[16px] justify-center flex gap-[8px] items-center h-full select-none flex-1"
>
<div className="cursor-pointer">
<RepeatIcon />
</div>
<div className="cursor-pointer">
{repeat
? `${t('repeat_post_every_label', 'Repeat Post Every')} ${everyLabel}`
: t('repeat_post_every', 'Repeat Post Every...')}
</div>
<div className="cursor-pointer">
<DropdownArrowIcon rotated={isOpen} />
</div>
</div>
{isOpen && (
<div className="z-[300] absolute start-0 bottom-[100%] w-[240px] bg-newBgColorInner p-[12px] menu-shadow -translate-y-[10px] flex flex-col">
{list.map((p) => (
<div
onClick={() => {
props.onChange(Number(p.value));
setIsOpen(false);
}}
key={p.label}
className="h-[40px] py-[8px] px-[20px] -mx-[12px] hover:bg-newBgColor"
>
{p.label}
</div>
))}
</div>
)}
</div>
);
};
|