gitscope
/
← marzneshin / app/dashboard/src/pages/users/dialog/username-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/username-field.tsx · v0.1.2
Source
1 b366afa Mardin 2y ago import { HStack, Input, Tooltip, Box, Switch, FormControl, FormLabel } from '@chakra-ui/react';
2 b366afa Mardin 2y ago import { TFunction } from 'i18next';
3 bf7c131 Mardin 2y ago import { Controller } from 'react-hook-form';
4 b366afa Mardin 2y ago
5 b366afa Mardin 2y ago interface UsernameFieldProps {
6 b366afa Mardin 2y ago form: any;
7 b366afa Mardin 2y ago isEditing: boolean;
8 bf7c131 Mardin 2y ago t: TFunction<'translation', undefined, 'translation'>;
9 b366afa Mardin 2y ago disabled: boolean;
10 b366afa Mardin 2y ago }
11 b366afa Mardin 2y ago
12 b366afa Mardin 2y ago export const UsernameField = ({ form, isEditing, t, disabled }: UsernameFieldProps) => {
13 bf7c131 Mardin 2y ago return (
14 bf7c131 Mardin 2y ago <FormControl mb={'10px'}>
15 bf7c131 Mardin 2y ago <FormLabel>{t('username')}</FormLabel>
16 bf7c131 Mardin 2y ago <HStack>
17 bf7c131 Mardin 2y ago <Input
18 bf7c131 Mardin 2y ago size="sm"
19 bf7c131 Mardin 2y ago type="text"
20 bf7c131 Mardin 2y ago borderRadius="6px"
21 bf7c131 Mardin 2y ago error={form.formState.errors.username?.message}
22 bf7c131 Mardin 2y ago disabled={disabled || isEditing}
23 bf7c131 Mardin 2y ago {...form.register('username')}
24 bf7c131 Mardin 2y ago />
25 bf7c131 Mardin 2y ago {isEditing && (
26 bf7c131 Mardin 2y ago <HStack px={1}>
27 bf7c131 Mardin 2y ago <Controller
28 bf7c131 Mardin 2y ago name="status"
29 bf7c131 Mardin 2y ago control={form.control}
30 bf7c131 Mardin 2y ago render={({ field }) => {
31 bf7c131 Mardin 2y ago return (
32 bf7c131 Mardin 2y ago <Tooltip
33 bf7c131 Mardin 2y ago placement="top"
34 bf7c131 Mardin 2y ago label={'status: ' + field.value}
35 bf7c131 Mardin 2y ago textTransform="capitalize"
36 bf7c131 Mardin 2y ago >
37 bf7c131 Mardin 2y ago <Box>
38 bf7c131 Mardin 2y ago <Switch
39 bf7c131 Mardin 2y ago colorScheme="primary"
40 bf7c131 Mardin 2y ago disabled={
41 bf7c131 Mardin 2y ago field.value !== 'active' &&
42 bf7c131 Mardin 2y ago field.value !== 'disabled'
43 bf7c131 Mardin 2y ago }
44 bf7c131 Mardin 2y ago isChecked={field.value === 'active'}
45 bf7c131 Mardin 2y ago onChange={(e) => {
46 bf7c131 Mardin 2y ago if (e.target.checked) {
47 bf7c131 Mardin 2y ago field.onChange('active');
48 bf7c131 Mardin 2y ago } else {
49 bf7c131 Mardin 2y ago field.onChange('disabled');
50 bf7c131 Mardin 2y ago }
51 bf7c131 Mardin 2y ago }}
52 bf7c131 Mardin 2y ago />
53 bf7c131 Mardin 2y ago </Box>
54 bf7c131 Mardin 2y ago </Tooltip>
55 bf7c131 Mardin 2y ago );
56 bf7c131 Mardin 2y ago }}
57 bf7c131 Mardin 2y ago />
58 bf7c131 Mardin 2y ago </HStack>
59 bf7c131 Mardin 2y ago )}
60 bf7c131 Mardin 2y ago </HStack>
61 bf7c131 Mardin 2y ago </FormControl>
62 bf7c131 Mardin 2y ago )
63 b366afa Mardin 2y ago }