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 2d8cabf
Date Fri, 24 Jul 2015 18:46:28 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 47ddf4c01 -> 2d8cabfc2


Add callback for when Tray closed by clicking off it

The Tray component has custom callbacks for explicit hide/show
methods, but not when the Tray is closed by clicking outside of
it. This is useful when using a Tray within another component
and the visiblity status is stored in a store. We need to track
the auto close event to update the store.


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

Branch: refs/heads/master
Commit: 2d8cabfc2aa61dbf34a3f347e440da0d1d17ac20
Parents: 47ddf4c
Author: Ben Keen <ben.keen@gmail.com>
Authored: Fri Jul 24 10:40:58 2015 -0700
Committer: Ben Keen <ben.keen@gmail.com>
Committed: Fri Jul 24 11:45:41 2015 -0700

----------------------------------------------------------------------
 app/addons/fauxton/components.react.jsx         | 16 +++++++-
 .../fauxton/tests/componentsSpec.react.jsx      | 43 +++++++++++++++++++-
 2 files changed, 56 insertions(+), 3 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2d8cabfc/app/addons/fauxton/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.react.jsx b/app/addons/fauxton/components.react.jsx
index a08f8a6..fa843c0 100644
--- a/app/addons/fauxton/components.react.jsx
+++ b/app/addons/fauxton/components.react.jsx
@@ -14,7 +14,10 @@ define([
   'app',
   'api',
   'react',
-  'plugins/zeroclipboard/ZeroClipboard'
+  'plugins/zeroclipboard/ZeroClipboard',
+
+  // needed to run the test individually. Don't remove
+  'velocity.ui'
 ],
 
 function (app, FauxtonAPI, React, ZeroClipboard) {
@@ -120,6 +123,16 @@ function (app, FauxtonAPI, React, ZeroClipboard) {
   var _NextTrayInternalId = 0;
   var Tray = React.createClass({
 
+    propTypes: {
+      onAutoHide: React.PropTypes.func
+    },
+
+    getDefaultProps: function () {
+      return {
+        onAutoHide: function () { }
+      };
+    },
+
     getInitialState: function () {
       return {
         show: false,
@@ -148,6 +161,7 @@ function (app, FauxtonAPI, React, ZeroClipboard) {
         var tgt = $(e.target);
         if (this.state.show && tgt.closest('.tray').length === 0) {
           this.hide();
+          this.props.onAutoHide();
         }
       }.bind(this));
     },

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/2d8cabfc/app/addons/fauxton/tests/componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/tests/componentsSpec.react.jsx b/app/addons/fauxton/tests/componentsSpec.react.jsx
index f03d065..f9b1ba3 100644
--- a/app/addons/fauxton/tests/componentsSpec.react.jsx
+++ b/app/addons/fauxton/tests/componentsSpec.react.jsx
@@ -19,19 +19,26 @@ define([
   var assert = utils.assert;
   var TestUtils = React.addons.TestUtils;
 
+
   describe('Tray', function () {
 
-    var container, trayEl, done;
+    var container, trayEl, oldToggleSpeed;
 
     beforeEach(function () {
       container = document.createElement('div');
+
       // when we want to control the diff, we have to render directly
       trayEl = React.render(<Views.Tray className="traytest" />, container);
-      done = sinon.spy();
+
+      oldToggleSpeed = FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED;
+
+      // makes velocity toggle immediately
+      FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED = 0;
     });
 
     afterEach(function () {
       React.unmountComponentAtNode(container);
+      FauxtonAPI.constants.MISC.TRAY_TOGGLE_SPEED = oldToggleSpeed;
     });
 
     it('renders trayid and custom classes', function () {
@@ -76,6 +83,38 @@ define([
       });
     });
 
+    it('calls props.onAutoHide when closing tray by clicking outside of it', function ()
{
+      var container = document.createElement('div');
+      var onClose = function () { };
+      var spy = sinon.spy();
+
+      var wrapper = React.createClass({
+
+        runTest: function () {
+          var trayEl = this.refs.tray;
+          var externalEl = this.refs.externalElement;
+          trayEl.show(function () {
+            TestUtils.Simulate.click(externalEl.getDOMNode());
+            assert.ok(spy.calledOnce);
+          });
+        },
+
+        render: function () {
+          return (
+            <div>
+              <p ref="externalElement">Click me!</p>
+              <Views.Tray ref="tray" onAutoHide={onClose} />
+            </div>
+          );
+        }
+      });
+
+      var reactEl = React.render(React.createElement(wrapper), container);
+      reactEl.runTest();
+
+      React.unmountComponentAtNode(container);
+    });
+
   });
 
   describe('Pagination', function () {


Mime
View raw message