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";

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 _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); }
const classPrefix = (0, _getPrefixCls.getPrefixCls)('fullscreen-loading');
const FullScreenLoading = _ref => {
  let {
    loading = false,
    text = 'Loading...',
    children,
    fullscreen = true,
    className = '',
    size = 'default',
    type = 'circle'
  } = _ref;
  const containerRef = (0, _react.useRef)(null);
  const sizeClass = size ? "".concat(classPrefix, "--").concat(size) : '';
  const typeClass = type ? "".concat(classPrefix, "--").concat(type) : '';
  const classNames = (0, _classNames.default)({
    [classPrefix]: fullscreen,
    ["".concat(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: "".concat(classPrefix, "__circle")
        });
      case 'dots':
        return /*#__PURE__*/_react.default.createElement("div", {
          className: "".concat(classPrefix, "__dots")
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "".concat(classPrefix, "__dot")
        }), /*#__PURE__*/_react.default.createElement("div", {
          className: "".concat(classPrefix, "__dot")
        }), /*#__PURE__*/_react.default.createElement("div", {
          className: "".concat(classPrefix, "__dot")
        }));
      case 'spin-dots':
        return /*#__PURE__*/_react.default.createElement("div", {
          className: "".concat(classPrefix, "__spin-dots")
        }, Array.from({
          length: 12
        }).map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
          key: index,
          className: "".concat(classPrefix, "__spin-dot"),
          style: {
            transform: "rotate(".concat(index * 30, "deg)"),
            opacity: 1 - index * 0.08
          }
        })));
      default:
        return /*#__PURE__*/_react.default.createElement("div", {
          className: "".concat(classPrefix, "__circle")
        });
    }
  };
  const loadingContent = /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(classPrefix, "__center")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classNames.default)("".concat(classPrefix, "__spinner-box"), {
      ["".concat(classPrefix, "__spinner-box--no-text")]: text === null
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(classPrefix, "__spinner")
  }, renderLoadingIcon()), text !== null && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(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: "".concat(classPrefix, "__mask")
    }, loadingContent));
  }

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