refactor question edit image button
This commit is contained in:
nflnkr
parent
37ee98ecd3
commit
00a250c676
@ -1,46 +1,42 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Link,
|
||||
Typography,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
Button,
|
||||
InputAdornment,
|
||||
Link,
|
||||
Popover,
|
||||
TextareaAutosize,
|
||||
TextField,
|
||||
TextareaAutosize,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||||
import { CropModal } from "@ui_kit/Modal/CropModal";
|
||||
import { AnswerDraggableList } from "../AnswerDraggableList";
|
||||
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
||||
|
||||
import AddImage from "@icons/questionsPage/addImage";
|
||||
import Image from "@icons/questionsPage/image";
|
||||
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||||
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 ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||
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 type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
}
|
||||
|
||||
export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [opened, setOpened] = useState<boolean>(false);
|
||||
const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
|
||||
const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
|
||||
const [switchState, setSwitchState] = useState("setting");
|
||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||
const quizId = Number(useParams().quizId);
|
||||
@ -65,8 +61,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
content: clonedContent,
|
||||
});
|
||||
|
||||
setOpen(false);
|
||||
setOpened(true);
|
||||
setIsUploadImageModalOpen(false);
|
||||
setIsCropModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -79,134 +75,52 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
|
||||
additionalContent={(variant, index) => (
|
||||
<>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
<AddOrEditImageButton
|
||||
imageSrc={variant.extendedText}
|
||||
onImageClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setOpen(true);
|
||||
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
>
|
||||
{variant.extendedText ? (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
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>
|
||||
onPlusClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
sx={{ mx: "10px" }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
additionalMobile={(variant, index) => (
|
||||
<>
|
||||
{isMobile && (
|
||||
<Box
|
||||
onClick={() => {
|
||||
<AddOrEditImageButton
|
||||
imageSrc={variant.extendedText}
|
||||
onImageClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setOpen(true);
|
||||
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
m: "8px",
|
||||
position: "relative",
|
||||
borderRadius: "3px",
|
||||
onPlusClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
sx={{ m: "8px", width: "auto" }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<UploadImageModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
open={isUploadImageModalOpen}
|
||||
onClose={() => setIsUploadImageModalOpen(false)}
|
||||
imgHC={uploadImage}
|
||||
/>
|
||||
<CropModal
|
||||
opened={opened}
|
||||
onClose={() => setOpened(false)}
|
||||
opened={isCropModalOpen}
|
||||
onClose={() => setIsCropModalOpen(false)}
|
||||
picture={question.content.variants[currentIndex]?.extendedText}
|
||||
onCropPress={url => {
|
||||
const content = produce(question.content, draft => {
|
||||
|
||||
@ -1,40 +1,36 @@
|
||||
import { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {
|
||||
Box,
|
||||
Link,
|
||||
Typography,
|
||||
Button,
|
||||
useTheme,
|
||||
useMediaQuery
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} 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 { 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 AddImage from "../../../assets/icons/questionsPage/addImage";
|
||||
import Image from "../../../assets/icons/questionsPage/image";
|
||||
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 type { QuizQuestionImages } from "../../../model/questionTypes/images";
|
||||
|
||||
interface Props {
|
||||
totalIndex: number;
|
||||
}
|
||||
|
||||
export default function OptionsPicture({ totalIndex }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [opened, setOpened] = useState<boolean>(false);
|
||||
const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
|
||||
const [isCropModalOpen, setIsCropModalOpen] = useState<boolean>(false);
|
||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(790));
|
||||
const quizId = Number(useParams().quizId);
|
||||
const [switchState, setSwitchState] = useState("setting");
|
||||
const { listQuestions } = questionStore();
|
||||
@ -55,8 +51,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
|
||||
content: clonedContent,
|
||||
});
|
||||
|
||||
setOpen(false);
|
||||
setOpened(true);
|
||||
setIsUploadImageModalOpen(false);
|
||||
setIsCropModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -78,130 +74,52 @@ export default function OptionsPicture({ totalIndex }: Props) {
|
||||
additionalContent={(variant, index) => (
|
||||
<>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
<AddOrEditImageButton
|
||||
imageSrc={variant.extendedText}
|
||||
onImageClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setOpen(true);
|
||||
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
>
|
||||
{variant.extendedText ? (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
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>
|
||||
onPlusClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
sx={{ mx: "10px" }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
additionalMobile={(variant, index) => (
|
||||
<>
|
||||
{isMobile && (
|
||||
<Box
|
||||
onClick={() => {
|
||||
<AddOrEditImageButton
|
||||
imageSrc={variant.extendedText}
|
||||
onImageClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setOpen(true);
|
||||
if (variant.extendedText) return setIsCropModalOpen(true);
|
||||
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
m: "8px",
|
||||
position: "relative",
|
||||
borderRadius: "3px",
|
||||
onPlusClick={() => {
|
||||
setCurrentIndex(index);
|
||||
setIsUploadImageModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
sx={{ m: "8px", width: "auto" }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<UploadImageModal
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
open={isUploadImageModalOpen}
|
||||
onClose={() => setIsUploadImageModalOpen(false)}
|
||||
imgHC={uploadImage}
|
||||
/>
|
||||
<CropModal
|
||||
opened={opened}
|
||||
onClose={() => setOpened(false)}
|
||||
opened={isCropModalOpen}
|
||||
onClose={() => setIsCropModalOpen(false)}
|
||||
picture={question.content.variants[currentIndex]?.extendedText}
|
||||
onCropPress={url => {
|
||||
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