AlertSystem.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. "use client";
  2. import { useState, useCallback } from "react";
  3. import type { AlertOptions, AlertState } from "@/types/cash-charge";
  4. import AlertModal from "./AlertModal";
  5. export function useAlert() {
  6. const [alertState, setAlertState] = useState<AlertState>({
  7. isOpen: false,
  8. message: "",
  9. type: "info",
  10. });
  11. const showAlert = useCallback((options: AlertOptions) => {
  12. setAlertState({
  13. ...options,
  14. isOpen: true,
  15. });
  16. }, []);
  17. const hideAlert = useCallback(() => {
  18. setAlertState(prev => ({ ...prev, isOpen: false }));
  19. }, []);
  20. const alert = useCallback(
  21. (message: string, type: AlertOptions["type"] = "info") => {
  22. showAlert({ message, type });
  23. },
  24. [showAlert]
  25. );
  26. const confirm = useCallback(
  27. (message: string, onConfirm?: () => void, onCancel?: () => void) => {
  28. return new Promise<boolean>(resolve => {
  29. showAlert({
  30. message,
  31. type: "warning",
  32. showCancel: true,
  33. onConfirm: () => {
  34. if (onConfirm) onConfirm();
  35. resolve(true);
  36. hideAlert();
  37. },
  38. onCancel: () => {
  39. if (onCancel) onCancel();
  40. resolve(false);
  41. hideAlert();
  42. },
  43. });
  44. });
  45. },
  46. [showAlert, hideAlert]
  47. );
  48. return {
  49. alertState,
  50. showAlert,
  51. hideAlert,
  52. alert,
  53. confirm,
  54. };
  55. }
  56. interface AlertSystemProps {
  57. alertState: AlertState;
  58. onHideAlert: () => void;
  59. }
  60. export function AlertSystem({ alertState, onHideAlert }: AlertSystemProps) {
  61. return (
  62. <AlertModal
  63. isOpen={alertState.isOpen}
  64. onClose={onHideAlert}
  65. title={alertState.title}
  66. message={alertState.message}
  67. type={alertState.type}
  68. confirmText={alertState.confirmText}
  69. showCancel={alertState.showCancel}
  70. cancelText={alertState.cancelText}
  71. onConfirm={alertState.onConfirm}
  72. onCancel={alertState.onCancel}
  73. />
  74. );
  75. }