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 | 263x 263x | import { IColumn, TColumnType } from "@common/Campaigns/campaigns.types";
import { Stack } from "@mui/material";
import { SpringValue, animated } from "react-spring";
import { TextSkeleton, ListItemTitle } from "./atoms";
type ListItemSkeletonProps = {
height: SpringValue<number>;
columns: IColumn[];
rowHeight: number;
listSkeletons?: any;
};
const ListItemSkeleton = ({
height,
columns,
rowHeight,
listSkeletons,
}: ListItemSkeletonProps) => {
const l = listSkeletons ?? ListSkeletons;
return (
<animated.div style={{ height }}>
<Stack
direction="row"
height={rowHeight}
alignItems="stretch"
padding="0px 4px"
data-testid="skeleton-item"
>
{columns.map((column, index) => {
const { columnWidth, type } = column || {};
return (
<Stack
key={index}
direction="row"
alignItems="center"
justifyContent="stretch"
width={
typeof columnWidth === "number"
? `${columnWidth * 100}%`
: "25%"
}
gap={1}
sx={{
paddingInline: index !== 0 ? "8px" : 0,
}}
>
{l[type || "text"]}
</Stack>
);
})}
</Stack>
</animated.div>
);
};
const ListSkeletons: Record<TColumnType, JSX.Element> = {
text: <TextSkeleton />,
title: <ListItemTitle />,
};
export default ListItemSkeleton;
|