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

Suomi.fi UI component library

import { __extends, __rest, __assign } from 'tslib';
import React, { createRef, Component, forwardRef } from 'react';
import classnames from 'classnames';
import { TooltipContent } from './TooltipContent/TooltipContent.js';
import { TooltipToggleButton } from './TooltipToggleButton/TooltipToggleButton.js';
import { forkRefs } from '../../utils/common/common.js';

var baseClassName = 'fi-tooltip';
var BaseTooltip = function (_super) {
  __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__*/createRef();
    _this.contentRef = /*#__PURE__*/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 = __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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipToggleButton, __assign({
      className: classnames(className, baseClassName, toggleButtonClassName),
      ref: forkRefs(this.toggleButtonRef, definedRef),
      "aria-label": ariaToggleButtonLabelText,
      "aria-expanded": open,
      onClick: this.handleToggleClick
    }, passProps)), !!open && ( /*#__PURE__*/React.createElement(TooltipContent, {
      arrowOffsetPx: this.state.contentArrowOffsetPx,
      ref: this.contentRef,
      className: contentClassName,
      onCloseButtonClick: this.handleCloseClick,
      ariaCloseButtonLabelText: ariaCloseButtonLabelText
    }, children)));
  };
  return BaseTooltip;
}(Component);
var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
  var passProps = __rest(props, []);
  return /*#__PURE__*/React.createElement(BaseTooltip, __assign({
    forwardedRef: ref
  }, passProps));
});
Tooltip.displayName = 'Tooltip';

export { Tooltip };
//# sourceMappingURL=Tooltip.js.map