react-justified-layout-ts 2.0.6 → 2.0.8
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.
|
@@ -81,10 +81,16 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
|
|
|
81
81
|
gap: rowSpacing
|
|
82
82
|
} }, rows.map((value, index, array) => {
|
|
83
83
|
let isLastRow = index === array.length - 1 && showWidows;
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
return react_1.default.createElement("div", { className: 'justified-row', style:
|
|
84
|
+
let rowTotalAspectRatio = value.items.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
|
|
85
|
+
const isLastRowWithinTolerance = isLastRow && rowTotalAspectRatio * value.height + (value.items.length - 1) * itemSpacing < minAspectRatio * value.height;
|
|
86
|
+
const fakeElementAspectRatio = (width - rowTotalAspectRatio * value.height - value.items.length * itemSpacing) / value.height;
|
|
87
|
+
return react_1.default.createElement("div", { className: 'justified-row', style: {
|
|
88
|
+
display: "flex",
|
|
89
|
+
flexDirection: "row",
|
|
90
|
+
gap: itemSpacing,
|
|
91
|
+
} },
|
|
92
|
+
value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1)),
|
|
93
|
+
isLastRowWithinTolerance && react_1.default.createElement("div", { style: { aspectRatio: fakeElementAspectRatio, flex: fakeElementAspectRatio } }));
|
|
88
94
|
})));
|
|
89
95
|
}
|
|
90
96
|
exports.TSJustifiedLayout = TSJustifiedLayout;
|
package/package.json
CHANGED
|
@@ -118,18 +118,17 @@ function TSJustifiedLayout({
|
|
|
118
118
|
}}>
|
|
119
119
|
{rows.map((value, index, array) => {
|
|
120
120
|
let isLastRow = index === array.length - 1 && showWidows;
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
let rowTotalAspectRatio = value.items.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
|
|
122
|
+
const isLastRowWithinTolerance = isLastRow && rowTotalAspectRatio * value.height + (value.items.length - 1) * itemSpacing < minAspectRatio * value.height;
|
|
123
|
+
const fakeElementAspectRatio = (width - rowTotalAspectRatio * value.height - value.items.length * itemSpacing) / value.height
|
|
124
124
|
return <div className={'justified-row'} style={{
|
|
125
125
|
display: "flex",
|
|
126
126
|
flexDirection: "row",
|
|
127
127
|
gap: itemSpacing,
|
|
128
|
-
...(isLastRow && {aspectRatio: width / value.height})
|
|
129
128
|
}
|
|
130
129
|
}>
|
|
131
130
|
{value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1))}
|
|
132
|
-
{
|
|
131
|
+
{isLastRowWithinTolerance && <div style={{aspectRatio: fakeElementAspectRatio, flex: fakeElementAspectRatio}}></div>}
|
|
133
132
|
</div>
|
|
134
133
|
})}
|
|
135
134
|
</div>
|