@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
93 lines • 2.71 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import { useRandomIdSeed } from "../hooks/useRandomId";
import useTheme from "../hooks/useTheme";
import { spaceAfterClasses } from "../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,
viewBox,
height = "100%",
maxHeight,
width = "100%",
id,
dataTest,
spaceAfter,
...props
}) => {
const [calculatedRowsHeight, setCalculatedRowsHeight] = React.useState(0);
const {
orbit
} = useTheme();
const randomId = useRandomIdSeed();
const idClip = `${randomId("clip")}-clip`;
React.useEffect(() => {
if (!children && rows && rowOffset) setCalculatedRowsHeight(rows * rowOffset);
}, [rowOffset, rows, setCalculatedRowsHeight, maxHeight]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", _extends({
"data-test": dataTest,
id: id,
className: cx(animate && "motion-safe:animate-pulse-slow", "rtl:-scale-x-100", spaceAfter && spaceAfterClasses[spaceAfter]),
viewBox: viewBox,
style: {
height: calculatedRowsHeight > 0 ? `${setCalculatedRowsHeight}px` : resolveValue(height),
maxHeight: resolveValue(maxHeight),
width: resolveValue(width)
},
"aria-hidden": true
}, props), /*#__PURE__*/React.createElement("rect", {
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%"
}))))), title && /*#__PURE__*/React.createElement("span", {
className: "sr-only"
}, title));
};
export default Svg;