fix: simplify renderDefaultPhoto callback params

igordanchenko · Mar 8, 2023 · cc56f5a · cc56f5a
1 parent 198a557
commit cc56f5a
Show file tree

Hide file tree

Showing 4 changed files with 459 additions and 6 deletions.
diff --git a/src/components/renderers/PhotoRenderer.tsx b/src/components/renderers/PhotoRenderer.tsx
@@ -59,7 +59,8 @@ export type PhotoRendererProps<T extends Photo = Photo> = Omit<
     "imageProps" | "renderDefaultPhoto" | "wrapperStyle"
 > & {
     imageProps?: ImageElementAttributes;
-} & { renderPhoto?: RenderPhoto<T> };
+    renderPhoto?: RenderPhoto<T>;
+};
 
 export default function PhotoRenderer<T extends Photo = Photo>(props: PhotoRendererProps<T>) {
     const { photo, layout, layoutOptions, imageProps: { style, ...restImageProps } = {}, renderPhoto } = props;
@@ -99,19 +100,19 @@ export default function PhotoRenderer<T extends Photo = Photo>(props: PhotoRende
         ...restImageProps,
     };
 
-    function renderDefaultPhoto({ wrapped }: { wrapped?: boolean } = {}) {
+    const renderDefaultPhoto: RenderPhotoProps<T>["renderDefaultPhoto"] = (options) => {
         const { src, alt, srcSet, sizes, style: unwrappedStyle, ...rest } = imageProps;
 
         return (
             <img
                 alt={alt}
                 {...(srcSet ? { srcSet, sizes } : null)}
                 src={src}
-                style={wrapped ? { display: "block", width: "100%", height: "100%" } : unwrappedStyle}
+                style={options?.wrapped ? { display: "block", width: "100%", height: "100%" } : unwrappedStyle}
                 {...rest}
             />
         );
-    }
+    };
 
     const wrapperStyle = (({ display, boxSizing, width, aspectRatio, padding, marginBottom, cursor }) => ({
         display,

diff --git a/src/types.ts b/src/types.ts
@@ -68,7 +68,7 @@ export type RenderPhotoProps<T extends Photo = Photo> = {
     imageProps: NonOptional<ImageElementAttributes, "src" | "alt" | "style">;
     /** A callback to render the default photo implementation. If `wrapped` is `true`, the image is styled with `width`
      * and `height` set to 100%. Use this option when rendering image wrapper styled with wrapperStyle. */
-    renderDefaultPhoto: RenderFunction<{ wrapped?: boolean }>;
+    renderDefaultPhoto: RenderFunction<{ wrapped?: boolean } | void>;
     /** CSS styles to properly size image wrapper (i.e. <div> wrapper) */
     wrapperStyle: React.CSSProperties;
 };
@@ -203,7 +203,7 @@ export type RenderColumnContainerProps<T extends Photo = Photo> = React.PropsWit
 
 export type RenderColumnContainer<T extends Photo = Photo> = RenderFunction<RenderColumnContainerProps<T>>;
 
-export type RenderFunction<T> = (props: T) => React.ReactNode;
+export type RenderFunction<T = void> = (props: T) => React.ReactNode;
 
 export type DivElementAttributes = React.HTMLAttributes<HTMLDivElement>;
 

diff --git a/test/PhotoAlbum.test.tsx b/test/PhotoAlbum.test.tsx
@@ -444,6 +444,10 @@ describe("PhotoAlbum", () => {
                 )}
             />
         );
+
+        whenAskedToRender(
+            <PhotoAlbum layout="rows" photos={photos} renderPhoto={({ renderDefaultPhoto }) => renderDefaultPhoto()} />
+        );
     });
 
     it("de-duplicates srcSet images", () => {