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 | 264x 13690x 74040x 59090x 264x | import { ColumnBaseType, TableColumnTypeCustom } from "@common/Table/helpers";
import { ColumnBaseType as ColumnBaseTypeV2 } from "componentsV2/Table/Table.types";
import { Stack } from "@mui/material";
import { SpringValue, animated } from "react-spring";
import {
ActionsSkeleton,
AmountSkeleton,
ApiKeyMobileSkeleton,
AssigneeSkeleton,
CustomerActionsSkeleton,
CustomerProfileSkeleton,
HalfTextSkeleton,
InOutSkeleton,
MemberSkeleton,
MerchantFirstCell,
PhaseSkeleton,
ProcessingMerchantSkeleton,
ProductTitleCell,
RiskLevelCell,
TagSkeleton,
TagSkeletonRound,
TextSkeleton,
TransactionFirst,
DoubleRowText,
AvatarWithName
} from "./atoms";
import { ElementType } from "react";
type TableRowSkeletonProps = {
height?: SpringValue<number>;
columns: TableColumnTypeCustom[];
rowHeight: number | string;
Wrapper?: ElementType;
sx?: any;
};
const TableRowSkeleton = ({
height,
columns,
rowHeight,
Wrapper = animated.tr,
sx = {},
}: TableRowSkeletonProps) => {
return (
<Wrapper style={{ height }}>
{columns?.map((column, index) => {
if (column?.hideColumn || column.columnType === "empty") return null;
return (
<td key={index}>
<Stack
direction="row"
alignItems="center"
justifyContent="stretch"
gap={1}
height={rowHeight}
sx={{
paddingInline: sx?.paddingInline ?? "20px 16px",
}}
>
{TableSkeletons[column.columnType || "text"]}
</Stack>
</td>
);
})}
</Wrapper>
);
};
//TODO: needs refactoring for rebranded and unrebranded flow
export const TableSkeletons: Record<
ColumnBaseType | ColumnBaseTypeV2,
JSX.Element | null
> = {
text: <TextSkeleton />,
"half-text": <HalfTextSkeleton />,
"merchant-first": <MerchantFirstCell />,
"product-title": <ProductTitleCell />,
assignment: <AssigneeSkeleton />,
phase: <PhaseSkeleton />,
"in-out": <InOutSkeleton />,
"processing-merchant": <ProcessingMerchantSkeleton />,
status: <TagSkeleton />,
"status-round": <TagSkeletonRound />,
"transaction-first": <TransactionFirst />,
member: <MemberSkeleton />,
actions: <ActionsSkeleton />,
"merchant-last": <TextSkeleton width="35px" />,
empty: null,
invisible: <div style={{ visibility: "hidden" }} />,
"risk-level": <RiskLevelCell />,
"customer-profile": <CustomerProfileSkeleton />,
amount: <AmountSkeleton />,
"customer-actions": <CustomerActionsSkeleton />,
"apiKey-mobile": <ApiKeyMobileSkeleton />,
"double-row": <DoubleRowText />,
"avatar-name":<AvatarWithName/>
};
export default TableRowSkeleton;
|