[added] buttonComponentClass prop for Pagination

wrap pagination buttons in a custom element

usage: <Pagination ... buttonComponentClass={ButtonWrapper}/>
where ButtonWrapper is your custom element

default behavior (no prop given) remains unchanged

note: Bootstrap css targets .pagination > li > a

src/Pagination.js

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import PaginationButton from './PaginationButton';
+import CustomPropTypes from './utils/CustomPropTypes';
+import SafeAnchor from './SafeAnchor';
 
 const Pagination = React.createClass({
  mixins: [BootstrapMixin],
@@ -15,7 +17,11 @@ const Pagination = React.createClass({
  last: React.PropTypes.bool,
  prev: React.PropTypes.bool,
  next: React.PropTypes.bool,
- onSelect: React.PropTypes.func
+ onSelect: React.PropTypes.func,
+ /**
+ * You can use a custom element for the buttons
+ */
+ buttonComponentClass: CustomPropTypes.elementType
  },
 
  getDefaultProps() {
@@ -28,6 +34,7 @@ const Pagination = React.createClass({
  prev: false,
  next: false,
  ellipsis: true,
+ buttonComponentClass: SafeAnchor,
  bsClass: 'pagination'
  };
  },
@@ -40,7 +47,8 @@ const Pagination = React.createClass({
  activePage,
  items,
  onSelect,
- ellipsis
+ ellipsis,
+ buttonComponentClass
  } = this.props;
 
  if(maxButtons){
@@ -68,7 +76,8 @@ const Pagination = React.createClass({
  key={pagenumber}
  eventKey={pagenumber}
  active={pagenumber === activePage}
- onSelect={onSelect}>
+ onSelect={onSelect}
+ buttonComponentClass={buttonComponentClass}>
  {pagenumber}
  </PaginationButton>
  );
@@ -78,7 +87,8 @@ const Pagination = React.createClass({
  pageButtons.push(
  <PaginationButton
  key='ellipsis'
- disabled>
+ disabled
+ buttonComponentClass={buttonComponentClass}>
  <span aria-label='More'>...</span>
  </PaginationButton>
  );
@@ -97,7 +107,8 @@ const Pagination = React.createClass({
  key='prev'
  eventKey={this.props.activePage - 1}
  disabled={this.props.activePage === 1}
- onSelect={this.props.onSelect}>
+ onSelect={this.props.onSelect}
+ buttonComponentClass={this.props.buttonComponentClass}>
  <span aria-label='Previous'>&lsaquo;</span>
  </PaginationButton>
  );
@@ -113,7 +124,8 @@ const Pagination = React.createClass({
  key='next'
  eventKey={this.props.activePage + 1}
  disabled={this.props.activePage >= this.props.items}
- onSelect={this.props.onSelect}>
+ onSelect={this.props.onSelect}
+ buttonComponentClass={this.props.buttonComponentClass}>
  <span aria-label='Next'>&rsaquo;</span>
  </PaginationButton>
  );
@@ -129,7 +141,8 @@ const Pagination = React.createClass({
  key='first'
  eventKey={1}
  disabled={this.props.activePage === 1 }
- onSelect={this.props.onSelect}>
+ onSelect={this.props.onSelect}
+ buttonComponentClass={this.props.buttonComponentClass}>
  <span aria-label='First'>&laquo;</span>
  </PaginationButton>
  );
@@ -145,7 +158,8 @@ const Pagination = React.createClass({
  key='last'
  eventKey={this.props.items}
  disabled={this.props.activePage >= this.props.items}
- onSelect={this.props.onSelect}>
+ onSelect={this.props.onSelect}
+ buttonComponentClass={this.props.buttonComponentClass}>
  <span aria-label='Last'>&raquo;</span>
  </PaginationButton>
  );

src/PaginationButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import createSelectedEvent from './utils/createSelectedEvent';
-import SafeAnchor from './SafeAnchor';
+import CustomPropTypes from './utils/CustomPropTypes';
 
 const PaginationButton = React.createClass({
  mixins: [BootstrapMixin],
@@ -15,7 +15,11 @@ const PaginationButton = React.createClass({
  ]),
  onSelect: React.PropTypes.func,
  disabled: React.PropTypes.bool,
- active: React.PropTypes.bool
+ active: React.PropTypes.bool,
+ /**
+ * You can use a custom element for this component
+ */
+ buttonComponentClass: CustomPropTypes.elementType
  },
 
  getDefaultProps() {
@@ -44,9 +48,11 @@ const PaginationButton = React.createClass({
  ...anchorProps
  } = this.props;
 
+ let ButtonComponentClass = this.props.buttonComponentClass;
+
  return (
  <li className={classNames(className, classes)}>
- <SafeAnchor
+ <ButtonComponentClass
  {...anchorProps}
  onClick={this.handleClick} />
  </li>

test/OverlayTriggerSpec.js

@@ -49,7 +49,7 @@ describe('OverlayTrigger', function() {
  const overlayTrigger = React.findDOMNode(instance);
  ReactTestUtils.Simulate.click(overlayTrigger);
 
- expect(document.getElementsByClassName('test-overlay').length).to.equal(1)
+ expect(document.getElementsByClassName('test-overlay').length).to.equal(1);
  });
 
  it('Should pass transition callbacks to Transition', function (done) {

test/PaginationSpec.js

@@ -114,4 +114,65 @@ describe('Pagination', function () {
  assert.include(React.findDOMNode(pageButtons[0]).className, 'disabled');
  assert.include(React.findDOMNode(pageButtons[1]).className, 'disabled');
  });
+
+ it('Should wrap buttons in SafeAnchor when no buttonComponentClass prop is supplied', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+ <Pagination
+ maxButtons={2}
+ activePage={1}
+ items={2} />
+ );
+ let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
+
+ let tagName = 'A';
+
+ assert.equal(React.findDOMNode(pageButtons[0]).children[0].tagName, tagName);
+ assert.equal(React.findDOMNode(pageButtons[1]).children[0].tagName, tagName);
+
+ assert.equal(React.findDOMNode(pageButtons[0]).children[0].getAttribute('href'), '');
+ assert.equal(React.findDOMNode(pageButtons[1]).children[0].getAttribute('href'), '');
+ });
+
+ it('Should wrap each button in a buttonComponentClass when it is present', function () {
+ class DummyElement extends React.Component {
+ render() {
+ return <div {...this.props}/>;
+ }
+ }
+
+ let instance = ReactTestUtils.renderIntoDocument(
+ <Pagination
+ maxButtons={2}
+ activePage={1}
+ items={2}
+ buttonComponentClass={DummyElement} />
+ );
+ let pageButtons = ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'li');
+
+ let tagName = 'DIV';
+
+ assert.equal(React.findDOMNode(pageButtons[0]).children[0].tagName, tagName);
+ assert.equal(React.findDOMNode(pageButtons[1]).children[0].tagName, tagName);
+ });
+
+ it('Should call onSelect with custom buttonComponentClass', function (done) {
+ class DummyElement extends React.Component {
+ render() {
+ return <div {...this.props}/>;
+ }
+ }
+
+ function onSelect(event, selectedEvent) {
+ assert.equal(selectedEvent.eventKey, 3);
+ done();
+ }
+
+ let instance = ReactTestUtils.renderIntoDocument(
+ <Pagination items={5} onSelect={onSelect} buttonComponentClass={DummyElement}/>
+ );
+
+ ReactTestUtils.Simulate.click(
+ ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, 'div')[2]
+ );
+ });
 });