Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 1x 1x 1x | import React, { useEffect, useRef } from "react"; import { makeStyles } from "@mui/styles"; import { Field, Form, Formik, FormikProps, FormikValues } from "formik"; import { TextField } from "formik-mui"; import { APIProfile } from "../types"; import dayjs from "dayjs"; import { omitBy, isNull } from "lodash"; interface Props { loading: boolean; savedValues?: APIProfile; } const initialValues: APIProfile = { username: "", name: "", email: "", company: "", location: "", created_on: "" }; const useStyles = makeStyles({ userForm: { padding: "2vh 2vw" } }); const UserForm: React.FC<Props> = ({ loading, savedValues }) => { const classes = useStyles(); const formikRef = useRef<FormikProps<FormikValues & APIProfile>>(null); useEffect(() => { const { current: currentRef } = formikRef; if (currentRef) { currentRef.setSubmitting(loading); } }, [loading]); return ( <div id="user-form" className={classes.userForm}> <Formik innerRef={formikRef} initialValues={{ ...initialValues, ...omitBy(savedValues, isNull) }} validateOnChange={false} onSubmit={(values: APIProfile) => {}} > {({ values }) => ( <Form> <Field fullWidth autoComplete="off" id="username" name="username" label="User Name" margin="normal" multiline rowsMax={4} component={TextField} /> <Field fullWidth autoComplete="off" id="name" name="name" label="Full Name" margin="normal" multiline rowsMax={4} component={TextField} /> <Field fullWidth autoComplete="off" id="email" name="email" label="Email ID" margin="normal" multiline rowsMax={4} component={TextField} /> <Field fullWidth autoComplete="off" id="company" name="company" label="Company" margin="normal" multiline rowsMax={4} component={TextField} /> <Field fullWidth autoComplete="off" id="location" name="location" label="Location" margin="normal" multiline rowsMax={4} component={TextField} /> <Field fullWidth autoComplete="off" id="joinedDate" name="joinedDate" defaultValue={ values.created_on ? dayjs(values.created_on).format("DD MMM YYYY") : "" } label="Joined Date" margin="normal" disabled component={TextField} /> </Form> )} </Formik> </div> ); }; export default UserForm; |