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 <[email protected]> Authored: Fri Jul 24 10:40:58 2015 -0700 Committer: Ben Keen <[email protected]> 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 () {
