fix(Pagination): rework usage of MenuItem factory

Semantic-Org · Feb 25, 2018 · 2703194 · 2703194
1 parent 065dc18
commit 2703194
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 16 deletions.
diff --git 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
@@ -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
@@ -8,16 +8,45 @@ describe('PaginationItem', () => {
   common.isConformant(PaginationItem)
   common.implementsCreateMethod(PaginationItem)
 
+  describe('active', () => {
+    it('is "undefined" by default', () => {
+      shallow(<PaginationItem />)
+        .should.have.not.prop('active')
+    })
+
+    it('can pass its value', () => {
+      shallow(<PaginationItem active />)
+        .should.have.prop('active', true)
+    })
+  })
+
+  describe('aria-current', () => {
+    it('matches the values of "active" prop by default', () => {
+      shallow(<PaginationItem active />)
+        .should.have.prop('aria-current', true)
+    })
+
+    it('can be overridden', () => {
+      shallow(<PaginationItem active aria-current={false} />)
+        .should.have.prop('aria-current', false)
+    })
+  })
+
   describe('disabled', () => {
-    it('is false by default', () => {
+    it('is "false" by default', () => {
       shallow(<PaginationItem />)
         .should.have.prop('disabled', false)
     })
 
-    it('is true when "type" is "ellipsisItem"', () => {
+    it('is "true" when "type" is "ellipsisItem"', () => {
       shallow(<PaginationItem type='ellipsisItem' />)
         .should.have.prop('disabled', true)
     })
+
+    it('can be overridden', () => {
+      shallow(<PaginationItem disabled />)
+        .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(<PaginationItem />)
         .should.have.prop('tabIndex', 0)
     })
 
-    it('is -1 when "type" is "ellipsisItem"', () => {
+    it('is "-1" when "type" is "ellipsisItem"', () => {
       shallow(<PaginationItem type='ellipsisItem' />)
         .should.have.prop('tabIndex', -1)
     })
+
+    it('can be overridden', () => {
+      shallow(<PaginationItem tabIndex={5} />)
+        .should.have.prop('tabIndex', 5)
+    })
   })
 })