refactor question edit image button
This commit is contained in:
nflnkr
parent
37ee98ecd3
commit
00a250c676
@ -1,46 +1,42 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Link,
|
|
||||||
Typography,
|
|
||||||
useTheme,
|
|
||||||
useMediaQuery,
|
|
||||||
InputAdornment,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
Button,
|
InputAdornment,
|
||||||
|
Link,
|
||||||
Popover,
|
Popover,
|
||||||
TextareaAutosize,
|
|
||||||
TextField,
|
TextField,
|
||||||
|
TextareaAutosize,
|
||||||
|
Typography,
|
||||||
|
useMediaQuery,
|
||||||
|
useTheme
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
import { useState } from "react";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
|
||||||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
|
||||||
import { CropModal } from "@ui_kit/Modal/CropModal";
|
import { CropModal } from "@ui_kit/Modal/CropModal";
|
||||||
|
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||||||
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
||||||
|
|
||||||
import AddImage from "@icons/questionsPage/addImage";
|
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||||||
import Image from "@icons/questionsPage/image";
|
import { MessageIcon } from "@icons/messagIcon";
|
||||||
|
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
||||||
|
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||||||
|
import { questionStore, updateQuestionsList } from "@root/questions";
|
||||||
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
|
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
|
||||||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||||
import SwitchOptionsAndPict from "./switchOptionsAndPict";
|
import SwitchOptionsAndPict from "./switchOptionsAndPict";
|
||||||
import React from "react";
|
|
||||||
import { questionStore, updateQuestionsList } from "@root/questions";
|
|
||||||
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
|
||||||
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
|
||||||
import { MessageIcon } from "@icons/messagIcon";
|
|
||||||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
|
||||||
import PlusImage from "@icons/questionsPage/plus";
|
|
||||||
|
|
||||||
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
|
||||||
import { produce } from "immer";
|
import { produce } from "immer";
|
||||||
|
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
totalIndex: number;
|
totalIndex: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function OptionsAndPicture({ totalIndex }: Props) {
|
export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||||
const [open, setOpen] = useState(false);
|
const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
|
||||||
const [opened, setOpened] = useState<boolean>(false);
|
const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
|
||||||
const [switchState, setSwitchState] = useState("setting");
|
const [switchState, setSwitchState] = useState("setting");
|
||||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||||
const quizId = Number(useParams().quizId);
|
const quizId = Number(useParams().quizId);
|
||||||
@ -65,8 +61,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
|||||||
content: clonedContent,
|
content: clonedContent,
|
||||||
});
|
});
|
||||||
|
|
||||||
setOpen(false);
|
setIsUploadImageModalOpen(false);
|
||||||
setOpened(true);
|
setIsCropModalOpen(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -79,134 +75,52 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
|||||||
additionalContent={(variant, index) => (
|
additionalContent={(variant, index) => (
|
||||||
<>
|
<>
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Box
|
<AddOrEditImageButton
|
||||||
sx={{ cursor: "pointer" }}
|
imageSrc={variant.extendedText}
|
||||||
onClick={() => {
|
onImageClick={() => {
|
||||||
setCurrentIndex(index);
|
setCurrentIndex(index);
|
||||||
setOpen(true);
|
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||||
|
|
||||||
|
setIsUploadImageModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
onPlusClick={() => {
|
||||||
{variant.extendedText ? (
|
setCurrentIndex(index);
|
||||||
<Box
|
setIsUploadImageModalOpen(true);
|
||||||
sx={{
|
}}
|
||||||
overflow: "hidden",
|
sx={{ mx: "10px" }}
|
||||||
width: "60px",
|
/>
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
borderRadius: "3px",
|
|
||||||
margin: "0 10px",
|
|
||||||
height: "40px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box sx={{ display: "flex", width: "40px" }}>
|
|
||||||
<img
|
|
||||||
src={variant.extendedText}
|
|
||||||
alt=""
|
|
||||||
style={{ width: "100%" }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<PlusImage />
|
|
||||||
</Box>
|
|
||||||
) : (
|
|
||||||
<Button component="label" sx={{ padding: "0px" }}>
|
|
||||||
<AddImage
|
|
||||||
sx={{
|
|
||||||
height: "40px",
|
|
||||||
width: "60px",
|
|
||||||
margin: "0 10px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
additionalMobile={(variant, index) => (
|
additionalMobile={(variant, index) => (
|
||||||
<>
|
<>
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<Box
|
<AddOrEditImageButton
|
||||||
onClick={() => {
|
imageSrc={variant.extendedText}
|
||||||
|
onImageClick={() => {
|
||||||
setCurrentIndex(index);
|
setCurrentIndex(index);
|
||||||
setOpen(true);
|
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||||
|
|
||||||
|
setIsUploadImageModalOpen(true);
|
||||||
}}
|
}}
|
||||||
sx={{
|
onPlusClick={() => {
|
||||||
overflow: "hidden",
|
setCurrentIndex(index);
|
||||||
display: "flex",
|
setIsUploadImageModalOpen(true);
|
||||||
alignItems: "center",
|
|
||||||
m: "8px",
|
|
||||||
position: "relative",
|
|
||||||
borderRadius: "3px",
|
|
||||||
}}
|
}}
|
||||||
>
|
sx={{ m: "8px", width: "auto" }}
|
||||||
<Box
|
/>
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
height: "40px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{variant.extendedText ? (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
overflow: "hidden",
|
|
||||||
width: "40px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
height: "30px",
|
|
||||||
borderRadius: "3px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={variant.extendedText}
|
|
||||||
alt=""
|
|
||||||
style={{ width: "100%" }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
) : (
|
|
||||||
<Button component="label" sx={{ padding: "0px" }}>
|
|
||||||
<Image
|
|
||||||
sx={{
|
|
||||||
height: "40px",
|
|
||||||
width: "60px",
|
|
||||||
margin: "0 10px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
width: "20px",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
height: "40px",
|
|
||||||
color: "white",
|
|
||||||
backgroundColor: "#7E2AEA",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<UploadImageModal
|
<UploadImageModal
|
||||||
open={open}
|
open={isUploadImageModalOpen}
|
||||||
onClose={() => setOpen(false)}
|
onClose={() => setIsUploadImageModalOpen(false)}
|
||||||
imgHC={uploadImage}
|
imgHC={uploadImage}
|
||||||
/>
|
/>
|
||||||
<CropModal
|
<CropModal
|
||||||
opened={opened}
|
opened={isCropModalOpen}
|
||||||
onClose={() => setOpened(false)}
|
onClose={() => setIsCropModalOpen(false)}
|
||||||
picture={question.content.variants[currentIndex]?.extendedText}
|
picture={question.content.variants[currentIndex]?.extendedText}
|
||||||
onCropPress={url => {
|
onCropPress={url => {
|
||||||
const content = produce(question.content, draft => {
|
const content = produce(question.content, draft => {
|
||||||
|
|||||||
@ -1,40 +1,36 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Link,
|
Link,
|
||||||
Typography,
|
Typography,
|
||||||
Button,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme
|
||||||
useMediaQuery
|
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
|
||||||
import ButtonsOptions from "../ButtonsOptions";
|
|
||||||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
|
||||||
import { CropModal } from "@ui_kit/Modal/CropModal";
|
|
||||||
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
|
||||||
import { questionStore, updateQuestionsList } from "@root/questions";
|
import { questionStore, updateQuestionsList } from "@root/questions";
|
||||||
|
import { CropModal } from "@ui_kit/Modal/CropModal";
|
||||||
|
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||||||
|
import ButtonsOptions from "../ButtonsOptions";
|
||||||
|
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
||||||
|
|
||||||
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
|
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
|
||||||
import AddImage from "../../../assets/icons/questionsPage/addImage";
|
|
||||||
import Image from "../../../assets/icons/questionsPage/image";
|
|
||||||
import SwitchAnswerOptionsPict from "./switchOptionsPict";
|
import SwitchAnswerOptionsPict from "./switchOptionsPict";
|
||||||
import PlusImage from "@icons/questionsPage/plus";
|
|
||||||
|
|
||||||
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
|
import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
|
||||||
import { produce } from "immer";
|
import { produce } from "immer";
|
||||||
|
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
totalIndex: number;
|
totalIndex: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function OptionsPicture({ totalIndex }: Props) {
|
export default function OptionsPicture({ totalIndex }: Props) {
|
||||||
const [open, setOpen] = useState(false);
|
const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
|
||||||
const [opened, setOpened] = useState<boolean>(false);
|
const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
|
||||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(790));
|
|
||||||
const quizId = Number(useParams().quizId);
|
const quizId = Number(useParams().quizId);
|
||||||
const [switchState, setSwitchState] = useState("setting");
|
const [switchState, setSwitchState] = useState("setting");
|
||||||
const { listQuestions } = questionStore();
|
const { listQuestions } = questionStore();
|
||||||
@ -55,8 +51,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
|
|||||||
content: clonedContent,
|
content: clonedContent,
|
||||||
});
|
});
|
||||||
|
|
||||||
setOpen(false);
|
setIsUploadImageModalOpen(false);
|
||||||
setOpened(true);
|
setIsCropModalOpen(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -78,130 +74,52 @@ export default function OptionsPicture({ totalIndex }: Props) {
|
|||||||
additionalContent={(variant, index) => (
|
additionalContent={(variant, index) => (
|
||||||
<>
|
<>
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Box
|
<AddOrEditImageButton
|
||||||
sx={{ cursor: "pointer" }}
|
imageSrc={variant.extendedText}
|
||||||
onClick={() => {
|
onImageClick={() => {
|
||||||
setCurrentIndex(index);
|
setCurrentIndex(index);
|
||||||
setOpen(true);
|
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||||
|
|
||||||
|
setIsUploadImageModalOpen(true);
|
||||||
}}
|
}}
|
||||||
>
|
onPlusClick={() => {
|
||||||
{variant.extendedText ? (
|
setCurrentIndex(index);
|
||||||
<Box
|
setIsUploadImageModalOpen(true);
|
||||||
sx={{
|
}}
|
||||||
overflow: "hidden",
|
sx={{ mx: "10px" }}
|
||||||
width: "60px",
|
/>
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
borderRadius: "3px",
|
|
||||||
margin: "0 10px",
|
|
||||||
height: "40px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box sx={{ display: "flex", width: "40px" }}>
|
|
||||||
<img
|
|
||||||
src={variant.extendedText}
|
|
||||||
alt=""
|
|
||||||
style={{ width: "100%" }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<PlusImage />
|
|
||||||
</Box>
|
|
||||||
) : (
|
|
||||||
<Button component="label" sx={{ padding: "0px" }}>
|
|
||||||
<AddImage
|
|
||||||
sx={{ height: "40px", width: "60px", margin: "0 10px" }}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
additionalMobile={(variant, index) => (
|
additionalMobile={(variant, index) => (
|
||||||
<>
|
<>
|
||||||
{isMobile && (
|
{isMobile && (
|
||||||
<Box
|
<AddOrEditImageButton
|
||||||
onClick={() => {
|
imageSrc={variant.extendedText}
|
||||||
|
onImageClick={() => {
|
||||||
setCurrentIndex(index);
|
setCurrentIndex(index);
|
||||||
setOpen(true);
|
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||||
|
|
||||||
|
setIsUploadImageModalOpen(true);
|
||||||
}}
|
}}
|
||||||
sx={{
|
onPlusClick={() => {
|
||||||
overflow: "hidden",
|
setCurrentIndex(index);
|
||||||
display: "flex",
|
setIsUploadImageModalOpen(true);
|
||||||
alignItems: "center",
|
|
||||||
m: "8px",
|
|
||||||
position: "relative",
|
|
||||||
borderRadius: "3px",
|
|
||||||
}}
|
}}
|
||||||
>
|
sx={{ m: "8px", width: "auto" }}
|
||||||
<Box
|
/>
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
height: "40px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{variant.extendedText ? (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
overflow: "hidden",
|
|
||||||
width: "40px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
height: "30px",
|
|
||||||
borderRadius: "3px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={variant.extendedText}
|
|
||||||
alt=""
|
|
||||||
style={{ width: "100%" }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
) : (
|
|
||||||
<Button component="label" sx={{ padding: "0px" }}>
|
|
||||||
<Image
|
|
||||||
sx={{
|
|
||||||
height: "40px",
|
|
||||||
width: "60px",
|
|
||||||
margin: "0 10px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
width: "20px",
|
|
||||||
background: "#EEE4FC",
|
|
||||||
height: "40px",
|
|
||||||
color: "white",
|
|
||||||
backgroundColor: "#7E2AEA",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<UploadImageModal
|
<UploadImageModal
|
||||||
open={open}
|
open={isUploadImageModalOpen}
|
||||||
onClose={() => setOpen(false)}
|
onClose={() => setIsUploadImageModalOpen(false)}
|
||||||
imgHC={uploadImage}
|
imgHC={uploadImage}
|
||||||
/>
|
/>
|
||||||
<CropModal
|
<CropModal
|
||||||
opened={opened}
|
opened={isCropModalOpen}
|
||||||
onClose={() => setOpened(false)}
|
onClose={() => setIsCropModalOpen(false)}
|
||||||
picture={question.content.variants[currentIndex]?.extendedText}
|
picture={question.content.variants[currentIndex]?.extendedText}
|
||||||
onCropPress={url => {
|
onCropPress={url => {
|
||||||
const content = produce(question.content, draft => {
|
const content = produce(question.content, draft => {
|
||||||
|
|||||||
59
src/ui_kit/AddOrEditImageButton.tsx
Normal file
59
src/ui_kit/AddOrEditImageButton.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import Plus from "@icons/questionsPage/plus";
|
||||||
|
import { Box, ButtonBase, SxProps, Theme } from "@mui/material";
|
||||||
|
import Image from "../assets/icons/questionsPage/image";
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
sx?: SxProps<Theme>;
|
||||||
|
imageSrc?: string;
|
||||||
|
onImageClick?: () => void;
|
||||||
|
onPlusClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, imageSrc }: Props) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box sx={{
|
||||||
|
display: "flex",
|
||||||
|
height: "40px",
|
||||||
|
minWidth: "60px",
|
||||||
|
width: "60px",
|
||||||
|
borderRadius: "3px",
|
||||||
|
overflow: "hidden",
|
||||||
|
...sx,
|
||||||
|
}}>
|
||||||
|
<ButtonBase
|
||||||
|
onClick={onImageClick}
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
backgroundColor: "#EEE4FC",
|
||||||
|
}}>
|
||||||
|
{imageSrc ? (
|
||||||
|
<img
|
||||||
|
src={imageSrc}
|
||||||
|
alt=""
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
objectFit: "scale-down",
|
||||||
|
display: "block",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Image sx={{
|
||||||
|
height: "100%",
|
||||||
|
width: "100%",
|
||||||
|
}} />
|
||||||
|
)}
|
||||||
|
</ButtonBase>
|
||||||
|
<ButtonBase
|
||||||
|
onClick={onPlusClick}
|
||||||
|
sx={{
|
||||||
|
width: "20px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus />
|
||||||
|
</ButtonBase>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user