предпросмотр и публикация слайдер и рейтинг

2023-12-12 22:39:21 +03:00 · 2023-12-12 22:39:21 +03:00 · cdf6b813ac
commit cdf6b813ac
parent 6482598841
7 changed files with 160 additions and 83 deletions
--- a/src/assets/icons/CloseBold.tsx
+++ b/src/assets/icons/CloseBold.tsx
@ -0,0 +1,36 @@
+import { useTheme } from "@mui/material";
+
+
+interface Props {
+    width?: number;
+}
+
+export default function CloseBold({ width }: Props) {
+    const theme = useTheme();
+
+    return (
+        <svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="Close">
+                <g id="Rectangle 57" opacity="0.3" filter="url(#filter0_d_4080_12482)">
+                    <rect x="6" y="4" width="24" height="24" rx="12" fill="#9A9AAF"/>
+                </g>
+                <g id="Group 331">
+                    <path id="Vector 586" d="M22.8516 10.9517L12.9521 20.8512" stroke="#FDFDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path id="Vector 587" d="M22.8516 20.8462L12.9521 10.9467" stroke="#FDFDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+            </g>
+            <defs>
+                <filter id="filter0_d_4080_12482" x="0" y="0" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                    <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4080_12482"/>
+                    <feOffset dy="2"/>
+                    <feGaussianBlur stdDeviation="2.5"/>
+                    <feComposite in2="hardAlpha" operator="out"/>
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.416562 0 0 0 0 0.452406 0 0 0 0 0.775 0 0 0 0.18 0"/>
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4080_12482"/>
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4080_12482" result="shape"/>
+                </filter>
+            </defs>
+        </svg>
+    )}
--- a/src/assets/icons/questionsPage/StarIconMini.tsx
+++ b/src/assets/icons/questionsPage/StarIconMini.tsx
@ -12,7 +12,7 @@ export default function StarIconMini({ color, width = 30, sx }: Props) {
  return (
    <Box
      sx={{
-        height: "30px",
+        height: "50px",
        width: width + "px",
        display: "flex",
        alignItems: "center",
@ -20,7 +20,7 @@ export default function StarIconMini({ color, width = 30, sx }: Props) {
        ...sx,
      }}
    >
-      <svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width={width} height={width} viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M14.551 21.8375L20.851 25.8375C21.6635 26.35 22.6635 25.5875 22.426 24.65L20.601 17.475C20.5516 17.2762 20.5595 17.0674 20.6236 16.8728C20.6877 16.6781 20.8056 16.5056 20.9635 16.375L26.6135 11.6625C27.351 11.05 26.976 9.81253 26.0135 9.75003L18.6385 9.27503C18.4372 9.26332 18.2438 9.19325 18.0817 9.07338C17.9197 8.95351 17.7961 8.78902 17.726 8.60003L14.976 1.67503C14.9032 1.47491 14.7706 1.30204 14.5961 1.17988C14.4217 1.05772 14.2139 0.992188 14.001 0.992188C13.788 0.992188 13.5802 1.05772 13.4058 1.17988C13.2314 1.30204 13.0988 1.47491 13.026 1.67503L10.276 8.60003C10.2059 8.78902 10.0823 8.95351 9.92021 9.07338C9.75816 9.19325 9.5647 9.26332 9.36347 9.27503L1.98847 9.75003C1.02597 9.81253 0.650971 11.05 1.38847 11.6625L7.03847 16.375C7.19639 16.5056 7.3142 16.6781 7.37834 16.8728C7.44247 17.0674 7.45032 17.2762 7.40097 17.475L5.71347 24.125C5.42597 25.25 6.62597 26.1625 7.58847 25.55L13.451 21.8375C13.6154 21.733 13.8062 21.6775 14.001 21.6775C14.1958 21.6775 14.3866 21.733 14.551 21.8375Z"
          fill={color}
--- a/src/pages/ViewPublicationPage/questions/File.tsx
+++ b/src/pages/ViewPublicationPage/questions/File.tsx
@ -1,14 +1,12 @@
-import { Box, Typography, ButtonBase } from "@mui/material";
-
-import UploadBox from "@ui_kit/UploadBox";
-
+import {Box, Typography, ButtonBase, useTheme, IconButton} from "@mui/material";
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
 import { UPLOAD_FILE_TYPES_MAP } from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";

 import UploadIcon from "@icons/UploadIcon";
-
+import X from "@icons/CloseBold";
 import type { ChangeEvent } from "react";
 import type { QuizQuestionFile } from "../../../model/questionTypes/file";
+import {DragEvent} from "react";

 type FileProps = {
  currentQuestion: QuizQuestionFile;
@ -17,7 +15,7 @@ type FileProps = {
 export const File = ({ currentQuestion }: FileProps) => {
  const { answers } = useQuizViewStore();
  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
-
+    const theme = useTheme();
  const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
    const file = target.files?.[0];

@ -35,23 +33,78 @@ export const File = ({ currentQuestion }: FileProps) => {
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
+          maxWidth: answer?.split("|")[0] ? "640px" : "550px"
        }}
      >
-        <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
-          <input
-            onChange={uploadFile}
-            hidden
-            accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
-            multiple
-            type="file"
-          />
-          <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
-        </ButtonBase>
-        {answer?.split("|")[0] && (
-          <Typography sx={{ marginTop: "15px" }}>
-            {answer?.split("|")[0]}
-          </Typography>
-        )}
+          {answer?.split("|")[0] && (
+              <Box sx={{display: "flex", alignItems: "center", gap: "15px"}}>
+                  <Typography>Вы загрузили:</Typography>
+                  <Box sx={{padding: "5px 5px 5px 16px", backgroundColor: theme.palette.brightPurple.main,
+                      borderRadius: "8px",
+                      color: "#FFFFFF",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "15px"
+                  }}>
+                      <Typography>
+                          {answer?.split("|")[0]}
+                      </Typography>
+                      <IconButton
+                          sx={{p: 0}}
+                          onClick={() => {updateAnswer(currentQuestion.content.id, "");}}
+                      >
+                          <X/>
+                      </IconButton>
+                  </Box>
+
+              </Box>
+
+          )}
+          {!answer?.split("|")[0] && (
+            <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
+              <input
+                onChange={uploadFile}
+                hidden
+                accept={UPLOAD_FILE_TYPES_MAP[currentQuestion.content.type]}
+                multiple
+                type="file"
+              />
+                <Box
+                    onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
+                    sx={{
+                        width: "100%",
+                        height: "120px",
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        padding: "33px 44px 33px 55px",
+                        backgroundColor: theme.palette.background.default,
+                        border: `1px solid ${theme.palette.grey2.main}`,
+                        borderRadius: "8px",
+                    }}
+                >
+                    <UploadIcon />
+                    <Box>
+                        <Typography
+                            sx={{
+                                color: theme.palette.grey2.main,
+                                fontWeight: 500
+                            }}
+                        >Добавить видео</Typography>
+                        <Typography
+                            sx={{
+                                color: theme.palette.grey2.main,
+                                fontSize: "16px",
+                                lineHeight: "19px",
+                            }}
+                        >
+                            Принимает .mp4 и .mov формат — максимум 100мб
+                        </Typography>
+                    </Box>
+
+                </Box>
+            </ButtonBase>
+          )}
      </Box>
    </Box>
  );
--- a/src/pages/ViewPublicationPage/questions/Number.tsx
+++ b/src/pages/ViewPublicationPage/questions/Number.tsx
@ -7,6 +7,7 @@ import CustomTextField from "@ui_kit/CustomTextField";
 import { useQuizViewStore, updateAnswer } from "@root/quizView";

 import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
+import {CustomSlider} from "@ui_kit/CustomSlider";

 type NumberProps = {
  currentQuestion: QuizQuestionNumber;
@ -74,10 +75,11 @@ export const Number = ({ currentQuestion }: NumberProps) => {
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
+          gap: "30px"
        }}
      >

-<Slider
+        <CustomSlider
          value={
            currentQuestion.content.chooseRange
              ? answer?.split("—").length || 0 > 1
@ -88,36 +90,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
          min={min}
          max={max}
          step={currentQuestion.content.step || 1}
-          sx={{
-            color: theme.palette.brightPurple.main,
-            padding: "0",
-            marginTop: "75px",
-            "& .MuiSlider-valueLabel":{
-                background: theme.palette.brightPurple.main,
-                borderRadius: "8px",
-                width: "60px",
-                height: "36px"
-            },
-            "& .MuiSlider-valueLabel::before": {
-                width: "6px",
-                height: "2px",
-                transform: "translate(-50%, 50%) rotate(90deg)",
-                bottom: "-5px"
-            },
-              "& .MuiSlider-rail": {
-                  backgroundColor: "#F2F3F7",
-                  border: `1px solid #9A9AAF`,
-                  height: "12px"
-              },
-              "& .MuiSlider-thumb": {
-                  border: "3px #f2f3f7 solid",
-                  height: "23px",
-                  width: "23px"
-              },
-              "& .MuiSlider-track": {
-                height: "12px"
-              }
-          }}
          onChange={(_, value) => {
            const range = String(value).replace(",", "—");
            updateAnswer(currentQuestion.content.id, range);
@ -158,6 +130,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
            sx={{
              display: "flex",
              gap: "15px",
+              alignItems: "center",
              "& .MuiFormControl-root": { width: "auto" },
            }}
          >
@ -180,9 +153,9 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                "& .MuiInputBase-input": { textAlign: "center" },
              }}
            />
-
-            до
-            
+              <Typography>
+                  до
+              </Typography>
            <CustomTextField
              placeholder="0"
              value={maxRange}
--- a/src/pages/ViewPublicationPage/questions/Rating.tsx
+++ b/src/pages/ViewPublicationPage/questions/Rating.tsx
@ -38,7 +38,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
          onChange={(_, value) =>
            updateAnswer(currentQuestion.content.id, String(value))
          }
-          sx={{ height: "50px" }}
+          sx={{ height: "50px", gap: "15px" }}
          max={currentQuestion.content.steps}
          icon={
            <StarIconMini
--- a/src/ui_kit/CustomSlider.tsx
+++ b/src/ui_kit/CustomSlider.tsx
@ -1,4 +1,4 @@
-import { Slider } from "@mui/material";
+import {Slider, useTheme} from "@mui/material";

 type CustomSliderProps = {
    defaultValue?: number;
@ -6,7 +6,8 @@ type CustomSliderProps = {
    min?: number;
    max?: number;
    step?: number;
-    onChange?: (value: number | number[]) => void;
+    onChange?: (_: Event, value: number | number[]) => void;
+    onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
 };

 export const CustomSlider = ({
@ -16,13 +17,15 @@ export const CustomSlider = ({
    max = 100,
    step,
    onChange,
+    onChangeCommitted
 }: CustomSliderProps) => {
-    const handleChange = ({ type }: Event, newValue: number | number[]) => {
-        // Для корректной работы слайдера в FireFox
-        if (type !== "change") {
-            onChange?.(newValue);
-        }
-    };
+    // const handleChange = ({ type }: Event, newValue: number | number[]) => {
+    //     // Для корректной работы слайдера в FireFox
+    //     if (type !== "change") {
+    //         onChange?.(e, newValue);
+    //     }
+    // };
+    const theme = useTheme();

    return (
        <Slider
@ -31,31 +34,40 @@ export const CustomSlider = ({
            min={min}
            max={max}
            step={step}
-            onChange={handleChange}
-            valueLabelDisplay="auto"
+            onChange={onChange}
+            valueLabelDisplay="on"
+            onChangeCommitted={onChangeCommitted}
+            onMouseDown={(e) => e.stopPropagation()}
            data-cy="slider"
            sx={{
-                color: "#7E2AEA",
-                height: "12px",
-                "& .MuiSlider-track": {
-                    border: "none",
+                color: theme.palette.brightPurple.main,
+                padding: "0",
+                marginTop: "75px",
+                "& .MuiSlider-valueLabel":{
+                    background: theme.palette.brightPurple.main,
+                    borderRadius: "8px",
+                    width: "60px",
+                    height: "36px"
+                },
+                "& .MuiSlider-valueLabel::before": {
+                    width: "6px",
+                    height: "2px",
+                    transform: "translate(-50%, 50%) rotate(90deg)",
+                    bottom: "-5px"
                },
                "& .MuiSlider-rail": {
                    backgroundColor: "#F2F3F7",
                    border: `1px solid #9A9AAF`,
+                    height: "12px"
                },
                "& .MuiSlider-thumb": {
-                    height: 32,
-                    width: 32,
-                    border: `6px solid "#7E2AEA`,
-                    backgroundColor: "white",
-                    boxShadow: `0px 0px 0px 3px white,
-                            0px 4px 4px 3px #C3C8DD`,
-                    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
-                        boxShadow: `0px 0px 0px 3px white,
-                                0px 4px 4px 3px #C3C8DD`,
-                    },
+                    border: "3px #f2f3f7 solid",
+                    height: "23px",
+                    width: "23px"
                },
+                "& .MuiSlider-track": {
+                    height: "12px"
+                }
            }}
        />
    );
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
@ -40,10 +40,13 @@ export default function Number({ question }: Props) {
      >
        <CustomSlider
          value={sliderValues}
-          onChange={(value) => setSliderValues(value)}
+          onChange={(e, value) => {
+            setSliderValues(value);
+          }}
          min={min}
          max={max}
          defaultValue={start}
+          valueLabelDisplay={"on"}
          step={question.content.step}
        />
      </Box>