diff --git a/src/assets/icons/CropIcon.tsx b/src/assets/icons/CropIcon.tsx index b2fdd8ae..080ca8e6 100644 --- a/src/assets/icons/CropIcon.tsx +++ b/src/assets/icons/CropIcon.tsx @@ -11,30 +11,30 @@ export const CropIcon: FC = () => ( ); diff --git a/src/assets/icons/ResetIcon.tsx b/src/assets/icons/ResetIcon.tsx index 1bcfd159..49d2ce1f 100644 --- a/src/assets/icons/ResetIcon.tsx +++ b/src/assets/icons/ResetIcon.tsx @@ -18,16 +18,16 @@ export const ResetIcon: FC = ({ style, onClick }) => ( ); diff --git a/src/assets/icons/questionsPage/addImage.tsx b/src/assets/icons/questionsPage/addImage.tsx index 2a276db8..513b9d7f 100644 --- a/src/assets/icons/questionsPage/addImage.tsx +++ b/src/assets/icons/questionsPage/addImage.tsx @@ -40,16 +40,16 @@ const AddImage: FC = ({ onClick }) => { (false); + const [openVideoModal, setOpenVideoModal] = useState(false); + const [switchState, setSwitchState] = useState("setting"); + const { listQuestions } = questionStore(); const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { setSwitchState(data); }; + return ( <> - + { + const clonContent = listQuestions[totalIndex].content; + clonContent.text = target.value; + updateQuestionsList(totalIndex, { content: clonContent }); + }} + /> - - - setOpenImageModal(true)} sx={{ - fontWeight: 400, - fontSize: "16px", - lineHeight: "18.96px", - color: theme.palette.grey2.main, + cursor: "pointer", + display: "flex", + alignItems: "center", + gap: "10px", }} > - Изображение - + + + Изображение + + + setOpenImageModal(false)} + imgHC={(fileList) => { + if (fileList?.length) { + const clonContent = listQuestions[totalIndex].content; + clonContent.picture = URL.createObjectURL(fileList[0]); + updateQuestionsList(totalIndex, { content: clonContent }); + } + }} + /> или - - setOpenVideoModal(true)} sx={{ - fontWeight: 400, - fontSize: "16px", - lineHeight: "18.96px", - color: theme.palette.grey2.main, + cursor: "pointer", + display: "flex", + alignItems: "center", + gap: "10px", }} > - Видео - + + + Видео + + + setOpenVideoModal(false)} + video={listQuestions[totalIndex].content.video} + onUpload={(url) => { + const clonContent = listQuestions[totalIndex].content; + clonContent.video = url; + updateQuestionsList(totalIndex, { content: clonContent }); + }} + /> void; -} - -type UploadImageProps = { - totalIndex: number; -}; - -const Modalka: React.FC = ({ imgHC }) => { - const theme = useTheme(); - - const dropZone = React.useRef(null); - const [ready, setReady] = React.useState(false); - - const handleDragEnter = (event: React.DragEvent) => { - event.preventDefault(); - setReady(true); - }; - - const handleDrop = (event: DragEvent) => { - event.preventDefault(); - event.stopPropagation(); - - imgHC(event.dataTransfer.files); - }; - - return ( - - - - Добавьте изображение - - - imgHC(event.target.files)} - hidden - accept="image/*" - multiple - type="file" - /> - ) => - event.preventDefault() - } - onDrop={handleDrop} - ref={dropZone} - sx={{ - width: "580px", - padding: "33px 10px 33px 55px", - display: "flex", - alignItems: "center", - backgroundColor: theme.palette.background.default, - border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`, - borderRadius: "8px", - gap: "55px", - }} - onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую - > - - - - Загрузите или перетяните сюда файл - - - Принимает JPG, PNG, и GIF формат — максимум 5mb - - - - - - - Или выберите на фотостоке - - - - path": { stroke: "#9A9AAF" }, - }} - > - - - ), - }} - /> - - - ); -}; - -export default function UploadImage({ totalIndex }: UploadImageProps) { - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - const { listQuestions } = questionStore(); - - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - const imgHC = (files: FileList | null) => { - if (files?.length) { - const [file] = Array.from(files); - - let clonContent = listQuestions[totalIndex].content; - clonContent.back = URL.createObjectURL(file); - updateQuestionsList(totalIndex, { content: clonContent }); - - handleClose(); - setOpened(true); - } - }; - const [opened, setOpened] = useState(false); - - const handleDrop = (event: DragEvent) => { - event.preventDefault(); - event.stopPropagation(); - - imgHC(event.dataTransfer.files); - }; - - return ( - - - Загрузить изображение - - - } - text="5 MB максимум" - /> - - - - - setOpened(false)} - picture={listQuestions[totalIndex].content.back} - /> - - ); -} diff --git a/src/pages/Questions/UploadImage/UploadImageModal.tsx b/src/pages/Questions/UploadImage/UploadImageModal.tsx new file mode 100644 index 00000000..be29defb --- /dev/null +++ b/src/pages/Questions/UploadImage/UploadImageModal.tsx @@ -0,0 +1,171 @@ +import { + Typography, + Box, + useTheme, + ButtonBase, + Modal, + TextField, + InputAdornment, +} from "@mui/material"; +import UploadIcon from "../../../assets/icons/UploadIcon"; +import SearchIcon from "../../../assets/icons/SearchIcon"; +import * as React from "react"; + +import UnsplashIcon from "../../../assets/icons/Unsplash.svg"; + +import type { DragEvent } from "react"; + +interface ModalkaProps { + open: boolean; + onClose: () => void; + imgHC: (imgInp: FileList | null) => void; +} + +export const UploadImageModal: React.FC = ({ + open, + onClose, + imgHC, +}) => { + const theme = useTheme(); + + const dropZone = React.useRef(null); + const [ready, setReady] = React.useState(false); + + const handleDragEnter = (event: React.DragEvent) => { + event.preventDefault(); + setReady(true); + }; + + const handleDrop = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + + imgHC(event.dataTransfer.files); + }; + + return ( + + + + + Добавьте изображение + + + imgHC(event.target.files)} + hidden + accept="image/*" + multiple + type="file" + /> + ) => + event.preventDefault() + } + onDrop={handleDrop} + ref={dropZone} + sx={{ + width: "580px", + padding: "33px 10px 33px 55px", + display: "flex", + alignItems: "center", + backgroundColor: theme.palette.background.default, + border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`, + borderRadius: "8px", + gap: "55px", + }} + onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую + > + + + + Загрузите или перетяните сюда файл + + + Принимает JPG, PNG, и GIF формат — максимум 5mb + + + + + + + Или выберите на фотостоке + + + + path": { stroke: "#9A9AAF" }, + }} + > + + + ), + }} + /> + + + + ); +}; diff --git a/src/pages/Questions/UploadImage/index.tsx b/src/pages/Questions/UploadImage/index.tsx new file mode 100644 index 00000000..c1cc82b2 --- /dev/null +++ b/src/pages/Questions/UploadImage/index.tsx @@ -0,0 +1,75 @@ +import { useState } from "react"; +import { Typography, Box, useTheme, ButtonBase } from "@mui/material"; +import UploadBox from "@ui_kit/UploadBox"; +import { CroppingModal } from "@ui_kit/Modal/CroppingModal"; +import UploadIcon from "../../../assets/icons/UploadIcon"; +import * as React from "react"; +import { questionStore, updateQuestionsList } from "@root/questions"; +import { UploadImageModal } from "./UploadImageModal"; + +import type { DragEvent } from "react"; + +type UploadImageProps = { + totalIndex: number; +}; + +export default function UploadImage({ totalIndex }: UploadImageProps) { + const theme = useTheme(); + const [open, setOpen] = React.useState(false); + const { listQuestions } = questionStore(); + + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + const imgHC = (files: FileList | null) => { + if (files?.length) { + const [file] = Array.from(files); + + let clonContent = listQuestions[totalIndex].content; + clonContent.back = URL.createObjectURL(file); + updateQuestionsList(totalIndex, { content: clonContent }); + + handleClose(); + setOpened(true); + } + }; + const [opened, setOpened] = useState(false); + + const handleDrop = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + + imgHC(event.dataTransfer.files); + }; + + return ( + + + Загрузить изображение + + + } + text="5 MB максимум" + /> + + + setOpened(false)} + picture={listQuestions[totalIndex].content.back} + /> + + ); +} diff --git a/src/pages/Questions/UploadVideoModal.tsx b/src/pages/Questions/UploadVideoModal.tsx new file mode 100644 index 00000000..c7bbde1c --- /dev/null +++ b/src/pages/Questions/UploadVideoModal.tsx @@ -0,0 +1,157 @@ +import { + Box, + Button, + ButtonBase, + Modal, + Typography, + useTheme, +} from "@mui/material"; +import SelectableButton from "@ui_kit/SelectableButton"; +import CustomTextField from "@ui_kit/CustomTextField"; +import { useState } from "react"; +import UploadIcon from "../../assets/icons/UploadIcon"; + +import type { DragEvent } from "react"; + +type BackgroundTypeModal = "linkVideo" | "ownVideo"; + +type HelpQuestionsProps = { + open: boolean; + onClose: () => void; + video: string; + onUpload: (number: string) => void; +}; + +export const UploadVideoModal = ({ + open, + onClose, + video, + onUpload, +}: HelpQuestionsProps) => { + const [backgroundTypeModal, setBackgroundTypeModal] = + useState("linkVideo"); + const theme = useTheme(); + + const handleDrop = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + + if (event.dataTransfer.files.length) { + onUpload(URL.createObjectURL(event.dataTransfer.files[0])); + } + }; + + return ( + + + + + Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить + собственное + + + + + setBackgroundTypeModal("linkVideo")} + sx={{ maxWidth: "170px", padding: "10px" }} + > + Ссылка на видео + + setBackgroundTypeModal("ownVideo")} + sx={{ maxWidth: "170px", padding: "10px" }} + > + Загрузить свое + + + {backgroundTypeModal === "linkVideo" ? ( + + + Ссылка на видео + + onUpload(target.value)} + /> + + ) : ( + + + Загрузите видео + + + { + if (target.files?.length) { + onUpload(URL.createObjectURL(target.files[0])); + } + }} + hidden + accept="video/*" + multiple + type="file" + /> + ) => + event.preventDefault() + } + onDrop={handleDrop} + sx={{ + width: "580px", + padding: "33px 33px 33px 50px", + display: "flex", + alignItems: "center", + backgroundColor: theme.palette.background.default, + border: `1px solid ${theme.palette.grey2.main}`, + borderRadius: "8px", + gap: "50px", + }} + > + + + + Добавить видео + + + Принимает .mp4 и .mov формат — максимум 100мб + + + + + + )} + + + ); +}; diff --git a/src/pages/Questions/helpQuestions.tsx b/src/pages/Questions/helpQuestions.tsx index 97ed3c08..388df399 100644 --- a/src/pages/Questions/helpQuestions.tsx +++ b/src/pages/Questions/helpQuestions.tsx @@ -1,11 +1,4 @@ -import { - Box, - Button, - ButtonBase, - Modal, - Typography, - useTheme, -} from "@mui/material"; +import { Box, ButtonBase, Typography } from "@mui/material"; import * as React from "react"; import SelectableButton from "@ui_kit/SelectableButton"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -13,11 +6,9 @@ import { useState } from "react"; import UploadIcon from "../../assets/icons/UploadIcon"; import UploadBox from "@ui_kit/UploadBox"; import { questionStore, updateQuestionsList } from "@root/questions"; - -import type { DragEvent } from "react"; +import { UploadVideoModal } from "./UploadVideoModal"; type BackgroundType = "text" | "video"; -type BackgroundTypeModal = "linkVideo" | "ownVideo"; type HelpQuestionsProps = { totalIndex: number; @@ -27,27 +18,11 @@ export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) { const [open, setOpen] = useState(false); const [backgroundType, setBackgroundType] = useState("text"); const { listQuestions } = questionStore(); - const [backgroundTypeModal, setBackgroundTypeModal] = - useState("linkVideo"); - const theme = useTheme(); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - const videoHC = (fileList: FileList | null) => { - if (fileList?.length) { - const clonContent = listQuestions[totalIndex].content; - clonContent.hint.video = URL.createObjectURL(fileList[0]); - updateQuestionsList(totalIndex, { content: clonContent }); - handleClose(); - } - }; - - const handleDrop = (event: DragEvent) => { - event.preventDefault(); - event.stopPropagation(); - - videoHC(event.dataTransfer.files); + const videoHC = (url: string) => { + const clonContent = listQuestions[totalIndex].content; + clonContent.hint.video = url; + updateQuestionsList(totalIndex, { content: clonContent }); }; return ( @@ -99,7 +74,7 @@ export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) { Загрузите видео setOpen(true)} sx={{ justifyContent: "flex-start" }} > {listQuestions[totalIndex].content.hint.video ? ( @@ -120,117 +95,12 @@ export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) { )} - - - - - Видео можно вставить с любого хостинга: YouTube, Vimeo или - загрузить собственное - - - - - setBackgroundTypeModal("linkVideo")} - sx={{ maxWidth: "170px", padding: "10px" }} - > - Ссылка на видео - - setBackgroundTypeModal("ownVideo")} - sx={{ maxWidth: "170px", padding: "10px" }} - > - Загрузить свое - - - {backgroundTypeModal === "linkVideo" ? ( - - - Ссылка на видео - - { - let clonContent = listQuestions[totalIndex].content; - clonContent.hint.video = target.value; - updateQuestionsList(totalIndex, { content: clonContent }); - }} - /> - - ) : ( - - - Загрузите видео - - - videoHC(event.target.files)} - hidden - accept="video/*" - multiple - type="file" - /> - ) => - event.preventDefault() - } - onDrop={handleDrop} - sx={{ - width: "580px", - padding: "33px 33px 33px 50px", - display: "flex", - alignItems: "center", - backgroundColor: theme.palette.background.default, - border: `1px solid ${theme.palette.grey2.main}`, - borderRadius: "8px", - gap: "50px", - }} - > - - - - Добавить видео - - - Принимает .mp4 и .mov формат — максимум 100мб - - - - - - )} - - + onClose={() => setOpen(false)} + video={listQuestions[totalIndex].content.hint.video} + onUpload={videoHC} + /> )} diff --git a/src/stores/questions.ts b/src/stores/questions.ts index a7d3c120..80f88163 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -51,6 +51,9 @@ export interface Question { number: boolean; xy: string; format: "carousel" | "masonry"; + text: string; + picture: string; + video: string; }; version: number; parent_ids: number[]; @@ -124,6 +127,9 @@ export const createQuestion = (id: number) => { single: false, xy: "", format: "carousel", + text: "", + picture: "", + video: "", variants: [ { answer: "",