@kiwicom/orbit-components/lib/Loading/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = _interopRequireDefault(require("./consts"));
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
const CircleLoader = ({
  animationDelay
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: "animate-loader bg-cloud-dark size-200 me-150 rounded-full [&:nth-child(3)]:m-0",
    style: {
      animationDelay
    }
  });
};
const Loader = ({
  type,
  customSize,
  title,
  ariaHidden
}) => {
  const theme = (0, _useTheme.default)();
  const isCircledIcon = type === _consts.default.BOX_LOADER || type === _consts.default.SEARCH_LOADER || type === _consts.default.INLINE_LOADER;
  if (customSize) {
    return /*#__PURE__*/React.createElement("svg", {
      viewBox: `0 0 ${customSize} ${customSize}`,
      className: "orbit-loading-spinner animate-spinner",
      style: {
        height: `${customSize}px`,
        width: `${customSize}px`
      },
      role: "img",
      "aria-hidden": ariaHidden
    }, /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
      cx: "50%",
      cy: "50%",
      fill: "transparent",
      strokeWidth: "3px",
      stroke: type === _consts.default.BUTTON_LOADER ? "current" : theme.orbit.paletteCloudDark,
      strokeLinecap: "round",
      strokeDasharray: `${customSize * 3 + 8}px`,
      strokeDashoffset: `${Number(customSize) + 24}px`,
      r: customSize / 2 - 2
    }));
  }
  if (isCircledIcon) {
    return /*#__PURE__*/React.createElement("div", {
      className: "flex items-center justify-center",
      "aria-hidden": ariaHidden,
      role: "img",
      "aria-label": title
    }, /*#__PURE__*/React.createElement(CircleLoader, null), /*#__PURE__*/React.createElement(CircleLoader, {
      animationDelay: "0.1s"
    }), /*#__PURE__*/React.createElement(CircleLoader, {
      animationDelay: "0.2s"
    }));
  }
  return /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 40 40",
    className: "orbit-loading-spinner animate-spinner size-1000",
    stroke: type === _consts.default.BUTTON_LOADER ? "currentColor" : theme.orbit.paletteCloudDark,
    role: "img",
    "aria-hidden": ariaHidden
  }, /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("circle", {
    cx: "50%",
    cy: "50%",
    fill: "transparent",
    strokeWidth: "3px",
    stroke: type === _consts.default.BUTTON_LOADER ? "current" : theme.orbit.paletteCloudDark,
    strokeLinecap: "round",
    r: "18",
    strokeDasharray: "128px",
    strokeDashoffset: "64px"
  }));
};
const Loading = ({
  loading = false,
  asComponent = "div",
  type = _consts.default.PAGE_LOADER,
  text,
  children,
  dataTest,
  customSize,
  title,
  id,
  ariaHidden
}) => {
  const Element = text ? "div" : asComponent;
  return /*#__PURE__*/React.createElement(React.Fragment, null, Boolean(children) && !loading ? children : /*#__PURE__*/React.createElement(Element, {
    className: (0, _clsx.default)(["items-center", "overflow-hidden", "box-border", type === _consts.default.BUTTON_LOADER && "[&_.orbit-loading-spinner]:size-icon-medium absolute start-0 top-0 size-full justify-center", type === _consts.default.SEARCH_LOADER && "h-1000 justify-start", type === _consts.default.INLINE_LOADER && "inline-flex min-h-[19px] justify-center", type !== _consts.default.INLINE_LOADER && "flex", type === _consts.default.BOX_LOADER && "h-[80px] justify-center", type === _consts.default.PAGE_LOADER && "h-[120px] flex-col justify-center"]),
    style: {
      height: customSize
    },
    "data-test": dataTest,
    id: id,
    "aria-hidden": ariaHidden ? "true" : undefined
  }, /*#__PURE__*/React.createElement(Loader, {
    title: title,
    type: type,
    customSize: customSize,
    ariaHidden: text ? "true" : undefined
  }), type !== _consts.default.BUTTON_LOADER && Boolean(text) && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(["font-base text-normal text-cloud-dark leading-normal", type === _consts.default.PAGE_LOADER ? "mt-400" : "ms-300"])
  }, text)));
};
Loading.displayName = "Loading";
var _default = exports.default = Loading;