dhre-ui-kit 0.0.222 → 0.0.224

package/lib/index.d.ts

@@ -18,7 +18,7 @@ interface CustomTextProps extends TextProps {
     style?: StyleProp<TextStyle>;
     textColor?: string;
 }
-declare const _default$k: (props: CustomTextProps) => React$1.JSX.Element;
+declare const _default$l: (props: CustomTextProps) => React$1.JSX.Element;
 
 interface BadgeProps {
     text?: string;
@@ -28,7 +28,7 @@ interface BadgeProps {
     iconStyle?: ViewStyle;
     handleIconPress: () => void;
 }
-declare const _default$j: (props: BadgeProps) => React$1.JSX.Element;
+declare const _default$k: (props: BadgeProps) => React$1.JSX.Element;
 
 interface BottomDrawerProps {
     isModalVisible: boolean;
@@ -73,7 +73,7 @@ interface CustomButtonProps {
     isLoading?: boolean;
 }
 
-declare const _default$i: (props: CustomButtonProps) => React$1.JSX.Element;
+declare const _default$j: (props: CustomButtonProps) => React$1.JSX.Element;
 
 interface CardsProps {
     topLeftTitle?: string;
@@ -325,7 +325,7 @@ interface Props {
     onSelectionChange?: (selected: string[]) => void;
     style?: ViewStyle;
 }
-declare const _default$h: (props: Props) => React$1.JSX.Element;
+declare const _default$i: (props: Props) => React$1.JSX.Element;
 
 interface TagsProps {
     tags: string[];
@@ -364,7 +364,7 @@ interface AccordionProps {
     titleVariant?: string;
 }
 
-declare const _default$g: (props: AccordionProps) => React$1.JSX.Element;
+declare const _default$h: (props: AccordionProps) => React$1.JSX.Element;
 
 interface ToastProps {
     sucessIcon: React$1.ReactElement;
@@ -419,7 +419,7 @@ interface CustomHeaderProps {
     onRightPress?: () => void;
 }
 
-declare const _default$f: (props: CustomHeaderProps) => React$1.JSX.Element;
+declare const _default$g: (props: CustomHeaderProps) => React$1.JSX.Element;
 
 interface ListItem {
     id: string;
@@ -462,7 +462,7 @@ interface SwipableListProps {
     titleStyle?: TextStyle;
 }
 
-declare const _default$e: (props: SwipableListProps) => React$1.JSX.Element;
+declare const _default$f: (props: SwipableListProps) => React$1.JSX.Element;
 
 interface TypoTextProps extends TextProps {
     variant: keyof typeof FONT_STYLES;
@@ -487,7 +487,7 @@ interface CustomLoaderProps {
     loading: boolean;
 }
 
-declare const CustomLoader: ({ loading }: CustomLoaderProps) => React$1.JSX.Element | null;
+declare const _default$e: (props: CustomLoaderProps) => React$1.JSX.Element;
 
 declare const _default$d: (props: {
     backgroundColor?: string;
@@ -1116,4 +1116,4 @@ interface RadioButtonGroupProps {
 
 declare const RadioButtonGroup: React$1.FC<RadioButtonGroupProps>;
 
-export { _default$g as Accordion, _default$1 as AppointmentCard, _default$j as Badge, BottomDrawer, _default$i as Button, Cards, _default$8 as Category, Checkbox as CheckBox, _default$b as ContactModel, CountryDropDown as CountryPicker, _default$5 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$f as CustomHeader, type CustomHeaderProps, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$k as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$a as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, _default$7 as FeedbackForm, FileUpload, FontStyle, _default$d as Line, NotificationBandge, _default$4 as OTPInput, _default$9 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, RadioButtonGroup, ShapeType, _default$6 as SingleSelectionTags, type SlideButtonHandle, Star as StarRating, _default$3 as Stepper, _default$e as SwipableList, _default$h as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, type ToastRef, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$c as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { _default$h as Accordion, _default$1 as AppointmentCard, _default$k as Badge, BottomDrawer, _default$j as Button, Cards, _default$8 as Category, Checkbox as CheckBox, _default$b as ContactModel, CountryDropDown as CountryPicker, _default$5 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$g as CustomHeader, type CustomHeaderProps, CustomIcon, _default$e as CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$l as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$a as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, _default$7 as FeedbackForm, FileUpload, FontStyle, _default$d as Line, NotificationBandge, _default$4 as OTPInput, _default$9 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, RadioButtonGroup, ShapeType, _default$6 as SingleSelectionTags, type SlideButtonHandle, Star as StarRating, _default$3 as Stepper, _default$f as SwipableList, _default$i as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, type ToastRef, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$c as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };

package/lib/index.js

@@ -7,6 +7,7 @@ var reactRedux = require('react-redux');
 var reactNative = require('react-native');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var blur = require('@react-native-community/blur');
+var Svg = require('react-native-svg');
 var Tooltip = require('react-native-walkthrough-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
@@ -41,6 +42,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
 var Progress__namespace = /*#__PURE__*/_interopNamespace(Progress);
@@ -370,13 +372,13 @@ const CustomTypography = ({
     reactNative.Text,
     {
       testID,
-      style: [textStyle, styles$C.container, style],
+      style: [textStyle, styles$B.container, style],
       ...props
     },
     text
   );
 };
-const styles$C = reactNative.StyleSheet.create({
+const styles$B = reactNative.StyleSheet.create({
   container: { writingDirection: "auto", alignSelf: "flex-start" }
 });
 
@@ -588,7 +590,7 @@ const DHRE_COLORS_TEXT = {
   DH_SURFACE_SECONDARY: "#212121"
 };
 
-const styles$B = reactNative.StyleSheet.create({
+const styles$A = reactNative.StyleSheet.create({
   badge: {
     backgroundColor: DHRE_COLORS_ALERT.DH_SUCCESS_GREEN,
     borderRadius: 15,
@@ -615,16 +617,16 @@ const Badge = ({
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Pressable,
     {
-      style: [styles$B.badge, commonStyles.centerRow, style],
+      style: [styles$A.badge, commonStyles.centerRow, style],
       testID: "BADGE",
       onPress: handleIconPress
     },
-    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$B.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
+    iconName && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.icon, iconStyle] }, React__default["default"].cloneElement(iconName)),
     text && /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         variant: "B3semiBold",
-        style: [styles$B.text, textStyle],
+        style: [styles$A.text, textStyle],
         text
       }
     )
@@ -632,7 +634,7 @@ const Badge = ({
 };
 var Badge$1 = withThemeProvider(Badge);
 
-const styles$A = reactNative.StyleSheet.create({
+const styles$z = reactNative.StyleSheet.create({
   mainContainer: {
     flex: 1,
     justifyContent: "flex-end"
@@ -712,52 +714,132 @@ const BottomDrawer = ({
         behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
         style: { flex: 1 }
       },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
         blur.BlurView,
         {
-          style: [styles$A.blurView, blurViewStyle],
+          style: [styles$z.blurView, blurViewStyle],
           blurType,
           blurAmount
         }
-      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$A.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$A.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+      ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.leftIconStyle,
+        style: styles$z.leftIconStyle,
         onPress: onLeftIconPress
       }) : null, /* @__PURE__ */ React__default["default"].createElement(
         CustomTypography,
         {
           variant: titleVariant,
           text: title,
-          style: { ...styles$A.title, ...titleStyle }
+          style: { ...styles$z.title, ...titleStyle }
         }
       ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
         width: moderateScale(24),
         height: moderateScale(24),
-        style: styles$A.rightIconStyle,
+        style: styles$z.rightIconStyle,
         onPress: toggleModal
       }) : null)), children))
     ))
   );
 };
 
-const styles$z = reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "transparent",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    zIndex: 1e3
-  }
-});
+const createStyles$3 = (theme) => {
+  return reactNative.StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.3)"
+    },
+    box: {
+      width: 148,
+      height: 187,
+      backgroundColor: theme.SURFACE_PRIMARY,
+      borderRadius: 16,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      elevation: 5
+    },
+    loader: {
+      width: 80,
+      height: 80,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    text: {
+      marginTop: 16,
+      textAlign: "center",
+      alignSelf: "center",
+      alignContent: "center",
+      color: theme.CONTENT_PRIMARY
+    }
+  });
+};
 
 const CustomLoader = ({ loading }) => {
+  const rotateAnim = React.useRef(new reactNative.Animated.Value(0)).current;
+  const { theme, mode } = useTheme();
+  const styles = createStyles$3(theme);
+  React.useEffect(() => {
+    if (loading) {
+      reactNative.Animated.loop(
+        reactNative.Animated.parallel([
+          reactNative.Animated.timing(rotateAnim, {
+            toValue: 1,
+            duration: 1500,
+            easing: reactNative.Easing.linear,
+            useNativeDriver: true
+          })
+        ])
+      ).start();
+    }
+  }, [loading]);
   if (!loading) return null;
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.ActivityIndicator, { size: "large", color: "#686868" }));
+  const spin = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Modal, { transparent: true, visible: loading, animationType: "fade" }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.backdrop }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.box }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles.loader, { transform: [{ rotate: spin }] }] }, /* @__PURE__ */ React__default["default"].createElement(Svg__default["default"], { width: "100", height: "100", viewBox: "0 0 100 100" }, /* @__PURE__ */ React__default["default"].createElement(Svg.Defs, null, /* @__PURE__ */ React__default["default"].createElement(Svg.LinearGradient, { id: "grad", x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, /* @__PURE__ */ React__default["default"].createElement(Svg.Stop, { offset: "0%", stopColor: "#000000", stopOpacity: "2" }), /* @__PURE__ */ React__default["default"].createElement(
+    Svg.Stop,
+    {
+      offset: "40%",
+      stopColor: mode === "dark" ? "#5A5A5A00" : "#686868",
+      stopOpacity: "5"
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement(
+    Svg.Stop,
+    {
+      offset: "100%",
+      stopColor: mode === "dark" ? "#FFFFFF" : "#AAAAAA",
+      stopOpacity: ".9"
+    }
+  ))), /* @__PURE__ */ React__default["default"].createElement(
+    Svg.Circle,
+    {
+      cx: "50",
+      cy: "50",
+      r: "40",
+      stroke: "url(#grad)",
+      strokeWidth: "8",
+      fill: "none",
+      strokeDasharray: "250",
+      strokeLinecap: "round"
+    }
+  ))), /* @__PURE__ */ React__default["default"].createElement(
+    CustomText$1,
+    {
+      text: "Loading...",
+      style: styles.text,
+      variant: FontStyle.B4_REGULAR,
+      textColor: "#000000"
+    }
+  ))));
 };
+var CustomLoader$1 = withThemeProvider(CustomLoader);
 
 const CustomButton = ({
   title,
@@ -795,7 +877,7 @@ const CustomButton = ({
       disabled
     },
     imagePosition === "left" && leftIcon && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: iconStyle }, React__default["default"].cloneElement(leftIcon, { width: 20, height: 20 })),
-    isLoading ? /* @__PURE__ */ React__default["default"].createElement(CustomLoader, { loading: isLoading }) : /* @__PURE__ */ React__default["default"].createElement(
+    isLoading ? /* @__PURE__ */ React__default["default"].createElement(CustomLoader$1, { loading: isLoading }) : /* @__PURE__ */ React__default["default"].createElement(
       CustomText$1,
       {
         text: title,
@@ -4805,7 +4887,7 @@ exports.CustomDocumentPicker = CustomDocumentPicker$1;
 exports.CustomDropdown = CustomDropdown$1;
 exports.CustomHeader = CustomHeader$1;
 exports.CustomIcon = CustomIcon;
-exports.CustomLoader = CustomLoader;
+exports.CustomLoader = CustomLoader$1;
 exports.CustomProgressBar = CustomProgressBar;
 exports.CustomSearchBar = CustomSearchBar;
 exports.CustomSlideButton = index$2;