Skip to content

Commit f46bb14

Browse files
chrisalatdeleonio
chrisalat
authored and
deleonio
committed
(#6140) Final lazy loaded component overview list
1 parent e289280 commit f46bb14

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+833
-243
lines changed

‎dev/docs/30-components/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@ import { ComponentList } from '@site/src/components/docs/ComponentList';
1111

1212
Auf den folgenden Seiten finden Sie eine Übersicht über alle Komponenten, die in KoliBri zur Verfügung stehen. Die Komponenten sind in verschiedene Kategorien unterteilt, die Sie über das Menü links erreichen können.
1313

14-
<ComponentList />
14+
<ComponentList lang="de" />

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

Lines changed: 28 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,30 @@
11
import type { FC, MouseEvent, KeyboardEvent } from 'react';
2-
import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react';
2+
import React, { Suspense, useEffect, useState, useRef, useCallback } from 'react';
33
import { useHistory } from 'react-router-dom';
44
import { KolCard } from '@public-ui/react';
55

6-
import type { Component } from '../../shares/component';
7-
import { components } from '../../shares/component';
6+
import type { Language } from '../../shares/language';
7+
import type { Component } from '../samplePreviews';
8+
import { components } from '../samplePreviews';
89

9-
// iFrame styles
10-
const STYLES = {
11-
width: '100%',
12-
height: '250px',
13-
border: '0',
14-
overflow: 'hidden',
15-
pointerEvents: 'none' as 'none',
16-
};
10+
type Props = Language;
1711

18-
const LazyLoadComponent: FC<Component> = ({ name, sample }) => {
12+
const LazyLoadComponent: FC<Component & Language> = ({ name, lang, loadComponent }) => {
1913
const history = useHistory();
2014
const ref = useRef<HTMLDivElement>(null);
2115
const [isVisible, setIsVisible] = useState<boolean>(false);
2216

2317
useEffect(() => {
24-
const observer = new IntersectionObserver((entries, obs) => {
18+
const observer = new IntersectionObserver((entries) => {
2519
entries.forEach((entry) => {
2620
if (entry.isIntersecting) {
2721
setIsVisible(true);
28-
obs.disconnect();
2922
}
3023
})
3124
});
3225
observer.observe(ref.current as Element);
3326
}, []);
3427

35-
const sampleUrl = `/sample-react/#/${name}/${sample}?hideMenus`;
3628
const formattedComponentName = name.charAt(0).toUpperCase() + name.slice(1);
3729

3830
const handleRedirect = useCallback((event: MouseEvent<HTMLAnchorElement> | KeyboardEvent<HTMLAnchorElement>) => {
@@ -42,38 +34,34 @@ const LazyLoadComponent: FC<Component> = ({ name, sample }) => {
4234
}
4335
return event
4436
}, [formattedComponentName])
45-
46-
const iframe = useMemo(() => (
47-
<iframe
48-
src={sampleUrl}
49-
style={STYLES}
50-
tabIndex={-1}
51-
title="kolibri-public-ui-code-samples"
52-
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
53-
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
54-
/>
55-
), [sampleUrl]);
37+
38+
const SampleComponent = loadComponent();
39+
if (!loadComponent) {
40+
throw new Error(`Example component for ${name} not found`);
41+
}
5642
return (
5743
<div ref={ref} className="components-overview-item">
58-
{isVisible ? (
59-
<a
60-
tabIndex={0}
61-
onKeyDown={handleRedirect}
62-
onClick={handleRedirect}
63-
>
64-
<KolCard _level={2} _label={formattedComponentName}>
65-
{iframe}
66-
</KolCard>
67-
</a>
68-
) : <div className="skeleton"></div>}
44+
{isVisible && (
45+
<Suspense fallback={<div className="skeleton"></div>}>
46+
<a
47+
tabIndex={0}
48+
onKeyDown={handleRedirect}
49+
onClick={handleRedirect}
50+
>
51+
<KolCard _level={2} _label={formattedComponentName}>
52+
<SampleComponent lang={lang} />
53+
</KolCard>
54+
</a>
55+
</Suspense>
56+
)}
6957
</div>
7058
);
7159
};
7260

73-
export const ComponentList: FC = () => (
61+
export const ComponentList: FC<Props> = ({ lang }) => (
7462
<div className="components-overview">
75-
{components.map(({ name, sample }) => (
76-
<LazyLoadComponent key={name} name={name} sample={sample} />
63+
{components.map(({ name, loadComponent }) => (
64+
<LazyLoadComponent key={name} name={name} lang={lang} loadComponent={loadComponent} />
7765
))}
7866
</div>
7967
);

‎dev/src/components/samplePreviews/Abbr.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { KolAbbr } from '@public-ui/react';
3+
4+
const Abbr = () => (
5+
<p>
6+
Lorem ipsum{' '}
7+
<KolAbbr _label="Abkürzung" _tooltipAlign="right">
8+
z.B.
9+
</KolAbbr>{' '}
10+
dolor sit amet.
11+
</p>
12+
);
13+
14+
export default Abbr;

‎dev/src/components/samplePreviews/Accordion.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { KolAccordion } from '@public-ui/react';
3+
4+
const Accordion = () => (
5+
<>
6+
<KolAccordion _label="Accordion" _level={1} _open={true}>
7+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
8+
</KolAccordion>
9+
<KolAccordion _label="Accordion 2" _level={1}>
10+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
11+
</KolAccordion>
12+
</>
13+
);
14+
15+
export default Accordion;

‎dev/src/components/samplePreviews/Alert.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import { KolAlert } from '@public-ui/react';
3+
4+
const Alert = () => (
5+
<KolAlert _label="Title" _level={5} _type="warning" _variant="card">
6+
Content
7+
</KolAlert>
8+
);
9+
10+
export default Alert;

‎dev/src/components/samplePreviews/Avatar.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import { KolAvatar } from '@public-ui/react';
3+
4+
const Avatar = () => <KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />;
5+
6+
export default Avatar;

‎dev/src/components/samplePreviews/Badge.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import { KolBadge } from '@public-ui/react';
3+
4+
const Badge = () => <KolBadge _color="#214f86" _label="Label" />;
5+
6+
export default Badge;

‎dev/src/components/samplePreviews/Breadcrumb.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { KolBreadcrumb } from '@public-ui/react';
3+
4+
const Breadcrumb = () => (
5+
<KolBreadcrumb
6+
_label="Breadcrumb aus Text-Links"
7+
_links={[
8+
{ _label: 'Home', _href: '#/back-page' },
9+
{ _label: 'Page', _href: '#/back-page' },
10+
{
11+
_label: 'Subpage',
12+
_href: '#/back-page',
13+
},
14+
]}
15+
></KolBreadcrumb>
16+
);
17+
18+
export default Breadcrumb;

‎dev/src/components/samplePreviews/Button.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { KolButton } from '@public-ui/react';
3+
4+
const Button = () => (
5+
<KolButton
6+
_label="Button"
7+
_variant="primary"
8+
_icons={{
9+
left: {
10+
icon: 'codicon codicon-arrow-left',
11+
},
12+
right: 'codicon codicon-arrow-right',
13+
}}
14+
/>
15+
);
16+
17+
export default Button;

‎dev/src/components/samplePreviews/ButtonGroup.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import { KolButton, KolButtonGroup } from '@public-ui/react';
3+
4+
const ButtonGroup = () => (
5+
<KolButtonGroup>
6+
<KolButton _label="Active" _variant="primary" />
7+
<KolButton _label="Not active" _disabled />
8+
<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger" />
9+
</KolButtonGroup>
10+
);
11+
12+
export default ButtonGroup;

0 commit comments

Comments
 (0)