1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.useOutsideClickListener = undefined;
|
7 |
|
8 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
9 |
|
10 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
11 |
|
12 | var _regenerator = require('babel-runtime/regenerator');
|
13 |
|
14 | var _regenerator2 = _interopRequireDefault(_regenerator);
|
15 |
|
16 | var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
|
17 |
|
18 | var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
|
19 |
|
20 | var _react = require('react');
|
21 |
|
22 | var _react2 = _interopRequireDefault(_react);
|
23 |
|
24 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
25 |
|
26 | var useOutsideClickListener = exports.useOutsideClickListener = function useOutsideClickListener(props) {
|
27 | var _props$shouldCallHand = props.shouldCallHandler,
|
28 | shouldCallHandler = _props$shouldCallHand === undefined ? true : _props$shouldCallHand,
|
29 | _props$insideHandler = props.insideHandler,
|
30 | insideHandler = _props$insideHandler === undefined ? function () {
|
31 | return console.log('clicked inside');
|
32 | } : _props$insideHandler,
|
33 | _props$outsideHandler = props.outsideHandler,
|
34 | outsideHandler = _props$outsideHandler === undefined ? function () {
|
35 | return console.log('clicked outside');
|
36 | } : _props$outsideHandler;
|
37 |
|
38 | var elClickListenerRef = (0, _react.useRef)(null);
|
39 | (0, _react.useEffect)(function () {
|
40 | if (typeof document !== 'undefined') {
|
41 | document.addEventListener('click', eventListener);
|
42 | }
|
43 | return function () {
|
44 | if (typeof document !== 'undefined') {
|
45 | document.removeEventListener('click', eventListener);
|
46 | }
|
47 | };
|
48 | });
|
49 |
|
50 | var eventListener = function () {
|
51 | var _ref = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee(e) {
|
52 | var el;
|
53 | return _regenerator2.default.wrap(function _callee$(_context) {
|
54 | while (1) {
|
55 | switch (_context.prev = _context.next) {
|
56 | case 0:
|
57 | if (!(typeof document !== 'undefined')) {
|
58 | _context.next = 6;
|
59 | break;
|
60 | }
|
61 |
|
62 | _context.next = 3;
|
63 | return elClickListenerRef.current;
|
64 |
|
65 | case 3:
|
66 | _context.t0 = _context.sent;
|
67 | _context.next = 7;
|
68 | break;
|
69 |
|
70 | case 6:
|
71 | _context.t0 = null;
|
72 |
|
73 | case 7:
|
74 | el = _context.t0;
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 | if (el && !el.contains(e.target)) {
|
82 | if (shouldCallHandler) {
|
83 | outsideHandler();
|
84 | }
|
85 | } else if (shouldCallHandler) {
|
86 | insideHandler();
|
87 | }
|
88 |
|
89 | case 9:
|
90 | case 'end':
|
91 | return _context.stop();
|
92 | }
|
93 | }
|
94 | }, _callee, undefined);
|
95 | }));
|
96 |
|
97 | return function eventListener(_x) {
|
98 | return _ref.apply(this, arguments);
|
99 | };
|
100 | }();
|
101 |
|
102 | return { elClickListenerRef: elClickListenerRef };
|
103 | };
|
104 |
|
105 | var OutsideClickListener = function OutsideClickListener(_ref2) {
|
106 | var children = _ref2.children,
|
107 | props = (0, _objectWithoutProperties3.default)(_ref2, ['children']);
|
108 | return children(useOutsideClickListener(props));
|
109 | };
|
110 |
|
111 | exports.default = OutsideClickListener; |
\ | No newline at end of file |