Page MenuHomePhorge
Files F32404835

D3377.1765342545.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D3377.1765342545.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 { useRenderMenu } from '../menu-provider.react';
import css from './menu.css';
type MenuVariant = 'thread-actions' | 'member-actions';
@@ -11,53 +12,106 @@
+icon: React.Node,
+children?: React.Node,
+variant?: MenuVariant,
+ +onChange?: boolean => void,
};
function Menu(props: MenuProps): React.Node {
const [isOpen, setIsOpen] = React.useState(false);
- const { icon, children, variant = 'thread-actions' } = props;
+ const buttonRef = React.useRef();
+ const { renderMenu, setMenuPosition } = useRenderMenu();
+ const { icon, children, variant = 'thread-actions', onChange } = props;
+
+ const updatePosition = React.useCallback(() => {
+ if (buttonRef.current && isOpen) {
+ const { top, left } = buttonRef.current.getBoundingClientRect();
+ setMenuPosition({ top, left });
+ }
+ }, [isOpen, setMenuPosition]);
+
+ React.useEffect(updatePosition, [updatePosition]);
+
+ const menuActionListClasses = React.useMemo(
+ () =>
+ classnames(css.menuActionList, {
+ [css.menuActionListThreadActions]: variant === 'thread-actions',
+ [css.menuActionListMemberActions]: variant === 'member-actions',
+ }),
+ [variant],
+ );
+
+ const menuActionList = React.useMemo(() => {
+ return <div className={menuActionListClasses}>{children}</div>;
+ }, [children, menuActionListClasses]);
+
+ React.useEffect(
+ () =>
+ renderMenu(previous => {
+ if (isOpen) {
+ return menuActionList;
+ } else if (previous === menuActionList) {
+ return null;
+ } else {
+ return previous;
+ }
+ }),
+ [isOpen, menuActionList, renderMenu],
+ );
const closeMenuCallback = React.useCallback(() => {
document.removeEventListener('click', closeMenuCallback);
if (isOpen) {
setIsOpen(false);
+ renderMenu(previous => {
+ if (previous === menuActionList) {
+ return null;
+ } else {
+ return previous;
+ }
+ });
+ }
+ }, [isOpen, menuActionList, renderMenu]);
+
+ React.useEffect(() => {
+ onChange?.(isOpen);
+ }, [isOpen, onChange]);
+
+ React.useEffect(() => {
+ if (!window) {
+ return undefined;
}
- }, [isOpen]);
+
+ window.addEventListener('resize', updatePosition);
+ return () => window.removeEventListener('resize', updatePosition);
+ }, [updatePosition]);
React.useEffect(() => {
if (!document || !isOpen) {
return undefined;
}
document.addEventListener('click', closeMenuCallback);
- return () => document.removeEventListener('click', closeMenuCallback);
+ return closeMenuCallback;
}, [closeMenuCallback, isOpen]);
const switchMenuCallback = React.useCallback(() => {
+ updatePosition();
setIsOpen(isMenuOpen => !isMenuOpen);
- }, []);
+ }, [updatePosition]);
if (React.Children.count(children) === 0) {
return null;
}
- let menuActionList = null;
- if (isOpen) {
- const menuActionListClasses = classnames(css.menuActionList, {
- [css.menuActionListThreadActions]: variant === 'thread-actions',
- [css.menuActionListMemberActions]: variant === 'member-actions',
- });
-
- menuActionList = <div className={menuActionListClasses}>{children}</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
Wed, Dec 10, 4:55 AM (16 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5861113
Default Alt Text
D3377.1765342545.diff (3 KB)

Event Timeline