Repository: couchdb-fauxton Updated Branches: refs/heads/master e6450a0d0 -> e5f9f9da0
Updates to PerPageSelector component This makes a couple of small updates to the PerPageSelector component to allow for a custom list of options, and a custom label. Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/e5f9f9da Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/e5f9f9da Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/e5f9f9da Branch: refs/heads/master Commit: e5f9f9da0c44f91d54f546b7789a6784d3b78061 Parents: e6450a0 Author: Ben Keen <[email protected]> Authored: Sun Jan 31 20:35:17 2016 -0800 Committer: Ben Keen <[email protected]> Committed: Mon Feb 1 10:10:52 2016 -0800 ---------------------------------------------------------------------- .../documents/pagination/pagination.react.jsx | 29 ++++++++++---- .../tests/pagination.componentSpec.react.jsx | 41 +++++++++++++++++--- 2 files changed, 57 insertions(+), 13 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e5f9f9da/app/addons/documents/pagination/pagination.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/pagination/pagination.react.jsx b/app/addons/documents/pagination/pagination.react.jsx index 7a6ca7a..4d73257 100644 --- a/app/addons/documents/pagination/pagination.react.jsx +++ b/app/addons/documents/pagination/pagination.react.jsx @@ -93,23 +93,38 @@ define([ var PerPageSelector = React.createClass({ + propTypes: { + perPage: React.PropTypes.number.isRequired, + perPageChange: React.PropTypes.func.isRequired, + label: React.PropTypes.string, + options: React.PropTypes.array + }, + + getDefaultProps: function () { + return { + label: 'Documents per page: ', + options: [5, 10, 20, 30, 50, 100] + }; + }, + perPageChange: function (e) { var perPage = parseInt(e.target.value, 10); this.props.perPageChange(perPage); }, + getOptions: function () { + return _.map(this.props.options, function (i) { + return (<option value={i} key={i}>{i}</option>); + }); + }, + render: function () { return ( <div id="per-page"> <label htmlFor="select-per-page" className="drop-down inline"> - Documents per page: + {this.props.label} <select id="select-per-page" onChange={this.perPageChange} value={this.props.perPage.toString()} className="input-small"> - <option value="5">5</option> - <option value="10">10</option> - <option value="20">20</option> - <option value="30">30</option> - <option value="50">50</option> - <option value="100">100</option> + {this.getOptions()} </select> </label> </div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e5f9f9da/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx index afeaaac..4b31a06 100644 --- a/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx +++ b/app/addons/documents/pagination/tests/pagination.componentSpec.react.jsx @@ -30,12 +30,6 @@ define([ beforeEach(function () { perPageChange = sinon.spy(); container = document.createElement('div'); - selectorEl = TestUtils.renderIntoDocument( - <Views.PerPageSelector - perPageChange={perPageChange} - perPage={10} />, - container - ); }); afterEach(function () { @@ -43,6 +37,12 @@ define([ }); it('on new select calls callback with new page size', function () { + selectorEl = TestUtils.renderIntoDocument( + <Views.PerPageSelector + perPageChange={perPageChange} + perPage={10} />, + container + ); var selectEl = $(ReactDOM.findDOMNode(selectorEl)).find('#select-per-page')[0]; var perPage = 5; TestUtils.Simulate.change(selectEl, { @@ -53,6 +53,35 @@ define([ assert.ok(perPageChange.calledWith(perPage)); }); + + it('applies custom label', function () { + var customLabel = 'alphabet soup'; + selectorEl = TestUtils.renderIntoDocument( + <Views.PerPageSelector + label={customLabel} + perPageChange={perPageChange} + perPage={10} />, + container + ); + var regexp = new RegExp(customLabel); + assert.ok(regexp.test(React.findDOMNode(selectorEl).outerHTML)); + }); + + it('applies custom options', function () { + selectorEl = TestUtils.renderIntoDocument( + <Views.PerPageSelector + options={[1, 2, 3]} + perPageChange={perPageChange} + perPage={10} />, + container + ); + var options = $(React.findDOMNode(selectorEl)).find('option'); + assert.equal(options.length, 3); + assert.equal(options[0].innerHTML, "1"); + assert.equal(options[1].innerHTML, "2"); + assert.equal(options[2].innerHTML, "3"); + }); + }); describe('TableControls', function () {
