@lumx/react 3.7.6-alpha.1 → 3.7.6-alpha.3

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.1",
-        "@lumx/icons": "^3.7.6-alpha.1",
+        "@lumx/core": "^3.7.6-alpha.3",
+        "@lumx/icons": "^3.7.6-alpha.3",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.1"
+    "version": "3.7.6-alpha.3"
 }

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

@@ -119,15 +119,17 @@ export const MultipleImagesWithZoom = {
 export const WithButtonTrigger = {
     decorators: [
         (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox([
-                { image: IMAGES.portrait1s200, alt: 'Image 1' },
-                { image: IMAGES.landscape1s200, alt: 'Image 2' },
-            ]);
+            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(0) as any)}>Image 1</Button>
-                    <Button {...(getTriggerProps(1) as any)}>Image 2</Button>
+                    <Button {...(getTriggerProps({ activeImageIndex: 0 }) as any)}>Image 1</Button>
+                    <Button {...(getTriggerProps({ activeImageIndex: 1 }) as any)}>Image 2</Button>
                 </>
             );
         },
@@ -143,14 +145,14 @@ export const WithMosaicTrigger = {
     args: { ...SLIDESHOW_PROPS, ...ZOOM_PROPS },
     decorators: [
         (Story: any, { args }: any) => {
-            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox(MULTIPLE_IMAGES);
+            const { getTriggerProps, imageLightboxProps } = ImageLightbox.useImageLightbox({ images: MULTIPLE_IMAGES });
             return (
                 <>
                     <Story args={{ ...args, ...imageLightboxProps }} />
                     <Mosaic
                         thumbnails={MULTIPLE_IMAGES.map((image, index) => ({
                             ...image,
-                            ...getTriggerProps(index),
+                            ...getTriggerProps({ activeImageIndex: index }),
                         }))}
                     />
                 </>

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

@@ -16,6 +16,8 @@ type ManagedProps = Pick<
 
 const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: React.createRef() };
 
+type TriggerOptions = Pick<ImageLightboxProps, 'activeImageIndex'>;
+
 /**
  * Set up an ImageLightbox with images and triggers.
  *
@@ -23,24 +25,33 @@ const EMPTY_PROPS: ManagedProps = { isOpen: false, images: [], parentElement: Re
  * - Associate a trigger with an image to display on open
  * - Automatically provide a view transition between an image trigger and the displayed image on open & close
  *
- * @param images Images to display in the image lightbox
+ * @param initialProps Images to display in the image lightbox
  */
-export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
+export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
+    initialProps: P,
+): {
     /**
      * Generates trigger props
      * @param index Provide an index to choose which image to display when the image lightbox opens.
      * */
-    getTriggerProps: (index?: number) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
+    getTriggerProps: (options: TriggerOptions) => { onClick: React.MouseEventHandler; ref: React.Ref<any> };
     /** Props to forward to the ImageLightbox */
-    imageLightboxProps: ManagedProps;
+    imageLightboxProps: P & ManagedProps;
 } {
+    const { images = [], ...otherProps } = initialProps;
+
+    const basePropsRef = React.useRef(EMPTY_PROPS as P & ManagedProps);
+    React.useEffect(() => {
+        basePropsRef.current = { ...EMPTY_PROPS, ...otherProps } as P & ManagedProps;
+    }, [otherProps]);
+
     const imagesPropsRef = React.useRef(images);
     React.useEffect(() => {
         imagesPropsRef.current = images.map((props) => ({ imgRef: React.createRef(), ...props }));
     }, [images]);
 
     const currentImageRef = React.useRef<HTMLImageElement>(null);
-    const [imageLightboxProps, setImageLightboxProps] = React.useState<ManagedProps>(EMPTY_PROPS);
+    const [imageLightboxProps, setImageLightboxProps] = React.useState<P & ManagedProps>(basePropsRef.current);
 
     const getTriggerProps = React.useMemo(() => {
         const triggerImageRefs: Record<number, React.RefObject<HTMLImageElement>> = {};
@@ -57,25 +68,24 @@ export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
             await startViewTransition({
                 changes() {
                     // Close lightbox with reset empty props
-                    setImageLightboxProps(({ parentElement }) => ({ ...EMPTY_PROPS, parentElement }));
+                    setImageLightboxProps(({ parentElement }) => ({ ...basePropsRef.current, parentElement }));
                 },
                 // Morph from the image in lightbox to the image in trigger
                 viewTransitionName: {
                     source: currentImageRef,
-                    //source: imageIsVisible ? currentImageRef : null,
                     target: triggerImageRefs[currentIndex],
                     name: CLASSNAME,
                 },
             });
         }
 
-        async function openLightbox(triggerElement: HTMLElement, index?: number) {
+        async function openLightbox(triggerElement: HTMLElement, { activeImageIndex }: TriggerOptions = {}) {
             // If we find an image inside the trigger, animate it in transition with the opening image
-            const triggerImage = triggerImageRefs[index as any]?.current || findImage(triggerElement);
+            const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
 
             // Inject the trigger image size as a fallback for better loading state
             const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
-                if (triggerImage && idx === index && !image.imgProps?.width && !image.imgProps?.height) {
+                if (triggerImage && idx === activeImageIndex && !image.imgProps?.width && !image.imgProps?.height) {
                     const imgProps = {
                         ...image.imgProps,
                         height: triggerImage.naturalHeight,
@@ -90,12 +100,13 @@ export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
                 changes: () => {
                     // Open lightbox with setup props
                     setImageLightboxProps({
+                        ...basePropsRef.current,
                         activeImageRef: currentImageRef,
                         parentElement: { current: triggerElement },
                         isOpen: true,
                         onClose: closeLightbox,
                         images: imagesWithFallbackSize,
-                        activeImageIndex: index || 0,
+                        activeImageIndex: activeImageIndex || 0,
                     });
                 },
                 // Morph from the image in trigger to the image in lightbox
@@ -107,13 +118,14 @@ export function useImageLightbox(images: ImageLightboxProps['images'] = []): {
             });
         }
 
-        return memoize((index?: number) => ({
+        return memoize((options?: TriggerOptions) => ({
             ref(element: HTMLElement | null) {
                 const triggerImage = findImage(element);
-                if (index !== undefined && triggerImage) triggerImageRefs[index] = { current: triggerImage };
+                if (options?.activeImageIndex !== undefined && triggerImage)
+                    triggerImageRefs[options.activeImageIndex] = { current: triggerImage };
             },
             onClick(e: React.MouseEvent) {
-                openLightbox(e.target as HTMLElement, index);
+                openLightbox(e.target as HTMLElement, options);
             },
         }));
     }, []);