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 | import { TableRowProps } from "@mui/material";
import { ElementType } from "react";
import { useTrail, animated, SpringValue } from "react-spring";
import { getAnimationConfig } from "./config";
import { CARD_CONTENT_HEIGHT } from "@shared/constants";
type ItemComponent<T> = (
data: T,
index: number,
height: SpringValue<number>,
springProps?: any,
) => JSX.Element;
type Props<T> = {
items: T[];
renderKey: (data: T, index: number) => React.Key | null | undefined;
ItemComponent: ItemComponent<T>;
Wrapper?: ElementType;
height?: number;
rowProps?: (data: T) => TableRowProps;
};
const GiveAnimatedList = <T extends object | string>({
items,
renderKey,
ItemComponent,
Wrapper = animated.tr,
height = CARD_CONTENT_HEIGHT,
rowProps,
}: Props<T>) => {
const config = getAnimationConfig(height);
const trail = useTrail(items?.length, { ...config, immediate: true });
return (
<>
{trail?.map(({ height, ...rest }, index) => {
const data = items[index];
const key = renderKey(data, index);
const props = rowProps && rowProps(data);
return (
<Wrapper
key={key}
style={index < trail?.length ? rest : {}}
{...props}
>
{ItemComponent(data, index, height, rest)}
</Wrapper>
);
})}
</>
);
};
export default GiveAnimatedList;
|