@kiwicom/orbit-components/lib/Tooltip/components/TooltipContent.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _resolveContainerPosition = _interopRequireDefault(require("../helpers/resolveContainerPosition"));

var _resolveTooltipArrowAlign = _interopRequireDefault(require("../helpers/resolveTooltipArrowAlign"));

var _resolveTooltipArrowPosition = _interopRequireDefault(require("../helpers/resolveTooltipArrowPosition"));

var _index = require("../../Text/index");

var _index2 = require("../../List/ListItem/index");

var _index3 = _interopRequireDefault(require("../../utils/mediaQuery/index"));

var _tooltipSize = _interopRequireDefault(require("../helpers/tooltipSize"));

var _resolveContainerAlign = _interopRequireDefault(require("../helpers/resolveContainerAlign"));

var _tooltipArrowStyle = _interopRequireDefault(require("../helpers/tooltipArrowStyle"));

var _tooltipPadding = _interopRequireDefault(require("../helpers/tooltipPadding"));

var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));

var _Button = _interopRequireDefault(require("../../Button"));

var _Translate = _interopRequireDefault(require("../../Translate"));

var _calculateTooltipPosition = _interopRequireDefault(require("../helpers/calculateTooltipPosition"));

var _calculateTooltipAlign = _interopRequireDefault(require("../helpers/calculateTooltipAlign"));

var _sortPositionsAndAligns = _interopRequireDefault(require("../helpers/sortPositionsAndAligns"));

var _useDimensions = _interopRequireDefault(require("../hooks/useDimensions"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var StyledTooltip = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltip",
  componentId: "sc-1umu28w-0"
})(["width:100%;"]);

var StyledTooltipWrapper = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipWrapper",
  componentId: "sc-1umu28w-1"
})(["display:block;position:fixed;width:100%;box-sizing:border-box;border-top-left-radius:9px;border-top-right-radius:9px;background-color:", ";box-shadow:", ";padding:", ";visibility:", ";opacity:", ";transition:bottom ", " ease-in-out,visibility ", " linear ", ";z-index:10012;bottom:", ";left:0;right:0;max-height:", ";overflow-y:scroll;img{max-width:100%;}", ";&::after{width:0;height:0;border-style:solid;content:\" \";display:none;position:absolute;", ";", ";", ";", ";}"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.paletteWhite;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.boxShadowElevatedLevel1;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.spaceMedium;
}, function (_ref4) {
  var shownMobile = _ref4.shownMobile;
  return shownMobile ? "visible" : "hidden";
}, function (_ref5) {
  var shownMobile = _ref5.shownMobile;
  return shownMobile ? "1" : "0";
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.durationNormal;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.durationFast;
}, function (_ref8) {
  var shownMobile = _ref8.shownMobile,
      theme = _ref8.theme;
  return !shownMobile && theme.orbit.durationNormal;
}, function (_ref9) {
  var shownMobile = _ref9.shownMobile,
      tooltipWidth = _ref9.tooltipWidth;
  return shownMobile ? "0" : "-".concat(tooltipWidth, "px");
}, function (_ref10) {
  var theme = _ref10.theme;
  return "calc(100% - ".concat(theme.orbit.spaceXLarge, ")");
}, _index3.default.largeMobile((0, _styledComponents.css)(["max-height:none;overflow:visible;width:auto;position:absolute;max-width:", ";border-radius:", ";padding:", ";background-color:", ";visibility:", ";opacity:", ";transition:opacity ", " ease-in-out,visibility ", " ease-in-out;top:auto;right:auto;bottom:auto;left:auto;", ";", ";"], _tooltipSize.default, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.borderRadiusNormal;
}, _tooltipPadding.default, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.paletteBlueDark;
}, function (_ref13) {
  var shown = _ref13.shown;
  return shown ? "visible" : "hidden";
}, function (_ref14) {
  var shown = _ref14.shown;
  return shown ? "1" : "0";
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.durationFast;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.durationFast;
}, _resolveContainerPosition.default, _resolveContainerAlign.default)), _tooltipArrowStyle.default, _resolveTooltipArrowPosition.default, _resolveTooltipArrowAlign.default, _index3.default.largeMobile((0, _styledComponents.css)(["display:block;"])));

StyledTooltipWrapper.defaultProps = {
  theme: _defaultTheme.default
};

var StyledTooltipContent = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipContent",
  componentId: "sc-1umu28w-2"
})(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-bottom:16px;& ", ",", "{font-size:", ";font-weight:", ";color:", ";}", ";"], function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.fontFamily;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.fontWeightNormal;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.lineHeightText;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.orbit.paletteInkNormal;
}, _index.StyledText, _index2.Item, function (_ref22) {
  var theme = _ref22.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.orbit.fontWeightNormal;
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.orbit.paletteInkNormal;
}, _index3.default.largeMobile((0, _styledComponents.css)(["color:", ";font-size:", ";font-weight:", ";margin-bottom:0;& ", ",", "{color:", ";font-weight:", ";font-size:", ";}"], function (_ref25) {
  var theme = _ref25.theme;
  return theme.orbit.paletteWhite;
}, function (_ref26) {
  var theme = _ref26.theme;
  return theme.orbit.fontSizeTextSmall;
}, function (_ref27) {
  var theme = _ref27.theme;
  return theme.orbit.fontWeightMedium;
}, _index.StyledText, _index2.Item, function (_ref28) {
  var theme = _ref28.theme;
  return theme.orbit.paletteWhite;
}, function (_ref29) {
  var theme = _ref29.theme;
  return theme.orbit.fontWeightMedium;
}, function (_ref30) {
  var theme = _ref30.theme;
  return theme.orbit.fontSizeTextSmall;
})));

StyledTooltipContent.defaultProps = {
  theme: _defaultTheme.default
};

var StyledTooltipClose = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipClose",
  componentId: "sc-1umu28w-3"
})(["", ""], _index3.default.largeMobile((0, _styledComponents.css)(["display:none;visibility:hidden;"])));

StyledTooltipClose.defaultProps = {
  theme: _defaultTheme.default
};

var StyledTooltipOverlay = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipOverlay",
  componentId: "sc-1umu28w-4"
})(["position:fixed;display:block;visibility:", ";width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-color:rgba(23,27,30,0.6);z-index:10011;opacity:", ";transition:opacity ", " ease-in-out,visibility ", " linear ", ";", ";"], function (_ref31) {
  var shownMobile = _ref31.shownMobile;
  return shownMobile ? "visible" : "hidden";
}, function (_ref32) {
  var shownMobile = _ref32.shownMobile;
  return shownMobile ? "1" : "0";
}, function (_ref33) {
  var theme = _ref33.theme;
  return theme.orbit.durationNormal;
}, function (_ref34) {
  var theme = _ref34.theme;
  return theme.orbit.durationFast;
}, function (_ref35) {
  var shownMobile = _ref35.shownMobile,
      theme = _ref35.theme;
  return !shownMobile && theme.orbit.durationNormal;
}, _index3.default.largeMobile((0, _styledComponents.css)(["display:none;visibility:hidden;"])));

StyledTooltipOverlay.defaultProps = {
  theme: _defaultTheme.default
};

var TooltipContent = function TooltipContent(_ref36) {
  var dataTest = _ref36.dataTest,
      shownMobile = _ref36.shownMobile,
      shown = _ref36.shown,
      size = _ref36.size,
      tooltipId = _ref36.tooltipId,
      children = _ref36.children,
      onClose = _ref36.onClose,
      onCloseMobile = _ref36.onCloseMobile,
      onEnter = _ref36.onEnter,
      preferredPosition = _ref36.preferredPosition,
      containerRef = _ref36.containerRef;
  var theme = (0, _useTheme.default)();
  var overlay = (0, _react.useRef)(null);
  var tooltip = (0, _react.useRef)(null);
  var content = (0, _react.useRef)(null);

  var _useMemo = (0, _react.useMemo)(function () {
    return (0, _sortPositionsAndAligns.default)(preferredPosition, theme);
  }, [preferredPosition, theme]),
      _useMemo2 = _slicedToArray(_useMemo, 2),
      positions = _useMemo2[0],
      aligns = _useMemo2[1];

  var dimensions = (0, _useDimensions.default)({
    containerRef: containerRef,
    tooltip: tooltip,
    content: content
  }, children);
  var position = (0, _react.useMemo)(function () {
    return (0, _calculateTooltipPosition.default)(positions, dimensions);
  }, [dimensions, positions]);
  var align = (0, _react.useMemo)(function () {
    return (0, _calculateTooltipAlign.default)(position, aligns, dimensions);
  }, [aligns, dimensions, position]);
  var handleClickOutside = (0, _react.useCallback)(function (ev) {
    ev.stopPropagation();

    if (ev.target === overlay.current) {
      onCloseMobile();
    }
  }, [onCloseMobile]);
  return _react.default.createElement(StyledTooltip, {
    "data-test": dataTest
  }, _react.default.createElement(StyledTooltipOverlay, {
    shownMobile: shownMobile,
    ref: overlay,
    onClick: handleClickOutside
  }), _react.default.createElement(StyledTooltipWrapper, {
    shown: shown && position && align,
    shownMobile: shownMobile,
    size: size,
    align: align,
    position: position,
    ref: tooltip,
    containerTop: dimensions.containerTop,
    containerLeft: dimensions.containerLeft,
    containerHeight: dimensions.containerHeight,
    containerWidth: dimensions.containerWidth,
    tooltipHeight: dimensions.tooltipHeight,
    tooltipWidth: dimensions.tooltipWidth,
    contentHeight: dimensions.contentHeight,
    role: "tooltip",
    "aria-hidden": !shown && !shownMobile,
    id: tooltipId,
    onMouseEnter: onEnter,
    onMouseLeave: onClose
  }, _react.default.createElement(StyledTooltipContent, {
    ref: content
  }, children), _react.default.createElement(StyledTooltipClose, null, _react.default.createElement(_Button.default, {
    type: "secondary",
    block: true,
    onClick: onCloseMobile
  }, _react.default.createElement(_Translate.default, {
    tKey: "button_close"
  })))));
};

var _default = TooltipContent;
exports.default = _default;