Skip to content

Commit 98a6623

Browse files
chrisalatchrisalat
committed
(#6140) Review changes
1 parent c6a3209 commit 98a6623

File tree

1 file changed

+82
-69
lines changed

1 file changed

+82
-69
lines changed

‎dev/src/components/docs/ComponentList.tsx

Lines changed: 82 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,100 @@
11
import type { FC, MouseEvent, KeyboardEvent } from 'react';
22
import React, { Suspense, useEffect, useState, useRef, useCallback } from 'react';
3-
import {useDocsPreferredVersion} from '@docusaurus/theme-common';
3+
import { useDocsPreferredVersion } from '@docusaurus/theme-common';
44
import { useHistory } from 'react-router-dom';
55
import { KolCard, KolHeading } from '@public-ui/react';
66

77
import type { Language } from '../../shares/language';
88
import type { Version } from '../../shares/version';
99
import type { Component } from '../samplePreviews';
10-
import { COMPONENT_VERSIONS } from "../samplePreviews/version"
10+
import { COMPONENT_VERSIONS } from '../samplePreviews/version';
1111

1212
type Props = Language & {
13-
version?: Version
14-
}
13+
version?: Version;
14+
};
1515

16-
const LazyLoadComponent: FC<Component & Language & {
17-
path?: string
18-
observer: (cb: () => void) => IntersectionObserver;
19-
}> = ({ name, lang, path, loadComponent, observer }) => {
20-
const history = useHistory();
21-
const ref = useRef<HTMLDivElement>(null);
22-
const [isVisible, setIsVisible] = useState<boolean>(false);
16+
const LazyLoadComponent: FC<
17+
Component &
18+
Language & {
19+
path?: string;
20+
observer: (cb: () => void) => IntersectionObserver;
21+
}
22+
> = ({ name, lang, path, loadComponent, observer }) => {
23+
const history = useHistory();
24+
const ref = useRef<HTMLDivElement>(null);
25+
const [isVisible, setIsVisible] = useState<boolean>(false);
2326

24-
useEffect(() => {
25-
observer(() => setIsVisible(true)).observe(ref.current as Element);
26-
}, [observer]);
27+
useEffect(() => {
28+
observer(() => setIsVisible(true)).observe(ref.current as Element);
29+
}, [observer]);
2730

28-
const formattedComponentName = name.charAt(0).toUpperCase() + name.slice(1);
31+
const formattedComponentName = name.charAt(0).toUpperCase() + name.slice(1);
2932

30-
const handleRedirect = useCallback((event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>) => {
31-
if (event.type === 'click' || (event.type === 'keydown' && (event as React.KeyboardEvent).key === 'Enter')) {
32-
event.preventDefault();
33-
history.push(`${path ?? "/docs/next"}/components/${formattedComponentName}`)
34-
}
35-
return event
36-
}, [path, formattedComponentName])
33+
const handleRedirect = useCallback(
34+
(event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>) => {
35+
if (event.type === 'click' || (event.type === 'keydown' && (event as React.KeyboardEvent).key === 'Enter')) {
36+
event.preventDefault();
37+
history.push(`${path ?? '/docs/next'}/components/${formattedComponentName}`);
38+
}
39+
return event;
40+
},
41+
[path, formattedComponentName]
42+
);
3743

38-
const SampleComponent = loadComponent();
39-
if (!loadComponent) {
40-
throw new Error(`Example component for ${name} not found`);
41-
}
42-
return (
43-
<div ref={ref} className="components-overview-item">
44-
{isVisible && (
45-
<Suspense fallback={<div className="skeleton"></div>}>
46-
<a
47-
tabIndex={0}
48-
onKeyDown={handleRedirect}
49-
onClick={handleRedirect}
50-
>
51-
<KolCard aria-label={formattedComponentName} role="img" _level={2} _label={formattedComponentName}>
52-
<div aria-hidden="true">
53-
<SampleComponent lang={lang} />
54-
</div>
55-
</KolCard>
56-
</a>
57-
</Suspense>
58-
)}
59-
</div>
60-
);
44+
const SampleComponent = loadComponent();
45+
if (!loadComponent) {
46+
throw new Error(`Example component for ${name} not found`);
47+
}
48+
return (
49+
<div ref={ref} className="components-overview-item">
50+
{isVisible && (
51+
<Suspense fallback={<div className="skeleton"></div>}>
52+
<a tabIndex={0} onKeyDown={handleRedirect} onClick={handleRedirect}>
53+
<KolCard aria-label={formattedComponentName} role="img" _level={2} _label={formattedComponentName}>
54+
<SampleComponent lang={lang} />
55+
</KolCard>
56+
</a>
57+
</Suspense>
58+
)}
59+
</div>
60+
);
6161
};
6262

6363
export const ComponentList: FC<Props> = ({ lang }) => {
64-
const { preferredVersion } = useDocsPreferredVersion();
65-
const version = preferredVersion?.name as Version
66-
const components = COMPONENT_VERSIONS?.[version ?? "current"] as Component[]
67-
if (components?.length <= 0) return null
68-
const componentLength = components.length
69-
const headline = lang === "de" ? `Anzahl Komponenten: ${componentLength}` : `Components sum: ${componentLength}`
70-
const observer = useCallback((cb: () => void) => new IntersectionObserver((entries) => {
71-
entries.forEach((entry) => {
72-
if (entry.isIntersecting) {
73-
cb()
74-
}
75-
})
76-
}), []);
77-
return (
78-
<>
79-
<KolHeading _label={headline} _level={3}>{headline}</KolHeading>
80-
<div className="components-overview">
81-
{components.map(({ name, loadComponent }) => (
82-
<LazyLoadComponent key={name} name={name} lang={lang} path={preferredVersion?.path} loadComponent={loadComponent} observer={observer} />
83-
))}
84-
</div>
85-
</>
86-
)
87-
};
64+
const { preferredVersion } = useDocsPreferredVersion();
65+
const version = preferredVersion?.name as Version;
66+
const components = COMPONENT_VERSIONS?.[version ?? 'current'] as Component[];
67+
if (components?.length <= 0) return null;
68+
const componentLength = components.length;
69+
const headline = lang === 'de' ? `Anzahl Komponenten: ${componentLength}` : `Components sum: ${componentLength}`;
70+
const observer = useCallback(
71+
(cb: () => void) =>
72+
new IntersectionObserver((entries) => {
73+
entries.forEach((entry) => {
74+
if (entry.isIntersecting) {
75+
cb();
76+
}
77+
});
78+
}),
79+
[]
80+
);
81+
return (
82+
<>
83+
<KolHeading _label={headline} _level={3}>
84+
{headline}
85+
</KolHeading>
86+
<div className="components-overview">
87+
{components.map(({ name, loadComponent }) => (
88+
<LazyLoadComponent
89+
key={name}
90+
name={name}
91+
lang={lang}
92+
path={preferredVersion?.path}
93+
loadComponent={loadComponent}
94+
observer={observer}
95+
/>
96+
))}
97+
</div>
98+
</>
99+
);
100+
};

0 commit comments

Comments
 (0)