fix formatting, improve mosaic example

movetodigital · Dec 9, 2019 · 306b367 · 306b367 · vercel · Dec 9, 2019
1 parent 41837e4
commit 306b367
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 68 deletions.
diff --git a/__tests__/MosaicComponent.test.tsx b/__tests__/MosaicComponent.test.tsx
@@ -4,7 +4,30 @@ import * as React from 'react';
 import {Mosaic} from '../src/Mosaic';
 
 const hydratedProps = {
-  images: ['x', 'x', 'x', 'x'],
+  images: [
+    {
+      src: '/image/name/1',
+      width: 500,
+      height: 500,
+    },
+    {
+      src: '/image/name/1',
+      width: 500,
+      height: 500,
+    },
+    {
+      src: '/image/name/1',
+      width: 500,
+      height: 500,
+    },
+    {
+      src: '/image/name/1',
+      width: 500,
+      height: 500,
+    },
+  ],
+  gridColumns: 5,
+  gridGutter: 1,
 };
 
 describe('<Mosaic />', () => {

diff --git a/__tests__/__snapshots__/MosaicComponent.test.tsx.snap b/__tests__/__snapshots__/MosaicComponent.test.tsx.snap
@@ -1,50 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Mosaic /> should render and match snapshot 1`] = `
-<div>
-  <img
-    alt="hello"
-    src="https://source.unsplash.com/1600x900"
-    style={
-      Object {
-        "width": "100%",
-      }
-    }
-    title="Sample title"
-  />
-  <br />
-  <img
-    alt="hello"
-    src="https://source.unsplash.com/1600x901"
-    style={
-      Object {
-        "width": "100%",
-      }
-    }
-    title="Sample title"
-  />
-  <br />
-  <img
-    alt="hello"
-    src="https://source.unsplash.com/1600x902"
-    style={
-      Object {
-        "width": "100%",
-      }
-    }
-    title="Sample title"
-  />
-  <br />
-  <img
-    alt="hello"
-    src="https://source.unsplash.com/1600x903"
-    style={
-      Object {
-        "width": "100%",
-      }
-    }
-    title="Sample title"
-  />
-  <br />
-</div>
+<styled.div>
+  <styled.div
+    height={240}
+    key="0_0.5"
+    padding="0.5% 0.5% 0.5% 0%"
+    width={19.2}
+  >
+    <div>
+      <styled.img
+        key="/image/name/1"
+        src="/image/name/1"
+      />
+    </div>
+  </styled.div>
+  <styled.div
+    height={240}
+    key="1_0.5"
+    padding="0.5% 0.5% 0.5% 0.5%"
+    width={19.2}
+  >
+    <div>
+      <styled.img
+        key="/image/name/1"
+        src="/image/name/1"
+      />
+    </div>
+  </styled.div>
+  <styled.div
+    height={240}
+    key="2_0.5"
+    padding="0.5% 0.5% 0.5% 0.5%"
+    width={19.2}
+  >
+    <div>
+      <styled.img
+        key="/image/name/1"
+        src="/image/name/1"
+      />
+    </div>
+  </styled.div>
+  <styled.div
+    height={240}
+    key="3_0.5"
+    padding="0.5% 0.5% 0.5% 0.5%"
+    width={19.2}
+  >
+    <div>
+      <styled.img
+        key="/image/name/1"
+        src="/image/name/1"
+      />
+    </div>
+  </styled.div>
+</styled.div>
 `;
diff --git a/src/Mosaic.tsx b/src/Mosaic.tsx
@@ -1,10 +1,19 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-interface Props {
-  images: Array<string>;
+type FunctionName = (n: object) => any;
+
+interface ImageItemProps {
+  src: string;
+  title?: string;
+  alt?: string;
+}
+
+interface ComponentProps {
+  images: Array<ImageItemProps>;
   gridColumns: number;
   gridGutter: number;
+  imageRenderer?: FunctionName;
 }
 
 const Images = styled.div`
@@ -13,13 +22,13 @@ const Images = styled.div`
   flex-wrap: wrap;
 `;
 
-interface ItemProps {
+interface StyleItemProps {
   readonly width: number;
   readonly padding: string;
   readonly height: number;
 }
 
-const Item = styled.div<ItemProps>`
+const Item = styled.div<StyleItemProps>`
   color: white;
   position: relative;
   box-sizing: border-box;
@@ -28,20 +37,30 @@ const Item = styled.div<ItemProps>`
 
   > div {
     height: ${props => props.height}px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover !important;
-      overflow: hidden !important;
-    }
   }
 `;
 
-export const Mosaic: React.FunctionComponent<Props> = ({
+const DefaultImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover !important;
+  overflow: hidden !important;
+`;
+
+interface RendererProps {
+  props: ImageItemProps;
+  key: number;
+}
+
+const defaultRender = ({props: {src, title, alt}, key}: RendererProps) => {
+  return <DefaultImage key={src} src={src} title={title} alt={alt} />;
+};
+
+const Mosaic: React.FunctionComponent<ComponentProps> = ({
   images,
   gridColumns,
   gridGutter,
+  imageRenderer = defaultRender,
 }) => {
   const gutter = gridGutter / 2;
   const width = (100 - (gridColumns - 1) * gutter * 2) / gridColumns;
@@ -51,22 +70,18 @@ export const Mosaic: React.FunctionComponent<Props> = ({
     <Images>
       {images.map((el, index) => (
         <Item
+          key={`${index}_${gutter}`}
           width={width}
           padding={`${gutter}% ${
             (index + 1) % gridColumns === 0 ? '0' : gutter
           }% ${gutter}% ${index % gridColumns === 0 ? '0' : gutter}%`}
           height={height}
         >
-          <div>
-            <img
-              key={`https://source.unsplash.com/800x${800 + index}`}
-              src={`https://source.unsplash.com/800x${800 + index}`}
-              title="Image title"
-              alt={'image alt'}
-            />
-          </div>
+          <div>{imageRenderer({props: el, key: index})}</div>
         </Item>
       ))}
     </Images>
   );
 };
+
+export {Mosaic};
diff --git a/src/MosaicExample.tsx b/src/MosaicExample.tsx
@@ -6,7 +6,15 @@ interface Props {
 
 import {Mosaic} from './Mosaic';
 
-const images = Array.from('x'.repeat(40));
+const getRandomInt = (max: number) => {
+  return Math.floor(Math.random() * Math.floor(max));
+};
+
+const images = Array.from('x'.repeat(40)).map(item => ({
+  src: `https://source.unsplash.com/800x${800 + getRandomInt(100)}`,
+  title: 'hello',
+  alt: 'hello',
+}));
 export const MosaicExample: React.FunctionComponent<Props> = ({margin}) => (
   <div style={{maxWidth: '1200px', margin}}>
     <Mosaic gridColumns={5} gridGutter={1} images={images} />