antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-03-01 11:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

move inView ref to ImageContainer component

Browse source 
- the separate outer component is unneeded and affects the positioning of some components which rely on the ImageContainer's styling
This commit is contained in:
jeffvli 2025-09-06 17:14:30 -07:00
parent ea122f5a4f
commit 6368137815
2 changed files with 58 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/shared/components/image/image.module.css
View file

@ -32,3 +32,8 @@
width: 100%;
height: 100%;
}
.view-wrapper {
width: 100%;
height: 100%;
}

19
src/shared/components/image/image.tsx
View file

@ -1,6 +1,6 @@
import clsx from 'clsx';
import { motion, MotionConfigProps } from 'motion/react';
import { type ImgHTMLAttributes } from 'react';
import { ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react';
import { Img } from 'react-image';
import { InView } from 'react-intersection-observer';
@ -50,13 +50,13 @@ export function Image({
return (
<InView>
{({ inView, ref }) => (
<div ref={ref}>
<Img
className={clsx(styles.image, className)}
container={(children) => (
<ImageContainer
className={containerClassName}
enableAnimation={enableAnimation}
ref={ref}
{...imageContainerProps}
>
{children}
@ -78,7 +78,6 @@ export function Image({
) : null
}
/>
</div>
)}
</InView>
);
@ -87,10 +86,14 @@ export function Image({
return <ImageUnloader />;
}
function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
const ImageContainer = forwardRef(
(
{ children, className, enableAnimation, ...props }: ImageContainerProps,
ref: ForwardedRef<HTMLDivElement>,
) => {
if (!enableAnimation) {
return (
<div className={clsx(styles.imageContainer, className)} {...props}>
<div className={clsx(styles.imageContainer, className)} ref={ref} {...props}>
{children}
</div>
);
@ -99,13 +102,15 @@ function ImageContainer({ children, className, enableAnimation, ...props }: Imag
return (
<motion.div
className={clsx(styles.imageContainer, className)}
ref={ref}
{...animationProps.fadeIn}
{...props}
>
{children}
</motion.div>
);
}
},
);
function ImageLoader({ className }: ImageLoaderProps) {
return (
@ -118,7 +123,7 @@ function ImageLoader({ className }: ImageLoaderProps) {
function ImageUnloader({ className }: ImageUnloaderProps) {
return (
<div className={clsx(styles.unloader, className)}>
<Icon icon="emptyImage" size="xl" />
<Icon color="default" icon="emptyImage" size="xl" />
</div>
);
}