a5da6923eb
Summary: Move from a nested structure to a flatten one for data exchange, this will allow us to only send sections of the UI in the future Reviewed By: lblasa Differential Revision: D38982138 fbshipit-source-id: d578a07a6d2d7e117fbd741bd6e33062223ce10d
78 lines
1.8 KiB
TypeScript
78 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 React from 'react';
|
|
import {Id, plugin, UINode} from '../index';
|
|
import {usePlugin, useValue} from 'flipper-plugin';
|
|
import {Tree} from 'antd';
|
|
import type {DataNode} from 'antd/es/tree';
|
|
import {DownOutlined} from '@ant-design/icons';
|
|
|
|
// function treeToAntTree(uiNode: UINode): DataNode {
|
|
// return {
|
|
// key: uiNode.id,
|
|
// title: uiNode.name,
|
|
// children: uiNode.children ? uiNode.children.map(treeToAntTree) : [],
|
|
// };
|
|
// }
|
|
|
|
// function treeToMap(uiNode: UINode): Map<Id, UINode> {
|
|
// const result = new Map<Id, UINode>();
|
|
//
|
|
// function treeToMapRec(node: UINode): void {
|
|
// result.set(node.id, node);
|
|
// for (const child of node.children) {
|
|
// treeToMapRec(child);
|
|
// }
|
|
// }
|
|
//
|
|
// treeToMapRec(uiNode);
|
|
//
|
|
// return result;
|
|
// }
|
|
|
|
function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): DataNode {
|
|
function uiNodeToAntNode(id: Id): DataNode {
|
|
const node = nodes.get(id);
|
|
return {
|
|
key: id,
|
|
title: node?.name,
|
|
children: node?.children.map((id) => uiNodeToAntNode(id)),
|
|
};
|
|
}
|
|
|
|
return uiNodeToAntNode(root);
|
|
}
|
|
|
|
export function Component() {
|
|
const instance = usePlugin(plugin);
|
|
const rootId = useValue(instance.rootId);
|
|
const nodes = useValue(instance.nodes);
|
|
|
|
if (rootId) {
|
|
const antTree = nodesToAntTree(rootId, nodes);
|
|
console.log(antTree);
|
|
console.log(rootId);
|
|
return (
|
|
<Tree
|
|
showIcon
|
|
showLine
|
|
onSelect={(selected) => {
|
|
console.log(nodes.get(selected[0] as string));
|
|
}}
|
|
defaultExpandAll
|
|
switcherIcon={<DownOutlined />}
|
|
treeData={[antTree]}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <div>Nothing yet</div>;
|
|
}
|