pay-sdk-react/dist/es/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.

const _excluded = ["className", "children"],
  _excluded2 = ["className", "children"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React, { useCallback, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { isFunction } from '../utils/is';
import cs from '../utils/classNames';
import { useLockScroll } from '../hooks/use-lock-scroll';
import { clientDocument } from '../utils/dom';
import { getPrefixCls } from '../utils/getPrefixCls';
import Button from '../Button';
const classPrefix = 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 _ref = retryButtonProps || {},
    {
      className: retryButtonClassName,
      children: retryButtonChildren = '重新支付'
    } = _ref,
    retryButtonPropsRest = _objectWithoutProperties(_ref, _excluded);
  const _ref2 = finishButtonProps || {},
    {
      className: finishButtonClassName,
      children: finishButtonChildren = '支付完成'
    } = _ref2,
    finishButtonPropsRest = _objectWithoutProperties(_ref2, _excluded2);
  const el = useRef(clientDocument === null || clientDocument === void 0 ? void 0 : clientDocument.createElement('div'));
  const ref = useRef(null);
  useLockScroll(ref, !!visible);
  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 = cs(classPrefix, className);
  const contentClassNames = cs("".concat(classPrefix, "__content"), contentClassName);
  const handleMaskClose = useCallback(() => {
    if (maskClosable) onClose === null || onClose === void 0 || onClose();
  }, [maskClosable, onClose]);
  const renderFooter = () => {
    if (footer === null) return;
    const retryButtonNode = /*#__PURE__*/React.createElement(Button, _extends({
      className: cs("".concat(classPrefix, "__btn"), "".concat(classPrefix, "__btn--retry"), retryButtonClassName)
    }, retryButtonPropsRest), retryButtonChildren);
    const finishButtonNode = /*#__PURE__*/React.createElement(Button, _extends({
      className: cs("".concat(classPrefix, "__btn"), "".concat(classPrefix, "__btn--finish"), finishButtonClassName)
    }, finishButtonPropsRest), finishButtonChildren);
    const footerContent = isFunction(footer) ? footer(retryButtonNode, finishButtonNode) : footer || /*#__PURE__*/React.createElement(React.Fragment, null, retryButtonNode, finishButtonNode);
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(classPrefix, "__actions")
    }, footerContent);
  };
  if (!visible || !el.current) return null;
  const modalContent = /*#__PURE__*/React.createElement("div", {
    className: classNames,
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__mask"),
    onClick: handleMaskClose
  }), /*#__PURE__*/React.createElement("div", {
    className: contentClassNames,
    style: contentStyle
  }, showClose && /*#__PURE__*/React.createElement("button", {
    className: "".concat(classPrefix, "__close"),
    onClick: onClose,
    "aria-label": "\u5173\u95ED"
  }, "\xD7"), icon && /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__icon")
  }, icon), title && /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__title")
  }, title), desc && /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__desc")
  }, desc), children && /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__content-wrapper")
  }, children), renderFooter()));
  return /*#__PURE__*/ReactDOM.createPortal(modalContent, el.current);
};
export * from './interface';
export default PayModal;