client/src/components/LinkDialog.tsx - develop - kan64/spreadsheet-lab

client/src/components/LinkDialog.tsx
106 строк3 KB
Anton Kravchenkov
first_commit
18 фев 2026, 23:41
18 фев 2026, 23:4142314b2
import React, { useState, useEffect, useRef } from 'react';

interface LinkDialogProps {
  initialUrl: string;
  initialText: string;
  onConfirm: (url: string, text: string) => void;
  onRemove: () => void;
  onCancel: () => void;
}

export const LinkDialog: React.FC<LinkDialogProps> = ({
  initialUrl,
  initialText,
  onConfirm,
  onRemove,
  onCancel,
}) => {
  const [url, setUrl] = useState(initialUrl);
  const [text, setText] = useState(initialText);
  const urlInputRef = useRef<HTMLInputElement>(null);
  const hasExistingLink = !!initialUrl;

  useEffect(() => {
    urlInputRef.current?.focus();
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const trimmedUrl = url.trim();
    if (!trimmedUrl) return;
    onConfirm(trimmedUrl, text.trim());
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      e.stopPropagation();
      onCancel();
    }
  };

  return (
    <div className="link-dialog-overlay" onMouseDown={onCancel}>
      <div
        className="link-dialog"
        onMouseDown={(e) => e.stopPropagation()}
        onKeyDown={handleKeyDown}
      >
        <h3 className="link-dialog-title">
          {hasExistingLink ? 'Редактировать ссылку' : 'Вставить ссылку'}
        </h3>
        <form onSubmit={handleSubmit}>
          <div className="link-dialog-field">
            <label htmlFor="link-url">URL</label>
            <input
              ref={urlInputRef}
              id="link-url"
              type="text"
              className="link-dialog-input"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="https://example.com"
            />
          </div>
          <div className="link-dialog-field">
            <label htmlFor="link-text">Текст ячейки</label>
            <input
              id="link-text"
              type="text"
              className="link-dialog-input"
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder="Отображаемый текст (необязательно)"
            />
          </div>
          <div className="link-dialog-actions">
            {hasExistingLink && (
              <button
                type="button"
                className="link-dialog-btn link-dialog-btn-danger"
                onClick={onRemove}
              >
                Удалить ссылку
              </button>
            )}
            <div className="link-dialog-actions-right">
              <button
                type="button"
                className="link-dialog-btn link-dialog-btn-secondary"
                onClick={onCancel}
              >
                Отмена
              </button>
              <button
                type="submit"
                className="link-dialog-btn link-dialog-btn-primary"
                disabled={!url.trim()}
              >
                {hasExistingLink ? 'Сохранить' : 'Вставить'}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
};