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,72 @@
+import Modal from './Modal';
+
+/**
+ * FormModal - модальное окно с формой
+ * Автоматически обрабатывает submit и отображает кнопки действий
+ */
+function FormModal({ 
+  show, 
+  onClose, 
+  onSubmit, 
+  title, 
+  children,
+  submitLabel = 'Сохранить',
+  cancelLabel = 'Отмена',
+  submitIcon: SubmitIcon,
+  cancelIcon: CancelIcon,
+  loading = false,
+  submitVariant = 'primary',
+  disabled = false,
+  ...modalProps 
+}) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.(e);
+  };
+
+  const handleKeyDown = (e) => {
+    // Ctrl+Enter или Cmd+Enter для быстрого submit
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <Modal
+      show={show}
+      onClose={onClose}
+      title={title}
+      footer={
+        <>
+          <button 
+            type="button" 
+            className="btn btn-secondary" 
+            onClick={onClose}
+            disabled={loading}
+          >
+            {CancelIcon && <CancelIcon className="icon me-2" />}
+            {cancelLabel}
+          </button>
+          <button 
+            type="submit" 
+            className={`btn btn-${submitVariant}`}
+            onClick={handleSubmit}
+            disabled={loading || disabled}
+          >
+            {loading && <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />}
+            {!loading && SubmitIcon && <SubmitIcon className="icon me-2" />}
+            {submitLabel}
+          </button>
+        </>
+      }
+      {...modalProps}
+    >
+      <form onSubmit={handleSubmit} onKeyDown={handleKeyDown}>
+        {children}
+      </form>
+    </Modal>
+  );
+}
+
+export default FormModal;
+