pay-sdk-react/dist/lib/pay-modal/pay-modal.js

A cross-platform payment SDK for React, supporting Alipay, WeChat Pay, PayPal, Stripe, Payssion, and Airwallex, compatible with H5, PC, and App environments.

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {};
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _is = require("../utils/is");
var _classNames = _interopRequireDefault(require("../utils/classNames"));
var _useLockScroll = require("../hooks/use-lock-scroll");
var _dom = require("../utils/dom");
var _getPrefixCls = require("../utils/getPrefixCls");
var _Button = _interopRequireDefault(require("../Button"));
var _interface = require("./interface");
Object.keys(_interface).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _interface[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function () {
      return _interface[key];
    }
  });
});
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 classPrefix = (0, _getPrefixCls.getPrefixCls)('modal');
const PayModal = props => {
  const {
    visible,
    title,
    desc,
    retryButtonProps,
    finishButtonProps,
    icon,
    showClose = true,
    maskClosable = false,
    onClose,
    children,
    footer,
    className,
    style,
    contentClassName,
    contentStyle,
    container
  } = props;
  const {
    className: retryButtonClassName,
    children: retryButtonChildren = '重新支付',
    ...retryButtonPropsRest
  } = retryButtonProps || {};
  const {
    className: finishButtonClassName,
    children: finishButtonChildren = '支付完成',
    ...finishButtonPropsRest
  } = finishButtonProps || {};
  const el = (0, _react.useRef)(_dom.clientDocument === null || _dom.clientDocument === void 0 ? void 0 : _dom.clientDocument.createElement('div'));
  const ref = (0, _react.useRef)(null);
  (0, _useLockScroll.useLockScroll)(ref, !!visible);
  (0, _react.useEffect)(() => {
    if (visible) {
      const mountNode = container || document.body;
      const currentEl = el.current;
      if (currentEl) {
        mountNode.appendChild(currentEl);
      }
      return () => {
        if (currentEl && mountNode.contains(currentEl)) {
          mountNode.removeChild(currentEl);
        }
      };
    }
  }, [visible, container]);
  const classNames = (0, _classNames.default)(classPrefix, className);
  const contentClassNames = (0, _classNames.default)(`${classPrefix}__content`, contentClassName);
  const handleMaskClose = (0, _react.useCallback)(() => {
    if (maskClosable) onClose === null || onClose === void 0 || onClose();
  }, [maskClosable, onClose]);
  const renderFooter = () => {
    if (footer === null) return;
    const retryButtonNode = /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
      className: (0, _classNames.default)(`${classPrefix}__btn`, `${classPrefix}__btn--retry`, retryButtonClassName)
    }, retryButtonPropsRest), retryButtonChildren);
    const finishButtonNode = /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
      className: (0, _classNames.default)(`${classPrefix}__btn`, `${classPrefix}__btn--finish`, finishButtonClassName)
    }, finishButtonPropsRest), finishButtonChildren);
    const footerContent = (0, _is.isFunction)(footer) ? footer(retryButtonNode, finishButtonNode) : footer || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, retryButtonNode, finishButtonNode);
    return /*#__PURE__*/_react.default.createElement("div", {
      className: `${classPrefix}__actions`
    }, footerContent);
  };
  if (!visible || !el.current) return null;
  const modalContent = /*#__PURE__*/_react.default.createElement("div", {
    className: classNames,
    style: style
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__mask`,
    onClick: handleMaskClose
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: contentClassNames,
    style: contentStyle
  }, showClose && /*#__PURE__*/_react.default.createElement("button", {
    className: `${classPrefix}__close`,
    onClick: onClose,
    "aria-label": "\u5173\u95ED"
  }, "\xD7"), icon && /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__icon`
  }, icon), title && /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__title`
  }, title), desc && /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__desc`
  }, desc), children && /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__content-wrapper`
  }, children), renderFooter()));
  return /*#__PURE__*/_reactDom.default.createPortal(modalContent, el.current);
};
var _default = exports.default = PayModal;