feat: Рефакторинг модальных окон с добавлением обработчиков клика по фону для закрытия. Обновление компонентов ConfirmDialog, ConfirmDiffModal, ConfirmModal, FormModal, HistoryModal, ImportModal, SettingsModal и WsUpdateModal для улучшения взаимодействия с пользователем и унификации интерфейса.

2025-10-03 13:09:14 +07:00
parent e85c8cf84e
commit f2b1db2092
9 changed files with 444 additions and 341 deletions
@@ -50,63 +50,75 @@ function Modal({

  if (!show) return null;

+  const handleBackdropClick = (e) => {
+    if (backdrop && e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
  return (
-    <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?.(); }}
-    >
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
      <div 
-        className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
-        role="document"
+        className={`modal show d-block ${className}`}
+        role="dialog" 
+        aria-modal="true"
+        tabIndex={-1}
+        onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
      >
        <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();
-              }
-            }
-          }}
+          className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
+          role="document"
        >
-          {title && (
-            <div className="modal-header">
-              <h5 className="modal-title">{title}</h5>
-              <button 
-                type="button" 
-                className="btn-close" 
-                onClick={onClose}
-                aria-label="Закрыть"
-              />
+          <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>
+            )}
+            
+            <div className="modal-body">
+              {children}
            </div>
-          )}
-          
-          <div className="modal-body">
-            {children}
+            
+            {footer && (
+              <div className="modal-footer">
+                {footer}
+              </div>
+            )}
          </div>
-          
-          {footer && (
-            <div className="modal-footer">
-              {footer}
-            </div>
-          )}
        </div>
      </div>
-    </div>
+    </>
  );
 }