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