suomifi-ui-components/dist/cjs/core/Tooltip/Tooltip.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var React = require('react');
var classnames = require('classnames');
var TooltipContent = require('./TooltipContent/TooltipContent.js');
var TooltipToggleButton = require('./TooltipToggleButton/TooltipToggleButton.js');
var common = require('../../utils/common/common.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var baseClassName = 'fi-tooltip';
var BaseTooltip = function (_super) {
  tslib.__extends(BaseTooltip, _super);
  function BaseTooltip(props) {
    var _this = _super.call(this, props) || this;
    _this.state = {
      open: false,
      contentArrowOffsetPx: 0,
      anchorElement: null,
      anchorRefObserver: null
    };
    _this.calculateContentArrowOffset = function () {
      if (!!_this.toggleButtonRef && _this.toggleButtonRef.current && !!_this.contentRef && !!_this.contentRef.current) {
        var pos = _this.toggleButtonRef.current.getBoundingClientRect().left - _this.contentRef.current.getBoundingClientRect().left - 2;
        var max = _this.contentRef.current.getBoundingClientRect().width - 17;
        return Math.round(Math.min(pos, max));
      }
      return 0;
    };
    _this.setContentArrowOffset = function () {
      _this.setState({
        contentArrowOffsetPx: _this.calculateContentArrowOffset()
      });
    };
    _this.handleToggleClick = function (event) {
      if (!!_this.props.onToggleButtonClick) {
        _this.props.onToggleButtonClick(event);
      }
      if (!('open' in _this.props)) {
        _this.setState(function (prevState) {
          return {
            open: !prevState.open
          };
        });
      }
    };
    _this.handleCloseClick = function (event) {
      if (!!_this.props.onCloseButtonClick) {
        _this.props.onCloseButtonClick(event);
      }
      if (!('open' in _this.props)) {
        _this.setState({
          open: false
        });
      }
      if (!!_this.toggleButtonRef.current) {
        _this.toggleButtonRef.current.focus();
      }
    };
    _this.toggleButtonRef = /*#__PURE__*/React.createRef();
    _this.contentRef = /*#__PURE__*/React.createRef();
    return _this;
  }
  BaseTooltip.prototype.componentDidMount = function () {
    var _this = this;
    window.addEventListener('resize', this.setContentArrowOffset);
    var anchorRefObserver = new ResizeObserver(function () {
      _this.setContentArrowOffset();
    });
    this.setState({
      anchorRefObserver: anchorRefObserver
    });
  };
  BaseTooltip.prototype.componentDidUpdate = function (prevProps) {
    if (this.props.anchorElement !== this.state.anchorElement) {
      if (!!this.state.anchorRefObserver) {
        if (!!this.state.anchorElement) {
          this.state.anchorRefObserver.unobserve(this.state.anchorElement);
        }
        if (!!this.props.anchorElement) {
          this.state.anchorRefObserver.observe(this.props.anchorElement);
        }
      }
      this.setState({
        anchorElement: this.props.anchorElement
      });
      this.setContentArrowOffset();
    } else if (prevProps.open !== this.props.open && this.props.open) {
      this.setContentArrowOffset();
    }
  };
  BaseTooltip.prototype.componentWillUnmount = function () {
    window.removeEventListener('resize', this.setContentArrowOffset);
    if (!!this.state.anchorRefObserver) {
      this.state.anchorRefObserver.disconnect();
    }
  };
  BaseTooltip.prototype.render = function () {
    var _a = this.props,
      propsOpen = _a.open,
      children = _a.children,
      ariaToggleButtonLabelText = _a.ariaToggleButtonLabelText,
      ariaCloseButtonLabelText = _a.ariaCloseButtonLabelText,
      toggleButtonClassName = _a.toggleButtonClassName,
      contentClassName = _a.contentClassName,
      forwardedRef = _a.forwardedRef;
      _a.anchorElement;
      var className = _a.className;
      _a.onToggleButtonClick;
      _a.onCloseButtonClick;
      var passProps = tslib.__rest(_a, ["open", "children", "ariaToggleButtonLabelText", "ariaCloseButtonLabelText", "toggleButtonClassName", "contentClassName", "forwardedRef", "anchorElement", "className", "onToggleButtonClick", "onCloseButtonClick"]);
    var open = 'open' in this.props ? propsOpen : this.state.open;
    var definedRef = forwardedRef || null;
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(TooltipToggleButton.TooltipToggleButton, tslib.__assign({
      className: classnames__default.default(className, baseClassName, toggleButtonClassName),
      ref: common.forkRefs(this.toggleButtonRef, definedRef),
      "aria-label": ariaToggleButtonLabelText,
      "aria-expanded": open,
      onClick: this.handleToggleClick
    }, passProps)), !!open && ( /*#__PURE__*/React__default.default.createElement(TooltipContent.TooltipContent, {
      arrowOffsetPx: this.state.contentArrowOffsetPx,
      ref: this.contentRef,
      className: contentClassName,
      onCloseButtonClick: this.handleCloseClick,
      ariaCloseButtonLabelText: ariaCloseButtonLabelText
    }, children)));
  };
  return BaseTooltip;
}(React.Component);
var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var passProps = tslib.__rest(props, []);
  return /*#__PURE__*/React__default.default.createElement(BaseTooltip, tslib.__assign({
    forwardedRef: ref
  }, passProps));
});
Tooltip.displayName = 'Tooltip';

exports.Tooltip = Tooltip;
//# sourceMappingURL=Tooltip.js.map