Skip to content

Commit 88b567f

Browse files
committed
fix(pagination): Disabled pagination link can no longer be clicked
Fixes #974. `PaginationLinks` with the `isDisabled` props now render as `span` and not as `a`. We also remove the now unwanted `href`, `aria-label` and `onClick` props. There were no tests files for PaginationLink, and I did not added one. I'd like #948 to be merged before adding those kind of fine-grained tests.
1 parent 043ad6b commit 88b567f

File tree

3 files changed

+27
-8
lines changed

3 files changed

+27
-8
lines changed

src/components/Pagination/Pagination.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ class Pagination extends React.Component {
3232
ariaLabel={ariaLabel}
3333
cssClasses={cssClasses}
3434
handleClick={this.handleClick}
35+
isDisabled={isDisabled}
3536
key={label + pageNumber}
3637
label={label}
3738
pageNumber={pageNumber}

src/components/Pagination/PaginationLink.js

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,32 @@ class PaginationLink extends React.Component {
1616
}
1717

1818
render() {
19-
let {cssClasses, label, ariaLabel, url} = this.props;
19+
let {cssClasses, label, ariaLabel, url, isDisabled} = this.props;
20+
21+
let tagName = 'span';
22+
let attributes = {
23+
className: cssClasses.link,
24+
dangerouslySetInnerHTML: {
25+
__html: label
26+
}
27+
};
28+
29+
// "Enable" the element, by making it a link
30+
if (!isDisabled) {
31+
tagName = 'a';
32+
attributes = {
33+
...attributes,
34+
ariaLabel,
35+
href: url,
36+
onClick: this.handleClick
37+
};
38+
}
39+
40+
let element = React.createElement(tagName, attributes);
2041

2142
return (
2243
<li className={cssClasses.item}>
23-
<a
24-
ariaLabel={ariaLabel}
25-
className={cssClasses.link}
26-
dangerouslySetInnerHTML={{__html: label}}
27-
href={url}
28-
onClick={this.handleClick}
29-
></a>
44+
{element}
3045
</li>
3146
);
3247
}
@@ -42,6 +57,7 @@ PaginationLink.propTypes = {
4257
link: React.PropTypes.string
4358
}),
4459
handleClick: React.PropTypes.func.isRequired,
60+
isDisabled: React.PropTypes.bool,
4561
label: React.PropTypes.oneOfType([
4662
React.PropTypes.string,
4763
React.PropTypes.number

src/components/Pagination/__tests__/Pagination-test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ describe('Pagination', () => {
7171
ariaLabel={undefined}
7272
cssClasses={{item: '', link: ''}}
7373
handleClick={() => {}}
74+
isDisabled={false}
7475
key="test8"
7576
label="test"
7677
pageNumber={8}
@@ -93,6 +94,7 @@ describe('Pagination', () => {
9394
ariaLabel={undefined}
9495
cssClasses={{item: '', link: ''}}
9596
handleClick={() => {}}
97+
isDisabled
9698
key="test8"
9799
label="test"
98100
pageNumber={8}

0 commit comments

Comments
 (0)