My front end level is limited, there are mistakes also hope to dig gold friends for guidance.

introduce

React+ ANTD: React+ ANTD: React+ ANTD

The reason is that the developer gave me a SQL editor. The input box is relatively small and does not support magnification, which is not very convenient. I wanted it to be in full screen, and I thought I might need it later, so I researched it and recorded it.

I don’t think it’s too small (ORz)

Full screen

You’ve probably all seen the full screen button in web pages, where clicking on it makes the page full screen, often in code editors.

Here’s what LeetCode looks like in full screen, with menus omitted.

It looks like there are different kinds of full-screen displays, so let me tell you what I think.

  • Leetcode it’s just full screen
  • F11 We can press F11 to enter the full screen mode, is chrome built-in, do not need to modify the code
  • Changing the DOM, in fact, is the same as the first one, but hides part of the browser

Like the image above, the shell of the browser is gone.

The use of full screen

Full screen, it seems, is needed when you want to concentrate on reading, just as people enjoy watching movies full screen. The main thing is to zoom in on the components so that large input/reading operations can be done more happily.

Install the react – full – screen

// yarn add react-full-screen
npm install react-full-screen --save
Copy the code

Install the library using YARN or NPM. There are some demos on the website, linked here.

Write the simplest component possible

Here directly on the code, code is not much, very easy to understand.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
import { Tooltip, Card, Col, Row } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";

const App = () = > {
  // Define the full variable to be compatible with both full-screen and non-full-screen styles, such as height 200 for full and 100 for non-full
  const [full, setFull] = useState(false);
  // Create a Handle for fullScreen
  const handle = useFullScreenHandle();

  return (
    <div style={{ background: "#ececec", height: 500}} >
      <Row gutter={[8, 8]} >
        <Col span={8}>
          <Card style={{ height: 500}} >On the left side of the card</Card>
        </Col>
        <Col span={16}>
          <FullScreen
            handle={handle}
            onChange={setFull}
            style={{ background: "#ffffff}} ">
            <Card style={{ height: 500}} >
              <div>
                <Tooltip title="Full screen">
                  <FullscreenOutlined
                    style={{ fontSize: 16 }}
                    onClick={()= >{// setFull to true, then call handle's enter method to enter full-screen mode setFull(true); handle.enter(); }} / ></Tooltip>
                <Tooltip title="Exit full screen">
                  <FullscreenExitOutlined
                    style={{ fontSize: 16.marginLeft: 16}} // Exit the full-screen mode and selectfullSet tofalse
                    onClick={()= >{ setFull(false); handle.exit(); }} / ></Tooltip>
              </div>
              <div>Suppose this is an editor</div>
            </Card>
          </FullScreen>
        </Col>
      </Row>
    </div>
  );
};

ReactDOM.render(<App />.document.getElementById("container"));

Copy the code

This is what it looks like, and there’s a comment in the code, so you can just look at it. Since codesandBox is not very supported, I put it into an ANTD Pro project to show you the effect.

In this way, we are able to magnify only the editor’s effect and hide the other unimportant parts (left side).

Existing problems

That’s not enough. There are still some details to be refined.

  1. The default background is black, which is unfriendly, and we need to set the style
  2. We should make the editor bigger in full screen mode
  3. And dark pits. I’ll talk about that later

divide-and-conquer

  • The background color

    The library we’re using, by default, wraps a global div with class.fullscreen.fullscreen-enabled when it’s fullscreen and fullscreen when it’s not.

    So we can write the following CSS in the global/component style:

.fullscreen.fullscreen-enabled {
  background: #fff;
  padding: 24px;
}
Copy the code

And you can see it’s working, and we’ve added the padding, so it doesn’t look like the Card is going to be pushed to the side.

  • highly

    We set the full variable earlier, so let’s modify the code to determine the height based on full.

You can see that the height of the box has changed.

extension

If you think this is the end of it, you’re wrong. Then we talk about dark pits.

In antD components, modal/drawer/message and so on are DOM elements generated in the body, so what problems do we encounter?

In full screen mode there is no dialog box/message prompt, etc.

Fortunately, ANTD provides parameters that control the mount elements of the DOM.

  • Modal

    For modal, we first set an ID for full_screen:

    Note that this ID must be inside the FullScreen component.

    Then we add the following parameters to Modal. Info and Modal components:

    Note: I didn’t write modal in my demo, this is an extension. It’s not too complicated to write a Modal component, so you can try it out for yourself.

  • An API like modal.info

Modal.info({
  title: 'CUD request parameters'.width: 800.// Notice the addition of this
  getContainer: document.getElementById('full_screen')})Copy the code

  • message

    Pass the getContainer method via message.config:

    I didn’t find a good solution here. I need to config every time message.info, which is quite troublesome. If it is used as a global configuration, it may be a problem, we have a better way to leave a message.