TP-62894 | Top 3 hospital widget (#10589)

App/common/interface/components/TooltipData.ts

@@ -0,0 +1,18 @@
+import { ViewStyle } from "react-native";
+import { TextFieldData } from "../widgets/widgetData/TitleWidgetData";
+
+export interface TooltipData {
+  title?: TextFieldData;
+  style?: TooltipStyle;
+}
+
+export interface TooltipStyle {
+  containerStyle?: ViewStyle;
+  contentBoxStyle?: ViewStyle;
+  tooltipSize?: number;
+}
+
+export interface TooltipProps {
+  children: React.ReactNode;
+  tooltipStyle?: TooltipStyle;
+}

App/common/interface/widgets/widgetData/TitleWidgetData.ts

@@ -1,7 +1,7 @@
 import { ImageStyle, TextStyle, ViewStyle } from "react-native";
 import { CtaData } from "../..";
-import { GenericWidgetData } from "../Widget";
 import { GenericActionPayload } from "../../../actions/GenericAction";
+import { GenericWidgetData } from "../Widget";
 
 export interface TitleWidgetData extends GenericWidgetData {
   title?: TextFieldData;
@@ -12,12 +12,14 @@ export interface TitleWidgetData extends GenericWidgetData {
 
 export interface TextFieldData {
   text: string;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+  numberOfLines?: number;
   textStyle?: TextStyle;
   substringStyles?: SubstringStyle[];
   textDrawableData?: TextDrawableData;
   cta?: CtaData;
-  actions?: GenericActionPayload,
-  viewStyle?: ViewStyle
+  actions?: GenericActionPayload;
+  viewStyle?: ViewStyle;
 }
 
 export interface SubstringStyle {
@@ -49,4 +51,4 @@ export interface LottieFieldData {
   lottieStyle?: ImageStyle;
   cta?: CtaData;
   delayAnimationBy?: number;
-}
+}

App/common/interface/widgets/widgetData/TitleWithListWidgetData.ts

@@ -1,20 +1,22 @@
-import { TextStyle, ViewStyle } from "react-native";
+import { ViewStyle } from "react-native";
+import { AnalyticsEvent } from "../..";
+import { TooltipData } from "../../components/TooltipData";
 import { GenericWidgetData } from "../Widget";
 import { TextFieldData } from "./TitleWidgetData";
-import { AnalyticsEvent } from "../..";
 
 export interface TitleWithListWidgetData extends GenericWidgetData {
   title?: TextFieldData;
   rightTitle?: TextFieldData;
   listData?: ListItem[];
-  listStyle?: ViewStyle
+  listFooter?: ListItem;
+  listStyle?: ViewStyle;
+  tooltip?: TooltipData;
 }
 
 export interface ListItem extends GenericWidgetData {
   id: string;
   title?: TextFieldData;
   rightTitle?: TextFieldData;
-  onViewEvent?: AnalyticsEvent
+  itemStyle?: ViewStyle;
+  onViewEvent?: AnalyticsEvent;
 }
-
-

components/reusable/tooltip/Tooltip.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { View } from "react-native";
+import { TooltipProps } from "../../../App/common/interface/components/TooltipData";
+import styles from "./TooltipStyle";
+
+const Tooltip = ({ children, tooltipStyle }: TooltipProps) => {
+  const {
+    containerStyle,
+    contentBoxStyle,
+    tooltipSize = 6,
+  } = tooltipStyle || {};
+
+  const borderColor = contentBoxStyle?.borderColor || "black";
+  const backgroundColor = contentBoxStyle?.backgroundColor || "black";
+  const borderWidth = contentBoxStyle?.borderWidth || 0;
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View>
+        <View
+          style={[
+            styles.tooltipBorder,
+            {
+              borderBottomColor: borderColor,
+              borderLeftWidth: tooltipSize + borderWidth,
+              borderRightWidth: tooltipSize + borderWidth,
+              borderBottomWidth: tooltipSize + borderWidth,
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.tooltipInner,
+            {
+              borderBottomColor: backgroundColor,
+              borderLeftWidth: tooltipSize,
+              borderRightWidth: tooltipSize,
+              borderBottomWidth: tooltipSize,
+              marginTop: borderWidth * 2,
+              marginLeft: borderWidth,
+            },
+          ]}
+        />
+      </View>
+      <View
+        style={[{ borderColor, backgroundColor, borderWidth }, contentBoxStyle]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export default Tooltip;

components/reusable/tooltip/TooltipStyle.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    container: {
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    box: {
+      position: "relative",
+    },
+    tooltipBorder: {
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderStyle: "solid",
+    },
+    tooltipInner: {
+      position: "absolute",
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderStyle: "solid",
+      zIndex: 2,
+    },
+});
+  
+export default styles;

components/widgets/styled-text/StyledText.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text, StyleSheet, Image } from "react-native";
+import { View } from "react-native";
+import Animated from "react-native-reanimated";
 import {
   ImageFieldData,
   LottieFieldData,
@@ -7,9 +8,8 @@ import {
   TextFieldData,
 } from "../../../App/common/interface/widgets/widgetData/TitleWidgetData";
 import { StyledImage } from "../../StyledImage";
-import styles from "./StyledTextComponentStyle";
 import { StyledLottie } from "../styled-lottie/StyledLottie";
-import Animated from "react-native-reanimated";
+import styles from "./StyledTextComponentStyle";
 
 export const StyledText = ({
   textFieldData,
@@ -60,7 +60,11 @@ export const StyledText = ({
       <View style={styles.rowContainer}>
         {leftImage && <StyledImage imageFieldData={leftImage} />}
         {leftLottie && <StyledLottie lottieFieldData={leftLottie} />}
-        <Animated.Text style={textFieldData.textStyle || undefined}>
+        <Animated.Text
+          ellipsizeMode={textFieldData.ellipsizeMode}
+          numberOfLines={textFieldData.numberOfLines}
+          style={textFieldData.textStyle || undefined}
+        >
           {substringStyleMap.length !== 0
             ? substringStyleMap.map((substringStyle, index) => {
                 return (

components/widgets/title-with-list-widget/TitleWithListWidget.tsx

@@ -1,16 +1,17 @@
+import throttle from "lodash/throttle";
+import { useCallback, useEffect } from "react";
 import { FlatList, 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";
 import {
   ListItem,
   TitleWithListWidgetData,
 } from "../../../App/common/interface/widgets/widgetData/TitleWithListWidgetData";
+import Tooltip from "../../reusable/tooltip/Tooltip";
+import { StyledText } from "../styled-text/StyledText";
 import TitleWidget from "../title-widget/TitleWidget";
 import styles from "./TitleWithListWidgetStyle";
-import { useEffect } from "react";
-import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
-import { useCallback } from "react";
-import throttle from "lodash/throttle";
 
 const ListItemComponent = ({
   item,
@@ -32,6 +33,22 @@ const ListItemComponent = ({
   );
 };
 
+const ListFooterItemComponent = ({
+  item,
+  handleClick,
+}: {
+  item: ListItem;
+  handleClick?: (cta: CtaData) => void;
+}) => {
+  return (
+    <TitleWidget
+      widgetData={item}
+      widgetStyle={{ ...styles.listFooterContainer, ...item.itemStyle }}
+      handleClick={handleClick}
+    />
+  );
+};
+
 const TitleWithListWidget = ({
   widgetData,
   widgetStyle,
@@ -73,7 +90,18 @@ const TitleWithListWidget = ({
           )}
           keyExtractor={(item, index) => item.id || index.toString()}
         />
+        {widgetData.listFooter?.title?.text && (
+          <ListFooterItemComponent
+            item={widgetData.listFooter}
+            handleClick={handleClick}
+          />
+        )}
       </View>
+      {widgetData.tooltip?.title && (
+        <Tooltip tooltipStyle={widgetData.tooltip.style}>
+          <StyledText textFieldData={widgetData.tooltip.title} />
+        </Tooltip>
+      )}
     </View>
   );
 };

components/widgets/title-with-list-widget/TitleWithListWidgetStyle.ts

@@ -24,6 +24,16 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
   },
+  listFooterContainer: {
+    marginHorizontal: -16,
+    marginTop: 6,
+    marginBottom: -14,
+    borderBottomStartRadius: 3,
+    borderBottomEndRadius: 3,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
 });
 
-export default styles;
+export default styles;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "NaviApp",
-  "version": "0.1.1",
-  "versionCode": 2,
+  "version": "0.1.2",
+  "versionCode": 3,
   "private": true,
   "scripts": {
     "start": "yarn react-native start",