@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
79 lines • 2.22 kB
JavaScript
import React, { createContext, useContext, useEffect } from 'react';
import { ColorMode, useSite } from 'chayns-api';
import { SkeletonAnimationType } from '../types';
import { animate, useMotionValue, useTransform } from 'motion/react';
export const SkeletonContext = /*#__PURE__*/createContext(undefined);
SkeletonContext.displayName = 'SkeletonContext';
export const useSkeletonConfig = ({
highlightColor,
baseColor,
animationType = SkeletonAnimationType.PULSE,
borderRadius = 4
}) => {
const {
colorMode
} = useSite();
const progress = useMotionValue(0);
useEffect(() => {
const controls = animate(progress, 1, {
duration: 2.4,
repeat: Infinity,
repeatType: 'loop',
ease: 'linear'
});
return controls.stop;
}, [progress]);
const defaultHighlightColor = colorMode === ColorMode.Dark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)';
const defaultBaseColor = colorMode === ColorMode.Dark ? '#262626' : '#e5e5e5';
return {
animationType,
borderRadius,
baseColor: baseColor ?? defaultBaseColor,
highlightColor: highlightColor ?? defaultHighlightColor,
progress
};
};
export const useSkeletonAnimation = () => {
const {
animationType,
progress
} = useSkeletonContext();
const opacity = useTransform(progress, [0, 0.5, 1], [0.06, 0.18, 0.06]);
const x = useTransform(progress, [0, 1], ['-100%', '100%']);
if (animationType === SkeletonAnimationType.PULSE) {
return {
opacity
};
}
return {
x
};
};
export const useSkeletonContext = () => {
const defaultValues = useSkeletonConfig({});
const context = useContext(SkeletonContext);
if (!context) {
return defaultValues;
}
return context;
};
const SkeletonProvider = ({
animationType = SkeletonAnimationType.PULSE,
baseColor,
highlightColor,
borderRadius = 4,
children
}) => {
const value = useSkeletonConfig({
baseColor,
borderRadius,
highlightColor,
animationType
});
return /*#__PURE__*/React.createElement(SkeletonContext.Provider, {
value: value
}, children);
};
SkeletonProvider.displayName = 'Skeleton.Config';
export default SkeletonProvider;
//# sourceMappingURL=SkeletonProvider.js.map