38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React from '../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
import buildStyle from '../../util/buildStyle';
|
|
|
|
import './Skeleton.scss';
|
|
|
|
type OwnProps = {
|
|
variant?: 'rectangular' | 'rounded-rect' | 'round';
|
|
animation?: 'wave' | 'pulse';
|
|
width?: number;
|
|
height?: number;
|
|
forceAspectRatio?: boolean;
|
|
inline?: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
const Skeleton: FC<OwnProps> = ({
|
|
variant = 'rectangular',
|
|
animation = 'wave',
|
|
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 = forceAspectRatio ? aspectRatio
|
|
: buildStyle(Boolean(width) && `width: ${width}px`, Boolean(height) && `height: ${height}px`);
|
|
return (
|
|
<div className={classNames} style={style}>{inline && '\u00A0'}</div>
|
|
);
|
|
};
|
|
|
|
export default Skeleton;
|