Merge pull request #35 from imagine10255/27-uselazyloadbg-not-disconn…

…ect-observe fix useLazyLoadBg not disconnect observe
imagine10255 · Oct 31, 2024 · f412a78 · f412a78
2 parents d6cf41d + 35c7648
commit f412a78
Show file tree

Hide file tree

Showing 12 changed files with 309 additions and 171 deletions.
diff --git a/example/src/components/data.tsx b/example/src/components/data.tsx
@@ -1,4 +1,10 @@
-import {BearSlideCard, TBearSlideItemDataList } from "bear-react-carousel";
+import {
+    BearSlideCard,
+    BearSlideImage,
+    TBearSlideItemDataList,
+    IBearSlideImageProps,
+    IBearSlideCardProps
+} from "bear-react-carousel";
 import {asset} from '../utils';
 import {generatorArray} from "@acrool/js-utils/array";
 
@@ -54,3 +60,25 @@ export const foodImages: IFoodImage[] = [
 export const bearSlideItemData1: TBearSlideItemDataList = baseImage.map(row => {
     return <BearSlideCard key={row.id} bgUrl={row.imageUrl}/>;
 });
+
+
+export const generatorBearSlideCardData = (args?: IBearSlideCardProps): TBearSlideItemDataList => {
+    return baseImage.map(row => {
+        return <BearSlideCard
+            {...args}
+            key={row.id}
+            bgUrl={row.imageUrl}
+        />;
+    });
+}
+
+
+export const generatorBearSlideImageData = (args?: IBearSlideImageProps): TBearSlideItemDataList => {
+    return baseImage.map(row => {
+        return <BearSlideImage
+            {...args}
+            key={row.id}
+            imageUrl={row.imageUrl}
+        />;
+    });
+}
diff --git a/example/src/components/primary/BearReactCarousel/BearReactCarousel.stories.tsx b/example/src/components/primary/BearReactCarousel/BearReactCarousel.stories.tsx
@@ -4,8 +4,7 @@ import BearCarousel, {
     BearSlideCard,
     elClassName
 } from 'bear-react-carousel';
-import {baseImage, bearSlideItemData1} from "../../data";
-import {IAspectRatio} from "../../../../../src";
+import {baseImage, generatorBearSlideCardData, generatorBearSlideImageData} from "../../data";
 
 
 const meta = {
@@ -23,7 +22,7 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {},
     args: {
-        data: bearSlideItemData1,
+        data: generatorBearSlideCardData(),
         spaceBetween: 0,
         slidesPerView: 1,
         slidesPerGroup: 1,
@@ -185,11 +184,6 @@ export const WithCustomPagination: Story = {
         }}
 };
 
-export const WithLazy: Story = {
-    args: {
-        isLazy: true,
-    }
-};
 
 
 
@@ -207,3 +201,16 @@ export const WithBreakpoints: Story = {
 };
 
 
+export const WithLazyBySlideCard: Story = {
+    args: {
+        isLazy: true,
+    }
+};
+
+export const WithLazyBySlideImage: Story = {
+    args: {
+        isLazy: true,
+        height: 'auto',
+        data: generatorBearSlideImageData(),
+    }
+};
diff --git a/example/src/components/primary/BearSlideCard/BearSlideCard.stories.tsx b/example/src/components/primary/BearSlideCard/BearSlideCard.stories.tsx
@@ -0,0 +1,56 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import BearCarousel, {
+    TBearSlideItemDataList,
+    BearSlideCard
+} from 'bear-react-carousel';
+import {generatorBearSlideCardData, generatorBearSlideImageData} from "../../data";
+
+
+const meta = {
+    title: 'Primary/BearSlideCard',
+    component: BearSlideCard,
+    parameters: {
+        layout: 'centered',
+        actions: {argTypesRegex: '^on.*'},
+        docs: {
+            description: {
+                component: 'Slide item component use div css background-image'
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {
+        bgSize: '100%' // '100%'|'cover'|'contain'
+    },
+    render: function Render(args) {
+
+        const bearSlideItemData1: TBearSlideItemDataList = generatorBearSlideCardData(args);
+
+        return <BearCarousel
+            data={bearSlideItemData1}
+            height="300px"
+        />;
+    },
+} satisfies Meta<typeof BearSlideCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+
+
+export const Primary: Story = {
+    args: {
+    }
+};
+export const WithCover: Story = {
+    args: {
+        bgSize: 'cover'
+    }
+};
+export const WithContain: Story = {
+    args: {
+        bgSize: 'contain'
+    }
+};
diff --git a/example/src/components/primary/BearSlideImage/BearSlideImage.stories.tsx b/example/src/components/primary/BearSlideImage/BearSlideImage.stories.tsx
@@ -1,13 +1,9 @@
-import { Flex } from '@acrool/react-grid';
 import type {Meta, StoryObj} from '@storybook/react';
 import BearCarousel, {
-    BearSlideCard,
     TBearSlideItemDataList,
-    ICarouselState,
-    Controller,
-    TOnSlideChange, BearSlideImage
+    BearSlideImage
 } from 'bear-react-carousel';
-import {baseImage, bearSlideItemData1} from "../../data";
+import {generatorBearSlideImageData} from "../../data";
 
 
 const meta = {
@@ -18,7 +14,7 @@ const meta = {
         actions: {argTypesRegex: '^on.*'},
         docs: {
             description: {
-                component: 'Carousel item component'
+                component: 'Slide item component use img html tag'
             },
         },
     },
@@ -30,13 +26,7 @@ const meta = {
     },
     render: function Render(args) {
 
-        const bearSlideItemData1: TBearSlideItemDataList = baseImage.map(row => {
-            return <BearSlideImage
-                {...args}
-                key={row.id}
-                imageUrl={row.imageUrl}
-            />;
-        });
+        const bearSlideItemData1: TBearSlideItemDataList = generatorBearSlideImageData(args);
 
         return <BearCarousel
             data={bearSlideItemData1}

diff --git a/src/BearSlideCard.tsx b/src/BearSlideCard.tsx
@@ -3,16 +3,9 @@ import CSS from 'csstype';
 import clsx from 'clsx';
 import elClassName from './el-class-name';
 import {useSlide} from './components/SlideProvider';
-import useLazyLoadBg, {ELoadStatus} from './hook/useLazyLoadBg';
+import useLazyLoadBackground from './hooks/useLazyLoadBackground';
+import {IBearSlideCardProps} from './types';
 
-interface IProps {
-  className?: string,
-  style?: CSS.Properties,
-  bgUrl?: string,
-  bgSize?: '100%'|'cover'|'contain',
-  children?: ReactNode,
-  onClick?: () => void,
-}
 
 
 /**
@@ -32,11 +25,24 @@ const BearSlideCard = ({
     bgSize = 'cover',
     children,
     onClick,
-}: IProps) => {
+}: IBearSlideCardProps) => {
     const slide = useSlide();
-    const {imageRef, status, doneImageUrl} = useLazyLoadBg({isLazy: slide.isLazy, imageUrl: bgUrl});
+    const {imageRef, isPending, isFetching} = useLazyLoadBackground({
+        enabled: slide.isLazy,
+        imageUrl: bgUrl
+    });
+
+
+    /**
+     * 取得ImgBg變數
+     */
+    const getImgBgImageCSSVar = () => {
+        if(bgUrl && !slide.isLazy){
+            return `url("${bgUrl}")`;
+        }
+        return undefined;
+    };
 
-    const imageUrl = slide.isLazy ? doneImageUrl: bgUrl;
 
     return <div
         ref={imageRef}
@@ -46,13 +52,13 @@ const BearSlideCard = ({
             [elClassName.slideItemCardContain]: bgSize === 'contain',
         })}
         onClick={onClick}
-        data-lazy-src={slide.isLazy && status !== ELoadStatus.done ? bgUrl: undefined}
+        data-lazy-src={slide.isLazy && isPending ? bgUrl: undefined}
         style={{
             ...style,
-            backgroundImage: imageUrl ? `url(${imageUrl})` :undefined,
-        }}
+            '--slide-card-image': getImgBgImageCSSVar(),
+        } as CSS.Properties}
     >
-        {slide.isLazy && status === ELoadStatus.loading ? <div className={elClassName.slideItemImagePreLoad}>
+        {isFetching ? <div className={elClassName.slideItemImagePreLoad}>
             {slide.renderLazyPreloader()}
         </div>: children}
     </div>;

diff --git a/src/BearSlideImage.tsx b/src/BearSlideImage.tsx
@@ -1,19 +1,10 @@
 import CSS from 'csstype';
 import clsx from 'clsx';
 import elClassName from './el-class-name';
-import useLazyLoadImage from './hook/useLazyLoadImage';
+import useLazyLoadImage from './hooks/useLazyLoadImage';
 import {useSlide} from './components/SlideProvider';
-import {ELoadStatus} from './hook/useLazyLoadBg';
+import {IBearSlideImageProps} from './types';
 
-interface IProps {
-  className?: string,
-  style?: CSS.Properties,
-  imageUrl: string,
-  imageAlt?: string,
-  imageSize?: 'none'|'cover'|'contain'|'scaleDown',
-  alt?: string,
-  onClick?: () => void,
-}
 
 
 /**
@@ -33,9 +24,12 @@ const BearSlideImage = ({
     imageAlt,
     imageSize,
     onClick,
-}: IProps) => {
+}: IBearSlideImageProps) => {
     const slide = useSlide();
-    const {imageRef, status} = useLazyLoadImage({isLazy: slide.isLazy ?? false, imageUrl});
+    const {imageRef, isPending, isFetching} = useLazyLoadImage({
+        enabled: slide.isLazy ?? false,
+        imageUrl
+    });
 
 
     return <>
@@ -51,10 +45,10 @@ const BearSlideImage = ({
             src={(!slide.isLazy && imageUrl) ? imageUrl :undefined}
             alt={imageAlt}
             draggable="false"
-            data-lazy-src={slide.isLazy && status !== ELoadStatus.done ? imageUrl: undefined}
+            data-lazy-src={slide.isLazy && isPending ? imageUrl: undefined}
             onClick={onClick}
         />
-        {slide.isLazy && status === ELoadStatus.loading && <div className={elClassName.slideItemImagePreLoad}>
+        {isFetching && <div className={elClassName.slideItemImagePreLoad}>
             {slide.renderLazyPreloader()}
         </div>}
     </>;

diff --git a/src/hook/useLazyLoadBg.ts b/src/hook/useLazyLoadBg.ts