pay-sdk-react
Version:
A cross-platform payment SDK for React, supporting Alipay, WeChat Pay, PayPal, Stripe, Payssion, and Airwallex, compatible with H5, PC, and App environments.
127 lines (126 loc) • 6.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
exports.default = void 0;
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];
}
});
});
const _excluded = ["className", "children"],
_excluded2 = ["className", "children"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
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; }
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 _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 = (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)("".concat(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, _extends({
className: (0, _classNames.default)("".concat(classPrefix, "__btn"), "".concat(classPrefix, "__btn--retry"), retryButtonClassName)
}, retryButtonPropsRest), retryButtonChildren);
const finishButtonNode = /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
className: (0, _classNames.default)("".concat(classPrefix, "__btn"), "".concat(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: "".concat(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: "".concat(classPrefix, "__mask"),
onClick: handleMaskClose
}), /*#__PURE__*/_react.default.createElement("div", {
className: contentClassNames,
style: contentStyle
}, showClose && /*#__PURE__*/_react.default.createElement("button", {
className: "".concat(classPrefix, "__close"),
onClick: onClose,
"aria-label": "\u5173\u95ED"
}, "\xD7"), icon && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(classPrefix, "__icon")
}, icon), title && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(classPrefix, "__title")
}, title), desc && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(classPrefix, "__desc")
}, desc), children && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(classPrefix, "__content-wrapper")
}, children), renderFooter()));
return /*#__PURE__*/_reactDom.default.createPortal(modalContent, el.current);
};
var _default = exports.default = PayModal;