Skip to content

Commit a7ac352

Browse files
nDriaDevnDriaDev
committed
[FIX] details tag list
1 parent b680d2d commit a7ac352

2 files changed

Lines changed: 99 additions & 72 deletions

File tree

‎apps/react-tools-demo/scripts/generateMainLayout.js‎

Lines changed: 84 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -42,93 +42,103 @@ function createLinkHooksRoutes(router, stateFiles, lifecycleFiles, performanceFi
4242
router.add(" <summary translate='no'>Hooks</summary>");
4343
router.add(" <details open className='sub-type'>");
4444
router.add(" <summary translate='no'>State</summary>");
45+
router.add(" <div className='container-details'>");
4546
stateFiles.forEach(f => {
4647
const [name] = f.split(".");
47-
router.add(' <Link');
48-
router.add(` className={pathname === "/hooks/state/${name}" ? 'active' : ''}`);
49-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
50-
router.add(` to="/hooks/state/${name}"`);
51-
router.add(' onClick={() => {');
52-
router.add(' containerRef.current?.scrollTo(0, 0);');
53-
router.add(' window.innerWidth < 1190 && closeNav();');
54-
router.add(' }}');
55-
router.add(' translate="no"');
56-
router.add(' >');
57-
router.add(` ${name}`);
58-
router.add(' </Link>');
48+
router.add(' <Link');
49+
router.add(` className={pathname === "/hooks/state/${name}" ? 'active' : ''}`);
50+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
51+
router.add(` to="/hooks/state/${name}"`);
52+
router.add(' onClick={() => {');
53+
router.add(' containerRef.current?.scrollTo(0, 0);');
54+
router.add(' window.innerWidth < 1190 && closeNav();');
55+
router.add(' }}');
56+
router.add(' translate="no"');
57+
router.add(' >');
58+
router.add(` ${name}`);
59+
router.add(' </Link>');
5960
});
61+
router.add(" </div>");
6062
router.add(" </details>");
6163
router.add(" <details open className='sub-type'>");
6264
router.add(" <summary translate='no'>Lifecycle</summary>");
65+
router.add(" <div className='container-details'>");
6366
lifecycleFiles.forEach(f => {
6467
const [name] = f.split(".");
65-
router.add(' <Link');
66-
router.add(` className={pathname === "/hooks/lifecycle/${name}" ? 'active' : ''}`);
67-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
68-
router.add(` to="/hooks/lifecycle/${name}"`);
69-
router.add(' onClick={() => {');
70-
router.add(' containerRef.current?.scrollTo(0, 0);');
71-
router.add(' window.innerWidth < 1190 && closeNav();');
72-
router.add(' }}');
73-
router.add(' translate="no"');
74-
router.add(' >');
75-
router.add(` ${name}`);
76-
router.add(' </Link>');
68+
router.add(' <Link');
69+
router.add(` className={pathname === "/hooks/lifecycle/${name}" ? 'active' : ''}`);
70+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
71+
router.add(` to="/hooks/lifecycle/${name}"`);
72+
router.add(' onClick={() => {');
73+
router.add(' containerRef.current?.scrollTo(0, 0);');
74+
router.add(' window.innerWidth < 1190 && closeNav();');
75+
router.add(' }}');
76+
router.add(' translate="no"');
77+
router.add(' >');
78+
router.add(` ${name}`);
79+
router.add(' </Link>');
7780
});
81+
router.add(" </div>");
7882
router.add(" </details>");
7983
router.add(" <details open className='sub-type'>");
8084
router.add(" <summary translate='no'>Performance</summary>");
85+
router.add(" <div className='container-details'>");
8186
performanceFiles.forEach(f => {
8287
const [name] = f.split(".");
83-
router.add(' <Link');
84-
router.add(` className={pathname === "/hooks/performance/${name}" ? 'active' : ''}`);
85-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
86-
router.add(` to="/hooks/performance/${name}"`);
87-
router.add(' onClick={() => {');
88-
router.add(' containerRef.current?.scrollTo(0, 0);');
89-
router.add(' window.innerWidth < 1190 && closeNav();');
90-
router.add(' }}');
91-
router.add(' translate="no"');
92-
router.add(' >');
93-
router.add(` ${name}`);
94-
router.add(' </Link>');
88+
router.add(' <Link');
89+
router.add(` className={pathname === "/hooks/performance/${name}" ? 'active' : ''}`);
90+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
91+
router.add(` to="/hooks/performance/${name}"`);
92+
router.add(' onClick={() => {');
93+
router.add(' containerRef.current?.scrollTo(0, 0);');
94+
router.add(' window.innerWidth < 1190 && closeNav();');
95+
router.add(' }}');
96+
router.add(' translate="no"');
97+
router.add(' >');
98+
router.add(` ${name}`);
99+
router.add(' </Link>');
95100
});
101+
router.add(" </div>");
96102
router.add(" </details>");
97103
router.add(" <details open className='sub-type'>");
98104
router.add(" <summary translate='no'>Events</summary>");
105+
router.add(" <div className='container-details'>");
99106
eventsFiles.forEach(f => {
100107
const [name] = f.split(".");
101-
router.add(' <Link');
102-
router.add(` className={pathname === "/hooks/events/${name}" ? 'active' : ''}`);
103-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
104-
router.add(` to="/hooks/events/${name}"`);
105-
router.add(' onClick={() => {');
106-
router.add(' containerRef.current?.scrollTo(0, 0);');
107-
router.add(' window.innerWidth < 1190 && closeNav();');
108-
router.add(' }}');
109-
router.add(' translate="no"');
110-
router.add(' >');
111-
router.add(` ${name}`);
112-
router.add(' </Link>');
108+
router.add(' <Link');
109+
router.add(` className={pathname === "/hooks/events/${name}" ? 'active' : ''}`);
110+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
111+
router.add(` to="/hooks/events/${name}"`);
112+
router.add(' onClick={() => {');
113+
router.add(' containerRef.current?.scrollTo(0, 0);');
114+
router.add(' window.innerWidth < 1190 && closeNav();');
115+
router.add(' }}');
116+
router.add(' translate="no"');
117+
router.add(' >');
118+
router.add(` ${name}`);
119+
router.add(' </Link>');
113120
});
121+
router.add(" </div>");
114122
router.add(" </details>");
115123
router.add(" <details open className='sub-type'>");
116124
router.add(" <summary translate='no'>API DOM</summary>");
125+
router.add(" <div className='container-details'>");
117126
apiDomFiles.forEach(f => {
118127
const [name] = f.split(".");
119-
router.add(' <Link');
120-
router.add(` className={pathname === "/hooks/api-${name}" ? 'active' : ''}`);
121-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
122-
router.add(` to="/hooks/api-dom/${name}"`);
123-
router.add(' onClick={() => {');
124-
router.add(' containerRef.current?.scrollTo(0, 0);');
125-
router.add(' window.innerWidth < 1190 && closeNav();');
126-
router.add(' }}');
127-
router.add(' translate="no"');
128-
router.add(' >');
129-
router.add(` ${name}`);
130-
router.add(' </Link>');
128+
router.add(' <Link');
129+
router.add(` className={pathname === "/hooks/api-${name}" ? 'active' : ''}`);
130+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
131+
router.add(` to="/hooks/api-dom/${name}"`);
132+
router.add(' onClick={() => {');
133+
router.add(' containerRef.current?.scrollTo(0, 0);');
134+
router.add(' window.innerWidth < 1190 && closeNav();');
135+
router.add(' }}');
136+
router.add(' translate="no"');
137+
router.add(' >');
138+
router.add(` ${name}`);
139+
router.add(' </Link>');
131140
});
141+
router.add(" </div>");
132142
router.add(" </details>");
133143
router.add(" </details>");
134144
}
@@ -142,21 +152,23 @@ function createLinkHooksRoutes(router, stateFiles, lifecycleFiles, performanceFi
142152
function createLinkRoutes(router, componentsFiles, parentRoot) {
143153
router.add(" <details open className='type'>");
144154
router.add(` <summary translate="no">${parentRoot.charAt(0).toUpperCase() + parentRoot.substring(1)}</summary>`);
155+
router.add(" <div className='sub-type'>");
145156
componentsFiles.forEach(f => {
146157
const [name] = f.split(".");
147-
router.add(' <Link');
148-
router.add(` className={pathname === "/${parentRoot}/${name}" ? 'active' : ''}`);
149-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
150-
router.add(` to="/${parentRoot}/${name}"`);
151-
router.add(' onClick={() => {');
152-
router.add(' containerRef.current?.scrollTo(0, 0);');
153-
router.add(' window.innerWidth < 1190 && closeNav();');
154-
router.add(' }}');
155-
router.add(' translate="no"');
156-
router.add(' >');
157-
router.add(` ${name}`);
158-
router.add(' </Link>');
158+
router.add(' <Link');
159+
router.add(` className={pathname === "/${parentRoot}/${name}" ? 'active' : ''}`);
160+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
161+
router.add(` to="/${parentRoot}/${name}"`);
162+
router.add(' onClick={() => {');
163+
router.add(' containerRef.current?.scrollTo(0, 0);');
164+
router.add(' window.innerWidth < 1190 && closeNav();');
165+
router.add(' }}');
166+
router.add(' translate="no"');
167+
router.add(' >');
168+
router.add(` ${name}`);
169+
router.add(' </Link>');
159170
});
171+
router.add(" </div>");
160172
router.add(" </details>");
161173
}
162174

‎apps/react-tools-demo/src/App.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,16 @@ code {
218218
font-size: 1em;
219219
}
220220

221+
.nav>.type>.sub-type>.container-details {
222+
display: flex;
223+
flex-direction: column;
224+
height: inherit;
225+
overflow-y: auto;
226+
margin: 0.5em 0;
227+
padding-left: .75em;
228+
font-size: 1em;
229+
}
230+
221231
.nav>.type>.sub-type ~ .sub-type {
222232
margin-top: 1em;
223233
}
@@ -228,6 +238,11 @@ code {
228238
}
229239

230240
.nav>.type>.sub-type>a {
241+
font-size: .875em;
242+
padding: 1em 0em 1em 2.75em;
243+
}
244+
245+
.nav>.type>.sub-type>.container-details>a {
231246
font-size: .875em;
232247
padding: 1em 1em 1em 1.75em;
233248
}

0 commit comments

Comments
 (0)