css - 制作一个可拖动的分割面板，就像CodeSandbox的控制台一样

Question

我想为编辑器制作一个可拖动的分割面板。它的行为主要类似于CodeSandbox的Console面板:

1. 当我们点击Console时，面板会展开，箭头变为ArrowDown用于关闭。
2. 面板的边框是可拖动的。
3. 当我们点击展开面板上的 Console 时，面板会关闭，并且箭头会变为 ArrowUp 用于展开。

我有以下代码( https://codesandbox.io/s/reset-forked-ivebxf?file=/src/App.js )，作者:https://github.com/johnwalley/allotment 。它可以展开和关闭面板，但与调整大小有冲突。当面板关闭时，我们向上拖动边框，我希望箭头变为ArrowDown。同样，当面板打开时，我们将边框向下拖动到底部，我希望箭头为 ArrowUp。

有人知道怎么做吗？我也对其他 react 库持开放态度。

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 &nbsp;
                  {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
                </div>
              </Allotment.Pane>
            )}
            {this.state.toExpand && (
              <Allotment.Pane preferredSize="0%">
                <div
                  onClick={() => {
                    this.setState({ toExpand: !this.state.toExpand });
                  }}
                >
                  Console &nbsp;
                  {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
                </div>
              </Allotment.Pane>
            )}
          </Allotment>
        </div>
      </div>
    );
  }
}

Answer 1

您可以使用Allotment组件的onChange回调函数。我的解决方案如下:

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

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div>
        <div className={styles.container}>
          <Allotment vertical onChange={this.handleChange} ref={this.myRef}>
            <Allotment.Pane>Main Area</Allotment.Pane>
            <Allotment.Pane preferredSize="0%">
              <div
                onClick={() => {
                  if (this.state.toExpand) {
                    this.myRef.current.resize([50, 50]);
                  } else {
                    this.myRef.current.resize([10000, 0]);
                  }
                }}
              >
                Console &nbsp;
                {this.state.toExpand ? "ArrowUp" : "ArrowDown"}
              </div>
            </Allotment.Pane>
          </Allotment>
        </div>
      </div>
    );
  }
}