diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts index c2a84ffa..510438de 100644 --- a/src/model/quizSettings.ts +++ b/src/model/quizSettings.ts @@ -38,7 +38,6 @@ export interface QuizConfig { button: string; position: QuizStartpageAlignType; favIcon: string | null; - originalFavIcon: string | null; logo: string | null; originalLogo: string | null; background: { @@ -72,7 +71,6 @@ export const defaultQuizConfig: QuizConfig = { button: "", position: "left", favIcon: null, - originalFavIcon: null, logo: null, originalLogo: null, background: { diff --git a/src/pages/startPage/FaviconDropZone.tsx b/src/pages/startPage/FaviconDropZone.tsx new file mode 100644 index 00000000..c37ae46f --- /dev/null +++ b/src/pages/startPage/FaviconDropZone.tsx @@ -0,0 +1,125 @@ +import UploadIcon from "@icons/UploadIcon"; +import { Box, ButtonBase, Typography, useTheme } from "@mui/material"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import { enqueueSnackbar } from "notistack"; +import { useState } from "react"; +import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal"; +import { useDisclosure } from "../../utils/useDisclosure"; + + +const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; + +interface Props { + imageUrl: string | null; + onImageUploadClick: (image: Blob) => void; + onDeleteClick: () => void; +} + +export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) { + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const [isDropReady, setIsDropReady] = useState(false); + const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure(); + + if (!quiz) return null; // TODO throw and catch with error boundary + + async function handleImageUpload(file: File) { + if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик"); + if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif"); + + onImageUploadClick(file); + closeImageUploadModal(); + } + + const onDrop = (event: React.DragEvent) => { + event.preventDefault(); + setIsDropReady(false); + + const file = event.dataTransfer.files[0]; + if (!file || imageUrl) return; + + handleImageUpload(file); + }; + + return ( + + + !imageUrl && setIsDropReady(true)} + onDragExit={() => setIsDropReady(false)} + onDragOver={e => e.preventDefault()} + onDrop={onDrop} + sx={{ + width: "48px", + height: "48px", + backgroundColor: theme.palette.background.default, + border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`, + borderRadius: "8px", + }}> + + {imageUrl ? + + : + + } + + + + {imageUrl && + + + Удалить + + + } + + 5 MB максимум + + + + ); +}; diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index e51ae8a0..e77be9b4 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -37,6 +37,7 @@ import SelectableIconButton from "./SelectableIconButton"; import { DropZone } from "./dropZone"; import Extra from "./extra"; import { resizeFavIcon } from "@ui_kit/reactImageFileResizer"; +import FaviconDropZone from "./FaviconDropZone"; const designTypes = [ @@ -86,19 +87,9 @@ export default function StartPageSettings() { if (!quiz) return null; // TODO throw and catch with error boundary const favIconDropZoneElement = ( - { - const resizedImage = await resizeFavIcon(file); - uploadQuizImage(quiz.id, resizedImage, (quiz, url) => { - quiz.config.startpage.favIcon = url; - quiz.config.startpage.originalFavIcon = url; - }); - }} - onImageSaveClick={async file => { const resizedImage = await resizeFavIcon(file); uploadQuizImage(quiz.id, resizedImage, (quiz, url) => { quiz.config.startpage.favIcon = url; @@ -613,25 +604,7 @@ export default function StartPageSettings() { > Favicon - - {favIconDropZoneElement} - - 5 MB максимум - - + {favIconDropZoneElement} )} @@ -695,25 +668,7 @@ export default function StartPageSettings() { > Favicon - - {favIconDropZoneElement} - - 5 MB максимум - - + {favIconDropZoneElement} )} {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (