From 4bed1067a1326f58960adaef878425b854aa17ca Mon Sep 17 00:00:00 2001 From: refaelos Date: Wed, 25 Jan 2017 22:16:10 +0200 Subject: [PATCH 1/6] Added option to add exception classes or Ids for the outside click --- index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 725208f..b8b3418 100644 --- a/index.js +++ b/index.js @@ -3,11 +3,12 @@ import React, { Component, PropTypes } from 'react' export default class ClickOutside extends Component { static propTypes = { - onClickOutside: PropTypes.func.isRequired + onClickOutside: PropTypes.func.isRequired, + exceptions: PropTypes.array }; render() { - const { children, onClickOutside, ...props } = this.props + const { children, onClickOutside, exceptions, ...props } = this.props return
this.container = ref}>{children}
} @@ -20,8 +21,11 @@ export default class ClickOutside extends Component { } handle = e => { - const { onClickOutside } = this.props + const { onClickOutside, exceptions } = this.props + const exceptionsApproved = exceptions.some((except) => { + return ![e.target.className, e.target.id].includes(except); + }); const el = this.container - if (!el.contains(e.target)) onClickOutside(e) + if (!el.contains(e.target) && exceptionsApproved) onClickOutside(e) }; } From 39dfdfacb23f687283e633ace0992c704aa857a9 Mon Sep 17 00:00:00 2001 From: refaelos Date: Sun, 29 Jan 2017 10:38:27 +0200 Subject: [PATCH 2/6] built src file --- build/index.js | 74 ++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 54 insertions(+), 20 deletions(-) diff --git a/build/index.js b/build/index.js index df19533..05397ff 100644 --- a/build/index.js +++ b/build/index.js @@ -4,13 +4,19 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _react2 = require('react'); + +var _react3 = _interopRequireDefault(_react2); + +var _reactTransformHmr3 = require('react-transform-hmr'); + +var _reactTransformHmr4 = _interopRequireDefault(_reactTransformHmr3); + var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); +var _class, _temp2; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -22,11 +28,30 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var ClickOutside = function (_Component) { +var _components = { + ClickOutside: { + displayName: 'ClickOutside' + } +}; + +var _reactTransformHmr2 = (0, _reactTransformHmr4.default)({ + filename: 'index.js', + components: _components, + locals: [module], + imports: [_react3.default] +}); + +function _wrapComponent(id) { + return function (Component) { + return _reactTransformHmr2(Component, id); + }; +} + +var ClickOutside = _wrapComponent('ClickOutside')((_temp2 = _class = function (_Component) { _inherits(ClickOutside, _Component); function ClickOutside() { - var _Object$getPrototypeO; + var _ref; var _temp, _this, _ret; @@ -36,26 +61,35 @@ var ClickOutside = function (_Component) { args[_key] = arguments[_key]; } - return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ClickOutside)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handle = function (e) { - var onClickOutside = _this.props.onClickOutside; + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ClickOutside.__proto__ || Object.getPrototypeOf(ClickOutside)).call.apply(_ref, [this].concat(args))), _this), _this.handle = function (e) { + var _this$props = _this.props, + onClickOutside = _this$props.onClickOutside, + exceptions = _this$props.exceptions; - var el = _this.refs.container; - if (!el.contains(e.target)) onClickOutside(e); + var exceptionsApproved = exceptions.some(function (except) { + return ![e.target.className, e.target.id].includes(except); + }); + var el = _this.container; + if (!el.contains(e.target) && exceptionsApproved) onClickOutside(e); }, _temp), _possibleConstructorReturn(_this, _ret); } _createClass(ClickOutside, [{ key: 'render', value: function render() { - var _props = this.props; - var children = _props.children; - var onClickOutside = _props.onClickOutside; + var _this2 = this; - var props = _objectWithoutProperties(_props, ['children', 'onClickOutside']); + var _props = this.props, + children = _props.children, + onClickOutside = _props.onClickOutside, + exceptions = _props.exceptions, + props = _objectWithoutProperties(_props, ['children', 'onClickOutside', 'exceptions']); - return _react2.default.createElement( + return _react3.default.createElement( 'div', - _extends({}, props, { ref: 'container' }), + _extends({}, props, { ref: function ref(_ref2) { + return _this2.container = _ref2; + } }), children ); } @@ -72,9 +106,9 @@ var ClickOutside = function (_Component) { }]); return ClickOutside; -}(_react.Component); +}(_react2.Component), _class.propTypes = { + onClickOutside: _react2.PropTypes.func.isRequired, + exceptions: _react2.PropTypes.array +}, _temp2)); -ClickOutside.propTypes = { - onClickOutside: _react.PropTypes.func.isRequired -}; -exports.default = ClickOutside; \ No newline at end of file +exports.default = ClickOutside; From eff2e493b463b0698f559f550d2dec258951857f Mon Sep 17 00:00:00 2001 From: refaelos Date: Sun, 29 Jan 2017 10:50:52 +0200 Subject: [PATCH 3/6] built src file again with production env --- build/index.js | 44 ++++++++++---------------------------------- 1 file changed, 10 insertions(+), 34 deletions(-) diff --git a/build/index.js b/build/index.js index 05397ff..8cc7486 100644 --- a/build/index.js +++ b/build/index.js @@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _react2 = require('react'); - -var _react3 = _interopRequireDefault(_react2); - -var _reactTransformHmr3 = require('react-transform-hmr'); - -var _reactTransformHmr4 = _interopRequireDefault(_reactTransformHmr3); - var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _class, _temp2; +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -28,26 +22,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var _components = { - ClickOutside: { - displayName: 'ClickOutside' - } -}; - -var _reactTransformHmr2 = (0, _reactTransformHmr4.default)({ - filename: 'index.js', - components: _components, - locals: [module], - imports: [_react3.default] -}); - -function _wrapComponent(id) { - return function (Component) { - return _reactTransformHmr2(Component, id); - }; -} - -var ClickOutside = _wrapComponent('ClickOutside')((_temp2 = _class = function (_Component) { +var ClickOutside = function (_Component) { _inherits(ClickOutside, _Component); function ClickOutside() { @@ -85,7 +60,7 @@ var ClickOutside = _wrapComponent('ClickOutside')((_temp2 = _class = function (_ exceptions = _props.exceptions, props = _objectWithoutProperties(_props, ['children', 'onClickOutside', 'exceptions']); - return _react3.default.createElement( + return _react2.default.createElement( 'div', _extends({}, props, { ref: function ref(_ref2) { return _this2.container = _ref2; @@ -106,9 +81,10 @@ var ClickOutside = _wrapComponent('ClickOutside')((_temp2 = _class = function (_ }]); return ClickOutside; -}(_react2.Component), _class.propTypes = { - onClickOutside: _react2.PropTypes.func.isRequired, - exceptions: _react2.PropTypes.array -}, _temp2)); +}(_react.Component); +ClickOutside.propTypes = { + onClickOutside: _react.PropTypes.func.isRequired, + exceptions: _react.PropTypes.array +}; exports.default = ClickOutside; From 0a337a4e52ff103e38f9c4fa9e6ef62d6588d20c Mon Sep 17 00:00:00 2001 From: refaelos Date: Sun, 12 Feb 2017 00:12:52 +0200 Subject: [PATCH 4/6] checking that exceptions is not undefined --- index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index b8b3418..c7632fa 100644 --- a/index.js +++ b/index.js @@ -22,9 +22,11 @@ export default class ClickOutside extends Component { handle = e => { const { onClickOutside, exceptions } = this.props - const exceptionsApproved = exceptions.some((except) => { - return ![e.target.className, e.target.id].includes(except); - }); + if (exceptions) { + const exceptionsApproved = exceptions.some((except) => { + return ![e.target.className, e.target.id].includes(except); + }); + } const el = this.container if (!el.contains(e.target) && exceptionsApproved) onClickOutside(e) }; From 25ba83081dada21a7b6539f4eb4d4c685a8cb66e Mon Sep 17 00:00:00 2001 From: refaelos Date: Mon, 13 Feb 2017 19:39:57 +0200 Subject: [PATCH 5/6] fixed checking of exceptions and setting of exceptionsApproved --- index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index c7632fa..22e21e5 100644 --- a/index.js +++ b/index.js @@ -21,12 +21,15 @@ export default class ClickOutside extends Component { } handle = e => { - const { onClickOutside, exceptions } = this.props + const {onClickOutside, exceptions} = this.props + + let exceptionsApproved = false if (exceptions) { - const exceptionsApproved = exceptions.some((except) => { + exceptionsApproved = exceptions.some((except) => { return ![e.target.className, e.target.id].includes(except); }); } + const el = this.container if (!el.contains(e.target) && exceptionsApproved) onClickOutside(e) }; From 38abf4a77abb1a96a7ada7bfdf234f1e1ac8d2e5 Mon Sep 17 00:00:00 2001 From: refaelos Date: Mon, 13 Feb 2017 19:41:16 +0200 Subject: [PATCH 6/6] exceptionsApproved is true by default --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 22e21e5..36252a8 100644 --- a/index.js +++ b/index.js @@ -23,7 +23,7 @@ export default class ClickOutside extends Component { handle = e => { const {onClickOutside, exceptions} = this.props - let exceptionsApproved = false + let exceptionsApproved = true if (exceptions) { exceptionsApproved = exceptions.some((except) => { return ![e.target.className, e.target.id].includes(except);