@pisell/private-materials 6.3.15 → 6.4.2

package/lib/components/checkout/components/PaymentResultToast/PaymentResultToastProvider.js

@@ -0,0 +1,170 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkout/components/PaymentResultToast/PaymentResultToastProvider.tsx
+var PaymentResultToastProvider_exports = {};
+__export(PaymentResultToastProvider_exports, {
+  PaymentResultToastProvider: () => PaymentResultToastProvider,
+  closePaymentResultToast: () => closePaymentResultToast,
+  showPaymentResultToast: () => showPaymentResultToast,
+  showPaymentResultToastFailed: () => showPaymentResultToastFailed,
+  showPaymentResultToastSuccess: () => showPaymentResultToastSuccess,
+  showPaymentResultToastWalletPassFailed: () => showPaymentResultToastWalletPassFailed,
+  usePaymentResultToast: () => usePaymentResultToast
+});
+module.exports = __toCommonJS(PaymentResultToastProvider_exports);
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_index = __toESM(require("./index"));
+var PaymentResultToastContext = (0, import_react.createContext)(null);
+var globalPaymentResultToastContext = null;
+var DEFAULT_TOAST_CONFIG = {
+  width: 680,
+  mask: true,
+  maskClosable: false,
+  closable: true,
+  zIndex: 2e3
+};
+var PaymentResultToastProvider = ({ children }) => {
+  const [toastProps, setToastProps] = (0, import_react.useState)(null);
+  const customOnCloseRef = (0, import_react.useRef)();
+  const customOnCountdownCompleteRef = (0, import_react.useRef)();
+  const closeToast = (0, import_react.useCallback)(() => {
+    setToastProps(null);
+  }, []);
+  const handleClose = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = customOnCloseRef.current) == null ? void 0 : _a.call(customOnCloseRef);
+    closeToast();
+  }, [closeToast]);
+  const handleCountdownComplete = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = customOnCountdownCompleteRef.current) == null ? void 0 : _a.call(customOnCountdownCompleteRef);
+  }, []);
+  const showToast = (0, import_react.useCallback)((config) => {
+    customOnCloseRef.current = config.onClose;
+    customOnCountdownCompleteRef.current = config.onCountdownComplete;
+    const finalConfig = {
+      ...DEFAULT_TOAST_CONFIG,
+      visible: true,
+      statusClassName: config.statusClassName,
+      title: config.title,
+      subtitle: config.subtitle,
+      changeDueText: config.changeDueText,
+      actionButtons: config.actionButtons || [],
+      autoClose: config.autoClose,
+      autoCloseDelay: config.autoCloseDelay || 5,
+      showCountdownProgress: config.showCountdownProgress,
+      onCountdownComplete: handleCountdownComplete,
+      // 使用稳定的handleCountdownComplete函数
+      onClose: handleClose
+      // 使用稳定的handleClose函数
+    };
+    setToastProps(finalConfig);
+  }, [handleClose, handleCountdownComplete]);
+  const showSuccess = (0, import_react.useCallback)((config) => {
+    showToast({ ...config, statusClassName: "success" });
+  }, [showToast]);
+  const showFailed = (0, import_react.useCallback)((config) => {
+    showToast({ ...config, statusClassName: "failed" });
+  }, [showToast]);
+  const showWalletPassFailed = (0, import_react.useCallback)((config) => {
+    showToast({ ...config, statusClassName: "wallet-pass-failed" });
+  }, [showToast]);
+  const isVisible = !!(toastProps == null ? void 0 : toastProps.visible);
+  const contextValue = {
+    showSuccess,
+    showFailed,
+    showWalletPassFailed,
+    showToast,
+    closeToast,
+    isVisible
+  };
+  (0, import_react.useEffect)(() => {
+    globalPaymentResultToastContext = contextValue;
+    return () => {
+      globalPaymentResultToastContext = null;
+    };
+  }, [contextValue]);
+  return /* @__PURE__ */ import_react.default.createElement(PaymentResultToastContext.Provider, { value: contextValue }, children, toastProps && (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...toastProps }),
+    document.body
+  ));
+};
+var usePaymentResultToast = () => {
+  const context = (0, import_react.useContext)(PaymentResultToastContext);
+  if (!context) {
+    throw new Error("usePaymentResultToast must be used within a PaymentResultToastProvider");
+  }
+  return context;
+};
+var showPaymentResultToastSuccess = (config) => {
+  if (globalPaymentResultToastContext) {
+    globalPaymentResultToastContext.showSuccess(config);
+  } else {
+    console.error("PaymentResultToastProvider not found. Please wrap your app with PaymentResultToastProvider.");
+  }
+};
+var showPaymentResultToastFailed = (config) => {
+  if (globalPaymentResultToastContext) {
+    globalPaymentResultToastContext.showFailed(config);
+  } else {
+    console.error("PaymentResultToastProvider not found. Please wrap your app with PaymentResultToastProvider.");
+  }
+};
+var showPaymentResultToastWalletPassFailed = (config) => {
+  if (globalPaymentResultToastContext) {
+    globalPaymentResultToastContext.showWalletPassFailed(config);
+  } else {
+    console.error("PaymentResultToastProvider not found. Please wrap your app with PaymentResultToastProvider.");
+  }
+};
+var showPaymentResultToast = (config) => {
+  if (globalPaymentResultToastContext) {
+    globalPaymentResultToastContext.showToast(config);
+  } else {
+    console.error("PaymentResultToastProvider not found. Please wrap your app with PaymentResultToastProvider.");
+  }
+};
+var closePaymentResultToast = () => {
+  if (globalPaymentResultToastContext) {
+    globalPaymentResultToastContext.closeToast();
+  } else {
+    console.error("PaymentResultToastProvider not found.");
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentResultToastProvider,
+  closePaymentResultToast,
+  showPaymentResultToast,
+  showPaymentResultToastFailed,
+  showPaymentResultToastSuccess,
+  showPaymentResultToastWalletPassFailed,
+  usePaymentResultToast
+});

package/lib/components/checkout/components/PaymentResultToast/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PaymentResultToastProps, PaymentResultToastConfig } from './types';
+import './index.less';
+declare const PaymentResultToast: React.FC<PaymentResultToastProps & PaymentResultToastConfig>;
+export default PaymentResultToast;
+export { PaymentResultToastProvider, usePaymentResultToast, showPaymentResultToastSuccess, showPaymentResultToastFailed, showPaymentResultToastWalletPassFailed, showPaymentResultToast, closePaymentResultToast } from './PaymentResultToastProvider';
+export type { PaymentResultToastProps, PaymentResultToastConfig, ActionButtonProps, ActionButtonGroupList, StatusClassName } from './types';
+export type { ShowPaymentResultToastConfig, PaymentResultToastContextType } from './PaymentResultToastProvider';

package/lib/components/checkout/components/PaymentResultToast/index.js

@@ -0,0 +1,218 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkout/components/PaymentResultToast/index.tsx
+var PaymentResultToast_exports = {};
+__export(PaymentResultToast_exports, {
+  PaymentResultToastProvider: () => import_PaymentResultToastProvider.PaymentResultToastProvider,
+  closePaymentResultToast: () => import_PaymentResultToastProvider.closePaymentResultToast,
+  default: () => PaymentResultToast_default,
+  showPaymentResultToast: () => import_PaymentResultToastProvider.showPaymentResultToast,
+  showPaymentResultToastFailed: () => import_PaymentResultToastProvider.showPaymentResultToastFailed,
+  showPaymentResultToastSuccess: () => import_PaymentResultToastProvider.showPaymentResultToastSuccess,
+  showPaymentResultToastWalletPassFailed: () => import_PaymentResultToastProvider.showPaymentResultToastWalletPassFailed,
+  usePaymentResultToast: () => import_PaymentResultToastProvider.usePaymentResultToast
+});
+module.exports = __toCommonJS(PaymentResultToast_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("./utils");
+var import_index = require("./index.less");
+var import_PaymentResultToastProvider = require("./PaymentResultToastProvider");
+var COMPONENT_PREFIX = "payment-result-toast";
+var getClassName = (...classNames) => {
+  return (0, import_classnames.default)(
+    classNames.filter(Boolean).map(
+      (className) => typeof className === "string" && !className.startsWith(COMPONENT_PREFIX) ? `${COMPONENT_PREFIX}-${className}` : className
+    )
+  );
+};
+var getBaseClassName = (extraClassName) => {
+  return (0, import_classnames.default)(COMPONENT_PREFIX, extraClassName);
+};
+var PaymentResultToast = (0, import_react.memo)((props) => {
+  const {
+    // 基础属性
+    visible = false,
+    onClose,
+    className,
+    // 内容属性（已计算好）
+    statusClassName = "success",
+    title,
+    subtitle,
+    changeDueText,
+    // 操作按钮
+    actionButtons = [],
+    // 倒计时配置
+    autoClose = false,
+    autoCloseDelay = 5,
+    showCountdownProgress = true,
+    onCountdownComplete,
+    // Modal 配置
+    width,
+    height,
+    mask = true,
+    maskClosable = false,
+    closable = true,
+    zIndex
+  } = props;
+  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
+  const countdownTimeoutRef = (0, import_react.useRef)(null);
+  const onCloseRef = (0, import_react.useRef)(onClose);
+  const onCountdownCompleteRef = (0, import_react.useRef)(onCountdownComplete);
+  onCloseRef.current = onClose;
+  onCountdownCompleteRef.current = onCountdownComplete;
+  const modalConfig = (0, import_utils.getDefaultModalConfig)();
+  const clearCountdown = (0, import_react.useCallback)(() => {
+    if (countdownTimeoutRef.current) {
+      clearTimeout(countdownTimeoutRef.current);
+      countdownTimeoutRef.current = null;
+    }
+    setIsAnimating(false);
+  }, []);
+  const startCountdown = (0, import_react.useCallback)(() => {
+    if (!autoClose || !visible) return;
+    clearCountdown();
+    setIsAnimating(true);
+    countdownTimeoutRef.current = setTimeout(() => {
+      var _a, _b;
+      countdownTimeoutRef.current = null;
+      (_a = onCountdownCompleteRef.current) == null ? void 0 : _a.call(onCountdownCompleteRef);
+      (_b = onCloseRef.current) == null ? void 0 : _b.call(onCloseRef);
+    }, autoCloseDelay * 1e3);
+  }, [autoClose, autoCloseDelay, visible, clearCountdown]);
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      setIsAnimating(false);
+      if (autoClose) {
+        startCountdown();
+      }
+    } else {
+      clearCountdown();
+    }
+    return clearCountdown;
+  }, [visible, autoClose, startCountdown, clearCountdown]);
+  (0, import_react.useEffect)(() => {
+    return clearCountdown;
+  }, [clearCountdown]);
+  const handleClose = (0, import_react.useCallback)(() => {
+    var _a;
+    clearCountdown();
+    (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
+  }, [clearCountdown]);
+  const handleContentClick = (0, import_react.useCallback)((e) => {
+    e.stopPropagation();
+    if (autoClose && countdownTimeoutRef.current) {
+      clearCountdown();
+    }
+  }, [autoClose, clearCountdown]);
+  const renderTitle = () => {
+    return /* @__PURE__ */ import_react.default.createElement("h2", { className: getClassName(`${statusClassName}-title`) }, title);
+  };
+  const renderSubtitle = () => {
+    if (!subtitle) {
+      return null;
+    }
+    return subtitle;
+  };
+  const renderChangeDueInfo = () => {
+    if (!changeDueText) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName("subtitle") }, /* @__PURE__ */ import_react.default.createElement("h1", { className: getClassName("subtitle-text change-due") }, changeDueText));
+  };
+  const renderCountdownProgress = () => {
+    if (!autoClose || !showCountdownProgress || !visible) {
+      return null;
+    }
+    const progressBarClassName = (0, import_classnames.default)(
+      getClassName("countdown-progress-bar"),
+      { "animating": isAnimating }
+    );
+    const animationStyle = isAnimating ? {
+      animationDuration: `${autoCloseDelay}s`
+    } : {};
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName("countdown") }, /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName("countdown-text") }), /* @__PURE__ */ import_react.default.createElement("div", { className: getClassName("countdown-progress") }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: progressBarClassName,
+        style: animationStyle
+      }
+    )));
+  };
+  const renderActionButtons = () => {
+    if (!actionButtons || actionButtons.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_materials.ButtonGroupPreview, { buttonGroupList: actionButtons });
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open: visible,
+      onCancel: handleClose,
+      footer: null,
+      width: width || modalConfig.width,
+      mask,
+      maskClosable,
+      closable,
+      className: getBaseClassName(`${className} ${statusClassName}`),
+      style: height ? { height: `${height}px` } : void 0,
+      destroyOnClose: false,
+      forceRender: true,
+      focusTriggerAfterClose: false,
+      transitionName: "",
+      maskTransitionName: ""
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: getClassName("content", statusClassName),
+        ...{ onClick: handleContentClick }
+      },
+      renderTitle(),
+      renderSubtitle(),
+      renderChangeDueInfo(),
+      renderActionButtons()
+    ),
+    renderCountdownProgress()
+  );
+});
+PaymentResultToast.displayName = "PaymentResultToast";
+var PaymentResultToast_default = PaymentResultToast;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentResultToastProvider,
+  closePaymentResultToast,
+  showPaymentResultToast,
+  showPaymentResultToastFailed,
+  showPaymentResultToastSuccess,
+  showPaymentResultToastWalletPassFailed,
+  usePaymentResultToast
+});