react-justified-layout-ts 2.0.4 → 2.0.6

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 (3) hide show
  1. package/dist/components/TSJustifiedLayout.js +7 -7
  2. package/package.json +1 -1
  3. package/src/components/TSJustifiedLayout.tsx +10 -4
package/dist/components/TSJustifiedLayout.js CHANGED
@@ -69,22 +69,22 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
69
69
  /**
70
70
  * Clone the children element, and inject the height of the element as a prop
71
71
  */
72
- function renderRow(aspectRatio, isLastRow) {
72
+ function renderRowItem(aspectRatio, isSoloRow) {
73
73
  childNodeCounter++;
74
- return react_1.default.createElement("div", { style: Object.assign({ aspectRatio: aspectRatio, flex: aspectRatio }, containerStyle) }, children[childNodeCounter]);
74
+ return react_1.default.createElement("div", { style: Object.assign({ aspectRatio: aspectRatio, flex: isSoloRow ? 1 : aspectRatio }, containerStyle) }, children[childNodeCounter]);
75
75
  }
76
76
  // TODO Figure out how to eliminate the tiny gap between div and actual image height
77
+ // TODO Make bottom row respect length restrictions
77
78
  return (react_1.default.createElement("div", { style: {
78
79
  display: 'flex',
79
80
  flexDirection: 'column',
80
81
  gap: rowSpacing
81
82
  } }, rows.map((value, index, array) => {
82
83
  let isLastRow = index === array.length - 1 && showWidows;
83
- return react_1.default.createElement("div", { className: 'justified-row', style: {
84
- display: "flex",
85
- flexDirection: "row",
86
- gap: itemSpacing
87
- } }, value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow)));
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.items.length) * itemSpacing) / value.height
87
+ return react_1.default.createElement("div", { className: 'justified-row', style: Object.assign({ display: "flex", flexDirection: "row", gap: itemSpacing }, (isLastRow && { aspectRatio: width / value.height })) }, value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1)));
88
88
  })));
89
89
  }
90
90
  exports.TSJustifiedLayout = TSJustifiedLayout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-justified-layout-ts",
3
- "version": "2.0.4",
3
+ "version": "2.0.6",
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
@@ -97,11 +97,11 @@ function TSJustifiedLayout({
97
97
  /**
98
98
  * Clone the children element, and inject the height of the element as a prop
99
99
  */
100
- function renderRow(aspectRatio: ElementDimensions, isLastRow: boolean) {
100
+ function renderRowItem(aspectRatio: ElementDimensions, isSoloRow: boolean) {
101
101
  childNodeCounter++;
102
102
  return <div style={{
103
103
  aspectRatio: aspectRatio,
104
- flex: aspectRatio,
104
+ flex: isSoloRow ? 1 : aspectRatio,
105
105
  ...containerStyle
106
106
  }}>
107
107
  {children[childNodeCounter]}
@@ -109,6 +109,7 @@ function TSJustifiedLayout({
109
109
  }
110
110
 
111
111
  // TODO Figure out how to eliminate the tiny gap between div and actual image height
112
+ // TODO Make bottom row respect length restrictions
112
113
  return (
113
114
  <div style={{
114
115
  display: 'flex',
@@ -117,13 +118,18 @@ function TSJustifiedLayout({
117
118
  }}>
118
119
  {rows.map((value, index, array) => {
119
120
  let isLastRow = index === array.length - 1 && showWidows;
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.items.length) * itemSpacing) / value.height
120
124
  return <div className={'justified-row'} style={{
121
125
  display: "flex",
122
126
  flexDirection: "row",
123
- gap: itemSpacing
127
+ gap: itemSpacing,
128
+ ...(isLastRow && {aspectRatio: width / value.height})
124
129
  }
125
130
  }>
126
- {value.items.map((aspectRatio) => renderRow(aspectRatio, isLastRow))}
131
+ {value.items.map((aspectRatio) => renderRowItem(aspectRatio, value.items.length === 1))}
132
+ {/*{isLastRowWithinTolerance && <div style={{aspectRatio: fakeElementAspectRatio, flex: fakeElementAspectRatio}}></div>}*/}
127
133
  </div>
128
134
  })}
129
135
  </div>