3x-ui/frontend/src/components/feedback/TextModal.tsx

import { useCallback, useState } from 'react';
import { Button, Input, Modal, Tabs, message } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

import JsonEditor from '@/components/form/JsonEditor';
import { ClipboardManager, FileManager } from '@/utils';

export interface TextModalTab {
  key: string;
  label: string;
  content: string;
}

interface TextModalProps {
  open: boolean;
  onClose: () => void;
  title: string;
  content: string;
  fileName?: string;
  json?: boolean;
  tabs?: TextModalTab[];
}

export default function TextModal({
  open,
  onClose,
  title,
  content,
  fileName = '',
  json = false,
  tabs,
}: TextModalProps) {
  const { t } = useTranslation();
  const [messageApi, messageContextHolder] = message.useMessage();
  const [activeKey, setActiveKey] = useState('');

  // Reset on the way out so the next open starts on the first tab; activeTab
  // falls back to tabs[0] whenever activeKey no longer matches.
  const close = useCallback(() => {
    setActiveKey('');
    onClose();
  }, [onClose]);

  const activeTab = tabs?.find((tab) => tab.key === activeKey) ?? tabs?.[0];
  const activeContent = activeTab ? activeTab.content : content;

  async function copy() {
    const ok = await ClipboardManager.copyText(activeContent || '');
    if (ok) {
      messageApi.success(t('copied'));
      close();
    }
  }

  function download() {
    if (!fileName) return;
    FileManager.downloadTextFile(activeContent, fileName);
  }

  return (
    <>
      {messageContextHolder}
      <Modal
        open={open}
        title={title}
        onCancel={close}
        destroyOnHidden
        footer={
          <>
            {fileName && (
              <Button icon={<DownloadOutlined aria-hidden />} onClick={download}>
                {fileName}
              </Button>
            )}
            <Button type="primary" icon={<CopyOutlined aria-hidden />} onClick={copy}>
              {t('copy')}
            </Button>
          </>
        }
      >
        {tabs && tabs.length > 0 && (
          <Tabs
            activeKey={activeTab?.key}
            onChange={setActiveKey}
            items={tabs.map((tab) => ({ key: tab.key, label: tab.label }))}
          />
        )}
        {json ? (
          <JsonEditor value={activeContent} readOnly minHeight="240px" maxHeight="60vh" />
        ) : (
          <Input.TextArea
            aria-label={title}
            value={activeContent}
            readOnly
            autoSize={{ minRows: 10, maxRows: 20 }}
            style={{
              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
              fontSize: 12,
              overflowY: 'auto',
            }}
          />
        )}
      </Modal>
    </>
  );
}