frontend-collective / frontend-collective/react-sortable-tree
Question: how can i multiple inputs into a node?
- Dominant language
- JavaScript
- Stars
- 5k
- Forks
- 914
- PR merge metrics
- No merged PRs in 30d
Description
first of all amazing implentation, thank you.
* What's your use case? (Tell me about your application and what problem you're trying to solve.)
i would like to add additional inputs into each node
* What interface do you have in mind? (What new properties or methods do you think might be helpful?)
(I pasted code that describes this)
i would like to add new porperties to each node, for example each node has title,subtitle
and i would like to add a type and a starts_with which are a string the user can change via input.
*Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)
im basing it on the modify input functionallity you added but im stuck, this is my code so far:
```
import { render } from "react-dom";
import "react-sortable-tree/style.css";
import React, { Component } from "react";
import SortableTree, { changeNodeAtPath } from "react-sortable-tree";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
treeData: [
{ name: "IT Manager", type: "typeA" ,starts_with: "Tree"},
{
name: "Regional Manager",
expanded: true,
type: "typeB",
starts_with: "simple",
children: [{ name: "Branch Manager" ,starts_with: "Complex"}]
}
]
};
}
render() {
const getNodeKey = ({ treeIndex }) => treeIndex;
return (
this.setState({ treeData })}
generateNodeProps={({ node, path }) => ({
title: (
{
const name = event.target.value;
this.setState(state => ({
treeData: changeNodeAtPath({
treeData: state.treeData,
path,
getNodeKey,
newNode: { ...node, name }
})
}));
}}
/>
),
subtitle: (
{
const name = event.target.value;
this.setState(state => ({
treeData: changeNodeAtPath({
treeData: state.treeData,
path,
getNodeKey,
newNode: { ...node, name }
})
}));
}}
/>
)
})}
/>
);
}
}
render(, document.getElementById("root"));
```
now for the function generateNodeProps:
can i stick all the inputs in a single label while its all in a
```
starts_with: (
{
const name = event.target.value;
this.setState(state => ({
treeData: changeNodeAtPath({
treeData: state.treeData,
path,
getNodeKey,
newNode: { ...node, name }
})
}));
}}
/>
),
type: (
{
const name = event.target.value;
this.setState(state => ({
treeData: changeNodeAtPath({
treeData: state.treeData,
path,
getNodeKey,
newNode: { ...node, name }
})
}));
}}
/>
)
})}
```
etc....
i tried it but it seems i need to modify the node for this, Do i need to use nodeContentRenderer?
Thanks in advance!
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.