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

import './menu-tree.css';
import {useContext} from "react";
import {Axios} from "../../context/Context.ts";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faCheck, faCaretRight, faCaretDown, faEdit, faPlus, faRemove} from '@fortawesome/free-solid-svg-icons';
import {IMenuTree, IMenuTreeItem} from "../../interfaces/menu/IMenuTree.ts";

export default function MenuTree(props: IMenuTree) {
    const axios = useContext(Axios);

    const triggerChildren = (item: IMenuTreeItem) => {

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

        trigger();
    }

    const renderBtnGroup = (item: IMenuTreeItem) => {
        if(item.isEdit) {
            return (
                <>
                    <FontAwesomeIcon className="icon" icon={faCheck} onClick={() => {
                        props.handleEditSaveClick(item);
                    }}/>
                    <FontAwesomeIcon className="icon" icon={faRemove} onClick={() => {
                        props.handleEditCancelClick(item);
                    }}/>
                </>
            )
        }
        return (
            <>
                <FontAwesomeIcon className="icon" icon={faEdit} onClick={() => {
                    props.handleEditClick(item);
                }}/>
                <FontAwesomeIcon className="icon" icon={faPlus} onClick={() => {
                    props.handleAddClick(item);
                }}/>
                <FontAwesomeIcon className="icon" icon={faRemove} onClick={() => {
                    props.handleRemoveClick(item);
                }}/>
            </>
        );
    }

    const renderLabel = (item: IMenuTreeItem) => {
        if(item.isEdit) {
            return <input className="menu-name-input" value={item.name} onChange={(e) => {
                item.name = e.target.value;
                props.handleNameChange(item);
            }}/>
        }
        const icon = item.isOpen ? faCaretDown : faCaretRight;
        return (
            <>
                {item.isParent ? <FontAwesomeIcon className="icon" icon={icon} onClick={() => {
                    triggerChildren(item)
                }}/> : <></>}
                <span 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)}</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>
}