From 5447b57ae5b693498460a9e8f40bd54da28e038e Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Tue, 25 Jan 2022 21:48:55 +0000 Subject: [PATCH 1/2] Refactor FormTextField to not require a HoC --- site/components/Form/FormTextField.test.tsx | 6 +- site/components/Form/FormTextField.tsx | 164 ++++++++++---------- site/components/SignIn/SignInForm.tsx | 4 +- 3 files changed, 82 insertions(+), 92 deletions(-) diff --git a/site/components/Form/FormTextField.test.tsx b/site/components/Form/FormTextField.test.tsx index 87653463c68ae..3cb02cdcbbf88 100644 --- a/site/components/Form/FormTextField.test.tsx +++ b/site/components/Form/FormTextField.test.tsx @@ -2,7 +2,7 @@ import { act, fireEvent, render, screen } from "@testing-library/react" import { useFormik } from "formik" import React from "react" import * as yup from "yup" -import { formTextFieldFactory, FormTextFieldProps } from "./FormTextField" +import { FormTextField, FormTextFieldProps } from "./FormTextField" namespace Helpers { export interface FormValues { @@ -11,8 +11,6 @@ namespace Helpers { export const requiredValidationMsg = "required" - const FormTextField = formTextFieldFactory() - export const Component: React.FC, "form" | "formFieldName">> = (props) => { const form = useFormik({ initialValues: { @@ -26,7 +24,7 @@ namespace Helpers { }), }) - return + return {...props} form={form} formFieldName="name" /> } } diff --git a/site/components/Form/FormTextField.tsx b/site/components/Form/FormTextField.tsx index db76173846a67..d8465ab4abac3 100644 --- a/site/components/Form/FormTextField.tsx +++ b/site/components/Form/FormTextField.tsx @@ -26,31 +26,31 @@ export interface FormFieldProps { */ export interface FormTextFieldProps extends Pick< - TextFieldProps, - | "autoComplete" - | "autoFocus" - | "children" - | "className" - | "disabled" - | "fullWidth" - | "helperText" - | "id" - | "InputLabelProps" - | "InputProps" - | "inputProps" - | "label" - | "margin" - | "multiline" - | "onChange" - | "placeholder" - | "required" - | "rows" - | "select" - | "SelectProps" - | "style" - | "type" - >, - FormFieldProps { + TextFieldProps, + | "autoComplete" + | "autoFocus" + | "children" + | "className" + | "disabled" + | "fullWidth" + | "helperText" + | "id" + | "InputLabelProps" + | "InputProps" + | "inputProps" + | "label" + | "margin" + | "multiline" + | "onChange" + | "placeholder" + | "required" + | "rows" + | "select" + | "SelectProps" + | "style" + | "type" + >, + FormFieldProps { /** * eventTransform is an optional transformer on the event data before it is * processed by formik. @@ -104,67 +104,61 @@ export interface FormTextFieldProps * ) * } */ -export const formTextFieldFactory = (): React.FC> => { - const component: React.FC> = ({ - children, - disabled, - displayValueOverride, - eventTransform, - form, - formFieldName, - helperText, - isPassword = false, - InputProps, - onChange, - type, - variant = "outlined", - ...rest - }) => { - const isError = form.touched[formFieldName] && Boolean(form.errors[formFieldName]) +export const FormTextField = ({ + children, + disabled, + displayValueOverride, + eventTransform, + form, + formFieldName, + helperText, + isPassword = false, + InputProps, + onChange, + type, + variant = "outlined", + ...rest +}: FormTextFieldProps): React.ReactElement => { + const isError = form.touched[formFieldName] && Boolean(form.errors[formFieldName]) - // Conversion to a string primitive is necessary as formFieldName is an in - // indexable type such as a string, number or enum. - const fieldId = String(formFieldName) + // Conversion to a string primitive is necessary as formFieldName is an in + // indexable type such as a string, number or enum. + const fieldId = String(formFieldName) - const Component = isPassword ? PasswordField : TextField - const inputType = isPassword ? undefined : type + const Component = isPassword ? PasswordField : TextField + const inputType = isPassword ? undefined : type - return ( - { - if (typeof onChange !== "undefined") { - onChange(e) - } + return ( + { + if (typeof onChange !== "undefined") { + onChange(e) + } - const event = e - if (typeof eventTransform !== "undefined") { - // TODO(Grey): Asserting the type as a string here is not quite - // right in that when an input is of type="number", the value will - // be a number. Type asserting is better than conversion for this - // reason, but perhaps there's a better way to do this without any - // assertions. - event.target.value = eventTransform(e.target.value) as string - } - form.handleChange(event) - }} - type={inputType} - value={displayValueOverride || form.values[formFieldName]} - > - {children} - - ) - } - - // Required when using an anonymous factory function - component.displayName = "FormTextField" - return component -} + const event = e + if (typeof eventTransform !== "undefined") { + // TODO(Grey): Asserting the type as a string here is not quite + // right in that when an input is of type="number", the value will + // be a number. Type asserting is better than conversion for this + // reason, but perhaps there's a better way to do this without any + // assertions. + event.target.value = eventTransform(e.target.value) as string + } + form.handleChange(event) + }} + type={inputType} + value={displayValueOverride || form.values[formFieldName]} + > + {children} + + ) +} \ No newline at end of file diff --git a/site/components/SignIn/SignInForm.tsx b/site/components/SignIn/SignInForm.tsx index 5cb71baca253d..b0fefdc45da41 100644 --- a/site/components/SignIn/SignInForm.tsx +++ b/site/components/SignIn/SignInForm.tsx @@ -6,7 +6,7 @@ import { useSWRConfig } from "swr" import * as Yup from "yup" import { Welcome } from "./Welcome" -import { formTextFieldFactory } from "../Form" +import { FormTextField } from "../Form" import * as API from "./../../api" import { LoadingButton } from "./../Button" @@ -25,8 +25,6 @@ const validationSchema = Yup.object({ password: Yup.string(), }) -const FormTextField = formTextFieldFactory() - const useStyles = makeStyles((theme) => ({ loginBtnWrapper: { marginTop: theme.spacing(6), From 0f26a37c156d21b9069d63a4697de940cf92dff9 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Tue, 25 Jan 2022 21:51:53 +0000 Subject: [PATCH 2/2] Fix formatting --- site/components/Form/FormTextField.tsx | 52 +++++++++++++------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/site/components/Form/FormTextField.tsx b/site/components/Form/FormTextField.tsx index d8465ab4abac3..34b0c083fe564 100644 --- a/site/components/Form/FormTextField.tsx +++ b/site/components/Form/FormTextField.tsx @@ -26,31 +26,31 @@ export interface FormFieldProps { */ export interface FormTextFieldProps extends Pick< - TextFieldProps, - | "autoComplete" - | "autoFocus" - | "children" - | "className" - | "disabled" - | "fullWidth" - | "helperText" - | "id" - | "InputLabelProps" - | "InputProps" - | "inputProps" - | "label" - | "margin" - | "multiline" - | "onChange" - | "placeholder" - | "required" - | "rows" - | "select" - | "SelectProps" - | "style" - | "type" - >, - FormFieldProps { + TextFieldProps, + | "autoComplete" + | "autoFocus" + | "children" + | "className" + | "disabled" + | "fullWidth" + | "helperText" + | "id" + | "InputLabelProps" + | "InputProps" + | "inputProps" + | "label" + | "margin" + | "multiline" + | "onChange" + | "placeholder" + | "required" + | "rows" + | "select" + | "SelectProps" + | "style" + | "type" + >, + FormFieldProps { /** * eventTransform is an optional transformer on the event data before it is * processed by formik. @@ -161,4 +161,4 @@ export const FormTextField = ({ {children} ) -} \ No newline at end of file +}