97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
import throttle from "lodash/throttle";
|
|
import { useCallback } from "react";
|
|
import { StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
|
|
import { GenericActionPayload } from "../../App/common/actions/GenericAction";
|
|
import { CtaData } from "../../App/common/interface";
|
|
import { TitleWithAssetsWidgetData } from "../../App/common/interface/widgets/widgetData/TitleWithAssetsWidgetData";
|
|
import Colors from "../../assets/colors/colors";
|
|
import { StyledImage } from "../StyledImage";
|
|
import { StyledLottie } from "./styled-lottie/StyledLottie";
|
|
import { StyledText } from "./styled-text/StyledText";
|
|
|
|
const TitleWithAssetsWidget = ({
|
|
widgetData,
|
|
widgetStyle,
|
|
handleActions,
|
|
widgetIndex,
|
|
handleClick,
|
|
}: {
|
|
widgetData: TitleWithAssetsWidgetData;
|
|
widgetStyle: ViewStyle;
|
|
handleActions: (
|
|
value?: any | undefined | null,
|
|
actionPayload?: GenericActionPayload,
|
|
) => void;
|
|
widgetIndex?: number;
|
|
handleClick?: (ctaData: CtaData) => void;
|
|
}) => {
|
|
const throttledHandleActions = useCallback(
|
|
throttle(() => handleActions(null, widgetData?.actions), 700, {
|
|
leading: true,
|
|
trailing: false,
|
|
}),
|
|
[widgetData],
|
|
);
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
const { cta, actions } = widgetData || {};
|
|
if (actions && throttledHandleActions) {
|
|
throttledHandleActions();
|
|
} else if (cta && handleClick) {
|
|
handleClick(cta);
|
|
}
|
|
}}
|
|
activeOpacity={1}
|
|
>
|
|
<View
|
|
style={
|
|
widgetData?.titleStyle ? widgetData?.titleStyle : styles.container
|
|
}
|
|
>
|
|
{widgetData?.leftIcon && (
|
|
<View>
|
|
<StyledImage imageFieldData={widgetData?.leftIcon} />
|
|
</View>
|
|
)}
|
|
{widgetData?.leftLottie && (
|
|
<View>
|
|
<StyledLottie lottieFieldData={widgetData?.leftLottie} />
|
|
</View>
|
|
)}
|
|
{widgetData?.title && (
|
|
<View>
|
|
<StyledText textFieldData={widgetData?.title} />
|
|
</View>
|
|
)}
|
|
{widgetData?.rightIcon && (
|
|
<View>
|
|
<StyledImage imageFieldData={widgetData?.rightIcon} />
|
|
</View>
|
|
)}
|
|
{widgetData?.rightLottie && (
|
|
<View>
|
|
<StyledLottie lottieFieldData={widgetData?.rightLottie} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: Colors.hawkesBlue,
|
|
borderRadius: 32,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 9,
|
|
backgroundColor: Colors.powderBlue,
|
|
},
|
|
});
|
|
|
|
export default TitleWithAssetsWidget;
|