import { ChangeEvent , memo , useEffect , useState , VFC } from "react" ; import { FormControl , FormLabel , Input , Modal , ModalBody , ModalCloseButton , ModalContent , ModalFooter , ModalHeader , ModalOverlay , Stack } from "@chakra-ui/react" ; import { User } from "../../../types/api/user" ; import { PrimaryButton } from "../../atoms/button/PrimaryButton" ; type Props = { user : User | undefined ; isOpen : boolean ; isAdmin ? : boolean ; onClose : ( ) => void ; } ; export const UserDetailModal = memo ( props => { const { isOpen , onClose , isAdmin = false , user } = props ; const [ username , setUsername ] = useState ( "" ) ; const [ name , setName ] = useState ( "" ) ; const [ email , setEmail ] = useState ( "" ) ; const [ phone , setPhone ] = useState ( "" ) ; useEffect ( ( ) => { setUsername ( user ?. username ?? "" ) ; setName ( user ?. name ?? "" ) ; setEmail ( user ?. email ?? "" ) ; setPhone ( user ?. phone ?? "" ) ; } , [ user ] ) ; const onChangeUsername = ( e ) => setUsername ( e . target . value ) ; const onChangeName = ( e ) => setName ( e . target . value ) ; const onChangeEmail = ( e ) => setEmail ( e . target . value ) ; const onChangePhone = ( e ) => setPhone ( e . target . value ) ; const onClickUpdate = ( ) => { console . log ( username ) ; console . log ( name ) ; console . log ( email ) ; console . log ( phone ) ; } ; return ( < Modal isOpen = { isOpen } onClose = { onClose } motionPreset = "slideInBottom" autoFocus = { false } > < ModalOverlay /> < ModalContent pb = { 2 } > < ModalHeader > ユーザー詳細 < /ModalHeader> < ModalCloseButton / > < ModalBody mx = { 6 } > < Stack spacing = { 4 } > < FormControl > < FormLabel > 名前 < /FormLabel> < Input value = { username } isReadOnly = { ! isAdmin } onChange = { onChangeUsername } / > < /FormControl> < FormControl > < FormLabel > フルネーム < /FormLabel> < Input value = { name } isReadOnly = { ! isAdmin } onChange = { onChangeName } / > < /FormControl> < FormControl > < FormLabel > MAIL < /FormLabel> < Input type = "email" value = { email } isReadOnly = { ! isAdmin } onChange = { onChangeEmail } / > < /FormControl> < FormControl > < FormLabel > TEL < /FormLabel> < Input type = "tel" value = { phone } isReadOnly = { ! isAdmin } onChange = { onChangePhone } / > < /FormControl> < /Stack> < /ModalBody> { isAdmin && ( < ModalFooter > < PrimaryButton onClick = { onClickUpdate } > 更新 < /PrimaryButton> < /ModalFooter>)} < /ModalContent> < /Modal>); } ) ;