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 | 16x 1295x 1295x 16x 10376x 1295x | import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { FIELD_DISABLED_TOOLTIP } from "../consts";
import { styled } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { Box } from "@mui/material";
interface CheckoutTooltipProps {
disabled?: boolean;
children: any;
desktopMarginBottom?: string;
fullWidth?: boolean;
}
const WithCheckoutTooltip = ({
disabled,
children,
desktopMarginBottom,
fullWidth = true,
}: CheckoutTooltipProps) => {
const { isMobileView } = useCustomThemeV2();
return (
<StyledCheckoutTooltip
color="default"
title={FIELD_DISABLED_TOOLTIP}
disableHoverListener={!disabled}
placement={isMobileView ? "bottom" : "top-start"}
isMobile={isMobileView}
desktopMarginBottom={desktopMarginBottom}
PopperProps={{ //style to prevent tooltip overflow from the scroll container
disablePortal: true,
modifiers: [
{
name: "eventListeners",
options: { scroll: false },
},
{
name: "preventOverflow",
options: {
boundary: "clippingParents",
padding: 8,
},
},
],
}}
>
<Box width={fullWidth ? "100%" : "fit-content"} display="flex">
{children}
</Box>
</StyledCheckoutTooltip>
);
};
export default WithCheckoutTooltip;
const StyledCheckoutTooltip = styled(GiveTooltip, {
shouldForwardProp: (prop) =>
prop !== "isMobile" && prop !== "desktopMarginBottom",
})<{ isMobile?: boolean; desktopMarginBottom?: string }>(
({ isMobile, desktopMarginBottom }) => ({
"&[data-popper-placement*='top'] .MuiTooltip-tooltip": {
marginBottom: isMobile
? "20px"
: `${desktopMarginBottom || "-28px"} !important`,
width: "205px !important",
},
}),
);
|