Giter Site home page Giter Site logo

Comments (12)

skohub avatar skohub commented on July 19, 2024 4

Possibly you have put

const data = {
    name: 'root',
    ...
}

inside render method, so the data is being rewritten from scratch on every click.

from react-treebeard.

emilyfeder avatar emilyfeder commented on July 19, 2024 1

I think it's because React is not registering it as a state change and is not calling render() again.
Also, I think ideally onToggle should switch the node toggled state internally inside the Treebeard Component instead of you having to manually do it each time.
Try the following instead (I haven't actually tested this, as a fair warning):

class TreeExample extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			data: props.data
		};
		this.onToggle = this.onToggle.bind(this);
	}
	onToggle(node, toggled){
		if(this.state.cursor){this.state.cursor.active = false;}
		node.active = true;
		let new_data = this.state.data;
		if(node.children){
			node.toggled = toggled;
			new_data = Object.assign({}, this.state.data);
		}
		this.setState({ cursor: node, data: new_data });
	}
	render(){
		return (
			<Treebeard
				data={this.state.data}
				onToggle={this.onToggle}
			/>
		);
	}
}

from react-treebeard.

sonuj avatar sonuj commented on July 19, 2024

expand and collapse of parent node is not working

from react-treebeard.

Waize avatar Waize commented on July 19, 2024

There is an issue with the animations.
If you turn them off:
<Treebeard data={data} onToggle={this.onToggle} animation={false}/>
It works fine.
Maybe @MichaelDeBoey needs to double check the animation conditions in renderDrawer from node.js

from react-treebeard.

Waize avatar Waize commented on July 19, 2024

#111

from react-treebeard.

Waize avatar Waize commented on July 19, 2024

@maximilianoforlenza with #174 this issue is worse than before:
with this workaround here (animation == false) it will not toggle at all, although working fine before
removing animations-flag will still not bring animations back.

from react-treebeard.

Waize avatar Waize commented on July 19, 2024

@maximilianoforlenza any news on this?

from react-treebeard.

maximilianoforlenza avatar maximilianoforlenza commented on July 19, 2024

No yet. I'll working on this today.

from react-treebeard.

maximilianoforlenza avatar maximilianoforlenza commented on July 19, 2024

@Waize please try this https://codesandbox.io/s/7jkkj5vkn1 (#209)

from react-treebeard.

Waize avatar Waize commented on July 19, 2024

from react-treebeard.

maximilianoforlenza avatar maximilianoforlenza commented on July 19, 2024

No, you should fork the project, back to version 2.1.1 fix it and use the forked version.

from react-treebeard.

maximilianoforlenza avatar maximilianoforlenza commented on July 19, 2024

If it's working https://codesandbox.io/s/7jkkj5vkn1 I close this issue @Waize

from react-treebeard.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.