diff --git a/src/addons/Pagination/PaginationItem.d.ts b/src/addons/Pagination/PaginationItem.d.ts
index 9777c65709..c8311a5dc6 100644
--- a/src/addons/Pagination/PaginationItem.d.ts
+++ b/src/addons/Pagination/PaginationItem.d.ts
@@ -9,6 +9,9 @@ export interface PaginationItemProps {
/** A pagination item can have an aria label. */
ariaLabel?: string;
+ /** A pagination item can be disabled. */
+ disabled?: boolean;
+
/**
* Called on click.
*
diff --git a/src/addons/Pagination/PaginationItem.js b/src/addons/Pagination/PaginationItem.js
index 60fe2bae88..1239000ef1 100644
--- a/src/addons/Pagination/PaginationItem.js
+++ b/src/addons/Pagination/PaginationItem.js
@@ -20,6 +20,9 @@ class PaginationItem extends Component {
/** A pagination item can have an aria label. */
ariaLabel: PropTypes.string,
+ /** A pagination item can be disabled. */
+ disabled: PropTypes.bool,
+
/**
* Called on click.
*
@@ -64,19 +67,26 @@ class PaginationItem extends Component {
if (keyboardKey.getCode(e) === keyboardKey.Enter) _.invoke(this.props, 'onClick', e, this.props)
}
+ handleOverrides = () => ({
+ onClick: this.handleClick,
+ onKeyDown: this.handleKeyDown,
+ })
+
render() {
- const { active, ariaLabel, type, ...rest } = this.props
- const disabled = rest.disabled || type === 'ellipsisItem'
-
- return MenuItem.create({
- ...rest,
- active,
- 'aria-current': active,
- 'aria-label': ariaLabel,
- disabled,
- onClick: this.handleClick,
- onKeyDown: this.handleKeyDown,
- tabIndex: disabled ? -1 : 0,
+ const { active, ariaLabel, type } = this.props
+ const disabled = this.props.disabled || type === 'ellipsisItem'
+
+ return MenuItem.create(this.props, {
+ defaultProps: {
+ active,
+ disabled,
+ 'aria-current': active,
+ 'aria-label': ariaLabel,
+ onClick: this.handleClick,
+ onKeyDown: this.handleKeyDown,
+ tabIndex: disabled ? -1 : 0,
+ },
+ overrideProps: this.handleOverrides,
})
}
}
diff --git a/test/specs/addons/Pagination/PaginationItem-test.js b/test/specs/addons/Pagination/PaginationItem-test.js
index 1f8292a7fd..3cc3653ec4 100644
--- a/test/specs/addons/Pagination/PaginationItem-test.js
+++ b/test/specs/addons/Pagination/PaginationItem-test.js
@@ -8,16 +8,45 @@ describe('PaginationItem', () => {
common.isConformant(PaginationItem)
common.implementsCreateMethod(PaginationItem)
+ describe('active', () => {
+ it('is "undefined" by default', () => {
+ shallow()
+ .should.have.not.prop('active')
+ })
+
+ it('can pass its value', () => {
+ shallow()
+ .should.have.prop('active', true)
+ })
+ })
+
+ describe('aria-current', () => {
+ it('matches the values of "active" prop by default', () => {
+ shallow()
+ .should.have.prop('aria-current', true)
+ })
+
+ it('can be overridden', () => {
+ shallow()
+ .should.have.prop('aria-current', false)
+ })
+ })
+
describe('disabled', () => {
- it('is false by default', () => {
+ it('is "false" by default', () => {
shallow()
.should.have.prop('disabled', false)
})
- it('is true when "type" is "ellipsisItem"', () => {
+ it('is "true" when "type" is "ellipsisItem"', () => {
shallow()
.should.have.prop('disabled', true)
})
+
+ it('can be overridden', () => {
+ shallow()
+ .should.have.prop('disabled', true)
+ })
})
describe('onClick', () => {
@@ -68,14 +97,19 @@ describe('PaginationItem', () => {
})
describe('tabIndex', () => {
- it('is 0 by default', () => {
+ it('is "0" by default', () => {
shallow()
.should.have.prop('tabIndex', 0)
})
- it('is -1 when "type" is "ellipsisItem"', () => {
+ it('is "-1" when "type" is "ellipsisItem"', () => {
shallow()
.should.have.prop('tabIndex', -1)
})
+
+ it('can be overridden', () => {
+ shallow()
+ .should.have.prop('tabIndex', 5)
+ })
})
})