Extract framework event tree select

Summary: we will reuse this

Reviewed By: lblasa

Differential Revision: D48318965

fbshipit-source-id: a5d04481a02e18a2d709f79524aa7449a5b87844

desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx

@@ -9,16 +9,7 @@
 
 import React, {useState} from 'react';
 import {plugin} from '../../index';
-import {
-  Button,
-  Input,
-  Modal,
-  Tooltip,
-  Typography,
-  TreeSelect,
-  Space,
-  Switch,
-} from 'antd';
+import {Button, Input, Modal, Tooltip, Typography, Space, Switch} from 'antd';
 import {
   EyeOutlined,
   PauseCircleOutlined,
@@ -27,6 +18,10 @@ import {
 } from '@ant-design/icons';
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
 import {FrameworkEventType} from '../../ClientTypes';
+import {
+  buildTreeSelectData,
+  FrameworkEventsTreeSelect,
+} from '../shared/FrameworkEventsTreeSelect';
 
 export const TreeControls: React.FC = () => {
   const instance = usePlugin(plugin);
@@ -133,28 +128,11 @@ function FrameworkEventsMonitoringModal({
           of matching events in the tree
         </Typography.Text>
 
-        <TreeSelect
-          treeCheckable
-          showSearch={false}
-          showCheckedStrategy={TreeSelect.SHOW_PARENT}
+        <FrameworkEventsTreeSelect
           placeholder="Select node types to monitor"
-          virtual={false} //for scrollbar
-          style={{
-            width: '100%',
-          }}
+          onSetEventSelected={onSetEventMonitored}
+          selected={selectedFrameworkEvents}
           treeData={treeData}
-          treeDefaultExpandAll
-          value={selectedFrameworkEvents}
-          onSelect={(_: any, node: any) => {
-            for (const leaf of getAllLeaves(node)) {
-              onSetEventMonitored(leaf, true);
-            }
-          }}
-          onDeselect={(_: any, node: any) => {
-            for (const leaf of getAllLeaves(node)) {
-              onSetEventMonitored(leaf, false);
-            }
-          }}
         />
 
         <Layout.Horizontal gap="medium">
@@ -172,80 +150,3 @@ function FrameworkEventsMonitoringModal({
     </Modal>
   );
 }
-
-type TreeSelectNode = {
-  title: string;
-  key: string;
-  value: string;
-  children: TreeSelectNode[];
-};
-
-/**
- * In tree select you can select a parent which implicitly selects all children, we find them all here as the real state
- * is in terms of the leaf nodes
- */
-function getAllLeaves(treeSelectNode: TreeSelectNode) {
-  const result: string[] = [];
-  function getAllLeavesRec(node: TreeSelectNode) {
-    if (node.children.length > 0) {
-      for (const child of node.children) {
-        getAllLeavesRec(child);
-      }
-    } else {
-      result.push(node.key);
-    }
-  }
-  getAllLeavesRec(treeSelectNode);
-  return result;
-}
-
-/**
- * transformed flat event type data structure into tree
- */
-function buildTreeSelectData(eventTypes: string[]): TreeSelectNode[] {
-  const root: TreeSelectNode = buildTreeSelectNode('root', 'root');
-
-  eventTypes.forEach((eventType) => {
-    const eventSubtypes = eventType.split(':');
-    let currentNode = root;
-
-    // Find the parent node for the current id
-    for (let i = 0; i < eventSubtypes.length - 1; i++) {
-      let foundChild = false;
-      for (const child of currentNode.children) {
-        if (child.title === eventSubtypes[i]) {
-          currentNode = child;
-          foundChild = true;
-          break;
-        }
-      }
-      if (!foundChild) {
-        const newNode: TreeSelectNode = buildTreeSelectNode(
-          eventSubtypes[i],
-          eventSubtypes.slice(0, i + 1).join(':'),
-        );
-
-        currentNode.children.push(newNode);
-        currentNode = newNode;
-      }
-    }
-    // Add the current id as a child of the parent node
-    currentNode.children.push(
-      buildTreeSelectNode(
-        eventSubtypes[eventSubtypes.length - 1],
-        eventSubtypes.slice(0, eventSubtypes.length).join(':'),
-      ),
-    );
-  });
-
-  return root.children;
-}
-
-function buildTreeSelectNode(title: string, fullValue: string): TreeSelectNode {
-  return {
-    title: title,
-    key: fullValue,
-    value: fullValue,
-    children: [],
-  };
-}