import { useState , cloneElement } from 'react' ; import { Button , Modal , ModalHeader , ModalBody , ModalFooter , FormGroup } from 'reactstrap' ; import * as I from './../../../../api/interfaces' ; import { useTranslation } from 'react-i18next' ; import LabeledInput from '../../../LabeledInput' ; interface TeamData { id : string ; wins : number ; } interface Props { isOpen : boolean ; toggle : ( ) => void ; side : 'right' | 'left' ; teams : I . Team [ ] ; team : TeamData ; onSave : Function ; } const SetTeamModal = ( { isOpen , toggle , side , teams , team , onSave } ) => { const [ form , setForm ] = useState < TeamData > ( { ... team } ) ; const save = ( ) => { if ( form . id === 'empty' ) { onSave ( side , null , form . wins ) ; toggle ( ) ; return ; } onSave ( side , form . id , form . wins ) ; toggle ( ) ; } ; const changeHandler = ( name ) => ( event ) => { if ( name === 'wins' ) { form . wins = Number ( event . target . value ) ; } else { form . id = event . target . value ; } setForm ( { ... form } ) ; } ; const { t } = useTranslation ( ) ; return ( < Modal isOpen = { isOpen } toggle = { toggle } className = { 'veto_modal' } > < ModalHeader toggle = { toggle } > { t ( 'common.teamNumber' , { num : side === 'left' ? 1 : 2 } ) } < /ModalHeader> < ModalBody > < FormGroup > < LabeledInput label = "Team" type = "select" name = "teams" id = "teams" value = { form . id } onChange = { changeHandler ( 'id' ) } > < option value = { 'empty' } > { t ( 'match.emptyTeam' ) } < /option> { teams . map ( teams => ( < option key = { teams . _id } value = { teams . _id } > { teams . name } < /option>))} < /LabeledInput> < /FormGroup> < FormGroup > < LabeledInput label = "Series wins" type = "select" name = "wins" id = "wins" value = { form . wins } onChange = { changeHandler ( 'wins' ) } > < option value = { 0 } > 0 < /option> < option value = { 1 } > 1 < /option> < option value = { 2 } > 2 < /option> < option value = { 3 } > 3 < /option> < option value = { 4 } > 4 < /option> < option value = { 5 } > 5 < /option> < /LabeledInput> < /FormGroup> < /ModalBody> < ModalFooter className = "no-padding" > < Button color = "primary" onClick = { save } className = "modal-save" > { t ( 'common.save' ) } < /Button> < /ModalFooter> < /Modal>); } ; interface TeamModalsProps { button : JSX . Element ; side : 'right' | 'left' ; team : any ; teams : I . Team [ ] ; onSave : Function ; } const TeamModal = ( { button , side , team , teams , onSave } ) => { const [ isOpen , setOpen ] = useState ( false ) ; const toggle = ( ) => setOpen ( ! isOpen ) ; const setOnPress = ( element ) => { return cloneElement ( element , { onClick : toggle } ) ; } ; return ( < > { setOnPress ( button ) } < SetTeamModal isOpen = { isOpen } toggle = { toggle } side = { side } team = { team } teams = { teams } onSave = { onSave } / > < />); } ; export default TeamModal ;