components/export_modal.js - dev - deka/dber

components/export_modal.js
84 строки3 KB
Maxim Ratnikov
Добавил тестовые данные
08 окт 2024, 20:57
08 окт 2024, 20:573035207
import { useState, useEffect } from 'react';
import { Modal, Notification, Tabs } from '@arco-design/web-react';
import Editor from '@monaco-editor/react';

import graphState from '@/hooks/use-graph-state';
import exportSQL from '@/utils/export-sql';

const TabPane = Tabs.TabPane;

/**
 * It's a modal that displays the command to be exported
 * @returns Modal component
 */
export default function ExportModal({ showModal, onCloseModal }) {
    const [exportType, setExportType] = useState('dbml');
    const [sqlValue, setSqlValue] = useState('');
    const { tableDict, linkDict, theme } = graphState.useContainer();

    const copy = async () => {
        try {
            await window.navigator.clipboard.writeText(sqlValue);
            Notification.success({
                title: 'Успешно скопировано',
            });
        } catch (e) {
            console.log(e);
            Notification.error({
                title: 'Не удалось скопировать',
            });
        }
    };

    //  вместо "confluence" мы используем "json".
    // TODO: Сделать красвее, но нужно лезть в компоненту.
    useEffect(() => {
        if ((exportType === 'confluence') & (showModal === 'export')) {
            const sql = exportSQL(tableDict, linkDict, 'json');
            setSqlValue(sql);
        } else if (showModal === 'export') {
            const sql = exportSQL(tableDict, linkDict, exportType);
            setSqlValue(sql);
        }
    }, [showModal, exportType]);

    return (
        <Modal
            title={null}
            simple
            visible={showModal === 'export'}
            autoFocus={false}
            onOk={() => copy()}
            okText="Скопировать"
            cancelText="Закрыть"
            onCancel={() => onCloseModal()}
            style={{ width: 'auto' }}
        >
            <Tabs activeTab={exportType} onChange={val => setExportType(val)}>
                <TabPane key="dbml" title="DBML" />
                <TabPane key="postgres" title="PostgreSQL" />
                <TabPane key="mysql" title="MySQL" />
                <TabPane key="mssql" title="MSSQL" />
                <TabPane key="confluence" title="CONFLUENCE" />
                <TabPane key="json" title="JSON" />
            </Tabs>
            <Editor
                value={sqlValue}
                language={exportType === 'dbml' ? 'apex' : 'sql'}
                width="680px"
                height="80vh"
                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
                options={{
                    readOnly: true,
                    minimap: { enabled: false },
                    scrollbar: {
                        //Настройки полосы прокрутки
                        verticalScrollbarSize: 6, //Вертикальная полоса прокрутки
                        horizontalScrollbarSize: 6, // Горизонтальная полоса прокрутки
                    },
                    lineNumbers: 'on', //Контролируем появление номеров строк on | off
                }}
            />
        </Modal>
    );
}