system-copyright-react/src/components/menu/MenuTree.tsx

import './menu-tree.css';
import {
    CaretRightOutlined,
    CaretDownOutlined,
    PlusOutlined,
    CloseOutlined,
    EditOutlined,
    CheckOutlined
} from '@ant-design/icons';
import {IMenuTree, IMenuTreeItem} from "../../interfaces/menu/IMenuTree.ts";

export default function MenuTree(props: IMenuTree) {

    const triggerChildren = (item: IMenuTreeItem) => {

        const trigger = () => {
            item.isOpen = !item.isOpen;
            props.setMenuTreeArray(item);
        }

        trigger();
    }

    const renderBtnGroup = (item: IMenuTreeItem, index: number, parent?: IMenuTreeItem) => {
        if (item.isEdit) {
            return (
                <>
                    <CheckOutlined className="icon" onClick={() => {
                        props.handleEditSaveClick(item);
                    }}/>
                    <CloseOutlined className="icon" onClick={() => {
                        props.handleEditCancelClick(item);
                    }}/>
                </>
            )
        }
        return (
            <>
                <EditOutlined className="icon" onClick={() => {
                    props.handleEditClick(item);
                }}/>
                <PlusOutlined className="icon" onClick={() => {
                    props.handleAddClick(item);
                }}/>
                <CloseOutlined className="icon" onClick={() => {
                    props.handleRemoveClick(item, index, parent);
                }}/>
            </>
        );
    }

    const renderLabel = (item: IMenuTreeItem) => {
        if (item.isEdit) {
            const width = 180 - 30 - item.level * 10;
            return <input className="menu-name-input"
                          value={item.name}
                          style={{width: width}}
                          onChange={(e) => {
                              item.name = e.target.value;
                              props.handleNameChange(item);
                          }}/>
        }
        const icon = item.isOpen ? <CaretDownOutlined onClick={() => {
            triggerChildren(item)
        }}/> : <CaretRightOutlined onClick={() => {
            triggerChildren(item)
        }}/>;
        const width = 180 - 50 - (item.level * 10) - (5 + (item.isParent ? 8.75 : 0));
        return (
            <>
                {item.isParent ? icon : <></>}
                <span
                    style={{width: width}}
                    onDoubleClick={() => {
                        triggerChildren(item)
                    }}>{item.name}</span>
            </>
        )
    }

    const renderMenu = (children: Array<IMenuTreeItem> | null, parent?: IMenuTreeItem) => {
        if (!children) {
            return <></>
        }
        const lis = children.map((item, index) => {
            const renderChildrenMenu = renderMenu(item.children, item);
            return (
                <li key={item.id}>
                    <div className="menu-title">
                        <div className="label">{renderLabel(item)}</div>
                        <div className="icon-group">{renderBtnGroup(item, index, parent)}</div>
                    </div>
                    {renderChildrenMenu}
                </li>
            )
        })
        const isOpen = parent ? parent.isOpen : true;
        return <ul style={{display: isOpen ? 'block' : 'none'}}>{lis}</ul>
    }

    return <div className="menu-tree">{renderMenu(props.menus)}</div>
}