102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native";
|
|
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
|
|
import { CtaData } from "../../../App/common/interface";
|
|
import {
|
|
GridCardItemData,
|
|
GridWithCardWidgetData,
|
|
} from "../../../App/common/interface/widgets/widgetData/GridWithCardWidgetData";
|
|
import { StyledImage } from "../../StyledImage";
|
|
import TitleWidget from "../title-widget/TitleWidget";
|
|
import { StyledText } from "../styled-text/StyledText";
|
|
import styles from "./GridWithCardWidgetStyle";
|
|
|
|
const formatData = (
|
|
data: GridCardItemData[] | undefined,
|
|
numColumns: number
|
|
): GridCardItemData[] => {
|
|
if (!data || data.length === 0 || numColumns <= 0) return [];
|
|
|
|
const elementsInLastRow = data.length % numColumns;
|
|
|
|
// Ensure numColumns is a positive integer
|
|
if (elementsInLastRow === 0 || elementsInLastRow === numColumns) {
|
|
return data;
|
|
} else {
|
|
const fillCount = numColumns - elementsInLastRow;
|
|
const fillerData: GridCardItemData = {
|
|
id: undefined,
|
|
image: undefined,
|
|
title: undefined,
|
|
cardStyle: undefined,
|
|
};
|
|
const filledArray = Array(fillCount).fill(fillerData);
|
|
return [...data, ...filledArray];
|
|
}
|
|
};
|
|
|
|
|
|
const GridCardItemComponent = ({
|
|
cardItem,
|
|
handleClick,
|
|
}: {
|
|
cardItem: GridCardItemData | undefined;
|
|
handleClick?: (cta: CtaData) => void;
|
|
}) => {
|
|
if (cardItem?.title === undefined) {
|
|
return <View style={[styles.cardItem, styles.cardItemInvisible]} />;
|
|
} else {
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
onPress={() => {
|
|
handleClick && (cardItem?.cta) && handleClick(cardItem?.cta);
|
|
}}
|
|
style={[styles.cardItem, cardItem.cardStyle]}
|
|
>
|
|
{cardItem?.image && (
|
|
<StyledImage imageFieldData={cardItem?.image || undefined} />
|
|
)}
|
|
{cardItem?.title && (
|
|
<StyledText textFieldData={cardItem?.title || undefined} />
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
};
|
|
|
|
const GridWithCardWidget = ({
|
|
widgetData,
|
|
widgetStyle,
|
|
handleActions,
|
|
handleClick,
|
|
widgetIndex,
|
|
}: {
|
|
widgetData: GridWithCardWidgetData;
|
|
widgetStyle: ViewStyle;
|
|
handleActions: (screenActionPayload?: GenericActionPayload) => void;
|
|
handleClick?: (cta: CtaData) => void;
|
|
widgetIndex: number;
|
|
}) => {
|
|
return (
|
|
<View>
|
|
<TitleWidget
|
|
widgetData={widgetData}
|
|
widgetStyle={styles.rowContainer}
|
|
handleActions={handleActions}
|
|
widgetIndex={widgetIndex}
|
|
/>
|
|
<FlatList
|
|
style={styles.gridContainer}
|
|
data={formatData(widgetData.gridItems, widgetData.numColumns || 3)}
|
|
renderItem={({ item }) => (
|
|
<GridCardItemComponent cardItem={item} handleClick={handleClick} />
|
|
)}
|
|
keyExtractor={(item, index) => item.id || index.toString()}
|
|
numColumns={widgetData.numColumns || 3}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default GridWithCardWidget;
|