inputs receive value from state
remove unused code
This commit is contained in:
parent
bf1d150954
commit
312f366501
@ -1,29 +1,24 @@
|
|||||||
import { MessageIcon } from "@icons/messagIcon";
|
|
||||||
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
|
||||||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||||||
import { TextareaAutosize } from "@mui/base/TextareaAutosize";
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
FormControl,
|
FormControl,
|
||||||
IconButton,
|
IconButton,
|
||||||
InputAdornment,
|
InputAdornment,
|
||||||
Popover,
|
|
||||||
TextField as MuiTextField,
|
TextField as MuiTextField,
|
||||||
|
TextFieldProps,
|
||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
TextFieldProps,
|
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import {
|
import {
|
||||||
addQuestionVariant,
|
addQuestionVariant,
|
||||||
deleteQuestionVariant,
|
deleteQuestionVariant,
|
||||||
setQuestionVariantField,
|
setQuestionVariantField,
|
||||||
} from "@root/questions/actions";
|
} from "@root/questions/actions";
|
||||||
|
import { enqueueSnackbar } from "notistack";
|
||||||
import type { ChangeEvent, FC, KeyboardEvent, ReactNode } from "react";
|
import type { ChangeEvent, FC, KeyboardEvent, ReactNode } from "react";
|
||||||
import { useState } from "react";
|
|
||||||
import { Draggable } from "react-beautiful-dnd";
|
import { Draggable } from "react-beautiful-dnd";
|
||||||
import type { QuestionVariant } from "../../../model/questionTypes/shared";
|
import type { QuestionVariant } from "../../../model/questionTypes/shared";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import { enqueueSnackbar } from "notistack";
|
|
||||||
|
|
||||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
||||||
|
|
||||||
@ -48,21 +43,6 @@ export const AnswerItem = ({
|
|||||||
}: AnswerItemProps) => {
|
}: AnswerItemProps) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(790));
|
const isTablet = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
|
|
||||||
const [inputValue, setInputValue] = useState(variant.answer);
|
|
||||||
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
|
|
||||||
setQuestionVariantField(questionId, variant.id, "answer", value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
setIsOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setIsOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Draggable draggableId={String(index)} index={index}>
|
<Draggable draggableId={String(index)} index={index}>
|
||||||
@ -80,16 +60,20 @@ export const AnswerItem = ({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
value={inputValue}
|
value={variant.answer}
|
||||||
fullWidth
|
fullWidth
|
||||||
focused={false}
|
focused={false}
|
||||||
placeholder={"Добавьте ответ"}
|
placeholder={"Добавьте ответ"}
|
||||||
multiline={largeCheck}
|
multiline={largeCheck}
|
||||||
onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
|
onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||||
if (target.value.length <= 1000) {
|
if (target.value.length <= 1000) {
|
||||||
setInputValue(target.value);
|
setQuestionVariantField(
|
||||||
|
questionId,
|
||||||
|
variant.id,
|
||||||
|
"answer",
|
||||||
|
target.value || " ",
|
||||||
|
);
|
||||||
}
|
}
|
||||||
setQuestionVariantAnswer(target.value || " ");
|
|
||||||
}}
|
}}
|
||||||
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
|
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
|
||||||
if (disableKeyDown) {
|
if (disableKeyDown) {
|
||||||
|
@ -1,15 +1,6 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionDate } from "../../../model/questionTypes/date";
|
import type { QuizQuestionDate } from "../../../model/questionTypes/date";
|
||||||
|
|
||||||
type SettingsDataProps = {
|
type SettingsDataProps = {
|
||||||
@ -22,10 +13,6 @@ export default function SettingsData({ question }: SettingsDataProps) {
|
|||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
|
|
||||||
const setInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -1,15 +1,7 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
import CustomTextField from "@ui_kit/CustomTextField";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
|
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
|
||||||
|
|
||||||
type SettingDropDownProps = {
|
type SettingDropDownProps = {
|
||||||
@ -21,17 +13,13 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
|
|||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const debounced = useDebouncedCallback((value) => {
|
const setContentDefault = (value: string) => {
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
const debounceAnswer = useDebouncedCallback((value) => {
|
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
if (question.type !== "select") return;
|
if (question.type !== "select") return;
|
||||||
|
|
||||||
question.content.default = value;
|
question.content.default = value;
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -98,9 +86,9 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
|
|||||||
</Typography>
|
</Typography>
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
placeholder={"Выберите вариант"}
|
placeholder={"Выберите вариант"}
|
||||||
text={question.content.default}
|
value={question.content.default}
|
||||||
maxLength={60}
|
maxLength={60}
|
||||||
onChange={({ target }) => debounceAnswer(target.value)}
|
onChange={({ target }) => setContentDefault(target.value)}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
@ -178,7 +166,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
|
|||||||
<CustomTextField
|
<CustomTextField
|
||||||
placeholder={"Выберите вариант"}
|
placeholder={"Выберите вариант"}
|
||||||
text={question.content.default}
|
text={question.content.default}
|
||||||
onChange={({ target }) => debounceAnswer(target.value)}
|
onChange={({ target }) => setContentDefault(target.value)}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
{/*{question.content.innerNameCheck && (*/}
|
{/*{question.content.innerNameCheck && (*/}
|
||||||
|
@ -1,15 +1,6 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
|
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
|
||||||
|
|
||||||
type SettingEmojiProps = {
|
type SettingEmojiProps = {
|
||||||
@ -19,14 +10,9 @@ type SettingEmojiProps = {
|
|||||||
export default function SettingEmoji({ question }: SettingEmojiProps) {
|
export default function SettingEmoji({ question }: SettingEmojiProps) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
|
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(985));
|
|
||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const setInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -77,14 +77,14 @@ export default function QuestionsPageCard({
|
|||||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const setTitle = useDebouncedCallback((title) => {
|
const setTitle = (title: string) => {
|
||||||
const updateQuestionFn =
|
const updateQuestionFn =
|
||||||
question.type === null ? updateUntypedQuestion : updateQuestion;
|
question.type === null ? updateUntypedQuestion : updateQuestion;
|
||||||
|
|
||||||
updateQuestionFn(question.id, (question) => {
|
updateQuestionFn(question.id, (question) => {
|
||||||
question.title = title;
|
question.title = title;
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
const handleInputFocus = () => {
|
const handleInputFocus = () => {
|
||||||
setIsTextFieldtActive(true);
|
setIsTextFieldtActive(true);
|
||||||
@ -137,7 +137,7 @@ export default function QuestionsPageCard({
|
|||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
|
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
|
||||||
defaultValue={question.title}
|
value={question.title}
|
||||||
onChange={({ target }) => {
|
onChange={({ target }) => {
|
||||||
if (target.value.length <= 225) setTitle(target.value);
|
if (target.value.length <= 225) setTitle(target.value);
|
||||||
}}
|
}}
|
||||||
|
@ -1,15 +1,7 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
import CustomTextField from "@ui_kit/CustomTextField";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
||||||
|
|
||||||
type SettingOptionsAndPictProps = {
|
type SettingOptionsAndPictProps = {
|
||||||
@ -24,17 +16,13 @@ export default function SettingOptionsAndPict({
|
|||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(680));
|
const isMobile = useMediaQuery(theme.breakpoints.down(680));
|
||||||
|
|
||||||
const setReplText = useDebouncedCallback((replText) => {
|
const setReplText = (replText: string) => {
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
if (question.type !== "varimg") return;
|
if (question.type !== "varimg") return;
|
||||||
|
|
||||||
question.content.replText = replText;
|
question.content.replText = replText;
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
const setDescription = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,18 +1,12 @@
|
|||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Tooltip,
|
|
||||||
Typography,
|
Typography,
|
||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
|
|
||||||
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
|
|
||||||
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
|
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
|
||||||
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
|
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
|
||||||
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
|
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
|
||||||
@ -43,18 +37,6 @@ export default function SettingOpytionsPict({
|
|||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
|
|
||||||
const debounced = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
const updateProportions = (proportions: Proportion) => {
|
|
||||||
updateQuestion(question.id, (question) => {
|
|
||||||
if (question.type !== "images") return;
|
|
||||||
|
|
||||||
question.content.xy = proportions;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Box
|
<Box
|
||||||
|
@ -7,14 +7,12 @@ import {
|
|||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { updateQuestion } from "@root/questions/actions";
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
import CustomTextField from "@ui_kit/CustomTextField";
|
||||||
|
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
import InfoIcon from "../../../assets/icons/InfoIcon";
|
||||||
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
||||||
import ButtonsOptions from "../ButtonsOptions";
|
|
||||||
import SwitchTextField from "./switchTextField";
|
|
||||||
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
|
|
||||||
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
|
||||||
|
import SwitchTextField from "./switchTextField";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
question: QuizQuestionText;
|
question: QuizQuestionText;
|
||||||
@ -32,13 +30,13 @@ export default function OwnTextField({
|
|||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
|
|
||||||
const setPlaceholder = useDebouncedCallback((value) => {
|
const setPlaceholder = (value: string) => {
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
if (question.type !== "text") return;
|
if (question.type !== "text") return;
|
||||||
|
|
||||||
question.content.placeholder = value;
|
question.content.placeholder = value;
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
const SSHC = (data: string) => {
|
const SSHC = (data: string) => {
|
||||||
setSwitchState(data);
|
setSwitchState(data);
|
||||||
@ -60,7 +58,7 @@ export default function OwnTextField({
|
|||||||
>
|
>
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
placeholder={"Пример ответа"}
|
placeholder={"Пример ответа"}
|
||||||
text={question.content.placeholder}
|
value={question.content.placeholder}
|
||||||
onChange={({ target }) => setPlaceholder(target.value)}
|
onChange={({ target }) => setPlaceholder(target.value)}
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: isFigmaTablte ? "549px" : "640px",
|
maxWidth: isFigmaTablte ? "549px" : "640px",
|
||||||
|
@ -1,21 +1,6 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
FormControl,
|
|
||||||
FormControlLabel,
|
|
||||||
Radio,
|
|
||||||
RadioGroup,
|
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import CheckedIcon from "@ui_kit/RadioCheck";
|
|
||||||
import CheckIcon from "@ui_kit/RadioIcon";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
import type { QuizQuestionText } from "../../../model/questionTypes/text";
|
||||||
|
|
||||||
type SettingTextFieldProps = {
|
type SettingTextFieldProps = {
|
||||||
@ -38,10 +23,6 @@ export default function SettingTextField({ question }: SettingTextFieldProps) {
|
|||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
|
|
||||||
const debounced = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -17,11 +17,9 @@ import CustomTextField from "@ui_kit/CustomTextField";
|
|||||||
|
|
||||||
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
|
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
|
||||||
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
|
||||||
import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
|
|
||||||
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
|
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
|
||||||
import { DeleteFunction } from "@utils/deleteFunc";
|
import { DeleteFunction } from "@utils/deleteFunc";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -32,28 +30,18 @@ type Props = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function PageOptions({ disableInput, question }: Props) {
|
export default function PageOptions({ disableInput, question }: Props) {
|
||||||
const [switchState, setSwitchState] = useState("setting");
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(980));
|
const isTablet = useMediaQuery(theme.breakpoints.down(980));
|
||||||
const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(780));
|
const isMobile = useMediaQuery(theme.breakpoints.down(780));
|
||||||
|
const [openDelete, setOpenDelete] = useState<boolean>(false);
|
||||||
|
|
||||||
const setText = useDebouncedCallback((value) => {
|
const setText = (value: string) => {
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
if (question.type !== "page") return;
|
if (question.type !== "page") return;
|
||||||
|
|
||||||
question.content.text = value;
|
question.content.text = value;
|
||||||
});
|
});
|
||||||
}, 200);
|
|
||||||
|
|
||||||
const [openDelete, setOpenDelete] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const openedModal = () => {
|
|
||||||
updateDesireToOpenABranchingModal(question.content.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const SSHC = (data: string) => {
|
|
||||||
setSwitchState(data);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -76,7 +64,7 @@ export default function PageOptions({ disableInput, question }: Props) {
|
|||||||
<CustomTextField
|
<CustomTextField
|
||||||
id="addText"
|
id="addText"
|
||||||
placeholder={"Можно добавить текст"}
|
placeholder={"Можно добавить текст"}
|
||||||
text={question.content.text}
|
value={question.content.text}
|
||||||
onChange={({ target }) => setText(target.value)}
|
onChange={({ target }) => setText(target.value)}
|
||||||
maxLength={50}
|
maxLength={50}
|
||||||
/>
|
/>
|
||||||
|
@ -1,16 +1,5 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
|
|
||||||
type SettingPageOptionsProps = {
|
type SettingPageOptionsProps = {
|
||||||
question: QuizQuestionPage;
|
question: QuizQuestionPage;
|
||||||
@ -22,10 +11,6 @@ export default function SettingPageOptions({
|
|||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const setInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -1,24 +1,25 @@
|
|||||||
import { useState, useEffect, useRef } from "react";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
|
TextField as MuiTextField,
|
||||||
|
TextFieldProps,
|
||||||
Typography,
|
Typography,
|
||||||
TextField,
|
|
||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
|
import { FC, useLayoutEffect, useRef, useState } from "react";
|
||||||
|
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
|
||||||
|
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
|
||||||
|
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
|
||||||
|
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
|
||||||
|
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
|
||||||
|
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
|
||||||
|
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
|
||||||
|
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
|
||||||
import ButtonsOptions from "../ButtonsOptions";
|
import ButtonsOptions from "../ButtonsOptions";
|
||||||
import SwitchRating from "./switchRating";
|
import SwitchRating from "./switchRating";
|
||||||
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
|
|
||||||
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
|
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
||||||
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
|
|
||||||
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
|
|
||||||
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
|
|
||||||
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
|
|
||||||
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
|
|
||||||
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
|
|
||||||
import { updateQuestion } from "@root/questions/actions";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
question: QuizQuestionRating;
|
question: QuizQuestionRating;
|
||||||
@ -37,43 +38,36 @@ export default function RatingOptions({
|
|||||||
setOpenBranchingPage,
|
setOpenBranchingPage,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const [switchState, setSwitchState] = useState("setting");
|
const [switchState, setSwitchState] = useState("setting");
|
||||||
const [negativeText, setNegativeText] = useState<string>("");
|
|
||||||
const [positiveText, setPositiveText] = useState<string>("");
|
|
||||||
const [negativeTextWidth, setNegativeTextWidth] = useState<number>(0);
|
const [negativeTextWidth, setNegativeTextWidth] = useState<number>(0);
|
||||||
const [positiveTextWidth, setPositiveTextWidth] = useState<number>(0);
|
const [positiveTextWidth, setPositiveTextWidth] = useState<number>(0);
|
||||||
const quizId = Number(useParams().quizId);
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const negativeRef = useRef<HTMLDivElement>(null);
|
const negativeRef = useRef<HTMLDivElement>(null);
|
||||||
const positiveRef = useRef<HTMLDivElement>(null);
|
const positiveRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const debounceNegativeDescription = useDebouncedCallback((value) => {
|
const setNegativeDescription = (value: string) => {
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
if (question.type !== "rating") return;
|
if (question.type !== "rating") return;
|
||||||
|
|
||||||
question.content.ratingNegativeDescription = value.substring(0, 15);
|
question.content.ratingNegativeDescription = value.substring(0, 15);
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
const debouncePositiveDescription = useDebouncedCallback((value) => {
|
|
||||||
|
const setPositiveDescription = (value: string) => {
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
if (question.type !== "rating") return;
|
if (question.type !== "rating") return;
|
||||||
|
|
||||||
question.content.ratingPositiveDescription = value.substring(0, 15);
|
question.content.ratingPositiveDescription = value.substring(0, 15);
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
setNegativeText(question.content.ratingNegativeDescription);
|
|
||||||
setPositiveText(question.content.ratingPositiveDescription);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setNegativeTextWidth(negativeRef.current?.offsetWidth || 0);
|
setNegativeTextWidth(negativeRef.current?.offsetWidth || 0);
|
||||||
}, [negativeText]);
|
}, [question.content.ratingNegativeDescription]);
|
||||||
|
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
setPositiveTextWidth(positiveRef.current?.offsetWidth || 0);
|
setPositiveTextWidth(positiveRef.current?.offsetWidth || 0);
|
||||||
}, [positiveText]);
|
}, [question.content.ratingPositiveDescription]);
|
||||||
|
|
||||||
const buttonRatingForm: ButtonRatingFrom[] = [
|
const buttonRatingForm: ButtonRatingFrom[] = [
|
||||||
{
|
{
|
||||||
@ -221,21 +215,17 @@ export default function RatingOptions({
|
|||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{negativeText}
|
{question.content.ratingNegativeDescription}
|
||||||
</Typography>
|
</Typography>
|
||||||
<TextField
|
<TextField
|
||||||
defaultValue={question.content.ratingNegativeDescription}
|
value={question.content.ratingNegativeDescription}
|
||||||
value={negativeText}
|
|
||||||
placeholder="Негативно"
|
placeholder="Негативно"
|
||||||
onChange={({ target }: { target: HTMLInputElement }) => {
|
onChange={({ target }) => {
|
||||||
if (target.value.length <= 15) {
|
if (target.value.length <= 15) {
|
||||||
setNegativeText(target.value);
|
setNegativeDescription(target.value);
|
||||||
debounceNegativeDescription(target.value);
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onBlur={({ target }: { target: HTMLInputElement }) =>
|
onBlur={({ target }) => setNegativeDescription(target.value)}
|
||||||
debounceNegativeDescription(target.value)
|
|
||||||
}
|
|
||||||
sx={{
|
sx={{
|
||||||
width: negativeTextWidth + 10 + "px",
|
width: negativeTextWidth + 10 + "px",
|
||||||
maxWidth: isMobile ? "140px" : "230px",
|
maxWidth: isMobile ? "140px" : "230px",
|
||||||
@ -279,20 +269,17 @@ export default function RatingOptions({
|
|||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{positiveText}
|
{question.content.ratingPositiveDescription}
|
||||||
</Typography>
|
</Typography>
|
||||||
<TextField
|
<TextField
|
||||||
value={positiveText}
|
value={question.content.ratingPositiveDescription}
|
||||||
placeholder="Позитивно"
|
placeholder="Позитивно"
|
||||||
onChange={({ target }: { target: HTMLInputElement }) => {
|
onChange={({ target }) => {
|
||||||
if (target.value.length <= 15) {
|
if (target.value.length <= 15) {
|
||||||
setPositiveText(target.value);
|
setPositiveDescription(target.value);
|
||||||
debouncePositiveDescription(target.value);
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onBlur={({ target }: { target: HTMLInputElement }) =>
|
onBlur={({ target }) => setPositiveDescription(target.value)}
|
||||||
debouncePositiveDescription(target.value)
|
|
||||||
}
|
|
||||||
sx={{
|
sx={{
|
||||||
width: positiveTextWidth + 10 + "px",
|
width: positiveTextWidth + 10 + "px",
|
||||||
maxWidth: isMobile ? "140px" : "230px",
|
maxWidth: isMobile ? "140px" : "230px",
|
||||||
|
@ -3,16 +3,12 @@ import {
|
|||||||
Box,
|
Box,
|
||||||
ButtonBase,
|
ButtonBase,
|
||||||
Slider,
|
Slider,
|
||||||
Tooltip,
|
|
||||||
Typography,
|
Typography,
|
||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
|
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
|
||||||
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
|
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
|
||||||
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
|
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
|
||||||
@ -32,10 +28,6 @@ export default function SettingSlider({ question }: SettingSliderProps) {
|
|||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
|
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
|
||||||
|
|
||||||
const setInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
const buttonRatingForm: ButtonRatingFrom[] = [
|
const buttonRatingForm: ButtonRatingFrom[] = [
|
||||||
{ name: "star", icon: <StarIconMini color={theme.palette.grey3.main} /> },
|
{ name: "star", icon: <StarIconMini color={theme.palette.grey3.main} /> },
|
||||||
{ name: "trophie", icon: <TropfyIcon color={theme.palette.grey3.main} /> },
|
{ name: "trophie", icon: <TropfyIcon color={theme.palette.grey3.main} /> },
|
||||||
|
@ -1,15 +1,6 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
|
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
|
||||||
|
|
||||||
type SettingSliderProps = {
|
type SettingSliderProps = {
|
||||||
@ -22,10 +13,6 @@ export default function SettingSlider({ question }: SettingSliderProps) {
|
|||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const setInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -123,6 +123,9 @@ export default function SwitchQuestionsPage({
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
case "result":
|
||||||
|
return null;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
notReachable(question);
|
notReachable(question);
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,6 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
|
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
|
||||||
|
|
||||||
type SettingsUploadProps = {
|
type SettingsUploadProps = {
|
||||||
@ -20,10 +11,6 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
|
|||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const setInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -1,15 +1,6 @@
|
|||||||
import {
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
import { updateQuestion } from "@root/questions/actions";
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
|
|
||||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||||
import CustomTextField from "@ui_kit/CustomTextField";
|
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import InfoIcon from "../../../assets/icons/InfoIcon";
|
|
||||||
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
|
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -23,10 +14,6 @@ export default function ResponseSettings({ question }: Props) {
|
|||||||
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||||
|
|
||||||
const updateQuestionInnerName = useDebouncedCallback((value) => {
|
|
||||||
setQuestionInnerName(question.id, value);
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -5,7 +5,6 @@ import CustomTextField from "@ui_kit/CustomTextField";
|
|||||||
import SelectableButton from "@ui_kit/SelectableButton";
|
import SelectableButton from "@ui_kit/SelectableButton";
|
||||||
import UploadBox from "@ui_kit/UploadBox";
|
import UploadBox from "@ui_kit/UploadBox";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useDebouncedCallback } from "use-debounce";
|
|
||||||
import UploadIcon from "../../assets/icons/UploadIcon";
|
import UploadIcon from "../../assets/icons/UploadIcon";
|
||||||
import { UploadVideoModal } from "./UploadVideoModal";
|
import { UploadVideoModal } from "./UploadVideoModal";
|
||||||
|
|
||||||
@ -19,11 +18,11 @@ export default function HelpQuestions({ question }: HelpQuestionsProps) {
|
|||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
|
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
|
||||||
|
|
||||||
const updateQuestionHint = useDebouncedCallback((value) => {
|
const updateQuestionHint = (value: string) => {
|
||||||
updateQuestion(question.id, (question) => {
|
updateQuestion(question.id, (question) => {
|
||||||
question.content.hint.text = value;
|
question.content.hint.text = value;
|
||||||
});
|
});
|
||||||
}, 200);
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@ -60,7 +59,7 @@ export default function HelpQuestions({ question }: HelpQuestionsProps) {
|
|||||||
<>
|
<>
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
placeholder={"Текст консультанта"}
|
placeholder={"Текст консультанта"}
|
||||||
text={question.content.hint.text}
|
value={question.content.hint.text}
|
||||||
onChange={({ target }) => updateQuestionHint(target.value || " ")}
|
onChange={({ target }) => updateQuestionHint(target.value || " ")}
|
||||||
maxLength={100}
|
maxLength={100}
|
||||||
/>
|
/>
|
||||||
|
@ -59,7 +59,7 @@ export default function EditPage({
|
|||||||
const quiz = useCurrentQuiz();
|
const quiz = useCurrentQuiz();
|
||||||
const { editQuizId } = useQuizStore();
|
const { editQuizId } = useQuizStore();
|
||||||
const { questions } = useQuestionsStore();
|
const { questions } = useQuestionsStore();
|
||||||
const { whyCantCreatePublic, showConfirmLeaveModal, nextStep } = useUiTools();
|
const { showConfirmLeaveModal, nextStep } = useUiTools();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const currentStep = useQuizStore((state) => state.currentStep);
|
const currentStep = useQuizStore((state) => state.currentStep);
|
||||||
|
Loading…
Reference in New Issue
Block a user