natetewelde
commented
1 year ago Can confirm. After trying what you said by using the StaticTreeDataProvider as reference, the event emitter is not exported.
Closed tsingson closed 1 year ago
natetewelde
commented
1 year ago Can confirm. After trying what you said by using the StaticTreeDataProvider as reference, the event emitter is not exported.
lukasbach
commented
1 year ago The event emitter class is a very thin and simple sample implementation of any event emitter, there are plenty of libraries out there that provide something like that that you can use, or you can use your own implementation, you don't really need more than just an array or a record to get the same behaviour.
I would rather not export the existing event emitter in RCT, since it really doesn't have anything to do with the library, and would just expose innards from how RCT works. I saw similar issues with other libraries, where they exported some random internal utility for convenience, and when they internally stopped using it, they weren't able to get rid of it because what would normaly be just an internal refactor suddenly became a major breaking change since many people started using an exported symbol that didn't have anything to do with the library. I hope you understand my reasoning.
You could use mini-signals, or use a simple custom implementation like this record:
export class StaticTreeDataProvider<T = any> implements TreeDataProvider {
private data: ExplicitDataSource;
private handlers: Record<string, (changedItemIds: TreeItemIndex[]) => void> = {};
private setItemName?: (item: TreeItem<T>, newName: string) => TreeItem<T>;
constructor(
items: Record<TreeItemIndex, TreeItem<T>>,
setItemName?: (item: TreeItem<T>, newName: string) => TreeItem<T>
) {
this.data = { items };
this.setItemName = setItemName;
}
public async getTreeItem(itemId: TreeItemIndex): Promise<TreeItem> {
return this.data.items[itemId];
}
public async onChangeItemChildren(itemId: TreeItemIndex, newChildren: TreeItemIndex[]): Promise<void> {
this.data.items[itemId].children = newChildren;
Object.values(this.handlers).forEach((handler) => handler([itemId]));
}
public onDidChangeTreeData(listener: (changedItemIds: TreeItemIndex[]) => void): Disposable {
const id = (Math.random() + 1).toString(36).substring(7);
this.handlers[id] = listener;
return { dispose: () => delete this.handlers[id] };
}
public async onRenameItem(item: TreeItem<any>, name: string): Promise<void> {
if (this.setItemName) {
this.data.items[item.index] = this.setItemName(item, name);
}
}
}
tsingson
commented
1 year ago 事件发射器类是任何事件发射器的一个非常精简和简单的示例实现，有很多库提供类似的东西供您使用，或者您可以使用自己的实现，您实际上只需要只是一个数组或一个记录来获得相同的行为。
我宁愿不在 RCT 中导出现有的事件发射器，因为它实际上与库没有任何关系，只会暴露 RCT 工作原理的内部结构。我在其他库中看到了类似的问题，为了方便，他们导出了一些随机的内部实用程序，当他们在内部停止使用它时，他们无法摆脱它，因为通常只是一个内部重构突然变成了一个重大问题更改，因为许多人开始使用与库没有任何关系的导出符号。我希望你明白我的推理。
您可以使用mini-signals，或使用像这样的记录的简单自定义实现：
export class StaticTreeDataProvider<T = any> implements TreeDataProvider { private data: ExplicitDataSource; private handlers: Record<string, (changedItemIds: TreeItemIndex[]) => void> = {}; private setItemName?: (item: TreeItem<T>, newName: string) => TreeItem<T>; constructor( items: Record<TreeItemIndex, TreeItem<T>>, setItemName?: (item: TreeItem<T>, newName: string) => TreeItem<T> ) { this.data = { items }; this.setItemName = setItemName; } public async getTreeItem(itemId: TreeItemIndex): Promise<TreeItem> { return this.data.items[itemId]; } public async onChangeItemChildren(itemId: TreeItemIndex, newChildren: TreeItemIndex[]): Promise<void> { this.data.items[itemId].children = newChildren; Object.values(this.handlers).forEach((handler) => handler([itemId])); } public onDidChangeTreeData(listener: (changedItemIds: TreeItemIndex[]) => void): Disposable { const id = (Math.random() + 1).toString(36).substring(7); this.handlers[id] = listener; return { dispose: () => delete this.handlers[id] }; } public async onRenameItem(item: TreeItem<any>, name: string): Promise<void> { if (this.setItemName) { this.data.items[item.index] = this.setItemName(item, name); } } }
agree. thanks for reply.
lukasbach
commented
7 months ago FYI, I expanded the docs on static data providers and on custom data providers, those are now the official points in the docs that provide details on that manner, alongside a sample implementation for custom data providers.
example data provider:
example static data for demo only:
example 2 tree via drag and drop