@aibsweb/faceted-search/lib/components/pivot-table/tooltip.js

A generalized faceted search application.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _get = _interopRequireDefault(require("lodash/get"));

var _pivotTable = require("./pivot-table");

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

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var TOOLTIP_LEFT = 'TOOLTIP_LEFT';
var TOOLTIP_RIGHT = 'TOOLTIP_RIGHT';
var TOOLTIP_TOP = 'TOOLTIP_TOP';
var TOOLTIP_BOTTOM = 'TOOLTIP_BOTTOM';

var Tooltip =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Tooltip, _React$Component);

  function Tooltip(props) {
    var _this;

    _classCallCheck(this, Tooltip);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Tooltip).call(this, props));
    _this.state = {
      tooltipOpen: false,
      contentComponent: null,
      cellStyle: null,
      tooltipStyle: null,
      screenX: 0,
      screenY: 0,
      horizontalPosition: TOOLTIP_RIGHT,
      verticalPosition: TOOLTIP_BOTTOM,
      // ensures that componentDidUpdate cannot loop forever if no perfect position solution is available.
      didReposition: false
    };
    _this.tooltipRef = _react["default"].createRef();
    return _this;
  }

  _createClass(Tooltip, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      document.addEventListener("".concat(this.props.tooltipId, "_TOOLTIP_CHANGE"), this.handleTooltipChange.bind(this));
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var _this$state = this.state,
          tooltipOpen = _this$state.tooltipOpen,
          screenX = _this$state.screenX,
          horizontalPosition = _this$state.horizontalPosition,
          verticalPosition = _this$state.verticalPosition,
          screenY = _this$state.screenY;

      if (tooltipOpen && !this.state.didReposition) {
        var rect = this.tooltipRef.current && this.tooltipRef.current.getBoundingClientRect();
        var windowInnerWidth = window.innerWidth;
        var nextState = this.state; // if tooltip will extend off the the right side of the screen

        if (rect.right > windowInnerWidth || horizontalPosition === TOOLTIP_RIGHT && windowInnerWidth - screenX < rect.width) {
          nextState = _objectSpread({}, nextState, {
            horizontalPosition: TOOLTIP_LEFT
          });
        } // if tooltip is far enough away from the right side of the screen
        else if (horizontalPosition === TOOLTIP_LEFT && windowInnerWidth - screenX > rect.width) {
            nextState = _objectSpread({}, nextState, {
              horizontalPosition: TOOLTIP_RIGHT
            });
          } // if tooltip will extend off the bottom of the screen


        if (verticalPosition === TOOLTIP_BOTTOM && screenY + rect.height + _pivotTable.SCROLL_BAR_SPACE > window.outerHeight) {
          nextState = _objectSpread({}, nextState, {
            verticalPosition: TOOLTIP_TOP
          });
        } // if tooltip is far enough away from the bottom of the screen
        else if (verticalPosition === TOOLTIP_TOP && screenY + rect.height < window.outerHeight) {
            nextState = _objectSpread({}, nextState, {
              verticalPosition: TOOLTIP_BOTTOM
            });
          } // if nextState was updated, update state


        if (nextState !== this.state) {
          nextState = _objectSpread({}, nextState, {
            didReposition: true
          });
          this.setState(nextState);
        }
      }
    }
  }, {
    key: "handleTooltipChange",
    value: function handleTooltipChange(e) {
      var tooltipOpen = (0, _get["default"])(e, 'detail.tooltipOpen', false);

      if (tooltipOpen) {
        var cellStyle = (0, _get["default"])(e, 'detail.style', null);
        var contentComponent = (0, _get["default"])(e, 'detail.contentComponent', null);
        var screenX = (0, _get["default"])(e, 'detail.screenX');
        var screenY = (0, _get["default"])(e, 'detail.screenY');
        this.setState({
          tooltipOpen: tooltipOpen,
          cellStyle: cellStyle,
          contentComponent: contentComponent,
          screenX: screenX,
          screenY: screenY,
          didReposition: false
        });
      } else {
        this.setState({
          tooltipOpen: tooltipOpen
        });
      }
    }
  }, {
    key: "computeStyle",
    value: function computeStyle() {
      var _this$state2 = this.state,
          tooltipOpen = _this$state2.tooltipOpen,
          cellStyle = _this$state2.cellStyle,
          horizontalPosition = _this$state2.horizontalPosition,
          verticalPosition = _this$state2.verticalPosition;

      if (!tooltipOpen) {
        return {};
      }

      var _this$props = this.props,
          scrollLeft = _this$props.scrollLeft,
          scrollTop = _this$props.scrollTop;
      var rect = this.tooltipRef.current && this.tooltipRef.current.getBoundingClientRect();
      var tooltipStyle = {
        top: cellStyle.top + cellStyle.height * 2 - scrollTop,
        left: cellStyle.left + cellStyle.width - scrollLeft
      };

      if (horizontalPosition === TOOLTIP_LEFT) {
        var leftPosition = cellStyle.left - rect.width - scrollLeft; // check if tooltip will extend of the left side

        var left = leftPosition < 0 ? 0 : leftPosition;
        tooltipStyle = _objectSpread({}, tooltipStyle, {
          left: left
        });
      }

      if (verticalPosition === TOOLTIP_TOP) {
        tooltipStyle = _objectSpread({}, tooltipStyle, {
          top: cellStyle.top - rect.height - scrollTop
        });
      }

      return tooltipStyle;
    }
  }, {
    key: "render",
    value: function render() {
      var tooltipOpen = this.state.tooltipOpen;
      var className = 'tooltip';

      if (!tooltipOpen) {
        className = "".concat(className, " tooltip--closed");
      }

      var style = this.computeStyle();
      return _react["default"].createElement("div", {
        className: className,
        style: style,
        ref: this.tooltipRef
      }, this.state.contentComponent);
    }
  }]);

  return Tooltip;
}(_react["default"].Component);

exports["default"] = Tooltip;
Tooltip.propTypes = {
  scrollLeft: _propTypes["default"].number,
  scrollTop: _propTypes["default"].number,
  tooltipId: _propTypes["default"].string
};
Tooltip.defaultProps = {
  scrollLeft: 0
};