@lumx/react 3.20.1-alpha.24 → 3.20.1-alpha.26

package/src/components/image-lightbox/ImageLightbox.stories.tsx

@@ -1,160 +0,0 @@
-import { IMAGES } from '@lumx/react/stories/controls/image';
-import { Button, Mosaic, ImageLightbox, ImageLightboxProps, Chip, ChipGroup } from '@lumx/react';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-
-const ZOOM_PROPS = {
-    zoomInButtonProps: { label: 'Zoom in' },
-    zoomOutButtonProps: { label: 'Zoom out' },
-};
-
-const SLIDESHOW_PROPS = {
-    slideshowControlsProps: {
-        nextButtonProps: { label: 'Next' },
-        previousButtonProps: { label: 'Previous' },
-        paginationItemProps: (index: number) => ({ label: `Go to slide ${index + 1}` }),
-    },
-};
-
-const MULTIPLE_IMAGES: ImageLightboxProps['images'] = [
-    {
-        image: 'https://picsum.photos/id/237/2000/3000',
-        alt: 'Image 1',
-        title: 'Little puppy',
-        description: 'A black labrador puppy with big brown eyes, looking up with a curious and innocent expression.',
-        tags: (
-            <ChipGroup>
-                <Chip size="s">Tag 1</Chip>
-                <Chip size="s">Tag 2</Chip>
-            </ChipGroup>
-        ),
-    },
-    {
-        image: 'https://picsum.photos/id/337/3000/1000',
-        alt: 'Image 2',
-        // Intentionally using the wrong size to see how it renders while loading the image
-        imgProps: { width: '300px', height: '100px' },
-    },
-    {
-        image: 'https://picsum.photos/id/437/2000/2000',
-        alt: 'Image 3',
-    },
-    {
-        image: 'https://picsum.photos/id/537/300/400',
-        alt: 'Image 4',
-    },
-    {
-        image: 'https://picsum.photos/id/637/400/200',
-        alt: 'Image 5',
-    },
-    {
-        image: 'https://picsum.photos/id/737/300/300',
-        alt: 'Image 6',
-    },
-];
-
-export default {
-    title: 'LumX components/image-lightbox/ImageLightbox',
-    component: ImageLightbox,
-    args: {
-        closeButtonProps: { label: 'Close' },
-    },
-    argTypes: {
-        onClose: { action: true },
-    },
-};
-
-/**
- * Display a single image fullscreen in the ImageLightbox
- */
-export const SingleImage = {
-    args: {
-        images: [{ image: IMAGES.portrait1s200, alt: 'Image 1' }],
-        isOpen: true,
-    },
-};
-
-/**
- * Display a single image fullscreen in the ImageLightbox with zoom controls
- */
-export const SingleImageWithZoom = {
-    ...SingleImage,
-    args: { ...SingleImage.args, ...ZOOM_PROPS },
-};
-
-/**
- * Display a single image fullscreen in the ImageLightbox with metadata (title, description, etc.)
- */
-export const SingleImageWithMetadata = {
-    ...SingleImage,
-    args: { ...SingleImage.args, images: [MULTIPLE_IMAGES[0]] },
-};
-
-/**
- * Display a multiple image fullscreen in the ImageLightbox
- */
-export const MultipleImages = {
-    args: {
-        images: MULTIPLE_IMAGES,
-        isOpen: true,
-        ...SLIDESHOW_PROPS,
-    },
-};
-
-/**
- * Display a multiple images fullscreen in the ImageLightbox with zoom controls
- */
-export const MultipleImagesWithZoom = {
-    ...MultipleImages,
-    args: { ...MultipleImages.args, ...ZOOM_PROPS },
-};
-
-/**
- * Open ImageLightbox via buttons
- */
-export const WithButtonTrigger = {
-    decorators: [
-        (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({
-                images: [
-                    { image: IMAGES.portrait1s200, alt: 'Image 1' },
-                    { image: IMAGES.landscape1s200, alt: 'Image 2' },
-                ],
-            });
-            return (
-                <>
-                    <Story args={{ ...args, ...imageLightboxProps }} />
-                    <Button {...(getTriggerProps({ activeImageIndex: 0 }) as any)}>Image 1</Button>
-                    <Button {...(getTriggerProps({ activeImageIndex: 1 }) as any)}>Image 2</Button>
-                </>
-            );
-        },
-    ],
-    // Disables Chromatic snapshot (not relevant for this story).
-    parameters: { chromatic: { disable: true } },
-};
-
-/**
- * Open ImageLightbox with zoom and slideshow via clickable thumbnails in a Mosaic
- */
-export const WithMosaicTrigger = {
-    args: { ...SLIDESHOW_PROPS, ...ZOOM_PROPS },
-    decorators: [
-        (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({ images: MULTIPLE_IMAGES });
-            return (
-                <>
-                    <Story args={{ ...args, ...imageLightboxProps }} />
-                    <Mosaic
-                        thumbnails={MULTIPLE_IMAGES.map((image, index) => ({
-                            ...image,
-                            ...getTriggerProps({ activeImageIndex: index }),
-                        }))}
-                    />
-                </>
-            );
-        },
-        withWrapper({ style: { width: 300 } }),
-    ],
-    // Disables Chromatic snapshot (not relevant for this story).
-    parameters: { chromatic: { disable: true } },
-};

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -1,254 +0,0 @@
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, within, screen, waitFor } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event';
-import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
-
-import { ImageLightbox } from './ImageLightbox';
-import { ImageLightboxProps } from './types';
-import Meta, {
-    MultipleImages,
-    MultipleImagesWithZoom,
-    SingleImage,
-    SingleImageWithZoom,
-    WithButtonTrigger,
-    WithMosaicTrigger,
-} from './ImageLightbox.stories';
-
-vi.mock('@lumx/react/hooks/useImageSize');
-vi.mock('@lumx/react/hooks/useSizeOnWindowResize');
-
-const CLASSNAME = ImageLightbox.className as string;
-const baseProps = Meta.args;
-
-const setup = (overrides: Partial<ImageLightboxProps> = {}) => {
-    const props: any = {
-        ...baseProps,
-        isOpen: true,
-        images: [],
-        ...overrides,
-    };
-    const result = render(<ImageLightbox {...props} />);
-    const rerender = () => result.rerender(<ImageLightbox {...props} />);
-    const imageLightbox = queryByClassName(document.body, CLASSNAME);
-    return { props, imageLightbox, rerender };
-};
-
-const queries = {
-    getImageLightbox: () => getByClassName(document.body, CLASSNAME),
-    queryCloseButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Close' }),
-    queryImage: (imageLightbox: HTMLElement, name?: string) => within(imageLightbox).queryByRole('img', { name }),
-    queryScrollArea: (imageLightbox: HTMLElement) =>
-        queryByClassName(imageLightbox, 'lumx-image-lightbox__image-slide'),
-    queryZoomInButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Zoom in' }),
-    queryZoomOutButton: (imageLightbox: HTMLElement) =>
-        within(imageLightbox).queryByRole('button', { name: 'Zoom out' }),
-    queryPrevSlideButton: (imageLightbox: HTMLElement) =>
-        within(imageLightbox).queryByRole('button', { name: 'Previous' }),
-    queryNextSlideButton: (imageLightbox: HTMLElement) => within(imageLightbox).queryByRole('button', { name: 'Next' }),
-    querySlideButton: (imageLightbox: HTMLElement, slide: number) =>
-        within(imageLightbox).queryByRole('tab', { name: `Go to slide ${slide}` }),
-};
-
-describe(`<${ImageLightbox.displayName}>`, () => {
-    beforeEach(() => {
-        (useImageSize as any).mockReturnValue(null);
-        (useSizeOnWindowResize as any).mockReturnValue([null, vi.fn()]);
-    });
-
-    describe('render', () => {
-        it('should render single image', () => {
-            setup(SingleImage.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-
-            // Should not render
-            expect(queries.queryZoomInButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryPrevSlideButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).not.toBeInTheDocument();
-        });
-
-        it('should render single image with zoom', () => {
-            setup(SingleImageWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-            expect(queries.queryZoomInButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).toBeInTheDocument();
-
-            // Should not render
-            expect(queries.queryPrevSlideButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).not.toBeInTheDocument();
-        });
-
-        it('should render multiple images', () => {
-            setup(MultipleImages.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-            expect(queries.queryPrevSlideButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).toBeInTheDocument();
-
-            // Should not render
-            expect(queries.queryZoomInButton(imageLightbox)).not.toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).not.toBeInTheDocument();
-        });
-
-        it('should render multiple images with set active image', () => {
-            setup({ ...MultipleImages.args, activeImageIndex: 1 });
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
-        });
-
-        it('should render multiple images with zoom', () => {
-            setup(MultipleImagesWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Should render
-            expect(queries.queryCloseButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-            expect(queries.queryPrevSlideButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryNextSlideButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryZoomInButton(imageLightbox)).toBeInTheDocument();
-            expect(queries.queryZoomOutButton(imageLightbox)).toBeInTheDocument();
-        });
-    });
-
-    describe('trigger', () => {
-        it('should move focus on open and close with single image lightbox', async () => {
-            const decorator = WithButtonTrigger.decorators[0];
-            const Story = ({ args }: any) => <ImageLightbox {...args} />;
-            const Render = () => decorator(Story, { args: baseProps });
-            render(<Render />);
-
-            // Focus the second button
-            await userEvent.tab();
-            await userEvent.tab();
-            const buttonTrigger = screen.getByRole('button', { name: 'Image 2' });
-            expect(buttonTrigger).toHaveFocus();
-
-            // Open image lightbox with the button trigger
-            await userEvent.keyboard('{enter}');
-
-            // Focus moved to the close button
-            const imageLightbox = queries.getImageLightbox();
-            const closeButton = queries.queryCloseButton(imageLightbox);
-            expect(closeButton).toHaveFocus();
-            const tooltip = screen.getByRole('tooltip', { name: 'Close' });
-            expect(tooltip).toBeInTheDocument();
-
-            // Image lightbox opened on the correct image
-            expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
-
-            // Close tooltip
-            await userEvent.keyboard('{escape}');
-            expect(tooltip).not.toBeInTheDocument();
-
-            // Close on escape
-            await userEvent.keyboard('{escape}');
-            await waitFor(() => {
-                expect(imageLightbox).not.toBeInTheDocument();
-            });
-
-            // Focus moved back to the trigger button
-            expect(buttonTrigger).toHaveFocus();
-        });
-
-        it('should move focus on open and close with multiple image lightbox', async () => {
-            const decorator = WithMosaicTrigger.decorators[0];
-            const Story = ({ args }: any) => <ImageLightbox {...args} />;
-            const Render = () => decorator(Story, { args: { ...baseProps, ...WithMosaicTrigger.args } });
-            render(<Render />);
-
-            // Focus the first button & activate to open
-            await userEvent.tab();
-            const buttonTrigger = document.activeElement;
-            await userEvent.keyboard('{enter}');
-
-            // Focus moved to the first slide button
-            const imageLightbox = queries.getImageLightbox();
-            expect(queries.querySlideButton(imageLightbox, 1)).toHaveFocus();
-
-            // Image lightbox opened on the correct image
-            expect(queries.queryImage(imageLightbox, 'Image 1')).toBeInTheDocument();
-
-            // Close on escape
-            await userEvent.keyboard('{escape}');
-            await waitFor(() => {
-                expect(imageLightbox).not.toBeInTheDocument();
-            });
-
-            // Focus moved back to the trigger button
-            expect(buttonTrigger).toHaveFocus();
-        });
-    });
-
-    describe('zoom', () => {
-        const scrollAreaSize = { width: 600, height: 600 };
-        beforeEach(() => {
-            (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, vi.fn()]);
-        });
-
-        it('should use the image initial size', () => {
-            setup({
-                images: [
-                    { image: 'https://example.com/image.png', alt: 'Image 1', imgProps: { width: 200, height: 200 } },
-                ],
-            });
-            const imageLightbox = queries.getImageLightbox();
-            const image = queries.queryImage(imageLightbox, 'Image 1');
-            expect(image).toHaveStyle({
-                height: `200px`,
-                width: `200px`,
-            });
-        });
-
-        it('should zoom on zoom button pressed', async () => {
-            // Set image size (simulate image loaded)
-            const imageSize = { width: 500, height: 300 };
-            (useImageSize as any).mockReturnValue(imageSize);
-
-            setup(SingleImageWithZoom.args);
-            const imageLightbox = queries.getImageLightbox();
-
-            // Image style
-            const image = queries.queryImage(imageLightbox, 'Image 1');
-            expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
-
-            // Scroll area is bigger than the image, it should not be focusable
-            expect(queries.queryScrollArea(imageLightbox)).not.toHaveAttribute('tabindex');
-
-            // Zoom in
-            const zoomInButton = queries.queryZoomInButton(imageLightbox) as any;
-            await userEvent.click(zoomInButton);
-            expect(image).toHaveStyle({ height: '450px', width: '750px' });
-
-            // Scroll area is smaller than the image, it should be focusable
-            expect(queries.queryScrollArea(imageLightbox)).toHaveAttribute('tabindex', '0');
-
-            // Zoom out
-            const zoomOutButton = queries.queryZoomOutButton(imageLightbox) as any;
-            await userEvent.click(zoomOutButton);
-            expect(image).toHaveStyle({ width: `${imageSize.width}px`, height: `${imageSize.height}px` });
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'imageLightbox',
-        forwardAttributes: 'imageLightbox',
-    });
-});

package/src/components/image-lightbox/ImageLightbox.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { Lightbox, ThemeProvider } from '@lumx/react';
-import { ClickAwayProvider } from '@lumx/react/utils';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { ImageSlideshow } from './internal/ImageSlideshow';
-import { useImageLightbox } from './useImageLightbox';
-import type { ImageLightboxProps } from './types';
-import { CLASSNAME, COMPONENT_NAME } from './constants';
-
-const Inner = forwardRef<ImageLightboxProps, HTMLDivElement>((props, ref) => {
-    const {
-        className,
-        isOpen,
-        closeButtonProps,
-        onClose,
-        parentElement,
-        activeImageIndex,
-        slideshowControlsProps,
-        slideGroupLabel,
-        images,
-        zoomOutButtonProps,
-        zoomInButtonProps,
-        activeImageRef: propImageRef,
-        ...forwardedProps
-    } = props;
-    const currentPaginationItemRef = React.useRef(null);
-    const footerRef = React.useRef(null);
-    const imageRef = React.useRef(null);
-    const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);
-
-    const onClickAway = React.useCallback(
-        (evt: Event) => {
-            const targetElement = evt.target;
-            if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;
-
-            // Skip click away if clicking on the scrollbar
-            if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
-
-            onClose?.();
-        },
-        [onClose],
-    );
-
-    return (
-        <Lightbox
-            ref={ref}
-            className={classNames(className, CLASSNAME)}
-            parentElement={parentElement}
-            isOpen={isOpen}
-            onClose={onClose}
-            closeButtonProps={closeButtonProps}
-            focusElement={currentPaginationItemRef}
-            {...forwardedProps}
-            // Disable the close on click away as we want a custom one here
-            preventAutoClose
-        >
-            <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>
-                <ThemeProvider value="dark">
-                    <ImageSlideshow
-                        activeImageIndex={activeImageIndex}
-                        slideGroupLabel={slideGroupLabel}
-                        slideshowControlsProps={slideshowControlsProps}
-                        images={images}
-                        zoomInButtonProps={zoomInButtonProps}
-                        zoomOutButtonProps={zoomOutButtonProps}
-                        footerRef={footerRef}
-                        activeImageRef={useMergeRefs(propImageRef, imageRef)}
-                        currentPaginationItemRef={currentPaginationItemRef}
-                    />
-                </ThemeProvider>
-            </ClickAwayProvider>
-        </Lightbox>
-    );
-});
-Inner.displayName = COMPONENT_NAME;
-Inner.className = CLASSNAME;
-
-/**
- * ImageLightbox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ImageLightbox = Object.assign(Inner, { useImageLightbox });

package/src/components/image-lightbox/constants.ts

@@ -1,11 +0,0 @@
-import { getRootClassName } from '@lumx/core/js/utils/className';
-
-/**
- * Component display name.
- */
-export const COMPONENT_NAME = 'ImageLightbox';
-
-/**
- * Component default class name and class prefix.
- */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);

package/src/components/image-lightbox/index.ts

@@ -1,2 +0,0 @@
-export { ImageLightbox } from './ImageLightbox';
-export type { ImageLightboxProps } from './types';

package/src/components/image-lightbox/internal/ImageSlide.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-
-import { SlideshowItem, Thumbnail } from '@lumx/react';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
-import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
-import { isEqual } from '@lumx/react/utils/object/isEqual';
-
-import { CLASSNAME } from '../constants';
-import { usePointerZoom } from './usePointerZoom';
-import { useAnimateScroll } from './useAnimateScroll';
-import type { ImageProps } from '../types';
-
-export interface ImageSlideProps {
-    image: ImageProps;
-    isActive?: boolean;
-    scale?: number;
-    onScaleChange?: (value: number) => void;
-}
-
-/** Internal image slide component for ImageLightbox */
-export const ImageSlide = React.memo((props: ImageSlideProps) => {
-    const {
-        isActive,
-        scale,
-        onScaleChange,
-        image: { image, imgRef: propImgRef, imgProps, alt, loadingPlaceholderImageRef },
-    } = props;
-
-    // Get scroll area size
-    const scrollAreaRef = React.useRef<HTMLDivElement>(null);
-    const [scrollAreaSize, updateSize] = useSizeOnWindowResize(scrollAreaRef);
-    React.useEffect(() => {
-        // Update size when active
-        if (isActive) updateSize();
-    }, [isActive, updateSize]);
-
-    // Get image size
-    const imgRef = React.useRef<HTMLImageElement>(null);
-    const imageSize = useImageSize(imgRef, () => {
-        const width = Number.parseInt(imgProps?.width as any, 10);
-        const height = Number.parseInt(imgProps?.height as any, 10);
-        return width && height ? { width, height } : null;
-    });
-
-    // Calculate new image size with scale
-    const scaledImageSize = React.useMemo(() => {
-        if (!scrollAreaSize || !imageSize) {
-            return null;
-        }
-        const horizontalScale = scrollAreaSize.width / imageSize.width;
-        const verticalScale = scrollAreaSize.height / imageSize.height;
-        const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));
-        return {
-            width: imageSize.width * baseScale * (scale ?? 1),
-            height: imageSize.height * baseScale * (scale ?? 1),
-        };
-    }, [scrollAreaSize, imageSize, scale]);
-
-    // Animate scroll to preserve the center of the current visible window in the scroll area
-    const animateScroll = useAnimateScroll(scrollAreaRef);
-
-    // Zoom via mouse wheel or multi-touch pinch zoom
-    const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);
-
-    // Animate scroll on scale change
-    React.useLayoutEffect(() => {
-        if (scale && !isPointerZooming) {
-            animateScroll();
-        }
-    }, [isPointerZooming, scale, animateScroll]);
-
-    const isScrollable =
-        scaledImageSize &&
-        scrollAreaSize &&
-        (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);
-
-    return (
-        <SlideshowItem
-            ref={scrollAreaRef}
-            // Make it accessible to keyboard nav when the zone is scrollable
-            tabIndex={isScrollable ? 0 : undefined}
-            className={`${CLASSNAME}__image-slide`}
-        >
-            <Thumbnail
-                imgRef={useMergeRefs(imgRef, propImgRef)}
-                image={image}
-                alt={alt}
-                className={`${CLASSNAME}__thumbnail`}
-                imgProps={{
-                    ...imgProps,
-                    style: {
-                        ...imgProps?.style,
-                        ...(scaledImageSize || {
-                            maxHeight: scrollAreaSize?.height,
-                            maxWidth: scrollAreaSize?.width,
-                        }),
-                        // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
-                        transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined,
-                    },
-                }}
-                loadingPlaceholderImageRef={loadingPlaceholderImageRef}
-            />
-        </SlideshowItem>
-    );
-}, isEqual);