pay-sdk-react/dist/lib/FullScreenLoading/index.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
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classNames = _interopRequireDefault(require("../utils/classNames"));
var _useLockScroll = require("../hooks/use-lock-scroll");
var _getPrefixCls = require("../utils/getPrefixCls");
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)('fullscreen-loading');
const FullScreenLoading = ({
  loading = false,
  text = 'Loading...',
  children,
  fullscreen = true,
  className = '',
  size = 'default',
  type = 'circle'
}) => {
  const containerRef = (0, _react.useRef)(null);
  const sizeClass = size ? `${classPrefix}--${size}` : '';
  const typeClass = type ? `${classPrefix}--${type}` : '';
  const classNames = (0, _classNames.default)({
    [classPrefix]: fullscreen,
    [`${classPrefix}__container`]: !fullscreen,
    [sizeClass]: size,
    [typeClass]: type
  }, className);
  (0, _useLockScroll.useLockScroll)(containerRef, fullscreen && loading);
  (0, _react.useEffect)(() => {
    if (!fullscreen || !loading) return;
    const originalPointerEvents = document.body.style.pointerEvents;
    const originalUserSelect = document.body.style.userSelect;
    document.body.style.pointerEvents = 'none';
    document.body.style.userSelect = 'none';
    return () => {
      document.body.style.pointerEvents = originalPointerEvents;
      document.body.style.userSelect = originalUserSelect;
    };
  }, [fullscreen, loading]);

  // 局部 loading 时禁止容器操作
  (0, _react.useEffect)(() => {
    if (fullscreen || !containerRef.current) return;
    const container = containerRef.current;
    if (loading) {
      container.style.pointerEvents = 'none';
      container.style.userSelect = 'none';
    } else {
      container.style.pointerEvents = '';
      container.style.userSelect = '';
    }
    return () => {
      container.style.pointerEvents = '';
      container.style.userSelect = '';
    };
  }, [fullscreen, loading]);
  const renderLoadingIcon = () => {
    switch (type) {
      case 'circle':
        return /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__circle`
        });
      case 'dots':
        return /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__dots`
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__dot`
        }), /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__dot`
        }), /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__dot`
        }));
      case 'spin-dots':
        return /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__spin-dots`
        }, Array.from({
          length: 12
        }).map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
          key: index,
          className: `${classPrefix}__spin-dot`,
          style: {
            transform: `rotate(${index * 30}deg)`,
            opacity: 1 - index * 0.08
          }
        })));
      default:
        return /*#__PURE__*/_react.default.createElement("div", {
          className: `${classPrefix}__circle`
        });
    }
  };
  const loadingContent = /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__center`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classNames.default)(`${classPrefix}__spinner-box`, {
      [`${classPrefix}__spinner-box--no-text`]: text === null
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__spinner`
  }, renderLoadingIcon()), text !== null && /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}__text`
  }, text)));

  // 局部 loading 包裹 children
  if (children) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: classNames,
      ref: containerRef
    }, children, loading && /*#__PURE__*/_react.default.createElement("div", {
      className: `${classPrefix}__mask`
    }, loadingContent));
  }

  // 全屏 loading
  return loading ? /*#__PURE__*/_react.default.createElement("div", {
    className: classNames
  }, loadingContent) : null;
};
var _default = exports.default = FullScreenLoading;