diff --git a/example/example.js b/example/example.js index db829c8e..b9d9c343 100644 --- a/example/example.js +++ b/example/example.js @@ -96,6 +96,7 @@ const Example = React.createClass({ onChange={selected => this.setState({selected})} onInputChange={text => this.setState({text})} options={largeDataSet ? bigData : states} + paginationText="Something different" placeholder="Choose a state..." ref="typeahead" selected={selected} diff --git a/package.json b/package.json index 7c79405b..d1cb00e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-bootstrap-typeahead", - "version": "0.8.0", + "version": "0.8.1", "description": "React-based typeahead using the Bootstrap theme", "main": "lib/index.js", "directories": { diff --git a/src/Typeahead.react.js b/src/Typeahead.react.js index 68de88ac..6f928281 100644 --- a/src/Typeahead.react.js +++ b/src/Typeahead.react.js @@ -236,6 +236,7 @@ const Typeahead = React.createClass({ 'emptyLabel', 'maxHeight', 'newSelectionPrefix', + 'paginationText', 'renderMenuItemChildren', ]); diff --git a/test/TypeaheadMenuSpec.js b/test/TypeaheadMenuSpec.js index cc1cc6a3..eb0f0b35 100644 --- a/test/TypeaheadMenuSpec.js +++ b/test/TypeaheadMenuSpec.js @@ -1,4 +1,5 @@ import {expect} from 'chai'; +import {range} from 'lodash'; import React from 'react'; import ReactTestUtils from 'react/lib/ReactTestUtils'; @@ -7,6 +8,8 @@ import TypeaheadMenu from '../src/TypeaheadMenu.react'; import states from '../example/exampleData'; +const bigData = range(0, 300).map(option => ({label: option.toString()})); + function getMenuInstance(props={}) { return ReactTestUtils.renderIntoDocument( ', () => { expect(menuItems[0].props.children).to.equal('No matches found.'); }); + it('paginates long data sets', () => { + const instance = getMenuInstance({options: bigData}); + const paginatorNode = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, + 'bootstrap-typeahead-menu-paginator' + ); + expect(paginatorNode).to.exist; + expect(paginatorNode.firstChild.innerHTML).to.equal( + 'Display additional results...' + ); + }); + + it('displays custom pagination text', () => { + const paginationText = 'See All'; + const instance = getMenuInstance({ + options: bigData, + paginationText, + }); + const paginatorNode = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, + 'bootstrap-typeahead-menu-paginator' + ); + expect(paginatorNode.firstChild.innerHTML).to.equal(paginationText); + }); + }); diff --git a/test/TypeaheadSpec.js b/test/TypeaheadSpec.js index 84f59763..16ff06ae 100644 --- a/test/TypeaheadSpec.js +++ b/test/TypeaheadSpec.js @@ -1,4 +1,5 @@ import {expect} from 'chai'; +import {range} from 'lodash'; import React from 'react'; import ReactTestUtils from 'react/lib/ReactTestUtils'; @@ -102,4 +103,25 @@ describe('', () => { expect(input.props.disabled).to.be.true; }); + it('should display a menu item for pagination', () => { + const options = range(0, 300).map(option => ({label: option.toString()})); + const paginationText = 'See More'; + const instance = ReactTestUtils.renderIntoDocument( + + ); + const inputNode = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, + 'bootstrap-typeahead-input-main' + ); + ReactTestUtils.Simulate.focus(inputNode); + + const paginatorNode = ReactTestUtils.findRenderedDOMComponentWithClass( + instance, + 'bootstrap-typeahead-menu-paginator' + ); + + expect(paginatorNode).to.exist; + expect(paginatorNode.firstChild.innerHTML).to.equal(paginationText); + }); + });