Eine anpassbare `antd` Schublade?

Question

Ich möchte eine Möglichkeit bieten, die antdGröße einer Schublade zu ändern.

Ich habe eine beliebte Antwort speziell für gelesen, material-ui/Draweraber ich möchte etwas sehr Ähnliches tun antd.

Hat jemand ein ähnliches antdBeispiel - oder hat er eine bessere Idee, wie man mit Informationen umgeht, die an der Seite der Schublade abgeschnitten werden?

Answer 1

Sie können die Breite Drawervon erweitern, indem Sie sie auf den widthRequisiten angeben. Wenn Sie es nicht erweitern möchten, der Inhalt aber noch passen soll, können Sie die Breite für die bodyStyleRequisite festlegen und Folgendes verwenden overflow: "auto":

<Drawer
    title="Basic Drawer"
    placement="right"
    closable={false}
    visible={isDrawerVisible}
    bodyStyle={{
      width: 400,
      overflow: "auto"
    }}
    onClose={toggleDrawerVisible}
>

Ich habe auch eine anpassbare Schublade basierend auf dem Link erstellt , den Sie in der antd- Version bereitstellen ( React Hooks-Versionsantwort).

ResizableDrawer.jsx

import React, { useState, useEffect } from "react";
import { Drawer } from "antd";

let isResizing = null;

const ResizableDrawer = ({ children, ...props }) => {
  const [drawerWidth, setDrawerWidth] = useState(undefined);

  const cbHandleMouseMove = React.useCallback(handleMousemove, []);
  const cbHandleMouseUp = React.useCallback(handleMouseup, []);

  useEffect(() => {
    setDrawerWidth(props.width);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.visible]);

  function handleMouseup(e) {
    if (!isResizing) {
      return;
    }
    isResizing = false;
    document.removeEventListener("mousemove", cbHandleMouseMove);
    document.removeEventListener("mouseup", cbHandleMouseUp);
  }

  function handleMousedown(e) {
    e.stopPropagation();
    e.preventDefault();
    // we will only add listeners when needed, and remove them afterward
    document.addEventListener("mousemove", cbHandleMouseMove);
    document.addEventListener("mouseup", cbHandleMouseUp);
    isResizing = true;
  }

  function handleMousemove(e) {
    let offsetRight =
      document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
    let minWidth = 256;
    let maxWidth = 600;
    if (offsetRight > minWidth && offsetRight < maxWidth) {
      setDrawerWidth(offsetRight);
    }
  }

  return (
    <Drawer {...props} width={drawerWidth}>
      <div className="sidebar-dragger" onMouseDown={handleMousedown} />
      {children}
    </Drawer>
  );
};

export default ResizableDrawer;

und um es zu benutzen:

import ResizableDrawer from "./ResizableDrawer";

<ResizableDrawer
    title="Resizable Drawer"
    placement="right"
    closable={false}
    visible={isResizableDrawerVisible}
    onClose={toggleResizableDrawerVisible}
>
    ...
</ResizableDrawer>

Sehen Sie hier die Arbeitsdemo:

Answer 2

1. Haben Sie zwei Zustände, um widthdie Schublade zu verfolgen und festzustellen, ob die Größe der Schublade geändert wird oder nicht ( isResizing).
2. Fügen Sie zwei Event - Listener auf dem globalen Dokument , in dem es für hören mousemoveund mouseup. Das mousemoveEreignis ändert die Größe der Schublade nur, wenn dies der isResizingFall ist. Und das mouseupEreignis wird isResizingauf false gesetzt.
3. Fügen Sie Ihrer Schublade ein Div hinzu, das als ziehbarer Rand dient, um die Größe der Schublade zu ändern. Dieser Div wartet auf ein mousedownEreignis, das den Status von isResizingauf true setzt.

Hier ist der Code, der gegenüber der grundlegenden Schubladen-Demo von der Website von antd verbessert wurde.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Drawer, Button } from "antd";

const App = () => {
  const [visible, setVisible] = useState(false);
  const [isResizing, setIsResizing] = useState(false);
  const [width, setWidth] = useState(256);

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  const onMouseDown = e => {
    setIsResizing(true);
  };

  const onMouseUp = e => {
    setIsResizing(false);
  };

  const onMouseMove = e => {
    if (isResizing) {
      let offsetRight =
        document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
      const minWidth = 50;
      const maxWidth = 600;
      if (offsetRight > minWidth && offsetRight < maxWidth) {
        setWidth(offsetRight);
      }
    }
  };

  useEffect(() => {
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);

    return () => {
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    };
  });

  return (
    <>
      <Button type="primary" onClick={showDrawer}>
        Open
      </Button>
      <Drawer
        title="Basic Drawer"
        placement="right"
        closable={false}
        onClose={onClose}
        visible={visible}
        width={width}
      >
        <div
          style={{
            position: "absolute",
            width: "5px",
            padding: "4px 0 0",
            top: 0,
            left: 0,
            bottom: 0,
            zIndex: 100,
            cursor: "ew-resize",
            backgroundColor: "#f4f7f9"
          }}
          onMouseDown={onMouseDown}
        />
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
};

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

Und hier ist die Demo des Codes:

DEMO