@onesy/ui-react/ClickListener/ClickListener.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "mouseEvent", "touchEvent", "contextMenu", "include", "includeParentQueries", "includeQueries", "ignoreNonExisting", "onClickInside", "onClickOutside", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const resolve = value => value.replace(/^on/, '').toLowerCase();
const ClickListener = props_ => {
  var _theme$ui, _theme$ui2;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyClickListener) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const {
      ref,
      mouseEvent = 'onClick',
      touchEvent = 'onTouchEnd',
      contextMenu = true,
      include = [],
      includeParentQueries = [],
      includeQueries = [],
      ignoreNonExisting = true,
      onClickInside,
      onClickOutside,
      children
    } = props,
    other = (0, _objectWithoutProperties2.default)(props, _excluded);
  const refs = {
    root: _react.default.useRef(undefined),
    include: _react.default.useRef(undefined),
    includeQueries: _react.default.useRef(undefined),
    includeParentQueries: _react.default.useRef(undefined),
    ignoreNonExisting: _react.default.useRef(undefined)
  };
  refs.include.current = include;
  refs.includeQueries.current = includeQueries;
  refs.includeParentQueries.current = includeParentQueries;
  refs.ignoreNonExisting.current = ignoreNonExisting;
  _react.default.useEffect(() => {
    var _refs$root$current;
    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
    const onMethod = event => {
      if (refs.root.current) {
        const elementParents = (0, _utils.element)(event.target).parents();
        const exists = (0, _utils.Try)(() => rootDocument.body.contains(event.target));
        if (refs.root.current.contains(event.target) || refs.include.current.map(item_0 => (item_0 === null || item_0 === void 0 ? void 0 : item_0.current) || item_0).filter(Boolean).some(item_1 => {
          var _item_1$contains;
          return (_item_1$contains = item_1.contains) === null || _item_1$contains === void 0 ? void 0 : _item_1$contains.call(item_1, event.target);
        }) || refs.includeParentQueries.current.some(query_0 => elementParents.some(item => (0, _utils2.matches)(item)(query_0))) || refs.includeQueries.current.some(query => (0, _utils2.matches)(event.target)(query)) || !exists && refs.ignoreNonExisting.current) {
          if ((0, _utils.is)('function', onClickInside)) onClickInside();
        } else {
          if ((0, _utils.is)('function', onClickOutside)) onClickOutside();
        }
      }
    };
    if (mouseEvent) rootDocument.addEventListener(resolve(mouseEvent), onMethod);
    if (touchEvent) rootDocument.addEventListener(resolve(touchEvent), onMethod, {
      passive: true
    });
    if (contextMenu) rootDocument.addEventListener('contextmenu', onMethod);
    return () => {
      if (mouseEvent) rootDocument.removeEventListener(resolve(mouseEvent), onMethod);
      if (touchEvent) rootDocument.removeEventListener(resolve(mouseEvent), onMethod);
      if (contextMenu) rootDocument.removeEventListener('contextmenu', onMethod);
    };
  }, [mouseEvent, touchEvent, contextMenu]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
    children: children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
      ref: item_2 => {
        if (ref) {
          if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
        }
        if (children.ref) {
          if ((0, _utils.is)('function', children.ref)) children.ref(item_2);else children.ref.current = item_2;
        }
        refs.root.current = item_2;
      }
    }, other), {}, {
      className: (0, _styleReact.classNames)([other.className, children.props.className])
    })))
  });
};
ClickListener.displayName = 'onesy-ClickListener';
var _default = exports.default = ClickListener;