From 5d09383085d244f824d87edf986e516d920fd911 Mon Sep 17 00:00:00 2001 From: Somarapu Vamshi Date: Tue, 24 Sep 2024 16:03:37 +0530 Subject: [PATCH] TP-84819|Understand navi widget and ItemSeparator addition (#12715) --- App/common/constants/StringConstant.ts | 11 +++ .../interface/components/ItemSeparatorData.ts | 16 +++++ .../widgets/widgetData/TitleWidgetData.ts | 1 + .../widgetData/TitleWithListWidgetData.ts | 7 +- .../TitleWithListBottomSheet.tsx | 2 +- .../TitleWithStepsBottomSheet.tsx | 2 +- components/reusable/index.ts | 1 + .../reusable/item-separator/ItemSeparator.tsx | 68 +++++++++++++++++++ .../dashed-separator/DashedSeparator.tsx | 24 +++++-- .../dashed-separator/DashedSeparatorStyle.ts | 6 +- .../solid-separator/SolidSeparator.tsx | 10 +++ .../solid-separator/SolidSeparatorStyle.ts | 11 +++ .../FooterWithCardWidget.tsx | 2 +- .../widgets/title-widget/TitleWidget.tsx | 9 ++- .../TitleWithListWidget.tsx | 47 ++++++++++--- 15 files changed, 191 insertions(+), 26 deletions(-) create mode 100644 App/common/interface/components/ItemSeparatorData.ts create mode 100644 components/reusable/item-separator/ItemSeparator.tsx rename components/reusable/{ => item-separator}/dashed-separator/DashedSeparator.tsx (70%) rename components/reusable/{ => item-separator}/dashed-separator/DashedSeparatorStyle.ts (87%) create mode 100644 components/reusable/item-separator/solid-separator/SolidSeparator.tsx create mode 100644 components/reusable/item-separator/solid-separator/SolidSeparatorStyle.ts diff --git a/App/common/constants/StringConstant.ts b/App/common/constants/StringConstant.ts index 12f37017fe..265954f6e1 100644 --- a/App/common/constants/StringConstant.ts +++ b/App/common/constants/StringConstant.ts @@ -45,3 +45,14 @@ export const QUOTE_ID = "quoteId"; export const BUILD_CONFIG_DETAILS = "BUILD_CONFIG_DETAILS"; export const SPACE_UNICODE = "\u00A0"; export const REACT_NATIVE = "rn"; + +export enum SeparatorType { + DASHED = "dashed", + SOLID = "solid", + GRADIENT = "gradient", +} + +export enum SeparatorOrientationType { + VERTICAL = "vertical", + HORIZONTAL = "horizontal", +} diff --git a/App/common/interface/components/ItemSeparatorData.ts b/App/common/interface/components/ItemSeparatorData.ts new file mode 100644 index 0000000000..06865353c9 --- /dev/null +++ b/App/common/interface/components/ItemSeparatorData.ts @@ -0,0 +1,16 @@ +import { ViewStyle } from "react-native"; +import { SeparatorOrientationType, SeparatorType } from "../../constants"; + +export interface ItemSeparatorData { + separatorType: SeparatorType; + separatorStyle?: ViewStyle; + orientationType: SeparatorOrientationType; + gradientData?: { + height: number; + colorsArray: string[]; + }; +} + +export interface ItemSeparatorProps { + separatorData: ItemSeparatorData; +} diff --git a/App/common/interface/widgets/widgetData/TitleWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWidgetData.ts index e654d46d23..5549ce54a2 100644 --- a/App/common/interface/widgets/widgetData/TitleWidgetData.ts +++ b/App/common/interface/widgets/widgetData/TitleWidgetData.ts @@ -8,6 +8,7 @@ export interface TitleWidgetData extends GenericWidgetData { subtitle?: TextFieldData; rightTitle?: TextFieldData; cta?: CtaData; + actions?: GenericActionPayload; } export interface TextFieldData { diff --git a/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts b/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts index 873f5e28de..af16dc30a5 100644 --- a/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts +++ b/App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts @@ -1,5 +1,7 @@ import { ViewStyle } from "react-native"; -import { AnalyticsEvent } from "../.."; +import { AnalyticsEvent, CtaData } from "../.."; +import { GenericActionPayload } from "../../../actions/GenericAction"; +import { ItemSeparatorData } from "../../components/ItemSeparatorData"; import { TooltipData } from "../../components/TooltipData"; import { GenericWidgetData } from "../Widget"; import { TextFieldData } from "./TitleWidgetData"; @@ -11,6 +13,7 @@ export interface TitleWithListWidgetData extends GenericWidgetData { listFooter?: ListItem; listStyle?: ViewStyle; tooltip?: TooltipData; + separatorData?: ItemSeparatorData; } export interface ListItem extends GenericWidgetData { @@ -19,4 +22,6 @@ export interface ListItem extends GenericWidgetData { rightTitle?: TextFieldData; itemStyle?: ViewStyle; onViewEvent?: AnalyticsEvent; + actions?: GenericActionPayload; + cta?: CtaData; } diff --git a/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx b/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx index 33a149d09c..a4bb3ef466 100644 --- a/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx +++ b/components/bottomsheet/title-with-list-bottom-sheet/TitleWithListBottomSheet.tsx @@ -9,7 +9,7 @@ import { } from "../../../App/common/interface/widgets/modalData/PremiumDetailsBottomSheetData"; import { StyledImage } from "../../StyledImage"; import CtaButton from "../../reusable/cta-button/CtaButton"; -import { HorizontalDashedSeparator } from "../../reusable/dashed-separator/DashedSeparator"; +import { HorizontalDashedSeparator } from "../../reusable/item-separator/dashed-separator/DashedSeparator"; import { CardComponent } from "../../widgets/footer-with-card-widget/FooterWithCardWidget"; import { StyledText } from "../../widgets/styled-text/StyledText"; import TitleWidget from "../../widgets/title-widget/TitleWidget"; diff --git a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx index 0c122fc9b3..cacd893638 100644 --- a/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx +++ b/components/bottomsheet/title-with-steps-bottom-sheet/TitleWithStepsBottomSheet.tsx @@ -11,7 +11,7 @@ import { import { ButtonData } from "../../../App/common/interface/widgets/widgetData/FooterWithCardWidgetData"; import { StyledImage } from "../../StyledImage"; import CtaButton from "../../reusable/cta-button/CtaButton"; -import { VerticalDashedSeparator } from "../../reusable/dashed-separator/DashedSeparator"; +import { VerticalDashedSeparator } from "../../reusable/item-separator/dashed-separator/DashedSeparator"; import { StyledText } from "../../widgets/styled-text/StyledText"; import styles from "./TitleWithStepsBottomSheetStyle"; diff --git a/components/reusable/index.ts b/components/reusable/index.ts index 30ebf6e26e..1f43eb7cde 100644 --- a/components/reusable/index.ts +++ b/components/reusable/index.ts @@ -1 +1,2 @@ export { default as SelectButton } from "./select-button/SelectButton"; +export { default as ItemSeparator } from "./item-separator/ItemSeparator"; diff --git a/components/reusable/item-separator/ItemSeparator.tsx b/components/reusable/item-separator/ItemSeparator.tsx new file mode 100644 index 0000000000..cec71fa8e6 --- /dev/null +++ b/components/reusable/item-separator/ItemSeparator.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import { + SeparatorOrientationType, + SeparatorType, +} from "../../../App/common/constants"; +import { ItemSeparatorProps } from "../../../App/common/interface/components/ItemSeparatorData"; +import { + GradientHorizontalDashedSeparator, + HorizontalDashedSeparator, + VerticalDashedSeparator, +} from "./dashed-separator/DashedSeparator"; +import { HorizontalSolidSeparator } from "./solid-separator/SolidSeparator"; + +const getHorizontalSeparator = ({ + separatorData: { separatorType, separatorStyle, gradientData }, +}: ItemSeparatorProps) => { + switch (separatorType) { + case SeparatorType.DASHED: + return ; + + case SeparatorType.SOLID: + return ; + + case SeparatorType.GRADIENT: { + if (!gradientData) return null; + return ( + + ); + } + default: + return null; + } +}; + +const getVerticalSeparator = ({ + separatorData: { separatorType, separatorStyle }, +}: ItemSeparatorProps) => { + switch (separatorType) { + case SeparatorType.DASHED: + return ; + + default: + return null; + } +}; + +const renderSeparator = (props: ItemSeparatorProps) => { + const { orientationType } = props.separatorData || {}; + switch (orientationType) { + case SeparatorOrientationType.HORIZONTAL: + return getHorizontalSeparator(props); + + case SeparatorOrientationType.VERTICAL: + return getVerticalSeparator(props); + + default: + return null; + } +}; + +const ItemSeparator = (props: ItemSeparatorProps) => { + return renderSeparator(props); +}; + +export default ItemSeparator; diff --git a/components/reusable/dashed-separator/DashedSeparator.tsx b/components/reusable/item-separator/dashed-separator/DashedSeparator.tsx similarity index 70% rename from components/reusable/dashed-separator/DashedSeparator.tsx rename to components/reusable/item-separator/dashed-separator/DashedSeparator.tsx index 0e6dabdb08..ce1ad8715b 100644 --- a/components/reusable/dashed-separator/DashedSeparator.tsx +++ b/components/reusable/item-separator/dashed-separator/DashedSeparator.tsx @@ -1,13 +1,21 @@ import { View, ViewStyle } from "react-native"; import styles from "./DashedSeparatorStyle"; -import { NaviLinearGradient } from "../../../App/common/hooks/useGradient"; -import { Orientation } from "../../../App/common/constants/StringConstant"; +import { Orientation } from "../../../../App/common/constants"; +import { NaviLinearGradient } from "../../../../App/common/hooks/useGradient"; -export const HorizontalDashedSeparator = ({ style }: { style: ViewStyle }) => { +export const HorizontalDashedSeparator = ({ + style, +}: { + style: ViewStyle | undefined; +}) => { return ; }; -export const VerticalDashedSeparator = ({ style }: { style: ViewStyle }) => { +export const VerticalDashedSeparator = ({ + style, +}: { + style: ViewStyle | undefined; +}) => { return ; }; @@ -58,9 +66,11 @@ export const CustomHorizontalDashedSeparator = ({ key={`dash_${index}`} style={{ width: space ? space : styles.customGradient.width, - height: height? height : styles.customGradient.height, - marginLeft: width? width : styles.customGradient.marginLeft, - backgroundColor: backgroundColor? backgroundColor : styles.customGradient.backgroundColor, + height: height ? height : styles.customGradient.height, + marginLeft: width ? width : styles.customGradient.marginLeft, + backgroundColor: backgroundColor + ? backgroundColor + : styles.customGradient.backgroundColor, }} /> ))} diff --git a/components/reusable/dashed-separator/DashedSeparatorStyle.ts b/components/reusable/item-separator/dashed-separator/DashedSeparatorStyle.ts similarity index 87% rename from components/reusable/dashed-separator/DashedSeparatorStyle.ts rename to components/reusable/item-separator/dashed-separator/DashedSeparatorStyle.ts index 88df2fe891..1516dfc1ae 100644 --- a/components/reusable/dashed-separator/DashedSeparatorStyle.ts +++ b/components/reusable/item-separator/dashed-separator/DashedSeparatorStyle.ts @@ -1,11 +1,11 @@ import { StyleSheet } from "react-native"; -import Colors from "../../../assets/colors/colors"; +import Colors from "../../../../assets/colors/colors"; const styles = StyleSheet.create({ horizontalDashedDivider: { width: "100%", height: 1, - backgroundColor: "#FFFFFF", + backgroundColor: "transparent", borderStyle: "dashed", borderBottomColor: "#E3E5E5", borderBottomWidth: 1, @@ -13,7 +13,7 @@ const styles = StyleSheet.create({ verticalDashedDivider: { width: 1, height: "100%", - backgroundColor: "#FFFFFF", + backgroundColor: "transparent", borderStyle: "dashed", borderRightColor: "#EBEBEB", borderRightWidth: 1, diff --git a/components/reusable/item-separator/solid-separator/SolidSeparator.tsx b/components/reusable/item-separator/solid-separator/SolidSeparator.tsx new file mode 100644 index 0000000000..c0ee4cb128 --- /dev/null +++ b/components/reusable/item-separator/solid-separator/SolidSeparator.tsx @@ -0,0 +1,10 @@ +import { View, ViewStyle } from "react-native"; +import styles from "./SolidSeparatorStyle"; + +export const HorizontalSolidSeparator = ({ + style, +}: { + style: ViewStyle | undefined; +}) => { + return ; +}; diff --git a/components/reusable/item-separator/solid-separator/SolidSeparatorStyle.ts b/components/reusable/item-separator/solid-separator/SolidSeparatorStyle.ts new file mode 100644 index 0000000000..2fdbaaad65 --- /dev/null +++ b/components/reusable/item-separator/solid-separator/SolidSeparatorStyle.ts @@ -0,0 +1,11 @@ +import { StyleSheet } from "react-native"; + +const styles = StyleSheet.create({ + horizontalSolidSeparator: { + height: 1, + backgroundColor: "#E3E5E5", + opacity: 0.8, + }, +}); + +export default styles; diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx index 2876a21872..10c10244e1 100644 --- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx +++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx @@ -16,7 +16,7 @@ import CtaButton from "../../reusable/cta-button/CtaButton"; import { GradientHorizontalDashedSeparator, HorizontalDashedSeparator, -} from "../../reusable/dashed-separator/DashedSeparator"; +} from "../../reusable/item-separator/dashed-separator/DashedSeparator"; import { StyledText } from "../styled-text/StyledText"; import TitleWidget from "../title-widget/TitleWidget"; import styles from "./FooterWithCardWidgetStyle"; diff --git a/components/widgets/title-widget/TitleWidget.tsx b/components/widgets/title-widget/TitleWidget.tsx index ff4d9e2c8a..7dceb96ef2 100644 --- a/components/widgets/title-widget/TitleWidget.tsx +++ b/components/widgets/title-widget/TitleWidget.tsx @@ -1,5 +1,4 @@ -import { View, ViewStyle } from "react-native"; -import { TouchableOpacity } from "react-native"; +import { TouchableOpacity, View, ViewStyle } from "react-native"; import { GenericActionPayload } from "../../../App/common/actions/GenericAction"; import { CtaData } from "../../../App/common/interface"; import { TitleWidgetData } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData"; @@ -27,6 +26,10 @@ const TitleWidget = ({ handleActions(null, actions); } else if (cta && handleClick) { handleClick(cta); + } else if (widgetData?.actions && handleActions) { + handleActions(null, widgetData?.actions); + } else if (widgetData?.cta && handleClick) { + handleClick(widgetData?.cta); } }; @@ -36,6 +39,8 @@ const TitleWidget = ({ handleActions(null, actions); } else if (cta && handleClick) { handleClick(cta); + } else if (widgetData?.actions && handleActions) { + handleActions(null, widgetData?.actions); } }; diff --git a/components/widgets/title-with-list-widget/TitleWithListWidget.tsx b/components/widgets/title-with-list-widget/TitleWithListWidget.tsx index 09c61a20b5..eabd04442f 100644 --- a/components/widgets/title-with-list-widget/TitleWithListWidget.tsx +++ b/components/widgets/title-with-list-widget/TitleWithListWidget.tsx @@ -1,6 +1,6 @@ import throttle from "lodash/throttle"; -import { useCallback, useEffect } from "react"; -import { FlatList, View, ViewStyle } from "react-native"; +import React, { useCallback, useEffect } from "react"; +import { FlatList, TouchableOpacity, View, ViewStyle } from "react-native"; import { GenericActionPayload } from "../../../App/common/actions/GenericAction"; import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent"; import { CtaData } from "../../../App/common/interface"; @@ -8,6 +8,7 @@ import { ListItem, TitleWithListWidgetData, } from "../../../App/common/interface/widgets/widgetData/TitleWithListWidgetData"; +import { ItemSeparator } from "../../reusable"; import Tooltip from "../../reusable/tooltip/Tooltip"; import { StyledText } from "../styled-text/StyledText"; import TitleWidget from "../title-widget/TitleWidget"; @@ -16,20 +17,27 @@ import styles from "./TitleWithListWidgetStyle"; const ListItemComponent = ({ item, handleActions, + handleWidgetClick, }: { item: ListItem; - handleActions?: (screenActionPayload?: GenericActionPayload) => void; + handleActions: ( + value: any | undefined | null, + actionPayloadList: GenericActionPayload | undefined, + ) => void; + handleWidgetClick: (item: ListItem) => void; }) => { useEffect(() => { item.onViewEvent && sendAsAnalyticsEvent(item.onViewEvent); }); return ( - + handleWidgetClick(item)} activeOpacity={1}> + + ); }; @@ -58,7 +66,10 @@ const TitleWithListWidget = ({ }: { widgetData: TitleWithListWidgetData; widgetStyle: ViewStyle; - handleActions: (screenActionPayload?: GenericActionPayload) => void; + handleActions: ( + value: any | undefined | null, + actionPayloadList: GenericActionPayload | undefined, + ) => void; handleClick?: (cta: CtaData) => void; widgetIndex?: number; }) => { @@ -66,6 +77,18 @@ const TitleWithListWidget = ({ throttle(handleActions, 700, { leading: true, trailing: false }), [], ); + const handleWidgetClick = (item: ListItem) => { + if (item?.actions) { + handleActions(null, item?.actions); + } else if (item?.cta && handleClick) { + handleClick(item?.cta); + } + }; + + const throttledHandleWidgetClick = useCallback( + throttle(handleWidgetClick, 700, { leading: true, trailing: false }), + [], + ); return ( )} keyExtractor={(item, index) => item.id || index.toString()} + ItemSeparatorComponent={() => ( + + )} /> {widgetData.listFooter?.title?.text && (