3891a5d61b
Summary: The old layout plugins target mode would ask you which view you wanted to select when you clicked, the visualiser currently chooses for you based on size of the element. Sometimes this isnt what you want so I have added a context menu with all the intersecting nodes from which you can select or focus Reviewed By: lblasa Differential Revision: D47589789 fbshipit-source-id: 9c9d0d7587b830aa72089267d9bcf2b687142574
55 lines
1.8 KiB
TypeScript
55 lines
1.8 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;
|
|
onMouseEnter?: () => void;
|
|
onMouseLeave?: () => void;
|
|
}> = ({text, onClick, icon, onMouseEnter, onMouseLeave}) => {
|
|
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
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
disabled={onClick == null}
|
|
onClick={() => {
|
|
onClick?.();
|
|
instance.uiActions.onContextMenuOpen(false);
|
|
}}>
|
|
<Layout.Horizontal center gap="small">
|
|
{icon}
|
|
{text}
|
|
</Layout.Horizontal>
|
|
</Menu.Item>
|
|
);
|
|
};
|