@retailmenot/anchor/commonjs/tooltip.js

A React UI Library by RetailMeNot

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var __chunk_11 = require('./anchor-chunk-044b0898.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
require('@xstyled/system');

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

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

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

  var _super = __chunk_1._createSuper(Tooltip);

  function Tooltip() {
    var _this;

    __chunk_1._classCallCheck(this, Tooltip);

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

  __chunk_1._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 = __chunk_2.__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 React.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, React.createElement(__chunk_11.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;
}(React.Component);

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