Files
super-app/components/widgets/title-with-column-widget/TitleWithColumnWidget.tsx
Prajjaval Verma 4db9ca09cd TP-83691 | Benefit Screen Final (#12582)
Co-authored-by: Kshitij Pramod Ghongadi <kshitij.pramod@navi.com>
2024-10-09 09:16:26 +00:00

81 lines
2.4 KiB
TypeScript

import { View, ViewStyle } from "react-native";
import { commonStyles } from "../../../App/Container/Navi-Insurance/Styles";
import { GenericActionPayload } from "../../../App/common/actions/GenericAction";
import { CtaData } from "../../../App/common/interface";
import {
ImageFieldData,
TextFieldData,
} from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
import { TitleWithColumnWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWithColumnWidgetData";
import { StyledImage } from "../../StyledImage";
import { StyledText } from "../styled-text/StyledText";
import { styles } from "./TitleWithColumnWidgetStyle";
const TitleWithColumnWidget = ({
widgetData,
widgetStyle,
handleActions,
handleClick,
widgetIndex,
}: {
widgetData: TitleWithColumnWidgetData;
widgetStyle: ViewStyle;
handleActions: (
value?: any | undefined | null,
screenActionPayload?: GenericActionPayload,
) => void;
handleClick?: (cta: CtaData) => void;
widgetIndex: number;
}) => {
const ColumnItem = ({
imageData,
title,
subtitle,
}: {
imageData?: ImageFieldData;
title?: TextFieldData;
subtitle?: TextFieldData;
}) => {
return (
<View style={styles.columnItem}>
{imageData?.url && <StyledImage imageFieldData={imageData} />}
{imageData?.url && title?.text && (
<View style={commonStyles.verticalSpacer16} />
)}
{title?.text && <StyledText textFieldData={title} />}
{title?.text && subtitle?.text && (
<View style={commonStyles.verticalSpacer4} />
)}
{subtitle?.text && <StyledText textFieldData={subtitle} />}
</View>
);
};
return (
<View style={styles.container}>
<View style={styles.columnContainer}>
{widgetData.title?.text && (
<StyledText textFieldData={widgetData.title} />
)}
{widgetData.title?.text && (
<View style={commonStyles.verticalSpacer24} />
)}
<View style={styles.rowContainer}>
<ColumnItem
imageData={widgetData.leftIcon}
title={widgetData.leftTitle}
subtitle={widgetData.leftSubtitle}
/>
<ColumnItem
imageData={widgetData.rightIcon}
title={widgetData.rightTitle}
subtitle={widgetData.rightSubtitle}
/>
</View>
</View>
</View>
);
};
export default TitleWithColumnWidget;