react-treebeard
react-treebeard copied to clipboard
storybook-eol
How to render the "toggle" icon aligned to the right?
Hi Guys,
What would be the best way to render the "toggle" icon aligned to the right for some element? CSS transform? Custom animation? Mixture of both or something else? Is there any sample or maybe test code for such a case?
Oleg
Change the container class in decorators.js to render (notice the render call) your icon to the right:
render() {
| const {style, decorators, terminal, onClick, node} = this.props; | | return ( | <div onClick={onClick} | ref={ref => this.clickableRef = ref} | style={style.container}> | {!terminal ? this.renderToggle() : null} | | <decorators.Header node={node} | style={style.header}/> | | ); | }
@alexcurtis @MichaelDeBoey Michael, Alex, please close this :)
@danilohgds Hi Danilo, just to get it right. You suggest to change this file https://github.com/alexcurtis/react-treebeard/blob/master/src/components/decorators.js, right? This would mean that somebody should do either monkey patching, create a pull request (which is probably a good idea anyway, if possible, will be accepted, etc.) or host an own component, or do I miss something? Our headers have some other icons/check boxes in them, so we needed to swap icons. We solved that issue by using styles/margins. I just wanted to know if there is a better and more elegant way to achieve this through the existing interface.
@olegded Yeah that's correct.
If you notice the container class is the one responsible for doing the actual rendering of the node and it's icons. I don't think a pull request is necessary for this case because it's a styling choice rather than an actual bug. You can overwrite the code on the existing file, assuming you forked this repo or overwrite it in your App.js
If you want to swap the icon to the right just change the order of the tags I showed in my previous post.
I don't think so @mBeierl . The order of rendering is inside the Container class, and not as a decorator item. The renderToggle always comes first no matter what
return (
<div onClick={onClick}
ref={ref => this.clickableRef = ref}
style={style.container}>
{!terminal ? this.renderToggle() : null}
<decorators.Header node={node}
style={style.header}/>
</div>
);
}
I really always would like to be able to customize without actually touching the source of a library. And the decorators prop appears to me as if it was intended to allow for this level of customization.
So, what I did is I created my own Container class, which extends the original one and just override the render function to render first the <decorators.Header node={node} style={style.header}/> and then call the renderToggle function.
Then I pass my custom Container using the decorator prop. Works fine for me.
Seems like a nice addition to the original library, maybe we should wrap both the decorators within another one, so users can change the order of the rendered elements at any time.
Try doing a pull request and see if they approve it.
