121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { useField, Form, FormikProps, Formik } from 'formik';
|
|||
|
|
import {
|
|||
|
|
Input, Select, Textarea, VStack, Checkbox, Box, Text, Divider, Button, useNumberInput,
|
|||
|
|
} 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";
|
|||
|
|
|
|||
|
|
interface Values {
|
|||
|
|
title: string;
|
|||
|
|
lastName: string;
|
|||
|
|
text: string;
|
|||
|
|
desc: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const types = [
|
|||
|
|
{desc:"текст", value:"text"},
|
|||
|
|
{desc:"селект", value:"select"},
|
|||
|
|
{desc:"чекбокс", value:"checkbox"},
|
|||
|
|
{desc:"файл", value:"file"},
|
|||
|
|
{desc:"кнопка", value:"button"},
|
|||
|
|
{desc:"ничего", value:"none"}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const TextField = (props: any) => {
|
|||
|
|
|
|||
|
|
const [field, meta, helpers] = useField(props);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Textarea resize="none" width="80%" {...field} {...props} />
|
|||
|
|
{meta.touched && meta.error ? (
|
|||
|
|
<div className="error">{meta.error}</div>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default () => {
|
|||
|
|
|
|||
|
|
const [type, setType] = React.useState<number>(0)
|
|||
|
|
const [stockroom, setStockroom] = React.useState<any>([])
|
|||
|
|
const stockroomHC = (value:Array<object>) => {
|
|||
|
|
setStockroom([...value])
|
|||
|
|
}
|
|||
|
|
const typeHC = (value:number) => {
|
|||
|
|
console.log(value)
|
|||
|
|
setType(value)
|
|||
|
|
setStockroom([])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
return(
|
|||
|
|
<>
|
|||
|
|
<Formik
|
|||
|
|
initialValues={{
|
|||
|
|
text: '',
|
|||
|
|
title: '',
|
|||
|
|
lastName: '',
|
|||
|
|
desc:'описание',
|
|||
|
|
}}
|
|||
|
|
|
|||
|
|
onSubmit={(values, actions) => {
|
|||
|
|
console.log(JSON.stringify(values))
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{(props: FormikProps<Values>) => (
|
|||
|
|
|
|||
|
|
<Form>
|
|||
|
|
<VStack>
|
|||
|
|
<TextField placeholder="Заголовок" name="title" type="text" />
|
|||
|
|
<Description name="desc"/>
|
|||
|
|
{
|
|||
|
|
type === 0 ? //Тип вопроса - текст?
|
|||
|
|
<TextField name="text" placeholder="текст" type="text" />
|
|||
|
|
:
|
|||
|
|
stockroom.length === 0 ? //В поле для юзерских данных есть что-то?
|
|||
|
|
null //Ничего не внесено
|
|||
|
|
:
|
|||
|
|
type === 1 ? //Тип вопроса - селект?
|
|||
|
|
<Select>
|
|||
|
|
{
|
|||
|
|
stockroom.map((e: any, i: number) => {
|
|||
|
|
return <option key={i}>{e.text}</option>
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Select>
|
|||
|
|
:
|
|||
|
|
type === 2 ? //Тип вопроса - чекбокс?
|
|||
|
|
stockroom.map((e:any, i:number) => {
|
|||
|
|
return <Checkbox key={i}>{e.text}</Checkbox>
|
|||
|
|
})
|
|||
|
|
:
|
|||
|
|
type === 3 ? //Тип вопроса - файл?
|
|||
|
|
<input type="file"/>
|
|||
|
|
:
|
|||
|
|
type === 4 ? //Тип вопроса - кнопка?
|
|||
|
|
stockroom.map((e:any, i:number) => {
|
|||
|
|
return <Button key={i}>{e.text}</Button>
|
|||
|
|
})
|
|||
|
|
:
|
|||
|
|
null //Тип вопроса - ничего
|
|||
|
|
}
|
|||
|
|
</VStack>
|
|||
|
|
|
|||
|
|
<Settings
|
|||
|
|
types={types}
|
|||
|
|
stockroomHC={stockroomHC}
|
|||
|
|
stockroom={stockroom}
|
|||
|
|
typeHC={typeHC}
|
|||
|
|
type={type}
|
|||
|
|
/>
|
|||
|
|
</Form>
|
|||
|
|
|
|||
|
|
)}
|
|||
|
|
</Formik>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|