Реализация простой Split Pane с использованием React-хуков и JSS - PullRequest
Новая
       14

Реализация простой Split Pane с использованием React-хуков и JSS

0 голосов
/ 04 марта 2020

Я попытался реализовать простую горизонтальную разделенную панель (с двумя панелями) в React с хуками и стилем JSS.

Я потратил несколько часов на это и дошел до следующего, но наткнулся на кирпичную стену с точки зрения его работы. 

import React, { useState } from "react";
import { Paper } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  splitterRoot: {
    display: "flex",
    border: "2px solid red",
    minWidth: window.innerWidth,
    minHeight: 500
  },
  leftPane: {
    backgroundColor: "blue",
    width: xPosOfSeparator => {
      return (xPosOfSeparator / window.innerWidth) * 100 + "%";
    }
  },
  rightPane: {
    width: xPosOfSeparator => {
      return 100 - (xPosOfSeparator / window.innerWidth) * 100 + "%";
    },
    backgroundColor: "green"
  },
  separator: {
    minWidth: 10,
    minHeight: 500,
    border: "1px solid black",
    cursor: "col-resize",
    position: "absolute",
    left: xPosOfSeparator => {
      return xPosOfSeparator;
    }
  }
});

export default function MyPopoutMenu() {
  const [draggableObj, setDraggableObj] = useState(null);
  const [xPosOfSeparator, setXPosOfSeparator] = useState(500);

  const splitterStyle = useStyles(xPosOfSeparator);

  return (
    <Paper
      classes={{
        root: splitterStyle.splitterRoot
      }}
    >
      <Paper
        classes={{
          root: splitterStyle.leftPane
        }}
      />
      <Paper
        classes={{
          root: splitterStyle.separator
        }}
        onMouseDown={e => {
          setDraggableObj(e.currentTarget);
          console.log("setDraggableObj");
        }}
        onMouseUp={e => {
          setDraggableObj(null);
          console.log("setDraggableObj null");
        }}
        onMouseMove={e => {
          if (draggableObj && draggableObj !== "undefined") {
            console.log("setting xPos to  = " + e.screenX);
            setXPosOfSeparator(e.pageX);
          }
        }}
      />

      <Paper
        classes={{
          root: splitterStyle.rightPane
        }}
      />
    </Paper>
  );
}

Edit sparkling-mountain-ywbjh

В основном я сохраняю положение разделителя и пытаюсь обновить его положение и размер левой и правой панели через их JSS в зависимости от того, где расположен разделитель на Ось X.

Любые предложения с благодарностью.

...