Skip to content

Commit d375ba7

Browse files
JounQinJounQin
committed
feat: use masonry-layout for overview
close IDP-1370
1 parent dbb4b87 commit d375ba7

File tree

7 files changed

+126
-6
lines changed

7 files changed

+126
-6
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@swc/core": "^1.15.7",
3939
"@types/cli-progress": "^3.11.6",
4040
"@types/ejs": "^3.1.5",
41+
"@types/masonry-layout": "^4.2.8",
4142
"@types/mdast": "^4.0.4",
4243
"@types/node": "^24.10.4",
4344
"@types/picomatch": "^4.0.2",

‎packages/doom/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"globals": "^16.5.0",
6868
"html-tag-names": "^2.1.0",
6969
"jsencrypt": "^3.5.4",
70+
"masonry-layout": "^4.2.2",
7071
"mdast-util-mdx": "^3.0.0",
7172
"mdast-util-mdx-jsx": "^3.2.0",
7273
"mdast-util-phrasing": "^4.1.0",

‎packages/doom/src/runtime/components/Masonry.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import MasonryLayout from 'masonry-layout'
2+
import { useLayoutEffect, useRef, type HTMLAttributes } from 'react'
3+
4+
export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
5+
options?: MasonryLayout.Options
6+
}
7+
8+
export const Masonry = ({ options, ...props }: MasonryProps) => {
9+
const ref = useRef<HTMLDivElement>(null)
10+
11+
useLayoutEffect(() => {
12+
if (!ref.current) {
13+
return
14+
}
15+
16+
const masonry = new MasonryLayout(ref.current, options)
17+
18+
return () => {
19+
masonry.destroy?.()
20+
}
21+
}, [options])
22+
23+
return <div ref={ref} {...props} />
24+
}
25+
26+
export default Masonry

‎packages/doom/src/runtime/components/Overview.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Fragment, useCallback, useMemo } from 'react'
1414

1515
import classes from '../../../styles/overview.module.scss'
1616

17+
import { Masonry } from './Masonry.js'
1718
import {
1819
findItemByRoutePath,
1920
isSidebarDivider,
@@ -211,6 +212,14 @@ export function Overview(props: {
211212

212213
const groups = customGroups ?? defaultGroups
213214

215+
const masonryOptions = useMemo(
216+
() => ({
217+
itemSelector: `.${classes.overviewGroup}`,
218+
gutter: 16,
219+
}),
220+
[],
221+
)
222+
214223
return (
215224
<div className="overview-index doom-overview-index">
216225
{content}
@@ -224,7 +233,7 @@ export function Overview(props: {
224233
<FallbackHeading level={2} title={group.name} />
225234
)}
226235

227-
<div className={classes.overviewGroups}>
236+
<Masonry className={classes.overviewGroups} options={masonryOptions}>
228237
{group.items.map((item) => (
229238
<div className={classes.overviewGroup} key={item.link}>
230239
<h3>
@@ -254,7 +263,7 @@ export function Overview(props: {
254263
)}
255264
</div>
256265
))}
257-
</div>
266+
</Masonry>
258267
</Fragment>
259268
))}
260269
</div>

‎packages/doom/src/runtime/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export * from './JsonViewer.js'
99
export * from './K8sCrd.js'
1010
export * from './K8sPermissionTable.js'
1111
export * from './Markdown.js'
12+
export * from './Masonry.js'
1213
export * from './Mermaid.js'
1314
export * from './OpenAPIPath.js'
1415
export * from './OpenAPIRef.js'

‎packages/doom/styles/overview.module.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,14 +108,18 @@
108108
}
109109
}
110110

111+
.overview-group {
112+
width: 100%;
113+
}
114+
111115
@media (min-width: 768px) {
112-
.overview-groups {
113-
columns: 2;
116+
.overview-group {
117+
width: calc((100% - 16px) / 2);
114118
}
115119
}
116120

117121
@media (min-width: 1024px) {
118-
.overview-groups {
119-
columns: 3;
122+
.overview-group {
123+
width: calc((100% - 32px) / 3);
120124
}
121125
}

‎yarn.lock‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ __metadata:
103103
globals: "npm:^16.5.0"
104104
html-tag-names: "npm:^2.1.0"
105105
jsencrypt: "npm:^3.5.4"
106+
masonry-layout: "npm:^4.2.2"
106107
mdast-util-mdx: "npm:^3.0.0"
107108
mdast-util-mdx-jsx: "npm:^3.2.0"
108109
mdast-util-phrasing: "npm:^4.1.0"
@@ -4022,6 +4023,15 @@ __metadata:
40224023
languageName: node
40234024
linkType: hard
40244025

4026+
"@types/jquery@npm:*":
4027+
version: 3.5.33
4028+
resolution: "@types/jquery@npm:3.5.33"
4029+
dependencies:
4030+
"@types/sizzle": "npm:*"
4031+
checksum: 10c0/d96c42762b7370ddf3b81cdad436a79d275e0ff09e2f4d7fbf2bbd8f97acef4110a11f1c3cb683195a1eba4fd9959e59d73f84d56ce2c010907a2bea696eb057
4032+
languageName: node
4033+
linkType: hard
4034+
40254035
"@types/json-schema@npm:^7.0.12, @types/json-schema@npm:^7.0.15":
40264036
version: 7.0.15
40274037
resolution: "@types/json-schema@npm:7.0.15"
@@ -4045,6 +4055,15 @@ __metadata:
40454055
languageName: node
40464056
linkType: hard
40474057

4058+
"@types/masonry-layout@npm:^4.2.8":
4059+
version: 4.2.8
4060+
resolution: "@types/masonry-layout@npm:4.2.8"
4061+
dependencies:
4062+
"@types/jquery": "npm:*"
4063+
checksum: 10c0/ca82bc34289ac88978ee6b7847c017370adef09eb44d2d43f0993e215bef7bf926d21ad2dab14cc451a8ac9e002ada9612443ce21a04d53b34ffc3ba6f2b165e
4064+
languageName: node
4065+
linkType: hard
4066+
40484067
"@types/mdast@npm:^4.0.0, @types/mdast@npm:^4.0.4":
40494068
version: 4.0.4
40504069
resolution: "@types/mdast@npm:4.0.4"
@@ -4150,6 +4169,13 @@ __metadata:
41504169
languageName: node
41514170
linkType: hard
41524171

4172+
"@types/sizzle@npm:*":
4173+
version: 2.3.10
4174+
resolution: "@types/sizzle@npm:2.3.10"
4175+
checksum: 10c0/d43ec1cd0b5e1f66b1abeaf359608853629cd3d6b8dc8b3b40b85a5ee2ce149a4485ccd7eee5c58b5a2814d384f5a951f1dab5d49041ad83457270cb2bc66fe7
4176+
languageName: node
4177+
linkType: hard
4178+
41534179
"@types/supports-color@npm:^8.0.0":
41544180
version: 8.1.3
41554181
resolution: "@types/supports-color@npm:8.1.3"
@@ -4688,6 +4714,7 @@ __metadata:
46884714
"@swc/core": "npm:^1.15.7"
46894715
"@types/cli-progress": "npm:^3.11.6"
46904716
"@types/ejs": "npm:^3.1.5"
4717+
"@types/masonry-layout": "npm:^4.2.8"
46914718
"@types/mdast": "npm:^4.0.4"
46924719
"@types/node": "npm:^24.10.4"
46934720
"@types/picomatch": "npm:^4.0.2"
@@ -6100,6 +6127,13 @@ __metadata:
61006127
languageName: node
61016128
linkType: hard
61026129

6130+
"desandro-matches-selector@npm:^2.0.0":
6131+
version: 2.0.2
6132+
resolution: "desandro-matches-selector@npm:2.0.2"
6133+
checksum: 10c0/f4b1f42e6ccd6c97e93e3f99a64461eef2722075b03d8a9e349e31766436f8b385d1fd50802b024dae951dc69399f13de20a139c1187000fd5e2fcf11cb5eb00
6134+
languageName: node
6135+
linkType: hard
6136+
61036137
"detect-indent@npm:^6.0.0":
61046138
version: 6.1.0
61056139
resolution: "detect-indent@npm:6.1.0"
@@ -6870,6 +6904,13 @@ __metadata:
68706904
languageName: node
68716905
linkType: hard
68726906

6907+
"ev-emitter@npm:^1.0.0":
6908+
version: 1.1.1
6909+
resolution: "ev-emitter@npm:1.1.1"
6910+
checksum: 10c0/332dcb444de2b1d81035fb22a10dd33926311baa7ea6fc24f1de7b60c6eff5b7e133611000fce740471f0c8f95259d3914d49b4201af2d85a51f0aeb8cb1ceda
6911+
languageName: node
6912+
linkType: hard
6913+
68736914
"eventsource-parser@npm:^3.0.6":
68746915
version: 3.0.6
68756916
resolution: "eventsource-parser@npm:3.0.6"
@@ -7041,6 +7082,15 @@ __metadata:
70417082
languageName: node
70427083
linkType: hard
70437084

7085+
"fizzy-ui-utils@npm:^2.0.0":
7086+
version: 2.0.7
7087+
resolution: "fizzy-ui-utils@npm:2.0.7"
7088+
dependencies:
7089+
desandro-matches-selector: "npm:^2.0.0"
7090+
checksum: 10c0/4c36d45db4e2e0cf1507aa9633af6710a12bdc047146fa89505e10aedc5bfb16cbfb0da686d5dfd89a37e1da4bce86bbee365e22be88705ab4ffccd530b4902a
7091+
languageName: node
7092+
linkType: hard
7093+
70447094
"flat-cache@npm:^4.0.0":
70457095
version: 4.0.1
70467096
resolution: "flat-cache@npm:4.0.1"
@@ -7180,6 +7230,13 @@ __metadata:
71807230
languageName: node
71817231
linkType: hard
71827232

7233+
"get-size@npm:^2.0.2":
7234+
version: 2.0.3
7235+
resolution: "get-size@npm:2.0.3"
7236+
checksum: 10c0/c9703caa61b4d38385eab34aa5068f3a25ab40f6d9cda6dac3f0dc4dcd8da38f7b0283035e71c9f52a47b670b9315372cae46f58d66ad709a4939e57c1fdc6cc
7237+
languageName: node
7238+
linkType: hard
7239+
71837240
"get-stream@npm:^5.1.0":
71847241
version: 5.2.0
71857242
resolution: "get-stream@npm:5.2.0"
@@ -8435,6 +8492,16 @@ __metadata:
84358492
languageName: node
84368493
linkType: hard
84378494

8495+
"masonry-layout@npm:^4.2.2":
8496+
version: 4.2.2
8497+
resolution: "masonry-layout@npm:4.2.2"
8498+
dependencies:
8499+
get-size: "npm:^2.0.2"
8500+
outlayer: "npm:^2.1.0"
8501+
checksum: 10c0/991044cf7c22acbbb1135690314d68f9f237ef17315494c9dd25ed00fa0c526a8eb27d6bcf99a141a9d049bd62c5c251f66f9c8a4c201ca9c0944d8e44c0f09f
8502+
languageName: node
8503+
linkType: hard
8504+
84388505
"mdast-comment-marker@npm:^3.0.0":
84398506
version: 3.0.0
84408507
resolution: "mdast-comment-marker@npm:3.0.0"
@@ -9852,6 +9919,17 @@ __metadata:
98529919
languageName: node
98539920
linkType: hard
98549921

9922+
"outlayer@npm:^2.1.0":
9923+
version: 2.1.1
9924+
resolution: "outlayer@npm:2.1.1"
9925+
dependencies:
9926+
ev-emitter: "npm:^1.0.0"
9927+
fizzy-ui-utils: "npm:^2.0.0"
9928+
get-size: "npm:^2.0.2"
9929+
checksum: 10c0/863f5568e16833d11d048a760ddd92395a9e1e49b51b669d863ff4ffda4cf8f6d91ebb2c4c20e26ca30175cb295f8f436075772a56c7e17ae40d3f095d449a53
9930+
languageName: node
9931+
linkType: hard
9932+
98559933
"oxc-resolver@npm:^11.6.1":
98569934
version: 11.16.0
98579935
resolution: "oxc-resolver@npm:11.16.0"

0 commit comments

Comments
 (0)