feat: Добавить анимации и улучшения UX/UI в компоненты приложения, включая плавные переходы, эффекты при наведении и анимации для модальных окон. Обновить карточки и таблицы с новыми анимациями для улучшения визуального восприятия и доступности.

2025-10-02 19:17:25 +07:00
parent cd5e169bc6
commit 8952c4a897
12 changed files with 1267 additions and 143 deletions
@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import { IconX } from '@tabler/icons-react';
+
+/**
+ * Универсальный Modal компонент
+ * Использует нативный Tabler UI стиль
+ */
+function Modal({ 
+  show, 
+  onClose, 
+  title, 
+  children, 
+  footer,
+  size = 'md', // sm, md, lg, xl
+  backdrop = true,
+  keyboard = true,
+  scrollable = false,
+  centered = false,
+  className = ''
+}) {
+  const modalRef = useRef(null);
+  const backdropRef = useRef(null);
+
+  // Управление классом modal-open на body
+  useEffect(() => {
+    if (show) {
+      document.body.classList.add('modal-open');
+      // Trap focus внутри модалки
+      modalRef.current?.focus();
+    } else {
+      document.body.classList.remove('modal-open');
+    }
+
+    return () => {
+      document.body.classList.remove('modal-open');
+    };
+  }, [show]);
+
+  // Обработка ESC
+  useEffect(() => {
+    if (keyboard && show) {
+      const handleEsc = (e) => {
+        if (e.key === 'Escape') onClose?.();
+      };
+      document.addEventListener('keydown', handleEsc);
+      return () => document.removeEventListener('keydown', handleEsc);
+    }
+  }, [keyboard, show, onClose]);
+
+  if (!show) return null;
+
+  const handleBackdropClick = (e) => {
+    if (backdrop && e.target === backdropRef.current) {
+      onClose?.();
+    }
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div 
+        ref={backdropRef}
+        className="modal-backdrop fade show" 
+        onClick={handleBackdropClick}
+        style={{ zIndex: 1050 }}
+      />
+      
+      {/* Modal */}
+      <div 
+        className={`modal fade show d-block ${className}`}
+        tabIndex="-1" 
+        role="dialog"
+        aria-modal="true"
+        style={{ zIndex: 1055 }}
+        ref={modalRef}
+      >
+        <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>
+            
+            {footer && (
+              <div className="modal-footer">
+                {footer}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Modal;
+