couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject [3/3] fauxton commit: updated refs/heads/master to e01751f
Date Fri, 22 Jan 2016 09:07:43 GMT
make badges / filters reusable

the labels that were used for the filters are now two reusable
components: Badges and Basgefilter.

They also got some tests to make sure they work like expected.

PR: #622
PR-URL: https://github.com/apache/couchdb-fauxton/pull/622
Reviewed-By: Benjamin Keen <ben.keen@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/e01751f5
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/e01751f5
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/e01751f5

Branch: refs/heads/master
Commit: e01751f5fc2fdf939635bd96e6d4d9b0cd7e934f
Parents: a554efd
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Thu Jan 21 16:25:50 2016 +0100
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Fri Jan 22 10:09:44 2016 +0100

----------------------------------------------------------------------
 app/addons/components/assets/less/badges.less   | 11 +++
 .../components/assets/less/components.less      |  1 +
 .../components/react-components.react.jsx       | 71 ++++++++++++++++++++
 .../components/tests/badgesSpec.react.jsx       | 56 +++++++++++++++
 .../documents/changes/components.react.jsx      | 37 ++--------
 assets/less/fauxton.less                        |  8 ---
 6 files changed, 145 insertions(+), 39 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e01751f5/app/addons/components/assets/less/badges.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/badges.less b/app/addons/components/assets/less/badges.less
new file mode 100644
index 0000000..fe73c42
--- /dev/null
+++ b/app/addons/components/assets/less/badges.less
@@ -0,0 +1,11 @@
+
+.component-badgelist {
+  ul {
+    margin-left: 0;
+  }
+  li {
+    list-style-type: none;
+    float: left;
+    margin-left: 5px;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e01751f5/app/addons/components/assets/less/components.less
----------------------------------------------------------------------
diff --git a/app/addons/components/assets/less/components.less b/app/addons/components/assets/less/components.less
index d719075..9b452ea 100644
--- a/app/addons/components/assets/less/components.less
+++ b/app/addons/components/assets/less/components.less
@@ -18,3 +18,4 @@
 @import "loading-lines.less";
 @import "code-editor.less";
 @import "bulk-selector.less";
+@import "badges.less";

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e01751f5/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx b/app/addons/components/react-components.react.jsx
index a011b54..14dccfc 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -27,6 +27,75 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
   var componentStore = Stores.componentStore;
   var Modal = ReactBootstrap.Modal;
 
+  var BadgeList = React.createClass({
+
+    propTypes: {
+      elements: React.PropTypes.array.isRequired,
+      removeBadge: React.PropTypes.func.isRequired,
+    },
+
+    getDefaultProps: function () {
+      return {
+        getLabel: function (el) {
+          return el;
+        },
+
+        getId: function (el) {
+          return el;
+        }
+
+      };
+    },
+
+    getBadges: function () {
+      return this.props.elements.map(function (el, i) {
+        return <Badge
+          label={this.props.getLabel(el)}
+          key={i}
+          id={el}
+          remove={this.removeBadge} />;
+      }.bind(this));
+    },
+
+    removeBadge: function (label, el) {
+      this.props.removeBadge(label, el);
+    },
+
+    render: function () {
+      return (
+        <ul className="component-badgelist">
+          {this.getBadges()}
+        </ul>
+      );
+    }
+  });
+
+  var Badge = React.createClass({
+    propTypes: {
+      label: React.PropTypes.string.isRequired,
+      remove: React.PropTypes.func.isRequired
+    },
+
+    remove: function (e) {
+      e.preventDefault();
+      this.props.remove(this.props.label, this.props.id);
+    },
+
+    render: function () {
+      return (
+        <li className="component-badge">
+          <span className="label label-info">{this.props.label}</span>
+          <a
+            href="#"
+            className="label label-info js-remove-filter"
+            onClick={this.remove} data-bypass="true"
+          >
+            &times;
+          </a>
+        </li>
+      );
+    }
+  });
 
   var ToggleHeaderButton = React.createClass({
     getDefaultProps: function () {
@@ -1264,6 +1333,8 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
   });
 
   return {
+    BadgeList: BadgeList,
+    Badge: Badge,
     BulkActionComponent: BulkActionComponent,
     ConfirmButton: ConfirmButton,
     ToggleHeaderButton: ToggleHeaderButton,

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e01751f5/app/addons/components/tests/badgesSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/tests/badgesSpec.react.jsx b/app/addons/components/tests/badgesSpec.react.jsx
new file mode 100644
index 0000000..f711d34
--- /dev/null
+++ b/app/addons/components/tests/badgesSpec.react.jsx
@@ -0,0 +1,56 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+define([
+  'api',
+  'addons/components/react-components.react',
+
+  'testUtils',
+  'react'
+], function (FauxtonAPI, ReactComponents, utils, React) {
+
+  var assert = utils.assert;
+  var TestUtils = React.addons.TestUtils;
+
+  describe('Badges', function () {
+    var container, instance;
+    beforeEach(function () {
+      container = document.createElement('div');
+    });
+
+    afterEach(function () {
+      React.unmountComponentAtNode(React.findDOMNode(instance).parentNode);
+    });
+
+    it('renders a list of badges', function () {
+      instance = TestUtils.renderIntoDocument(
+        <ReactComponents.BadgeList elements={['foo', 'bar']} removeBadge={function ()
{}} />,
+        container
+      );
+
+      var $el = $(instance.getDOMNode());
+
+      assert.equal($el.find('.component-badge').length, 2);
+    });
+
+    it('supports custom label formatters', function () {
+      instance = TestUtils.renderIntoDocument(
+        <ReactComponents.BadgeList elements={['foo', 'bar']} removeBadge={function ()
{}} getLabel={function (el) { return el + 'foo'; }} />,
+        container
+      );
+
+      var $el = $(instance.getDOMNode());
+
+      assert.equal($el.find('.component-badge').text(), 'foofoo×barfoo×');
+    });
+
+  });
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e01751f5/app/addons/documents/changes/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/changes/components.react.jsx b/app/addons/documents/changes/components.react.jsx
index 6917b98..9d8ed98 100644
--- a/app/addons/documents/changes/components.react.jsx
+++ b/app/addons/documents/changes/components.react.jsx
@@ -17,12 +17,16 @@ define([
   'addons/documents/changes/actions',
   'addons/documents/changes/stores',
   'addons/fauxton/components.react',
+  'addons/components/react-components.react',
+
   'plugins/prettify'
-], function (app, FauxtonAPI, React, Actions, Stores, Components) {
+], function (app, FauxtonAPI, React, Actions, Stores, Components, ReactComponents) {
 
   var changesStore = Stores.changesStore;
   var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
+  var BadgeList = ReactComponents.BadgeList;
+
   // the top-level component for the Changes Filter section. Handles hiding/showing of the
filters form
   var ChangesHeaderController = React.createClass({
     getInitialState: function () {
@@ -118,12 +122,6 @@ define([
       Actions.removeFilter(label);
     },
 
-    getFilters: function () {
-      return _.map(this.state.filters, function (filter) {
-        return <Filter key={filter} label={filter} removeFilter={this.removeFilter} />;
-      }, this);
-    },
-
     addFilter: function (newFilter) {
       if (_.isEmpty(newFilter)) {
         return;
@@ -155,7 +153,7 @@ define([
               </div>
               <AddFilterForm tooltip={this.props.tooltip} filter={this.state.filter} addFilter={this.addFilter}
                 hasFilter={this.hasFilter} />
-              <ul className="filter-list">{this.getFilters()}</ul>
+              <BadgeList elements={this.state.filters} removeBadge={this.removeFilter}
/>
             </div>
             <div className="changes-auto-update">
             </div>
@@ -265,29 +263,6 @@ define([
     }
   });
 
-
-  var Filter = React.createClass({
-    propTypes: {
-      label: React.PropTypes.string.isRequired,
-      removeFilter: React.PropTypes.func.isRequired
-    },
-
-    removeFilter: function (e) {
-      e.preventDefault();
-      this.props.removeFilter(this.props.label);
-    },
-
-    render: function () {
-      return (
-        <li>
-          <span className="label label-info">{this.props.label}</span>
-          <a href="#" className="label label-info js-remove-filter" onClick={this.removeFilter}
data-bypass="true">&times;</a>
-        </li>
-      );
-    }
-  });
-
-
   var ChangesController = React.createClass({
     getInitialState: function () {
       return this.getStoreState();

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/e01751f5/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 1a36c96..a6ca34e 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -336,14 +336,6 @@ div.spinner {
   }
 }
 
-.js-filter {
-  ul {
-    margin-left: 0;
-  }
-  li {
-    list-style-type: none;
-  }
-}
 
 //---header--//
 #dashboard > header {


Mime
View raw message