dhre-ui-kit 0.0.152 → 0.0.154

package/lib/index.d.ts

@@ -354,7 +354,6 @@ interface AccordionProps {
     headerComponent?: () => React$1.ReactNode;
     disabled?: boolean;
     icon: React$1.ReactElement;
-    onHeaderPress?: () => void;
     titleVariant?: string;
 }
 
@@ -1043,11 +1042,23 @@ interface AppointmentCardProps {
     title: string;
     headerTitle: string;
     headerSubtitle: string;
-    appointmentId: number;
-    requestId: string;
-    location: string;
-    onPress: () => void;
-    onHeaderPress: () => void;
+    onViewDetailsPress: () => void;
+    statusIcon: React$1.ReactElement;
+    infoIcon: React$1.ReactElement;
+    deleteIcon: React$1.ReactElement;
+    editIcon: React$1.ReactElement;
+    onDeletePress: () => void;
+    onEditPress: () => void;
+    onDirectionPress: () => void;
+    data: {
+        title: string;
+        value: string;
+        isLocation?: boolean;
+        isStatus?: boolean;
+    }[];
+    viewText: string;
+    info: string;
+    directionText: string;
 }
 
 declare const _default$1: (props: AppointmentCardProps) => React$1.JSX.Element;

package/lib/index.js

@@ -282,7 +282,7 @@ const ThemeProvider = ({ children }) => {
     acc[key] = theme[key][mode];
     return acc;
   }, {});
-  return /* @__PURE__ */ React__default["default"].createElement(ThemeContext.Provider, { value: { theme: filteredTheme } }, children);
+  return /* @__PURE__ */ React__default["default"].createElement(ThemeContext.Provider, { value: { theme: filteredTheme, mode } }, children);
 };
 const useTheme = () => {
   const context = React.useContext(ThemeContext);
@@ -1932,7 +1932,6 @@ const Accordion = ({
   headerComponent,
   disabled = false,
   icon,
-  onHeaderPress,
   titleVariant = "B4_REGULAR"
 }) => {
   const contentRef = React.useRef(null);
@@ -1967,22 +1966,30 @@ const Accordion = ({
       },
       testID: testId
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$m.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
+    /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.Pressable,
       {
-        variant: titleVariant,
-        text: title,
-        style: {
-          ...styles$m.title,
-          color: theme.CONTENT_PRIMARY,
-          ...titleStyle
+        style: [styles$m.header, headerStyle, disabled && { opacity: 0.5 }],
+        onPress: !disabled ? onToggle : void 0
+      },
+      headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(
+        CustomTypography,
+        {
+          variant: titleVariant,
+          text: title,
+          style: {
+            ...styles$m.title,
+            color: theme.CONTENT_PRIMARY,
+            ...titleStyle
+          }
         }
-      }
-    )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: !disabled ? onToggle : void 0 }, React__default["default"].cloneElement(icon, {
-      width: moderateScale(20),
-      height: moderateScale(20),
-      style: styles$m.iconStyle
-    }))),
+      ),
+      React__default["default"].cloneElement(icon, {
+        width: moderateScale(20),
+        height: moderateScale(20),
+        style: styles$m.iconStyle
+      })
+    ),
     optionalElement ? optionalElement() : null,
     isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$m.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.View,
@@ -2754,7 +2761,7 @@ const DateRangePicker = (props) => {
     startDate: "",
     endDate: ""
   });
-  const { theme } = useTheme();
+  const { theme, mode } = useTheme();
   const onDayPress = (day) => {
     const { dateString } = day;
     const { startDate, endDate } = selectedRange;
@@ -2778,7 +2785,7 @@ const DateRangePicker = (props) => {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
           color: theme.SUCCESS,
-          textColor: theme.CONTENT_PRIMARY
+          textColor: theme.CONTENT_INVERTED
         };
       }
     }
@@ -2787,7 +2794,10 @@ const DateRangePicker = (props) => {
         startingDay: true,
         color: theme.SUCCESS,
         textColor: theme.CONTENT_INVERTED,
-        customContainerStyle: { backgroundColor: theme.SURFACE_INVERTED }
+        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
+          borderWidth: moderateScale(2),
+          borderColor: theme.SURFACE_PRIMARY
+        }
       };
     }
     if (endDate) {
@@ -2795,7 +2805,10 @@ const DateRangePicker = (props) => {
         endingDay: true,
         color: theme.SUCCESS,
         textColor: theme.CONTENT_INVERTED,
-        customContainerStyle: { backgroundColor: theme.SURFACE_INVERTED }
+        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
+          borderWidth: moderateScale(2),
+          borderColor: theme.SURFACE_PRIMARY
+        }
       };
     }
     return markedDates;
@@ -4239,17 +4252,47 @@ const styles$1 = reactNative.StyleSheet.create({
   appointmentInfo: {
     flex: 1,
     flexDirection: "row",
-    justifyContent: "space-between"
+    flexWrap: "wrap",
+    rowGap: verticalScale(16)
   },
   infoColumn: {
-    flex: 1,
+    width: "50%",
     rowGap: verticalScale(4)
   },
+  infoRow: {
+    flexDirection: "row",
+    columnGap: horizontalScale(4)
+  },
   locationInfo: {
     rowGap: verticalScale(4)
   },
   getDirectionsText: {
     textDecorationLine: "underline"
+  },
+  infoContainer: {
+    padding: moderateScale(8),
+    flexDirection: "row",
+    columnGap: horizontalScale(8),
+    borderRadius: moderateScale(8)
+  },
+  actionsContainer: {
+    borderTopWidth: 1,
+    paddingTop: verticalScale(16),
+    flexDirection: "row"
+  },
+  viewText: {
+    flex: 1,
+    textDecorationLine: "underline",
+    alignSelf: "center"
+  },
+  actionIcons: {
+    flexDirection: "row",
+    columnGap: horizontalScale(16)
+  },
+  iconContainer: {
+    width: moderateScale(32),
+    height: moderateScale(32),
+    borderRadius: moderateScale(25)
   }
 });
 
@@ -4261,11 +4304,18 @@ const AppointmentCard = ({
   title,
   headerTitle,
   headerSubtitle,
-  appointmentId,
-  requestId,
-  location,
-  onPress,
-  onHeaderPress
+  onViewDetailsPress,
+  statusIcon,
+  infoIcon,
+  deleteIcon,
+  editIcon,
+  onDeletePress,
+  onEditPress,
+  onDirectionPress,
+  data,
+  viewText,
+  info,
+  directionText
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React__default["default"].createElement(
@@ -4281,93 +4331,125 @@ const AppointmentCard = ({
         borderBottomColor: theme.BORDER_SEPERATOR_HEADER
       },
       headerStyle: styles$1.accordionHeader,
-      headerComponent: () => /* @__PURE__ */ React__default["default"].createElement(
-        reactNative.Pressable,
-        {
-          style: styles$1.accordionHeaderContent,
-          onPress: onHeaderPress
-        },
-        headerIcon,
-        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
-          CustomTypography,
-          {
-            text: headerTitle,
-            variant: FontStyle.L2_REGULAR,
-            style: { color: theme.CONTENT_SECONDRY }
-          }
-        ), /* @__PURE__ */ React__default["default"].createElement(
-          CustomTypography,
-          {
-            text: headerSubtitle,
-            variant: FontStyle.B3_REGULAR,
-            style: { color: theme.CONTENT_PRIMARY }
-          }
-        ))
-      ),
-      icon
-    },
-    /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.View,
-      {
-        style: {
-          ...styles$1.accordionDetails,
-          borderTopColor: theme.BORDER_SEPERATOR_HEADER
-        }
-      },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.appointmentInfo }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn }, /* @__PURE__ */ React__default["default"].createElement(
+      headerComponent: () => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionHeaderContent }, headerIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.accordionText }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
-          text: "APPOINTMENT ID",
-          variant: FontStyle.L3_REGULAR,
+          text: headerTitle,
+          variant: FontStyle.L2_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
       ), /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
-          text: appointmentId?.toString(),
-          variant: FontStyle.L1_REGULAR,
+          text: headerSubtitle,
+          variant: FontStyle.B3_REGULAR,
           style: { color: theme.CONTENT_PRIMARY }
         }
-      )), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn }, /* @__PURE__ */ React__default["default"].createElement(
+      ))),
+      icon
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.View,
+      {
+        style: [
+          styles$1.accordionDetails,
+          { borderTopColor: theme.BORDER_SEPERATOR_HEADER }
+        ]
+      },
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.appointmentInfo }, data.map(({ title: title2, value, isLocation, isStatus }) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoColumn, key: title2 }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
-          text: "REQUEST ID",
+          text: title2,
           variant: FontStyle.L3_REGULAR,
           style: { color: theme.CONTENT_SECONDRY }
         }
-      ), /* @__PURE__ */ React__default["default"].createElement(
+      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.infoRow }, isStatus && statusIcon, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
-          text: requestId,
+          text: value,
           variant: FontStyle.L1_REGULAR,
-          style: { color: theme.CONTENT_PRIMARY }
+          style: {
+            color: isStatus ? theme.WARNING : theme.CONTENT_PRIMARY
+          }
         }
-      ))),
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.locationInfo }, /* @__PURE__ */ React__default["default"].createElement(
+      )), isLocation && /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
-          text: "LOCATION",
-          variant: FontStyle.L3_REGULAR,
-          style: { color: theme.CONTENT_SECONDRY }
+          text: directionText,
+          variant: FontStyle.L2_REGULAR,
+          style: [
+            styles$1.getDirectionsText,
+            { color: theme.CONTENT_PRIMARY }
+          ],
+          onPress: onDirectionPress
         }
-      ), /* @__PURE__ */ React__default["default"].createElement(
-        CustomTypography,
+      )))),
+      /* @__PURE__ */ React__default["default"].createElement(
+        reactNative.View,
         {
-          text: location,
-          variant: FontStyle.L1_REGULAR,
-          style: { color: theme.CONTENT_PRIMARY }
-        }
-      ), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress }, /* @__PURE__ */ React__default["default"].createElement(
-        CustomTypography,
+          style: [
+            styles$1.infoContainer,
+            {
+              backgroundColor: theme.SURFACE_TERTIARY
+            }
+          ]
+        },
+        infoIcon,
+        /* @__PURE__ */ React__default["default"].createElement(
+          CustomTypography,
+          {
+            text: info,
+            variant: FontStyle.L2_REGULAR,
+            style: { flex: 1, color: theme.CONTENT_SECONDRY }
+          }
+        )
+      ),
+      /* @__PURE__ */ React__default["default"].createElement(
+        reactNative.View,
         {
-          text: "Get directions",
-          variant: FontStyle.L2_REGULAR,
-          style: {
-            ...styles$1.getDirectionsText,
-            color: theme.CONTENT_PRIMARY
+          style: [
+            styles$1.actionsContainer,
+            {
+              borderTopColor: theme.BORDER_SEPERATOR_HEADER
+            }
+          ]
+        },
+        /* @__PURE__ */ React__default["default"].createElement(
+          CustomTypography,
+          {
+            text: viewText,
+            variant: FontStyle.L2_REGULAR,
+            style: [
+              styles$1.viewText,
+              {
+                color: theme.CONTENT_PRIMARY
+              }
+            ],
+            onPress: onViewDetailsPress
           }
-        }
-      )))
+        ),
+        /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.actionIcons }, /* @__PURE__ */ React__default["default"].createElement(
+          CustomIcon,
+          {
+            icon: deleteIcon,
+            containerStyle: {
+              ...styles$1.iconContainer,
+              backgroundColor: theme.SURFACE_INVERTED
+            },
+            onPress: onDeletePress
+          }
+        ), /* @__PURE__ */ React__default["default"].createElement(
+          CustomIcon,
+          {
+            icon: editIcon,
+            containerStyle: {
+              ...styles$1.iconContainer,
+              backgroundColor: theme.SURFACE_INVERTED
+            },
+            onPress: onEditPress
+          }
+        ))
+      )
     )
   );
 };