Page MenuHomePhorge
Files F33099975

D3377.1768471105.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D3377.1768471105.diff
View Options

diff --git a/web/components/menu.react.js b/web/components/menu.react.js
--- a/web/components/menu.react.js
+++ b/web/components/menu.react.js
@@ -3,6 +3,7 @@
import classnames from 'classnames';
import * as React from 'react';
+import { useMenuPortalContext } from '../menu-portal-provider.react';
import css from './menu.css';
type MenuPosition = 'left' | 'right' | 'bottom';
@@ -14,19 +15,32 @@
position?: MenuPosition,
size?: MenuSize,
light?: boolean,
+ onChange?: boolean => void,
};
function Menu(props: MenuProps): React.Node {
const [isOpen, setIsOpen] = React.useState(false);
+ const [buttonPosition, setButtonPosition] = React.useState(null);
+ const buttonRef = React.useRef();
+ const { renderInMenuPortal } = useMenuPortalContext();
const {
icon,
children,
position = 'bottom',
size = 'medium',
light = false,
+ onChange,
} = props;
+ const updatePosition = React.useCallback(() => {
+ if (buttonRef.current) {
+ setButtonPosition(buttonRef.current.getBoundingClientRect());
+ }
+ }, []);
+
+ React.useEffect(updatePosition, [updatePosition]);
+
const closeMenuCallback = React.useCallback(() => {
document.removeEventListener('click', closeMenuCallback);
if (isOpen) {
@@ -34,6 +48,20 @@
}
}, [isOpen]);
+ React.useEffect(() => {
+ if (onChange) {
+ onChange(isOpen);
+ }
+ }, [isOpen, onChange]);
+
+ React.useEffect(() => {
+ if (!window) {
+ return undefined;
+ }
+
+ window.addEventListener('resize', updatePosition);
+ return () => window.removeEventListener('resize', updatePosition);
+ });
React.useEffect(() => {
if (!document || !isOpen) {
return undefined;
@@ -43,8 +71,9 @@
}, [closeMenuCallback, isOpen]);
const switchMenuCallback = React.useCallback(() => {
+ updatePosition();
setIsOpen(isMenuOpen => !isMenuOpen);
- }, []);
+ }, [updatePosition]);
if (children.length === 0) {
return null;
@@ -60,20 +89,30 @@
[css.menuActionListLight]: light,
});
- menuActionList = (
- <div className={css.menuActionListContainer}>
+ const actionListStyle = buttonPosition
+ ? {
+ top: buttonPosition.top,
+ left: buttonPosition.left,
+ }
+ : {};
+ menuActionList = renderInMenuPortal(
+ <div style={actionListStyle} className={css.menuActionListContainer}>
<div className={menuActionListClasses}>{children}</div>
- </div>
+ </div>,
);
}
return (
- <div>
- <button className={css.menuButton} onClick={switchMenuCallback}>
+ <>
+ <button
+ ref={buttonRef}
+ className={css.menuButton}
+ onClick={switchMenuCallback}
+ >
{icon}
</button>
{menuActionList}
- </div>
+ </>
);
}

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 9:58 AM (17 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5937237
Default Alt Text
D3377.1768471105.diff (2 KB)

Event Timeline