@dropi/react-native-design-system 0.3.7 → 0.3.9

package/lib/molecules/Toasts/FeedbackToast/FeedbackToast.d.ts

@@ -1,11 +1,8 @@
-export type ToastTypes = 'success' | 'error' | 'warning' | 'info';
-export type ToastConfig = {
+import type { ToastTypes } from '../types';
+export type FeedbackToastProps = {
     type: ToastTypes;
     title?: string;
     message?: string;
-    setShowToast: (show: boolean) => void;
+    onClose: () => void;
 };
-export type ToastRef = {
-    animateOut: () => void;
-};
-export declare const FeedbackToast: import("react").ForwardRefExoticComponent<ToastConfig & import("react").RefAttributes<ToastRef>>;
+export declare const FeedbackToast: ({ type, title, message, onClose }: FeedbackToastProps) => import("react/jsx-runtime").JSX.Element;

package/lib/molecules/Toasts/FeedbackToast/FeedbackToast.js

@@ -12,48 +12,17 @@ var _constants = require("../../../constants");
 var _atoms = require("../../../atoms");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef)(({
+const FeedbackToast = ({
   type,
   title,
   message,
-  setShowToast
-}, ref) => {
-  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-100)).current;
-  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  onClose
+}) => {
   const animation = (0, _react.useRef)(null);
-  const closeToast = () => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    _reactNative.Animated.timing(slideAnim, {
-      toValue: -100,
-      duration: 400,
-      useNativeDriver: false
-    }).start(() => {
-      setIsAnimating(false);
-      setShowToast(false);
-    });
-  };
-  (0, _react.useEffect)(() => {
-    // playSound()
-    _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
-      duration: 300,
-      useNativeDriver: false
-    }), _reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
-      duration: 120,
-      useNativeDriver: false
-    })]).start();
-  }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    animateOut: closeToast
-  }));
   const lottieFile = type === 'success' ? require('../../../../assets/lottie/afirmacion.json') : type === 'error' ? require('../../../../assets/lottie/buscando.json') : type === 'warning' ? require('../../../../assets/lottie/alerta.json') : require('../../../../assets/lottie/pregunta.json');
   const bandColor = type === 'success' ? _constants.colors['Success-500'].light : type === 'error' ? _constants.colors['Error-500'].light : type === 'warning' ? _constants.colors['Warning-500'].light : _constants.colors['Info-500'].light;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [styles.toastContainer, {
-      top: slideAnim
-    }],
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.toastContainer,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         backgroundColor: bandColor,
@@ -108,15 +77,14 @@ const FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef
         variant: "secondary",
         size: "large",
         postIcon: "close-large",
-        onPress: closeToast
+        onPress: onClose
       })]
     })]
   });
-});
+};
+exports.FeedbackToast = FeedbackToast;
 const styles = _reactNative.StyleSheet.create({
   toastContainer: {
-    position: 'absolute',
-    zIndex: 99,
     backgroundColor: '#fff',
     width: _utils.windowWidth - 32,
     maxWidth: 700,
@@ -131,7 +99,6 @@ const styles = _reactNative.StyleSheet.create({
     },
     shadowOpacity: 0.25,
     shadowRadius: _constants.radius['border-1'],
-    elevation: 5,
-    alignSelf: 'center'
+    elevation: 5
   }
 });

package/lib/molecules/Toasts/ToastProvider/ToastProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ShowToastParams } from '../types';
+type ToastContextValue = {
+    showToast: (params: ShowToastParams) => void;
+};
+export declare const ToastContext: React.Context<ToastContextValue | undefined>;
+type ToastProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ToastProvider: ({ children }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Toasts/ToastProvider/ToastProvider.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastProvider = exports.ToastContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _FeedbackToast = require("../FeedbackToast/FeedbackToast");
+var _utils = require("../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ToastContext = exports.ToastContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const DEFAULT_DURATION = 4000;
+const ToastProvider = ({
+  children
+}) => {
+  const [currentToast, setCurrentToast] = (0, _react.useState)(null);
+  const [queue, setQueue] = (0, _react.useState)([]);
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-200)).current;
+  const timeoutRef = (0, _react.useRef)(null);
+  const animationRef = (0, _react.useRef)(null);
+  const toastIdCounter = (0, _react.useRef)(0);
+
+  // Cleanup timers on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
+    };
+  }, []);
+
+  // Animate in the toast
+  const animateIn = (0, _react.useCallback)(() => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    slideAnim.setValue(-200); // Reset to initial position
+
+    animationRef.current = _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
+      duration: 300,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
+      duration: 120,
+      useNativeDriver: true
+    })]);
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+      }
+    });
+  }, [slideAnim, isAnimating]);
+
+  // Animate out the toast
+  const animateOut = (0, _react.useCallback)(callback => {
+    if (isAnimating && animationRef.current) {
+      animationRef.current.stop();
+    }
+    setIsAnimating(true);
+    animationRef.current = _reactNative.Animated.timing(slideAnim, {
+      toValue: -200,
+      duration: 400,
+      useNativeDriver: true
+    });
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+        // Defer state updates to avoid useInsertionEffect error
+        requestAnimationFrame(() => {
+          setCurrentToast(null);
+          if (callback) {
+            callback();
+          }
+        });
+      }
+    });
+  }, [slideAnim, isAnimating]);
+
+  // Process the next toast in the queue
+  const processQueue = (0, _react.useCallback)(() => {
+    // Use setTimeout to defer state update
+    setTimeout(() => {
+      setQueue(prevQueue => {
+        if (prevQueue.length === 0) return prevQueue;
+        const [nextToast, ...remainingQueue] = prevQueue;
+        setCurrentToast(nextToast);
+        return remainingQueue;
+      });
+    }, 0);
+  }, []);
+
+  // Handle auto-dismiss
+  (0, _react.useEffect)(() => {
+    if (!currentToast) return;
+
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Animate in
+    animateIn();
+
+    // Set auto-dismiss if duration > 0
+    if (currentToast.duration && currentToast.duration > 0) {
+      timeoutRef.current = setTimeout(() => {
+        animateOut(() => {
+          processQueue();
+        });
+      }, currentToast.duration);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [currentToast, animateIn, animateOut, processQueue]);
+
+  // Handle manual close
+  const handleClose = (0, _react.useCallback)(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    animateOut(() => {
+      processQueue();
+    });
+  }, [animateOut, processQueue]);
+
+  // Public API: showToast
+  const showToast = (0, _react.useCallback)(params => {
+    const newToast = {
+      id: `toast-${toastIdCounter.current++}`,
+      type: params.type,
+      title: params.title,
+      message: params.message,
+      duration: params.duration ?? DEFAULT_DURATION
+    };
+    if (!currentToast && !isAnimating) {
+      // No toast showing, show immediately
+      setCurrentToast(newToast);
+    } else {
+      // Toast already showing, add to queue
+      setQueue(prevQueue => [...prevQueue, newToast]);
+    }
+  }, [currentToast, isAnimating]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContext.Provider, {
+    value: {
+      showToast
+    },
+    children: [children, currentToast && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.toastWrapper, {
+        transform: [{
+          translateY: slideAnim
+        }]
+      }],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackToast.FeedbackToast, {
+        type: currentToast.type,
+        title: currentToast.title,
+        message: currentToast.message,
+        onClose: handleClose
+      })
+    })]
+  });
+};
+exports.ToastProvider = ToastProvider;
+const styles = _reactNative.StyleSheet.create({
+  toastWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+    alignItems: 'center'
+  }
+});

package/lib/molecules/Toasts/ToastProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './useToast';

package/lib/molecules/Toasts/ToastProvider/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.ToastProvider;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () {
+    return _useToast.useToast;
+  }
+});
+var _ToastProvider = require("./ToastProvider");
+var _useToast = require("./useToast");

package/lib/molecules/Toasts/ToastProvider/useToast.d.ts

@@ -0,0 +1,3 @@
+export declare const useToast: () => {
+    showToast: (params: import("..").ShowToastParams) => void;
+};

package/lib/molecules/Toasts/ToastProvider/useToast.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToast = void 0;
+var _react = require("react");
+var _ToastProvider = require("./ToastProvider");
+const useToast = () => {
+  const context = (0, _react.useContext)(_ToastProvider.ToastContext);
+  if (context === undefined) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+exports.useToast = useToast;

package/lib/molecules/Toasts/index.d.ts

@@ -1 +1,3 @@
+export * from './types';
 export * from './FeedbackToast';
+export * from './ToastProvider';

package/lib/molecules/Toasts/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
 var _FeedbackToast = require("./FeedbackToast");
 Object.keys(_FeedbackToast).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -13,4 +24,15 @@ Object.keys(_FeedbackToast).forEach(function (key) {
       return _FeedbackToast[key];
     }
   });
+});
+var _ToastProvider = require("./ToastProvider");
+Object.keys(_ToastProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToastProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToastProvider[key];
+    }
+  });
 });

package/lib/molecules/Toasts/types.d.ts

@@ -0,0 +1,11 @@
+export type ToastTypes = 'success' | 'error' | 'warning' | 'info';
+export type ToastConfig = {
+    id: string;
+    type: ToastTypes;
+    title?: string;
+    message?: string;
+    duration?: number;
+};
+export type ShowToastParams = Omit<ToastConfig, 'id'> & {
+    duration?: number;
+};

package/lib/molecules/Toasts/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",