@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
59 lines (58 loc) • 1.98 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["rows", "children"];
import React from 'react';
import PropTypes from 'prop-types';
import Context from '../../../shared/Context';
export default class SkeletonArticle extends React.PureComponent {
constructor(props) {
super(props);
const {
rows
} = props;
const fill = [70, 80, 60, 40, 50, 20, 0];
this.rowsLength = new Array(rows).fill(true).map((_, i) => {
const c = i % fill.length;
if (c === fill.length - 1) {
fill.concat(fill.reverse());
}
return fill[c];
});
}
render() {
const _this$props = this.props,
{
rows,
children
} = _this$props,
rest = _objectWithoutProperties(_this$props, _excluded);
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")), children);
}
}
_defineProperty(SkeletonArticle, "contextType", Context);
_defineProperty(SkeletonArticle, "defaultProps", {
rows: 3,
children: null
});
process.env.NODE_ENV !== "production" ? SkeletonArticle.propTypes = {
rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node])
} : void 0;
//# sourceMappingURL=Article.js.map