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 | 158x 899x 1751x 158x 1773x 1751x 158x 765x 765x 765x 765x 765x 765x 765x 765x 765x 765x 158x 1x | import { Stack, SxProps } from "@mui/material";
import { HourglassIcon } from "@phosphor-icons/react";
import GiveEmptyState from "@shared/EmptyState/GiveEmptyState";
import { styled } from "@theme/v2/Provider";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
import React, { useLayoutEffect, useRef, useState } from "react";
import useMergeRefs from "@hooks/useMergeRefs";
export interface IButtonComponent {
conversations: JSX.Element;
changelog: JSX.Element;
}
export type TRenderButton = (el: keyof IButtonComponent) => JSX.Element;
export const SidePanelButton = ({
renderButton,
el,
}: {
renderButton: TRenderButton;
el: keyof IButtonComponent;
}) => {
return renderButton(el);
};
const SidePanelContainerWrapperStyled = styled(Stack)(({ theme }) => ({
width: "100%",
alignItems: "stretch",
flexDirection: "column",
justifyContent: "flex-start",
scrollBehavior: "smooth",
[theme.breakpoints.up("v2_sm")]: {
overflowX: "hidden",
},
}));
export const SidePanelContainerWrapper = (props: any) => {
const bannerOffset = useBannerOffset(true);
return (
<SidePanelContainerWrapperStyled
sx={{
height: bannerOffset ? `calc(100vh - ${bannerOffset}px)` : "100vh",
}}
{...props}
/>
);
};
export const SidePanelBodyWrapper = React.forwardRef<
HTMLDivElement,
{
children: React.ReactNode;
sx?: SxProps;
}
>(({ children, sx }, forwardedRef) => {
const [scrollbarWidth, setScrollbarWidth] = useState(0);
const ref = useRef<HTMLDivElement | null>(null);
// transaction panels for example dont have padding in scrollable parent so adding it will add up an extra space on the right
const hasPadding =
sx && typeof sx === "object" && !Array.isArray(sx) && "padding" in sx;
useLayoutEffect(() => {
const el = ref.current;
Iif (!el) return;
const width = el.offsetWidth - el.clientWidth;
setScrollbarWidth(width);
}, [children]);
// Merge refs using useMergeRefs hook
const mergedRef = useMergeRefs(ref, forwardedRef);
return (
<Stack
ref={mergedRef}
sx={{
overflowY: "auto",
"::-webkit-scrollbar ": {
width: "10px",
},
...sx,
paddingRight: Boolean(hasPadding)
? `calc(20px - ${scrollbarWidth}px)`
: 0,
}}
>
{children}
</Stack>
);
});
SidePanelBodyWrapper.displayName = "SidePanelBodyWrapper";
export function ErrorFallback() {
return (
<GiveEmptyState
title={{
main: "Technical Difficulties",
secondary:
"Temporary issue. Reload the page, and if it doesn’t work, try again in a few minutes",
}}
Icon={<HourglassIcon size={28} />}
action={{
label: "Reload Page",
handleAction: () => window.location.reload(),
}}
sx={{ padding: "0px 20px" }}
/>
);
}
|