ultra-design/lib/loading/loading.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _pt = require('prop-types');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var loadingStyle = require('./loading-style.js');
var mergeProps = require('../utils/mergeProps.js');
var react = require('@icon-park/react');
var withStyle = require('../utils/withStyle.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _pt__default = /*#__PURE__*/_interopDefaultLegacy(_pt);

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__default["default"](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: jsxRuntime.jsx(react.LoadingFour, {})
};

var LoadingInternal = function LoadingInternal(p) {
  var _useState = React.useState(false),
      _useState2 = _slicedToArray__default["default"](_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

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

  var icon = props.icon,
      message = props.message,
      mask = props.mask,
      fill = props.fill,
      fullScreen = props.fullScreen,
      children = props.children,
      rest = _objectWithoutProperties__default["default"](props, _excluded);

  React.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 jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
    "in": visible,
    unmountOnExit: true,
    timeout: 300,
    onEnter: onEnter,
    children: jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
      ref: loadingRef,
      css: loadingStyle.loadingWrapperStyles(props),
      className: "ultra-loading-wrapper"
    }, rest), {}, {
      children: [(mask || fullScreen) && jsxRuntime.jsx("div", {
        className: "ultra-mask"
      }), jsxRuntime.jsxs("div", {
        className: "ultra-loading",
        children: [icon && jsxRuntime.jsx("span", {
          className: "ultra-loading__icon",
          children: icon
        }), children || message]
      })]
    }))
  });
};

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

exports["default"] = Loading;
exports.defaultProps = defaultProps;