347e32ef4a
* Replace classnames with clsx * Add clsx to package.json * Remove classnames * Remove classnames types * Restrict classnames in eslint rules
57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
import { makeStyles } from "@saleor/macaw-ui";
|
|
import clsx from "clsx";
|
|
import React from "react";
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
"@keyframes skeleton-animation": {
|
|
"0%": {
|
|
opacity: 0.6,
|
|
},
|
|
"100%": {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
primary: {
|
|
"&$skeleton": {
|
|
background: theme.palette.primary.main,
|
|
},
|
|
},
|
|
skeleton: {
|
|
animation: "skeleton-animation .75s linear infinite forwards alternate",
|
|
background: theme.palette.background.default,
|
|
borderRadius: 4,
|
|
display: "block",
|
|
height: "0.8em",
|
|
margin: "0.2em 0",
|
|
},
|
|
}),
|
|
{ name: "Skeleton" },
|
|
);
|
|
|
|
interface SkeletonProps {
|
|
className?: string;
|
|
primary?: boolean;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const Skeleton: React.FC<SkeletonProps> = props => {
|
|
const { className, primary, style } = props;
|
|
|
|
const classes = useStyles(props);
|
|
|
|
return (
|
|
<span
|
|
data-test-id="skeleton"
|
|
className={clsx(classes.skeleton, className, {
|
|
[classes.primary]: primary,
|
|
})}
|
|
style={style}
|
|
>
|
|
‌
|
|
</span>
|
|
);
|
|
};
|
|
|
|
Skeleton.displayName = "Skeleton";
|
|
export default Skeleton;
|