diff --git a/src/components/shared/FeedbackModal.module.css b/src/components/shared/FeedbackModal.module.css index 5305248..fd43768 100644 --- a/src/components/shared/FeedbackModal.module.css +++ b/src/components/shared/FeedbackModal.module.css @@ -66,6 +66,18 @@ object-fit: cover; } +.imageLoading { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f0f0f0; + color: #666; + font-size: 12px; + text-align: center; +} + .removeImageButton { position: absolute; top: 4px; diff --git a/src/components/shared/FeedbackModal.tsx b/src/components/shared/FeedbackModal.tsx index 5fe525c..2501e3e 100644 --- a/src/components/shared/FeedbackModal.tsx +++ b/src/components/shared/FeedbackModal.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useRef, useEffect, memo } from 'react'; import styles from './NotificationModal.module.css'; // Используем существующие стили import feedbackStyles from './FeedbackModal.module.css'; // Дополнительные стили для формы @@ -13,6 +13,50 @@ interface FeedbackModalProps { onSubmit: (data: FeedbackData) => Promise | boolean; } +// Мемоизированный компонент превью изображения +const ImagePreview = memo(({ + file, + index, + onRemove, + disabled +}: { + file: File; + index: number; + onRemove: (index: number) => void; + disabled: boolean; +}) => { + const [url, setUrl] = useState(null); + + useEffect(() => { + // Создаем URL для превью + const objectUrl = URL.createObjectURL(file); + setUrl(objectUrl); + + // Очищаем URL при размонтировании + return () => { + URL.revokeObjectURL(objectUrl); + }; + }, [file]); + + return ( +
+ {url ? ( + {`Preview + ) : ( +
Загрузка...
+ )} + +
+ ); +}); + const FeedbackModal: React.FC = ({ isVisible, onClose, onSubmit }) => { const [text, setText] = useState(''); const [images, setImages] = useState([]); @@ -163,18 +207,14 @@ const FeedbackModal: React.FC = ({ isVisible, onClose, onSub {/* Превью загруженных изображений */} {images.length > 0 && (
- {images.map((image, index) => ( -
- {`Preview - -
+ {images.map((file, index) => ( + ))}
)}