@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
40 lines • 1.39 kB
JavaScript
import { ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { resolveCellAlignment } from '../../util/index.js';
import { classNames, styleData } from './TablePlaceholder.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
const getArrayOfLength = len => Array.from(Array(len).keys());
export const TablePlaceholder = props => {
const {
columns,
rows = 5,
style
} = props;
useStylesheet(styleData, TablePlaceholder.displayName);
return /*#__PURE__*/_jsx("div", {
style: {
backgroundColor: ThemingParameters.sapList_Background,
width: '100%',
...style
},
"data-component-name": "AnalyticalTableLoadingPlaceholder",
children: getArrayOfLength(rows).map((_, index) => {
return /*#__PURE__*/_jsx("div", {
className: classNames.row,
children: columns.map(col => {
return /*#__PURE__*/_jsx("div", {
className: classNames.cellContainer,
style: {
width: col.totalWidth,
...resolveCellAlignment(col)
},
children: /*#__PURE__*/_jsx("div", {
className: clsx(classNames.cell, classNames.animation)
})
}, `row${index}-${col.id}`);
})
}, `row-${index}`);
})
});
};
TablePlaceholder.displayName = 'TablePlaceholder';