Skip to content

Commit 430693f

Browse files
kevinsperrineAlessandra Davila
and
Alessandra Davila
authoredJan 31, 2022
feat(pagination): add forwardedRef for pagination container div (#10239)
* feat(pagination): add forwardedRef for pagination container div * feat(Pagination): forwardRef to pagination next, too * fix(pagination): remove Element in forwardedRef proptype definition * feat(pagination): update public api snapshot * feat: pass forwardedRef to pagination Co-authored-by: Alessandra Davila <aledavila@ibm.com>
1 parent e76c42a commit 430693f

File tree

4 files changed

+46
-28
lines changed

4 files changed

+46
-28
lines changed
 

‎packages/react/src/components/Pagination/Pagination-test.js

+7
Original file line numberDiff line numberDiff line change
@@ -437,5 +437,12 @@ describe('Pagination', () => {
437437
});
438438
});
439439
});
440+
441+
it('should render with ref', () => {
442+
const ref = React.createRef();
443+
mount(<Pagination pageSizes={[10]} totalItems={5} forwardedRef={ref} />);
444+
445+
expect(ref.current).toHaveClass(`${prefix}--pagination`);
446+
});
440447
});
441448
});

‎packages/react/src/components/Pagination/Pagination.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@ export default class Pagination extends Component {
283283
onChange, // eslint-disable-line no-unused-vars
284284
page: pageNumber, // eslint-disable-line no-unused-vars
285285
size,
286+
forwardedRef, // eslint-disable-line react/prop-types
286287
...other
287288
} = this.props;
288289

@@ -312,7 +313,7 @@ export default class Pagination extends Component {
312313
const pageSizes = mapPageSizesToObject(_pageSizes);
313314

314315
return (
315-
<div className={classNames} {...other}>
316+
<div className={classNames} ref={forwardedRef} {...other}>
316317
<div className={`${prefix}--pagination__left`}>
317318
<label
318319
id={`${prefix}-pagination-select-${inputId}-count-label`}

‎packages/react/src/components/Pagination/next/Pagination.js

+30-27
Original file line numberDiff line numberDiff line change
@@ -47,31 +47,34 @@ function getPageSize(pageSizes, pageSize) {
4747
return pageSizes[0].value;
4848
}
4949

50-
function Pagination({
51-
backwardText = 'Previous page',
52-
className: customClassName,
53-
disabled = false,
54-
forwardText = 'Next page',
55-
id,
56-
isLastPage = false,
57-
itemText = (min, max) => `${min}${max} items`,
58-
itemRangeText = (min, max, total) => `${min}${max} of ${total} items`,
59-
itemsPerPageText = 'Items per page:',
60-
onChange,
61-
pageNumberText: _pageNumberText = 'Page Number',
62-
pageRangeText = (_current, total) =>
63-
`of ${total} ${total === 1 ? 'page' : 'pages'}`,
64-
page: controlledPage = 1,
65-
pageInputDisabled,
66-
pageSize: controlledPageSize,
67-
pageSizeInputDisabled,
68-
pageSizes: controlledPageSizes,
69-
pageText = (page) => `page ${page}`,
70-
pagesUnknown = false,
71-
size,
72-
totalItems,
73-
...rest
74-
}) {
50+
const Pagination = React.forwardRef(function Pagination(
51+
{
52+
backwardText = 'Previous page',
53+
className: customClassName,
54+
disabled = false,
55+
forwardText = 'Next page',
56+
id,
57+
isLastPage = false,
58+
itemText = (min, max) => `${min}${max} items`,
59+
itemRangeText = (min, max, total) => `${min}${max} of ${total} items`,
60+
itemsPerPageText = 'Items per page:',
61+
onChange,
62+
pageNumberText: _pageNumberText = 'Page Number',
63+
pageRangeText = (_current, total) =>
64+
`of ${total} ${total === 1 ? 'page' : 'pages'}`,
65+
page: controlledPage = 1,
66+
pageInputDisabled,
67+
pageSize: controlledPageSize,
68+
pageSizeInputDisabled,
69+
pageSizes: controlledPageSizes,
70+
pageText = (page) => `page ${page}`,
71+
pagesUnknown = false,
72+
size,
73+
totalItems,
74+
...rest
75+
},
76+
ref
77+
) {
7578
const prefix = usePrefix();
7679
const inputId = useFallbackId(id);
7780
const [pageSizes, setPageSizes] = useState(() => {
@@ -189,7 +192,7 @@ function Pagination({
189192
}
190193

191194
return (
192-
<div className={className} {...rest}>
195+
<div className={className} ref={ref} {...rest}>
193196
<div className={`${prefix}--pagination__left`}>
194197
<label
195198
id={`${prefix}-pagination-select-${inputId}-count-label`}
@@ -268,7 +271,7 @@ function Pagination({
268271
</div>
269272
</div>
270273
);
271-
}
274+
});
272275

273276
Pagination.propTypes = {
274277
/**

‎packages/react/src/components/Pagination/next/__tests__/Pagination-test.js

+7
Original file line numberDiff line numberDiff line change
@@ -515,4 +515,11 @@ describe('Pagination', () => {
515515
});
516516
});
517517
});
518+
519+
it('should render with ref', () => {
520+
const ref = React.createRef();
521+
mount(<Pagination pageSizes={[10]} totalItems={5} ref={ref} />);
522+
523+
expect(ref.current).toHaveClass(`${prefix}--pagination`);
524+
});
518525
});

0 commit comments

Comments
 (0)
Please sign in to comment.