formik#FieldProps TypeScript Examples
The following examples show how to use
formik#FieldProps.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: formik.tsx From abacus with GNU General Public License v2.0 | 6 votes |
|
/**
* Wraps a formik field component transforming the value in and out.
* @param inputComponent The component to wrap
* @param outerToInner
* @param innerToOuter
*/
export function formikFieldTransformer<Props extends FieldProps<string>>(
// eslint-disable-next-line @typescript-eslint/naming-convention
InputComponent: React.ComponentType<Props>,
outerToInner: (outerValue: string) => string,
innerToOuter: (innerValue: string) => string,
): React.ElementType {
return (props: Props) => {
const {
form: { setFieldValue },
field: { name, value: outerValue },
} = props
// This smoothes things out and allows decimal points etc
// (Allowing many-to-one of inner to outer)
const [lastInnerValue, setLastInnerValue] = useState<string>(outerToInner(outerValue))
const value = outerValue === innerToOuter(lastInnerValue) ? lastInnerValue : outerToInner(outerValue)
const onChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
setLastInnerValue(event.target.value)
setFieldValue(name, innerToOuter(event.target.value))
},
[setFieldValue, name],
)
return <InputComponent {...props} {...{ onChange, value }} />
}
}
Example #2
| Source File: CommentForm.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 6 votes |
|
CommentForm: React.FC<CommentFormProps> = ({ transactionId, transactionComment }) => {
const classes = useStyles();
const initialValues = { content: "" };
return (
<div>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
transactionComment({ transactionId, ...values });
}}
>
{() => (
<Form className={classes.form}>
<Field name="content">
{({ field, meta }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
id={`transaction-comment-input-${transactionId}`}
type="text"
placeholder="Write a comment..."
inputProps={{ "data-test": `transaction-comment-input-${transactionId}` }}
error={meta.touched && Boolean(meta.error)}
helperText={meta.touched ? meta.error : ""}
{...field}
/>
)}
</Field>
</Form>
)}
</Formik>
</div>
);
}
Example #3
| Source File: index.tsx From slice-machine with Apache License 2.0 | 6 votes |
|
SelectReviewComponent = ({ field, form }: FieldProps) => {
return (
<Box sx={{ mb: 3 }}>
{ratingSelectable.map((rating, index) => (
<Button
variant="secondary"
type="button"
key={index}
onClick={() => form.setFieldValue("rating", rating)}
className={field.value === rating ? "selected" : ""}
sx={{
"&:not(:last-of-type)": {
mr: 1,
},
"&.selected": {
backgroundColor: "code.gray",
color: "white",
},
}}
>
{rating}
</Button>
))}
</Box>
);
}
Example #4
| Source File: formik.test.tsx From abacus with GNU General Public License v2.0 | 5 votes |
|
describe('utils/formik.ts module', () => {
describe('formikFieldTransformer', () => {
it('transforms a field', async () => {
let triggerChange: (event: React.ChangeEvent<string>) => void = () => null
let innerValue: unknown = null
function Field(props: FieldProps<string>) {
triggerChange = (event: React.ChangeEvent<string>) => {
// @ts-ignore
props.onChange(event)
}
// @ts-ignore
innerValue = props.value
return null
}
const TransformedField = formikFieldTransformer(
Field,
(x) => String(Number(x) * 100),
(x) => String(Number(x) / 100),
)
let outerValue = '0'
const setFieldValue = jest.fn((_name, value: string) => {
outerValue = value
})
function getFieldProps(outerValue: string) {
return {
form: { setFieldValue },
field: { name: 'name', value: outerValue },
}
}
// @ts-ignore
const { rerender } = render(<TransformedField {...getFieldProps(outerValue)} />)
expect(innerValue).toBe('0')
await act(async () => {
// @ts-ignore
triggerChange({ target: { value: '1' } })
})
expect(outerValue).toBe('0.01')
expect(_.last(setFieldValue.mock.calls)).toEqual(['name', '0.01'])
// @ts-ignore
rerender(<TransformedField {...getFieldProps(outerValue)} />)
expect(innerValue).toBe('1')
})
})
})
Example #5
| Source File: BankAccountForm.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 4 votes |
|
BankAccountForm: React.FC<BankAccountFormProps> = ({
userId,
createBankAccount,
onboarding,
}) => {
const history = useHistory();
const classes = useStyles();
const initialValues: BankAccountPayload = {
userId,
bankName: "",
accountNumber: "",
routingNumber: "",
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
createBankAccount({ ...values, userId });
if (!onboarding) {
history.push("/bankaccounts");
}
}}
>
{({ isValid, isSubmitting }) => (
<Form className={classes.form} data-test="bankaccount-form">
<Field name="bankName">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"bankaccount-bankName-input"}
type="text"
placeholder="Bank Name"
data-test={"bankaccount-bankName-input"}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="routingNumber">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"bankaccount-routingNumber-input"}
type="text"
placeholder="Routing Number"
data-test={"bankaccount-routingNumber-input"}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="accountNumber">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"bankaccount-accountNumber-input"}
type="text"
placeholder="Account Number"
data-test={"bankaccount-accountNumber-input"}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Grid container spacing={2} direction="row" justify="flex-start" alignItems="flex-start">
<Grid item>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
data-test="bankaccount-submit"
disabled={!isValid || isSubmitting}
>
Save
</Button>
</Grid>
</Grid>
</Form>
)}
</Formik>
);
}
Example #6
| Source File: SignInForm.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 4 votes |
|
SignInForm: React.FC<Props> = ({ authService }) => {
const classes = useStyles();
const [authState, sendAuth] = useService(authService);
const initialValues: SignInPayload = {
username: "",
password: "",
remember: undefined,
};
const signInPending = (payload: SignInPayload) => sendAuth("LOGIN", payload);
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
{authState.context?.message && (
<Alert data-test="signin-error" severity="error" className={classes.alertMessage}>
{authState.context.message}
</Alert>
)}
<div>
<RWALogo className={classes.logo} />
</div>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting }) => {
setSubmitting(true);
signInPending(values);
}}
>
{({ isValid, isSubmitting }) => (
<Form className={classes.form}>
<Field name="username">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
fullWidth
id="username"
label="Username"
type="text"
autoFocus
data-test="signin-username"
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="password">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
fullWidth
label="Password"
type="password"
id="password"
data-test="signin-password"
error={touched && value !== initialValue && Boolean(error)}
helperText={touched && value !== initialValue && touched ? error : ""}
{...field}
/>
)}
</Field>
<FormControlLabel
control={
<Field name={"remember"}>
{({ field }: FieldProps) => {
return <Checkbox color="primary" data-test="signin-remember-me" {...field} />;
}}
</Field>
}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
data-test="signin-submit"
disabled={!isValid || isSubmitting}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
{/*<Link to="/forgotpassword">Forgot password?</Link>*/}
</Grid>
<Grid item>
<Link data-test="signup" to="/signup">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Form>
)}
</Formik>
</div>
<Box mt={8}>
<Footer />
</Box>
</Container>
);
}
Example #7
| Source File: SignUpForm.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 4 votes |
|
SignUpForm: React.FC<Props> = ({ authService }) => {
const classes = useStyles();
const [, sendAuth] = useService(authService);
const initialValues: SignUpPayload & { confirmPassword: string } = {
firstName: "",
lastName: "",
username: "",
password: "",
confirmPassword: "",
};
const signUpPending = (payload: SignUpPayload) => sendAuth("SIGNUP", payload);
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<div>
<RWALogo className={classes.logo} />
</div>
<Typography component="h1" variant="h5" data-test="signup-title">
Sign Up
</Typography>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting, setFieldValue }) => {
setSubmitting(true);
signUpPending(values);
}}
>
{({ isValid, isSubmitting, dirty }) => (
<Form className={classes.form}>
<Field name="firstName">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="firstName"
label="First Name"
type="text"
autoFocus
data-test="signup-first-name"
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="lastName">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="lastName"
label="Last Name"
type="text"
data-test="signup-last-name"
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="username">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="username"
label="Username"
type="text"
data-test="signup-username"
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="password">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
label="Password"
type="password"
id="password"
data-test="signup-password"
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="confirmPassword">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
label="Confirm Password"
id="confirmPassword"
data-test="signup-confirmPassword"
type="password"
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
data-test="signup-submit"
disabled={!isValid || isSubmitting}
>
Sign Up
</Button>
<Grid container>
<Grid item>
<Link to="/signin">{"Have an account? Sign In"}</Link>
</Grid>
</Grid>
</Form>
)}
</Formik>
</div>
<Box mt={8}>
<Footer />
</Box>
</Container>
);
}
Example #8
| Source File: TransactionCreateStepTwo.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 4 votes |
|
TransactionCreateStepTwo: React.FC<TransactionCreateStepTwoProps> = ({
receiver,
sender,
createTransaction,
showSnackbar,
}) => {
const classes = useStyles();
const [transactionType, setTransactionType] = useState<string>();
const initialValues: FormValues = {
amount: "",
description: "",
senderId: sender.id,
receiverId: receiver.id,
};
return (
<Paper className={classes.paper} elevation={0}>
<Box display="flex" height={200} alignItems="center" justifyContent="center">
<Grid container direction="column" justify="flex-start" alignItems="center">
<Grid item>
<Avatar src={receiver.avatar} />
</Grid>
<Grid item>
<Typography component="h2" variant="h6" color="primary" gutterBottom>
{receiver.firstName} {receiver.lastName}
{transactionType}
</Typography>
</Grid>
</Grid>
</Box>
<Container maxWidth="xs">
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
validateOnMount={true}
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
// reset transactionType
setTransactionType(undefined);
createTransaction({ transactionType, ...values });
showSnackbar({
severity: "success",
message: "Transaction Submitted!",
});
}}
>
{({ isValid, isSubmitting }) => (
<Form className={classes.form} data-test="transaction-create-form">
<Field name="amount">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
autoFocus
id={"transaction-create-amount-input"}
type="text"
placeholder="Amount"
data-test={"transaction-create-amount-input"}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
InputProps={{
inputComponent: NumberFormatCustom as any,
inputProps: { id: "amount" },
}}
{...field}
/>
)}
</Field>
<Field name="description">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"transaction-create-description-input"}
type="text"
placeholder="Add a note"
data-test={"transaction-create-description-input"}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Grid container spacing={2} direction="row" justify="center" alignItems="center">
<Grid item>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
data-test="transaction-create-submit-request"
disabled={!isValid || isSubmitting}
onClick={() => setTransactionType("request")}
>
Request
</Button>
</Grid>
<Grid item>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
data-test="transaction-create-submit-payment"
disabled={!isValid || isSubmitting}
onClick={() => setTransactionType("payment")}
>
Pay
</Button>
</Grid>
</Grid>
</Form>
)}
</Formik>
</Container>
</Paper>
);
}
Example #9
| Source File: UserSettingsForm.tsx From End-to-End-Web-Testing-with-Cypress with MIT License | 4 votes |
|
UserSettingsForm: React.FC<UserSettingsProps> = ({ userProfile, updateUser }) => {
const classes = useStyles();
const initialValues: UserSettingsPayload = {
firstName: userProfile.firstName,
lastName: userProfile.lastName,
email: userProfile.email,
phoneNumber: userProfile.phoneNumber,
defaultPrivacyLevel: userProfile.defaultPrivacyLevel,
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
updateUser({ id: userProfile.id, ...values });
setSubmitting(false);
}}
>
{({ isValid, isSubmitting }) => (
<Form className={classes.form} data-test="user-settings-form">
<Field name="firstName">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"user-settings-firstName-input"}
type="text"
placeholder="First Name"
inputProps={{ "data-test": "user-settings-firstName-input" }}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="lastName">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"user-settings-lastName-input"}
type="text"
placeholder="Last Name"
inputProps={{ "data-test": "user-settings-lastName-input" }}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="email">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"user-settings-email-input"}
type="text"
placeholder="Email"
inputProps={{ "data-test": "user-settings-email-input" }}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Field name="phoneNumber">
{({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
<TextField
variant="outlined"
margin="dense"
fullWidth
required
id={"user-settings-phoneNumber-input"}
type="text"
placeholder="Phone Number"
inputProps={{ "data-test": "user-settings-phoneNumber-input" }}
error={(touched || value !== initialValue) && Boolean(error)}
helperText={touched || value !== initialValue ? error : ""}
{...field}
/>
)}
</Field>
<Grid container spacing={2} direction="row" justify="flex-start" alignItems="flex-start">
<Grid item>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
data-test="user-settings-submit"
disabled={!isValid || isSubmitting}
>
Save
</Button>
</Grid>
</Grid>
</Form>
)}
</Formik>
);
}
