formik#InjectedFormikProps TypeScript Examples
The following examples show how to use
formik#InjectedFormikProps.
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: LogContactForm.tsx From Frontend with MIT License | 4 votes |
|
InnerForm: React.FC<InjectedFormikProps<
LogContactFormProps,
FormValues
>> = (props) => {
const {
contactOptions,
dirty,
errors,
isSubmitting,
isValid,
setFieldValue,
touched
} = props;
const contactWithOptions: ContactWith[] = contactOptions.map(
(contactUid: string) => {
const { person } = withPerson({
uid: contactUid
});
return {
uid: contactUid,
displayName: person ? person.displayName : ''
};
}
);
return (
<Form>
<Stack spacing={6}>
<Box>
<Field name="entryDate">
{({ field }) => (
<FormControl
isInvalid={errors[field.name] && touched[field.name]}
>
<FormLabel htmlFor={field.name}>
<FormattedMessage id="LogForm.Entry Date" />
</FormLabel>
<Box>
<DatePicker
minDate={new Date('2019-11-01')}
calendarIcon={<MdToday />}
clearIcon={null}
onChange={(v) => setFieldValue('entryDate', v)}
value={field.value}
/>
</Box>
<FormErrorMessage>
{errors.entryDate}
</FormErrorMessage>
</FormControl>
)}
</Field>
</Box>
<Box>
<Field name="contactWith">
{({ field }) => (
<FormControl
isInvalid={errors[field.name] && touched[field.name]}
>
<FormLabel htmlFor={field.name}>
<FormattedMessage id="LogForm.Who did you meet?" />
</FormLabel>
<Select
getOptionLabel={(o: ContactWith) => o.displayName}
getOptionValue={(o: ContactWith) => o.uid}
defaultValue={field.value}
isMulti
name={field.name}
options={contactWithOptions}
onChange={(option: Option) => {
setFieldValue(field.name, option);
}}
/>
<FormHelperText>
<FormattedMessage
id="LogForm.cant-find"
values={{
// eslint-disable-next-line react/display-name
a: (...chunks) => (
<Link
color="brand.orange"
to="/me/share/"
as={IntlLink}
>
{chunks}
</Link>
)
}}
/>
</FormHelperText>
<FormErrorMessage>
{errors.entryDate}
</FormErrorMessage>
</FormControl>
)}
</Field>
</Box>
<Box>
<Button
mt={4}
isDisabled={!(isValid && dirty)}
variantColor="teal"
isLoading={isSubmitting}
type="submit"
>
<FormattedMessage id="LogForm.Save" />
</Button>
</Box>
</Stack>
</Form>
);
}
Example #2
| Source File: ProfileView.tsx From Frontend with MIT License | 4 votes |
|
InnerForm: React.FC<InjectedFormikProps<ProfileFormProps, FormValues>> = (
props
) => {
const intl = useIntl();
const { setFieldValue, isValid, dirty, values, initialValues } = props;
return (
<Form>
<PageHeader
heading={intl.formatMessage({ id: 'ProfileView.heading' })}
lead={intl.formatMessage({ id: 'ProfileView.lead' })}
/>
<RiskLevelIndicator uid="abc" />
<Box>
<PageHeader
heading={intl.formatMessage({
id: 'ProfileView.healthStatus.heading'
})}
lead={intl.formatMessage({
id: 'ProfileView.healthStatus.lead'
})}
/>
</Box>
<Stack spacing={6}>
<Field name="healthStatus">
{() => (
<FormControl>
<FormLabel>
{intl.formatMessage({
id: 'ProfileView.healthStatus.label'
})}
</FormLabel>
<Select
defaultValue={props.values.healthStatus}
onChange={(e) => {
//check if status has changed
setFieldValue('healthStatus', e.currentTarget.value);
}}
>
<option value="TOTALLY_FINE">
{intl.formatMessage({ id: 'ProfileView.fine' })}
</option>
<option value="SHOWING_SYMPTOMS">
{intl.formatMessage({ id: 'ProfileView.symptoms' })}
</option>
<option value="TESTED_POSITIVE">
{intl.formatMessage({ id: 'ProfileView.positive' })}
</option>
</Select>
</FormControl>
)}
</Field>
{/* Switch for users's quarantine status */}
<Field name="inQuarantine">
{() => (
<FormControl>
<Switch
color="orange"
defaultIsChecked={props.values.inQuarantine}
size="lg"
onChange={(e) => {
setFieldValue('inQuarantine', !props.values.inQuarantine);
}}
/>
<FormLabel mx={2}>
<FormattedMessage id="ProfileView.inQuarantine" />
</FormLabel>
</FormControl>
)}
</Field>
<Box>
<Button
isDisabled={(dirty && !isValid) || values === initialValues}
mt={4}
variantColor="teal"
type="submit"
>
<FormattedMessage id="ProfileView.notify" />
</Button>
</Box>
</Stack>
</Form>
);
}
Example #3
| Source File: SettingsForm.tsx From Frontend with MIT License | 4 votes |
|
InnerForm: React.FC<InjectedFormikProps<
SettingsFormProps,
FormValues
>> = (props) => {
const {
touched,
errors,
isSubmitting,
setFieldValue,
initialDisplayName
} = props;
const intl = useIntl();
return (
<Form>
<Stack spacing={6}>
<Box>
<Field name="displayName">
{(field: { name: string }) => (
<FormControl
isInvalid={errors[field.name] && touched[field.name]}
>
<FormLabel htmlFor={field.name}>
{intl.formatMessage({
id: 'Settings.Display Name'
})}
</FormLabel>
<Input value={initialDisplayName} isReadOnly />
<FormHelperText id="email-helper-text">
{intl.formatMessage({ id: 'Settings.help' })}
</FormHelperText>
</FormControl>
)}
</Field>
</Box>
<Box>
<Field name="preferences">
{() => (
<FormControl>
<FormLabel>
{intl.formatMessage({
id: 'Settings.Notifications Prefs'
})}
</FormLabel>
<CheckboxGroup
name="preferences"
onChange={() => {
// check if sms deselected and sms is available, clear sms number
if (
props.values.preferences.contact_via_sms &&
props.values.smsNumber
) {
setFieldValue('smsNumber', '');
}
setFieldValue(
'preferences.contact_via_sms',
!props.values.preferences?.contact_via_sms
);
}}
>
<Checkbox isDisabled defaultIsChecked>
{intl.formatMessage({ id: 'Settings.Email' })}
</Checkbox>
<Checkbox
defaultIsChecked={props.values.preferences?.contact_via_sms}
>
{intl.formatMessage({ id: 'Settings.SMS' })}
{props.values.preferences?.contact_via_sms ? (
<Field name="smsNumber">
{({ field }) => (
<FormControl>
<InputGroup>
<InputLeftAddon>"+"</InputLeftAddon>
<Input
type="tel"
roundedLeft="0"
defaultValue={props.initialSmsNumber}
placeholder="44XXXXXX"
{...field}
/>
</InputGroup>
</FormControl>
)}
</Field>
) : (
''
)}
</Checkbox>
</CheckboxGroup>
</FormControl>
)}
</Field>
</Box>
<Box>
<Button
mt={4}
variantColor="teal"
isLoading={isSubmitting}
type="submit"
>
{intl.formatMessage({ id: 'Settings.save' })}
</Button>
</Box>
</Stack>
</Form>
);
}
