react-justified-layout-ts 1.0.0

package/dist/TSJustifiedLayout.d.ts

@@ -0,0 +1,5 @@
+import { TSJustifiedLayoutProps } from "./TSJustifiedLayoutProps";
+import React from "react";
+declare function TSJustifiedLayout({ children, images, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width }: TSJustifiedLayoutProps): React.JSX.Element;
+export { TSJustifiedLayout };
+//# sourceMappingURL=TSJustifiedLayout.d.ts.map

package/dist/TSJustifiedLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSJustifiedLayout.d.ts","sourceRoot":"","sources":["../src/components/TSJustifiedLayout/TSJustifiedLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,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"}

package/dist/TSJustifiedLayout.js

@@ -0,0 +1,126 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TSJustifiedLayout = void 0;
+var react_1 = __importStar(require("react"));
+function TSJustifiedLayout(_a) {
+    var children = _a.children, images = _a.images, _b = _a.itemSpacing, itemSpacing = _b === void 0 ? 10 : _b, _c = _a.rowSpacing, rowSpacing = _c === void 0 ? 10 : _c, _d = _a.showWidows, showWidows = _d === void 0 ? true : _d, _e = _a.targetRowHeight, targetRowHeight = _e === void 0 ? 320 : _e, _f = _a.targetRowHeightTolerance, targetRowHeightTolerance = _f === void 0 ? .25 : _f, width = _a.width;
+    var minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
+    var maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
+    /**
+     *
+     * @param value The new aspect ratio to be checked
+     * @return If the buffer can accept the new value
+     * */
+    function addItem(value) {
+        var newItems = rowBuffer.concat(value);
+        var newAspectRatio = newItems.map(function (data) { return data.dimensions; }).reduce(function (previousValue, currentValue) { return previousValue + currentValue; }, 0);
+        var rowWidthWithoutSpacing = width - (newItems.length - 1) * itemSpacing;
+        var targetAspectRatio = rowWidthWithoutSpacing / targetRowHeight;
+        // Row still has space
+        if (newAspectRatio < minAspectRatio) {
+            rowBuffer.push(value);
+            return true;
+        }
+        // Row ran out of space, and the new item is larger than the max aspect ratio for the row
+        else if (newAspectRatio > maxAspectRatio) {
+            // Always accept if it's just 1 item
+            if (rowBuffer.length === 0) {
+                rowBuffer.push(value);
+                rows.push({ items: rowBuffer, height: rowWidthWithoutSpacing / newAspectRatio });
+                rowBuffer = [];
+                return true;
+            }
+            else {
+                // Calculate width/aspect ratio for row before adding new item
+                var previousRowWidthWithoutSpacing = width - (rowBuffer.length - 1) * itemSpacing;
+                var previousAspectRatio = rowBuffer.map(function (data) { return data.dimensions; }).reduce(function (previousValue, currentValue) { return previousValue + currentValue; }, 0);
+                var previousTargetAspectRatio = previousRowWidthWithoutSpacing / targetRowHeight;
+                // If the new aspect ratio is farther from the target after the insert, then push row buffer and insert new item into the next row
+                if (Math.abs(newAspectRatio - targetAspectRatio) > Math.abs(previousAspectRatio - previousTargetAspectRatio)) {
+                    rows.push({ items: rowBuffer, height: previousRowWidthWithoutSpacing / previousAspectRatio });
+                    rowBuffer = [];
+                    return false;
+                }
+                // If the new aspect ratio is closer to the target aspect ratio, then insert item and push row buffer
+                else {
+                    rowBuffer.push(value);
+                    rows.push({ items: rowBuffer, height: rowWidthWithoutSpacing / newAspectRatio });
+                    rowBuffer = [];
+                    return true;
+                }
+            }
+        }
+        else {
+            // New aspect ratio is within aspect ratio tolerance, so we finish off the row
+            rowBuffer.push(value);
+            rows.push({ items: rowBuffer, height: rowWidthWithoutSpacing / newAspectRatio });
+            rowBuffer = [];
+            return true;
+        }
+    }
+    var rows = [];
+    var rowBuffer = [];
+    images.forEach(function (value) {
+        var isItemSuccessfullyAdded = addItem(value);
+        if (!isItemSuccessfullyAdded) {
+            addItem(value);
+        }
+    });
+    // Handle leftover content
+    if (showWidows) {
+        rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows[rows.length - 1].height });
+    }
+    var 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
+     */
+    function renderChildren(height) {
+        childNodeCounter++;
+        return (0, react_1.cloneElement)(children[childNodeCounter], __assign(__assign({}, children[childNodeCounter].props), { style: __assign(__assign({}, children[childNodeCounter].style), { height: height }) }));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { width: "100%" } }, rows.map(function (value) {
+            return react_1.default.createElement("div", { style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: itemSpacing,
+                    marginBottom: rowSpacing
+                } }, value.items.map(function () { return react_1.default.createElement("div", { style: { height: value.height } }, renderChildren(value.height)); }));
+        }))));
+}
+exports.TSJustifiedLayout = TSJustifiedLayout;

package/dist/TSJustifiedLayoutProps.d.ts

@@ -0,0 +1,17 @@
+export interface TSJustifiedLayoutProps {
+    images: {
+        src: string;
+        dimensions: number;
+    }[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: any[];
+    showWidows?: boolean;
+    maxNumRows?: number;
+    fullWidthBreakoutRowCadence?: number;
+    widowLayoutStyle: "left" | "justify" | "center";
+}
+//# sourceMappingURL=TSJustifiedLayoutProps.d.ts.map

package/dist/TSJustifiedLayoutProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSJustifiedLayoutProps.d.ts","sourceRoot":"","sources":["../src/components/TSJustifiedLayout/TSJustifiedLayoutProps.ts"],"names":[],"mappings":"AAAA,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;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAA;IACpC,gBAAgB,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;CAClD"}

package/dist/TSJustifiedLayoutProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-justified-layout-ts",
+  "version": "1.0.0",
+  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
+  "main": "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"
+  }
+}