forked from crowetic/commerce
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import React, { CSSProperties } from 'react'
|
|
import cn from 'clsx'
|
|
import px from '@lib/to-pixels'
|
|
import s from './Skeleton.module.css'
|
|
|
|
interface SkeletonProps {
|
|
show?: boolean
|
|
block?: boolean
|
|
className?: string
|
|
style?: CSSProperties
|
|
width?: string | number
|
|
height?: string | number
|
|
boxHeight?: string | number
|
|
}
|
|
|
|
const Skeleton: React.FC<SkeletonProps> = ({
|
|
style,
|
|
width,
|
|
height,
|
|
children,
|
|
className,
|
|
show = true,
|
|
boxHeight = height,
|
|
}) => {
|
|
// Automatically calculate the size if there are children
|
|
// and no fixed sizes are specified
|
|
const shouldAutoSize = !!children && !(width || height)
|
|
|
|
// Defaults
|
|
width = width || 24
|
|
height = height || 24
|
|
boxHeight = boxHeight || height
|
|
|
|
return (
|
|
<span
|
|
className={cn(s.skeleton, className, {
|
|
[s.show]: show,
|
|
[s.wrapper]: shouldAutoSize,
|
|
[s.loaded]: !shouldAutoSize && !!children,
|
|
})}
|
|
style={
|
|
shouldAutoSize
|
|
? {}
|
|
: {
|
|
minWidth: px(width),
|
|
minHeight: px(height),
|
|
marginBottom: `calc(${px(boxHeight)} - ${px(height)})`,
|
|
...style,
|
|
}
|
|
}
|
|
>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default Skeleton
|