react-justified-layout-ts 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alan19
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+A TypeScript component similar to Flickr's justified layout.
+
+# Usage
+
+---
+Add the `TSJustifiedLayout` component to your code with the following props:
+- `layoutItems: number[];` - An array of aspect ratios for the images you are adding to the grid
+- `itemSpacing?: number;` - The amount of spacing between each image, in pixels. (Default: 10)
+- `rowSpacing?: number;` - The amount of spacing between each row, in pixels. (Default: 10)
+- `targetRowHeight?: number;` - The target row height for a row, in pixels. (Default: 320)
+- `targetRowHeightTolerance?: number;` - The amount the row height could deviate from the target row height, as a percent. (Default: .25)
+- `width: number;` - The width of the container. I would use something like `react-use-measure` if you're trying to make it dynamically take up the size of the parent container.
+- `children: any[];` - The children elements that makes up the grid.
+- `showWidows?: boolean;` - If the last row should be shown. (Default: true)
+
+## Example Usage
+```typescript jsx
+<TSJustifiedLayout width={width}
+    layoutItems={imagesOnPage.map(value => ({
+       dimensions: value.aspectRatio || 1
+    }))}>
+        {imagesOnPage.map(value => <img
+            src={value.src}
+            alt={value.alt}
+        />)}
+</TSJustifiedLayout>
+```
+
+# Install
+
+---
+`npm i react-justified-layout-ts`
+
+# Credits
+
+--- 
+The display logic for the layout and the math used to calculate the row height for each row is adapted from [Flickr's Justified Layout library](https://github.com/flickr/justified-layout).
+
+# License
+
+---
+Open Source Licensed under the MIT license.

package/dist/TSJustifiedLayout.d.ts

@@ -1,5 +1,16 @@
-import { TSJustifiedLayoutProps } from "./TSJustifiedLayoutProps";
 import React from "react";
+export interface TSJustifiedLayoutProps {
+    images: {
+        src: string;
+        dimensions: number;
+    }[];
+    itemSpacing?: number;
+    rowSpacing?: number;
+    targetRowHeight?: number;
+    targetRowHeightTolerance?: number;
+    width: number;
+    children: any[];
+    showWidows?: boolean;
+}
 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

@@ -1 +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"}
+{"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"}

package/dist/TSJustifiedLayout.js

@@ -1,15 +1,4 @@
 "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);
@@ -35,21 +24,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 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);
+const react_1 = __importStar(require("react"));
+function TSJustifiedLayout({ children, images, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width }) {
+    const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
+    const 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;
+        const newItems = rowBuffer.concat(value);
+        const newAspectRatio = newItems.map(data => data.dimensions).reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+        const rowWidthWithoutSpacing = width - (newItems.length - 1) * itemSpacing;
+        const targetAspectRatio = rowWidthWithoutSpacing / targetRowHeight;
         // Row still has space
         if (newAspectRatio < minAspectRatio) {
             rowBuffer.push(value);
@@ -66,9 +54,9 @@ function TSJustifiedLayout(_a) {
             }
             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;
+                const previousRowWidthWithoutSpacing = width - (rowBuffer.length - 1) * itemSpacing;
+                const previousAspectRatio = rowBuffer.map(data => data.dimensions).reduce((previousValue, currentValue) => previousValue + currentValue, 0);
+                const 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 });
@@ -92,10 +80,10 @@ function TSJustifiedLayout(_a) {
             return true;
         }
     }
-    var rows = [];
-    var rowBuffer = [];
-    images.forEach(function (value) {
-        var isItemSuccessfullyAdded = addItem(value);
+    const rows = [];
+    let rowBuffer = [];
+    images.forEach((value) => {
+        const isItemSuccessfullyAdded = addItem(value);
         if (!isItemSuccessfullyAdded) {
             addItem(value);
         }
@@ -104,23 +92,23 @@ function TSJustifiedLayout(_a) {
     if (showWidows) {
         rows.push({ items: rowBuffer, height: rows.length === 0 ? targetRowHeight : rows[rows.length - 1].height });
     }
-    var childNodeCounter = -1;
+    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
      */
     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 (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.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) {
+        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(function () { return react_1.default.createElement("div", { style: { height: value.height } }, renderChildren(value.height)); }));
+                } }, value.items.map(() => react_1.default.createElement("div", { style: { height: value.height } }, renderChildren(value.height))));
         }))));
 }
 exports.TSJustifiedLayout = TSJustifiedLayout;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-justified-layout-ts",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A component based off Flickr's justified layout that is compatible with Typescript",
-  "main": "dist/TSJustifiedLayout.d.ts",
+  "main": "./dist/TSJustifiedLayout.js",
+  "types": "./dist/TSJustifiedLayout.d.ts",
   "files": ["dist"],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -18,5 +19,9 @@
     "@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/TSJustifiedLayoutProps.d.ts

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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