react-justified-layout-ts 1.1.14 → 1.1.16

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,20 +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(() => 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/components/layout.css

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

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,44 +1,47 @@
-{
-  "name": "react-justified-layout-ts",
-  "version": "1.1.14",
-  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "typescript": "tsc",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "keywords": [],
-  "author": "Alan19",
-  "license": "MIT",
-  "dependencies": {
-    "@types/node": "^20.10.7",
-    "react-use": "^17.5.0",
-    "react-use-measure": "^2.1.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/test": "^8.1.5",
-    "@types/react": "^18.2.47",
-    "react": "^18.2.0",
-    "storybook": "^8.1.5",
-    "typescript": "^5.3.3"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Alan19/react-justified-layout-ts.git"
-  }
-}
+{
+  "name": "react-justified-layout-ts",
+  "version": "1.1.16",
+  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "typescript": "tsc && copyfiles -u 1 src/**/*.css dist/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "Alan19",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "^20.10.7",
+    "react-use": "^17.5.0",
+    "react-use-measure": "^2.1.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-onboarding": "^8.1.5",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-webpack5": "^8.1.5",
+    "@storybook/test": "^8.1.5",
+    "@types/react": "^18.2.47",
+    "copyfiles": "^2.4.1",
+    "react": "^18.2.0",
+    "rimraf": "^5.0.7",
+    "storybook": "^8.1.5",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Alan19/react-justified-layout-ts.git"
+  }
+}

package/src/components/TSJustifiedLayout.tsx

@@ -1,4 +1,5 @@
 import React, {cloneElement} from "react";
+import './layout.css'
 
 type ElementDimensions = number;
 
@@ -92,33 +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(() => renderChildren())}
-                    </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,14 @@ 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 +202,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 +214,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],
+    }
+}