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 | 4x 4x 4x | import { Button } from "@common/Button";
import { Box, BoxProps, Stack, styled } from "@mui/material";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import { TPrimaryAction } from "./types";
export type ModalDrawerActionsProps = {
onModalClose?: () => void;
primaryAction: TPrimaryAction;
handleBack: () => void;
handleSubmitStep: () => void;
isBack?: boolean;
steps?: boolean;
isPreBuildFormBuilder?: boolean;
stepIndex?: number;
};
const ModalDrawerActions = ({
onModalClose,
primaryAction,
handleBack,
handleSubmitStep,
steps,
stepIndex,
isPreBuildFormBuilder,
}: ModalDrawerActionsProps) => {
const { isDesktopView } = useCustomTheme();
return (
<DrawerActions issteps={Boolean(steps) || !!isPreBuildFormBuilder}>
{isDesktopView && onModalClose && (
<Button
background="text"
size="medium"
style={{
visibility: !isPreBuildFormBuilder ? "visible" : "hidden",
}}
onClick={onModalClose}
data-testid="modal-cancel-button"
>
Cancel
</Button>
)}
<Stack
direction={isDesktopView ? "row" : "column"}
alignItems={isDesktopView ? "center" : "stretch"}
gap={isDesktopView ? 2 : 1}
sx={{ ...(!isDesktopView && { flexGrow: 1 }) }}
>
{steps && stepIndex !== 0 && (
<Button
background="text"
size="medium"
onClick={handleBack}
data-testid="modal-back-button"
>
Back
</Button>
)}
<Button
{...primaryAction}
onClick={
primaryAction.type !== "submit" ? handleSubmitStep : undefined
}
variant="primary"
size="medium"
fullWidth={!isDesktopView}
data-testid="modal-next-button"
>
{primaryAction.label}
</Button>
</Stack>
</DrawerActions>
);
};
const DrawerActions = styled(Box, {
shouldForwardProp: (prop) => prop !== "issteps",
})<BoxProps & { issteps?: boolean }>(({ issteps, theme }) => ({
display: "flex",
alignItems: "center",
...(issteps && {
justifyContent: "space-between",
marginTop: "50px",
padding: "0px 16px 16px 16px",
}),
[theme.breakpoints.down("sm")]: {
...(!issteps && {
position: "sticky",
bottom: 0,
zIndex: 99,
padding: "0px 16px 16px 16px",
}),
},
...(issteps && {
gap: "24px",
}),
}));
export default ModalDrawerActions;
|