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%; width: 100%;
height: 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 clsx from 'clsx';
import { motion, MotionConfigProps } from 'motion/react'; import { motion, MotionConfigProps } from 'motion/react';
import { type ImgHTMLAttributes } from 'react'; import { ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react';
import { Img } from 'react-image'; import { Img } from 'react-image';
import { InView } from 'react-intersection-observer'; import { InView } from 'react-intersection-observer';
@ -50,35 +50,34 @@ export function Image({
return ( return (
<InView> <InView>
{({ inView, ref }) => ( {({ inView, ref }) => (
<div ref={ref}> <Img
<Img className={clsx(styles.image, className)}
className={clsx(styles.image, className)} container={(children) => (
container={(children) => ( <ImageContainer
<ImageContainer className={containerClassName}
className={containerClassName} enableAnimation={enableAnimation}
enableAnimation={enableAnimation} ref={ref}
{...imageContainerProps} {...imageContainerProps}
> >
{children} {children}
</ImageContainer>
)}
loader={
includeLoader ? (
<ImageContainer className={containerClassName}>
<ImageLoader className={className} />
</ImageContainer> </ImageContainer>
)} ) : null
loader={ }
includeLoader ? ( src={inView ? src : FALLBACK_SVG}
<ImageContainer className={containerClassName}> unloader={
<ImageLoader className={className} /> includeUnloader ? (
</ImageContainer> <ImageContainer className={containerClassName}>
) : null <ImageUnloader className={className} />
} </ImageContainer>
src={inView ? src : FALLBACK_SVG} ) : null
unloader={ }
includeUnloader ? ( />
<ImageContainer className={containerClassName}>
<ImageUnloader className={className} />
</ImageContainer>
) : null
}
/>
</div>
)} )}
</InView> </InView>
); );
@ -87,25 +86,31 @@ export function Image({
return <ImageUnloader />; return <ImageUnloader />;
} }
function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) { const ImageContainer = forwardRef(
if (!enableAnimation) { (
return ( { children, className, enableAnimation, ...props }: ImageContainerProps,
<div className={clsx(styles.imageContainer, className)} {...props}> ref: ForwardedRef<HTMLDivElement>,
{children} ) => {
</div> if (!enableAnimation) {
); return (
} <div className={clsx(styles.imageContainer, className)} ref={ref} {...props}>
{children}
</div>
);
}
return ( return (
<motion.div <motion.div
className={clsx(styles.imageContainer, className)} className={clsx(styles.imageContainer, className)}
{...animationProps.fadeIn} ref={ref}
{...props} {...animationProps.fadeIn}
> {...props}
{children} >
</motion.div> {children}
); </motion.div>
} );
},
);
function ImageLoader({ className }: ImageLoaderProps) { function ImageLoader({ className }: ImageLoaderProps) {
return ( return (
@ -118,7 +123,7 @@ function ImageLoader({ className }: ImageLoaderProps) {
function ImageUnloader({ className }: ImageUnloaderProps) { function ImageUnloader({ className }: ImageUnloaderProps) {
return ( return (
<div className={clsx(styles.unloader, className)}> <div className={clsx(styles.unloader, className)}>
<Icon icon="emptyImage" size="xl" /> <Icon color="default" icon="emptyImage" size="xl" />
</div> </div>
); );
} }