Preferred size for allocated variable props not working properly.

Question

I want to make a draggable split panel for the editor. Its behavior is mainly similar to CodeSandbox's Console panel:

1. When we click Console, the panel expands and the arrow changes to ArrowDown for closing.
2. The border of the panel is draggable.
3. When we click Console on the expanded panel, the panel closes and the arrow changes to ArrowUp to expand.

I have the following code (https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927), author: https://github.com/johnwalley/ allocation. The problem is that the preferredSize property is not changed after this.state.toExpand.

Does anyone know why this doesn't work?

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
  }

  render() {
    return (
      <div>
        <div className={styles.container}>
          <Allotment vertical>
            <Allotment.Pane>Main Area</Allotment.Pane>
            <Allotment.Pane preferredSize={this.state.toExpand ? "0%" : "50%"}>
              <div
                onClick={() => {
                  this.setState({ toExpand: !this.state.toExpand });
                }}
              >
                Console &nbsp;
                {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
              </div>
            </Allotment.Pane>
          </Allotment>
        </div>
      </div>
    );
  }
}

Answer 1

This is not a problem, it did change, however, the documentation states:

It is not configured to update when the prop changes, however, if you double-click the border after setting it to ArrowDown, it will reset to 50%.

In contrast, if you add a reference to the Allotment element by first initializing the reference in the constructor:

constructor(props) {
  super(props);

  this.allotment = React.createRef();

  this.state = {
    toExpand: true
  };
}

and specify it as a prop:

You can then add a callback to setState so that when you change the unwind options the reset function is called:

resetAllotment() {
  if (this.allotment.current) {
    this.allotment.current.reset();
  }
}
// ...
this.setState({ toExpand: !this.state.toExpand }, () => this.resetAllotment());

Side note, it seems like the assigning component doesn't have time to process new prop changes before calling reset in the setState callback...but this doesn't make sense to me, however, you can hacky setTimeout to 0ms to solve this problem:

resetAllotment() {
  setTimeout(() => this.allotment.current && this.allotment.current.reset(), 0);
}