react-select#Option TypeScript Examples

The following examples show how to use react-select#Option. 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 vote down vote up 
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>
  );
}