frontPanel/src/create.tsx

import React from 'react';
import moment from 'moment';
import {Input, Select, Stack, Checkbox, Box, Text, Divider, Button} from '@chakra-ui/react'
import { Formik, Field, Form } from 'formik';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import TimePicker from 'react-time-picker';

const statusValues: any = ['draft', 'template', 'stop', 'start']

export default () => {

    const Options = React.useMemo(() => () => (
        statusValues.map((e:string,i:number)=> {
            return <option key={i} value={e}>{e}</option>
        })
    ), []);

    return(
        <Box
            padding="20px"
        >
            <Formik
                initialValues={{
                    name: "",
                    description: "",
                    config: "",
                    status: "draft",
                    save: true,
                    resquiz: true,
                    incomplete: true,
                    notification: true,
                    unique: true,
                    time: "",
                    pause: false,
                    date: null
                }}
                onSubmit={(values) => {
                    console.log(values)
                }}
            >
                {({ values, setFieldValue }) => {
                    return (
                        <Form>
                            <label htmlFor="firstName">First Name</label>

                            <Stack
                                backgroundColor="lightgray"
                                padding="20px"
                            >
                                <Text>Название опроса (максимум 280 символов)</Text>
                                <Field as={Input} placeholder='name' name="name" />
                                <Text>Описание опроса</Text>
                                <Field as={Input} placeholder='description'  name="description"/>
                                <Field as={Input} type="hidden" placeholder='config' name="config"/>
                                <Text>Статус опроса</Text>
                                <Field as={Select} name="status">
                                    {
                                       <Options/>
                                    }
                                </Field>
                            </Stack>
                            <Stack padding="20px">
                                <Text>Сохранить устройство</Text>
                                <Field as={Checkbox} name="save" isChecked={values.save}/>
                                <Divider/>
                                <Text>Разрешить пользователям перепроходить опрос</Text>
                                <Field as={Checkbox} name="resquiz" isChecked={values.resquiz}/>
                                <Divider/>
                                <Text>Сохранять статистику неполных прохождений</Text>
                                <Field as={Checkbox} name="incomplete" isChecked={values.incomplete}/>
                                <Divider/>
                                <Text>Уведомлять по почте при каждом прохождении опроса</Text>
                                <Field as={Checkbox} name="notification" isChecked={values.notification}/>
                                <Divider/>
                                <Text>Сохранять статистику только для уникального прохождения опроса</Text>
                                <Field as={Checkbox} name="unique" isChecked={values.unique}/>
                                <Divider/>
                            </Stack>
                            <Stack
                                backgroundColor="lightgray"
                                padding="20px"
                            >
                                <Text>Время прохождения опроса</Text>
                                <Field
                                    as={TimePicker}
                                    name="time"
                                    format="HH : mm"
                                    disableClock={true}
                                    amPmAriaLabel={"am"}
                                    onChange={(e:any) => {
                                        if (e !== null) {
                                            setFieldValue("time", e)
                                        } else {
                                            //При стирании значения пользователем затирается и последнее значение
                                            setFieldValue("time", "")
                                        }
                                    }}
                                    value={values.time}
                                />
                                <Text>Разрешить ставить на паузу</Text>
                                <Field as={Checkbox} name="pause" isDisabled={values.time.length === 0 ? true : false}/>
                                <Text>Дата проведения опроса</Text>
                                <Field
                                    as={DatePicker}
                                    name="date"
                                    selected={values.date}
                                    dateFormat="MM/dd/yyyy"
                                    onChange={(e:any) => {
                                        setFieldValue("date", e)
                                    }}
                                    minDate={new Date()}
                                />
                            </Stack>
                            <Button type="submit">Сохранить</Button>
                        </Form>
                    )
                }}
            </Formik>
        </Box>
    )
}