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 | 276x 229x 83x 2x 2x 229x 156x 83x 83x 276x 276x | import React from "react";
import { Box, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import GiveButton from "@shared/Button/GiveButton";
import { styled } from "@theme/v2/Provider";
import { GiveEmptyStateType, TEmptyStateAction } from "./types";
import { isEmpty } from "lodash";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
const GiveEmptyState = ({
title,
action,
secondaryAction,
sx,
Icon,
iconContainerSx,
actionTooltipProps,
dataTestId,
}: GiveEmptyStateType) => {
const handleClick =
(target?: TEmptyStateAction) =>
(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e?.stopPropagation();
target?.handleAction && target?.handleAction();
};
return (
<Container data-testid={dataTestId} sx={sx}>
<IconContainer sx={iconContainerSx}>{Icon}</IconContainer>
<Stack
direction="column"
alignItems="center"
width="100%"
zIndex={2}
className="empty_text"
>
{title.main && (
<GiveText
sx={{
whiteSpace: "normal",
wordBreak: "break-word",
}}
variant="h6"
textAlign="center"
>
{title.main}
</GiveText>
)}
<GiveText
variant={isEmpty(title?.main) ? "bodyM" : "bodyS"}
color="secondary"
textAlign="center"
>
{title.secondary}
</GiveText>
</Stack>
{action && (
<Stack direction="row" gap="12px" alignItems="center">
{[action, secondaryAction].map((target) => {
if (!target) return null;
// A tooltip per button, not one around the pair: a two-action state
// can gate its two buttons differently (the Host tab's Assign and
// Invite do), so a shared message would be wrong for whichever it
// does not describe. `actionTooltipProps` stays the fallback, which
// is what a single-action state passes.
const tooltipProps = target.tooltipProps || actionTooltipProps;
return (
<GiveTooltip
key={target.label}
// Default off, as before: a state that wants the tooltip says
// so explicitly rather than getting one on an enabled button.
disableHoverListener={
tooltipProps?.disableHoverListener ?? true
}
title={tooltipProps?.title || ""}
color={tooltipProps?.color || "default"}
{...tooltipProps}
>
<GiveButton
variant={target.variant || "outline"}
label={target.label}
disabled={target.disabled}
onClick={handleClick(target)}
size="large"
startIcon={target.startIcon}
sx={{
borderRadius: "40px",
whiteSpace: "nowrap",
}}
data-testid={`empty-state-button-${target.label}`}
/>
</GiveTooltip>
);
})}
</Stack>
)}
</Container>
);
};
const Container = styled(Stack)(() => ({
flexDirection: "column",
gap: "20px",
alignItems: "center",
justifyContent: "center",
position: "relative",
overflow: "hidden",
userSelect: "none",
width: "100%",
height: "100%",
}));
const IconContainer = styled(Box)(({ theme }) => ({
height: 68,
width: 68,
borderRadius: 64,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: theme.palette.primitive?.transparent["darken-5"],
}));
export default React.memo(GiveEmptyState);
|