couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From benk...@apache.org
Subject fauxton commit: updated refs/heads/master to e5f9f9d
Date Mon, 01 Feb 2016 21:59:10 GMT
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 <ben.keen@gmail.com>
Authored: Sun Jan 31 20:35:17 2016 -0800
Committer: Ben Keen <ben.keen@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: &nbsp;
+              {this.props.label} &nbsp;
               <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 () {


Mime
View raw message