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 React, { useEffect, useRef } from 'react';
import cs from '../utils/classNames';
import { useLockScroll } from '../hooks/use-lock-scroll';
import { getPrefixCls } from '../utils/getPrefixCls';
const classPrefix = getPrefixCls('fullscreen-loading');
const FullScreenLoading = _ref => {
  let {
    loading = false,
    text = 'Loading...',
    children,
    fullscreen = true,
    className = '',
    size = 'default',
    type = 'circle'
  } = _ref;
  const containerRef = useRef(null);
  const sizeClass = size ? "".concat(classPrefix, "--").concat(size) : '';
  const typeClass = type ? "".concat(classPrefix, "--").concat(type) : '';
  const classNames = cs({
    [classPrefix]: fullscreen,
    ["".concat(classPrefix, "__container")]: !fullscreen,
    [sizeClass]: size,
    [typeClass]: type
  }, className);
  useLockScroll(containerRef, fullscreen && loading);
  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 时禁止容器操作
  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.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((_, index) => /*#__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")
        });
    }
  };
  const loadingContent = /*#__PURE__*/React.createElement("div", {
    className: "".concat(classPrefix, "__center")
  }, /*#__PURE__*/React.createElement("div", {
    className: cs("".concat(classPrefix, "__spinner-box"), {
      ["".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;