react-justified-layout-ts 2.0.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -73,13 +73,17 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
|
|
|
73
73
|
childNodeCounter++;
|
|
74
74
|
return react_1.default.createElement("div", { style: Object.assign({ aspectRatio: aspectRatio, flex: aspectRatio }, containerStyle) }, children[childNodeCounter]);
|
|
75
75
|
}
|
|
76
|
-
|
|
76
|
+
// TODO Figure out how to eliminate the tiny gap between div and actual image height
|
|
77
|
+
return (react_1.default.createElement("div", { style: {
|
|
78
|
+
display: 'flex',
|
|
79
|
+
flexDirection: 'column',
|
|
80
|
+
gap: rowSpacing
|
|
81
|
+
} }, rows.map((value, index, array) => {
|
|
77
82
|
let isLastRow = index === array.length - 1 && showWidows;
|
|
78
83
|
return react_1.default.createElement("div", { className: 'justified-row', style: {
|
|
79
84
|
display: "flex",
|
|
80
85
|
flexDirection: "row",
|
|
81
|
-
gap: itemSpacing
|
|
82
|
-
marginBottom: rowSpacing
|
|
86
|
+
gap: itemSpacing
|
|
83
87
|
} }, value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow)));
|
|
84
88
|
})));
|
|
85
89
|
}
|
|
@@ -19,6 +19,6 @@ const TSJustifiedLayout_1 = require("../components/TSJustifiedLayout");
|
|
|
19
19
|
const react_1 = __importDefault(require("react"));
|
|
20
20
|
const ConfiguredJustifiedLayout = (_a) => {
|
|
21
21
|
var { layoutItems, rowSpacing = 8, width = 1000, itemSpacing = 8, targetRowHeight = 320, targetRowHeightTolerance = 0.10, showWidows = true, children } = _a, props = __rest(_a, ["layoutItems", "rowSpacing", "width", "itemSpacing", "targetRowHeight", "targetRowHeightTolerance", "showWidows", "children"]);
|
|
22
|
-
return react_1.default.createElement(TSJustifiedLayout_1.TSJustifiedLayout, Object.assign({ layoutItems: layoutItems, width: width, itemSpacing: itemSpacing, targetRowHeight:
|
|
22
|
+
return react_1.default.createElement(TSJustifiedLayout_1.TSJustifiedLayout, Object.assign({ layoutItems: layoutItems, width: width, itemSpacing: itemSpacing, targetRowHeight: targetRowHeight, targetRowHeightTolerance: targetRowHeightTolerance, rowSpacing: rowSpacing, showWidows: showWidows }, props), children.map((child) => child));
|
|
23
23
|
};
|
|
24
24
|
exports.ConfiguredJustifiedLayout = ConfiguredJustifiedLayout;
|
package/package.json
CHANGED
|
@@ -108,15 +108,19 @@ function TSJustifiedLayout({
|
|
|
108
108
|
</div>
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
+
// TODO Figure out how to eliminate the tiny gap between div and actual image height
|
|
111
112
|
return (
|
|
112
|
-
<div style={{
|
|
113
|
+
<div style={{
|
|
114
|
+
display: 'flex',
|
|
115
|
+
flexDirection: 'column',
|
|
116
|
+
gap: rowSpacing
|
|
117
|
+
}}>
|
|
113
118
|
{rows.map((value, index, array) => {
|
|
114
119
|
let isLastRow = index === array.length - 1 && showWidows;
|
|
115
120
|
return <div className={'justified-row'} style={{
|
|
116
121
|
display: "flex",
|
|
117
122
|
flexDirection: "row",
|
|
118
|
-
gap: itemSpacing
|
|
119
|
-
marginBottom: rowSpacing
|
|
123
|
+
gap: itemSpacing
|
|
120
124
|
}
|
|
121
125
|
}>
|
|
122
126
|
{value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow))}
|
|
@@ -16,7 +16,7 @@ export const ConfiguredJustifiedLayout = ({
|
|
|
16
16
|
return <TSJustifiedLayout layoutItems={layoutItems}
|
|
17
17
|
width={width}
|
|
18
18
|
itemSpacing={itemSpacing}
|
|
19
|
-
targetRowHeight={
|
|
19
|
+
targetRowHeight={targetRowHeight}
|
|
20
20
|
targetRowHeightTolerance={targetRowHeightTolerance}
|
|
21
21
|
rowSpacing={rowSpacing}
|
|
22
22
|
showWidows={showWidows} {...props}>
|