gitscope
← marzneshin / v0.3.0-alpha11 / dashboard/src/features/users/dialogs/mutation/fields/onhold-expire-duration.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/mutation/fields/onhold-expire-duration.tsx · TypeScript
Blame Raw
 1
 2import {
 3    FormControl,
 4    FormField,
 5    FormItem,
 6    Input,
 7    FormLabel,
 8    FormMessage
 9} from '@marzneshin/components';
10import { FC, useEffect, useState } from 'react'
11import { useFormContext } from 'react-hook-form';
12import { useTranslation } from 'react-i18next';
13
14interface OnHoldExpireDurationFieldProps { }
15
16export const OnHoldExpireDurationField: FC<OnHoldExpireDurationFieldProps> = () => {
17    const form = useFormContext()
18    const [duration, setDuration] = useState<number>(0)
19    useEffect(() => {
20        form.setValue('on_hold_expire_duration', duration * 86400)
21    }, [form, duration])
22    const { t } = useTranslation()
23
24    return (
25        <FormField
26            control={form.control}
27            name="on_hold_expire_duration"
28            render={({ field }) => (
29                <FormItem>
30                    <FormLabel>{t('page.users.on_hold_expire_duration')} ({t('days')})</FormLabel>
31                    <FormControl>
32                        <Input
33                            type="number"
34                            {...field}
35                            value={duration}
36                            onChange={(e) => setDuration(Number(e.target.value))}
37                        />
38                    </FormControl>
39                    <FormMessage />
40                </FormItem>
41            )}
42        />
43    );
44}