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
@@ -36,55 +36,67 @@ function FormModal({
    }
  };

+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
  return (
-    <div 
-      className="modal show d-block" 
-      role="dialog" 
-      aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
-      onKeyDown={handleKeyDown}
-    >
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
      <div 
-        className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${centered ? ' modal-dialog-centered' : ''}`}
-        role="document"
+        className="modal show d-block" 
+        role="dialog" 
+        aria-modal="true"
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
      >
-        <div className="modal-content" tabIndex={-1}>
-          <form onSubmit={handleSubmit}>
-            <div className="modal-header">
-              <h5 className="modal-title">{title}</h5>
-              <button type="button" className="btn-close" onClick={onClose} />
-            </div>
-            
-            <div className="modal-body">
-              {children}
-            </div>
-            
-            <div className="modal-footer">
-              <button 
-                type="button" 
-                className="btn btn-secondary" 
-                onClick={onClose}
-                disabled={loading}
-              >
-                {CancelIcon && <CancelIcon className="me-2" size={16} />}
-                {cancelLabel}
-              </button>
-              <button 
-                type="submit" 
-                className={`btn btn-${submitVariant}`}
-                disabled={loading || disabled}
-              >
-                {loading && (
-                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
-                )}
-                {!loading && SubmitIcon && <SubmitIcon className="me-2" size={16} />}
-                {submitLabel}
-              </button>
-            </div>
-          </form>
+        <div 
+          className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${centered ? ' modal-dialog-centered' : ''}`}
+          role="document"
+        >
+          <div className="modal-content" tabIndex={-1}>
+            <form onSubmit={handleSubmit}>
+              <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-footer">
+                <button 
+                  type="button" 
+                  className="btn btn-secondary" 
+                  onClick={onClose}
+                  disabled={loading}
+                >
+                  {CancelIcon && <CancelIcon className="me-2" size={16} />}
+                  {cancelLabel}
+                </button>
+                <button 
+                  type="submit" 
+                  className={`btn btn-${submitVariant}`}
+                  disabled={loading || disabled}
+                >
+                  {loading && (
+                    <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
+                  )}
+                  {!loading && SubmitIcon && <SubmitIcon className="me-2" size={16} />}
+                  {submitLabel}
+                </button>
+              </div>
+            </form>
+          </div>
        </div>
      </div>
-    </div>
+    </>
  );
 }