@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 rounded-circle bg-cloud-dark h-xs w-xs me-[6px] [&:nth-child(3)]:m-0",
    style: {
      animationDelay
    }
  });
};
const Loader = ({
  type,
  customSize
}) => {
  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`
      }
    }, /*#__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"
    }, /*#__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 h-xxl w-xxl"
  }, /*#__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,
  type = _consts.default.PAGE_LOADER,
  text,
  children,
  dataTest,
  customSize,
  id
}) => {
  return /*#__PURE__*/React.createElement(React.Fragment, null, Boolean(children) && !loading ? children : /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(["items-center", "overflow-hidden", "box-border", type === _consts.default.BUTTON_LOADER && "t-0 absolute start-0 h-full w-full justify-center", type === _consts.default.SEARCH_LOADER && "h-[40px] justify-start", type === _consts.default.INLINE_LOADER ? "inline-flex min-h-[19px] justify-center" : "p-sm 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
  }, /*#__PURE__*/React.createElement(Loader, {
    type: type,
    customSize: customSize
  }), 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-md" : "ms-sm"])
  }, text)));
};
Loading.displayName = "Loading";
var _default = Loading;
exports.default = _default;