feat: Рефакторинг компонента HistoryModal с заменой на простой подход с встроенным backdrop. Упрощение структуры и улучшение взаимодействия с пользователем через обновленный интерфейс модального окна.

2025-10-03 10:56:56 +07:00
parent 2104c0170d
commit 9bff239035
2 changed files with 177 additions and 186 deletions
@@ -1,21 +1,8 @@
 import { useEffect, useRef } from 'react';

 /**
- * Универсальный Modal компонент с гарантированным backdrop
- * Единая система для всех модальных окон проекта
- * 
- * @param {boolean} show - Показать/скрыть модалку
- * @param {function} onClose - Callback при закрытии
- * @param {function} onOpen - Callback при открытии
- * @param {string|ReactNode} title - Заголовок модалки
- * @param {ReactNode} children - Содержимое
- * @param {ReactNode} footer - Футер с кнопками
- * @param {string} size - Размер: sm, md, lg, xl
- * @param {boolean} backdrop - Показывать backdrop (по умолчанию true)
- * @param {boolean} keyboard - Закрывать по ESC (по умолчанию true)
- * @param {boolean} scrollable - Прокручиваемое тело
- * @param {boolean} centered - Центрировать по вертикали
- * @param {string} className - Дополнительные CSS классы
+ * Универсальный Modal компонент
+ * Простой и надёжный - работает как HistoryModal
 */
 function Modal({ 
  show, 
@@ -32,13 +19,12 @@ function Modal({
  className = ''
 }) {
  const modalRef = useRef(null);
-  const backdropRef = useRef(null);

  // Управление классом modal-open на body
  useEffect(() => {
    if (show) {
      document.body.classList.add('modal-open');
-      modalRef.current?.focus();
+      setTimeout(() => modalRef.current?.focus(), 100);
      onOpen?.();
    } else {
      document.body.classList.remove('modal-open');
@@ -64,90 +50,72 @@ function Modal({

  if (!show) return null;

-  const handleBackdropClick = (e) => {
-    if (backdrop && e.target === backdropRef.current) {
-      onClose?.();
-    }
-  };
-
  return (
-    <>
-      {/* Backdrop - гарантированное затемнение */}
-      {backdrop && (
-        <div 
-          ref={backdropRef}
-          className="modal-backdrop fade show" 
-          onClick={handleBackdropClick}
-          style={{ 
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            zIndex: 1050
-          }}
-        />
-      )}
-      
-      {/* Modal */}
+    <div 
+      className={`modal show d-block ${className}`}
+      role="dialog" 
+      aria-modal="true"
+      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+      onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
+    >
      <div 
-        className={`modal fade show d-block ${className}`}
-        tabIndex="-1" 
-        role="dialog"
-        aria-modal="true"
-        style={{ 
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          overflow: 'auto',
-          zIndex: 1055 
-        }}
-        ref={modalRef}
+        className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
+        role="document"
      >
-        <div className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}>
-          <div className="modal-content">
-            {title && (
-              <div className="modal-header">
-                <h5 className="modal-title">{title}</h5>
-                <button 
-                  type="button" 
-                  className="btn-close" 
-                  onClick={onClose}
-                  aria-label="Закрыть"
-                />
-              </div>
-            )}
-            
-            <div className="modal-body">
-              {children}
+        <div 
+          className="modal-content" 
+          ref={modalRef}
+          tabIndex={-1}
+          onKeyDown={(e) => {
+            if (e.key === 'Tab') {
+              const c = e.currentTarget;
+              const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+              if (!focusable || focusable.length === 0) return;
+              const first = focusable[0];
+              const last = focusable[focusable.length - 1];
+              if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+              } else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+              }
+            }
+          }}
+        >
+          {title && (
+            <div className="modal-header">
+              <h5 className="modal-title">{title}</h5>
+              <button 
+                type="button" 
+                className="btn-close" 
+                onClick={onClose}
+                aria-label="Закрыть"
+              />
            </div>
-            
-            {footer && (
-              <div className="modal-footer">
-                {footer}
-              </div>
-            )}
+          )}
+          
+          <div className="modal-body">
+            {children}
          </div>
+          
+          {footer && (
+            <div className="modal-footer">
+              {footer}
+            </div>
+          )}
        </div>
      </div>
-    </>
+    </div>
  );
 }

 export default Modal;

 /**
- * ===================================
- * ГОТОВЫЕ ПРЕСЕТЫ ДЛЯ РАЗНЫХ ЦЕЛЕЙ
- * ===================================
+ * Готовые пресеты для быстрого использования
 */

-/**
- * Компактная модалка для быстрых подтверждений
- */
 export function SmallModal({ show, onClose, title, children, footer, ...props }) {
  return (
    <Modal
@@ -164,9 +132,6 @@ export function SmallModal({ show, onClose, title, children, footer, ...props })
  );
 }

-/**
- * Большая модалка для сложного контента
- */
 export function LargeModal({ show, onClose, title, children, footer, scrollable = true, ...props }) {
  return (
    <Modal
@@ -184,9 +149,6 @@ export function LargeModal({ show, onClose, title, children, footer, scrollable
  );
 }

-/**
- * Модалка на весь экран
- */
 export function FullscreenModal({ show, onClose, title, children, footer, ...props }) {
  return (
    <Modal