3

I would like to realize a console window like the console window in VS Code.

enter image description here

In VS Code, when we click Shift+Command+Y, a console window is opened below the code window. There are several features:

  1. The whole window is divided into 2 parts. Both the code window and the console window can have their scroller on the right.
  2. The appearance of the console window resizes the code window.
  3. There is a horizontal splitter that could resize the console window (and the code window).

I tried to create a codesandbox. But it doesn't have Feature 2 and Feature 3.

Could anyone help?

import { useState } from "react";
import { Button } from "@material-ui/core";

import "./styles.css";

export default function App() {
  const [textState, setTextState] = useState("off");

  const toggleText = () => {
    setTextState((state) => (state === "On" ? "Off" : "On"));
  };

  return (
    <>
      <Button variant="contained" color="primary" onClick={toggleText}>
        Toggle
      </Button>
      <div style={{ overflowY: "scroll", height: "300px", fontSize: "30px" }}>
        <h1>code 1</h1>
        <h1>code 2</h1>
        <h1>code 3</h1>
      </div>
      <div>
        {textState === "On" && (
          <div
            style={{ overflowY: "scroll", height: "200px", fontSize: "30px" }}
          >
            <h1>console 1</h1>
            <h1>console 2</h1>
            <h1>console 3</h1>
          </div>
        )}
      </div>
    </>
  );
}
Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
  • Feature #2 is not quite right. The console window doesn't *hide* what's under it, it *resizes* the main content, same as the tree-view sidebar. – Jared Smith Dec 23 '21 at 13:26
  • ok, let me rephrase – SoftTimur Dec 23 '21 at 13:27
  • Regarding feature 3, it looks like you haven't made any coding or research effort. From what I can see, you're expecting your app to have a feature but you haven't written any code for that feature nor have you looked into how it can be achieved. This makes your question *"off-topic"* here. Please ask each question separately and make a decent coding attempt. If a coding attempt is beyond your capabilities, at least make a decent research of how the feature can be achieved and specify in clear what prevents you from applying existing solutions. – tao Dec 23 '21 at 13:40
  • @tao I understand your remark. I think Feature 2 and Feature 3 are related. 4 years ago, I used a [vertical splitter](https://stackoverflow.com/a/43421645/702977) in my application. I'm wondering if today there is a better solution. While somebody may help on this question, I'm trying to change this vertical splitter to a horizontal one. – SoftTimur Dec 23 '21 at 13:57
  • Afaik, there are none. You need a layout which should probably fill the desired height (I'd go for filling the viewport - with flexbox). You'll also probably want to hold the ratio between the two divs in state and change it accordingly when the user drags the divider. As far as I'm aware, DOM doesn't provide this natively, so you'll need to add your own event to the divider and manage the state of the layout in your app. Still, not showing an attempt renders your question off-topic. Trying something qualifies the *"is there a better way?"* question. Else you're off-topic. Cheers! – tao Dec 23 '21 at 14:21

1 Answers1

2

For the 2nd question, you can set the code area height to full height when console view is hidden.

height: `${textState === "On" ? 500 - consoleAreaHeight : 500}px`

For the 3rd question, It could be achieved using a ref and a mouse move handler.

const consoleRef = useRef(null);

  const mouseMoveHandler = (e) => {
    e.preventDefault();
    if (resizing) {
      const delta = consoleRef.current.getBoundingClientRect().top - e.clientY;
      setConsoleAreaHeight(
        (prevConsoleAreaHeight) => prevConsoleAreaHeight + delta
      );
    }
  };

Code sandbox => https://codesandbox.io/s/react-material-togglebuttonexample-forked-dk7lu?file=/src/App.jsx

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43