feat: reorganize ContainerProps, ColumnContainerProps, RowContainerPr…

…ops, PhotoProps Rename PhotoDecorator to PhotoRenderer. Remove ResponsivePhoto from named exports.
igordanchenko · Dec 30, 2021 · 657cf3b · 657cf3b
1 parent ebf250c
commit 657cf3b
Show file tree

Hide file tree

Showing 16 changed files with 984 additions and 276 deletions.
diff --git a/src/PhotoAlbum.tsx b/src/PhotoAlbum.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 import ResizeObserver from "resize-observer-polyfill";
 
 import Layout from "./Layout";
-import RowsLayout from "./components/RowsLayout";
-import ColumnsLayout from "./components/ColumnsLayout";
-import MasonryLayout from "./components/MasonryLayout";
-import PhotoAlbumContainer from "./components/PhotoAlbumContainer";
+import RowsLayout from "./components/layouts/RowsLayout";
+import ColumnsLayout from "./components/layouts/ColumnsLayout";
+import MasonryLayout from "./components/layouts/MasonryLayout";
+import ContainerRenderer from "./components/renderers/ContainerRenderer";
 import resolveResponsiveParameter from "./utils/responsive";
 import useLayoutEffect from "./utils/layoutEffect";
 import { ColumnsLayoutOptions, Photo, PhotoAlbumProps, RowsLayoutOptions } from "./types";
@@ -105,10 +105,8 @@ const PhotoAlbum = <T extends Photo>(props: PhotoAlbumProps<T>): JSX.Element =>
 
     const commonLayoutProps = { photos, renderPhoto, instrumentation };
 
-    const Container = renderContainer || PhotoAlbumContainer;
-
     return (
-        <Container ref={setContainerRef} layoutOptions={layoutOptions}>
+        <ContainerRenderer ref={setContainerRef} layoutOptions={layoutOptions} renderContainer={renderContainer}>
             {layout === Layout.Rows ? (
                 <RowsLayout<T>
                     layoutOptions={layoutOptions as RowsLayoutOptions}
@@ -128,7 +126,7 @@ const PhotoAlbum = <T extends Photo>(props: PhotoAlbumProps<T>): JSX.Element =>
                     {...commonLayoutProps}
                 />
             )}
-        </Container>
+        </ContainerRenderer>
     );
 };
 

diff --git a/src/ResponsivePhoto.tsx b/src/ResponsivePhoto.tsx
diff --git a/src/components/ColumnContainer.tsx b/src/components/ColumnContainer.tsx
diff --git a/src/components/PhotoAlbumContainer.tsx b/src/components/PhotoAlbumContainer.tsx
diff --git a/src/components/PhotoDecorator.tsx b/src/components/PhotoDecorator.tsx
diff --git a/src/components/RowContainer.tsx b/src/components/RowContainer.tsx
diff --git a/src/components/ColumnsLayout.tsx → src/components/layouts/ColumnsLayout.tsx b/src/components/ColumnsLayout.tsx → src/components/layouts/ColumnsLayout.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 
-import PhotoDecorator from "./PhotoDecorator";
-import ColumnContainer from "./ColumnContainer";
-import computeColumnsLayout from "../layouts/columns";
-import { ColumnsLayoutOptions, Instrumentation, Photo, RenderColumnContainer, RenderPhoto } from "../types";
+import PhotoRenderer from "../renderers/PhotoRenderer";
+import ColumnContainerRenderer from "../renderers/ColumnContainerRenderer";
+import computeColumnsLayout from "../../layouts/columns";
+import { ColumnsLayoutOptions, Instrumentation, Photo, RenderColumnContainer, RenderPhoto } from "../../types";
 
 type ColumnsLayoutProps<T extends Photo = Photo> = {
     photos: T[];
@@ -15,9 +15,6 @@ type ColumnsLayoutProps<T extends Photo = Photo> = {
 
 const ColumnsLayout = <T extends Photo = Photo>(props: ColumnsLayoutProps<T>): JSX.Element => {
     const { photos, layoutOptions, renderPhoto, renderColumnContainer, instrumentation } = props;
-    const { onClick } = layoutOptions;
-
-    const Container = renderColumnContainer || ColumnContainer;
 
     const columnsLayout = computeColumnsLayout({ photos, layoutOptions, instrumentation });
 
@@ -28,27 +25,25 @@ const ColumnsLayout = <T extends Photo = Photo>(props: ColumnsLayoutProps<T>): J
     return (
         <>
             {columnsModel.map((column, columnIndex) => (
-                <Container
+                <ColumnContainerRenderer
                     key={`column-${columnIndex}`}
                     layoutOptions={layoutOptions}
                     columnIndex={columnIndex}
                     columnsCount={columnsModel.length}
                     columnsGaps={columnsGaps}
                     columnsRatios={columnsRatios}
+                    renderColumnContainer={renderColumnContainer}
                 >
                     {column.map(({ photo, layout }) => (
-                        <PhotoDecorator
+                        <PhotoRenderer
                             key={photo.key || photo.src}
-                            photoProps={{
-                                photo,
-                                layout,
-                                onClick,
-                                layoutOptions,
-                            }}
+                            photo={photo}
+                            layout={layout}
+                            layoutOptions={layoutOptions}
                             renderPhoto={renderPhoto}
                         />
                     ))}
-                </Container>
+                </ColumnContainerRenderer>
             ))}
         </>
     );

diff --git a/src/components/MasonryLayout.tsx → src/components/layouts/MasonryLayout.tsx b/src/components/MasonryLayout.tsx → src/components/layouts/MasonryLayout.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
 
-import PhotoDecorator from "./PhotoDecorator";
-import ColumnContainer from "./ColumnContainer";
-import computeMasonryLayout from "../layouts/masonry";
-import { ColumnsLayoutOptions, Instrumentation, Photo, RenderColumnContainer, RenderPhoto } from "../types";
+import PhotoRenderer from "../renderers/PhotoRenderer";
+import ColumnContainerRenderer from "../renderers/ColumnContainerRenderer";
+import computeMasonryLayout from "../../layouts/masonry";
+import { ColumnsLayoutOptions, Instrumentation, Photo, RenderColumnContainer, RenderPhoto } from "../../types";
 
 type MasonryLayoutProps<T extends Photo = Photo> = {
     photos: T[];
@@ -15,36 +15,31 @@ type MasonryLayoutProps<T extends Photo = Photo> = {
 
 const MasonryLayout = <T extends Photo = Photo>(props: MasonryLayoutProps<T>): JSX.Element => {
     const { photos, layoutOptions, renderPhoto, renderColumnContainer, instrumentation } = props;
-    const { onClick } = layoutOptions;
 
     const masonryLayout = computeMasonryLayout({ photos, layoutOptions, instrumentation });
 
     if (masonryLayout === undefined) return <></>;
 
-    const Container = renderColumnContainer || ColumnContainer;
-
     return (
         <>
             {masonryLayout.map((column, columnIndex) => (
-                <Container
+                <ColumnContainerRenderer
                     key={`masonry-column-${columnIndex}`}
                     layoutOptions={layoutOptions}
                     columnsCount={masonryLayout.length}
                     columnIndex={columnIndex}
+                    renderColumnContainer={renderColumnContainer}
                 >
                     {column.map(({ photo, layout }) => (
-                        <PhotoDecorator
+                        <PhotoRenderer
                             key={photo.key || photo.src}
-                            photoProps={{
-                                photo,
-                                layout,
-                                onClick,
-                                layoutOptions,
-                            }}
+                            photo={photo}
+                            layout={layout}
+                            layoutOptions={layoutOptions}
                             renderPhoto={renderPhoto}
                         />
                     ))}
-                </Container>
+                </ColumnContainerRenderer>
             ))}
         </>
     );