lucid-ui
Version:
A UI component library from Xandr.
38 lines • 2.6 kB
JavaScript
import React from 'react';
import ReactPlaceholder from 'react-placeholder';
import _ from 'lodash';
import { lucidClassNames } from '../../util/style-helpers';
import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
import Panel from '../Panel/Panel';
const animationStyle = lucidClassNames.bind('&-LoadingSkeleton-animatedSkeleton');
export const LoadingSkeleton = (props) => {
const { Skeleton, isLoading, children, className, header, style, width = undefined, height = undefined, isPanel = false, hasOverlay = false, overlayKind = 'light', numRows = 1, numColumns = 1, marginTop = 2, marginBottom = 2, marginRight = 2, marginLeft = 2, } = { ...props };
if (!isLoading) {
return (React.createElement("div", { className: className, "data-test-id": 'loadingSkeleton-Children' }, children));
}
if (!Skeleton) {
return (React.createElement(LoadingIndicator, { "data-test-id": 'loadingSkeleton-LoadingIndicator', isLoading: true, isVisible: true, hasOverlay: hasOverlay, overlayKind: overlayKind }));
}
const skeletonProps = { ...style, width, height, display: 'flex' };
const skeletonPlaceholder = (React.createElement(Skeleton, { "data-test-id": 'loadingSkeleton_Skeleton', ...skeletonProps }));
const matrix = _.times(numColumns, (column) => (React.createElement("div", { key: `column${column}`, style: {
display: 'inline-block',
marginRight: marginRight,
marginLeft: marginLeft,
}, "data-test-id": 'loadingSkeleton-SkeletonColumn' },
React.createElement("div", { style: {
display: 'inline-block',
} }, _.times(numRows, (row) => (React.createElement("div", { className: animationStyle('&', className), "data-test-id": 'loadingSkeleton-ReactPlaceholder', key: `row${row}`, style: {
marginTop: marginTop,
marginBottom: marginBottom,
} },
React.createElement("div", null,
header ? (React.createElement("div", { "data-test-id": 'loadingSkeleton-SkeletonHeader', style: {
marginBottom: 2,
} }, header)) : null,
React.createElement(ReactPlaceholder, { showLoadingAnimation: true, ready: !isLoading, customPlaceholder: skeletonPlaceholder })))))))));
const skeletonMatrix = React.createElement("div", null, matrix);
return isPanel ? (React.createElement(Panel, { "data-test-id": 'loadingSkeleton-Panel' }, skeletonMatrix)) : (skeletonMatrix);
};
export default LoadingSkeleton;
//# sourceMappingURL=LoadingSkeleton.js.map