react-justified-layout-ts 1.1.0 → 1.1.2

package/dist/TSJustifiedLayout.js

@@ -82,6 +82,7 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
     }
     const rows = [];
     let rowBuffer = [];
+    console.log(rows);
     layoutItems.forEach((value) => {
         const isItemSuccessfullyAdded = addItem(value);
         if (!isItemSuccessfullyAdded) {
@@ -89,26 +90,26 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
         }
     });
     // Handle leftover content
+    console.log(rows);
     if (showWidows) {
         rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows[rows.length - 1].height });
     }
     let childNodeCounter = -1;
     /**
      * Clone the children element, and inject the height of the element as a prop
-     * @param height The height that the element should be
+     * @param isLast If the element belongs to the last row, and therefore should use height instead of flex
      */
-    function renderChildren(height) {
+    function renderChildren(isLast) {
         childNodeCounter++;
-        return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign({}, children[childNodeCounter].props.style), { height: height }) }));
+        return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign(Object.assign({}, children[childNodeCounter].props.style), { maxWidth: '100%' }), (isLast ? { maxHeight: '100%' } : {})) }));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { style: { width: "100%" } }, rows.map(value => {
-            return react_1.default.createElement("div", { style: {
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: itemSpacing,
-                    marginBottom: rowSpacing
-                } }, value.items.map(() => react_1.default.createElement("div", { style: { height: value.height } }, renderChildren(value.height))));
+        react_1.default.createElement("div", { style: { width: "100%" } }),
+        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: Object.assign({ display: "flex", flexDirection: "row", gap: itemSpacing, marginBottom: rowSpacing }, (isLastRow ? { height: value.height } : {})) }, value.items.map((aspectRatio) => {
+                return react_1.default.createElement("div", { style: isLastRow ? { aspectRatio: aspectRatio } : { flex: aspectRatio } }, renderChildren(isLastRow));
+            }));
         }))));
 }
 exports.TSJustifiedLayout = TSJustifiedLayout;

package/package.json

@@ -1,44 +1,29 @@
-{
-  "name": "react-justified-layout-ts",
-  "version": "1.1.0",
-  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
-  "main": "./dist/TSJustifiedLayout.js",
-  "types": "./dist/TSJustifiedLayout.d.ts",
-  "files": [
-    "dist"
-  ],
-  "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": "https://github.com/Alan19/react-justified-layout-ts"
-}
+{
+  "name": "react-justified-layout-ts",
+  "version": "1.1.2",
+  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
+  "main": "./dist/TSJustifiedLayout.js",
+  "types": "./dist/TSJustifiedLayout.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "typescript": "tsc"
+  },
+  "keywords": [],
+  "author": "Alan19",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "^20.10.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.47",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "repository": "https://github.com/Alan19/react-justified-layout-ts"
+}

package/dist/TSJustifiedLayout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TSJustifiedLayout.d.ts","sourceRoot":"","sources":["../src/components/TSJustifiedLayout/TSJustifiedLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,sBAAsB;IACnC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CAIxB;AAED,iBAAS,iBAAiB,CAAC,EACW,QAAQ,EACR,MAAM,EACN,WAAgB,EAChB,UAAe,EACf,UAAiB,EACjB,eAAqB,EACrB,wBAA8B,EAC9B,KAAK,EACR,EAAE,sBAAsB,qBA4G1D;AAED,OAAO,EAAC,iBAAiB,EAAC,CAAA"}