@activecollab/components
Version:
ActiveCollab Components
133 lines • 4.23 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
import React, { forwardRef, useCallback, useRef, useEffect, useState } from "react";
import { createPopper } from "@popperjs/core";
import { StyledPopper } from "./Styles";
import useForkRef from "../../utils/useForkRef";
export const Popper = /*#__PURE__*/forwardRef((_ref, ref) => {
let children = _ref.children,
anchorEl = _ref.anchorEl,
_ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
style = _ref.style,
_ref$transition = _ref.transition,
transition = _ref$transition === void 0 ? false : _ref$transition,
_ref$placement = _ref.placement,
initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
_ref$strategy = _ref.strategy,
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
afterWrite = _ref.afterWrite,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const _useState = useState(true),
exited = _useState[0],
setExited = _useState[1];
const _useState2 = useState(initialPlacement),
placement = _useState2[0],
setPlacement = _useState2[1];
const ownRef = useRef(null);
const popperRef = useRef();
const handleInnerRef = useForkRef(ownRef, ref);
const handlePopperUpdate = data => {
setPlacement(data.placement || "bottom");
};
const handleOpen = useCallback(() => {
if (!ownRef.current || !anchorEl || !open) {
return;
}
if (popperRef.current) {
popperRef.current.destroy();
}
const modifiers = [{
name: "hide",
enabled: true,
phase: "main",
fn: () => {
const referenceElement = anchorEl;
let currentElement = referenceElement;
let isHidden = false;
while (currentElement) {
const computedStyle = getComputedStyle(currentElement);
if (computedStyle.display === "none" || computedStyle.visibility === "hidden") {
isHidden = true;
break;
}
currentElement = currentElement.parentElement;
}
if (isHidden) {
var _ownRef$current;
(_ownRef$current = ownRef.current) == null || _ownRef$current.setAttribute("data-popper-reference-hidden", "");
} else {
var _ownRef$current2;
(_ownRef$current2 = ownRef.current) == null || _ownRef$current2.removeAttribute("data-popper-reference-hidden");
}
}
}];
if (typeof afterWrite === "function") {
modifiers.push({
phase: "afterWrite",
enabled: true,
name: "popper-after-write",
fn: afterWrite
});
}
popperRef.current = createPopper(anchorEl, ownRef.current, {
placement,
onFirstUpdate: handlePopperUpdate,
strategy,
modifiers
});
}, [afterWrite, anchorEl, open, placement, strategy]);
const handleClose = () => {
if (!popperRef.current) {
return;
}
popperRef.current.destroy();
};
const handleRef = useCallback(node => {
handleInnerRef(node);
handleOpen();
}, [handleOpen, handleInnerRef]);
const handleEnter = () => {
setExited(false);
};
const handleExited = () => {
setExited(true);
handleClose();
};
useEffect(() => {
return () => {
handleClose();
};
}, []);
useEffect(() => {
if (!open && !transition) {
handleClose();
}
}, [open, transition]);
useEffect(() => {
if (popperRef.current) {
popperRef.current.update();
}
});
if (!open && (!transition || exited)) {
return null;
}
const childProps = {
placement
};
if (transition) {
childProps.transitionProps = {
in: open,
onEnter: handleEnter,
onExited: handleExited
};
}
return /*#__PURE__*/React.createElement(StyledPopper, _extends({
ref: handleRef
}, rest, {
style: _extends({}, style)
}), typeof children === "function" ? children(childProps) : children);
});
Popper.displayName = "Popper";
//# sourceMappingURL=Popper.js.map