changed Fields to FastFields

This commit is contained in:
Aquaticholic
2022-02-02 05:48:35 +00:00
parent 54b3353a0b
commit 71be3caac0
2 changed files with 21 additions and 20 deletions
+19 -18
View File
@@ -6,7 +6,7 @@ import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
import componentTypes from "@data-driven-forms/react-form-renderer/component-types"; import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
import componentMapper from "@data-driven-forms/blueprint-component-mapper/component-mapper"; import componentMapper from "@data-driven-forms/blueprint-component-mapper/component-mapper";
import FormTemplate from "@data-driven-forms/blueprint-component-mapper/form-template"; import FormTemplate from "@data-driven-forms/blueprint-component-mapper/form-template";
import { Formik, Field, Form } from "formik"; import { Formik, FastField, Form } from "formik";
import InputNumberField from "../components/InputNumberField.jsx"; import InputNumberField from "../components/InputNumberField.jsx";
import { import {
TextField, TextField,
@@ -53,6 +53,7 @@ const InputPage = () => {
defence: "0", defence: "0",
disabled: false disabled: false
}} }}
validateOnChange="false"
onSubmit={(values, { setSubmitting, resetForm }) => { onSubmit={(values, { setSubmitting, resetForm }) => {
setTimeout(() => { setTimeout(() => {
localdb localdb
@@ -87,10 +88,10 @@ const InputPage = () => {
<Form > <Form >
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}> <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item> <Grid item>
<Field type="input" as={TextField} name="team_number" label="Team #" /> <FastField type="input" as={TextField} name="team_number" label="Team #" />
</Grid> </Grid>
<Grid item> <Grid item>
<Field type="input" as={TextField} name="match_number" label="Match Number" /> <FastField type="input" as={TextField} name="match_number" label="Match Number" />
</Grid> </Grid>
<Grid item> <Grid item>
<FormControl component="fieldset"> <FormControl component="fieldset">
@@ -98,13 +99,13 @@ const InputPage = () => {
<RadioGroup aria-label="Alliance" name="alliance" row> <RadioGroup aria-label="Alliance" name="alliance" row>
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="alliance" value="red" style={{ fontSize: 50 }} /> <FastField as={Radio} type="radio" name="alliance" value="red" style={{ fontSize: 50 }} />
} }
label="Red" label="Red"
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="alliance" value="blue" /> <FastField as={Radio} type="radio" name="alliance" value="blue" />
} }
label="Blue" label="Blue"
/> />
@@ -143,31 +144,31 @@ const InputPage = () => {
<RadioGroup aria-label="Climbing" name="climb_level" row> <RadioGroup aria-label="Climbing" name="climb_level" row>
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="climb_level" value="0" /> <FastField as={Radio} type="radio" name="climb_level" value="0" />
} }
label="None" label="None"
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="climb_level" value="1" /> <FastField as={Radio} type="radio" name="climb_level" value="1" />
} }
label="Low" label="Low"
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="climb_level" value="2" /> <FastField as={Radio} type="radio" name="climb_level" value="2" />
} }
label="Mid" label="Mid"
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="climb_level" value="3" /> <FastField as={Radio} type="radio" name="climb_level" value="3" />
} }
label="High" label="High"
/> />
<FormControlLabel <FormControlLabel
control={ control={
<Field as={Radio} type="radio" name="climb_level" value="4" /> <FastField as={Radio} type="radio" name="climb_level" value="4" />
} }
label="Traversal" label="Traversal"
/> />
@@ -205,19 +206,19 @@ const InputPage = () => {
<FormLabel component="legend">Defense</FormLabel> <FormLabel component="legend">Defense</FormLabel>
<RadioGroup aria-label="Defense" name="defence" row> <RadioGroup aria-label="Defense" name="defence" row>
<FormControlLabel <FormControlLabel
control={<Field as={Radio} type="radio" name="defence" value="0" />} control={<FastField as={Radio} type="radio" name="defence" value="0" />}
label="None" label="None"
/> />
{/* <Divider orientation="vertical" flexItem middle /> */} {/* <Divider orientation="vertical" flexItem middle /> */}
<FormControlLabel <FormControlLabel
control={<Field as={Radio} type="radio" name="defence" value="1" />} control={<FastField as={Radio} type="radio" name="defence" value="1" />}
label="Poor" label="Poor"
/> />
<FormControlLabel <FormControlLabel
control={<Field as={Radio} type="radio" name="defence" value="2" />} control={<FastField as={Radio} type="radio" name="defence" value="2" />}
label="Good" label="Good"
/> <FormControlLabel /> <FormControlLabel
control={<Field as={Radio} type="radio" name="defence" value="3" />} control={<FastField as={Radio} type="radio" name="defence" value="3" />}
label="Exceptional" label="Exceptional"
/> />
</RadioGroup> </RadioGroup>
@@ -225,7 +226,7 @@ const InputPage = () => {
</Grid> </Grid>
<Grid item> <Grid item>
<FormControlLabel <FormControlLabel
control={<Field as={Checkbox} type="checkbox" name="disabled" />} control={<FastField as={Checkbox} type="checkbox" name="disabled" />}
label="Disabled" label="Disabled"
/> />
</Grid> </Grid>
@@ -233,13 +234,13 @@ const InputPage = () => {
<div /> <div />
<Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}> <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
<Grid item> <Grid item>
<Field type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="What they did Well" /> <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="What they did Well" />
</Grid> </Grid>
<Grid item> <Grid item>
<Field type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="What they struggled with" /> <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="What they struggled with" />
</Grid> </Grid>
<Grid item> <Grid item>
<Field type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="What they can't do" /> <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="What they can't do" />
</Grid> </Grid>
</Grid> </Grid>
<div /> <div />
@@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Formik, Field, Form, useFormikContext } from "formik"; import { Formik, FastField, Form, useFormikContext } from "formik";
import { import {
TextField, TextField,
Button, Button,
@@ -19,7 +19,7 @@ import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
const InputNumberField = (props) => { const InputNumberField = (props) => {
const { values, setFieldValue } = useFormikContext(); const { values, setFieldValue } = useFormikContext();
return ( return (
<Field <FastField
type="number" type="number"
as={TextField} as={TextField}
name={props.name} name={props.name}