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 | 30x 15x 15x 15x 15x | import NiceModal, { useModal } from "@ebay/nice-modal-react";
import GiveBaseModal from "@shared/modals/GiveBaseModal";
import PublicUrlShare from "./PublicURLShare";
import { capitalizeFirstLetter } from "@utils/index";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
/**
* The Share modal (PayBuilder 032-b AC003 / frames 7397-80460 & 7397-80680) —
* built on the rebranded `GiveBaseModal` shell: in-flow header with a plain
* GiveText title and ghost close button, desktop dialog / mobile full-width
* bottom sheet, both hugging their content.
*/
const PublicURLShareModal = NiceModal.create(
({
idFromProps,
typeFromProps,
}: {
idFromProps?: string;
typeFromProps?: string;
}) => {
const modal = useModal();
const { isMobileView } = useCustomThemeV2();
const handleClose = () => modal.remove();
return (
<GiveBaseModal
open={modal.visible}
onClose={handleClose}
title={`Share ${capitalizeFirstLetter(typeFromProps || "product")}`}
width={isMobileView ? "100%" : "560px"}
showFooter={false}
customHeaderHeight="auto"
customContentPadding="20px"
// The legacy V1 theme's MuiDialog override (theme/components/dialog.tsx)
// stretches every dialog to height:100% and pins it to flex-start under
// 600px; `&&` outranks it so the sheet hugs its content at the bottom.
customDialogStyle={
isMobileView
? {
"&& .MuiDialog-container": { alignItems: "flex-end" },
"&& .MuiDialog-paper": { height: "auto" },
}
: undefined
}
>
<PublicUrlShare
variant="styless"
handleClose={handleClose}
idFromProps={idFromProps}
typeFromProps={typeFromProps}
/>
</GiveBaseModal>
);
},
);
export default PublicURLShareModal;
|