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

Storing images as base64 in a mongoDB database can help save space

What is the best way to display search results on a separate page using react.js?

Horizontal rule located within a table but spanning the entire width

The CSS transition will only activate when coupled with a `setTimeout` function

Bottom section goes haywire in Chrome when clearfix is applied to a div above

Using scrollto function after history.push in React

Display the element only when the input is in a selected state using CSS

Using MobX to alter observed observable values outside of actions is not permitted in combination with Ant Design components

Unable to input any text into the textfield

Guide to center-aligning ElementUI transfer components

Show a file.jpg from multer and a database of uploads

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Leverage array mapping functionality to generate React components within a separate component

What are the recommended margins for various alphabets?

What could cause the cookie value in the dynamic route to differ?

Ways to style specific dates on a datepicker?

Organize Dates in React Table

Typescript enums causing Safari to display blank screen in Next.js

Ways to preserve codes on VS Code Mac?

The term "Cardlist" has not been defined and is therefore causing an