UNPKG

2.44 kBJavaScriptView Raw
1import { __rest } from "tslib";
2import * as React from 'react';
3import styles from '@patternfly/react-styles/css/components/Menu/menu';
4import { css } from '@patternfly/react-styles';
5import { MenuContext } from './MenuContext';
6export const MenuContent = React.forwardRef((props, ref) => {
7 const { getHeight, children, menuHeight, maxMenuHeight } = props, rest = __rest(props, ["getHeight", "children", "menuHeight", "maxMenuHeight"]);
8 const menuContentRef = React.createRef();
9 const refCallback = (el, menuId, onGetMenuHeight) => {
10 if (el) {
11 let clientHeight = el.clientHeight;
12 // if this menu is a submenu, we need to account for the root menu list's padding and root menu content's border.
13 let rootMenuList = null;
14 let parentEl = el.closest(`.${styles.menuList}`);
15 while (parentEl !== null && parentEl.nodeType === 1) {
16 if (parentEl.classList.contains(styles.menuList)) {
17 rootMenuList = parentEl;
18 }
19 parentEl = parentEl.parentElement;
20 }
21 if (rootMenuList) {
22 const rootMenuListStyles = getComputedStyle(rootMenuList);
23 const rootMenuListPaddingOffset = parseFloat(rootMenuListStyles.getPropertyValue('padding-top').replace(/px/g, '')) +
24 parseFloat(rootMenuListStyles.getPropertyValue('padding-bottom').replace(/px/g, '')) +
25 parseFloat(getComputedStyle(rootMenuList.parentElement)
26 .getPropertyValue('border-bottom-width')
27 .replace(/px/g, ''));
28 clientHeight = clientHeight + rootMenuListPaddingOffset;
29 }
30 onGetMenuHeight && onGetMenuHeight(menuId, clientHeight);
31 getHeight && getHeight(clientHeight.toString());
32 }
33 return ref || menuContentRef;
34 };
35 return (React.createElement(MenuContext.Consumer, null, ({ menuId, onGetMenuHeight }) => (React.createElement("div", Object.assign({}, rest, { className: css(styles.menuContent, props.className), ref: el => refCallback(el, menuId, onGetMenuHeight), style: Object.assign(Object.assign({}, (menuHeight && { '--pf-c-menu__content--Height': menuHeight })), (maxMenuHeight && { '--pf-c-menu__content--MaxHeight': maxMenuHeight })) }), children))));
36});
37MenuContent.displayName = 'MenuContent';
38//# sourceMappingURL=MenuContent.js.map
\No newline at end of file