jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix context menu for nested/overlapping elements

Browse Source 
Summary:
Previously if you activated context menu in detail inspector it would trigger a context menu for multiple
overlapping children. This behaviour can be observed in live by right clicking a nested property an selecting 'Copy value'.
Most of the time you will copy the entire tree as you are clicking on the parents context menu. This is
the solution recommended by the antd team. https://github.com/ant-design/ant-design/issues/33865 (see the
response fiddle from the maintainer)

changelog: Fixed bug when copying value from context menu in detail sidebar

Reviewed By: mweststrate

Differential Revision: D36781555

fbshipit-source-id: 010a04648eb90eb19a47aa0f1f2b0427c9f5f7cc
This commit is contained in:
Luke De Feo
2022-06-07 04:29:16 -07:00
committed by Facebook GitHub Bot
parent 0200afca51
commit ae0a89c580
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx
View File

@@ -18,6 +18,7 @@ import {
createContext, createContext,
useContext, useContext,
ReactElement, ReactElement,
SyntheticEvent,
} from 'react'; } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import DataPreview, {DataValueExtractor, InspectorName} from './DataPreview'; import DataPreview, {DataValueExtractor, InspectorName} from './DataPreview';
@@ -621,6 +622,7 @@ export const DataInspectorNode: React.FC<DataInspectorProps> = memo(
return ( return (
<Dropdown overlay={getContextMenu} trigger={contextMenuTrigger}> <Dropdown overlay={getContextMenu} trigger={contextMenuTrigger}>
<BaseContainer <BaseContainer
onContextMenu={stopPropagation}
depth={depth} depth={depth}
disabled={!!setValueProp && !!setValue === false}> disabled={!!setValueProp && !!setValue === false}>
<PropertyContainer onClick={isExpandable ? handleClick : undefined}> <PropertyContainer onClick={isExpandable ? handleClick : undefined}>
@@ -716,3 +718,8 @@ function isValueExpandable(data: any) {
typeof data === 'object' && data !== null && Object.keys(data).length > 0 typeof data === 'object' && data !== null && Object.keys(data).length > 0
); );
} }
function stopPropagation(e: SyntheticEvent) {
//without this the parent element will receive the context menu event and multiple context menus overlap
e.stopPropagation();
}