115 lines
2.7 KiB
TypeScript
115 lines
2.7 KiB
TypeScript
import { Box, Button, Input, Stack } from '@chakra-ui/react'
|
||
import React from 'react'
|
||
import { Controller, useForm } from 'react-hook-form'
|
||
import {
|
||
Modal,
|
||
ModalBody,
|
||
ModalCloseButton,
|
||
ModalContent,
|
||
ModalFooter,
|
||
ModalHeader,
|
||
ModalOverlay,
|
||
} from '@chakra-ui/react'
|
||
|
||
type Inputs = {
|
||
name: string
|
||
lastName: string
|
||
|
||
age: string
|
||
}
|
||
|
||
export const ProfileEditModal = ({ onClose }) => {
|
||
const {
|
||
register,
|
||
control,
|
||
handleSubmit,
|
||
watch,
|
||
reset,
|
||
setValue,
|
||
formState: { errors },
|
||
} = useForm<Inputs>({
|
||
mode: 'onChange',
|
||
defaultValues: {
|
||
name: 'name',
|
||
lastName: 'string',
|
||
age: '12',
|
||
},
|
||
})
|
||
|
||
const onSibmit = ({ name, age }) => {
|
||
// console.log(1111111, name, age)
|
||
}
|
||
|
||
return (
|
||
<Modal isOpen onClose={onClose}>
|
||
<ModalOverlay />
|
||
<ModalContent>
|
||
<ModalHeader>Modal Title</ModalHeader>
|
||
<ModalCloseButton />
|
||
<ModalBody>
|
||
<Box
|
||
as="form"
|
||
flexDirection="column"
|
||
display="flex"
|
||
gap={3}
|
||
onSubmit={handleSubmit(onSibmit)}
|
||
>
|
||
<label>
|
||
Name:
|
||
<Controller
|
||
control={control}
|
||
name="name"
|
||
rules={{
|
||
required: 'required 4 now',
|
||
minLength: { value: 4, message: 'min 4 now' },
|
||
}}
|
||
render={({ field }) => (
|
||
<Input isInvalid={Boolean(errors.name)} {...field} />
|
||
)}
|
||
/>
|
||
</label>
|
||
|
||
<label>
|
||
Age:
|
||
<Controller
|
||
control={control}
|
||
name="age"
|
||
rules={{
|
||
required: 'required 4 now',
|
||
}}
|
||
render={({ field }) => (
|
||
<Input
|
||
isInvalid={Boolean(errors.age)}
|
||
type="number"
|
||
{...field}
|
||
/>
|
||
)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
lastName:
|
||
<Controller
|
||
control={control}
|
||
name="lastName"
|
||
render={({ field }) => (
|
||
<Input type="number" {...field} />
|
||
)}
|
||
/>
|
||
</label>
|
||
<Stack gap={4} pt={8}>
|
||
<Button variant="solid" type="submit">
|
||
Submit
|
||
</Button>
|
||
</Stack>
|
||
</Box>
|
||
<ModalFooter>
|
||
<Button variant="outline" type="button" onClick={onClose}>
|
||
Отмена
|
||
</Button>
|
||
</ModalFooter>
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
)
|
||
}
|