gitscope
/
← marzneshin / app/dashboard/src/pages/hosts/users/dialog/expire-date-field.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/hosts/users/dialog/expire-date-field.tsx · v0.1.0
Source
1 6aab6f0 Mrdn 2y ago import {
2 6aab6f0 Mrdn 2y ago FormControl,
3 6aab6f0 Mrdn 2y ago FormHelperText,
4 6aab6f0 Mrdn 2y ago FormLabel,
5 6aab6f0 Mrdn 2y ago } from '@chakra-ui/react';
6 6aab6f0 Mrdn 2y ago import dayjs from 'dayjs';
7 6aab6f0 Mrdn 2y ago import { i18n, TFunction } from 'i18next';
8 6aab6f0 Mrdn 2y ago import ReactDatePicker from 'react-datepicker';
9 6aab6f0 Mrdn 2y ago import { Controller } from 'react-hook-form';
10 6aab6f0 Mrdn 2y ago import { relativeExpiryDate } from 'utils/dateFormatter';
11 6aab6f0 Mrdn 2y ago import { Input } from 'components/input';
12 6aab6f0 Mrdn 2y ago
13 6aab6f0 Mrdn 2y ago interface ExpireDateFieldProps {
14 6aab6f0 Mrdn 2y ago form: any;
15 6aab6f0 Mrdn 2y ago disabled: boolean;
16 6aab6f0 Mrdn 2y ago t: TFunction<'translation', undefined, 'translation'>;
17 6aab6f0 Mrdn 2y ago i18n: i18n;
18 6aab6f0 Mrdn 2y ago }
19 6aab6f0 Mrdn 2y ago
20 6aab6f0 Mrdn 2y ago export const ExpireDateField = ({ form, t, i18n, disabled }: ExpireDateFieldProps) => {
21 6aab6f0 Mrdn 2y ago return (
22 6aab6f0 Mrdn 2y ago <FormControl mb={'10px'}>
23 6aab6f0 Mrdn 2y ago <FormLabel>{t('userDialog.expiryDate')}</FormLabel>
24 6aab6f0 Mrdn 2y ago <Controller
25 6aab6f0 Mrdn 2y ago name="expire"
26 6aab6f0 Mrdn 2y ago control={form.control}
27 6aab6f0 Mrdn 2y ago render={({ field }) => {
28 6aab6f0 Mrdn 2y ago function createDateAsUTC(num: number) {
29 6aab6f0 Mrdn 2y ago return dayjs(
30 6aab6f0 Mrdn 2y ago dayjs(num * 1000).utc()
31 6aab6f0 Mrdn 2y ago // .format("MMMM D, YYYY") // exception with: dayjs.locale(lng);
32 6aab6f0 Mrdn 2y ago ).toDate();
33 6aab6f0 Mrdn 2y ago }
34 6aab6f0 Mrdn 2y ago const { status, time } = relativeExpiryDate(
35 6aab6f0 Mrdn 2y ago field.value
36 6aab6f0 Mrdn 2y ago );
37 6aab6f0 Mrdn 2y ago return (
38 6aab6f0 Mrdn 2y ago <>
39 6aab6f0 Mrdn 2y ago <ReactDatePicker
40 6aab6f0 Mrdn 2y ago locale={i18n.language.toLocaleLowerCase()}
41 6aab6f0 Mrdn 2y ago dateFormat={t('dateFormat')}
42 6aab6f0 Mrdn 2y ago minDate={new Date()}
43 6aab6f0 Mrdn 2y ago selected={
44 6aab6f0 Mrdn 2y ago field.value
45 6aab6f0 Mrdn 2y ago ? createDateAsUTC(field.value)
46 6aab6f0 Mrdn 2y ago : undefined
47 6aab6f0 Mrdn 2y ago }
48 6aab6f0 Mrdn 2y ago onChange={(date: Date) => {
49 6aab6f0 Mrdn 2y ago field.onChange({
50 6aab6f0 Mrdn 2y ago target: {
51 6aab6f0 Mrdn 2y ago value: date
52 6aab6f0 Mrdn 2y ago ? dayjs(
53 6aab6f0 Mrdn 2y ago dayjs(date)
54 6aab6f0 Mrdn 2y ago .set('hour', 23)
55 6aab6f0 Mrdn 2y ago .set('minute', 59)
56 6aab6f0 Mrdn 2y ago .set('second', 59)
57 6aab6f0 Mrdn 2y ago )
58 6aab6f0 Mrdn 2y ago .utc()
59 6aab6f0 Mrdn 2y ago .valueOf() / 1000
60 6aab6f0 Mrdn 2y ago : 0,
61 6aab6f0 Mrdn 2y ago name: 'expire',
62 6aab6f0 Mrdn 2y ago },
63 6aab6f0 Mrdn 2y ago });
64 6aab6f0 Mrdn 2y ago }}
65 6aab6f0 Mrdn 2y ago customInput={
66 6aab6f0 Mrdn 2y ago <Input
67 6aab6f0 Mrdn 2y ago size="sm"
68 6aab6f0 Mrdn 2y ago type="text"
69 6aab6f0 Mrdn 2y ago borderRadius="6px"
70 6aab6f0 Mrdn 2y ago clearable
71 6aab6f0 Mrdn 2y ago disabled={disabled}
72 6aab6f0 Mrdn 2y ago error={
73 6aab6f0 Mrdn 2y ago form.formState.errors.expire?.message
74 6aab6f0 Mrdn 2y ago }
75 6aab6f0 Mrdn 2y ago />
76 6aab6f0 Mrdn 2y ago }
77 6aab6f0 Mrdn 2y ago />
78 6aab6f0 Mrdn 2y ago {field.value ? (
79 6aab6f0 Mrdn 2y ago <FormHelperText>
80 6aab6f0 Mrdn 2y ago {t(status, { time: time })}
81 6aab6f0 Mrdn 2y ago </FormHelperText>
82 6aab6f0 Mrdn 2y ago ) : (
83 6aab6f0 Mrdn 2y ago ''
84 6aab6f0 Mrdn 2y ago )}
85 6aab6f0 Mrdn 2y ago </>
86 6aab6f0 Mrdn 2y ago );
87 6aab6f0 Mrdn 2y ago }}
88 6aab6f0 Mrdn 2y ago />
89 6aab6f0 Mrdn 2y ago </FormControl>
90 6aab6f0 Mrdn 2y ago )
91 6aab6f0 Mrdn 2y ago }