fix: merge className prop instead of overriding

igordanchenko · May 10, 2023 · adc8c3f · adc8c3f
1 parent 4876ba3
commit adc8c3f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/src/components/renderers/ColumnContainerRenderer.tsx b/src/components/renderers/ColumnContainerRenderer.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import clsx from "../../utils/clsx";
 import round from "../../utils/round";
 import { Optional, Photo, RenderColumnContainer, RenderColumnContainerProps } from "../../types";
 
@@ -40,12 +41,12 @@ export default function ColumnContainerRenderer<T extends Photo = Photo>(props:
         layoutOptions,
         renderColumnContainer,
         children,
-        columnContainerProps: { style, ...restColumnContainerProps } = {},
+        columnContainerProps: { style, className, ...restColumnContainerProps } = {},
         ...rest
     } = props;
 
     const columnContainerProps = {
-        className: "react-photo-album--column",
+        className: clsx("react-photo-album--column", className),
         style: {
             display: "flex",
             flexDirection: "column",

diff --git a/src/components/renderers/ContainerRenderer.tsx b/src/components/renderers/ContainerRenderer.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import clsx from "../../utils/clsx";
 import { Optional, RenderContainer, RenderContainerProps } from "../../types";
 
 function defaultRenderContainer({ containerProps, children, containerRef }: RenderContainerProps) {
@@ -20,11 +21,11 @@ export default function ContainerRenderer(props: ContainerRendererProps) {
         renderContainer,
         children,
         containerRef,
-        containerProps: { style, ...restContainerProps } = {},
+        containerProps: { style, className, ...restContainerProps } = {},
     } = props;
 
     const containerProps = {
-        className: `react-photo-album react-photo-album--${layout}`,
+        className: clsx("react-photo-album", `react-photo-album--${layout}`, className),
         style: {
             display: "flex",
             flexWrap: "nowrap",

diff --git a/src/components/renderers/PhotoRenderer.tsx b/src/components/renderers/PhotoRenderer.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import clsx from "../../utils/clsx";
 import round from "../../utils/round";
 import { ImageElementAttributes, LayoutOptions, Photo, PhotoLayout, RenderPhoto, RenderPhotoProps } from "../../types";
 
@@ -65,7 +66,13 @@ export type PhotoRendererProps<T extends Photo = Photo> = Omit<
 };
 
 export default function PhotoRenderer<T extends Photo = Photo>(props: PhotoRendererProps<T>) {
-    const { photo, layout, layoutOptions, imageProps: { style, ...restImageProps } = {}, renderPhoto } = props;
+    const {
+        photo,
+        layout,
+        layoutOptions,
+        imageProps: { style, className, ...restImageProps } = {},
+        renderPhoto,
+    } = props;
     const { onClick } = layoutOptions;
 
     const imageStyle = {
@@ -95,7 +102,7 @@ export default function PhotoRenderer<T extends Photo = Photo>(props: PhotoRende
         title: photo.title,
         onClick: handleClick,
         style: imageStyle,
-        className: "react-photo-album--photo",
+        className: clsx("react-photo-album--photo", className),
         loading: "lazy" as const,
         decoding: "async" as const,
         ...srcSetAndSizes(photo, layout, layoutOptions),

diff --git a/src/components/renderers/RowContainerRenderer.tsx b/src/components/renderers/RowContainerRenderer.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import clsx from "../../utils/clsx";
 import { Optional, Photo, RenderRowContainer, RenderRowContainerProps } from "../../types";
 
 function defaultRenderRowContainer<T extends Photo = Photo>({
@@ -22,12 +23,12 @@ export default function RowContainerRenderer<T extends Photo = Photo>(props: Row
         rowIndex,
         rowsCount,
         renderRowContainer,
-        rowContainerProps: { style, ...restRowContainerProps } = {},
+        rowContainerProps: { style, className, ...restRowContainerProps } = {},
         children,
     } = props;
 
     const rowContainerProps = {
-        className: "react-photo-album--row",
+        className: clsx("react-photo-album--row", className),
         style: {
             display: "flex",
             flexDirection: "row",

diff --git a/src/utils/clsx.ts b/src/utils/clsx.ts
@@ -0,0 +1,3 @@
+export default function clsx(...classes: (string | boolean | undefined)[]) {
+    return [...classes].filter((cls) => Boolean(cls)).join(" ");
+}