lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
944 stars 74 forks source link

Is there a way to rename/update node item from custom data provider? #248

Closed Nishchit14 closed 1 year ago

Nishchit14 commented 1 year ago

Is your feature request related to a problem? Please describe. I have created a collection of Messages shown in the below screenshot. Where the item node holds Title and Sub Title. The functionality is like if Someone will change the title/subtitle from the team then collaboratively it would reflect in every team member's dashboard in real-time.

image

Here are some public methods I have added in the TreeDataProvider.ts 1. this.update : This method is not working, the UI has no change

  1. this.add : this method works, add a new item in the UI tree
  2. this.delete : this method works, delete a item in the UI tree

    
    /**
    * this.update({}).  THIS METHOD IS NOT WORKING.
    * The `Title` or `SubTitle` are not being updated upon this method call in UI.
    **/
    public update(item: TItem) {
    this.items = this.items.map((itm: TItem) => {
      if (itm.id == item.id) {
        return  {
          ...itm,
          title: item.title,
          subTitle: item.subTitle
        };
      }
      return itm;
    });
    this.emitter.emit(ETreeEventTypes.itemChanged, ['root', item.parentId]);
    }
    
    // this.add({...item}).  THIS METHOD WORKS PERFECTLY.
    public add(item: TItem) {
    this.items.push(item);
     this.emitter.emit(ETreeEventTypes.itemChanged, ['root', item.parentId]);
    }

// this.delete(id). THIS METHOD WORKS PERFECTLY. public delete(id: TId) { const item = this.items.find((i) => i.id == id); if (!item) return; this.items = this.items.filter((i) => i.id != id); this.emitter.emit(ETreeEventTypes.itemChanged, ['root', item.parentId]); }



Is there any other way to update specific tree node/item data programmatically from the data provider instance? Or any way to refresh/reload the tree by initializing a new set of data from the data provider instance?

thanks in advance!!
lukasbach commented 1 year ago

In the update call, can you try to change the emit call to

this.emitter.emit(ETreeEventTypes.itemChanged, ['root', item.id]);

So emitting an update for the item that is changed, not its parent. Also I'm not sure you need to notify RCT of the update of the root item.

Nishchit14 commented 1 year ago

It works now, I misunderstood the itemChanged event. Thank you @lukasbach