feat: add carousel.imageProps configuration option (close #131)

package.json

@@ -177,7 +177,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/react": "^18.2.6",
+        "@types/react": "^18.2.7",
         "@types/react-dom": "^18.2.4",
         "@typescript-eslint/eslint-plugin": "^5.59.7",
         "@typescript-eslint/parser": "^5.59.7",

src/Lightbox.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { AnimationSettings, ComponentProps, DeepPartialValue, LightboxExternalProps, Node } from "./types.js";
+import { AnimationSettings, ComponentProps, LightboxExternalProps, Node } from "./types.js";
 import { LightboxDefaultProps } from "./props.js";
 import { createNode, withPlugins } from "./config.js";
 import { EventsProvider, LightboxPropsProvider, LightboxStateProvider, TimeoutsProvider } from "./contexts/index.js";
@@ -22,7 +22,7 @@ function renderNode(node: Node, props: ComponentProps): React.ReactElement {
     );
 }
 
-function mergeAnimation(defaultAnimation: AnimationSettings, animation: DeepPartialValue<AnimationSettings> = {}) {
+function mergeAnimation(defaultAnimation: AnimationSettings, animation: LightboxExternalProps["animation"] = {}) {
     const { easing: defaultAnimationEasing, ...restDefaultAnimation } = defaultAnimation;
     const { easing, ...restAnimation } = animation;
     return {

src/components/ImageSlide.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ContainerRect, ImageFit, Render, SlideImage } from "../types.js";
+import { CarouselSettings, ContainerRect, Render, SlideImage } from "../types.js";
 import { clsx, cssClass, hasWindow, isImageFitCover, makeComposePrefix } from "../utils.js";
 import { useEventCallback } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
@@ -18,18 +18,27 @@ import {
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
 
-export type ImageSlideProps = {
+export type ImageSlideProps = Partial<Pick<CarouselSettings, "imageFit" | "imageProps">> & {
     slide: SlideImage;
     offset?: number;
     render?: Render;
     rect?: ContainerRect;
-    imageFit?: ImageFit;
     onClick?: () => void;
     onLoad?: (image: HTMLImageElement) => void;
     style?: React.CSSProperties;
 };
 
-export function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }: ImageSlideProps) {
+export function ImageSlide({
+    slide: image,
+    offset,
+    render,
+    rect,
+    imageFit,
+    imageProps,
+    onClick,
+    onLoad,
+    style,
+}: ImageSlideProps) {
     const [status, setStatus] = React.useState<SlideStatus>(SLIDE_STATUS_LOADING);
 
     const { publish } = useEvents();
@@ -118,6 +127,8 @@ export function ImageSlide({ slide: image, offset, render, rect, imageFit, onCli
     const sizes =
         srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
 
+    const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = imageProps || {};
+
     return (
         <>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */}
@@ -126,14 +137,16 @@ export function ImageSlide({ slide: image, offset, render, rect, imageFit, onCli
                 onLoad={handleOnLoad}
                 onError={onError}
                 onClick={onClick}
+                draggable={false}
                 className={clsx(
                     cssClass(slideImagePrefix()),
                     cover && cssClass(slideImagePrefix("cover")),
-                    status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading"))
+                    status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")),
+                    imagePropsClassName
                 )}
-                draggable={false}
+                style={{ ...defaultStyle, ...style, ...imagePropsStyle }}
+                {...restImageProps}
                 alt={image.alt}
-                style={{ ...defaultStyle, ...style }}
                 sizes={sizes}
                 srcSet={srcSet}
                 src={image.src}

src/modules/Carousel.tsx

@@ -28,7 +28,7 @@ function CarouselSlide({ slide, offset }: CarouselSlideProps) {
     const { slideRect, close } = useController();
     const {
         render,
-        carousel: { imageFit },
+        carousel: { imageFit, imageProps },
         on: { click: onClick },
         controller: { closeOnBackdropClick },
     } = useLightboxProps();
@@ -44,6 +44,7 @@ function CarouselSlide({ slide, offset }: CarouselSlideProps) {
                     render={render}
                     rect={slideRect}
                     imageFit={imageFit}
+                    imageProps={imageProps}
                     onClick={offset === 0 ? () => onClick?.({ index: currentIndex }) : undefined}
                 />
             );

src/plugins/zoom/ZoomWrapper.tsx

@@ -47,6 +47,7 @@ export function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps) {
             rect,
             render,
             imageFit: carousel.imageFit,
+            imageProps: carousel.imageProps,
             onClick: offset === 0 ? () => on.click?.({ index: currentIndex }) : undefined,
         };
 

src/props.ts

@@ -25,6 +25,7 @@ export const LightboxDefaultProps: LightboxProps = {
         padding: "16px",
         spacing: "30%",
         imageFit: IMAGE_FIT_CONTAIN,
+        imageProps: {},
     },
     controller: {
         ref: null,

src/types.ts

@@ -12,7 +12,11 @@ import {
 } from "./consts.js";
 
 /** Lightbox external props */
-export type LightboxExternalProps = DeepPartial<LightboxProps, "carousel" | "animation" | "controller" | "toolbar">;
+export type LightboxExternalProps = DeepPartial<
+    DeepPartial<DeepPartial<LightboxProps, "animation" | "toolbar">, "carousel", "imageProps">,
+    "controller",
+    "ref"
+>;
 
 /** Lightbox properties */
 export interface LightboxProps {
@@ -162,6 +166,11 @@ export interface CarouselSettings {
     spacing: LengthOrPercentage;
     /** `object-fit` setting for image slides */
     imageFit: ImageFit;
+    /** custom image attributes */
+    imageProps: Omit<
+        React.ImgHTMLAttributes<HTMLImageElement>,
+        "src" | "alt" | "sizes" | "srcSet" | "onLoad" | "onError" | "onClick"
+    >;
 }
 
 export type LengthOrPercentage = `${number}px` | `${number}%` | number;
@@ -397,16 +406,16 @@ export interface PluginProps {
 export type Plugin = (props: PluginProps) => void;
 
 /** Deep partial utility type */
-export type DeepPartial<T extends {}, K extends keyof T> = Omit<Partial<T>, K> & {
-    [P in K]?: DeepPartialValue<T[P]>;
+export type DeepPartial<T extends {}, K extends keyof T = keyof T, E extends string = never> = Omit<Partial<T>, K> & {
+    [P in K]?: DeepPartialValue<T[P], E>;
 };
 
-export type DeepPartialValue<T> = T extends any[]
+export type DeepPartialValue<T, E extends string = never> = T extends any[]
     ? T
     : T extends (...props: any[]) => any
     ? T
     : T extends {}
     ? {
-          [P in keyof T]?: P extends "ref" ? T[P] : DeepPartialValue<T[P]>;
+          [P in keyof T]?: P extends E ? T[P] : DeepPartialValue<T[P], E>;
       }
     : T;