github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/DialogAppBar.js (about) 1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import { makeStyles } from '@material-ui/core/styles'; 4 import AppBar from '@material-ui/core/AppBar'; 5 import Toolbar from '@material-ui/core/Toolbar'; 6 import Typography from '@material-ui/core/Typography'; 7 import Button from '@material-ui/core/Button'; 8 import IconButton from '@material-ui/core/IconButton'; 9 import ArrowBackIcon from '@material-ui/icons/ArrowBack'; 10 11 const useStyles = makeStyles(theme => ({ 12 title: { 13 flexGrow: 1, 14 color: theme.palette.common.white, 15 }, 16 toolbar: { 17 paddingLeft: theme.spacing(1), 18 paddingRight: theme.spacing(1), 19 }, 20 toolbarButton: { 21 color: theme.palette.common.white, 22 }, 23 })); 24 25 export default function DialogAppBar(props) { 26 const classes = useStyles(); 27 28 const { 29 title, 30 onClose, 31 onDone, 32 doneButtonDisabled, 33 doneButtonText 34 } = props; 35 36 return ( 37 <AppBar position="fixed"> 38 <Toolbar className={classes.toolbar}> 39 <IconButton onClick={onClose} className={classes.toolbarButton}> 40 <ArrowBackIcon /> 41 </IconButton> 42 <Typography variant="h6" className={classes.title}> 43 {title} 44 </Typography> 45 {onDone !== undefined && ( 46 <Button disabled={doneButtonDisabled} onClick={onDone} className={classes.toolbarButton}> 47 {doneButtonText} 48 </Button> 49 )} 50 </Toolbar> 51 </AppBar> 52 ); 53 } 54 55 DialogAppBar.propTypes = { 56 onClose: PropTypes.func.isRequired, 57 onDone: PropTypes.func, 58 title: PropTypes.string.isRequired, 59 };