dhre-ui-kit 0.0.116 → 0.0.118

package/lib/index.d.ts

@@ -352,11 +352,14 @@ interface AccordionProps {
     optionalElement?: () => React$1.ReactNode;
     headerComponent?: () => React$1.ReactNode;
     disabled?: boolean;
+    icon: React$1.ReactElement;
 }
 
-declare const Accordion: ({ title, testId, containerStyle, titleStyle, headerStyle, children, isOpen, onToggle, optionalElement, headerComponent, disabled, }: AccordionProps) => React$1.JSX.Element;
+declare const Accordion: ({ title, testId, containerStyle, titleStyle, headerStyle, children, isOpen, onToggle, optionalElement, headerComponent, disabled, icon, }: AccordionProps) => React$1.JSX.Element;
 
 interface ToastProps {
+    sucessIcon: React$1.ReactElement;
+    errorIcon: React$1.ReactElement;
 }
 interface ToastRef {
     showToast: (message: string, duration?: number, isSuccess?: boolean, buttonText?: string | null, buttonAction?: (() => void) | null) => void;
@@ -382,6 +385,7 @@ interface CustomSearchBarProps extends TextInputProps {
     onSearchIconPress?: () => void;
     onCrossIconPress?: () => void;
     handleOnChangeText?: (text: string) => void;
+    searchIcon: React.ReactElement;
     rightIcon?: React.ReactElement;
     disableBorderColor?: string;
     disablePlaceHolderStyle?: string;
@@ -391,7 +395,7 @@ interface CustomSearchBarProps extends TextInputProps {
     value: string | undefined;
 }
 
-declare const CustomSearchBar: ({ value, height, disabled, testID, inputContainerStyle, searchIconStyle, crossIconStyle, inputStyle, onSearchIconPress, onCrossIconPress, handleOnChangeText, setValue, rightIcon, disableBorderColor, borderColor, disablePlaceHolderStyle, enablePlaceHolderStyle, ...props }: CustomSearchBarProps) => React$1.JSX.Element;
+declare const CustomSearchBar: ({ value, height, disabled, testID, inputContainerStyle, searchIconStyle, crossIconStyle, inputStyle, onSearchIconPress, onCrossIconPress, handleOnChangeText, setValue, searchIcon, rightIcon, disableBorderColor, borderColor, disablePlaceHolderStyle, enablePlaceHolderStyle, ...props }: CustomSearchBarProps) => React$1.JSX.Element;
 
 interface CustomHeaderProps {
     title: string;
@@ -518,6 +522,7 @@ declare const _default$5: (props: OurOfficesButtonProps) => React$1.JSX.Element;
 
 interface NotificationBandgeProps {
     notificationCount?: number;
+    icon: React$1.ReactElement;
 }
 
 declare const NotificationBandge: React$1.FC<NotificationBandgeProps>;
@@ -651,6 +656,9 @@ interface CustomDocumentPickerProps {
     containerStyle?: ViewStyle;
     titleStyle?: TextStyle;
     hintStyle?: TextStyle;
+    fileIcon: React$1.ReactElement;
+    uploadIcon: React$1.ReactElement;
+    deleteIcon: React$1.ReactElement;
 }
 
 declare const _default$3: (props: CustomDocumentPickerProps) => React$1.JSX.Element;
@@ -680,6 +688,7 @@ interface IProps {
     showStepCount?: boolean;
     showStatus?: boolean;
     data: IData[];
+    completedStatusIcon: React$1.ReactElement;
 }
 
 declare const _default$1: (props: IProps) => React$1.JSX.Element;
@@ -687,6 +696,7 @@ declare const _default$1: (props: IProps) => React$1.JSX.Element;
 interface CustomSlideButtonProps {
     label?: string;
     onComplete?: () => void;
+    icon: React$1.ReactElement;
 }
 
 declare const _default: (props: CustomSlideButtonProps) => React$1.JSX.Element;

package/lib/index.js

@@ -39,7 +39,6 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
 var Progress__namespace = /*#__PURE__*/_interopNamespace(Progress);
@@ -651,65 +650,6 @@ const styles$B = reactNative.StyleSheet.create({
   rightIconStyle: { marginLeft: 8 }
 });
 
-var _path$2;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
-var SvgCrossIcon = function SvgCrossIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 25,
-    fill: "none"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M17.657 8.032a.686.686 0 0 0-.97-.97L12 11.749 7.313 7.062a.686.686 0 1 0-.97.97l4.687 4.687-4.687 4.687a.686.686 0 1 0 .97.97L12 13.688l4.687 4.688a.686.686 0 1 0 .97-.97l-4.687-4.687z"
-  })));
-};
-
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-var SvgCaretLeft = function SvgCaretLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props));
-};
-
-var _path$1, _path2;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-var SvgDotsThreeVertical = function SvgDotsThreeVertical(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    stroke: "#fff",
-    strokeWidth: 0.125,
-    d: "M13.438 6a1.438 1.438 0 1 1-2.876 0 1.438 1.438 0 0 1 2.876 0ZM13.438 12a1.438 1.438 0 1 1-2.876 0 1.438 1.438 0 0 1 2.876 0Z"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M12 19.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
-  })));
-};
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var SvgArrowLeft = function SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    fillRule: "evenodd",
-    d: "M15.6 4.186a.774.774 0 0 1 .085 1.092L9.923 12l5.762 6.722a.774.774 0 0 1-1.176 1.008l-6.194-7.226a.774.774 0 0 1 0-1.008L14.51 4.27a.774.774 0 0 1 1.092-.084",
-    clipRule: "evenodd"
-  })));
-};
-
 const BottomDrawer = ({
   isModalVisible,
   toggleModal,
@@ -723,8 +663,8 @@ const BottomDrawer = ({
   showBlurView = true,
   showLeftIcon = false,
   showRightIcon = true,
-  leftIcon = /* @__PURE__ */ React__default["default"].createElement(SvgArrowLeft, null),
-  rightIcon = /* @__PURE__ */ React__default["default"].createElement(SvgCrossIcon, null),
+  leftIcon,
+  rightIcon,
   onLeftIconPress,
   titleStyle,
   titleVariant = "B2_REGULAR",
@@ -757,14 +697,24 @@ const BottomDrawer = ({
           blurType: "light",
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.headerContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$B.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles$B.leftIconStyle,
+        onPress: onLeftIconPress
+      }) : null, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
           style: { ...styles$B.title, ...titleStyle }
         }
-      ))), children))
+      ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: styles$B.rightIconStyle,
+        onPress: toggleModal
+      }) : null)), children))
     ))
   );
 };
@@ -1969,7 +1919,8 @@ const Accordion = ({
   optionalElement,
   // Destructure the new prop,
   headerComponent,
-  disabled = false
+  disabled = false,
+  icon
 }) => {
   const contentRef = React.useRef(null);
   const [animation] = React.useState(new reactNative.Animated.Value(0));
@@ -2005,7 +1956,12 @@ const Accordion = ({
         text: title,
         style: [styles$n.title, titleStyle]
       }
-    )
+    ),
+    React__default["default"].cloneElement(icon, {
+      width: moderateScale(20),
+      height: moderateScale(20),
+      style: styles$n.iconStyle
+    })
   ), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$n.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
@@ -2050,7 +2006,7 @@ const styles$m = reactNative.StyleSheet.create({
   }
 });
 
-const Toast = React__default["default"].forwardRef((_props, ref) => {
+const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, ref) => {
   const [visible, setVisible] = React.useState(false);
   const [message, setMessage] = React.useState("");
   const [isSuccess, setIsSuccess] = React.useState(true);
@@ -2106,7 +2062,7 @@ const Toast = React__default["default"].forwardRef((_props, ref) => {
       ],
       testID: "TOAST"
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.innerContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.toastContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.innerContainer }, isSuccess ? sucessIcon : errorIcon, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "L2_REGULAR",
@@ -2174,7 +2130,8 @@ const CustomSearchBar = ({
   onCrossIconPress,
   handleOnChangeText,
   setValue,
-  rightIcon = /* @__PURE__ */ React__default["default"].createElement(SvgCrossIcon, null),
+  searchIcon,
+  rightIcon,
   disableBorderColor = "#4F4F4F",
   borderColor = "#FFFFFF",
   disablePlaceHolderStyle = "#686868",
@@ -2202,7 +2159,12 @@ const CustomSearchBar = ({
           onSearchIconPress?.();
         },
         style: searchIconStyle
-      }
+      },
+      React__default["default"].cloneElement(searchIcon, {
+        width: moderateScale(24),
+        height: moderateScale(24),
+        style: [styles$l.searchIconStyle, searchIconStyle]
+      })
     ),
     /* @__PURE__ */ React__default["default"].createElement(
       reactNative.TextInput,
@@ -2228,11 +2190,11 @@ const CustomSearchBar = ({
         },
         style: crossIconStyle
       },
-      React__default["default"].cloneElement(rightIcon, {
+      rightIcon ? React__default["default"].cloneElement(rightIcon, {
         // width: moderateScale(24),
         // height: moderateScale(24),
         style: [styles$l.crossIconStyle, crossIconStyle]
-      })
+      }) : null
     )
   );
 };
@@ -2262,31 +2224,31 @@ const styles$k = reactNative.StyleSheet.create({
 const CustomHeader = ({
   title,
   testId = "CUSTOM-HEADER",
-  leftIcon = /* @__PURE__ */ React__default["default"].createElement(SvgCaretLeft, null),
-  rightIcon = /* @__PURE__ */ React__default["default"].createElement(SvgDotsThreeVertical, null),
+  leftIcon,
+  rightIcon,
   showLeftIcon = true,
   showRightIcon = true,
   onLeftPress,
   onRightPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.headderContainer }, showLeftIcon && React__default["default"].cloneElement(leftIcon, {
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$k.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
     width: moderateScale(24),
     height: moderateScale(24),
     onPress: onLeftPress,
     style: styles$k.leftIconStyle
-  }), /* @__PURE__ */ React__default["default"].createElement(
+  }) : null, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       variant: "B2_REGULAR",
       text: title,
       style: styles$k.headerTitle
     }
-  )), showRightIcon && React__default["default"].cloneElement(rightIcon, {
+  )), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
     width: moderateScale(24),
     height: moderateScale(24),
     onPress: onRightPress,
     style: styles$k.rightIconStyle
-  }));
+  }) : null);
 };
 
 const styles$j = reactNative.StyleSheet.create({
@@ -2908,12 +2870,13 @@ const styles$b = reactNative.StyleSheet.create({
 });
 
 const NotificationBandge = ({
-  notificationCount = 0
+  notificationCount = 0,
+  icon
 }) => {
   if (notificationCount <= 0) {
-    return null;
+    return icon;
   }
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.iconContainer }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$b.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.iconContainer }, icon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$b.badge }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: [styles$b.badgeText] }, notificationCount > 99 ? "99+" : notificationCount)));
 };
 
 const ScrollableList = ({
@@ -3643,7 +3606,10 @@ const CustomDocumentPicker = ({
   fileTypes = [DocumentPicker__default["default"].types.images, DocumentPicker__default["default"].types.pdf],
   containerStyle,
   titleStyle,
-  hintStyle
+  hintStyle,
+  fileIcon,
+  uploadIcon,
+  deleteIcon
 }) => {
   const [error, setError] = React.useState("");
   const [docDetails, setDocDetails] = React.useState();
@@ -3673,7 +3639,7 @@ const CustomDocumentPicker = ({
       }
     }
   }, [fileTypes, maxFileSize, onDocumentUpload]);
-  React.useCallback(() => {
+  const removeDocument = React.useCallback(() => {
     setDocDetails(void 0);
   }, []);
   return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
@@ -3686,7 +3652,7 @@ const CustomDocumentPicker = ({
         containerStyle
       ]
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$3.innerContainer, onPress: pickDocument }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.titleContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { style: styles$3.innerContainer, onPress: pickDocument }, docDetails ? fileIcon : uploadIcon, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.titleContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: FontStyle.L2_REGULAR,
@@ -3700,7 +3666,10 @@ const CustomDocumentPicker = ({
         text: hint,
         style: [{ color: theme.CONTENT_SECONDRY }, hintStyle]
       }
-    )))
+    ))),
+    docDetails && React__default["default"].cloneElement(deleteIcon, {
+      onPress: removeDocument
+    })
   ), error && /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
@@ -3935,7 +3904,8 @@ const Stepper = ({
   containerStyle,
   showStepCount = false,
   showStatus = false,
-  data
+  data,
+  completedStatusIcon
 }) => {
   const { theme } = useTheme();
   const renderCircleStyle = (status) => {
@@ -3997,7 +3967,7 @@ const Stepper = ({
             color: theme.CONTENT_PRIMARY
           }
         }
-      )), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$1.separator, ...dividerStyle } })),
+      ), showStatus && item?.status === Status.Completed && completedStatusIcon), index != data?.length - 1 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...styles$1.separator, ...dividerStyle } })),
       /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$1.lableContainer }, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
@@ -4048,7 +4018,11 @@ const styles = reactNative.StyleSheet.create({
 
 const { width } = reactNative.Dimensions.get("window");
 const BUTTON_WIDTH = 40;
-const CustomSlideButton = ({ label, onComplete }) => {
+const CustomSlideButton = ({
+  label,
+  onComplete,
+  icon
+}) => {
   const pan = React.useRef(new reactNative.Animated.Value(0)).current;
   const panResponder = React.useRef(
     reactNative.PanResponder.create({
@@ -4111,7 +4085,8 @@ const CustomSlideButton = ({ label, onComplete }) => {
             backgroundColor: theme.SURFACE_PRIMARY,
             width: BUTTON_WIDTH
           }
-        }
+        },
+        icon
       )
     )
   );