Resize ReflexElements to initial - question

[aniov]

Hy there,

I'm having a problem understanding how to reset panels to an "initial / default" sizes.

In example below setting panels to max size works ok, but when i try to "reset" all of them to their initial sizes doesn't seem to work correctly.

https://codesandbox.io/s/48cn7

Thank you in advance.

[aniov]

Seems that one app that uses this library has done exactly what I want, how they did that ? :)

(double click on headers)

https://codier.io/creation/rJu37cm0U

[datoslabs]

Hi Aniov,

One possible solution is to loop through each panel resetting its size with a 50ms delay (enough for the rerendering to occur) like the following (modified from your example). I have found that resetting multiple panels to specified sizes requires screen refresh between each resizes, I am guessing this may be due to the internal architecture of propagating resize changes throughout the affected children elements.

const onClick = (e) => {
    const panelName = e.target.value;
    if (panelSize[panelName] === offsetHeight)
      resetHeight();
    else {
      const newSize = undefined;
      setPanelsSize({
        pane_1: newSize,
        pane_2: newSize,
        pane_3: newSize,
        pane_4: newSize,
        [panelName]:offsetHeight
      });
    }
  };

  const resetHeight = () => {
    let id = 1;
    setTimeout(function resize(){
      setPanelsSize(x=>{
        const updated = {...x,[`pane_${id++}`]:DEFAULT_SIZE};
        return updated;
      });
      if (id <=4)
        setTimeout(resize,150)
    },150)
  };

[aniov]

Thank you, I will try this also.