Establish starting dimensions and remember the previous sizes of allocations

Question

Establish starting dimensions and remember the previous sizes of allocations

I successfully implemented a draggable split panel using a code library from johnwalley on GitHub called https://github.com/johnwalley/allotment.

My goal is to achieve the following functionalities:

Clicking on
```
Expand or collapse the allotment B
```
should expand or collapse the allotment B accordingly.
We should be able to drag the splitter and save its position before collapsing the allotment B, ensuring that we can return to that position when expanding the allotment B.
When initially expanding the allotment B, I want its height to be set at 1/5 of the total height.

I have written the relevant code here: (https://codesandbox.io/s/reset-forked-f2f386?file=/src/App.js). However, I am facing difficulty in achieving points 2) and 3) simultaneously.

If anyone has any insights as to why this could be happening, please let me know!

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

// App component logic goes here

css reactjs panel

Answer 1

Answer №1

My initial thought is to have no default saved value and set the lastExpandedSize to null. In this scenario, one-fifth of the screen height will be passed as the saved height when needed. Once there is a saved value upon closing, the useState function will continue to return that value.

// ...

constructor(props) {
  super(props);
  this.state = {
    expand: true,
    lastExpandedSize: null // initialize to null
  };
  this.containerRef = React.createRef();
  this.myRef = React.createRef();
}

/**
 * Check if LastExpandedSize exists
 * @return {boolean}
 */
checkLastExpandedSize = () => {
  return this.state.lastExpandedSize !== null;
}

/**
 * Get Default Expanded Size
 * @param {number} ratio
 * @param {number} height
 * @return {number[]}
 */
getDefaultExpandSize = (ratio = 5, height = 0) => {
  if (height < 1) {
    height = this.containerRef.current.clientHeight;
  }

  return [
    height * (ratio - 1) / ratio, 
    height / ratio
  ];
}

handleAdjustmentChange = (sizes) => {
  if (sizes.length > 1) {
    if (sizes[1] < 31) {
      this.setState({ expand: true });
    }
    else {
      this.setState({
        expand: false,
        lastExpandedSize: this.checkLastExpandedSize()
          ? sizes
          : this.getDefaultExpandSize()
      });
    }
  }
};

// ...

<div
  ref={this.containerRef}
  style={{
    minWidth: 200,
    height: "100vh",
    overflowX: "auto",
    width: "auto",
    margin: "0px 0px 0px 0px"
  }}
>
  ...
</div>

Answer 2

My initial thought is to have no default saved value and set the lastExpandedSize to null. In this scenario, one-fifth of the screen height will be passed as the saved height when needed. Once there is a saved value upon closing, the useState function will continue to return that value.

// ...

constructor(props) {
  super(props);
  this.state = {
    expand: true,
    lastExpandedSize: null // initialize to null
  };
  this.containerRef = React.createRef();
  this.myRef = React.createRef();
}

/**
 * Check if LastExpandedSize exists
 * @return {boolean}
 */
checkLastExpandedSize = () => {
  return this.state.lastExpandedSize !== null;
}

/**
 * Get Default Expanded Size
 * @param {number} ratio
 * @param {number} height
 * @return {number[]}
 */
getDefaultExpandSize = (ratio = 5, height = 0) => {
  if (height < 1) {
    height = this.containerRef.current.clientHeight;
  }

  return [
    height * (ratio - 1) / ratio, 
    height / ratio
  ];
}

handleAdjustmentChange = (sizes) => {
  if (sizes.length > 1) {
    if (sizes[1] < 31) {
      this.setState({ expand: true });
    }
    else {
      this.setState({
        expand: false,
        lastExpandedSize: this.checkLastExpandedSize()
          ? sizes
          : this.getDefaultExpandSize()
      });
    }
  }
};

// ...

<div
  ref={this.containerRef}
  style={{
    minWidth: 200,
    height: "100vh",
    overflowX: "auto",
    width: "auto",
    margin: "0px 0px 0px 0px"
  }}
>
  ...
</div>

Establish starting dimensions and remember the previous sizes of allocations

Answer №1

Similar questions

What is the best way to center align and add an icon to the header in Ionic?

What is the best way to make an attribute in an interface mandatory only when another attribute is set to true

Tips for customizing the MuiModal-root component with Material-UI in React:

Position a button and input element in alignment

Encountering issues with link button redirection

Determine in React whether a JSX Element is a descendant of a specific class

Get the value of a CSS property in Python by parsing the rendered HTML

The alignment feature in the center is malfunctioning

Can a File Object be transmitted to an AWS Lambda function via API Gateway using JavaScript?

Automatically selecting checkboxes from an array using ReactJS

Incorporate concealed image into HTML

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

hardhat activities do not store information on the local network

You cannot call this expression. The type 'String' does not have any call signatures. Error ts(2349)

Encountering an error when running "npm start" command in webpack-dev-server

jQuery selector unable to locate the specified class in the table row

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

What is the best way to access form data in an AWS Lambda function coded in NodeJs?

Switching a component in Mui App transforms the entire aesthetic

evt.target consistently returns the initial input within the list of inputs