feat: improve onClick callback DX

BREAKING CHANGE: change onClick callback method signature
igordanchenko · Oct 27, 2022 · aedfaf9 · aedfaf9
1 parent cfa8ce5
commit aedfaf9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/components/renderers/PhotoRenderer.tsx b/src/components/renderers/PhotoRenderer.tsx
@@ -82,7 +82,7 @@ const PhotoRenderer = <T extends Photo = Photo>(props: PhotoRendererProps<T>) =>
 
     const handleClick = onClick
         ? (event: React.MouseEvent) => {
-              onClick(event, photo, layout.index);
+              onClick({ event, photo, index: layout.index });
           }
         : undefined;
 

diff --git a/src/types.ts b/src/types.ts
@@ -2,7 +2,15 @@ import * as React from "react";
 
 export type LayoutType = "columns" | "rows" | "masonry";
 
-export type ClickHandler<T extends Photo = Photo> = (event: React.MouseEvent, photo: T, index: number) => void;
+export type ClickHandler<T extends Photo = Photo> = ({
+    event,
+    photo,
+    index,
+}: {
+    event: React.MouseEvent;
+    photo: T;
+    index: number;
+}) => void;
 
 export type ResponsiveParameterProvider<T = number> = (containerWidth: number) => T;
 

diff --git a/test/PhotoAlbum.test.tsx b/test/PhotoAlbum.test.tsx
@@ -255,7 +255,7 @@ describe("PhotoAlbum", () => {
             imageProps: { src, alt, ...restImageProps },
         }) => <img src={src} alt={alt} data-custom-attribute={photo.customAttribute} {...restImageProps} />;
 
-        const clickHandler: ClickHandler<CustomPhoto> = (event, photo, index) => {
+        const clickHandler: ClickHandler<CustomPhoto> = ({ photo, index }) => {
             // this check doesn't actually get called, but it's here to type check the click handler
             expect(photo.customAttribute).toBe(index);
         };
@@ -273,7 +273,7 @@ describe("PhotoAlbum", () => {
                 renderPhoto={({ photo, imageProps: { src, alt, ...restImageProps } }) => (
                     <img src={src} alt={alt} data-custom-attribute={photo.customAttribute} {...restImageProps} />
                 )}
-                onClick={(event, photo, index) => {
+                onClick={({ photo, index }) => {
                     // this check doesn't actually get called, but it's here to type check the click handler
                     expect(photo.customAttribute).toBe(index);
                 }}
@@ -344,7 +344,7 @@ describe("PhotoAlbum", () => {
         screen.getByAltText("photo-0").click();
 
         expect(onClick.mock.calls.length).toBe(1);
-        expect(onClick.mock.calls[0][1]).toBe(testPhotos[0]);
+        expect(onClick.mock.calls[0][0].photo).toBe(testPhotos[0]);
     });
 
     it("supports sizes attribute", () => {