@dnb/eufemia/components/skeleton/figures/Circle.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React from 'react';
import Context from "../../../shared/Context.js";
export default class SkeletonCircle extends React.Component {
  constructor(props) {
    super(props);
    const {
      rows
    } = props;
    const fill = [70, 80, 60, 40, 50, 20, 0];
    this.rowsLength = new Array(Number(rows)).fill(true).map((_, i) => {
      const c = i % fill.length;
      if (c === fill.length - 1) {
        fill.concat(fill.reverse());
      }
      return fill[c];
    });
  }
  render() {
    const {
      rows,
      children,
      ...rest
    } = this.props;
    return React.createElement("div", _extends({
      className: "dnb-skeleton__figure dnb-skeleton__figure--show",
      "aria-busy": true
    }, rest), React.createElement("div", {
      className: "dnb-h--xx-large dnb-skeleton dnb-skeleton--shape dnb-space__bottom--large",
      "aria-hidden": true,
      style: {
        width: '50%'
      }
    }, "\u200C"), this.rowsLength.map((p, i) => React.createElement("div", {
      key: i,
      className: "dnb-p dnb-skeleton dnb-skeleton--shape dnb-space__top--x-small",
      style: {
        width: `${p}%`
      }
    }, "\u200C")), typeof children === 'function' ? children() : children);
  }
}
_defineProperty(SkeletonCircle, "contextType", Context);
_defineProperty(SkeletonCircle, "defaultProps", {
  rows: 3,
  children: null
});
//# sourceMappingURL=Circle.js.map