@activecollab/components
Version:
ActiveCollab Components
67 lines • 2.39 kB
JavaScript
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,
onClose,
className,
style,
onKeyDown,
disableFocusLock = false,
disableScrollLock = false,
disableCloseOnEsc = false,
onClick
} = _ref,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const innerRef = useRef(null);
const handleRef = useForkRef(innerRef, ref);
const {
zIndex = layers.skyscraper
} = useLayerContext();
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