0

I have built a golden layout wrapper using golden-layout-react-redux, and I'm creating new layouts and connecting them to the panels reducer so every time I add a new panel it will get built inside the GoldenLayoutWraper. I connected the config content like this:

componentDidMount() {
    const config = {
        content: [{
            type: "column",
            content: this.props.panels//here
        }]
    };
    goldenlayout = new GoldenLayout(config, this.layout);

    goldenlayout.registerComponent(
        "IncrementButtonContainer",
        wrapComponent(IncrementButtonContainer, this.context.store)
    );
}
goldenlayout.init();

But I'm facing a problem that it is not updating when I add new panel to the reducer, the panels reducer array increases but the contentIems are not. So I was forced to do it like this:

render() { 
    this.props.panels.map(panel =>
        setTimeout(() => {
            goldenlayout.root.contentItems[0].addChild(panel);
        }, 100)
    );
    return (
        <div className="goldenLayout" ref={input => (this.layout = input)} />
    );
}

this code is inside the GoldenLayoutWrapper component render(), and the problem here is that: 1- Every time I add new panel it adds multiple panels, because it is adding panels.length plus the already existed items in contentItems[0]. 2- when I delete all the panels I can not add anymore because the way golden-layout works that when there is only one child it replaces it and become the root child not the contentItems[0] so this goldenlayout.root.contentItems[0].addChild(panel) throws an error.

I also tried to use this react-golden-layout instead but I'm stuck with this issue

P.S: I'm a beginner

MrPickles
  • 810
  • 1
  • 9
  • 27
ilya
  • 611
  • 6
  • 17
  • I would consider doing the adding and removing of the panels out side of the component and then send the modified panels back down as props – MrPickles Oct 25 '18 at 15:45
  • @MrPickles I'm getting the modified panels from the redux store mapStateToProps, but the problems is how should I map the goldenLayout contentItems array to be same as this.props.panels? because the only way to add the panel is through contentItems[0].addChild, the problem here is it is adding same item multiple times while looping through panels ( contentItems[0] has already same panel)... in different cases I usually do `this.props.counters.map(counter => ( ))` but for golden-layout I can not because there is contentItems array and not component – ilya Oct 25 '18 at 16:06

0 Answers0