masua 0.11.0 → 0.11.2
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 +12 -3
- package/index.ts +4 -3
- package/package.json +4 -4
- package/react.tsx +1 -0
package/README.md
CHANGED
|
@@ -7,8 +7,17 @@
|
|
|
7
7
|
Simple masonry layout library in TypeScript. Initially forked from [minimasonry](https://github.com/Spope/MiniMasonry.js) by Spope.
|
|
8
8
|
|
|
9
9
|
- ❗ Check out the [interactive demo and documentation](https://tobua.github.io/masua)
|
|
10
|
-
- ⚛️
|
|
11
|
-
|
|
10
|
+
- ⚛️ TypeScript and React support
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
⚠️ This plugin is published as TypeScript and JSX (for the React plugin) see [this post on 𝕏](https://twitter.com/matthiasgiger/status/1766443368567971946) for the reasoning. Make sure to add the necessary types listed below if they are missing in your project and align your [`tsconfig.json`](https://github.com/tobua/masua/blob/main/tsconfig.json) with the reference used for this project. React is only required when the `masua/react` export is used.
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
bun install masua
|
|
18
|
+
bun install @types/bun # or @types/node
|
|
19
|
+
bun install @types/react # for React export
|
|
20
|
+
```
|
|
12
21
|
|
|
13
22
|
## Usage
|
|
14
23
|
|
|
@@ -31,7 +40,7 @@ grid(document.querySelector('#my-custom-grid'), {
|
|
|
31
40
|
## React
|
|
32
41
|
|
|
33
42
|
```tsx
|
|
34
|
-
import { Grid } from 'masua'
|
|
43
|
+
import { Grid } from 'masua/react'
|
|
35
44
|
|
|
36
45
|
const MyGrid = () => (
|
|
37
46
|
<Grid disabled={window.innerWidth < 501}>
|
package/index.ts
CHANGED
|
@@ -8,7 +8,7 @@ interface State {
|
|
|
8
8
|
removeListener?: () => void
|
|
9
9
|
currentGutterX: number
|
|
10
10
|
currentGutterY: number
|
|
11
|
-
resizeTimeout?:
|
|
11
|
+
resizeTimeout?: ReturnType<typeof setTimeout>
|
|
12
12
|
baseWidth: number
|
|
13
13
|
gutterX: number
|
|
14
14
|
gutterY: number
|
|
@@ -39,7 +39,7 @@ interface NumberConfiguration extends Configuration {
|
|
|
39
39
|
singleColumnGutter: number
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
const log = (message: string) => console
|
|
42
|
+
const log = (message: string, type: 'log' | 'error' = 'log') => console[type](`masua: ${message}.`)
|
|
43
43
|
|
|
44
44
|
function getCount(state: State) {
|
|
45
45
|
if (state.surroundingGutter) {
|
|
@@ -113,7 +113,7 @@ function computeWidth(state: State) {
|
|
|
113
113
|
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO decrease complexity
|
|
114
114
|
function layout(state: State) {
|
|
115
115
|
if (!state.container) {
|
|
116
|
-
|
|
116
|
+
log('Container not found', 'error')
|
|
117
117
|
return
|
|
118
118
|
}
|
|
119
119
|
reset(state)
|
|
@@ -177,6 +177,7 @@ function layout(state: State) {
|
|
|
177
177
|
const y = state.columns[nextColumn]
|
|
178
178
|
const child = children[index] as HTMLElement
|
|
179
179
|
child.style.transform = `translate3d(${Math.round(x)}px,${Math.round(y)}px,0)`
|
|
180
|
+
child.style.position = 'absolute'
|
|
180
181
|
|
|
181
182
|
state.columns[nextColumn] += state.sizes[index] + (state.count > 1 ? state.gutterY : state.singleColumnGutter) // margin-bottom
|
|
182
183
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masua",
|
|
3
3
|
"description": "Simple masonry layout library in TypeScript.",
|
|
4
|
-
"version": "0.11.
|
|
4
|
+
"version": "0.11.2",
|
|
5
5
|
"repository": "github:tobua/masua",
|
|
6
6
|
"homepage": "https://tobua.github.io/masua",
|
|
7
7
|
"license": "MIT",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
18
|
"@biomejs/biome": "^1.6.4",
|
|
19
|
-
"@types/
|
|
20
|
-
"@types/react": "^18.2.
|
|
21
|
-
"typescript": "^5.4.
|
|
19
|
+
"@types/bun": "^1.0.12",
|
|
20
|
+
"@types/react": "^18.2.78",
|
|
21
|
+
"typescript": "^5.4.5"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": ">= 18",
|
package/react.tsx
CHANGED