Changing ReflexElement size causes error

[wonskarol]

I'm getting following error:

TypeError: Cannot read property 'ref' of undefined
    at ReflexContainer.getSize (ReflexContainer.js:305)
    at ReflexContainer.computeAvailableShrink (ReflexContainer.js:470)
    at ReflexContainer.computeAvailableOffset (ReflexContainer.js:403)
    at ReflexContainer.js:155
    at new Promise (<anonymous>)
    at ReflexEvents.<anonymous> (ReflexContainer.js:145)
    at ReflexEvents.emit (ReflexEvents.js:87)
    at ReflexElement._callee$ (ReflexElement.js:208)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)

when I try to change pane size:

import React, { useState } from "react";
import {
  ReflexContainer,
  ReflexElement,
} from "react-reflex/dist/commonjs";

export const Collapse = () => {
  const [collapsed, toggle] = useState(true);

  const onToggleClick = () => {
    toggle(!collapsed);
  };

  return (
    <ReflexContainer orientation="vertical">
      <ReflexElement>
        <div style={{ background: "tomato", height: "100%" }}></div>
      </ReflexElement>
      <ReflexElement size={collapsed ? 100 : 300}>
        <div style={{ background: "orange", height: "100%" }}>
          <button onClick={onToggleClick}>toggle pane</button>
        </div>
      </ReflexElement>
    </ReflexContainer>
  );
};

Am I doing something wrong or is a lib issue?

[leefsmp]

Same issue than #98...? You need to specify correct direction for the logic to know which direction it is supposed to shrink/expand the ReflexElement when size is changed programmatically.

[wonskarol]

Ok, I've added direction (not sure if [-1, 1] for both elements is correct) and ReflexSplitter and it started to work (still showing the same error in console though).
But without splitter it doesn't ... is it expected behaviour?

  <ReflexContainer orientation="vertical">
      <ReflexElement direction={[-1, 1]}>
        <div style={{ background: "tomato", height: "100%" }}></div>
      </ReflexElement>
      <ReflexSplitter />
      <ReflexElement size={collapsed ? 100 : 300} direction={[-1, 1]}>
        <div style={{ background: "orange", height: "100%" }}>
          <button onClick={onToggleClick}>toggle pane</button>
        </div>
      </ReflexElement>
    </ReflexContainer>

[leefsmp]

This feature is to control programmatically the size of a resizable ReflexElement, you need to have a splitter between the elements for this to work, then direction has to be specified only on the target element that is being directly resized, in your example it's the 2nd one. Which can only grow to the left side, so you have to pass -1. The proper code may look like this:

<ReflexContainer orientation="vertical">
      <ReflexElement>
        <div style={{ background: "tomato", height: "100%" }} />
      </ReflexElement>
      <ReflexSplitter />
      <ReflexElement size={collapsed ? 100 : 300} direction={-1}>
        <div style={{ background: "orange", height: "100%" }}>
          <button onClick={onToggleClick}>toggle pane</button>
        </div>
      </ReflexElement>
</ReflexContainer>

However if that's your complete code you should consider not using Reflex for such basic behavior. That lib is mostly useful when you need user-resizable elements within your layout. If we stick to the initial scenario, you should rather use simple css combined with React code to control the size of your panes. For example the left side would have width: calc(100% - 300px) and the right side width: 300px. If that all you need you may also create 2 classes collapsed | expanded and switch those from React code.