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