ultra-design/es/loading/loading.js

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _pt from 'prop-types';
import { useState, useRef, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import { loadingWrapperStyles } from './loading-style.js';
import { useMergeProps } from '../utils/mergeProps.js';
import { LoadingFour } from '@icon-park/react';
import withStyle from '../utils/withStyle.js';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

var _excluded = ["icon", "message", "mask", "fill", "fullScreen", "children"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultProps = {
  icon: jsx(LoadingFour, {})
};

var LoadingInternal = function LoadingInternal(p) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var loadingRef = useRef(null);
  var props = useMergeProps(defaultProps, p);

  var icon = props.icon,
      message = props.message,
      mask = props.mask,
      fill = props.fill,
      fullScreen = props.fullScreen,
      children = props.children,
      rest = _objectWithoutProperties(props, _excluded);

  useEffect(function () {
    setVisible(true);
  }, []);

  var onEnter = function onEnter() {
    var _loadingRef$current;

    if (!fill) return;
    var parent = (_loadingRef$current = loadingRef.current) === null || _loadingRef$current === void 0 ? void 0 : _loadingRef$current.parentElement;

    if (parent && !fullScreen) {
      parent.style.position = 'relative';
    }
  };

  return jsx(CSSTransition, {
    "in": visible,
    unmountOnExit: true,
    timeout: 300,
    onEnter: onEnter,
    children: jsxs("div", _objectSpread(_objectSpread({
      ref: loadingRef,
      css: loadingWrapperStyles(props),
      className: "ultra-loading-wrapper"
    }, rest), {}, {
      children: [(mask || fullScreen) && jsx("div", {
        className: "ultra-mask"
      }), jsxs("div", {
        className: "ultra-loading",
        children: [icon && jsx("span", {
          className: "ultra-loading__icon",
          children: icon
        }), children || message]
      })]
    }))
  });
};

LoadingInternal.propTypes = {
  message: _pt.node,
  mask: _pt.oneOfType([_pt.bool, _pt.string]),
  fill: _pt.bool,
  fullScreen: _pt.bool,
  icon: _pt.node
};
LoadingInternal.displayName = 'UltraLoading';
var Loading = withStyle(LoadingInternal);

export { Loading as default, defaultProps };