Resizer.resizeSection is not working ?

[firstpersoncode]

Good day sir !

I'm using this library and so far this is the most simple, and nice resizer for my project !

but I'm trying to programatically resize the section from other component, but nothing happen..
I'm using Resizer.resizeSection as documented, but I got no luck..

first I pass the Resizer instance as state, so I could pass it to other component.

/App/Container

<Container
  beforeApplyResizer={resizer => {
    this.setState({ resizer }) // set resizer
  }}>
     {
       section.grids.map((grid, i) => {
          let comp = [
             <GridLayout
                  key={i}
                  gridIndex={i}
                  grid={grid}
                  resizer={this.state.resizer || null} // then pass it to this component
              />
           ]

           if (section.grids[i + 1]) {
              comp.push(<Bar key={'bar_' + i} size={5} style={{ background: '#888888', cursor: 'col-resize' }} />)
           }

           return comp
      })
    }
</Container>

within the GridLayout component, then I use the resizer inside my custom handler:

/App/GridLayout

class GridLayout extends Component {
    // this is the handler for programatically resize this component
    handleResize = (newSize) => {
       const { gridIndex, resizer } = this.props
       if (resizer) {
            resizer.resizeSection(gridIndex, { toSize: newSize }) // nothing happen ...
       }
    }

   render () {
       const { grid } = this.props
       return (
         <Section
           defaultSize={grid.width || null}
            className={classes.layout}>
            <IconButton onClick={this.handleDelete}>
                <Delete />
            </IconButton>
            <IconButton onClick={this.handleDuplicate}>
                <ViewAgenda />
            </IconButton>

            <IconButton onClick={() => this.handleResize(grid.width += 15)}> // triggered in here but nothing happen
                <Add />
            </IconButton>

            <IconButton onClick={() => this.handleResize(grid.width -= 15)}> // triggered in here but nothing happen
               <Remove />
            </IconButton>
         </Section>
       )
   }
}

Please do explain to me if I get it wrong or there are other approaches..
nice library by the way, really helpful, keep the good work !

[runjuu]

Happy weekend, friend. Sorry for the delayed response. It is quite strange that Github didn't send email to me about this issue.

According to the code you provided, seems the Resizer has been misused. It may be a little confusing about how the Resizer works.

You could check this demo to see how to apply Resizer to the Container. The onBarClick method demonstrates how to get the latest Resizer and how to apply the Resizer.

We do not encourage to state the instance of Resizer, because each time the Resizer be created is for a temporary use case.

for more details, see beforeApplyResizer and Container's instance properties.

[firstpersoncode]

it works like a charm !
I followed the demo and tweak around my code..

<Container
   ref={this.containerRef}
 ...

// and then within the loop
  <GridLayout
    programaticallyResize={(size) => {
      const container = this.containerRef.current
                              
      if (container) {
         const resizer = container.getResizer()

         let config = { toSize: size }
         resizer.resizeSection(i, config)
         container.applyResizer(resizer) // <-- do the magic
      }
   }}
   ...

// within GridLayout component
handleResize = (size) => {
  const { programaticallyResize } = this.props
  return programaticallyResize(size) // now it works !
}

Now everything work, I could programatically change the Section size from anywhere..
Thank you my friend !