Skip to content

Commit 3fd5997

Browse files
Copilotlaske185
Copilot
and
laske185
authored
feat(preview): Add PaginationPreview component
Agent-Logs-Url: https://github.com/public-ui/public-ui.github.io/sessions/01d1c44e-a90f-44b8-99e2-a59f5a236e77 Co-authored-by: laske185 <37439758+laske185@users.noreply.github.com>
1 parent 7e774e5 commit 3fd5997

5 files changed

Lines changed: 88 additions & 63 deletions

File tree

‎docs/30-components/pagination.mdx‎

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
---
22
title: Pagination
33
description: Beschreibung, Spezifikation und Beispiele für die Pagination-Komponente.
4-
tags:
5-
- Pagination
6-
- Beschreibung
7-
- Spezifikation
8-
- Beispiele
94
---
105

116
import Readme from '../../readmes/pagination/readme.md';
12-
import { Configurator } from '@site/src/components/Configurator';
13-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
7+
import PaginationPreview from '@site/src/components/previews/components/Pagination';
148
import { ExampleLink } from '@site/src/components/ExampleLink';
159

1610
# Pagination
@@ -19,15 +13,11 @@ Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte I
1913

2014
## Konstruktion
2115

22-
### Code
23-
24-
```html
25-
<div>
26-
<kol-pagination _max="100" _page="6"></kol-pagination>
27-
<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
28-
<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
29-
</div>
30-
```
16+
<PaginationPreview
17+
visibleProperties={['_max', '_page', '_siblingCount', '_boundaryCount', '_hasButtons']}
18+
codeCollapsable
19+
codeCollapsed
20+
/>
3121

3222
### Events
3323

@@ -39,17 +29,6 @@ Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="
3929
| `changePage` | Seite wird angeklickt | Nummer der ausgewählten Seite |
4030
| `changePageSize` | Seitengröße wird geändert | Neue Seitengröße |
4131

42-
### Beispiel
43-
44-
<div class="grid gap-2">
45-
<kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
46-
<kol-pagination _max="100" _page="6" _has-buttons="false"></kol-pagination>
47-
<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
48-
<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
49-
<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
50-
<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
51-
</div>
52-
5332
## Verwendung
5433

5534
Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
@@ -66,14 +45,11 @@ Die **Paginierung**-Komponente kann über Ihre Properties konfiguriert werden.
6645
Die **Paginierung**-Komponente kann auf vielfältige Art eingesetzt werden. Insbesondere dort, wo auf einer Inhaltsseite umfangreiche Inhalte dargestellt werden sollen, trägt sie zur Verbesserung der Struktur und Übersichtlichkeit bei.
6746
Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte, Listen und Tabellen. Auch für bestimmte Navigationsaufgaben innerhalb einer Seite kann die Paginierung gut verwendet werden.
6847

69-
<Readme />
70-
71-
<ExampleLink component="pagination" />
72-
73-
## Live-Editor
48+
# API
7449

75-
<LiveEditorCompact component="pagination" />
50+
<Readme />
7651

7752
## Beispiele
7853

79-
<Configurator component="pagination" sample="basic" />
54+
<ExampleLink component="pagination" />
55+

‎i18n/de/code.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,9 @@
519519
"preview.component.image.label": {
520520
"message": "Beispielbild"
521521
},
522+
"preview.component.pagination.label": {
523+
"message": "Seitennavigation"
524+
},
522525
"preview.property.remove": {
523526
"message": "Entfernen"
524527
},

‎i18n/en/code.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,9 @@
519519
"preview.component.image.label": {
520520
"message": "Sample image"
521521
},
522+
"preview.component.pagination.label": {
523+
"message": "Page navigation"
524+
},
522525
"preview.property.remove": {
523526
"message": "Remove"
524527
},

‎i18n/en/docusaurus-plugin-content-docs/current/30-components/pagination.mdx‎

Lines changed: 10 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ description: Description, specification and examples for the Pagination componen
44
---
55

66
import Readme from '/readmes/pagination/readme.md';
7-
import { Configurator } from '@site/src/components/Configurator';
8-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
7+
import PaginationPreview from '@site/src/components/previews/components/Pagination';
98
import { ExampleLink } from '@site/src/components/ExampleLink';
109

1110
# Pagination
@@ -14,15 +13,11 @@ With the help of the **Pagination** component, extensive, divided content, such
1413

1514
## Construction
1615

17-
### Code
18-
19-
```html
20-
<div>
21-
<kol-pagination _max="100" _page="6"></kol-pagination>
22-
<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
23-
<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
24-
</div>
25-
```
16+
<PaginationPreview
17+
visibleProperties={['_max', '_page', '_siblingCount', '_boundaryCount', '_hasButtons']}
18+
codeCollapsable
19+
codeCollapsed
20+
/>
2621

2722
### Events
2823

@@ -34,17 +29,6 @@ For the handling of events or callbacks, see <kol-link _label="Events" _href="..
3429
| `changePage` | Page is clicked | Number of selected page |
3530
| `changePageSize` | Page size is changed | New page size |
3631

37-
### Example
38-
39-
<div class="grid gap-2">
40-
<kol-heading _level="3" _label="Standardausgabe nur mit aktuellem Element"></kol-heading>
41-
<kol-pagination _max="100" _page="6" _has-buttons="false"></kol-pagination>
42-
<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts dem aktuellen Element (_sibling)"></kol-heading>
43-
<kol-pagination _max="100" _page="6" _sibling-count="2"></kol-pagination>
44-
<kol-heading _level="3" _label="Ausgabe 2 Elemente links und rechts (_boundary-count)"></kol-heading>
45-
<kol-pagination _max="100" _page="6" _sibling-count="0" _boundary-count="2"></kol-pagination>
46-
</div>
47-
4832
## Usage
4933

5034
The **Pagination** component can be configured via your properties.
@@ -61,14 +45,11 @@ The **Pagination** component can be configured via your properties.
6145
The **Pagination** component can be used in a variety of ways. Especially where extensive content is to be displayed on a content page, it helps to improve the structure and clarity.
6246
Classic areas of application for pagination include blog-like content, lists and tables. Pagination can also be used for certain navigation tasks within a page.
6347

64-
<Readme />
65-
66-
<ExampleLink component="pagination" />
67-
68-
## Live editor
48+
# API
6949

70-
<LiveEditorCompact component="pagination" />
50+
<Readme />
7151

7252
## Examples
7353

74-
<Configurator component="pagination" sample="basic" />
54+
<ExampleLink component="pagination" />
55+

‎src/components/previews/components/Pagination.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import Preview, { PreviewLayout } from '../Preview';
3+
import { BooleanProperty, BoundedNumberProperty, ClampedNumberProperty } from '../properties';
4+
import type { JSX } from '@public-ui/components';
5+
import { KolInputText, KolPagination } from '@public-ui/react-v19';
6+
import { translate } from '@docusaurus/Translate';
7+
8+
interface PaginationPreviewProps {
9+
initialProps?: JSX.KolPagination;
10+
visibleProperties?: (keyof JSX.KolPagination)[];
11+
codeCollapsable?: boolean;
12+
codeCollapsed?: boolean;
13+
}
14+
15+
const PaginationPreview = (props: PaginationPreviewProps) => {
16+
const defaultProps = React.useMemo<JSX.KolPagination>(
17+
() => ({
18+
_label: translate({ id: 'preview.component.pagination.label' }),
19+
_max: 100,
20+
_page: 6,
21+
}),
22+
[],
23+
);
24+
25+
const [maxValue, setMaxValue] = React.useState<number>(props.initialProps?._max ?? defaultProps._max);
26+
27+
const handleMaxChange = (newMax: number) => {
28+
setMaxValue(newMax);
29+
};
30+
31+
return (
32+
<Preview<JSX.KolPagination>
33+
propertyComponents={{
34+
_label: <KolInputText _label="Label" />,
35+
_max: (
36+
<BoundedNumberProperty label="Max" min={1} max={1000} _value={maxValue} onBoundaryChange={handleMaxChange} />
37+
),
38+
_page: (
39+
<ClampedNumberProperty
40+
label="Page"
41+
min={1}
42+
max={maxValue}
43+
_value={props.initialProps?._page ?? defaultProps._page}
44+
/>
45+
),
46+
_siblingCount: <BoundedNumberProperty label="Sibling Count" min={0} max={10} />,
47+
_boundaryCount: <BoundedNumberProperty label="Boundary Count" min={0} max={10} />,
48+
_hasButtons: <BooleanProperty label="Has Buttons" />,
49+
}}
50+
initialProps={{ ...defaultProps, ...props.initialProps }}
51+
componentName="KolPagination"
52+
visibleProperties={props.visibleProperties}
53+
codeCollapsable={props.codeCollapsable}
54+
codeCollapsed={props.codeCollapsed}
55+
layout={PreviewLayout.CENTERED}
56+
>
57+
{(componentProps) => <KolPagination {...componentProps} />}
58+
</Preview>
59+
);
60+
};
61+
62+
export default PaginationPreview;

0 commit comments

Comments
 (0)