@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive/index.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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

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

var _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));

var _useStateWithTimeout = _interopRequireDefault(require("../../hooks/useStateWithTimeout"));

var _Portal = _interopRequireDefault(require("../../Portal"));

var _TooltipPrimitive = require("../TooltipPrimitive");

var _DialogContent = _interopRequireDefault(require("./components/DialogContent"));

const MobileDialog = ({
  children,
  enabled = true,
  renderInPortal = true,
  tabIndex = "0",
  dataTest,
  content,
  stopPropagation = false,
  removeUnderlinedText,
  block = false,
  lockScrolling
}) => {
  const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = (0, _useStateWithTimeout.default)(false, 200);
  const [shown, setshown, setshownWithTimeout] = (0, _useStateWithTimeout.default)(false, 200);
  const mobileDialogID = (0, _useRandomId.default)();
  const handleInMobile = React.useCallback(ev => {
    ev.preventDefault();

    if (stopPropagation) {
      ev.stopPropagation();
    }

    setRender(true);
    setshownWithTimeout(true);
    clearRenderTimeout();
  }, [clearRenderTimeout, setRender, setshownWithTimeout, stopPropagation]);
  const handleOutMobile = React.useCallback(ev => {
    if (stopPropagation) {
      ev.stopPropagation();
    }

    setshown(false);
    setRenderWithTimeout(false);
  }, [setRenderWithTimeout, setshown, stopPropagation]);
  if (!enabled) return children;
  const dialog = /*#__PURE__*/React.createElement(_DialogContent.default, {
    dataTest: dataTest,
    shown: shown,
    lockScrolling: lockScrolling,
    dialogId: mobileDialogID,
    onClose: handleOutMobile
  }, content);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_TooltipPrimitive.StyledTooltipChildren, {
    onClick: handleInMobile,
    "aria-describedby": enabled ? mobileDialogID : undefined,
    tabIndex: enabled ? tabIndex : undefined,
    enabled: enabled,
    removeUnderlinedText: removeUnderlinedText,
    block: block
  }, children), enabled && render && (renderInPortal ? /*#__PURE__*/React.createElement(_Portal.default, {
    renderInto: "dialogs"
  }, dialog) : dialog));
};

var _default = MobileDialog;
exports.default = _default;