@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
45 lines • 1.62 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Paper from '@mui/material/Paper';
import Skeleton from '@mui/material/Skeleton';
/**
* Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
*/
const FakeText = ({ lines = 1, onPaper = false, variant, animation = 'wave', ...props }) => {
const defaultOrText = !variant || variant === 'text';
const fakeText = (React.createElement(React.Fragment, null, defaultOrText ? (Array(lines)
.fill('')
.map((_e, i) => {
if (i % 2 == 0)
return React.createElement(Skeleton, { key: i, variant: variant, animation: animation, ...props });
return React.createElement(Skeleton, { key: i, variant: variant, ...props, width: '80%' });
})) : (React.createElement(Skeleton, { variant: variant, ...props }))));
if (onPaper) {
return React.createElement(Paper, { sx: { p: 2 } }, fakeText);
}
return fakeText;
};
FakeText.propTypes = {
/**
* @default 1
* The number of lines appearing.
*/
lines: PropTypes.number,
/**
* @default false
* If true, the fake text will be drawn on a Paper.
*/
onPaper: PropTypes.bool,
/**
* @default 'text'
* The shape of the loading fake text
*/
variant: PropTypes.oneOf(['text', 'circular', 'rectangular', 'rounded']),
/**
* The animation. If false, the animation effect is disabled
* @default 'wave'
*/
animation: PropTypes.oneOf(['pulse', 'wave', false])
};
export default FakeText;
//# sourceMappingURL=FakeText.js.map