@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 _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _useRandomId = require("../hooks/useRandomId");

var _helpers = require("./helpers");

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

const _excluded = ["animate", "children", "rowBorderRadius", "rowHeight", "rowOffset", "rows", "title", "viewBox", "height", "maxHeight", "width"];
const StyledSvg = (0, _styledComponents.default)(({
  className,
  children,
  ariaLabelledby,
  dataTest,
  viewBox
}) => /*#__PURE__*/React.createElement("svg", {
  "aria-labelledby": ariaLabelledby,
  "data-test": dataTest,
  className: className,
  role: "img",
  viewBox: viewBox
}, children)).withConfig({
  displayName: "Svg__StyledSvg",
  componentId: "sc-v381o6-0"
})(["", ""], ({
  rtl,
  width,
  maxHeight
}) => (0, _styledComponents.css)(["height:", ";max-height:", ";width:", ";transform:", ";margin-bottom:", ";", ""], _helpers.resolveHeight, (0, _helpers.resolveValue)(maxHeight), (0, _helpers.resolveValue)(width), rtl && `scaleX(-1)`, _getSpacingToken.default, _helpers.resolvePulseAnimation)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSvg.defaultProps = {
  theme: _defaultTheme.default
};

const Rows = ({
  count,
  height,
  offset,
  rowBorderRadius
}) => {
  return [...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 = (_ref) => {
  let {
    animate = true,
    children,
    rowBorderRadius = 3,
    rowHeight = 21,
    rowOffset = 20,
    rows,
    title = "loading",
    viewBox,
    height,
    maxHeight,
    width = "100%"
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  const [calculatedHeight, setCalculatedHeight] = React.useState(0);
  const {
    rtl,
    orbit
  } = (0, _useTheme.default)();
  const duration = `${2}s`;
  const interval = `${0.5}s`;
  const id = (0, _useRandomId.useRandomIdSeed)();
  const idClip = `${id("clip")}-clip`;
  const titleId = id("title");
  React.useEffect(() => {
    if (!children && rows && rowOffset) setCalculatedHeight(rows * rowOffset);
  }, [rowOffset, rows, setCalculatedHeight, maxHeight]);
  return /*#__PURE__*/React.createElement(StyledSvg, (0, _extends2.default)({
    ariaLabelledby: titleId,
    maxHeight: maxHeight,
    role: "img",
    rtl: rtl,
    viewBox: viewBox,
    calculatedHeight: calculatedHeight,
    duration: duration,
    interval: interval,
    animate: animate,
    height: height,
    width: 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.paletteCloudDark
    }
  }), /*#__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;