react-justified-layout-ts 1.0.3 → 1.0.5
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.
- package/README.md +6 -4
- package/dist/TSJustifiedLayout.js +1 -1
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@ A TypeScript component similar to Flickr's justified layout.
|
|
|
2
2
|
|
|
3
3
|
# Usage
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
Add the `TSJustifiedLayout` component to your code with the following props:
|
|
7
7
|
- `layoutItems: number[];` - An array of aspect ratios for the images you are adding to the grid
|
|
8
8
|
- `itemSpacing?: number;` - The amount of spacing between each image, in pixels. (Default: 10)
|
|
@@ -14,6 +14,8 @@ Add the `TSJustifiedLayout` component to your code with the following props:
|
|
|
14
14
|
- `showWidows?: boolean;` - If the last row should be shown. (Default: true)
|
|
15
15
|
|
|
16
16
|
## Example Usage
|
|
17
|
+
|
|
18
|
+
|
|
17
19
|
```typescript jsx
|
|
18
20
|
<TSJustifiedLayout width={width}
|
|
19
21
|
layoutItems={imagesOnPage.map(value => ({
|
|
@@ -28,15 +30,15 @@ Add the `TSJustifiedLayout` component to your code with the following props:
|
|
|
28
30
|
|
|
29
31
|
# Install
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
|
|
32
34
|
`npm i react-justified-layout-ts`
|
|
33
35
|
|
|
34
36
|
# Credits
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
|
|
37
39
|
The display logic for the layout and the math used to calculate the row height for each row is adapted from [Flickr's Justified Layout library](https://github.com/flickr/justified-layout).
|
|
38
40
|
|
|
39
41
|
# License
|
|
40
42
|
|
|
41
|
-
|
|
43
|
+
|
|
42
44
|
Open Source Licensed under the MIT license.
|
|
@@ -99,7 +99,7 @@ function TSJustifiedLayout({ children, layoutItems, itemSpacing = 10, rowSpacing
|
|
|
99
99
|
*/
|
|
100
100
|
function renderChildren(height) {
|
|
101
101
|
childNodeCounter++;
|
|
102
|
-
return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign({}, children[childNodeCounter].style), { height: height }) }));
|
|
102
|
+
return (0, react_1.cloneElement)(children[childNodeCounter], Object.assign(Object.assign({}, children[childNodeCounter].props), { style: Object.assign(Object.assign({}, children[childNodeCounter].props.style), { height: height }) }));
|
|
103
103
|
}
|
|
104
104
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
105
105
|
react_1.default.createElement("div", { style: { width: "100%" } }, rows.map(value => {
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-justified-layout-ts",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "A component based off Flickr's justified layout that is compatible with Typescript",
|
|
5
5
|
"main": "./dist/TSJustifiedLayout.js",
|
|
6
6
|
"types": "./dist/TSJustifiedLayout.d.ts",
|
|
7
|
-
"files": [
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
8
10
|
"scripts": {
|
|
9
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
12
|
"typescript": "tsc"
|