@brizy/ui
Version:
React elements in Brizy style
47 lines (46 loc) • 2.17 kB
JavaScript
import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
import AntPopover from "antd/lib/popover";
import { FrameContentContext } from "../Frame/FrameContent";
import { Item } from "./Item";
import { getOverlayProperties } from "./utils";
import { BRZ_PREFIX } from "../constants";
export const Dropdown = ({ content, contentWidth, offset: overlayOffset, children, opened, placement = "bottomLeft", getContainer, onOpenedChange, }) => {
const [width, setWidth] = useState(0);
const context = useContext(FrameContentContext);
const itemRef = useRef(null);
const handleGetContainer = () => {
if (typeof getContainer === "function") {
return getContainer();
}
if (context.node) {
return context.node;
}
return document.body;
};
const selectedProps = {};
if (opened !== undefined) {
selectedProps.visible = opened;
}
const updateWidth = useCallback(() => {
const node = itemRef.current;
if (contentWidth === "fullWidth" && node) {
setWidth(node.getBoundingClientRect().width);
}
}, [contentWidth]);
useEffect(updateWidth, [contentWidth, updateWidth]);
useEffect(() => {
if (contentWidth === "fullWidth") {
window.addEventListener("resize", updateWidth);
}
else {
window.removeEventListener("resize", updateWidth);
}
return () => {
window.removeEventListener("resize", updateWidth);
};
}, [contentWidth, updateWidth]);
const overlayWidth = contentWidth === "fullWidth" ? width : contentWidth;
return (React.createElement(AntPopover, Object.assign({ destroyTooltipOnHide: true, overlayStyle: getOverlayProperties(overlayWidth, overlayOffset), placement: placement, align: { offset: [0] }, overlayClassName: `${BRZ_PREFIX}-dropdown`, content: content, trigger: "click", getPopupContainer: handleGetContainer, onVisibleChange: onOpenedChange }, selectedProps),
React.createElement("div", { ref: itemRef, className: `${BRZ_PREFIX}-dropdown-wrapper` }, children)));
};
Dropdown.Item = Item;