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 | 21x 82x 82x 164x 21x 267x 82x | import { Button } from "@common/Button";
import { ButtonProps } from "@common/Button/Button";
import { BtnBGTypes } from "@common/Button/Button_V2";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
import { HiddenComponent } from "@containers/HiddenComponent";
import { Stack, styled, StackProps, CircularProgress } from "@mui/material";
import { palette } from "@palette";
type ActionProps = ButtonProps & {
label?: string;
hidden?: boolean;
isLoading?: boolean;
dataTestId?: string;
};
type DialogActionsProps = {
containerProps?: StackProps;
padding?: string;
primaryAction?: ActionProps;
secondaryAction?: ActionProps;
animationDelay?: number;
fullWidth?: boolean;
};
export const ModalActions = ({
padding,
containerProps,
primaryAction,
secondaryAction,
animationDelay = 200,
fullWidth = false,
}: DialogActionsProps) => {
const buttons: (ActionProps & { background: BtnBGTypes })[] = [
{
background: "tertiary",
label: "Discard",
fullWidth,
...secondaryAction,
},
{
background: "primary",
label: "Save",
type: "submit",
fullWidth,
...primaryAction,
},
];
return (
<FadeUpWrapper delay={animationDelay}>
<Container
{...containerProps}
fullWidth={fullWidth}
sx={{ ...containerProps?.sx, padding }}
>
{buttons.map(
({ label, hidden, isLoading, dataTestId, sx, ...rest }) => (
<HiddenComponent key={label} hidden={hidden || false}>
<Button
size="medium"
sx={{
fontWeight: 400,
height: "fit-content",
...sx,
}}
{...rest}
data-testid={dataTestId}
endIcon={
isLoading ? (
<CircularProgress
size="20px"
sx={{
color: palette.neutral.black,
opacity: "1 !important",
}}
/>
) : undefined
}
>
{label}
</Button>
</HiddenComponent>
),
)}
</Container>
</FadeUpWrapper>
);
};
const Container = styled(Stack, {
shouldForwardProp: (prop) => prop !== "fullWidth",
})<{ fullWidth: boolean }>(({ fullWidth }) => ({
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-end",
gap: "16px",
...(fullWidth && {
flexDirection: "column-reverse",
alignItems: "stretch",
}),
}));
|