@appbuckets/react-ui-core/utils/doesNodeContainClick.js

Core utilities built for AppBuckets React UI Framework

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var inRange = require('lodash/inRange');
var invoke = require('lodash/invoke');
var isNil = require('lodash/isNil');
var some = require('lodash/some');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

var inRange__default = /*#__PURE__*/ _interopDefaultLegacy(inRange);
var invoke__default = /*#__PURE__*/ _interopDefaultLegacy(invoke);
var isNil__default = /*#__PURE__*/ _interopDefaultLegacy(isNil);
var some__default = /*#__PURE__*/ _interopDefaultLegacy(some);

function doesNodeContainClick(node, e) {
  // Check all params are valid
  if (some__default['default']([node, e], isNil__default['default'])) {
    return false;
  }
  // if there is an e.target and it is in the document, use a simple node.contains() check
  if (e.target) {
    // Set a custom attribute that will be checked later using a selector
    invoke__default['default'](
      e.target,
      'setAttribute',
      'data-bucket-click-target',
      true
    );
    // Check if the selector exists in document
    if (document.querySelector('[data-bucket-click-target=true]')) {
      invoke__default['default'](
        e.target,
        'removeAttribute',
        'data-bucket-click-target'
      );
      return node.contains(e.target);
    }
  }
  // Below logic handles cases where the e.target is no longer in the document.
  // The result of the click likely has removed the e.target node.
  // Instead of node.contains(), we'll identify the click by X/Y position.
  // return early if the event properties aren't available
  // prevent measuring the node and repainting if we don't need to
  var clientX = e.clientX,
    clientY = e.clientY;
  if (some__default['default']([clientX, clientY], isNil__default['default'])) {
    return false;
  }
  // false if the node is not visible
  var clientRects = node.getClientRects();
  // getClientRects returns a DOMRectList, not an array nor a plain object
  // We explicitly avoid _.isEmpty and check .length to cover all possible shapes
  if (
    !node.offsetWidth ||
    !node.offsetHeight ||
    !clientRects ||
    !clientRects.length
  ) {
    return false;
  }
  // false if the node doesn't have a valid bounding rect
  var _a = clientRects[0],
    top = _a.top,
    bottom = _a.bottom,
    left = _a.left,
    right = _a.right;
  if (
    some__default['default'](
      [top, bottom, left, right],
      isNil__default['default']
    )
  ) {
    return false;
  }
  // we add a small decimal to the upper bound just to make it inclusive
  // don't add an whole pixel (1) as the event/node values may be decimal sensitive
  return (
    inRange__default['default'](clientY, top, bottom + 0.001) &&
    inRange__default['default'](clientX, left, right + 0.001)
  );
}

exports.doesNodeContainClick = doesNodeContainClick;