diff --git a/src/create/createQuestion.tsx b/src/create/createQuestion.tsx index 98355571..da04d985 100644 --- a/src/create/createQuestion.tsx +++ b/src/create/createQuestion.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { useField, Form, FormikProps, Formik } from 'formik'; import { - Select, Textarea, VStack, Checkbox, Button, + Select, Textarea, VStack, Checkbox, Button, HStack, } from '@chakra-ui/react' import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File -import Description from "./description"; import Settings from "./settings"; -import Types from "./types"; - +import WorkSpace from "./workSpace"; +import Header from "./header"; +import { saveCondition, getCondition } from "./lsBacking"; +import type {ElementsOfObject} from "./questionTypes" //Значения, собираемые для отправки на бэк interface Values { title: string; @@ -15,13 +16,7 @@ interface Values { children: string; description: string; } -//Поля объектов, используемых для отображения созданных пользователем инструментов -interface ElementsOfObject { - text: string; - id: number; - isFocus: boolean; - color?: string; -} + const types = [ {desc:"текст", value:"text"}, @@ -108,7 +103,6 @@ const getIndexById = (id:number, array:Array):number => { export default () => { - const [type, setType] = React.useState(4) const [stockroom, setStockroom] = React.useState>([]) const [focus, setFocus] = React.useState() //Хранит id объекта @@ -118,6 +112,8 @@ export default () => { const typeHC = (value:number): void => { setType(value) setStockroom([]) + saveCondition("type", value) + saveCondition("stockroom", []) } const changeFocus = (id: number): void => { //Не менять фокус если снова выбрано то же окно @@ -133,6 +129,7 @@ export default () => { //Устанавливаем новый фокус и пересоздаём массив setFocus(id) + saveCondition("focus", id) newArr[index].isFocus = true setStockroom([...newArr]) @@ -142,17 +139,19 @@ export default () => { if (focus !== undefined) { let index = getIndexById(focus, stockroom) - let list = stockroom - list[index].color = color - setStockroom([...list]) + let newArr = stockroom + newArr[index].color = color + setStockroom([...newArr]) + saveCondition("stockroom", newArr) } } const changeText = (text: string): void => { if (focus !== undefined) { let index = getIndexById(focus, stockroom) - let list = stockroom - list[index].text = text - setStockroom([...list]) + let newArr = stockroom + newArr[index].text = text + setStockroom([...newArr]) + saveCondition("stockroom", newArr) } } @@ -172,6 +171,7 @@ export default () => { if (focus === undefined){ //фокуса нет - добавляем в конец массива newArr.push(obj) setStockroom([...newArr]) + saveCondition("stockroom", newArr) //Говорим стейту с фокусом, что фокус изменился setFocus(newArr.length - 1) } else { //фокус есть - добавляем после объекта с фокусом @@ -181,6 +181,7 @@ export default () => { //Говорим стейту с фокусом, что фокус изменился setFocus(index + 1) setStockroom([...newArr]) + saveCondition("stockroom", newArr) } } const deleteObject = (id: number): void => { @@ -194,6 +195,7 @@ export default () => { let newArr = stockroom newArr.splice(index, 1) setStockroom([...newArr]) + saveCondition("stockroom", newArr) } } @@ -209,36 +211,56 @@ export default () => { onSubmit={(values, actions) => { console.log(JSON.stringify(values)) + console.log(getCondition()) }} > {(props: FormikProps) => (
- - - - - +
+ + - + + + + + + + + + + - )} diff --git a/src/create/header.tsx b/src/create/header.tsx new file mode 100644 index 00000000..981efb07 --- /dev/null +++ b/src/create/header.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import {HStack} from "@chakra-ui/react"; + +export default () => { + return( + + + + ) +} \ No newline at end of file diff --git a/src/create/lsBacking.tsx b/src/create/lsBacking.tsx new file mode 100644 index 00000000..316c2412 --- /dev/null +++ b/src/create/lsBacking.tsx @@ -0,0 +1,18 @@ +export function saveCondition (key:string, value:any) { + let ls : any = window.localStorage.getItem("condition") + if (ls !== null) { + ls = JSON.parse(ls) + } else { + ls = {} + } + ls[key] = value + localStorage.setItem("condition", JSON.stringify(ls)) +} +export function getCondition () { + let ls : any = window.localStorage.getItem("condition") + if (ls !== null) { + return JSON.parse(ls) + } else { + return null + } +} \ No newline at end of file diff --git a/src/create/questionTypes.tsx b/src/create/questionTypes.tsx new file mode 100644 index 00000000..735c5ef8 --- /dev/null +++ b/src/create/questionTypes.tsx @@ -0,0 +1,19 @@ +//Поля объектов, используемых для отображения созданных пользователем инструментов +interface ElementsOfObject { + text?: string; + id: number; + isFocus: boolean; + color?: string; +} +interface QuestionProps { + type: number; + stockroom: Array; + focus: number; + changeFocus: (id?: number) => void; + changeBgColor: (text?:string) => void; + changeText: (text?:string) => void; + createObject?: (obj?:ElementsOfObject) => void; + deleteObject: (id?:number) => void; + getIndexById: (id?:number, array?:ElementsOfObject) => number; +} +export type {ElementsOfObject, QuestionProps} \ No newline at end of file diff --git a/src/create/settings.tsx b/src/create/settings.tsx index c82ff3d6..5fa42597 100644 --- a/src/create/settings.tsx +++ b/src/create/settings.tsx @@ -5,15 +5,7 @@ import Buttons from "./tools/buttons" export default (props: any) => { return ( - + <> - { getIndexById={props.getIndexById} /> - - + ) } \ No newline at end of file diff --git a/src/create/tools/buttons.tsx b/src/create/tools/buttons.tsx index 6fe017f3..ea27ed37 100644 --- a/src/create/tools/buttons.tsx +++ b/src/create/tools/buttons.tsx @@ -3,23 +3,9 @@ import { Button, VStack, HStack, Textarea} from "@chakra-ui/react"; import {ChromePicker} from "react-color"; import Viewer from "./viewer"; import { useSnackbar } from 'notistack'; -interface ElementOfObject { - text: string; - isFocus: boolean; - color?: string; -} -interface Component { - stockroom: any; - focus: number; - changeFocus: (id: number) => void; - changeBgColor: (text:string) => void; - changeText: (text:string) => void; - createObject: (obj:ElementOfObject) => void; - deleteObject: (id:number) => void; - getIndexById: (id:number, array:ElementOfObject) => number; -} +import type {ElementsOfObject, QuestionProps} from "../questionTypes" -export default ({stockroom, focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: Component) => { +export default ({stockroom = [], focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: any) => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); let current @@ -32,10 +18,7 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat } return( - + <> } - + ) } \ No newline at end of file diff --git a/src/create/types.tsx b/src/create/types.tsx index 33608f52..7aff1a9e 100644 --- a/src/create/types.tsx +++ b/src/create/types.tsx @@ -3,9 +3,11 @@ import { Select, Checkbox, Button, } from '@chakra-ui/react' import {TextField} from "./createQuestion"; +import type {QuestionProps} from "./questionTypes" -export default (props:any) => { - switch(props.type) { +export default ({type, stockroom = [], changeFocus} : any) => { + + switch(type) { case 0://Тип вопроса - текст? return () break; @@ -13,7 +15,7 @@ export default (props:any) => { return (