109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
import { TouchableOpacity, View, ViewStyle } from "react-native";
|
|
import {
|
|
Strip,
|
|
TitleWithAssetBackgroundData,
|
|
} from "../../../App/common/interface/widgets/widgetData/TitleWithAssetBackground";
|
|
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
|
|
import { CtaData } from "../../../App/common/interface";
|
|
import { StyledImage } from "../../StyledImage";
|
|
import { StyledText } from "../styled-text/StyledText";
|
|
import CtaButton from "../../reusable/cta-button/CtaButton";
|
|
import { ImageFieldData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
|
|
import { GradientText } from "../gradient-text/GradientText";
|
|
import { styles } from "./TitleWithAssetBackgroundStyle";
|
|
|
|
export const TitleWithAssetBackgroundWidget = ({
|
|
widgetData,
|
|
widgetStyle,
|
|
handleActions,
|
|
handleClick,
|
|
widgetIndex,
|
|
}: {
|
|
widgetData: TitleWithAssetBackgroundData;
|
|
widgetStyle: ViewStyle;
|
|
handleActions: (
|
|
value?: any | undefined | null,
|
|
screenActionPayload?: GenericActionPayload
|
|
) => void;
|
|
handleClick?: (cta: CtaData) => void;
|
|
widgetIndex: number;
|
|
}) => {
|
|
const Strip = ({ stripData }: { stripData: Strip }) => {
|
|
return (
|
|
<View style={styles.strip}>
|
|
<StripImage
|
|
image={stripData?.firstIcon}
|
|
imageStyle={styles.firstStripImage}
|
|
/>
|
|
<StripImage
|
|
image={stripData?.secondIcon}
|
|
imageStyle={styles.secondStripImage}
|
|
/>
|
|
{stripData.stripTitle && (
|
|
<View style={styles.stripTitle}>
|
|
<GradientText
|
|
textFieldData={stripData.stripTitle}
|
|
colorsArray={stripData.stripTitleGradient}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const StripImage = ({
|
|
image,
|
|
imageStyle,
|
|
}: {
|
|
image?: ImageFieldData;
|
|
imageStyle?: ViewStyle;
|
|
}) => {
|
|
return (
|
|
<View style={imageStyle}>
|
|
{image && <StyledImage imageFieldData={image} />}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{widgetData?.backgroundIcon && (
|
|
<StyledImage imageFieldData={widgetData?.backgroundIcon} />
|
|
)}
|
|
{widgetData?.title?.text && (
|
|
<View style={styles.title}>
|
|
<StyledText textFieldData={widgetData?.title} />
|
|
</View>
|
|
)}
|
|
{widgetData.middleStrip && (
|
|
<TouchableOpacity
|
|
style={styles.stripContainer}
|
|
onPress={() => {
|
|
handleClick &&
|
|
widgetData?.footerButton?.cta &&
|
|
handleClick(widgetData?.footerButton?.cta);
|
|
}}
|
|
activeOpacity={1}
|
|
>
|
|
<Strip stripData={widgetData?.middleStrip} />
|
|
</TouchableOpacity>
|
|
)}
|
|
{widgetData.footerButton && (
|
|
<CtaButton
|
|
style={styles.footer}
|
|
onPress={() => {
|
|
handleClick &&
|
|
widgetData?.footerButton?.cta &&
|
|
handleClick(widgetData?.footerButton?.cta);
|
|
}}
|
|
>
|
|
{widgetData.footerButton?.title?.text && (
|
|
<StyledText textFieldData={widgetData.footerButton?.title} />
|
|
)}
|
|
</CtaButton>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default TitleWithAssetBackgroundWidget; |