minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
530 stars 71 forks source link

不具合報告:Node Custom Data Error #135

Closed OldManMeta closed 2 years ago

OldManMeta commented 2 years ago

Awesome project!

There is an issue with the node not correctly picking up custom data.

You can see this in your example found here: https://minop1205.github.io/react-dnd-treeview/?path=/docs/examples-tree-custom-drag-preview--custom-drag-preview-story

Open the TS version in codesandbox, and you will see that none of the file icon types are present.

You will also see that if you customize the data in types.ts (the custom data) - that data is not found on the node itself, leading to an error - for example, if I added an isFolder property to the props, as well as to the custom data - inside the node if I try to reference that for the TypeIcon call, you will get the following error

Property 'isFolder' does not exist on type 'NodeModel'

minop1205 commented 2 years ago

@OldManMeta Thanks for the report!

After checking, I found that the type inference was not working because the CodeSandbox sample code was incorrect.

  1. The data field was not defined in sample_data.json.

Before

  {
    "id": 2,
    "parent": 1,
    "droppable": false,
    "text": "File 1-1
  },

After

  {
    "id": 2,
    "parent": 1,
    "droppable": false,
    "text": "File 1-1",
    "data": {
      "fileType": "csv",
      "fileSize": "0.5MB"
    }
  },
  1. appropriate type information was not passed to setState in App.ts

Before

  const [treeData, setTreeData] = useState<NodeModel[]>(SampleData);

After

  const [treeData, setTreeData] = useState<NodeModel<CustomData>[]>(SampleData);

NOTE: The NodeModel type allows one type argument to be passed. By passing the type of the data property as this type argument, type inference is enabled.