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.

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "children"],
  _excluded2 = ["className", "children"];
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';
var classPrefix = getPrefixCls('modal');
var PayModal = function PayModal(props) {
  var visible = props.visible,
    title = props.title,
    desc = props.desc,
    retryButtonProps = props.retryButtonProps,
    finishButtonProps = props.finishButtonProps,
    icon = props.icon,
    _props$showClose = props.showClose,
    showClose = _props$showClose === void 0 ? true : _props$showClose,
    _props$maskClosable = props.maskClosable,
    maskClosable = _props$maskClosable === void 0 ? false : _props$maskClosable,
    onClose = props.onClose,
    children = props.children,
    footer = props.footer,
    className = props.className,
    style = props.style,
    contentClassName = props.contentClassName,
    contentStyle = props.contentStyle,
    container = props.container;
  var _ref = retryButtonProps || {},
    retryButtonClassName = _ref.className,
    _ref$children = _ref.children,
    retryButtonChildren = _ref$children === void 0 ? '重新支付' : _ref$children,
    retryButtonPropsRest = _objectWithoutProperties(_ref, _excluded);
  var _ref2 = finishButtonProps || {},
    finishButtonClassName = _ref2.className,
    _ref2$children = _ref2.children,
    finishButtonChildren = _ref2$children === void 0 ? '支付完成' : _ref2$children,
    finishButtonPropsRest = _objectWithoutProperties(_ref2, _excluded2);
  var el = useRef(clientDocument === null || clientDocument === void 0 ? void 0 : clientDocument.createElement('div'));
  var ref = useRef(null);
  useLockScroll(ref, !!visible);
  useEffect(function () {
    if (visible) {
      var mountNode = container || document.body;
      var currentEl = el.current;
      if (currentEl) {
        mountNode.appendChild(currentEl);
      }
      return function () {
        if (currentEl && mountNode.contains(currentEl)) {
          mountNode.removeChild(currentEl);
        }
      };
    }
  }, [visible, container]);
  var classNames = cs(classPrefix, className);
  var contentClassNames = cs("".concat(classPrefix, "__content"), contentClassName);
  var handleMaskClose = useCallback(function () {
    if (maskClosable) onClose === null || onClose === void 0 || onClose();
  }, [maskClosable, onClose]);
  var renderFooter = function renderFooter() {
    if (footer === null) return;
    var retryButtonNode = /*#__PURE__*/React.createElement(Button, _extends({
      className: cs("".concat(classPrefix, "__btn"), "".concat(classPrefix, "__btn--retry"), retryButtonClassName)
    }, retryButtonPropsRest), retryButtonChildren);
    var finishButtonNode = /*#__PURE__*/React.createElement(Button, _extends({
      className: cs("".concat(classPrefix, "__btn"), "".concat(classPrefix, "__btn--finish"), finishButtonClassName)
    }, finishButtonPropsRest), finishButtonChildren);
    var 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;
  var 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;