src/components/NoteForm.tsx - master - AlexanderMalenkov/geobook

src/components/NoteForm.tsx
100 строк3 KB
Alexander Malenkov
GEOBOOK-1: init
04 июн 2026, 12:57
04 июн 2026, 12:5744c712a
import { useState } from 'react';
import type { Note } from '../types';

interface NoteFormProps {
  initialLat?: number;
  initialLng?: number;
  onSave: (note: Note) => void;
  onClose: () => void;
}

export default function NoteForm({ initialLat, initialLng, onSave, onClose }: NoteFormProps) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [lat, setLat] = useState(initialLat ?? 0);
  const [lng, setLng] = useState(initialLng ?? 0);
  const [locating, setLocating] = useState(false);

  const handleGeolocate = () => {
    if (!navigator.geolocation) return;
    setLocating(true);
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setLat(pos.coords.latitude);
        setLng(pos.coords.longitude);
        setLocating(false);
      },
      () => {
        setLocating(false);
        alert('Не удалось получить геолокацию');
      },
    );
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim() || !lat || !lng) return;
    onSave({
      title: title.trim(),
      content: content.trim(),
      lat,
      lng,
      createdAt: new Date().toISOString(),
    });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>Новая заметка</h2>
        <form onSubmit={handleSubmit}>
          <label>
            Название
            <input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Заголовок"
              required
            />
          </label>
          <label>
            Описание
            <textarea
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="Текст заметки"
              rows={4}
            />
          </label>
          <label>
            Широта
            <input
              type="number"
              step="any"
              value={lat}
              onChange={(e) => setLat(Number(e.target.value))}
              required
            />
          </label>
          <label>
            Долгота
            <input
              type="number"
              step="any"
              value={lng}
              onChange={(e) => setLng(Number(e.target.value))}
              required
            />
          </label>
          <div className="form-actions">
            <button type="button" onClick={handleGeolocate} disabled={locating}>
              {locating ? 'Определение...' : '📍 Моя геолокация'}
            </button>
            <button type="submit">Сохранить</button>
          </div>
        </form>
        <button className="close-btn" onClick={onClose}>✕</button>
      </div>
    </div>
  );
}