react-justified-layout-ts 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-justified-layout-ts",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A component based off Flickr's justified layout that is compatible with Typescript",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/TSJustifiedLayout.tsx

@@ -100,9 +100,8 @@ function TSJustifiedLayout({
     function renderRow(aspectRatio: ElementDimensions, isLastRow: boolean) {
         childNodeCounter++;
         return <div style={{
-            maxHeight: '100%',
             aspectRatio: aspectRatio,
-            ...(isLastRow ? {} : {flex: aspectRatio}),
+            flex: aspectRatio,
             ...containerStyle
         }}>
             {children[childNodeCounter]}
@@ -117,8 +116,7 @@ function TSJustifiedLayout({
                     display: "flex",
                     flexDirection: "row",
                     gap: itemSpacing,
-                    marginBottom: rowSpacing,
-                    aspectRatio: width / value.height
+                    marginBottom: rowSpacing
                 }
                 }>
                     {value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow))}

package/src/components/layout.css

@@ -1,3 +1,3 @@
 .justified-row img {
-    height: 100%
+    width: 100%
 }

package/src/stories/JustifiedLayout.stories.tsx

@@ -203,7 +203,7 @@ const displayedImages = [
 export const Primary: Story = {
     name: "Complex Elements",
     args: {
-        width: 847,
+        width: 491,
         showWidows: true,
         targetRowHeight: undefined,
         rowSpacing: undefined,
@@ -212,7 +212,7 @@ export const Primary: Story = {
         targetRowHeightTolerance: undefined,
         children: displayedImages.map(value => <>
                 <div style={{top: 16, left: 16, position: "absolute"}}>Testing</div>
-                <img src={value.webp}/>
+            <img src={value.webp || value.src}/>
             </>
         ),
         containerStyle: {position: 'relative'}