Use new drop down api for wireframe mode

Reviewed By: lblasa

Differential Revision: D48910673

fbshipit-source-id: 74a1ca0fc096d4619d281a2ed4175c5d90e551a4

desktop/plugins/public/ui-debugger/components/shared/SelectableDropDownItem.tsx

@@ -1,37 +0,0 @@
-/**
- * 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 {theme} from 'flipper-plugin';
-import React from 'react';
-
-export function SelectableDropDownItem<T>({
-  value,
-  selectedValue,
-  onSelect,
-  text,
-}: {
-  value: T;
-  selectedValue: T;
-  onSelect: (value: T) => void;
-  text: string;
-}) {
-  return (
-    <Menu.Item
-      style={{
-        color:
-          value === selectedValue ? theme.primaryColor : theme.textColorActive,
-      }}
-      onClick={() => {
-        onSelect(value);
-      }}>
-      {text}
-    </Menu.Item>
-  );
-}

desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx

@@ -21,7 +21,6 @@ import {
 import {tracker} from '../../utils/tracker';
 import {debounce} from 'lodash';
 import {WireFrameMode} from '../../DesktopTypes';
-import {SelectableDropDownItem} from '../shared/SelectableDropDownItem';
 export type TargetModeState =
   | {
       state: 'selected';
@@ -35,6 +34,16 @@ export type TargetModeState =
       state: 'disabled';
     };
 
+function createItem(wireframeMode: WireFrameMode, label: string) {
+  return {key: wireframeMode, label: label};
+}
+
+const wireFrameModeDropDownItems = [
+  createItem('All', 'All'),
+  createItem('SelectedAndChildren', 'Selected and children'),
+  createItem('SelectedOnly', 'Selected only'),
+];
+
 export function VisualiserControls({
   targetMode,
   setTargetMode,
@@ -98,28 +107,14 @@ export function VisualiserControls({
 
       <Layout.Horizontal gap="medium" center>
         <Dropdown
-          overlay={
+          menu={{
-            <Menu>
+            selectable: true,
-              <SelectableDropDownItem
+            selectedKeys: [wireFrameMode],
-                onSelect={onSetWireFrameMode}
+            items: wireFrameModeDropDownItems,
-                text="All"
+            onSelect: (event) => {
-                selectedValue={wireFrameMode}
+              onSetWireFrameMode(event.selectedKeys[0] as WireFrameMode);
-                value="All"
+            },
-              />
+          }}>
-              <SelectableDropDownItem
-                onSelect={onSetWireFrameMode}
-                text="Selected and children"
-                selectedValue={wireFrameMode}
-                value="SelectedAndChildren"
-              />
-              <SelectableDropDownItem
-                onSelect={onSetWireFrameMode}
-                text="Selected only"
-                selectedValue={wireFrameMode}
-                value="SelectedOnly"
-              />
-            </Menu>
-          }>
           <Tooltip title="Wireframe Mode">
             <Button shape="circle">
               <PicCenterOutlined />