@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
50 lines (49 loc) • 1.43 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import Context from "../../../shared/Context.js";
export default class SkeletonCircle extends React.Component {
static contextType = Context;
static defaultProps = {
rows: 3,
children: null
};
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);
}
}
//# sourceMappingURL=Circle.js.map