react-justified-layout-ts 2.0.2 → 2.0.4

package/dist/components/TSJustifiedLayout.js

@@ -71,16 +71,19 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
      */
     function renderRow(aspectRatio, isLastRow) {
         childNodeCounter++;
-        return react_1.default.createElement("div", { style: Object.assign(Object.assign({ maxHeight: '100%', aspectRatio: aspectRatio }, (isLastRow ? {} : { flex: aspectRatio })), containerStyle) }, children[childNodeCounter]);
+        return react_1.default.createElement("div", { style: Object.assign({ aspectRatio: aspectRatio, flex: aspectRatio }, containerStyle) }, children[childNodeCounter]);
     }
-    return (react_1.default.createElement("div", { style: { width: "100%" } }, rows.map((value, index, array) => {
+    // TODO Figure out how to eliminate the tiny gap between div and actual image height
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        } }, rows.map((value, index, array) => {
         let isLastRow = index === array.length - 1 && showWidows;
         return react_1.default.createElement("div", { className: 'justified-row', style: {
                 display: "flex",
                 flexDirection: "row",
-                gap: itemSpacing,
-                marginBottom: rowSpacing,
-                aspectRatio: width / value.height
+                gap: itemSpacing
             } }, value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow)));
     })));
 }

package/dist/components/layout.css

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

package/dist/stories/ConfiguredJustifiedLayout.js

@@ -19,6 +19,6 @@ const TSJustifiedLayout_1 = require("../components/TSJustifiedLayout");
 const react_1 = __importDefault(require("react"));
 const ConfiguredJustifiedLayout = (_a) => {
     var { layoutItems, rowSpacing = 8, width = 1000, itemSpacing = 8, targetRowHeight = 320, targetRowHeightTolerance = 0.10, showWidows = true, children } = _a, props = __rest(_a, ["layoutItems", "rowSpacing", "width", "itemSpacing", "targetRowHeight", "targetRowHeightTolerance", "showWidows", "children"]);
-    return react_1.default.createElement(TSJustifiedLayout_1.TSJustifiedLayout, Object.assign({ layoutItems: layoutItems, width: width, itemSpacing: itemSpacing, targetRowHeight: 320, targetRowHeightTolerance: targetRowHeightTolerance, rowSpacing: rowSpacing, showWidows: showWidows }, props), children.map((child) => child));
+    return react_1.default.createElement(TSJustifiedLayout_1.TSJustifiedLayout, Object.assign({ layoutItems: layoutItems, width: width, itemSpacing: itemSpacing, targetRowHeight: targetRowHeight, targetRowHeightTolerance: targetRowHeightTolerance, rowSpacing: rowSpacing, showWidows: showWidows }, props), children.map((child) => child));
 };
 exports.ConfiguredJustifiedLayout = ConfiguredJustifiedLayout;

package/dist/stories/JustifiedLayout.stories.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-justified-layout-ts",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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

@@ -108,15 +108,19 @@ function TSJustifiedLayout({
         </div>
     }
 
+    // TODO Figure out how to eliminate the tiny gap between div and actual image height
     return (
-        <div style={{width: "100%"}}>
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rowSpacing
+        }}>
             {rows.map((value, index, array) => {
                 let isLastRow = index === array.length - 1 && showWidows;
                 return <div className={'justified-row'} style={{
                     display: "flex",
                     flexDirection: "row",
-                    gap: itemSpacing,
-                    marginBottom: rowSpacing
+                    gap: itemSpacing
                 }
                 }>
                     {value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow))}

package/src/stories/ConfiguredJustifiedLayout.tsx

@@ -16,7 +16,7 @@ export const ConfiguredJustifiedLayout = ({
     return <TSJustifiedLayout layoutItems={layoutItems}
                               width={width}
                               itemSpacing={itemSpacing}
-                              targetRowHeight={320}
+                              targetRowHeight={targetRowHeight}
                               targetRowHeightTolerance={targetRowHeightTolerance}
                               rowSpacing={rowSpacing}
                               showWidows={showWidows} {...props}>