@retailmenot/anchor/esm/tooltip.js

A React UI Library by RetailMeNot

import { f as _classCallCheck, g as _createClass, h as _inherits, i as _createSuper, a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { a as PositionContainer } from './anchor-chunk-9ff4257f.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import '@xstyled/system';

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    position: relative;\n    ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var ToolTipContainer = styled('div')(_templateObject(), function (_ref) {
  var _ref$display = _ref.display,
      display = _ref$display === void 0 ? 'inline-block' : _ref$display;
  return css({
    display: display
  });
});
var Tooltip = /*#__PURE__*/function (_React$Component) {
  _inherits(Tooltip, _React$Component);

  var _super = _createSuper(Tooltip);

  function Tooltip() {
    var _this;

    _classCallCheck(this, Tooltip);

    _this = _super.apply(this, arguments);
    _this.state = {
      width: 0,
      height: 0,
      toolTipHeight: 0,
      toolTipWidth: 0,
      hidden: true
    };
    _this.tooltipContainerRef = createRef();
    _this.tooltipRef = createRef();
    return _this;
  }

  _createClass(Tooltip, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var toolTipContainer = this.tooltipContainerRef.current;
      var toolTip = this.tooltipRef.current; // TODO: instead of setting state, what about using the render fxn?

      if (toolTipContainer) {
        this.setState({
          height: toolTipContainer.clientHeight,
          width: toolTipContainer.clientWidth
        });
      }

      if (toolTip) {
        this.setState({
          toolTipHeight: toolTip.clientHeight,
          toolTipWidth: toolTip.clientWidth
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _a = this.props,
          arrowIndent = _a.arrowIndent,
          arrowSize = _a.arrowSize,
          background = _a.background,
          children = _a.children,
          className = _a.className,
          _a$color = _a.color,
          color = _a$color === void 0 ? 'white' : _a$color,
          content = _a.content,
          delay = _a.delay,
          debug = _a.debug,
          maxWidth = _a.maxWidth,
          _a$position = _a.position,
          position = _a$position === void 0 ? 'topEnd' : _a$position,
          showArrow = _a.showArrow,
          _a$spacing = _a.spacing,
          spacing = _a$spacing === void 0 ? 8 : _a$spacing,
          wrapContent = _a.wrapContent,
          props = __rest(_a, ["arrowIndent", "arrowSize", "background", "children", "className", "color", "content", "delay", "debug", "maxWidth", "position", "showArrow", "spacing", "wrapContent"]);

      var _this$state = this.state,
          height = _this$state.height,
          width = _this$state.width,
          hidden = _this$state.hidden,
          toolTipHeight = _this$state.toolTipHeight,
          toolTipWidth = _this$state.toolTipWidth;
      return createElement(ToolTipContainer, Object.assign({
        content: content,
        onMouseEnter: function onMouseEnter() {
          return _this2.setState({
            hidden: false
          });
        },
        onMouseLeave: function onMouseLeave() {
          return _this2.setState({
            hidden: true
          });
        },
        ref: this.tooltipContainerRef,
        className: classNames('anchor-tooltip', className)
      }, props), children, createElement(PositionContainer, {
        active: !hidden,
        arrowIndent: arrowIndent,
        arrowSize: arrowSize,
        background: background,
        children: content,
        className: "anchor-tooltip-element",
        color: color,
        containerHeight: toolTipHeight,
        containerWidth: toolTipWidth,
        delay: delay,
        debug: debug,
        height: height,
        spacing: spacing,
        maxWidth: maxWidth,
        position: position,
        ref: this.tooltipRef,
        showArrow: showArrow,
        width: width,
        wrapContent: wrapContent
      }));
    }
  }]);

  return Tooltip;
}(Component);

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