@flexis/ui/components/Tooltip/Tooltip.js

Styleless React Components

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));

var _tslib = require("tslib");

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

var _reactDom = require("react-dom");

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

var _helpers = require("../../helpers");

var _types = require("../common/types");

var _setOverflowOffset = _interopRequireDefault(require("../common/setOverflowOffset"));

var _TooltipSt = require("./Tooltip.st.css");

var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent;
var HALF = 2;

var Tooltip =
/** @class */
function () {
  var Tooltip = /*#__PURE__*/function (_PureComponent) {
    (0, _inherits2.default)(Tooltip, _PureComponent);

    function Tooltip() {
      var _this;

      (0, _classCallCheck2.default)(this, Tooltip);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Tooltip).apply(this, arguments));
      _this.state = {
        active: false,
        tooltipWithOffset: false
      };
      _this.elementRef = null;
      _this.tooltipRef = null;
      return _this;
    }

    (0, _createClass2.default)(Tooltip, [{
      key: "render",
      value: function render() {
        var _style;

        var _this$props = this.props,
            className = _this$props.className,
            id = _this$props.id,
            tabIndex = _this$props.tabIndex,
            content = _this$props.content,
            placement = _this$props.placement,
            align = _this$props.align,
            children = _this$props.children,
            props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "id", "tabIndex", "content", "placement", "align", "children"]);
        var _this$state = this.state,
            active = _this$state.active,
            tooltipWithOffset = _this$state.tooltipWithOffset;
        return _createElement("span", {
          ref: this.onElementRef,
          className: (0, _TooltipSt.style)(_TooltipSt.classes.root, className),
          onMouseEnter: this.onShow,
          onFocus: this.onShow,
          onMouseLeave: this.onHide,
          onBlur: this.onHide,
          tabIndex: tabIndex,
          "aria-describedby": id
        }, children, (0, _reactDom.createPortal)(_createElement("div", (0, _extends2.default)({
          ref: this.onTooltipRef,
          id: id,
          role: "tooltip"
        }, props, {
          className: (0, _TooltipSt.style)(_TooltipSt.classes.tooltip, (_style = {}, (0, _defineProperty2.default)(_style, "".concat(placement, "Placement"), Boolean(placement)), (0, _defineProperty2.default)(_style, "".concat(align, "Align"), Boolean(align)), (0, _defineProperty2.default)(_style, "offset", tooltipWithOffset), (0, _defineProperty2.default)(_style, "active", active), _style)),
          "aria-hidden": !active
        }), content), document.body));
      }
    }, {
      key: "componentDidUpdate",
      value: function componentDidUpdate(_, _ref) {
        var prevActive = _ref.active;
        var active = this.state.active;

        if (!prevActive && active) {
          this.setTooltipPosition();
        }
      }
    }, {
      key: "onElementRef",
      value: function onElementRef(ref) {
        this.elementRef = ref;
      }
    }, {
      key: "onTooltipRef",
      value: function onTooltipRef(ref) {
        this.tooltipRef = ref;
      }
    }, {
      key: "onShow",
      value: function onShow() {
        this.setState(function () {
          return {
            active: true
          };
        });
      }
    }, {
      key: "onHide",
      value: function onHide() {
        this.setState(function () {
          return {
            active: false
          };
        });
      }
    }, {
      key: "setTooltipPosition",
      value: function setTooltipPosition() {
        var elementRef = this.elementRef,
            tooltipRef = this.tooltipRef;

        if (!elementRef || !tooltipRef) {
          return;
        }

        var _this$props2 = this.props,
            placement = _this$props2.placement,
            align = _this$props2.align;

        var _elementRef$getBoundi = elementRef.getBoundingClientRect(),
            elementTop = _elementRef$getBoundi.top,
            elementLeft = _elementRef$getBoundi.left,
            elementWidth = _elementRef$getBoundi.width,
            elementHeight = _elementRef$getBoundi.height;

        var tooltipWidth = tooltipRef.offsetWidth,
            tooltipHeight = tooltipRef.offsetHeight,
            style = tooltipRef.style;
        var top = 0;
        var left = 0;

        switch (placement) {
          case 'top':
            top = elementTop;
            break;

          case 'right':
            left = elementLeft + elementWidth - tooltipWidth;
            break;

          case 'bottom':
            top = elementTop + elementHeight - tooltipHeight;
            break;

          case 'left':
            left = elementLeft;
            break;

          default:
        }

        switch (align) {
          case 'start':
            switch (placement) {
              case 'top':
              case 'bottom':
                left = elementLeft;
                break;

              case 'right':
              case 'left':
                top = elementTop;
                break;

              default:
            }

            break;

          case 'center':
            switch (placement) {
              case 'top':
              case 'bottom':
                left = elementLeft + elementWidth / HALF;
                break;

              case 'right':
              case 'left':
                top = elementTop + elementHeight / HALF;
                break;

              default:
            }

            break;

          case 'end':
            switch (placement) {
              case 'top':
              case 'bottom':
                left = elementLeft + elementWidth - tooltipWidth;
                break;

              case 'right':
              case 'left':
                top = elementTop + elementHeight - tooltipHeight;
                break;

              default:
            }

            break;

          default:
        }

        style.top = "".concat(top, "px");
        style.left = "".concat(left, "px");
        var withOffset = (0, _setOverflowOffset.default)(tooltipRef, top, left);
        this.setState(function () {
          return {
            tooltipWithOffset: withOffset
          };
        });
      }
    }]);
    return Tooltip;
  }(PureComponent);

  process.env.NODE_ENV !== "production" ? Tooltip.propTypes = {
    id: _propTypes.default.string,
    tabIndex: _propTypes.default.number,
    placement: _propTypes.default.oneOf(_types.PlacementValues).isRequired,
    align: _propTypes.default.oneOf(_types.AlignValues),
    content: _propTypes.default.node.isRequired,
    children: _propTypes.default.node.isRequired
  } : void 0;
  Tooltip.defaultProps = {
    tabIndex: 0,
    align: _types.AlignVariant.Center
  };
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], Tooltip.prototype, "onElementRef", null);
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], Tooltip.prototype, "onTooltipRef", null);
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], Tooltip.prototype, "onShow", null);
  (0, _tslib.__decorate)([(0, _helpers.Bind)()], Tooltip.prototype, "onHide", null);
  return Tooltip;
}();

var _default = Tooltip;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Rvb2x0aXAvVG9vbHRpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBS0E7O0FBR0E7O0FBQ0E7O0FBSUE7O0FBT0E7O0FBQ0E7Ozs7QUF3QkEsSUFBTSxJQUFJLEdBQUcsQ0FBYjs7QUFFQSxJQUFBLE9BQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixPQUFyQjtBQUFBOztBQUFBLHVCQUFBO0FBQUE7O0FBQUE7O0FBZ0JDLFlBQUEsS0FBQSxHQUFRO0FBQ1AsUUFBQSxNQUFNLEVBQWEsS0FEWjtBQUVQLFFBQUEsaUJBQWlCLEVBQUU7QUFGWixPQUFSO0FBS1EsWUFBQSxVQUFBLEdBQThCLElBQTlCO0FBQ0EsWUFBQSxVQUFBLEdBQTZCLElBQTdCO0FBdEJUO0FBc09DOztBQXRPRDtBQUFBO0FBQUEsK0JBd0JPO0FBQUE7O0FBQUEsMEJBV0QsS0FBSyxLQVhKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSUosRUFKSSxlQUlKLEVBSkk7QUFBQSxZQUtKLFFBTEksZUFLSixRQUxJO0FBQUEsWUFNSixPQU5JLGVBTUosT0FOSTtBQUFBLFlBT0osU0FQSSxlQU9KLFNBUEk7QUFBQSxZQVFKLEtBUkksZUFRSixLQVJJO0FBQUEsWUFTSixRQVRJLGVBU0osUUFUSTtBQUFBLFlBVUQsS0FWQztBQUFBLDBCQWVELEtBQUssS0FmSjtBQUFBLFlBYUosTUFiSSxlQWFKLE1BYkk7QUFBQSxZQWNKLGlCQWRJLGVBY0osaUJBZEk7QUFpQkwsZUFDQztBQUNDLFVBQUEsR0FBRyxFQUFFLEtBQUssWUFEWDtBQUVDLFVBQUEsU0FBUyxFQUFFLHNCQUFNLG1CQUFRLElBQWQsRUFBb0IsU0FBcEIsQ0FGWjtBQUdDLFVBQUEsWUFBWSxFQUFFLEtBQUssTUFIcEI7QUFJQyxVQUFBLE9BQU8sRUFBRSxLQUFLLE1BSmY7QUFLQyxVQUFBLFlBQVksRUFBRSxLQUFLLE1BTHBCO0FBTUMsVUFBQSxNQUFNLEVBQUUsS0FBSyxNQU5kO0FBT0MsVUFBQSxRQUFRLEVBQUUsUUFQWDtBQVFDLDhCQUFrQjtBQVJuQixXQVVFLFFBVkYsRUFXRSw0QkFDQTtBQUNDLFVBQUEsR0FBRyxFQUFFLEtBQUssWUFEWDtBQUVDLFVBQUEsRUFBRSxFQUFFLEVBRkw7QUFHQyxVQUFBLElBQUksRUFBQztBQUhOLFdBSUssS0FKTDtBQUtDLFVBQUEsU0FBUyxFQUFFLHNCQUFNLG1CQUFRLE9BQWQsZ0VBQ04sU0FETSxnQkFDaUIsT0FBTyxDQUFDLFNBQUQsQ0FEeEIsbURBRU4sS0FGTSxZQUVpQixPQUFPLENBQUMsS0FBRCxDQUZ4QixtREFHaUIsaUJBSGpCLG1EQUlWLE1BSlUsV0FMWjtBQVdDLHlCQUFhLENBQUM7QUFYZixZQWFFLE9BYkYsQ0FEQSxFQWdCRSxRQUFRLENBQUMsSUFoQlgsQ0FYRixDQUREO0FBK0JBO0FBeEVGO0FBQUE7QUFBQSx5Q0EwRW9CLENBMUVwQixRQTBFcUQ7QUFBQSxZQUFwQixVQUFvQixRQUE1QixNQUE0QjtBQUFBLFlBR2xELE1BSGtELEdBSS9DLEtBQUssS0FKMEMsQ0FHbEQsTUFIa0Q7O0FBTW5ELFlBQUksQ0FBQyxVQUFELElBQWUsTUFBbkIsRUFBMkI7QUFDMUIsZUFBSyxrQkFBTDtBQUNBO0FBQ0Q7QUFuRkY7QUFBQTtBQUFBLG1DQXNGc0IsR0F0RnRCLEVBc0YwQztBQUN4QyxhQUFLLFVBQUwsR0FBa0IsR0FBbEI7QUFDQTtBQXhGRjtBQUFBO0FBQUEsbUNBMkZzQixHQTNGdEIsRUEyRnlDO0FBQ3ZDLGFBQUssVUFBTCxHQUFrQixHQUFsQjtBQUNBO0FBN0ZGO0FBQUE7QUFBQSwrQkFnR2U7QUFDYixhQUFLLFFBQUwsQ0FBYztBQUFBLGlCQUFPO0FBQ3BCLFlBQUEsTUFBTSxFQUFFO0FBRFksV0FBUDtBQUFBLFNBQWQ7QUFHQTtBQXBHRjtBQUFBO0FBQUEsK0JBdUdlO0FBQ2IsYUFBSyxRQUFMLENBQWM7QUFBQSxpQkFBTztBQUNwQixZQUFBLE1BQU0sRUFBRTtBQURZLFdBQVA7QUFBQSxTQUFkO0FBR0E7QUEzR0Y7QUFBQTtBQUFBLDJDQTZHMkI7QUFBQSxZQUd4QixVQUh3QixHQUtyQixJQUxxQixDQUd4QixVQUh3QjtBQUFBLFlBSXhCLFVBSndCLEdBS3JCLElBTHFCLENBSXhCLFVBSndCOztBQU96QixZQUFJLENBQUMsVUFBRCxJQUFlLENBQUMsVUFBcEIsRUFBZ0M7QUFDL0I7QUFDQTs7QUFUd0IsMkJBY3JCLEtBQUssS0FkZ0I7QUFBQSxZQVl4QixTQVp3QixnQkFZeEIsU0Fad0I7QUFBQSxZQWF4QixLQWJ3QixnQkFheEIsS0Fid0I7O0FBQUEsb0NBb0JyQixVQUFVLENBQUMscUJBQVgsRUFwQnFCO0FBQUEsWUFnQm5CLFVBaEJtQix5QkFnQnhCLEdBaEJ3QjtBQUFBLFlBaUJsQixXQWpCa0IseUJBaUJ4QixJQWpCd0I7QUFBQSxZQWtCakIsWUFsQmlCLHlCQWtCeEIsS0FsQndCO0FBQUEsWUFtQmhCLGFBbkJnQix5QkFtQnhCLE1BbkJ3Qjs7QUFBQSxZQXNCWCxZQXRCVyxHQXlCckIsVUF6QnFCLENBc0J4QixXQXRCd0I7QUFBQSxZQXVCVixhQXZCVSxHQXlCckIsVUF6QnFCLENBdUJ4QixZQXZCd0I7QUFBQSxZQXdCeEIsS0F4QndCLEdBeUJyQixVQXpCcUIsQ0F3QnhCLEtBeEJ3QjtBQTBCekIsWUFBSSxHQUFHLEdBQUcsQ0FBVjtBQUNBLFlBQUksSUFBSSxHQUFHLENBQVg7O0FBRUEsZ0JBQVEsU0FBUjtBQUVDLGVBQUssS0FBTDtBQUNDLFlBQUEsR0FBRyxHQUFHLFVBQU47QUFDQTs7QUFFRCxlQUFLLE9BQUw7QUFDQyxZQUFBLElBQUksR0FBRyxXQUFXLEdBQUcsWUFBZCxHQUE2QixZQUFwQztBQUNBOztBQUVELGVBQUssUUFBTDtBQUNDLFlBQUEsR0FBRyxHQUFHLFVBQVUsR0FBRyxhQUFiLEdBQTZCLGFBQW5DO0FBQ0E7O0FBRUQsZUFBSyxNQUFMO0FBQ0MsWUFBQSxJQUFJLEdBQUcsV0FBUDtBQUNBOztBQUVEO0FBbEJEOztBQXFCQSxnQkFBUSxLQUFSO0FBRUMsZUFBSyxPQUFMO0FBRUMsb0JBQVEsU0FBUjtBQUVDLG1CQUFLLEtBQUw7QUFDQSxtQkFBSyxRQUFMO0FBQ0MsZ0JBQUEsSUFBSSxHQUFHLFdBQVA7QUFDQTs7QUFFRCxtQkFBSyxPQUFMO0FBQ0EsbUJBQUssTUFBTDtBQUNDLGdCQUFBLEdBQUcsR0FBRyxVQUFOO0FBQ0E7O0FBRUQ7QUFaRDs7QUFlQTs7QUFFRCxlQUFLLFFBQUw7QUFFQyxvQkFBUSxTQUFSO0FBRUMsbUJBQUssS0FBTDtBQUNBLG1CQUFLLFFBQUw7QUFDQyxnQkFBQSxJQUFJLEdBQUcsV0FBVyxHQUFHLFlBQVksR0FBRyxJQUFwQztBQUNBOztBQUVELG1CQUFLLE9BQUw7QUFDQSxtQkFBSyxNQUFMO0FBQ0MsZ0JBQUEsR0FBRyxHQUFHLFVBQVUsR0FBRyxhQUFhLEdBQUcsSUFBbkM7QUFDQTs7QUFFRDtBQVpEOztBQWVBOztBQUVELGVBQUssS0FBTDtBQUVDLG9CQUFRLFNBQVI7QUFFQyxtQkFBSyxLQUFMO0FBQ0EsbUJBQUssUUFBTDtBQUNDLGdCQUFBLElBQUksR0FBRyxXQUFXLEdBQUcsWUFBZCxHQUE2QixZQUFwQztBQUNBOztBQUVELG1CQUFLLE9BQUw7QUFDQSxtQkFBSyxNQUFMO0FBQ0MsZ0JBQUEsR0FBRyxHQUFHLFVBQVUsR0FBRyxhQUFiLEdBQTZCLGFBQW5DO0FBQ0E7O0FBRUQ7QUFaRDs7QUFlQTs7QUFFRDtBQTNERDs7QUE4REEsUUFBQSxLQUFLLENBQUMsR0FBTixhQUFlLEdBQWY7QUFDQSxRQUFBLEtBQUssQ0FBQyxJQUFOLGFBQWdCLElBQWhCO0FBRUEsWUFBTSxVQUFVLEdBQUcsZ0NBQWtCLFVBQWxCLEVBQThCLEdBQTlCLEVBQW1DLElBQW5DLENBQW5CO0FBRUEsYUFBSyxRQUFMLENBQWM7QUFBQSxpQkFBTztBQUNwQixZQUFBLGlCQUFpQixFQUFFO0FBREMsV0FBUDtBQUFBLFNBQWQ7QUFHQTtBQXJPRjtBQUFBO0FBQUEsSUFBcUMsYUFBckM7O0FBRVEsMENBQUEsT0FBQSxDQUFBLFNBQUEsR0FBWTtBQUNsQixJQUFBLEVBQUUsRUFBUyxtQkFBVSxNQURIO0FBRWxCLElBQUEsUUFBUSxFQUFHLG1CQUFVLE1BRkg7QUFHbEIsSUFBQSxTQUFTLEVBQUUsbUJBQVUsS0FBVixDQUFnQixzQkFBaEIsRUFBaUMsVUFIMUI7QUFJbEIsSUFBQSxLQUFLLEVBQU0sbUJBQVUsS0FBVixDQUFnQixrQkFBaEIsQ0FKTztBQUtsQixJQUFBLE9BQU8sRUFBSSxtQkFBVSxJQUFWLENBQWUsVUFMUjtBQU1sQixJQUFBLFFBQVEsRUFBRyxtQkFBVSxJQUFWLENBQWU7QUFOUixHQUFaO0FBU0EsRUFBQSxPQUFBLENBQUEsWUFBQSxHQUFlO0FBQ3JCLElBQUEsUUFBUSxFQUFFLENBRFc7QUFFckIsSUFBQSxLQUFLLEVBQUssb0JBQWE7QUFGRixHQUFmO0FBMkVQLHlCQUFBLENBREMsb0JBQ0QsQ0FBQSxFLGlCQUFBLEUsY0FBQSxFQUVDLElBRkQ7QUFLQSx5QkFBQSxDQURDLG9CQUNELENBQUEsRSxpQkFBQSxFLGNBQUEsRUFFQyxJQUZEO0FBS0EseUJBQUEsQ0FEQyxvQkFDRCxDQUFBLEUsaUJBQUEsRSxRQUFBLEVBSUMsSUFKRDtBQU9BLHlCQUFBLENBREMsb0JBQ0QsQ0FBQSxFLGlCQUFBLEUsUUFBQSxFQUlDLElBSkQ7QUErSEQsU0FBQSxPQUFBO0FBQUMsQ0F0T0QsRUFBQTs7ZUFBcUIsTyIsInNvdXJjZVJvb3QiOiIifQ==