एक resizable `antd` दराज?

Question

मैं एक antdड्रॉअर को रिसाइकल करने का एक तरीका प्रदान करना चाहूंगा ?

मैंने विशेष रूप से एक लोकप्रिय उत्तर पढ़ा , material-ui/Drawerलेकिन मैं इसके साथ बहुत कुछ करना चाह रहा हूं antd।

क्या किसी के पास एक समान antdउदाहरण है - या एक बेहतर विचार है कि दराज के किनारे से कटा हुआ जानकारी को कैसे संभालना है।

Answer 1

आप Drawerइसे widthप्रॉप्स पर निर्दिष्ट करके इसकी चौड़ाई बढ़ा सकते हैं । यदि आप इसे विस्तारित नहीं करना चाहते हैं, लेकिन आप चाहते हैं कि सामग्री अभी भी फिट हो, तो आप bodyStyleप्रोप और उपयोग पर चौड़ाई निर्धारित कर सकते हैं overflow: "auto":

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

मैंने उस लिंक के आधार पर एक resizable ड्रॉअर भी बनाया है जो आप antd version (प्रतिक्रिया हुक संस्करण उत्तर) में प्रदान करते हैं ।

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;

और इसका उपयोग करने के लिए:

import ResizableDrawer from "./ResizableDrawer";

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

यहां काम कर रहे डेमो देखें:

Answer 2

1. widthदराज की ट्रैकिंग के लिए दो राज्य हैं और दराज का आकार बदला जा रहा है या नहीं ( isResizing)।
2. वैश्विक दस्तावेज़ पर दो ईवेंट श्रोताओं को जोड़ें जहां यह सुनेंगे mousemoveऔर mouseup। mousemoveघटना दराज आकार बदलेंगे, केवल तभी isResizingसच है। और mouseupघटना isResizingझूठी होगी ।
3. अपने दराज में एक डिव जोड़ें जो कि ड्रॉअर को रेसिजेबल बनाने के लिए ड्रैगबल बॉर्डर का काम करता है। यह div एक mousedownघटना के लिए सुनेगी , जो isResizingसत्य की स्थिति को निर्धारित करेगी ।

यहाँ कोड है कि atd की वेबसाइट से बुनियादी दराज डेमो से सुधार किया गया है।

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"));

और यहाँ कोड का डेमो है:

डेमो