41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type { FC } from '@teact';
|
|
import { memo } from '@teact';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import buildStyle from '../../../util/buildStyle';
|
|
|
|
import './Skeleton.scss';
|
|
|
|
type OwnProps = {
|
|
variant?: 'rectangular' | 'rounded-rect' | 'round';
|
|
animation?: 'wave' | 'pulse' | 'none';
|
|
width?: number;
|
|
height?: number;
|
|
forceAspectRatio?: boolean;
|
|
inline?: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
const Skeleton: FC<OwnProps> = ({
|
|
variant = 'rectangular',
|
|
animation = 'none',
|
|
width,
|
|
height,
|
|
forceAspectRatio,
|
|
inline,
|
|
className,
|
|
}) => {
|
|
const classNames = buildClassName('Skeleton', variant, animation, className, inline && 'inline');
|
|
const aspectRatio = (width && height) ? `aspect-ratio: ${width}/${height}` : undefined;
|
|
const style = buildStyle(
|
|
forceAspectRatio && aspectRatio,
|
|
Boolean(width) && `width: ${width}px`,
|
|
!forceAspectRatio && Boolean(height) && `height: ${height}px`,
|
|
);
|
|
return (
|
|
<div className={classNames} style={style}>{inline && '\u00A0'}</div>
|
|
);
|
|
};
|
|
|
|
export default memo(Skeleton);
|