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

import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React, { useEffect, useRef } from 'react';
import cs from '../utils/classNames';
import { useLockScroll } from '../hooks/use-lock-scroll';
import { getPrefixCls } from '../utils/getPrefixCls';
var classPrefix = getPrefixCls('fullscreen-loading');
var FullScreenLoading = function FullScreenLoading(_ref) {
  var _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$text = _ref.text,
    text = _ref$text === void 0 ? 'Loading...' : _ref$text,
    children = _ref.children,
    _ref$fullscreen = _ref.fullscreen,
    fullscreen = _ref$fullscreen === void 0 ? true : _ref$fullscreen,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'default' : _ref$size,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'circle' : _ref$type;
  var containerRef = useRef(null);
  var sizeClass = size ? "".concat(classPrefix, "--").concat(size) : '';
  var typeClass = type ? "".concat(classPrefix, "--").concat(type) : '';
  var classNames = cs(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classPrefix, fullscreen), "".concat(classPrefix, "__container"), !fullscreen), sizeClass, size), typeClass, type), className);
  useLockScroll(containerRef, fullscreen && loading);
  useEffect(function () {
    if (!fullscreen || !loading) return;
    var originalPointerEvents = document.body.style.pointerEvents;
    var originalUserSelect = document.body.style.userSelect;
    document.body.style.pointerEvents = 'none';
    document.body.style.userSelect = 'none';
    return function () {
      document.body.style.pointerEvents = originalPointerEvents;
      document.body.style.userSelect = originalUserSelect;
    };
  }, [fullscreen, loading]);

  // 局部 loading 时禁止容器操作
  useEffect(function () {
    if (fullscreen || !containerRef.current) return;
    var container = containerRef.current;
    if (loading) {
      container.style.pointerEvents = 'none';
      container.style.userSelect = 'none';
    } else {
      container.style.pointerEvents = '';
      container.style.userSelect = '';
    }
    return function () {
      container.style.pointerEvents = '';
      container.style.userSelect = '';
    };
  }, [fullscreen, loading]);
  var renderLoadingIcon = function renderLoadingIcon() {
    switch (type) {
      case 'circle':
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(classPrefix, "__circle")
        });
      case 'dots':
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(classPrefix, "__dots")
        }, /*#__PURE__*/React.createElement("div", {
          className: "".concat(classPrefix, "__dot")
        }), /*#__PURE__*/React.createElement("div", {
          className: "".concat(classPrefix, "__dot")
        }), /*#__PURE__*/React.createElement("div", {
          className: "".concat(classPrefix, "__dot")
        }));
      case 'spin-dots':
        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(classPrefix, "__spin-dots")
        }, Array.from({
          length: 12
        }).map(function (_, index) {
          return /*#__PURE__*/React.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.createElement("div", {
          className: "".concat(classPrefix, "__circle")
        });
    }
  };
  var loadingContent = /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__center")
  }, /*#__PURE__*/React.createElement("div", {
    className: cs("".concat(classPrefix, "__spinner-box"), _defineProperty({}, "".concat(classPrefix, "__spinner-box--no-text"), text === null))
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__spinner")
  }, renderLoadingIcon()), text !== null && /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__text")
  }, text)));

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

  // 全屏 loading
  return loading ? /*#__PURE__*/React.createElement("div", {
    className: classNames
  }, loadingContent) : null;
};
export default FullScreenLoading;