@kiwicom/orbit-components/lib/Skeleton/Svg.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useRandomId = require("../hooks/useRandomId");
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
var _tailwind = require("../common/tailwind");
const resolveValue = value => {
  if (typeof value === "string") return value;
  if (typeof value === "number") return `${value}px`;
  return "100%";
};
const Rows = ({
  count,
  height,
  offset,
  rowBorderRadius
}) => {
  return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(Array(count).keys()).map(el => /*#__PURE__*/React.createElement("rect", {
    key: el,
    y: `${el * offset}px`,
    x: "0",
    rx: rowBorderRadius,
    ry: rowBorderRadius,
    width: "100%",
    height: height
  })));
};
const Svg = ({
  animate = true,
  children,
  rowBorderRadius = 3,
  rowHeight = 21,
  rowOffset = 20,
  rows,
  color = "paletteCloudNormal",
  title = "loading",
  viewBox,
  height = "100%",
  maxHeight,
  width = "100%",
  id,
  dataTest,
  spaceAfter,
  ...props
}) => {
  const [calculatedRowsHeight, setCalculatedRowsHeight] = React.useState(0);
  const {
    orbit
  } = (0, _useTheme.default)();
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  const idClip = `${randomId("clip")}-clip`;
  const titleId = randomId("title");
  React.useEffect(() => {
    if (!children && rows && rowOffset) setCalculatedRowsHeight(rows * rowOffset);
  }, [rowOffset, rows, setCalculatedRowsHeight, maxHeight]);
  return /*#__PURE__*/React.createElement("svg", (0, _extends2.default)({
    "aria-labelledby": titleId,
    "data-test": dataTest,
    id: id,
    className: (0, _clsx.default)(animate && "animate-pulse-slow", "rtl:-scale-x-100", spaceAfter && _tailwind.spaceAfterClasses[spaceAfter]),
    role: "img",
    viewBox: viewBox,
    style: {
      height: calculatedRowsHeight > 0 ? `${setCalculatedRowsHeight}px` : resolveValue(height),
      maxHeight: resolveValue(maxHeight),
      width: resolveValue(width)
    }
  }, props), /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title), /*#__PURE__*/React.createElement("rect", {
    role: "presentation",
    x: "0",
    y: "0",
    width: "100%",
    height: "100%",
    clipPath: `url(#${idClip})`,
    style: {
      fill: orbit[color]
    }
  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
    id: idClip
  }, children || (rows ? /*#__PURE__*/React.createElement(Rows, {
    count: rows,
    height: rowHeight,
    offset: rowOffset,
    rowBorderRadius: rowBorderRadius
  }) : /*#__PURE__*/React.createElement("rect", {
    x: "0",
    y: "0",
    rx: rowBorderRadius,
    ry: rowBorderRadius,
    height: "100%",
    width: "100%"
  })))));
};
var _default = Svg;
exports.default = _default;