react-justified-layout-ts 2.0.8 → 2.0.9

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 (5) hide show
  1. package/dist/components/TSJustifiedLayout.js +2 -2
  2. package/dist/stories/JustifiedLayout.stories.js +16 -16
  3. package/package.json +1 -1
  4. package/src/components/TSJustifiedLayout.tsx +2 -2
  5. package/src/stories/JustifiedLayout.stories.tsx +16 -16
package/dist/components/TSJustifiedLayout.js CHANGED
@@ -83,14 +83,14 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
83
83
  let isLastRow = index === array.length - 1 && showWidows;
84
84
  let rowTotalAspectRatio = value.items.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
85
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;
86
+ const fakeElementAspectRatio = (width - rowTotalAspectRatio * value.height - (value.items.length - 1) * itemSpacing) / value.height;
87
87
  return react_1.default.createElement("div", { className: 'justified-row', style: {
88
88
  display: "flex",
89
89
  flexDirection: "row",
90
90
  gap: itemSpacing,
91
91
  } },
92
92
  value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1)),
93
- isLastRowWithinTolerance && react_1.default.createElement("div", { style: { aspectRatio: fakeElementAspectRatio, flex: fakeElementAspectRatio } }));
93
+ isLastRowWithinTolerance && react_1.default.createElement("div", { style: { flex: fakeElementAspectRatio } }));
94
94
  })));
95
95
  }
96
96
  exports.TSJustifiedLayout = TSJustifiedLayout;
package/dist/stories/JustifiedLayout.stories.js CHANGED
@@ -108,22 +108,6 @@ const displayedImages = [
108
108
  "aspectRatio": 1.7777777777777777,
109
109
  "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/combat_ready_duo.webp"
110
110
  },
111
- {
112
- "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
113
- "title": "Special Archery Training!",
114
- "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
115
- "tags": [
116
- "Superhero",
117
- "Indra Suit",
118
- "Bow",
119
- "Bodysuit",
120
- "Thuban Form",
121
- "Featured"
122
- ],
123
- "artist": "@Yamainu_ken",
124
- "published": "2023-01-22",
125
- "aspectRatio": 1.5442260442260443
126
- },
127
111
  {
128
112
  "title": "Evening Train",
129
113
  "artist": "@greyy_arts",
@@ -197,6 +181,22 @@ const displayedImages = [
197
181
  ],
198
182
  "published": "2021-06-19",
199
183
  "aspectRatio": 0.7084745762711865
184
+ },
185
+ {
186
+ "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
187
+ "title": "Special Archery Training!",
188
+ "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
189
+ "tags": [
190
+ "Superhero",
191
+ "Indra Suit",
192
+ "Bow",
193
+ "Bodysuit",
194
+ "Thuban Form",
195
+ "Featured"
196
+ ],
197
+ "artist": "@Yamainu_ken",
198
+ "published": "2023-01-22",
199
+ "aspectRatio": 1.5442260442260443
200
200
  }
201
201
  ];
202
202
  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-justified-layout-ts",
3
- "version": "2.0.8",
3
+ "version": "2.0.9",
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",
package/src/components/TSJustifiedLayout.tsx CHANGED
@@ -120,7 +120,7 @@ function TSJustifiedLayout({
120
120
  let isLastRow = index === array.length - 1 && showWidows;
121
121
  let rowTotalAspectRatio = value.items.reduce((previousValue, currentValue) => previousValue + currentValue, 0);
122
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
123
+ const fakeElementAspectRatio = (width - rowTotalAspectRatio * value.height - (value.items.length - 1) * itemSpacing) / value.height
124
124
  return <div className={'justified-row'} style={{
125
125
  display: "flex",
126
126
  flexDirection: "row",
@@ -128,7 +128,7 @@ function TSJustifiedLayout({
128
128
  }
129
129
  }>
130
130
  {value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1))}
131
- {isLastRowWithinTolerance && <div style={{aspectRatio: fakeElementAspectRatio, flex: fakeElementAspectRatio}}></div>}
131
+ {isLastRowWithinTolerance && <div style={{flex: fakeElementAspectRatio}}></div>}
132
132
  </div>
133
133
  })}
134
134
  </div>
package/src/stories/JustifiedLayout.stories.tsx CHANGED
@@ -107,22 +107,6 @@ const displayedImages = [
107
107
  "aspectRatio": 1.7777777777777777,
108
108
  "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/combat_ready_duo.webp"
109
109
  },
110
- {
111
- "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
112
- "title": "Special Archery Training!",
113
- "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
114
- "tags": [
115
- "Superhero",
116
- "Indra Suit",
117
- "Bow",
118
- "Bodysuit",
119
- "Thuban Form",
120
- "Featured"
121
- ],
122
- "artist": "@Yamainu_ken",
123
- "published": "2023-01-22",
124
- "aspectRatio": 1.5442260442260443
125
- },
126
110
  {
127
111
  "title": "Evening Train",
128
112
  "artist": "@greyy_arts",
@@ -196,6 +180,22 @@ const displayedImages = [
196
180
  ],
197
181
  "published": "2021-06-19",
198
182
  "aspectRatio": 0.7084745762711865
183
+ },
184
+ {
185
+ "src": "https://pbs.twimg.com/media/FnHp4nWaUAA-lgD?format=jpg&name=large",
186
+ "title": "Special Archery Training!",
187
+ "href": "https://twitter.com/Yamainu_ken/status/1617331411761115138?s=20",
188
+ "tags": [
189
+ "Superhero",
190
+ "Indra Suit",
191
+ "Bow",
192
+ "Bodysuit",
193
+ "Thuban Form",
194
+ "Featured"
195
+ ],
196
+ "artist": "@Yamainu_ken",
197
+ "published": "2023-01-22",
198
+ "aspectRatio": 1.5442260442260443
199
199
  }
200
200
  ]
201
201