72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { useCallback } from "react";
|
|
import { FlatList, TouchableOpacity, View } from "react-native";
|
|
import {
|
|
ListItemWidgetProps,
|
|
TitleWithAssetsWidgetData,
|
|
} from "../../../App/common/interface/widgets/widgetData";
|
|
import { createThrottledHandler } from "../../../App/common/utilities/ThrottleUtil";
|
|
import { StyledImage } from "../../StyledImage";
|
|
import { StyledLottie } from "../styled-lottie/StyledLottie";
|
|
import { StyledText } from "../styled-text/StyledText";
|
|
import styles from "./ListItemWidgetStyles";
|
|
|
|
const ListItemWidget = ({
|
|
widgetData,
|
|
widgetStyle,
|
|
handleActions,
|
|
widgetIndex,
|
|
handleClick,
|
|
}: ListItemWidgetProps) => {
|
|
const throttledHandleActions = useCallback(
|
|
createThrottledHandler(action => handleActions(null, action), 700),
|
|
[widgetData],
|
|
);
|
|
|
|
return (
|
|
<FlatList
|
|
data={widgetData.listItems}
|
|
renderItem={({ item }: { item: TitleWithAssetsWidgetData }) => (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
const { cta, actions } = item || {};
|
|
if (actions) {
|
|
throttledHandleActions(actions);
|
|
} else if (cta && handleClick) {
|
|
handleClick(cta);
|
|
}
|
|
}}
|
|
activeOpacity={1}
|
|
>
|
|
<View style={styles.container}>
|
|
<View style={styles.rowContainer}>
|
|
{item?.leftIcon && (
|
|
<StyledImage imageFieldData={item?.leftIcon} />
|
|
)}
|
|
{item?.leftLottie && (
|
|
<StyledLottie lottieFieldData={item?.leftLottie} />
|
|
)}
|
|
<View style={styles.titleContainer}>
|
|
{item?.title && <StyledText textFieldData={item?.title} />}
|
|
{item?.subtitle && (
|
|
<StyledText textFieldData={item?.subtitle} />
|
|
)}
|
|
</View>
|
|
</View>
|
|
{item?.rightIcon && (
|
|
<StyledImage imageFieldData={item?.rightIcon} />
|
|
)}
|
|
{item?.rightLottie && (
|
|
<StyledLottie lottieFieldData={item?.rightLottie} />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
keyExtractor={(item, index) => item?.id || index.toString()}
|
|
ItemSeparatorComponent={() => <View style={styles.separator} />}
|
|
contentContainerStyle={widgetData?.listStyle}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ListItemWidget;
|