Skip to content

Commit

Permalink
fix(pagination): Disabled pagination link can no longer be clicked
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
pixelastic committed Apr 11, 2016
1 parent 043ad6b commit 88b567f
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 8 deletions.
1 change: 1 addition & 0 deletions src/components/Pagination/Pagination.js
Expand Up @@ -32,6 +32,7 @@ class Pagination extends React.Component {
ariaLabel={ariaLabel}
cssClasses={cssClasses}
handleClick={this.handleClick}
isDisabled={isDisabled}
key={label + pageNumber}
label={label}
pageNumber={pageNumber}
Expand Down
32 changes: 24 additions & 8 deletions src/components/Pagination/PaginationLink.js
Expand Up @@ -16,17 +16,32 @@ class PaginationLink extends React.Component {
}

render() {
let {cssClasses, label, ariaLabel, url} = this.props;
let {cssClasses, label, ariaLabel, url, isDisabled} = this.props;

let tagName = 'span';
let attributes = {
className: cssClasses.link,
dangerouslySetInnerHTML: {
__html: label
}
};

// "Enable" the element, by making it a link
if (!isDisabled) {
tagName = 'a';
attributes = {
...attributes,
ariaLabel,
href: url,
onClick: this.handleClick
};
}

let element = React.createElement(tagName, attributes);

return (
<li className={cssClasses.item}>
<a
ariaLabel={ariaLabel}
className={cssClasses.link}
dangerouslySetInnerHTML={{__html: label}}
href={url}
onClick={this.handleClick}
></a>
{element}
</li>
);
}
Expand All @@ -42,6 +57,7 @@ PaginationLink.propTypes = {
link: React.PropTypes.string
}),
handleClick: React.PropTypes.func.isRequired,
isDisabled: React.PropTypes.bool,
label: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
Expand Down
2 changes: 2 additions & 0 deletions src/components/Pagination/__tests__/Pagination-test.js
Expand Up @@ -71,6 +71,7 @@ describe('Pagination', () => {
ariaLabel={undefined}
cssClasses={{item: '', link: ''}}
handleClick={() => {}}
isDisabled={false}
key="test8"
label="test"
pageNumber={8}
Expand All @@ -93,6 +94,7 @@ describe('Pagination', () => {
ariaLabel={undefined}
cssClasses={{item: '', link: ''}}
handleClick={() => {}}
isDisabled
key="test8"
label="test"
pageNumber={8}
Expand Down

0 comments on commit 88b567f

Please sign in to comment.