components/context_menu.js - dev - deka/dber

components/context_menu.js
67 строк2 KB
Maxim Ratnikov
Перевод и переименование
03 окт 2024, 22:52
03 окт 2024, 22:5266088bf
import { Dropdown, Menu, Space, Divider } from '@arco-design/web-react';

import graphState from '@/hooks/use-graph-state';
import tableModel from '@/hooks/table-model';

export default function ContextMenu({ setShowModal, children }) {
    const { version } = graphState.useContainer();
    const { updateGraph, addTable } = tableModel();

    const menus = [
        {
            key: 'N',
            title: 'Новая таблица',
            action: () => addTable(),
        },
        {
            key: 'I',
            title: 'Импортировать таблицу',
            action: () => setShowModal('import'),
        },
        {
            key: 'line',
        },
        {
            key: 'S',
            title: 'Сохранить изменения',
            action: () => updateGraph(),
        },
        {
            key: 'E',
            title: 'Экспортировать БД',
            action: () => setShowModal('export'),
        },
    ];

    return (
        <Dropdown
            trigger="contextMenu"
            position="bl"
            droplist={
                version !== 'currentVersion' ? null : (
                    <Menu className="context-menu">
                        {menus.map(item =>
                            item.key === 'line' ? (
                                <Divider key={item.key} className="context-menu-line" />
                            ) : (
                                <Menu.Item
                                    key={item.key}
                                    className="context-menu-item"
                                    onClick={item.action}
                                >
                                    {item.title}
                                    <Space size={4}>
                                        <div className="arco-home-key">⌘</div>
                                        <div className="arco-home-key">{item.key}</div>
                                    </Space>
                                </Menu.Item>
                            )
                        )}
                    </Menu>
                )
            }
        >
            {children}
        </Dropdown>
    );
}