страница вопросов-переключение между типами вопросов + попытка ресайзнуть фавиконки

2023-06-28 01:26:23 +03:00 · 2023-06-28 01:26:23 +03:00 · 9ded351c1d
commit 9ded351c1d
parent 84b77f6eb6
12 changed files with 335 additions and 36 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -23,6 +23,7 @@
                "notistack": "^3.0.1",
                "react": "^18.2.0",
                "react-dom": "^18.2.0",
+                "react-image-file-resizer": "^0.4.8",
                "react-router-dom": "^6.6.2",
                "react-scripts": "5.0.1",
                "typescript": "^4.4.2",
@ -14677,6 +14678,11 @@
            "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
            "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
        },
+        "node_modules/react-image-file-resizer": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz",
+            "integrity": "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ=="
+        },
        "node_modules/react-is": {
            "version": "18.2.0",
            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@ -27992,6 +27998,11 @@
            "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
            "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
        },
+        "react-image-file-resizer": {
+            "version": "0.4.8",
+            "resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz",
+            "integrity": "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ=="
+        },
        "react-is": {
            "version": "18.2.0",
            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
        "notistack": "^3.0.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-image-file-resizer": "^0.4.8",
        "react-router-dom": "^6.6.2",
        "react-scripts": "5.0.1",
        "typescript": "^4.4.2",
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@ -1,6 +1,6 @@
 import React from "react";
 import Stepper from "@ui_kit/Stepper";
-import { Box, Button, IconButton, Typography, Paper, useTheme } from "@mui/material";
+import {Box, Button, IconButton, Typography, Paper, useTheme, Link} from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CustomTextField from "@ui_kit/CustomTextField";
 import OneIcon from "../../assets/icons/questionsPage/OneIcon";
@ -19,6 +19,7 @@ import SliderOptions from "./SliderOptions/SliderOptions";
 import UploadFile from "./UploadFile/UploadFile";
 import PageOptions from "./PageOptions/PageOptions";
 import RatingOptions from "./RatingOptions/RatingOptions";
+import SwitchQuestionsPage from "./SwitchQuestionsPage";

 export default function QuestionsPage() {
  const [activeStep, setActiveStep] = React.useState(1);
@ -31,11 +32,25 @@ export default function QuestionsPage() {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

+    const [switchState, setSwitchState] = React.useState('');
+    const SSHC = (data: string) => {
+        setSwitchState(data)
+    }
+
  const theme = useTheme();
  return (
    <>
      <Stepper activeStep={activeStep} desc={"Задайте вопросы"} />
-      <Typography>Заголовок квиза</Typography>
+      <Box sx={{ maxWidth: "796px", width: "100%", display: "flex", justifyContent: "space-between", margin: "60px 0 40px 0",}}>
+          <Typography variant={"h5"}>Заголовок квиза</Typography>
+          <Link sx={{
+              fontSize: "16px",
+              lineHeight: "19px",
+              color: theme.palette.brightPurple.main,
+              textDecorationColor: theme.palette.brightPurple.main
+          }}>Свернуть всё</Link>
+      </Box>
+
      <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
        <Box
          sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
@ -49,21 +64,17 @@ export default function QuestionsPage() {
          <PointsIcon />
        </Box>

-        <Paper sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
-          <TypeQuestions />
-          <AnswerOptions />
-          <OptionsPicture />
-          <OptionsAndPicture />
-          <Emoji />
-          <OwnTextField />
-          <DropDown />
-          <DataOptions />
-          <SliderOptions />
-          <UploadFile />
-          <PageOptions />
-          <RatingOptions />
-        </Paper>
+        <Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
+            {switchState.length === 0 ?
+            <TypeQuestions switchState={switchState} SSHC={SSHC}/>
+                :
+          <SwitchQuestionsPage switchState={switchState}/>}
+        </Box>
      </Paper>
+        {/*<Paper sx={{maxWidth: "796px", width: "100%", display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px", marginBottom: "20px" }}>*/}
+        {/*    */}
+        {/*</Paper>*/}
+
      <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
        <IconButton>
          <AddPlus />
--- a/src/pages/Questions/SwitchQuestionsPage.tsx
+++ b/src/pages/Questions/SwitchQuestionsPage.tsx
@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import AnswerOptions from "./answerOptions/AnswerOptions";
+import OptionsPicture from "./OptionsPicture/OptionsPicture";
+import DataOptions from "./DataOptions/DataOptions";
+import SliderOptions from "./SliderOptions/SliderOptions";
+import OwnTextField from "./OwnTextField/OwnTextField";
+import PageOptions from "./PageOptions/PageOptions";
+import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
+import RatingOptions from "./RatingOptions/RatingOptions";
+import Emoji from "./Emoji/Emoji";
+import DropDown from "./DropDown/DropDown";
+import UploadFile from "./UploadFile/UploadFile";
+
+interface Props {
+    switchState: string,
+}
+
+export default function SwitchQuestionsPage ({switchState = '' }: Props) {
+    switch (switchState) {
+        case 'answer':
+            return (<AnswerOptions />);
+            break;
+
+        case 'answerpict':
+            return (<OptionsPicture />);
+            break;
+
+        case 'answerandpict':
+            return (<OptionsAndPicture />);
+            break;
+
+        case 'emoji':
+            return (<Emoji />);
+            break;
+
+        case 'textfield':
+            return (<OwnTextField />);
+            break;
+
+        case 'dropdown':
+            return (<DropDown />);
+            break;
+
+        case 'date':
+            return (<DataOptions />);
+            break;
+
+        case 'slider':
+            return (<SliderOptions />);
+            break;
+
+        case 'uploader':
+            return (<UploadFile />);
+            break;
+
+        case 'page':
+            return (<PageOptions />);
+            break;
+
+        case 'rating':
+            return (<RatingOptions />);
+            break;
+
+        default:
+            return (<></>)
+    }
+}
--- a/src/pages/Questions/TypeQuestions.tsx
+++ b/src/pages/Questions/TypeQuestions.tsx
@ -13,20 +13,83 @@ import RatingIcon from "../../assets/icons/questionsPage/rating";
 import {Box} from "@mui/material";
 import React from "react";

-export default function TypeQuestions() {
+interface Props {
+    switchState: string;
+    SSHC: (data: string) => void;
+}
+
+export default function TypeQuestions({ SSHC, switchState }: Props) {
+    const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [
+        {
+            icon: <Answer/>,
+            title: 'Варианты ответов',
+            value: 'answer',
+        },
+        {
+            icon: <OptionsPict/>,
+            title: 'Варианты с картинками',
+            value: 'answerpict',
+        },
+        {
+            icon: <OptionsAndPict/>,
+            title: 'Варианты и картинка',
+            value: 'answerandpict',
+        },
+        {
+            icon: <Emoji/>,
+            title: 'Эмоджи',
+            value: 'emoji',
+        },
+        {
+            icon: <Input/>,
+            title: 'Своё поле для ввода',
+            value: 'textfield',
+        },
+        {
+            icon: <DropDown/>,
+            title: 'Выпадающий список',
+            value: 'dropdown',
+        },
+        {
+            icon: <Date/>,
+            title: 'Дата',
+            value: 'date',
+        },
+        {
+            icon: <Slider/>,
+            title: 'Ползунок',
+            value: 'slider',
+        },
+        {
+            icon: <Download/>,
+            title: 'Загрузка файла',
+            value: 'uploader',
+        },
+        {
+            icon: <Page/>,
+            title: 'Страница',
+            value: 'page',
+        },
+        {
+            icon: <RatingIcon/>,
+            title: 'Рейтинг',
+            value: 'rating',
+        },
+    ];
    return (
        <Box sx={{display: 'flex', flexWrap: 'wrap', gap: '20px', padding: '8px 20px 20px'}}>
-            <QuestionsMiniButton icon={<Answer/>} text={'Варианты ответов'}/>
-            <QuestionsMiniButton icon={<OptionsPict/>} text={'Варианты с картинками'}/>
-            <QuestionsMiniButton icon={<OptionsAndPict/>} text={'Варианты и картинка'}/>
-            <QuestionsMiniButton icon={<Emoji/>} text={'Эможди'}/>
-            <QuestionsMiniButton icon={<Input/>} text={'Своё поле для ввода'}/>
-            <QuestionsMiniButton icon={<DropDown/>} text={'Выпадающий список'}/>
-            <QuestionsMiniButton icon={<Date/>} text={'Дата'}/>
-            <QuestionsMiniButton icon={<Slider/>} text={'Ползунок'}/>
-            <QuestionsMiniButton icon={<Download/>} text={'Загрузка файла'}/>
-            <QuestionsMiniButton icon={<Page/>} text={'Страница'}/>
-            <QuestionsMiniButton icon={<RatingIcon/>} text={'Рейтинг'}/>
+
+            {buttonTypeQuestions.map(({ icon, title, value }) => (
+                <QuestionsMiniButton
+                    key={title}
+                    onClick={() => {
+                        SSHC(value);
+                        console.log(value)
+                    }}
+                    icon={icon}
+                    text={title}
+                />
+            ))}
        </Box>
    )
 }
--- a/src/pages/startPage/StartPage.tsx
+++ b/src/pages/startPage/StartPage.tsx
@ -24,7 +24,7 @@ export default function StartPage() {

    const handleBack = () => {
        let result = listQuizes[params].step - 1
-        updateQuizesList(params, {step: result ? result : 1})
+        updateQuizesList(params, {step: result ? result : 0})
    };

    return (
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -32,7 +32,7 @@ import ModalSizeImage from "./ModalSizeImage";
 import DropZone from "./dropZone";
 import Extra from "./extra";
 import AlignCenterIcon from "@icons/AlignCenterIcon";
-
+import DropFav from "./dropfavicon";

 const designTypes = [
    ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
@ -353,6 +353,7 @@ export default function StartPageSettings() {
                        gap: "10px",
                    }}>
                        <DropZone sx={{height: "48px", width: "48px"}} heightImg={"48px"} widthImg={"48px"}/>
+
                        <Typography sx={{
                            color: theme.palette.orange.main,
                            fontSize: "16px",
@ -360,6 +361,7 @@ export default function StartPageSettings() {
                            textDecoration: "underline",
                        }}>5 MB максимум</Typography>
                    </Box>
+                    {/*<DropFav heightImg={"200px"}/>*/}
                </Box>
                {/*Правая сторона*/}
                <Box sx={{
--- a/src/pages/startPage/dropfavicon.tsx
+++ b/src/pages/startPage/dropfavicon.tsx
@ -0,0 +1,136 @@
+import { useState } from "react";
+import {Box, ButtonBase, useTheme, Typography, SxProps, Theme} from "@mui/material";
+import UploadIcon from "../../assets/icons/UploadIcon";
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
+import Resizer from "react-image-file-resizer";
+
+interface Props {
+    text?: string;
+    sx?: SxProps<Theme>;
+    heightImg: string;
+    widthImg?: string
+}
+
+export default ({text, sx, heightImg, widthImg}: Props) => {
+    const theme = useTheme();
+    const callback = (newFileUri:any) => setData(URL.createObjectURL(newFileUri));
+    const resizeImage = (imageFile:any) => {
+        try {
+            Resizer.imageFileResizer(
+                imageFile,
+                150,
+                150,
+                "JPEG",
+                100,
+                0,
+                callback,
+            );
+        } catch (err) {
+            console.log(err);
+        }}
+        const handleImageResize = (imgInp:any) => resizeImage(imgInp.files);
+    const imgHC = (imgInp:any) => {
+        const [file] = imgInp.files
+        if (file.size < 5242880) {
+            setData(URL.createObjectURL(file))
+        } else {enqueueSnackbar('Размер картинки слишком велик')}
+        handleImageResize(file)
+        console.log(file.height)
+    }
+
+
+
+
+    const [data, setData] = useState("")
+    const [ready, setReady] = useState(false);
+
+    const dragenterHC = () => {
+        // console.log("onDragEnter")
+        setReady(true)
+    }
+
+    const dragexitHC = () => {
+        // console.log("onDragExit")
+        setReady(false)
+    }
+
+    const dropHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDrop")
+        setReady(false)
+        const file = event.dataTransfer.files[0]
+        console.log(event.dataTransfer.files[0])
+        if (file.size < 5242880) {
+            setData(URL.createObjectURL(file))
+        } else {enqueueSnackbar('Размер картинки слишком велик')}
+        // try {
+        //     Resizer.imageFileResizer(
+        //         file,
+        //         50,
+        //         50,
+        //         "JPEG",
+        //         100,
+        //         0,
+        //         callback,
+        //     );
+        //
+        // } catch (err) {
+        //     console.log(err);
+        // }
+        //
+    }
+
+    const dragOverHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDragOver")
+    }
+
+    return (
+        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+            <input onChange={event => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
+            <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",
+                    opacity: data ? "0.5" : 1,
+                    ...sx
+                }}
+
+            >
+                <UploadIcon />
+                <Typography sx={{
+                    position: "absolute",
+                    right: "10px",
+                    bottom: "10px",
+                    color: theme.palette.orange.main,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    textDecoration: "underline",
+                }}>{text}</Typography>
+                <SnackbarProvider style={{backgroundColor: theme.palette.brightPurple.main}}/>
+                {data ?
+                    <img height={heightImg} width={widthImg} src={data}
+                         style={{
+                             position: "absolute", zIndex: "-1",
+                             objectFit: "revert-layer",
+                         }}/>
+                    :
+                    null
+                }
+            </Box>
+        </ButtonBase>
+    )
+}
--- a/src/pages/startPage/switchStepPages.tsx
+++ b/src/pages/startPage/switchStepPages.tsx
@ -11,13 +11,13 @@ interface Props {
 export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {

    switch (activeStep) {
-        case 1:
+        case 0:
            return (<StepOne handleNext={handleNext}/>);
            break;
-        case 2:
+        case 1:
            return (<Steptwo handleNext={handleNext}/>);
            break
-        case 3:
+        case 2:
            return (<StartPageSettings/>);
            break;
        default:
--- a/src/ui_kit/QuestionsMiniButton.tsx
+++ b/src/ui_kit/QuestionsMiniButton.tsx
@ -6,9 +6,10 @@ import { ReactNode } from "react";
 interface QuestionsMiniButtonProps {
    icon: ReactNode;
    text: string;
+    onClick: () => void;
 }

-export default function QuestionsMiniButton({ icon, text }: QuestionsMiniButtonProps) {
+export default function QuestionsMiniButton({ icon, text, onClick }: QuestionsMiniButtonProps) {
    const theme = useTheme();

    return (
@ -24,6 +25,7 @@ export default function QuestionsMiniButton({ icon, text }: QuestionsMiniButtonP
                        border: '1px solid #9A9AAF',
                        borderRadius: '8px'
                    }}
+                    onClick={onClick}
            >
                {icon}
                <Typography
--- a/src/ui_kit/Stepper.tsx
+++ b/src/ui_kit/Stepper.tsx
@ -7,7 +7,7 @@ interface Props {
    steps?: number;
 }

-export default function ProgressMobileStepper({desc, activeStep = 1, steps = 6}:Props) {
+export default function ProgressMobileStepper({desc, activeStep = 0, steps = 6}:Props) {

  return (
      <Box
@ -47,7 +47,7 @@ export default function ProgressMobileStepper({desc, activeStep = 1, steps = 6}:
          <Box sx={{padding: '3px 3px 3px 20px'}}>
              <Typography sx={{fontWeight:400,
                  fontSize: '12px',
-                  lineHeight: '14.22px'}}> Шаг {activeStep} из {steps}</Typography>
+                  lineHeight: '14.22px'}}> Шаг {activeStep + 1} из {steps}</Typography>
              <Typography>{desc}</Typography>
          </Box>
    </Box>
--- a/yarn.lock
+++ b/yarn.lock
@ -7820,6 +7820,11 @@
  "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
  "version" "6.0.11"

+"react-image-file-resizer@^0.4.8":
+  "integrity" "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ=="
+  "resolved" "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz"
+  "version" "0.4.8"
+
 "react-is@^16.13.1":
  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"