dhre-ui-kit 0.0.117 → 0.0.119

package/lib/index.d.ts

@@ -358,6 +358,8 @@ interface AccordionProps {
 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;
@@ -383,7 +385,8 @@ interface CustomSearchBarProps extends TextInputProps {
     onSearchIconPress?: () => void;
     onCrossIconPress?: () => void;
     handleOnChangeText?: (text: string) => void;
-    rightIcon?: React.ReactElement;
+    searchIcon: React.ReactElement;
+    rightIcon: React.ReactElement;
     disableBorderColor?: string;
     disablePlaceHolderStyle?: string;
     enablePlaceHolderStyle?: string;
@@ -392,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;
@@ -519,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>;
@@ -652,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;
@@ -681,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;
@@ -688,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);
@@ -2007,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);
@@ -2063,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",
@@ -2100,20 +2099,6 @@ const Toast = React__default["default"].forwardRef((_props, ref) => {
 });
 Toast.displayName = "Toast";
 
-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 SvgCrossIcon = function SvgCrossIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 25,
-    fill: "none"
-  }, props), _path || (_path = /*#__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"
-  })));
-};
-
 const styles$l = reactNative.StyleSheet.create({
   inputContainer: {
     flexDirection: "row",
@@ -2145,7 +2130,8 @@ const CustomSearchBar = ({
   onCrossIconPress,
   handleOnChangeText,
   setValue,
-  rightIcon = /* @__PURE__ */ React__default["default"].createElement(SvgCrossIcon, null),
+  searchIcon,
+  rightIcon,
   disableBorderColor = "#4F4F4F",
   borderColor = "#FFFFFF",
   disablePlaceHolderStyle = "#686868",
@@ -2173,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,
@@ -2879,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 = ({
@@ -3614,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();
@@ -3644,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(
@@ -3657,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,
@@ -3671,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,
     {
@@ -3906,7 +3904,8 @@ const Stepper = ({
   containerStyle,
   showStepCount = false,
   showStatus = false,
-  data
+  data,
+  completedStatusIcon
 }) => {
   const { theme } = useTheme();
   const renderCircleStyle = (status) => {
@@ -3968,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,
         {
@@ -4019,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({
@@ -4082,7 +4085,8 @@ const CustomSlideButton = ({ label, onComplete }) => {
             backgroundColor: theme.SURFACE_PRIMARY,
             width: BUTTON_WIDTH
           }
-        }
+        },
+        icon
       )
     )
   );