96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import { StyleSheet, 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 { ComparisonWidgetData } from "../../App/common/interface/widgets/widgetData/ComparisonWidgetData";
|
|
import Colors from "../../assets/colors/colors";
|
|
import { StyledImage } from "../StyledImage";
|
|
import TitleWidget from "./title-widget/TitleWidget";
|
|
|
|
const ComparisonWidget = ({
|
|
widgetData,
|
|
widgetStyle,
|
|
handleActions,
|
|
widgetIndex,
|
|
handleClick,
|
|
}: {
|
|
widgetData: ComparisonWidgetData;
|
|
widgetStyle: ViewStyle;
|
|
handleActions: (screenActionPayload?: GenericActionPayload) => void;
|
|
widgetIndex: number;
|
|
handleClick?: (ctaData: CtaData) => void;
|
|
}) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.left_element}>
|
|
{widgetData.leftIcon && (
|
|
<StyledImage imageFieldData={widgetData?.leftIcon} />
|
|
)}
|
|
{widgetData.leftIcon && widgetData.leftTitle && (
|
|
<View style={{ width: 8 }} />
|
|
)}
|
|
{widgetData.leftTitle && (
|
|
<TitleWidget
|
|
widgetData={widgetData?.leftTitle}
|
|
widgetStyle={commonStyles.contentAlignLeft}
|
|
/>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.divider}>
|
|
{widgetData.divider && (
|
|
<StyledImage imageFieldData={widgetData?.divider} />
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.right_element}>
|
|
{widgetData.rightIcon && (
|
|
<StyledImage imageFieldData={widgetData?.rightIcon} />
|
|
)}
|
|
{widgetData.rightIcon && widgetData.rightTitle && (
|
|
<View style={{ width: 8 }} />
|
|
)}
|
|
{widgetData.rightTitle && (
|
|
<TitleWidget
|
|
widgetData={widgetData?.rightTitle}
|
|
widgetStyle={commonStyles.contentAlignLeft}
|
|
/>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: Colors.lightGray,
|
|
borderRadius: 4,
|
|
padding: 16,
|
|
backgroundColor: "white",
|
|
},
|
|
left_element: {
|
|
flex: 0.4,
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
},
|
|
divider: {
|
|
flex: 0.2,
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
},
|
|
right_element: {
|
|
flex: 0.4,
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
alignItems: "center",
|
|
},
|
|
});
|
|
|
|
export default ComparisonWidget;
|