Interested in creating a draggable split panel for an editor that behaves similar to the Console panel in CodeSandbox?
- Clicking on
Consoleexpands the panel and toggles the arrow to showArrowDownfor closing. - The border of the panel should be draggable.
- If you click on
Consolewhile the panel is expanded, it will close and the arrow will change toArrowUpfor expanding again.
I currently have some code (https://codesandbox.io/s/reset-forked-ivebxf?file=/src/App.js) from https://github.com/johnwalley/allotment. It can expand and close the panel, but there are issues with resizing. I want the arrow to reflect the direction of the panel when resizing - up for expansion and down for closing.
If you have any suggestions or know how to achieve this, please share. I'm also open to using other react libraries for this feature.
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>abc</Allotment.Pane>
{!this.state.toExpand && (
<Allotment.Pane preferredSize="50%">
<div
onClick={() => {
this.setState({ toExpand: !this.state.toExpand });
}}
>
Console
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
</Allotment.Pane>
)}
{this.state.toExpand && (
<Allotment.Pane preferredSize="0%">
<div
onClick={() => {
this.setState({ toExpand: !this.state.toExpand });
}}
>
Console
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
</Allotment.Pane>
)}
</Allotment>
</div>
</div>
);
}
}