feat(Pagination): add possibility to use wrapper components for pagination buttons #2040

Arucard89 · 2025-01-14T07:22:05Z

UXRFC-439

gravity-ui-bot · 2025-01-14T07:24:00Z

Preview is ready.

gravity-ui-bot · 2025-01-14T07:25:54Z

Visual Tests Report is ready.

gravity-ui-bot · 2025-01-14T07:25:54Z

Visual Tests Report is ready.

jhoncool · 2025-01-14T12:43:08Z

src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx

            return;
        }

        const newPage = page > numberOfPages ? numberOfPages : page;

-        onUpdate(newPage, newPageSize);
+        if (pageHrefBuilder) {
+            window.location.href = pageHrefBuilder(newPage, newPageSize);


Usually you want to work with react-router and SPA links. So reloading the page it's a bad idea.

I thought that the main goal of the ticket was to use links (<a/> tag) in all controls. And click for them will also reload page. So we have the same behaviour in all components.
I suppose, if user want to use links in Pagination he know all the pros and cons of this case.

You still also able to use onUpdate prop for react-router way.

I think we need to support both cases. When there are links <a> and you can use react-router also. So we need to prevent default click but also we can open new tab on ctrl/cmd+click

Might be better to try to go another way. I'll make prop to pass custom wrapper for Pagination controls. And user will decide what it will be. It could be common <a/>, <Link/> or <NavLink/> from react-router or anything else.
In my opinion, it will be more flexible solution.

Might be better to try to go another way. I'll make prop to pass custom wrapper for Pagination controls. And user will decide what it will be. It could be common <a/>, <Link/> or <NavLink/> from react-router or anything else. In my opinion, it will be more flexible solution.

Sounds good

Arucard89 · 2025-01-17T11:58:54Z

I rewrote component to support different ways of usage
@jhoncool, could you review it again?

jhoncool · 2025-01-17T15:29:03Z

src/components/Pagination/README-ru.md

+| className       | HTML-атрибут `class`.                                                                                                                                        |  `string`  |                       |
+| compact         | Скрывает заголовки для кнопок `First`, `Previous` и `Next`. В мобильной версии всегда имеет значение `true`.                                                 | `boolean`  |        `true`         |
+| buttonWrapper   | Компонент-обертка над кнопками пагинации                                                                                                                     | `Function` |                       |
+| onUpdate        | Вызывается при изменении номера страницы или свойства `pageSize` (ели задан параметр `buttonWrapper`, то `onUpdate` вызывается только в `input` и `select`). | `Function` |                       |


typo ели

jhoncool · 2025-01-17T15:49:28Z

src/components/Pagination/types.ts

+export type ButtonWrapperParam = {
+    page: number;
+    pageSize: number;
+    button: React.ReactElement;


Can we set type for props here? Because you used button.props.disabled in your examples. It's any type now.

jhoncool · 2025-01-17T15:50:40Z

src/components/Pagination/Pagination.tsx

@@ -25,6 +25,7 @@ export const Pagination = ({
    total,
    size: propSize,
    onUpdate,
+    buttonWrapper,


Let's rename it to paginationItemWrapper for example. Because it can be not only Button in the future

may be shorter itemWrapper will be better? also I renamed param name inside itemWrapper from button to item according to the new name of parent param

9d4b9af

jhoncool · 2025-01-17T15:54:11Z

@amje @korvin89 will any of you please review it too?

jhoncool · 2025-01-20T08:16:09Z

src/components/Pagination/README-ru.md

+
+При использовании этого способа пользователь будет взаимодействовать кнопками пагинации, как с произвольными компонентами.
+
+Для этого необходимо указать свойство `buttonWraper`. В этом случае `onUpdate` будет вызываться только при изменении компонентов input и select.


Suggested change

Для этого необходимо указать свойство `buttonWraper`. В этом случае `onUpdate` будет вызываться только при изменении компонентов input и select.

Для этого необходимо указать свойство `itemWrapper`. В этом случае `onUpdate` будет вызываться только при изменении компонентов input и select.

jhoncool · 2025-01-20T08:16:48Z

src/components/Pagination/README.md

+
+In this case user will iteract with pagination's controls as with buttons.
+
+Set `onUpdate` prop to use pagination as buttons (`buttonWraper` must be `undefined`).


Suggested change

Set `onUpdate` prop to use pagination as buttons (`buttonWraper` must be `undefined`).

Set `onUpdate` prop to use pagination as buttons (`itemWrapper` must be `undefined`).

jhoncool · 2025-01-20T08:17:18Z

src/components/Pagination/README.md

+
+In this case user will iteract with pagination's buttons as with custom controls.
+
+Set `buttonWraper` prop to use pagination as custom contrlols. In this case `onUpdate` will fire only on input and select components.


Suggested change

Set `buttonWraper` prop to use pagination as custom contrlols. In this case `onUpdate` will fire only on input and select components.

Set `itemWrapper` prop to use pagination as custom controls. In this case `onUpdate` will fire only on input and select components.

korvin89 · 2025-01-20T10:52:20Z

@Arucard89 this is invalid html, more details and specs here

Arucard89 · 2025-01-23T18:08:56Z

@korvin89 , I made correct nested element for wrapper

korvin89 · 2025-01-23T19:54:43Z

@korvin89 , I made correct nested element for wrapper

Still incorrect:

Arucard89 · 2025-01-24T06:52:39Z

@korvin89 , something wrong with preview. It has not been updated. Because in my local build everything is OK:

Is there any way to rebuild preview?

korvin89 · 2025-01-24T10:44:58Z

something wrong with preview

Yep! My bad, sorry

jhoncool · 2025-01-24T11:40:21Z

src/components/Pagination/README-ru.md

 ```jsx
 import {Pagination, PaginationProps} from '@gravity-ui/uikit';

 const [state, setState] = React.useState({page: 1, pageSize: 100});

 const handleUpdate: PaginationProps['onUpdate'] = (page, pageSize) =>
-  setState((prevState) => ({...prevState, page, pageSize}));
+  setState((prevState) => ({page, pageSize}));


Please, use one style in the README file

setState((prevState) => ({...prevState, page, pageSize})); // or setState({page, pageSize}})

jhoncool · 2025-01-24T11:40:48Z

src/components/Pagination/README-ru.md

+const [state, setState] = React.useState({page: 1, pageSize: 100});
+const navigate = useNavigate();
+
+const renderWrapper = ({page, pageSize, button}) => {


button -> item

jhoncool · 2025-01-24T11:41:14Z

src/components/Pagination/README.md

+
+In this case user will iteract with pagination's buttons as with custom controls.
+
+Set `itemWrapper` prop to use pagination as custom contrlols. In this case `onUpdate` will fire only on input and select components.


contrlols -> controls

jhoncool · 2025-01-24T11:41:45Z

src/components/Pagination/README.md

+const [state, setState] = React.useState({page: 1, pageSize: 100});
+const navigate = useNavigate();
+
+const renderWrapper = ({page, pageSize, button}) => {


button -> item

Arucard89 · 2025-01-24T13:01:47Z

@jhoncool , I fixed typo and rewrote examples for readme: 6be0fdb

Arucard89 · 2025-01-27T06:37:38Z

@korvin89 , @amje , may I merge this PR into main?

Arucard89 added 2 commits January 14, 2025 10:21

feat: add possibility to use pagination buttons as links

3c5976b

Merge branch 'main' into UXRFC-439

c9a1e34

Arucard89 added 2 commits January 14, 2025 10:44

chore: pageHrefUpdater -> pageHrefBuilder

8732e37

chore: add docs

92a0d91

Arucard89 force-pushed the UXRFC-439 branch from 4b40b23 to 92a0d91 Compare January 14, 2025 08:45

chore: add constants to example

48059d9

Arucard89 changed the title ~~feat: add possibility to use pagination buttons as links~~ feat(Pagination): add possibility to use pagination buttons as links Jan 14, 2025

Arucard89 marked this pull request as ready for review January 14, 2025 10:45

Arucard89 requested a review from jhoncool as a code owner January 14, 2025 10:45

Arucard89 added enhancement New feature or request component: Pagination UXRFC labels Jan 14, 2025

jhoncool reviewed Jan 14, 2025

View reviewed changes

Arucard89 requested review from amje and korvin89 January 15, 2025 08:36

Arucard89 force-pushed the UXRFC-439 branch from 7b6c364 to 6716cac Compare January 17, 2025 11:37

feat: add wrapper to buttons

f77e551

Arucard89 force-pushed the UXRFC-439 branch from 6716cac to f77e551 Compare January 17, 2025 11:51

Arucard89 added 2 commits January 17, 2025 14:53

fix: ru lang

e62c6f8

Merge branch 'main' into UXRFC-439

d2fa124

jhoncool reviewed Jan 17, 2025

View reviewed changes

Arucard89 added 3 commits January 20, 2025 10:20

fix: typo

05c6643

fix: add type to button

3b5f46c

chore: rename ButtonWrapperParam->ItemWrapperParam, button->item

9d4b9af

jhoncool reviewed Jan 20, 2025

View reviewed changes

fix: readme replace for itemWrapper

f1320aa

Arucard89 added 2 commits January 23, 2025 21:04

feat: create correct descedant for wrapper

1cb5bc8

Merge branch 'main' into UXRFC-439

449ee3d

Arucard89 changed the title ~~feat(Pagination): add possibility to use pagination buttons as links~~ feat(Pagination): add possibility use custom pagination button components Jan 24, 2025

Arucard89 changed the title ~~feat(Pagination): add possibility use custom pagination button components~~ feat(Pagination): add possibility to use wrapper components for pagination buttons Jan 24, 2025

jhoncool reviewed Jan 24, 2025

View reviewed changes

chore: fix readme errors

6be0fdb

Arucard89 force-pushed the UXRFC-439 branch from 3d4b069 to 6be0fdb Compare January 24, 2025 12:59

jhoncool approved these changes Jan 24, 2025

View reviewed changes

Merge branch 'main' into UXRFC-439

79ac2b9

fix: typo

f218eb7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Pagination): add possibility to use wrapper components for pagination buttons #2040

feat(Pagination): add possibility to use wrapper components for pagination buttons #2040

Arucard89 commented Jan 14, 2025 •

edited

Loading

gravity-ui-bot commented Jan 14, 2025

gravity-ui-bot commented Jan 14, 2025

gravity-ui-bot commented Jan 14, 2025

jhoncool Jan 14, 2025

Arucard89 Jan 15, 2025

jhoncool Jan 15, 2025

Arucard89 Jan 15, 2025

jhoncool Jan 15, 2025

Arucard89 commented Jan 17, 2025

jhoncool Jan 17, 2025

Arucard89 Jan 20, 2025

jhoncool Jan 17, 2025

Arucard89 Jan 20, 2025

jhoncool Jan 17, 2025

Arucard89 Jan 20, 2025

jhoncool commented Jan 17, 2025

jhoncool Jan 20, 2025

Arucard89 Jan 20, 2025

jhoncool Jan 20, 2025

Arucard89 Jan 20, 2025

jhoncool Jan 20, 2025

Arucard89 Jan 20, 2025

korvin89 commented Jan 20, 2025

Arucard89 commented Jan 23, 2025

korvin89 commented Jan 23, 2025

Arucard89 commented Jan 24, 2025 •

edited

Loading

korvin89 commented Jan 24, 2025

jhoncool Jan 24, 2025

jhoncool Jan 24, 2025

jhoncool Jan 24, 2025

jhoncool Jan 24, 2025

Arucard89 commented Jan 24, 2025 •

edited

Loading

Arucard89 commented Jan 27, 2025 •

edited

Loading


		При использовании этого способа пользователь будет взаимодействовать кнопками пагинации, как с произвольными компонентами.

		Для этого необходимо указать свойство `buttonWraper`. В этом случае `onUpdate` будет вызываться только при изменении компонентов input и select.

	Для этого необходимо указать свойство `buttonWraper`. В этом случае `onUpdate` будет вызываться только при изменении компонентов input и select.
	Для этого необходимо указать свойство `itemWrapper`. В этом случае `onUpdate` будет вызываться только при изменении компонентов input и select.


		In this case user will iteract with pagination's controls as with buttons.

		Set `onUpdate` prop to use pagination as buttons (`buttonWraper` must be `undefined`).


		In this case user will iteract with pagination's buttons as with custom controls.

		Set `buttonWraper` prop to use pagination as custom contrlols. In this case `onUpdate` will fire only on input and select components.

	Set `buttonWraper` prop to use pagination as custom contrlols. In this case `onUpdate` will fire only on input and select components.
	Set `itemWrapper` prop to use pagination as custom controls. In this case `onUpdate` will fire only on input and select components.

feat(Pagination): add possibility to use wrapper components for pagination buttons #2040

Are you sure you want to change the base?

feat(Pagination): add possibility to use wrapper components for pagination buttons #2040

Conversation

Arucard89 commented Jan 14, 2025 • edited Loading

gravity-ui-bot commented Jan 14, 2025

gravity-ui-bot commented Jan 14, 2025

gravity-ui-bot commented Jan 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Arucard89 commented Jan 17, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhoncool commented Jan 17, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

korvin89 commented Jan 20, 2025

Arucard89 commented Jan 23, 2025

korvin89 commented Jan 23, 2025

Arucard89 commented Jan 24, 2025 • edited Loading

korvin89 commented Jan 24, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Arucard89 commented Jan 24, 2025 • edited Loading

Arucard89 commented Jan 27, 2025 • edited Loading

Arucard89 commented Jan 14, 2025 •

edited

Loading

Arucard89 commented Jan 24, 2025 •

edited

Loading

Arucard89 commented Jan 24, 2025 •

edited

Loading

Arucard89 commented Jan 27, 2025 •

edited

Loading