Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 12:14:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge gradient into main skeleton element

Browse Source
This commit is contained in:
Zoe Roux 2024-05-27 15:10:50 +02:00
parent 26a3c2c984
commit 13309bce20
No known key found for this signature in database
1 changed files with 23 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
front/packages/primitives/src/skeleton.tsx
View File

@ -50,39 +50,6 @@ export const SkeletonCss = () => (
`}</style> `}</style>
); );
const AnimatedGradient = memo(
function Gradient({ color, width }: { color: string; width: SharedValue<number> }) {
const mult = useSharedValue(-1);
const animated = useAnimatedStyle(() => ({
transform: [
{
translateX: width.value * mult.value,
},
],
}));
useEffect(() => {
mult.value = withRepeat(withDelay(800, withTiming(1, { duration: 800 })), 0);
});
return (
<LinearGradient
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}
colors={["transparent", color, "transparent"]}
style={[
StyleSheet.absoluteFillObject,
{ transform: [{ translateX: -width.value }] },
animated,
]}
/>
);
},
function propsAreEqual(prev, next) {
return prev.color === next.color;
},
);
export const Skeleton = ({ export const Skeleton = ({
children, children,
show: forcedShow, show: forcedShow,
@ -96,7 +63,19 @@ export const Skeleton = ({
variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext"; variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext";
}) => { }) => {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
const width = useSharedValue(0); const width = useSharedValue(-900);
const mult = useSharedValue(-1);
const animated = useAnimatedStyle(() => ({
transform: [
{
translateX: width.value * mult.value,
},
],
}));
useEffect(() => {
mult.value = withRepeat(withDelay(800, withTiming(1, { duration: 800 })), 0);
});
if (forcedShow === undefined && children && children !== true) return <>{children}</>; if (forcedShow === undefined && children && children !== true) return <>{children}</>;
@ -165,7 +144,16 @@ export const Skeleton = ({
}, },
])} ])}
> >
<AnimatedGradient color={theme.overlay1} width={width} /> <LinearGradient
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}
colors={["transparent", theme.overlay1, "transparent"]}
style={[
StyleSheet.absoluteFillObject,
{ transform: [{ translateX: -width.value }] },
animated,
]}
/>
</View> </View>
))} ))}
{children} {children}