react-justified-layout-ts 2.0.2 → 2.0.3

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.
Files changed (4) hide show
  1. package/dist/components/TSJustifiedLayout.js +2 -3
  2. package/dist/components/layout.css +1 -1
  3. package/dist/stories/JustifiedLayout.stories.js +2 -2
  4. package/package.json +1 -1
package/dist/components/TSJustifiedLayout.js CHANGED
@@ -71,7 +71,7 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
71
71
  */
72
72
  function renderRow(aspectRatio, isLastRow) {
73
73
  childNodeCounter++;
74
- return react_1.default.createElement("div", { style: Object.assign(Object.assign({ maxHeight: '100%', aspectRatio: aspectRatio }, (isLastRow ? {} : { flex: aspectRatio })), containerStyle) }, children[childNodeCounter]);
74
+ return react_1.default.createElement("div", { style: Object.assign({ aspectRatio: aspectRatio, flex: aspectRatio }, containerStyle) }, children[childNodeCounter]);
75
75
  }
76
76
  return (react_1.default.createElement("div", { style: { width: "100%" } }, rows.map((value, index, array) => {
77
77
  let isLastRow = index === array.length - 1 && showWidows;
@@ -79,8 +79,7 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
79
79
  display: "flex",
80
80
  flexDirection: "row",
81
81
  gap: itemSpacing,
82
- marginBottom: rowSpacing,
83
- aspectRatio: width / value.height
82
+ marginBottom: rowSpacing
84
83
  } }, value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow)));
85
84
  })));
86
85
  }
package/dist/components/layout.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .justified-row img {
2
- height: 100%
2
+ width: 100%
3
3
  }
package/dist/stories/JustifiedLayout.stories.js CHANGED
@@ -203,7 +203,7 @@ const displayedImages = [
203
203
  exports.Primary = {
204
204
  name: "Complex Elements",
205
205
  args: {
206
- width: 847,
206
+ width: 491,
207
207
  showWidows: true,
208
208
  targetRowHeight: undefined,
209
209
  rowSpacing: undefined,
@@ -212,7 +212,7 @@ exports.Primary = {
212
212
  targetRowHeightTolerance: undefined,
213
213
  children: displayedImages.map(value => react_1.default.createElement(react_1.default.Fragment, null,
214
214
  react_1.default.createElement("div", { style: { top: 16, left: 16, position: "absolute" } }, "Testing"),
215
- react_1.default.createElement("img", { src: value.webp }))),
215
+ react_1.default.createElement("img", { src: value.webp || value.src }))),
216
216
  containerStyle: { position: 'relative' }
217
217
  },
218
218
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-justified-layout-ts",
3
- "version": "2.0.2",
3
+ "version": "2.0.3",
4
4
  "description": "A component based off Flickr's justified layout that is compatible with Typescript",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",