@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
40 lines • 1.53 kB
JavaScript
import React, { forwardRef } from 'react';
import { StyledBaseSkeleton, StyledMotionBaseSkeletonPulse, StyledMotionBaseSkeletonShimmer } from './BaseSkeleton.styles';
import { SkeletonAnimationType } from '../types';
import { useSkeletonAnimation, useSkeletonContext } from '../skeleton-provider/SkeletonProvider';
export const BaseSkeleton = /*#__PURE__*/forwardRef(({
baseColor,
highlightColor,
animationType,
height,
style,
width,
className,
borderRadius,
as,
children
}, ref) => {
const values = useSkeletonContext();
const animationStyle = useSkeletonAnimation();
const resolvedAnimationType = animationType ?? values.animationType;
return /*#__PURE__*/React.createElement(StyledBaseSkeleton, {
as: as,
ref: ref,
className: className,
style: style,
$backgroundColor: baseColor ?? values.baseColor,
$borderRadius: borderRadius ?? values.borderRadius,
$height: height,
$width: width,
$shouldUseNativeTag: !!as
}, resolvedAnimationType === SkeletonAnimationType.SHIMMER && /*#__PURE__*/React.createElement(StyledMotionBaseSkeletonShimmer, {
$color: highlightColor ?? values.highlightColor,
style: animationStyle
}), resolvedAnimationType === SkeletonAnimationType.PULSE && /*#__PURE__*/React.createElement(StyledMotionBaseSkeletonPulse, {
$color: highlightColor ?? values.highlightColor,
style: animationStyle
}), children);
});
BaseSkeleton.displayName = 'BaseSkeleton';
export default BaseSkeleton;
//# sourceMappingURL=BaseSkeleton.js.map