@activecollab/components/dist/esm/components/Window/Window.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
import React, { useCallback, useRef, forwardRef } from "react";
import FocusLock from "react-focus-lock";
import { RemoveScroll } from "react-remove-scroll";
import classnames from "classnames";
import { StyledWindow } from "./Style";
import { Portal, useLayerContext } from "../../helpers";
import { layers } from "../../utils";
import useForkRef from "../../utils/useForkRef";
const returnFocus = {
  preventScroll: true
};
export const Window = /*#__PURE__*/forwardRef((_ref, ref) => {
  let children = _ref.children,
    onClose = _ref.onClose,
    className = _ref.className,
    style = _ref.style,
    onKeyDown = _ref.onKeyDown,
    _ref$disableFocusLock = _ref.disableFocusLock,
    disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
    _ref$disableScrollLoc = _ref.disableScrollLock,
    disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
    _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
    disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
    onClick = _ref.onClick,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  const innerRef = useRef(null);
  const handleRef = useForkRef(innerRef, ref);
  const _useLayerContext = useLayerContext(),
    _useLayerContext$zInd = _useLayerContext.zIndex,
    zIndex = _useLayerContext$zInd === void 0 ? layers.skyscraper : _useLayerContext$zInd;
  const handleKeyDown = useCallback(event => {
    if (!event.defaultPrevented && (event.key === "Esc" || event.key === "Escape") && !disableCloseOnEsc) {
      event.preventDefault();
      if (onClose) {
        onClose();
      }
    }
    if (typeof onKeyDown === "function") {
      onKeyDown(event);
    }
  }, [disableCloseOnEsc, onClose, onKeyDown]);
  const handleClick = useCallback(event => {
    event == null || event.stopPropagation();
    typeof onClick === "function" && onClick(event);
  }, [onClick]);
  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusLock, {
    returnFocus: returnFocus,
    disabled: disableFocusLock
  }, /*#__PURE__*/React.createElement(RemoveScroll, {
    forwardProps: true,
    ref: handleRef,
    enabled: !disableScrollLock,
    noIsolation: true
  }, /*#__PURE__*/React.createElement(StyledWindow, _extends({}, rest, {
    style: _extends({
      zIndex
    }, style),
    onKeyDown: handleKeyDown,
    tabIndex: 0,
    className: classnames("c-window", className),
    onClick: handleClick
  }), children))));
});
Window.displayName = "Window";
//# sourceMappingURL=Window.js.map