@lyra/components/lib/utilities/CaptureOutsideClicks.js

Basic UX components

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

class CaptureOutsideClicks extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.hadMouseDown = false, this.handleMouseDown = event => {
      if (this._wrapperElement.contains(event.target)) {
        this.hadMouseDown = true;
      }
    }, this.handleDocumentClick = event => {
      if (this.props.onClickOutside && this._wrapperElement && !this._wrapperElement.contains(event.target) && !this.hadMouseDown) {
        this.props.onClickOutside(event);
      }
      this.hadMouseDown = false;
    }, this.setWrapperElement = element => {
      this._wrapperElement = element;
    }, _temp;
  }

  componentWillMount() {
    document.addEventListener('mouseup', this.handleDocumentClick);
    document.addEventListener('mousedown', this.handleMouseDown);
  }

  componentWillUnmount() {
    document.removeEventListener('mouseup', this.handleDocumentClick);
    document.removeEventListener('mousedown', this.handleMouseDown);
  }

  render() {
    var _props = this.props;

    const wrapperElement = _props.wrapperElement,
          onClickOutside = _props.onClickOutside,
          rest = _objectWithoutProperties(_props, ['wrapperElement', 'onClickOutside']);

    return _react2.default.createElement(wrapperElement, _extends({}, rest, {
      ref: this.setWrapperElement
    }));
  }
}
exports.default = CaptureOutsideClicks;
CaptureOutsideClicks.propTypes = {
  onClickOutside: _propTypes2.default.func,
  wrapperElement: _propTypes2.default.string
};
CaptureOutsideClicks.defaultProps = {
  wrapperElement: 'div'
};