From 2703194e484c43bf8ab8666ea87b37700c01aec7 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Sun, 25 Feb 2018 15:47:50 +0200 Subject: [PATCH] fix(Pagination): rework usage of MenuItem factory --- src/addons/Pagination/PaginationItem.d.ts | 3 ++ src/addons/Pagination/PaginationItem.js | 34 +++++++++------ .../addons/Pagination/PaginationItem-test.js | 42 +++++++++++++++++-- 3 files changed, 63 insertions(+), 16 deletions(-) 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) + }) }) })