react-misc-toolbox/dist/OutsideClickListener.js

- [ ] diagramexample | optimize creating from blank slate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useOutsideClickListener = undefined;

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _regenerator = require("babel-runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useOutsideClickListener = exports.useOutsideClickListener = function useOutsideClickListener(props) {
  var _props$shouldCallHand = props.shouldCallHandler,
      shouldCallHandler = _props$shouldCallHand === undefined ? true : _props$shouldCallHand,
      _props$insideHandler = props.insideHandler,
      insideHandler = _props$insideHandler === undefined ? function () {
    return console.log("clicked inside");
  } : _props$insideHandler,
      _props$outsideHandler = props.outsideHandler,
      outsideHandler = _props$outsideHandler === undefined ? function () {
    return console.log("clicked outside");
  } : _props$outsideHandler;

  var elClickListenerRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    if (typeof document !== "undefined") {
      document.addEventListener("click", eventListener);
    }
    return function () {
      if (typeof document !== "undefined") {
        document.removeEventListener("click", eventListener);
      }
    };
  });

  var eventListener = function () {
    var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(e) {
      var el;
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!(typeof document !== "undefined")) {
                _context.next = 6;
                break;
              }

              _context.next = 3;
              return elClickListenerRef.current;

            case 3:
              _context.t0 = _context.sent;
              _context.next = 7;
              break;

            case 6:
              _context.t0 = null;

            case 7:
              el = _context.t0;


              //if (shouldCallHandler === true && elClickListenerRef.current === null) {
              //  console.error(`elClickListenerRef is ${elClickListenerRef.current}`)
              //}

              if (el && !el.contains(e.target)) {
                //console.log(el, e.target, el.contains(e.target))
                if (shouldCallHandler) {
                  outsideHandler(el, e);
                }
              } else if (shouldCallHandler) {
                insideHandler(el, e);
                //console.log("inside")
              }

            case 9:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, undefined);
    }));

    return function eventListener(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  return { elClickListenerRef: elClickListenerRef };
};

var OutsideClickListener = function OutsideClickListener(_ref2) {
  var children = _ref2.children,
      props = (0, _objectWithoutProperties3.default)(_ref2, ["children"]);
  return children(useOutsideClickListener(props));
};

exports.default = OutsideClickListener;