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 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 10x 16x 16x 10x 16x 10x 42x 16x 16x 10x 6x 16x 16x 16x | import { SignOutIcon } from "@phosphor-icons/react";
import { Grid, Box } from "@mui/material";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveText from "@shared/Text/GiveText";
import { styled, useAppTheme } from "@theme/v2/Provider";
import { StepperProgress } from "./MobileStepper/StepperProgress";
import { GroupedSteps } from "../types";
import { useDrawerAccountWithUI } from "../container/DrawerAccount";
import React from "react";
interface Props {
title: string;
groupedSteps: GroupedSteps;
openLogoutModal: () => void;
isIntroModalEnabled: boolean;
isFormDirty?: boolean;
}
export const MobileHeader = ({
title,
openLogoutModal,
groupedSteps,
isIntroModalEnabled,
isFormDirty,
}: Props) => {
const onChooseAccount = (cb: () => void) => {
if (isFormDirty) {
if (window.confirm("Changes you made may not be saved. Confirm?")) {
cb();
}
} else {
cb();
}
return false;
};
const { hasManyAccounts, DrawerAccountComponent } = useDrawerAccountWithUI({
onChooseAccount,
hideAvatar: true,
baseRender: () => <></>,
});
return (
<Stickyheader isIntroModalEnabled={isIntroModalEnabled}>
<Grid
container
alignItems="flex-start"
justifyContent="space-between"
pb={isIntroModalEnabled ? 0 : "16px"}
>
<>
<DrawerWrapper isManyAccounts={hasManyAccounts}>
<DrawerAccountComponent />
</DrawerWrapper>
{!hasManyAccounts && (
<Title isIntro={isIntroModalEnabled} title={title} />
)}
</>
<GiveIconButton
Icon={SignOutIcon}
size="large"
variant="filled"
onClick={openLogoutModal}
/>
</Grid>
{hasManyAccounts && (
<Box pb="16px">
<Title isIntro={isIntroModalEnabled} title={title} />
</Box>
)}
{!isIntroModalEnabled && <StepperProgress groupedSteps={groupedSteps} />}
</Stickyheader>
);
};
const Stickyheader = styled(Box, {
shouldForwardProp: (prop) => prop !== "isIntroModalEnabled",
})<{
isIntroModalEnabled: boolean;
}>(({ isIntroModalEnabled }) => ({
position: "sticky",
top: 0,
width: "100%",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
padding: isIntroModalEnabled ? "16px 20px 0 20px" : "16px 20px 24px 20px",
}));
function Title({ title, isIntro }: { title: string; isIntro: boolean }) {
if (isIntro) {
return <GiveText variant="bodyM">Introduction</GiveText>;
}
return <GiveText fontSize="16px">{title}</GiveText>;
}
function DrawerWrapper({
isManyAccounts,
children,
}: {
isManyAccounts: boolean;
children: React.ReactElement;
}) {
const { palette } = useAppTheme();
Iif (isManyAccounts)
return (
<Box
display="flex"
alignItems="center"
mb="8px"
height="44px"
sx={{
"& svg": {
fill: palette.text.secondary,
width: "16px",
height: "16px",
},
}}
>
{children}
</Box>
);
return <>{children}</>;
}
|