dhre-ui-kit 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/App.tsx

@@ -1,42 +1,15 @@
 import React from 'react';
-import {ThemeProvider} from './theme/ThemeContext';
-import {Badge, Line} from './index';
-import {ArrowLeft, CalenderDots} from './assets';
-import {View} from 'react-native';
-import CustomButton from './components/button/Button';
+import {SafeAreaView} from 'react-native';
+import ToastProvider from './components/toast/ToastProvider';
+import YourComponent from './components/toast/yourCompo';
 
 const App = () => {
   return (
-    <ThemeProvider>
-      <View style={{marginTop: 50}}>
-        <Badge
-          handleIconPress={function (): void {}}
-          text="gggsdfghjhgf"
-          style={{margin: 20}}
-          iconName={<CalenderDots width={20} height={20} />}
-          textStyle={{color: 'black'}}
-          iconStyle={{}}
-        />
-        <Line />
-        <CustomButton
-          title="Yes"
-          onPress={() => console.log('Yes Button Pressed')}
-          leftIcon={<ArrowLeft />}
-          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
-          titleVariant="L2_REGULAR"
-          containerStyle={[
-            {
-              borderWidth: 1,
-              borderRadius: 20,
-
-              height: 40,
-            },
-          ]}
-          // iconStyle={styles.iconStyle}
-          imagePosition="left"
-        />
-      </View>
-    </ThemeProvider>
+    <ToastProvider>
+      <SafeAreaView style={{flex: 1}}>
+        <YourComponent />
+      </SafeAreaView>
+    </ToastProvider>
   );
 };
 

package/src/components/toast/Toast.interface.ts

@@ -1,8 +1,26 @@
-export interface ToastProps {
-  message: string;
-  testId?: string;
-  isSuccess?: boolean;
-  btnText?: string;
-  onBtnPress?: () => void;
-  setToast: (val: boolean) => void;
+// export type ShowToast = (
+//   message: string,
+//   duration?: number,
+//   isSuccess?: boolean,
+//   btnText?: string | null,
+//   onBtnPress?: (() => void) | null,
+// ) => void;
+
+export interface ToastRef {
+  showToast: (
+    message: string,
+    duration?: number,
+    isSuccess?: boolean,
+    buttonText?: string | null,
+    buttonAction?: (() => void) | null,
+  ) => void;
 }
+
+export type ShowToast = (
+  message: string,
+  duration?: number,
+  isSuccess?: boolean,
+  buttonText?: string | null,
+  buttonAction?: (() => void) | null,
+) => void;
+export interface ToastProps {}

package/src/components/toast/Toast.test.tsx

@@ -7,15 +7,7 @@ jest.mock('react-native-progress', () => ({
 }));
 
 describe('Toast Component', () => {
-  it('Component  renders correctly', () => {
-    const {getByTestId} = render(
-      <Toast
-        message="Test message"
-        setToast={jest.fn()}
-        btnText="Undo"
-        onBtnPress={jest.fn()}
-      />,
-    );
-    expect(getByTestId('TOAST')).toBeTruthy();
+  it('Component renders correctly', () => {
+    render(<Toast />);
   });
 });

package/src/components/toast/Toast.tsx

@@ -1,78 +1,101 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import {View, Animated, Pressable} from 'react-native';
 import * as Progress from 'react-native-progress';
 import {CrossIcon, CircleTick} from '../../assets';
 import CustomTypography from '../customTypography/CustomTypography';
-import {horizontalScale, moderateScale, width} from '../../utils/stylehelper';
-import {ToastProps} from './Toast.interface';
+import {horizontalScale, width} from '../../utils/stylehelper';
+import {ToastRef, ShowToast, ToastProps} from './Toast.interface'; // Import the interfaces
 import styles from './Toast.styles';
 
-const Toast = ({
-  message,
-  testId = 'TOAST',
-  isSuccess = true,
-  btnText,
-  onBtnPress,
-  setToast,
-}: ToastProps) => {
+const Toast = React.forwardRef<ToastRef, ToastProps>((_props, ref) => {
+  const [visible, setVisible] = useState(false);
+  const [message, setMessage] = useState('');
+  const [isSuccess, setIsSuccess] = useState(true);
+  const [btnText, setBtnText] = useState<string | null>(null);
+  const [onBtnPress, setOnBtnPress] = useState<(() => void) | null>(null);
   const [progress, setProgress] = useState(0);
-  const bottom = React.useRef(new Animated.Value(-80)).current;
 
-  function animate() {
+  const bottom = useRef(new Animated.Value(-80)).current;
+
+  const showToast: ShowToast = (
+    toastMessage,
+    duration = 3000,
+    success = true,
+    buttonText = null,
+    buttonAction = null,
+  ) => {
+    setMessage(toastMessage);
+    setIsSuccess(success);
+    setBtnText(buttonText);
+    setOnBtnPress(() => buttonAction);
+    setVisible(true);
+
     Animated.timing(bottom, {
       toValue: 20,
-      duration: 2000,
+      duration: 500,
+      useNativeDriver: false,
+    }).start();
+
+    setTimeout(() => {
+      hideToast();
+    }, duration);
+  };
+
+  const hideToast = () => {
+    Animated.timing(bottom, {
+      toValue: -80,
+      duration: 500,
       useNativeDriver: false,
     }).start(() => {
-      setToast(false);
+      setVisible(false);
+      setMessage('');
     });
-  }
-
-  useEffect(() => {
-    animate();
-  }, []);
+  };
 
   const simulateProgress = () => {
     setProgress(prev => (prev + 0.1 > 1 ? 1 : prev + 0.1));
   };
 
   useEffect(() => {
-    const interval = setInterval(simulateProgress, 180);
-    return () => clearInterval(interval);
-  }, []);
+    if (visible) {
+      setProgress(0);
+      const interval = setInterval(simulateProgress, 180);
+      return () => clearInterval(interval);
+    }
+  }, [visible]);
+
+  React.useImperativeHandle(ref, () => ({
+    showToast,
+  }));
 
-  return (
+  return visible ? (
     <Animated.View
       style={[
         styles.container,
         {bottom},
         {backgroundColor: isSuccess ? '#04743F' : '#DB3056'},
       ]}
-      testID={testId}>
+      testID="TOAST">
       <View style={styles.toastContainer}>
         <View style={styles.innerContainer}>
-          {React.cloneElement(isSuccess ? <CircleTick /> : <CrossIcon />, {
-            width: moderateScale(20),
-            height: moderateScale(20),
-            style: styles.icon,
-          })}
+          {isSuccess ? <CircleTick /> : <CrossIcon />}
           <CustomTypography
-            variant={'L2_REGULAR'}
+            variant="L2_REGULAR"
             text={message}
             style={styles.messageText}
           />
-          {btnText ? (
+          {btnText && (
             <Pressable
               style={styles.button}
-              onPress={onBtnPress}
-              testID={`${testId}-BTN`}>
+              onPress={onBtnPress || undefined}
+              testID="TOAST-BTN">
               <CustomTypography
-                variant={'L2_BOLD'}
+                variant="L2_BOLD"
                 text={btnText}
                 style={styles.buttonText}
               />
             </Pressable>
-          ) : null}
+          )}
         </View>
       </View>
       <Progress.Bar
@@ -83,7 +106,10 @@ const Toast = ({
         borderColor="transparent"
       />
     </Animated.View>
-  );
-};
+  ) : null;
+});
+
+// Set the display name for debugging purposes
+Toast.displayName = 'Toast';
 
 export default Toast;

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,61 @@
+import React, {
+  createContext,
+  useRef,
+  useImperativeHandle,
+  useContext,
+  forwardRef,
+} from 'react';
+import Toast from './Toast';
+import {ShowToast, ToastRef} from './Toast.interface';
+
+const ToastContext = createContext<{showToast: ShowToast} | undefined>(
+  undefined,
+);
+
+const ToastProvider = forwardRef<ToastRef, React.PropsWithChildren<object>>(
+  (props, ref) => {
+    const toastRef = useRef<ToastRef>(null);
+
+    useImperativeHandle(ref, () => ({
+      showToast: (message, duration, isSuccess, btnText, onBtnPress) => {
+        toastRef.current?.showToast(
+          message,
+          duration,
+          isSuccess,
+          btnText,
+          onBtnPress,
+        );
+      },
+    }));
+
+    return (
+      <ToastContext.Provider
+        value={{
+          showToast: (message, duration, isSuccess, btnText, onBtnPress) => {
+            toastRef.current?.showToast(
+              message,
+              duration,
+              isSuccess,
+              btnText,
+              onBtnPress,
+            );
+          },
+        }}>
+        {props.children}
+        <Toast ref={toastRef} />
+      </ToastContext.Provider>
+    );
+  },
+);
+
+ToastProvider.displayName = 'ToastProvider';
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+export default ToastProvider;

package/src/components/toast/typings.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+
+export type ShowToast = (text: string, duration?: number) => void;
+
+export type Provider = React.FunctionComponent & {
+  ref: ToastRef | null;
+};
+
+export type RegisterRef = (ref: ToastRef) => void;
+
+export interface ToastRef {
+  showToast: ShowToast;
+}
+
+export interface ToastProps {
+  ref: (ref: ToastRef) => void;
+}

package/src/components/toast/yourCompo.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {View, Button} from 'react-native';
+import {useToast} from './ToastProvider'; // Adjust the path as necessary
+
+const YourComponent = () => {
+  const {showToast} = useToast();
+
+  const handleShowToast = () => {
+    showToast('This is a toast message!', 3000, true, 'Close', () => {
+      console.log('Button pressed!');
+    });
+  };
+
+  return (
+    <View>
+      <Button title="Show Toast" onPress={handleShowToast} />
+    </View>
+  );
+};
+
+export default YourComponent;

package/src/index.ts

@@ -49,5 +49,6 @@ export {
 } from './utils/stylehelper';
 
 export {default} from './theme/themes';
-
+export {default as useToast} from './components/toast/ToastProvider';
+export {default as ToastProvider} from './components/toast/ToastProvider';
 export {default as CustomTextTest} from '../__mocks__/custom-text.mock';