import { createStyles , makeStyles , Theme } from '@material-ui/core' ; import Button from '@material-ui/core/Button' ; import Dialog from '@material-ui/core/Dialog' ; import DialogContent from '@material-ui/core/DialogContent' ; import DialogTitle from '@material-ui/core/DialogTitle' ; import { Check , Clear } from '@material-ui/icons' ; import React , { ReactElement , useState } from 'react' ; import ExpandableListItemActions from '../../components/ExpandableListItemActions' ; import { SwarmSelect } from '../../components/SwarmSelect' ; import { EnrichedPostageBatch } from '../../providers/Stamps' ; interface Props { stamps : EnrichedPostageBatch [ ] ; onSelect : ( stamp : EnrichedPostageBatch ) => void ; onClose : ( ) => void ; } const useStyles = makeStyles ( ( theme ) => createStyles ( { dialog : { background : theme . palette . background . default , borderRadius : 0 , width : '100%' , maxWidth : '890px' , } , title : { color : '#606060' , textAlign : 'center' , } , hint : { marginBottom : '16px' , } , } ) ) ; export function SelectPostageStampModal ( { stamps , onSelect , onClose } ) { const [ selectedStamp , setSelectedStamp ] = useState < EnrichedPostageBatch | null > ( null ) ; const classes = useStyles ( ) ; function onChange ( stampId ) { const stamp = stamps . find ( x => x . batchID === stampId ) ; if ( stamp ) { setSelectedStamp ( stamp ) ; } } function onFinish ( ) { if ( selectedStamp ) { onSelect ( selectedStamp ) ; onClose ( ) ; } } return ( < Dialog open = { true } onClose = { onClose } aria - labelledby = "form-dialog-title" fullWidth PaperProps = { { className : classes . dialog } } > < DialogTitle id = "form-dialog-title" className = { classes . title } > Select postage stamp < /DialogTitle> < DialogContent > < SwarmSelect options = { stamps . map ( x => ( { label : x . batchID , value : x . batchID } ) ) } onChange = { event => onChange ( event . target . value as string ) } / > < /DialogContent> < DialogContent > < ExpandableListItemActions > < Button disabled = { ! selectedStamp } onClick = { onFinish } variant = "contained" startIcon = { < Check / > } > Select < /Button> < Button onClick = { onClose } variant = "contained" startIcon = { < Clear / > } > Cancel < /Button> < /ExpandableListItemActions> < /DialogContent> < /Dialog>); }