7fc64adfd4
Summary: We have to do a couple of odd things to get the context menu items to behave. The code was duplicated between tree and visualizer. This custom component removes duplication and makes the approach a bit clearer (via js doc) Reviewed By: antonk52 Differential Revision: D41495718 fbshipit-source-id: ec98d5101e636a2c9034c656d29991d4fe348762
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {Menu} from 'antd';
|
|
import {usePlugin, useValue} from 'flipper-plugin';
|
|
import {plugin} from '../../index';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* The Menu item visibility event does not fire when a menu item is clicked.
|
|
* This is apparently by design https://github.com/ant-design/ant-design/issues/4994#issuecomment-281585872
|
|
* This component simply wraps a menu item but will ensure that the atom is set to false when an item is clicked.
|
|
* Additionally, it ensures menu items do not render when the atom is false
|
|
*/
|
|
export const UIDebuggerMenuItem: React.FC<{
|
|
text: string;
|
|
onClick: () => void;
|
|
}> = ({text, onClick}) => {
|
|
const instance = usePlugin(plugin);
|
|
|
|
const isMenuOpen = useValue(instance.isContextMenuOpen);
|
|
/**
|
|
* The menu is not a controlled component and seems to be a bit slow to close when user clicks on it.
|
|
* React may rerender the menu before it has time to close resulting in seeing an incorrect context menu for a frame.
|
|
* This is here to just hide all the menu items when the menu closes. A little strange but works well in practice.
|
|
*/
|
|
if (!isMenuOpen) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Menu.Item
|
|
onClick={() => {
|
|
onClick();
|
|
instance.isContextMenuOpen.set(false);
|
|
}}>
|
|
{text}
|
|
</Menu.Item>
|
|
);
|
|
};
|