The preferred size variable for the allocation allotment is malfunctioning

Question

The preferred size variable for the allocation allotment is malfunctioning

I am working on creating a draggable split panel for an editor, similar to the behavior of the Console panel in CodeSandbox:

Clicking on Console expands the panel and changes the arrow to ArrowDown to close it.
The border of the panel is draggable.
If you click on Console when the panel is expanded, it will collapse and change the arrow to ArrowUp to expand it again.

I have found some code (https://codesandbox.io/s/reset-forked-ydhy97?file=/src/App.js:0-927) by https://github.com/johnwalley/allotment. However, I am facing an issue where the prop preferredSize does not update according to this.state.toExpand.

Can anyone help me understand why this is happening?

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>
    );
  }
}

css reactjs panel

Answer 1

Answer №1

The issue lies in the fact that the prop known as preferredSize fails to update according to this.state.toExpand.

This is not where the problem originates; the prop does indeed change. However, as per the documentation, it mentions:

Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the reset method is called on the Allotment instance.

It is not set up to automatically reflect changes in the prop value. Nonetheless, if you double click on the border while having ArrowDown selected, it will reset to 50%.

To address this, you can establish a reference to the Allotment element by creating a reference in the constructor initially:

constructor(props) {
  super(props);

  this.allotment = React.createRef();

  this.state = {
    toExpand: true
  };
}

Then assign it as a prop:

<Allotment vertical ref={this.allotment}>

Subsequently, add a callback to the setState function so that upon changing the expand option, it triggers the reset function:

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

Additional note: It seems that the Allotment component may not have enough time to process the new prop alteration before the reset is called within the setState callback... which might seem counterintuitive. In such cases, you can implement a temporary setTimeout of 0ms:

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

Answer 2

The issue lies in the fact that the prop known as preferredSize fails to update according to this.state.toExpand.

This is not where the problem originates; the prop does indeed change. However, as per the documentation, it mentions:

Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the reset method is called on the Allotment instance.

It is not set up to automatically reflect changes in the prop value. Nonetheless, if you double click on the border while having ArrowDown selected, it will reset to 50%.

To address this, you can establish a reference to the Allotment element by creating a reference in the constructor initially:

constructor(props) {
  super(props);

  this.allotment = React.createRef();

  this.state = {
    toExpand: true
  };
}

Then assign it as a prop:

<Allotment vertical ref={this.allotment}>

Subsequently, add a callback to the setState function so that upon changing the expand option, it triggers the reset function:

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

Additional note: It seems that the Allotment component may not have enough time to process the new prop alteration before the reset is called within the setState callback... which might seem counterintuitive. In such cases, you can implement a temporary setTimeout of 0ms:

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

The preferred size variable for the allocation allotment is malfunctioning

Answer №1

Similar questions

What is the best way to set up a webpage so that the left side remains fixed while allowing the right side to scroll?

Are there any better methods for creating div backgrounds and borders using CSS?

Guidelines for positioning social media icons to the right of the collapsible navigation bar in Bootstrap 3

JavaScript obtain scroll position of a child element

A step-by-step guide on customizing the content of a DrawerNavigator in

Unable to Trigger onClick Event with react-bootstrap Navbar Dropdown in Combination with react-router-dom

How can you implement a transform transition toggle when a user clicks on an element

Creating a semi-circular shaped rectangle using CSS

Header escapes div and continues to move

Preventing the dispatch function from being overwritten by an empty state

Learn how you can store checkbox values in an array when a checkbox is clicked by utilizing AJAX

What is the best way to set up a React handler that can handle multiple values effectively?

Prevent row stretching in React.js Material-ui DataGrid

What is the functionality of the icon `<i>` in Twitter Bootstrap?

Uninterrupted Carousel Experience in Bootstrap 4 (Seamless slide transition)

Tips for altering the scrolling rate of a container

Is there a method to successfully utilize "const {user, userId} = this.state" when user pertains to username and userId pertains to id?

Struggling to align my image in the center while applying a hover effect using CSS

The opacity of each div within a container increases as you move from one div to the

Implementing defaultProps in conjunction with withStyles