@mskcc/carbon-react/lib/internal/ClickListener.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

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

var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');

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

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

/**
 * Generic component used for reacting to a click event happening outside of a
 * given `children` element.
 */
class ClickListener extends React__default["default"].Component {
  static getEventTarget(evt) {
    // support Shadow DOM
    if (evt.composed && typeof evt.composedPath === 'function') {
      return evt.composedPath()[0];
    }
    return evt.target;
  }
  constructor(props) {
    super(props);
    // We manually bind handlers in this Component, versus using class
    // properties, so that we can properly test the `handleRef` handler.
    this.handleRef = this.handleRef.bind(this);
    this.handleDocumentClick = this.handleDocumentClick.bind(this);
  }
  componentDidMount() {
    document.addEventListener('click', this.handleDocumentClick);
  }
  componentWillUnmount() {
    document.removeEventListener('click', this.handleDocumentClick);
  }
  handleDocumentClick(evt) {
    if (this.element) {
      if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
        this.props.onClickOutside(evt);
      }
    }
  }
  handleRef(el) {
    const {
      children
    } = this.props;
    this.element = el;

    /**
     * One important note, `children.ref` corresponds to a `ref` prop passed in
     * directly to the child, not necessarily a `ref` defined in the component.
     * This means that here we target the following `ref` location:
     *
     * <ClickListener onClickOutside={() => {}}>
     *   <Child ref={targetedRefHere} />
     * </ClickListener>
     */
    if (children.ref && typeof children.ref === 'function') {
      children.ref(el);
    }
  }
  render() {
    return /*#__PURE__*/React__default["default"].cloneElement(this.props.children, {
      ref: this.handleRef
    });
  }
}
_rollupPluginBabelHelpers.defineProperty(ClickListener, "propTypes", {
  children: PropTypes__default["default"].element.isRequired,
  onClickOutside: PropTypes__default["default"].func.isRequired
});

exports["default"] = ClickListener;