exposed recomputeTree method to nodes

[viktor89]

I have a bit of a complex app with drag and drop features within the tree. I need to chain the recomputeTree method in different places. As far as I could see, the ref-methods are not exposed from your Tree components. Would you mind taking a look at this PR? Does this implementation make sense to you?

[Lodin]

Hi @viktor89! Thank you for your contribution.

I think you can do that without changing the source code. It would look like the following:

const Node = ({
  data: {isLeaf, name},
  isOpen,
  // receives the data sent by the `itemData` property of the Tree component
  treeData: {treeRef},
  style,
  toggle,
}) => (
  <div style={style}>
    {!isLeaf && (
      <button type="button" onClick={toggle}>
        {isOpen ? '-' : '+'}
      </button>
    )}
    <div>{name}</div>
    <div>
      <button onClick={async () => {
        await treeRef.current.recomputeTree();
      }}>
        Click Me
      </button>
  </div>
);

const Example = () => {
  const ref = useRef();

  return (
    <Tree
      ref={ref}
      treeWalker={treeWalker}
      // sends the data of any shape to the `treeData` property of the Node component
      itemData={{treeRef: ref}}
      itemSize={30}
      height={150}
      width={300}
    >
      {Node}
    </Tree>
  );
}

I'm trying to keep the Tree component as small as possible, so if something can be implemented in some other way, it should be.

Does it solve your case?

[viktor89]

Ah yes, of course - I didn't think of doing it that way. This absolutely solves my use case

[viktor89]

I am getting this error when calling the recomputeTree method via the treeRef now. I can't really figure out what I'm missing

FixedSizeTree.js?22f3:83 Uncaught TypeError: Cannot read property 'refreshNodes' of undefined
    at FixedSizeTree.computeTree (FixedSizeTree.js?22f3:83)
    at FixedSizeTree.eval (FixedSizeTree.js?22f3:48)
    at getStateFromUpdate (react-dom.development.js?f8c1:16277)
    at processUpdateQueue (react-dom.development.js?f8c1:16338)
    at updateClassInstance (react-dom.development.js?f8c1:11661)
    at updateClassComponent (react-dom.development.js?f8c1:14694)
    at beginWork (react-dom.development.js?f8c1:15644)
    at performUnitOfWork (react-dom.development.js?f8c1:19312)
    at workLoop (react-dom.development.js?f8c1:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js?f8c1:149)

[viktor89]

was forgetting to add options to the function call. But perhaps it should have some defaults, so it doesn't throw error there?

[Lodin]

Yep, that's a bug. Thanks for finding it, will fix ASAP.

[Lodin]

@viktor89, the bug you've found is fixed in v1.0.0.