Skip to content

Commit 6be0fdb

Browse files
Arucard89Arucard89
committed
chore: fix readme errors
1 parent 449ee3d commit 6be0fdb

File tree

2 files changed

+51
-41
lines changed

2 files changed

+51
-41
lines changed

‎src/components/Pagination/README-ru.md

+25-20
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {Pagination, PaginationProps} from '@gravity-ui/uikit';
2525
const [state, setState] = React.useState({page: 1, pageSize: 100});
2626

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

3030
const pagination = <Pagination page={1} pageSize={100} total={1000} onUpdate={handleUpdate} />;
3131
```
@@ -53,14 +53,16 @@ function pageHrefBuilder(page: number, pageSize: number) {
5353
return window.location.href.replace(window.location.search, `?${queryParams.toString()}`);
5454
}
5555

56-
const [state, setState] = React.useState({page: 1, pageSize: 100});
56+
const queryParams = new URLSearchParams(window.location.search);
57+
const page = Number(queryParams.get(PAGE_PARAM));
58+
const pageSize = Number(queryParams.get(PAGE_SIZE_PARAM));
5759

58-
const renderWrapper = ({page, pageSize, button}) => {
59-
return button.props.disabled ? (
60-
button
60+
const renderWrapper = ({page, pageSize, item}) => {
61+
return item.props.disabled ? (
62+
item
6163
) : (
62-
<a href={pageHrefBuilder(page, pageSize)} key={button.key}>
63-
{button}
64+
<a href={pageHrefBuilder(page, pageSize)} key={item.key}>
65+
{item}
6466
</a>
6567
);
6668
},
@@ -70,11 +72,11 @@ const handleUpdate = (page, pageSize)=>{
7072
}
7173

7274
const pagination = <Pagination
73-
page={1}
74-
pageSize={100}
75+
page={page || 1}
76+
pageSize={pageSize || 100}
7577
total={1000}
7678
itemWrapper={renderWrapper}
77-
onUpdate={(page, pageSize)=>setState({page, pageSize})}
79+
onUpdate={handleUpdate}
7880
>;
7981
```
8082

@@ -94,29 +96,32 @@ function pageHrefBuilder(page: number, pageSize: number) {
9496
return window.location.href.replace(window.location.search, `?${queryParams.toString()}`);
9597
}
9698

97-
const [state, setState] = React.useState({page: 1, pageSize: 100});
9899
const navigate = useNavigate();
99100

100-
const renderWrapper = ({page, pageSize, button}) => {
101-
return button.props.disabled ? (
102-
button
101+
const queryParams = new URLSearchParams(window.location.search);
102+
const page = Number(queryParams.get(PAGE_PARAM));
103+
const pageSize = Number(queryParams.get(PAGE_SIZE_PARAM));
104+
105+
const renderWrapper = ({page, pageSize, item}) => {
106+
return item.props.disabled ? (
107+
item
103108
) : (
104-
<Link to={pageHrefBuilder(page, pageSize)} key={button.key}>
105-
{button}
109+
<Link to={pageHrefBuilder(page, pageSize)} key={item.key}>
110+
{item}
106111
</a>
107112
);
108113
},
109114

110-
const handleUpdate = (page, pageSize)=>{
115+
const handleUpdate = (page, pageSize) => {
111116
navigate(pageHrefBuilder(page, pageSize));
112117
}
113118

114119
const pagination = <Pagination
115-
page={1}
116-
pageSize={100}
120+
page={page || 1}
121+
pageSize={pageSize || 100}
117122
total={1000}
118123
itemWrapper={renderWrapper}
119-
onUpdate={(page, pageSize)=>setState({page, pageSize})}
124+
onUpdate={handleUpdate}
120125
>;
121126
```
122127

‎src/components/Pagination/README.md

+26-21
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {Pagination, PaginationProps} from '@gravity-ui/uikit';
2626
const [state, setState] = React.useState({page: 1, pageSize: 100});
2727

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

3131
const pagination = <Pagination page={1} pageSize={100} total={1000} onUpdate={handleUpdate} />;
3232
```
@@ -35,7 +35,7 @@ const pagination = <Pagination page={1} pageSize={100} total={1000} onUpdate={ha
3535

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

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

4040
> For example, you can wrap it in `<a/>` tag and use them as links. Pages will be available to open (from context menu for example) in new tab, new window, etc.
4141
@@ -54,14 +54,16 @@ function pageHrefBuilder(page: number, pageSize: number) {
5454
return window.location.href.replace(window.location.search, `?${queryParams.toString()}`);
5555
}
5656

57-
const [state, setState] = React.useState({page: 1, pageSize: 100});
57+
const queryParams = new URLSearchParams(window.location.search);
58+
const page = Number(queryParams.get(PAGE_PARAM));
59+
const pageSize = Number(queryParams.get(PAGE_SIZE_PARAM));
5860

59-
const renderWrapper = ({page, pageSize, button}) => {
60-
return button.props.disabled ? (
61-
button
61+
const renderWrapper = ({page, pageSize, item}) => {
62+
return item.props.disabled ? (
63+
item
6264
) : (
63-
<a href={pageHrefBuilder(page, pageSize)} key={button.key}>
64-
{button}
65+
<a href={pageHrefBuilder(page, pageSize)} key={item.key}>
66+
{item}
6567
</a>
6668
);
6769
},
@@ -71,11 +73,11 @@ const handleUpdate = (page, pageSize)=>{
7173
}
7274

7375
const pagination = <Pagination
74-
page={1}
75-
pageSize={100}
76+
page={page || 1}
77+
pageSize={pageSize || 100}
7678
total={1000}
7779
itemWrapper={renderWrapper}
78-
onUpdate={(page, pageSize)=>setState({page, pageSize})}
80+
onUpdate={handleUpdate}
7981
>;
8082
```
8183

@@ -95,29 +97,32 @@ function pageHrefBuilder(page: number, pageSize: number) {
9597
return window.location.href.replace(window.location.search, `?${queryParams.toString()}`);
9698
}
9799

98-
const [state, setState] = React.useState({page: 1, pageSize: 100});
99100
const navigate = useNavigate();
100101

101-
const renderWrapper = ({page, pageSize, button}) => {
102-
return button.props.disabled ? (
103-
button
102+
const queryParams = new URLSearchParams(window.location.search);
103+
const page = Number(queryParams.get(PAGE_PARAM));
104+
const pageSize = Number(queryParams.get(PAGE_SIZE_PARAM));
105+
106+
const renderWrapper = ({page, pageSize, item}) => {
107+
return item.props.disabled ? (
108+
item
104109
) : (
105-
<Link to={pageHrefBuilder(page, pageSize)} key={button.key}>
106-
{button}
110+
<Link to={pageHrefBuilder(page, pageSize)} key={item.key}>
111+
{item}
107112
</a>
108113
);
109114
},
110115

111-
const handleUpdate = (page, pageSize)=>{
116+
const handleUpdate = (page, pageSize) => {
112117
navigate(pageHrefBuilder(page, pageSize));
113118
}
114119

115120
const pagination = <Pagination
116-
page={1}
117-
pageSize={100}
121+
page={page || 1}
122+
pageSize={pageSize || 100}
118123
total={1000}
119124
itemWrapper={renderWrapper}
120-
onUpdate={(page, pageSize)=>setState({page, pageSize})}
125+
onUpdate={handleUpdate}
121126
>;
122127
```
123128

0 commit comments

Comments
 (0)