@parkassist/pa-ui-library
Version:
INX Platform elements
51 lines • 1.59 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { Skeleton } from "@mui/material";
import { Palette } from "../../index";
import { makeStyles } from '@mui/styles';
const SkeletonStyles = makeStyles(theme => ({
skeletonClass: {
'&::after': {
background: ({
dark
}) => dark ? 'linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.04), transparent )' : 'linear-gradient( 90deg, transparent, rgba(0, 0, 0, 0.04), transparent )'
}
}
}));
function SkeletonLoader(_a) {
var {
height,
width,
variant = 'rectangular',
fontSize,
darkMode = false,
color = Palette.WHITE_SMOKE,
animation = "wave"
} = _a,
props = __rest(_a, ["height", "width", "variant", "fontSize", "darkMode", "color", "animation"]);
const {
skeletonClass
} = SkeletonStyles({
dark: darkMode
});
return _jsx(Skeleton, Object.assign({
className: skeletonClass,
variant: variant,
width: width,
height: height,
animation: animation,
sx: {
fontSize,
backgroundColor: color
}
}, props));
}
export default SkeletonLoader;