react-justified-layout-ts 1.1.13 → 1.1.15

package/dist/components/TSJustifiedLayout.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import './layout.css';
 type ElementDimensions = number;
 export interface TSJustifiedLayoutProps {
     layoutItems: ElementDimensions[];

package/dist/components/TSJustifiedLayout.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TSJustifiedLayout = void 0;
 const react_1 = __importStar(require("react"));
+require("./layout.css");
 function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width }) {
     const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
     const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
@@ -86,22 +87,19 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
     /**
      * Clone the children element, and inject the height of the element as a prop
      */
-    function renderChildren() {
+    function renderRow(aspectRatio, isLastRow) {
         childNodeCounter++;
-        return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign({}, children[childNodeCounter].props.style), { maxWidth: '100%' }) }));
+        return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, children[childNodeCounter].props.style), { aspectRatio: aspectRatio }), (isLastRow ? {} : { flex: aspectRatio })), { maxHeight: '100%' }) }));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { style: { width: "100%" } }, rows.map((value, index, array) => {
-            let isLastRow = index === array.length - 1 && showWidows;
-            return react_1.default.createElement("div", { style: {
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: itemSpacing,
-                    marginBottom: rowSpacing,
-                    aspectRatio: width / value.height
-                } }, value.items.map((aspectRatio) => {
-                return react_1.default.createElement("div", { style: isLastRow ? { aspectRatio: aspectRatio } : { flex: aspectRatio } }, renderChildren());
-            }));
-        }))));
+    return (react_1.default.createElement("div", { style: { width: "100%" } }, 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
+            } }, value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow)));
+    })));
 }
 exports.TSJustifiedLayout = TSJustifiedLayout;

package/dist/stories/JustifiedLayout.stories.d.ts

@@ -9,3 +9,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Secondary: Story;
 export declare const Single: Story;
+export declare const SingleWithDiv: Story;

package/dist/stories/JustifiedLayout.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Single = exports.Secondary = exports.Primary = void 0;
+exports.SingleWithDiv = exports.Single = exports.Secondary = exports.Primary = void 0;
 const ConfiguredJustifiedLayout_1 = require("./ConfiguredJustifiedLayout");
 const react_1 = __importDefault(require("react"));
 const meta = {
@@ -172,6 +172,7 @@ const displayedImages = [
 ];
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 exports.Primary = {
+    name: "Complex Elements",
     args: {
         width: 847,
         showWidows: true,
@@ -180,10 +181,13 @@ exports.Primary = {
         itemSpacing: undefined,
         layoutItems: displayedImages.map(value => value.aspectRatio),
         targetRowHeightTolerance: undefined,
-        children: displayedImages.map(value => react_1.default.createElement("img", { src: value.webp }))
+        children: displayedImages.map(value => react_1.default.createElement("div", { style: { position: "relative" } },
+            react_1.default.createElement("div", { style: { top: 16, left: 16, position: "absolute" } }, "Testing"),
+            react_1.default.createElement("img", { src: value.webp })))
     },
 };
 exports.Secondary = {
+    name: "Image Tag Elements",
     args: {
         width: 847,
         showWidows: true,
@@ -196,6 +200,7 @@ exports.Secondary = {
     },
 };
 exports.Single = {
+    name: "Single Elements",
     args: {
         children: [react_1.default.createElement("img", { src: 'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp' })],
         width: 847,
@@ -207,3 +212,17 @@ exports.Single = {
         layoutItems: [1],
     }
 };
+exports.SingleWithDiv = {
+    name: "Complex Single Element",
+    args: {
+        children: [react_1.default.createElement("div", null,
+                react_1.default.createElement("img", { src: 'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp' }))],
+        width: 847,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        targetRowHeightTolerance: undefined,
+        layoutItems: [1],
+    }
+};

package/package.json

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

@@ -1,4 +1,5 @@
 import React, {cloneElement} from "react";
+import './layout.css'
 
 type ElementDimensions = number;
 
@@ -92,37 +93,34 @@ function TSJustifiedLayout({
     /**
      * Clone the children element, and inject the height of the element as a prop
      */
-    function renderChildren() {
+    function renderRow(aspectRatio: ElementDimensions, isLastRow: boolean) {
         childNodeCounter++;
         return cloneElement(children[childNodeCounter], {
             ...children[childNodeCounter].props, style: {
                 ...children[childNodeCounter].props.style,
-                maxWidth: '100%'
+                aspectRatio: aspectRatio,
+                ...(isLastRow ? {} : {flex: aspectRatio}),
+                maxHeight: '100%'
             }
         })
     }
 
     return (
-        <>
-            <div style={{width: "100%"}}>
-                {rows.map((value, index, array) => {
-                    let isLastRow = index === array.length - 1 && showWidows;
-                    return <div style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        gap: itemSpacing,
-                        marginBottom: rowSpacing,
-                        aspectRatio: width / value.height}
-                    }>
-                        {value.items.map((aspectRatio) => {
-                            return <div style={isLastRow ? {aspectRatio: aspectRatio} : {flex: aspectRatio}}>
-                                {renderChildren()}
-                            </div>;
-                        })}
-                    </div>
-                })}
-            </div>
-        </>
+        <div style={{width: "100%"}}>
+            {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,
+                    aspectRatio: width / value.height
+                }
+                }>
+                    {value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow))}
+                </div>
+            })}
+        </div>
     );
 }
 

package/src/components/layout.css

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

package/src/stories/JustifiedLayout.stories.tsx

@@ -172,6 +172,7 @@ const displayedImages = [
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
+    name: "Complex Elements",
     args: {
         width: 847,
         showWidows: true,
@@ -180,11 +181,12 @@ export const Primary: Story = {
         itemSpacing: undefined,
         layoutItems:  displayedImages.map(value => value.aspectRatio),
         targetRowHeightTolerance: undefined,
-        children: displayedImages.map(value => <img src={value.webp} /> )
+        children: displayedImages.map(value => <div style={{position: "relative"}}><div style={{top: 16, left: 16, position: "absolute"}}>Testing</div><img src={value.webp} /></div> )
     },
 };
 
 export const Secondary: Story = {
+    name: "Image Tag Elements",
     args: {
         width: 847,
         showWidows: true,
@@ -198,6 +200,7 @@ export const Secondary: Story = {
 }
 
 export const Single: Story = {
+    name: "Single Elements",
     args: {
         children: [<img src={'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp'} />],
         width: 847,
@@ -209,3 +212,17 @@ export const Single: Story = {
         layoutItems: [1],
     }
 }
+
+export const SingleWithDiv: Story = {
+    name: "Complex Single Element",
+    args: {
+        children: [<div><img src={'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp'} /></div>],
+        width: 847,
+        showWidows: true,
+        targetRowHeight: undefined,
+        rowSpacing: undefined,
+        itemSpacing: undefined,
+        targetRowHeightTolerance: undefined,
+        layoutItems: [1],
+    }
+}