boldr-ui/utils/BoldrComponent.js

UI components for Boldr

'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var MOUSE_EVENTS = ['click'];

var BoldrComponent = function (_Component) {
  (0, _inherits3.default)(BoldrComponent, _Component);

  function BoldrComponent(params) {
    (0, _classCallCheck3.default)(this, BoldrComponent);

    var _this = (0, _possibleConstructorReturn3.default)(this, (BoldrComponent.__proto__ || (0, _getPrototypeOf2.default)(BoldrComponent)).call(this, params));

    _this._addDataHook = _this._addDataHook.bind(_this);
    _this._supportOnClickOutside = _this._supportOnClickOutside.bind(_this);
    _this._onMouseEventsHandler = _this._onMouseEventsHandler.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(BoldrComponent, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var dataHook = this.props.dataHook;

      if (dataHook) {
        this._addDataHook(dataHook);
      }

      if (typeof this.onClickOutside === 'function') {
        this._supportOnClickOutside();
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var _this2 = this;

      if (this._boundEvents) {
        this._boundEvents.forEach(function (eventName) {
          document.removeEventListener(eventName, _this2._onMouseEventsHandler, true);
        });
      }
    }
  }, {
    key: 'checkIfEventOnElements',
    value: function checkIfEventOnElements(e, elem) {
      var current = e.target;
      while (current.parentNode) {
        if (elem.indexOf(current) > -1) {
          return true;
        }
        current = current.parentNode;
      }

      return current !== document;
    }
  }, {
    key: 'componentElements',
    value: function componentElements() {
      // eslint-disable-next-line
      return [_reactDom2.default.findDOMNode(this)];
    }
  }, {
    key: '_onMouseEventsHandler',
    value: function _onMouseEventsHandler(e) {
      if (!this.checkIfEventOnElements(e, this.componentElements())) {
        this.onClickOutside(e);
      }
    }
  }, {
    key: '_addDataHook',
    value: function _addDataHook(dataHook) {
      // eslint-disable-next-line
      var domNode = _reactDom2.default.findDOMNode(this);
      if (domNode) {
        domNode.setAttribute('data-hook', dataHook);
      }
    }
  }, {
    key: '_supportOnClickOutside',
    value: function _supportOnClickOutside() {
      var _this3 = this;

      MOUSE_EVENTS.forEach(function (eventName) {
        document.addEventListener(eventName, _this3._onMouseEventsHandler, true);
      });

      this._boundEvents = MOUSE_EVENTS;
    }
  }]);
  return BoldrComponent;
}(_react.Component);

BoldrComponent.propTypes = process.env.NODE_ENV !== "production" ? {
  dataHook: _propTypes2.default.string
} : {};
exports.default = BoldrComponent;