Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | import React from 'react';
import { AppBar, Box, useTheme } from '@mui/material';
import Button from '../Button/Button';
import useDeviceInfo from '../../utils/useDeviceInfo';
export interface FormButton {
id: string;
text: string;
disabled: boolean;
onClick: () => void;
buttonPriority?: 'primary' | 'secondary';
buttonType?: 'passive' | 'productive' | 'destructive';
}
export interface Props {
cancelID: string;
saveID: string;
onCancel: () => void;
cancelButtonText?: string;
saveButtonText: string;
saveDisabled?: boolean;
onSave: () => void;
additionalRightButtons?: FormButton[];
}
export default function FormBottomBar({
cancelID,
saveID,
onCancel,
cancelButtonText,
saveButtonText,
saveDisabled,
onSave,
additionalRightButtons,
}: Props): JSX.Element {
const { isMobile, isDesktop } = useDeviceInfo();
const theme = useTheme();
return (
<AppBar
position='fixed'
color='primary'
style={{ top: 'auto', bottom: 0, right: 'auto', left: isDesktop ? 'auto' : 0 }}
sx={{
background:
`linear-gradient(to right, ${theme.palette.TwClrBaseGray025}00,` +
`${theme.palette.TwClrBaseGray025}80, ${theme.palette.TwClrBaseGray025}80,` +
`${theme.palette.TwClrBaseGray025}00)`,
backdropFilter: 'blur(16px)',
borderTop: '1px solid',
borderImage:
`linear-gradient(to right, ${theme.palette.TwClrBaseGray300}00,` +
`${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}FF,` +
`${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}00) 1`,
boxShadow: 'none',
justifyContent: 'space-between',
display: 'flex',
flexDirection: isMobile ? 'column-reverse' : 'row',
padding: isDesktop ? '16px 24px' : `16px 24px ${theme.spacing(5)}`,
width: isDesktop ? 'calc(100% - 200px)' : '100%',
zIndex: 1000,
}}
>
<Button
id={cancelID || 'cancelBottomBar'}
size='medium'
label={cancelButtonText}
onClick={onCancel}
priority='secondary'
type='passive'
style={{
marginTop: isMobile ? theme.spacing(1) : 'auto',
marginRight: theme.spacing(1),
}}
/>
<Box
sx={{
display: 'flex',
flexDirection: isMobile ? 'column-reverse' : 'row',
}}
>
{additionalRightButtons &&
additionalRightButtons.map((btn) => (
<Button
id={btn.id}
key={btn.id}
priority={btn.buttonPriority}
type={btn.buttonType}
size='medium'
label={btn.text}
onClick={btn.onClick}
disabled={btn.disabled}
style={{
marginTop: isMobile ? theme.spacing(1) : 'auto',
}}
/>
))}
<Button
id={saveID || 'saveBottomBar'}
size='medium'
label={saveButtonText}
onClick={onSave}
disabled={saveDisabled}
style={{
marginTop: isMobile ? theme.spacing(1) : 'auto',
}}
/>
</Box>
</AppBar>
);
}
|