Simplify AnimateWhenInViewport component

aliebald · aliebald · commit ff059b5b8c2a · 2022-09-14T22:09:57.000+02:00
diff --git a/components/Atoms/AnimateWhenInViewport/AnimateWhenInViewport.tsx b/components/Atoms/AnimateWhenInViewport/AnimateWhenInViewport.tsx
@@ -1,4 +1,4 @@
-import type { Ref, ReactElement } from "react";
+import { Ref, ReactElement, cloneElement, DetailedReactHTMLElement, MutableRefObject } from "react";
 import { useRef, useEffect, useState } from "react";
 
 export interface Animation {
@@ -7,7 +7,7 @@ export interface Animation {
 }
 
 interface AnimateWhenInViewportProps<T> extends Animation {
-	children: (ref: Ref<T>) => ReactElement<any, any>;
+	children: JSX.Element;
 }
 
 export default function AnimateWhenInViewport<T extends HTMLElement>({
@@ -64,7 +64,16 @@ export default function AnimateWhenInViewport<T extends HTMLElement>({
 		return () => {
 			observer.disconnect();
 		};
-	}, [ref]);
+	}, [initDelay, initTime, ref, threshold]);
 
-	return <div className="animation-wrapper">{children(ref)}</div>;
+	/**
+	 * Set `ref.current` to `current`, if not null.
+	 */
+	const updateRef = (current: T | null) => {
+		if (current) {
+			ref.current = current;
+		}
+	};
+
+	return <div className="animation-wrapper">{cloneElement(children, { ref: updateRef })}</div>;
 }
diff --git a/components/Atoms/LinkButtonAnimated/LinkButtonAnimated.tsx b/components/Atoms/LinkButtonAnimated/LinkButtonAnimated.tsx
@@ -11,7 +11,7 @@ interface LinkButtonAnimatedProps extends LinkButtonProps {
 export default function LinkButtonAnimated({ animation, ...props }: LinkButtonAnimatedProps) {
 	return (
 		<AnimateWhenInViewport {...animation}>
-			{(ref: Ref<HTMLAnchorElement>) => <LinkButton {...props} ref={ref} />}
+			<LinkButton {...props} />
 		</AnimateWhenInViewport>
 	);
 }
diff --git a/components/Atoms/TitleAnimated/TitleAnimated.tsx b/components/Atoms/TitleAnimated/TitleAnimated.tsx
@@ -10,7 +10,7 @@ interface TitleAnimatedProps extends TitleProps {
 export default function TitleAnimated({ animation, className, ...props }: TitleAnimatedProps) {
 	return (
 		<AnimateWhenInViewport {...animation}>
-			{(ref: Ref<HTMLDivElement>) => <Title ref={ref} {...props}></Title>}
+			<Title {...props} />
 		</AnimateWhenInViewport>
 	);
 }
diff --git a/components/Molecules/ProjectCardAnimated/ProjectCardAnimated.tsx b/components/Molecules/ProjectCardAnimated/ProjectCardAnimated.tsx
@@ -11,7 +11,7 @@ interface ProjectCardAnimatedProps extends ProjectCardProps {
 export default function ProjectCardAnimated({ animation, ...props }: ProjectCardAnimatedProps) {
 	return (
 		<AnimateWhenInViewport {...animation}>
-			{(ref: Ref<HTMLAnchorElement>) => <ProjectCard {...props} ref={ref} />}
+			<ProjectCard {...props} />
 		</AnimateWhenInViewport>
 	);
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ interface LinkButtonAnimatedProps extends LinkButtonProps {`
`11`	`11`	`export default function LinkButtonAnimated({ animation, ...props }: LinkButtonAnimatedProps) {`
`12`	`12`	`return (`
`13`	`13`	`<AnimateWhenInViewport {...animation}>`
`14`		`- {(ref: Ref<HTMLAnchorElement>) => <LinkButton {...props} ref={ref} />}`
	`14`	`+ <LinkButton {...props} />`
`15`	`15`	`</AnimateWhenInViewport>`
`16`	`16`	`);`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ interface TitleAnimatedProps extends TitleProps {`
`10`	`10`	`export default function TitleAnimated({ animation, className, ...props }: TitleAnimatedProps) {`
`11`	`11`	`return (`
`12`	`12`	`<AnimateWhenInViewport {...animation}>`
`13`		`- {(ref: Ref<HTMLDivElement>) => <Title ref={ref} {...props}></Title>}`
	`13`	`+ <Title {...props} />`
`14`	`14`	`</AnimateWhenInViewport>`
`15`	`15`	`);`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ interface ProjectCardAnimatedProps extends ProjectCardProps {`
`11`	`11`	`export default function ProjectCardAnimated({ animation, ...props }: ProjectCardAnimatedProps) {`
`12`	`12`	`return (`
`13`	`13`	`<AnimateWhenInViewport {...animation}>`
`14`		`- {(ref: Ref<HTMLAnchorElement>) => <ProjectCard {...props} ref={ref} />}`
	`14`	`+ <ProjectCard {...props} />`
`15`	`15`	`</AnimateWhenInViewport>`
`16`	`16`	`);`
`17`	`17`	`}`