React实现点击收缩和向右拖拽的页面布局

React实现点击收缩和向右拖拽的页面布局

/* 实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围 */
import React, { useEffect, useRef, useState } from "react";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

/* 函数式组件props的类型定义 */
interface Props {
    width: number,
    height: any,
}

const ResizableBox: React.FC<Props> = (props) => {
    const [leftWidth, setLeftWidth] = useState(150);
    const [collapsed, setCollapsed] = useState(false);

    const handleResize = (event) => {
        const startX = event.clientX;
        const initialLeftWidth = leftWidth;
        document.onmousemove = (e) => {
            const endX = e.clientX;
            let moveLen = initialLeftWidth + (endX - startX);
            moveLen = Math.max(150, Math.min(moveLen, window.innerWidth - 150));
            setLeftWidth(moveLen);
        };
        document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };

    const handleCollapsed = () => {
        setCollapsed(!collapsed)
    }

    useEffect(() => {
        collapsed ? setLeftWidth(0) : setLeftWidth(150)
    }, [collapsed])


    return (
        <div style={{ width: "100%", height: "600px", overflow: "hidden" }}>
            <div 
                id="sider"
                style={{
                    float: "left",
                    width: `${leftWidth}px`,
                    height: "100%",
                    background: "#f7f7f7",
                    transition: leftWidth <= 150 ? "width 1s" : "none",
                    WebkitTransition: leftWidth <= 150 ? "width 1s" : "none",
                }}>
                Sider
            </div>
            <div
                onMouseDown={handleResize}
                style={{
                    float: "left",
                    width: "15px",
                    height: "100%",
                    background: "white",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    cursor: "w-resize",
                }}>
                <div
                    onClick={handleCollapsed}
                    style={{
                        width: "15px",
                        height: "60px",
                        borderRadius: "0 20px 20px 0",
                        background: "#eeeeee",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        cursor: "pointer",
                    }}>
                    {
                        collapsed ? <RightOutlined /> : <LeftOutlined />
                    }
                </div>
            </div>
            <div
                id="content"
                style={{
                    float: "right",
                    width: `calc(100% - ${leftWidth + 15}px)`,
                    height: "100%",
                    background: "white",
                    transition: leftWidth <= 150 ? "width 1s" : "none",
                    WebkitTransition: leftWidth <= 150 ? "width 1s" : "none",
                }}>
                Content
            </div>
        </div>
    );
};

export default ResizableBox;