@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
23 lines (22 loc) • 1.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import tkns from '@wonderflow/tokens/platforms/web/tokens.json';
import { Fragment, useCallback } from 'react';
import { useUIDSeed } from 'react-uid';
import * as styles from './skeleton.module.css';
export const Skeleton = ({ className, borderRadius = 4, style, width, height, count = 1, gap, enableAnimation = true, inline, circle, ...otherProps }) => {
const uid = useUIDSeed();
const computedWidth = typeof width === 'number' ? `${width}px` : width;
const computedHeight = typeof height === 'number' ? `${height}px` : height;
const SkeletonItem = useCallback(() => {
const dynamicStyle = {
'--radius': borderRadius && tkns.radius[borderRadius],
'--width': width && computedWidth,
'--height': height && computedHeight,
'--gap': gap ? tkns.space[gap] : undefined,
};
return (_jsx("span", { className: styles.SkeletonItem, "data-skeleton-circle": circle, "data-skeleton-animated": enableAnimation, style: { ...dynamicStyle, ...style }, children: "\u200C" }));
}, [borderRadius, width, computedWidth, height, computedHeight, gap, circle, enableAnimation, style]);
return (_jsx("span", { className: className, "aria-live": "polite", "aria-busy": enableAnimation, ...otherProps, children: Array.from({ length: count }).map((_, i) => (inline
? _jsx(SkeletonItem, {}, uid(i))
: (_jsxs(Fragment, { children: [_jsx(SkeletonItem, {}), _jsx("br", {})] }, uid(i))))) }));
};