antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +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%;
}

101
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,35 +50,34 @@ export function Image({
return (
<InView>
{({ inView, ref }) => (
<div ref={ref}>
<Img
className={clsx(styles.image, className)}
container={(children) => (
<ImageContainer
className={containerClassName}
enableAnimation={enableAnimation}
{...imageContainerProps}
>
{children}
<Img
className={clsx(styles.image, className)}
container={(children) => (
<ImageContainer
className={containerClassName}
enableAnimation={enableAnimation}
ref={ref}
{...imageContainerProps}
>
{children}
</ImageContainer>
)}
loader={
includeLoader ? (
<ImageContainer className={containerClassName}>
<ImageLoader className={className} />
</ImageContainer>
)}
loader={
includeLoader ? (
<ImageContainer className={containerClassName}>
<ImageLoader className={className} />
</ImageContainer>
) : null
}
src={inView ? src : FALLBACK_SVG}
unloader={
includeUnloader ? (
<ImageContainer className={containerClassName}>
<ImageUnloader className={className} />
</ImageContainer>
) : null
}
/>
</div>
) : null
}
src={inView ? src : FALLBACK_SVG}
unloader={
includeUnloader ? (
<ImageContainer className={containerClassName}>
<ImageUnloader className={className} />
</ImageContainer>
) : null
}
/>
)}
</InView>
);
@ -87,25 +86,31 @@ export function Image({
return <ImageUnloader />;
}
function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
if (!enableAnimation) {
return (
<div className={clsx(styles.imageContainer, className)} {...props}>
{children}
</div>
);
}
const ImageContainer = forwardRef(
(
{ children, className, enableAnimation, ...props }: ImageContainerProps,
ref: ForwardedRef<HTMLDivElement>,
) => {
if (!enableAnimation) {
return (
<div className={clsx(styles.imageContainer, className)} ref={ref} {...props}>
{children}
</div>
);
}
return (
<motion.div
className={clsx(styles.imageContainer, className)}
{...animationProps.fadeIn}
{...props}
>
{children}
</motion.div>
);
}
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>
);
}