@dnb/eufemia/cjs/components/skeleton/figures/Product.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _Space = _interopRequireDefault(require("../../space/Space.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SkeletonProduct({
  rows = 3,
  children = null,
  ...rest
}) {
  const rowsLength = (0, _react.useMemo)(() => {
    const fill = [70, 80, 60, 40, 50, 20, 0];
    return Array.from({
      length: Number(rows)
    }, (_, i) => {
      const c = i % fill.length;
      if (c === fill.length - 1) {
        fill.reverse();
      }
      return fill[c];
    });
  }, [rows]);
  return (0, _jsxRuntime.jsxs)("div", {
    className: "dnb-skeleton__figure dnb-skeleton__figure--show",
    "aria-busy": true,
    ...rest,
    children: [(0, _jsxRuntime.jsx)(_Space.default, {
      element: "div",
      bottom: "large",
      className: "dnb-h--xx-large dnb-skeleton dnb-skeleton--shape",
      "aria-hidden": true,
      style: {
        width: '50%'
      },
      children: "\u200C"
    }), rowsLength.map((p, i) => (0, _jsxRuntime.jsx)(_Space.default, {
      element: "div",
      top: "x-small",
      className: "dnb-p dnb-skeleton dnb-skeleton--shape",
      style: {
        width: `${p}%`
      },
      children: "\u200C"
    }, i)), typeof children === 'function' ? children() : children]
  });
}
var _default = exports.default = SkeletonProduct;
//# sourceMappingURL=Product.js.map