@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");

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

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

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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

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

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

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

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

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

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

var StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "Svg__StyledWrapper",
  componentId: "qg0320-0"
})(["position:relative;"]);

var StyledSvg = (0, _styledComponents.default)(function (_ref) {
  var className = _ref.className,
      children = _ref.children,
      ariaLabelledby = _ref.ariaLabelledby,
      dataTest = _ref.dataTest,
      viewBox = _ref.viewBox;
  return /*#__PURE__*/React.createElement("svg", {
    "aria-labelledby": ariaLabelledby,
    "data-test": dataTest,
    className: className,
    role: "img",
    viewBox: viewBox
  }, children);
}).withConfig({
  displayName: "Svg__StyledSvg",
  componentId: "qg0320-1"
})(["", ""], function (_ref2) {
  var rtl = _ref2.rtl;
  return (0, _styledComponents.css)(["height:", ";width:", ";transform:", ";margin-bottom:", ";", ""], _helpers.resolveHeight, _helpers.resolveWidth, rtl && "scaleX(-1)", _getSpacingToken.default, _helpers.resolvePulseAnimation);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

var Rows = function Rows(_ref3) {
  var count = _ref3.count,
      height = _ref3.height,
      offset = _ref3.offset,
      rowBorderRadius = _ref3.rowBorderRadius;
  return (0, _toConsumableArray2.default)(Array(count).keys()).map(function (el) {
    return /*#__PURE__*/React.createElement("rect", {
      key: el,
      y: "".concat(el * offset, "px"),
      x: "0",
      rx: rowBorderRadius,
      ry: rowBorderRadius,
      width: "100%",
      height: height
    });
  });
};

var Svg = function Svg(_ref4) {
  var _ref4$animate = _ref4.animate,
      animate = _ref4$animate === void 0 ? true : _ref4$animate,
      children = _ref4.children,
      _ref4$rowBorderRadius = _ref4.rowBorderRadius,
      rowBorderRadius = _ref4$rowBorderRadius === void 0 ? 3 : _ref4$rowBorderRadius,
      _ref4$rowHeight = _ref4.rowHeight,
      rowHeight = _ref4$rowHeight === void 0 ? 21 : _ref4$rowHeight,
      _ref4$rowOffset = _ref4.rowOffset,
      rowOffset = _ref4$rowOffset === void 0 ? 20 : _ref4$rowOffset,
      _ref4$rows = _ref4.rows,
      rows = _ref4$rows === void 0 ? 1 : _ref4$rows,
      _ref4$title = _ref4.title,
      title = _ref4$title === void 0 ? "loading" : _ref4$title,
      viewBox = _ref4.viewBox,
      props = (0, _objectWithoutProperties2.default)(_ref4, ["animate", "children", "rowBorderRadius", "rowHeight", "rowOffset", "rows", "title", "viewBox"]);

  var _React$useState = React.useState(false),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      loaded = _React$useState2[0],
      setLoaded = _React$useState2[1];

  var _React$useState3 = React.useState(0),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      calculatedHeight = _React$useState4[0],
      setCalculatedHeight = _React$useState4[1];

  var _useTheme = (0, _useTheme2.default)(),
      rtl = _useTheme.rtl,
      orbit = _useTheme.orbit;

  var duration = "".concat(2, "s");
  var interval = "".concat(0.5, "s");
  var id = (0, _useRandomId.useRandomIdSeed)();
  var idClip = "".concat(id("clip"), "-clip");
  var titleId = id("title");
  React.useEffect(function () {
    setLoaded(true);

    if (loaded) {
      if (!children && rows && rowOffset) setCalculatedHeight(rows * rowOffset);
    }
  }, [rowOffset, rows, setCalculatedHeight, setLoaded, loaded]);
  return loaded && /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledSvg, (0, _extends2.default)({
    ariaLabelledby: titleId,
    role: "img",
    rtl: rtl,
    viewBox: viewBox,
    calculatedHeight: calculatedHeight,
    duration: duration,
    interval: interval,
    animate: animate
  }, props), /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title), /*#__PURE__*/React.createElement("rect", {
    role: "presentation",
    x: "0",
    y: "0",
    width: "100%",
    height: "100%",
    clipPath: "url(#".concat(idClip, ")"),
    style: {
      fill: orbit.paletteCloudDark
    }
  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
    id: idClip
  }, children || /*#__PURE__*/React.createElement(Rows, {
    count: rows,
    height: rowHeight,
    offset: rowOffset,
    rowBorderRadius: rowBorderRadius
  })))));
};

var _default = Svg;
exports.default = _default;