You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by be...@apache.org on 2016/02/01 22:59:10 UTC
fauxton commit: updated refs/heads/master to e5f9f9d
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 <be...@gmail.com>
Authored: Sun Jan 31 20:35:17 2016 -0800
Committer: Ben Keen <be...@gmail.com>
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 () {