@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
53 lines (52 loc) • 1.53 kB
JavaScript
;
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 SkeletonTable({
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 = SkeletonTable;
//# sourceMappingURL=Table.js.map