react-justified-layout-ts 1.1.17 → 2.0.0

package/dist/components/TSJustifiedLayout.d.ts

@@ -8,8 +8,9 @@ export interface TSJustifiedLayoutProps {
     targetRowHeight?: number;
     targetRowHeightTolerance?: number;
     width: number;
-    children: any[];
+    children: React.JSX.Element[];
     showWidows?: boolean;
+    containerStyle?: React.CSSProperties;
 }
-declare function TSJustifiedLayout({ children, layoutItems, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width }: TSJustifiedLayoutProps): React.JSX.Element;
+declare function TSJustifiedLayout({ children, layoutItems, itemSpacing, rowSpacing, showWidows, targetRowHeight, targetRowHeightTolerance, width, containerStyle }: TSJustifiedLayoutProps): React.JSX.Element;
 export { TSJustifiedLayout };

package/dist/components/TSJustifiedLayout.js

@@ -1,32 +1,12 @@
 "use strict";
-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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TSJustifiedLayout = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 require("./layout.css");
-function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width }) {
+function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing = 10, showWidows = true, targetRowHeight = 320, targetRowHeightTolerance = .25, width, containerStyle }) {
     const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
     const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
     const rows = [];
@@ -89,7 +69,7 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
      */
     function renderRow(aspectRatio, isLastRow) {
         childNodeCounter++;
-        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("div", { style: Object.assign(Object.assign({ maxHeight: '100%', aspectRatio: aspectRatio }, (isLastRow ? {} : { flex: aspectRatio })), containerStyle) }, children[childNodeCounter]);
     }
     return (react_1.default.createElement("div", { style: { width: "100%" } }, rows.map((value, index, array) => {
         let isLastRow = index === array.length - 1 && showWidows;

package/dist/stories/JustifiedLayout.stories.js

@@ -181,9 +181,10 @@ exports.Primary = {
         itemSpacing: undefined,
         layoutItems: displayedImages.map(value => value.aspectRatio),
         targetRowHeightTolerance: undefined,
-        children: displayedImages.map(value => react_1.default.createElement("div", { style: { position: "relative" } },
+        children: displayedImages.map(value => react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { style: { top: 16, left: 16, position: "absolute" } }, "Testing"),
-            react_1.default.createElement("img", { src: value.webp })))
+            react_1.default.createElement("img", { src: value.webp }))),
+        containerStyle: { position: 'relative' }
     },
 };
 exports.Secondary = {

package/package.json

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

@@ -10,8 +10,9 @@ export interface TSJustifiedLayoutProps {
     targetRowHeight?: number;
     targetRowHeightTolerance?: number;
     width: number;
-    children: any[];
+    children:  React.JSX.Element[];
     showWidows?: boolean;
+    containerStyle?: React.CSSProperties;
     // TODO Implement these
     // maxNumRows?: number;
     // fullWidthBreakoutRowCadence?: number
@@ -26,7 +27,8 @@ function TSJustifiedLayout({
                                showWidows = true,
                                targetRowHeight = 320,
                                targetRowHeightTolerance = .25,
-                               width
+                               width,
+                               containerStyle
                            }: TSJustifiedLayoutProps) {
     const minAspectRatio = width / targetRowHeight * (1 - targetRowHeightTolerance);
     const maxAspectRatio = width / targetRowHeight * (1 + targetRowHeightTolerance);
@@ -95,14 +97,14 @@ function TSJustifiedLayout({
      */
     function renderRow(aspectRatio: ElementDimensions, isLastRow: boolean) {
         childNodeCounter++;
-        return cloneElement(children[childNodeCounter], {
-            ...children[childNodeCounter].props, style: {
-                ...children[childNodeCounter].props.style,
-                aspectRatio: aspectRatio,
-                ...(isLastRow ? {} : {flex: aspectRatio}),
-                maxHeight: '100%'
-            }
-        })
+        return <div style={{
+            maxHeight: '100%',
+            aspectRatio: aspectRatio,
+            ...(isLastRow ? {} : {flex: aspectRatio}),
+            ...containerStyle
+        }}>
+            {children[childNodeCounter]}
+        </div>
     }
 
     return (

package/src/stories/JustifiedLayout.stories.tsx

@@ -179,11 +179,14 @@ export const Primary: Story = {
         targetRowHeight: undefined,
         rowSpacing: undefined,
         itemSpacing: undefined,
-        layoutItems:  displayedImages.map(value => value.aspectRatio),
+        layoutItems: displayedImages.map(value => value.aspectRatio),
         targetRowHeightTolerance: undefined,
-        children: displayedImages.map(value => <div style={{position: "relative"}}>
-            <div style={{top: 16, left: 16, position: "absolute"}}>Testing</div>
-            <img src={value.webp}/></div>)
+        children: displayedImages.map(value => <>
+                <div style={{top: 16, left: 16, position: "absolute"}}>Testing</div>
+                <img src={value.webp}/>
+            </>
+        ),
+        containerStyle: {position: 'relative'}
     },
 };
 
@@ -195,16 +198,16 @@ export const Secondary: Story = {
         targetRowHeight: undefined,
         rowSpacing: undefined,
         itemSpacing: undefined,
-        layoutItems:  displayedImages.slice(1,5).map(value => value.aspectRatio),
+        layoutItems: displayedImages.slice(1, 5).map(value => value.aspectRatio),
         targetRowHeightTolerance: undefined,
-        children: displayedImages.slice(1, 5).map(value => <img src={value.webp} /> )
+        children: displayedImages.slice(1, 5).map(value => <img src={value.webp}/>)
     },
 }
 
 export const Single: Story = {
     name: "Single Elements",
     args: {
-        children: [<img src={'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp'} />],
+        children: [<img src={'https://alcorsiteartbucket.s3.amazonaws.com/webp/alcor_wow.webp'}/>],
         width: 847,
         showWidows: true,
         targetRowHeight: undefined,