f3f5018f71
Summary: Note There is currently an issue with myles https://fb.workplace.com/groups/myles.search/permalink/1446945366079946/?notif_id=1688467057742844¬if_t=video_processed&ref=notif Reviewed By: lblasa Differential Revision: D47210290 fbshipit-source-id: 584435922610e5138a6c14543163fcf3a347a727
51 lines
1.6 KiB
TypeScript
51 lines
1.6 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, Layout} 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;
|
|
icon?: React.ReactNode;
|
|
onClick?: () => void;
|
|
}> = ({text, onClick, icon}) => {
|
|
const instance = usePlugin(plugin);
|
|
|
|
const isMenuOpen = useValue(instance.uiState.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
|
|
disabled={onClick == null}
|
|
onClick={() => {
|
|
onClick?.();
|
|
instance.uiState.isContextMenuOpen.set(false);
|
|
}}>
|
|
<Layout.Horizontal center gap="small">
|
|
{icon}
|
|
{text}
|
|
</Layout.Horizontal>
|
|
</Menu.Item>
|
|
);
|
|
};
|