add image dropzone delete button
This commit is contained in:
nflnkr
parent
b6cd284972
commit
05764656d8
@ -22,7 +22,7 @@ import {
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
|
||||
import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
@ -307,8 +307,15 @@ export default function StartPageSettings() {
|
||||
heightImg={"110px"}
|
||||
sx={{ maxWidth: "300px" }}
|
||||
imageUrl={quiz.config.startpage.background.desktop}
|
||||
onImageUpload={(quiz, url) => {
|
||||
quiz.config.startpage.background.desktop = url;
|
||||
onFileChange={file => {
|
||||
uploadQuizImage(quiz.id, file, (quiz, url) => {
|
||||
quiz.config.startpage.background.desktop = url;
|
||||
});
|
||||
}}
|
||||
onDeleteClick={() => {
|
||||
updateQuiz(quiz.id, quiz => {
|
||||
quiz.config.startpage.background.desktop = null;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -361,8 +368,15 @@ export default function StartPageSettings() {
|
||||
text={"5 MB максимум"}
|
||||
heightImg={"110px"}
|
||||
imageUrl={quiz.config.startpage.background.mobile}
|
||||
onImageUpload={(quiz, url) => {
|
||||
quiz.config.startpage.background.mobile = url;
|
||||
onFileChange={file => {
|
||||
uploadQuizImage(quiz.id, file, (quiz, url) => {
|
||||
quiz.config.startpage.background.mobile = url;
|
||||
});
|
||||
}}
|
||||
onDeleteClick={() => {
|
||||
updateQuiz(quiz.id, quiz => {
|
||||
quiz.config.startpage.background.mobile = null;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -450,8 +464,15 @@ export default function StartPageSettings() {
|
||||
text={"5 MB максимум"}
|
||||
heightImg={"110px"}
|
||||
imageUrl={quiz.config.startpage.background.mobile}
|
||||
onImageUpload={(quiz, url) => {
|
||||
quiz.config.startpage.background.mobile = url;
|
||||
onFileChange={file => {
|
||||
uploadQuizImage(quiz.id, file, (quiz, url) => {
|
||||
quiz.config.startpage.background.mobile = url;
|
||||
});
|
||||
}}
|
||||
onDeleteClick={() => {
|
||||
updateQuiz(quiz.id, quiz => {
|
||||
quiz.config.startpage.background.mobile = null;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -518,8 +539,15 @@ export default function StartPageSettings() {
|
||||
heightImg={"110px"}
|
||||
sx={{ maxWidth: "300px" }}
|
||||
imageUrl={quiz.config.logo}
|
||||
onImageUpload={(quiz, url) => {
|
||||
quiz.config.logo = url;
|
||||
onFileChange={file => {
|
||||
uploadQuizImage(quiz.id, file, (quiz, url) => {
|
||||
quiz.config.logo = url;
|
||||
});
|
||||
}}
|
||||
onDeleteClick={() => {
|
||||
updateQuiz(quiz.id, quiz => {
|
||||
quiz.config.logo = null;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -592,8 +620,15 @@ export default function StartPageSettings() {
|
||||
heightImg={"110px"}
|
||||
sx={{ maxWidth: "300px" }}
|
||||
imageUrl={quiz.config.logo}
|
||||
onImageUpload={(quiz, url) => {
|
||||
quiz.config.logo = url;
|
||||
onFileChange={file => {
|
||||
uploadQuizImage(quiz.id, file, (quiz, url) => {
|
||||
quiz.config.logo = url;
|
||||
});
|
||||
}}
|
||||
onDeleteClick={() => {
|
||||
updateQuiz(quiz.id, quiz => {
|
||||
quiz.config.logo = null;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -704,7 +739,7 @@ export default function StartPageSettings() {
|
||||
})}
|
||||
/>
|
||||
<CustomCheckbox
|
||||
sx={{margin: "10px 0"}}
|
||||
sx={{ margin: "10px 0" }}
|
||||
label="Кликабельный"
|
||||
checked={quiz.config.info.clickable}
|
||||
handleChange={e => updateQuiz(quiz.id, quiz => {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import UploadIcon from "@icons/UploadIcon";
|
||||
import { Quiz } from "@model/quiz/quiz";
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import {
|
||||
Box,
|
||||
ButtonBase,
|
||||
IconButton,
|
||||
SxProps,
|
||||
Theme,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { uploadQuizImage } from "@root/quizes/actions";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useState } from "react";
|
||||
@ -19,12 +19,13 @@ interface Props {
|
||||
sx?: SxProps<Theme>;
|
||||
heightImg: string;
|
||||
widthImg?: string;
|
||||
onImageUpload: (quiz: Quiz, url: string) => void;
|
||||
onFileChange?: (file: File) => void;
|
||||
onDeleteClick?: () => void;
|
||||
imageUrl: string | null;
|
||||
}
|
||||
|
||||
//Научи функцию принимать данные для валидации
|
||||
export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUrl }: Props) => {
|
||||
export const DropZone = ({ text, sx, heightImg, widthImg, onFileChange, onDeleteClick, imageUrl }: Props) => {
|
||||
const theme = useTheme();
|
||||
const quiz = useCurrentQuiz();
|
||||
const [ready, setReady] = useState(false);
|
||||
@ -39,7 +40,7 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr
|
||||
if (!file) return;
|
||||
if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
|
||||
|
||||
uploadQuizImage(quiz.id, file, onImageUpload);
|
||||
onFileChange?.(file);
|
||||
};
|
||||
|
||||
const dragenterHC = () => {
|
||||
@ -57,14 +58,57 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (file.size < 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
|
||||
|
||||
uploadQuizImage(quiz.id, file, onImageUpload);
|
||||
onFileChange?.(file);
|
||||
};
|
||||
|
||||
const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
return imageUrl ? (
|
||||
<Box
|
||||
onDragEnter={dragenterHC}
|
||||
onDragExit={dragexitHC}
|
||||
onDrop={dropHC}
|
||||
onDragOver={dragOverHC}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "120px",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
|
||||
borderRadius: "8px",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
height={heightImg}
|
||||
width={widthImg}
|
||||
src={imageUrl}
|
||||
style={{
|
||||
objectFit: "scale-down",
|
||||
}}
|
||||
alt="img"
|
||||
/>
|
||||
<IconButton
|
||||
onClick={onDeleteClick}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: 0,
|
||||
color: theme.palette.orange.main,
|
||||
fontSize: "16px",
|
||||
lineHeight: "19px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
) : (
|
||||
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
|
||||
<input
|
||||
onChange={(event) => imgHC(event.target)}
|
||||
@ -106,19 +150,6 @@ export const DropZone = ({ text, sx, heightImg, widthImg, onImageUpload, imageUr
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
{imageUrl && (
|
||||
<img
|
||||
height={heightImg}
|
||||
width={widthImg}
|
||||
src={imageUrl}
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: "-1",
|
||||
objectFit: "revert-layer",
|
||||
}}
|
||||
alt="img"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</ButtonBase>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user