formik#FieldArrayRenderProps TypeScript Examples

The following examples show how to use formik#FieldArrayRenderProps. 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: StaticIpHostsArray.tsx    From assisted-ui-lib with Apache License 2.0 6 votes vote down vote up 
StaticIpHostsArray = <HostFieldType,>({ ...props }: HostArrayProps<HostFieldType>) => {
  const renderHosts = React.useCallback(
    (arrayRenderProps: FieldArrayRenderProps) => (
      <Hosts {...Object.assign(props, arrayRenderProps)} />
    ),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  return <FieldArray name={fieldName} render={renderHosts} />;
}
Example #2
Source File: SQFormInclusionList.stories.tsx    From SQForm with MIT License 5 votes vote down vote up 
defaultArgs = {
  name: 'friends',
  selectAllData: names,
  selectAllContainerProps: {
    style: {
      padding: '0 16px',
    },
  },
  selectAllProps: {
    label: 'ALL THE PEEPS',
  },
  children: (arrayHelpers: FieldArrayRenderProps) => {
    const {values} = arrayHelpers.form;
    return (
      <Grid
        container
        direction="column"
        wrap="nowrap"
        style={{
          height: 200,
          overflow: 'auto',
          padding: '0 16px',
        }}
      >
        {names.map((name) => {
          return (
            <Grid item key={name}>
              <SQFormInclusionListItem
                name="friends"
                label={name}
                isChecked={values?.friends?.includes(name)}
                onChange={(e) => {
                  if (e.target.checked) {
                    arrayHelpers.push(name);
                  } else {
                    const idx = values.friends.indexOf(name);
                    arrayHelpers.remove(idx);
                  }
                }}
              />
            </Grid>
          );
        })}
      </Grid>
    );
  },
}
Example #3
Source File: OptionSet.tsx    From amplication with Apache License 2.0 5 votes vote down vote up 
OptionSetOptions = ({
  form,
  name,
  remove,
  replace,
  label,
}: {
  label: string;
} & FieldArrayRenderProps) => {
  const value = get(form.values, name) || [];
  const [push, hasNew] = useVirtualPush(value);

  const errors = useMemo(() => {
    const error = getIn(form.errors, name);
    if (typeof error === "string") return error;
    return null;
  }, [form.errors, name]);

  const options = hasNew ? [...value, {}] : value;

  return (
    <div>
      <h3>{label}</h3>
      {errors && <div className="option-set__error-message">{errors}</div>}
      {options.map((option: OptionItem, index: number) => (
        <OptionSetOption
          key={index}
          index={index}
          onChange={replace}
          onRemove={remove}
          name={name}
        />
      ))}
      <Button onClick={push} buttonStyle={EnumButtonStyle.Clear}>
        <Icon icon="plus" />
        Add option
      </Button>
    </div>
  );
}
Example #4
Source File: SQForm.stories.tsx    From SQForm with MIT License 4 votes vote down vote up 
formWithInclusionlist = (): JSX.Element => {
  return (
    <Card raised style={{padding: 16}}>
      <SectionHeader title="Friends" />
      <SQForm
        // the property you want to store the array of checked items determines the `name` prop below
        initialValues={MOCK_FORM_FOR_CHECKBOX_GROUP}
        onSubmit={handleSubmit}
        muiGridProps={{spacing: 4}}
      >
        {/* the group's `name` string should always match the item's `name` string */}
        <SQFormInclusionList
          name="friends"
          useSelectAll={true}
          selectAllData={names} // whatever you'd want 'select all' to include
          selectAllContainerProps={{
            // MUI Grid container props, plus a style prop if you're feeling fancy
            direction: 'column',
            wrap: 'nowrap',
            style: {
              padding: '16px 16px 0 16px',
            },
          }}
          selectAllProps={
            // any props that a SQFormInclusionListItem accepts
            // realistically, these would only include `isDisabled`, `size`, `label`,
            {
              label: 'ALL THE PEEPS',
            }
          }
        >
          {(arrayHelpers: FieldArrayRenderProps): JSX.Element => {
            const {values} = arrayHelpers.form;
            return (
              <Grid
                container
                direction="column"
                wrap="nowrap"
                style={{
                  height: 200,
                  overflow: 'auto',
                  padding: '0 16px',
                }}
              >
                {names.map((name) => {
                  return (
                    <Grid item key={name}>
                      <SQFormInclusionListItem
                        name="friends"
                        label={name}
                        isChecked={values.friends.includes(name)}
                        onChange={(e) => {
                          if (e.target.checked) {
                            arrayHelpers.push(name);
                          } else {
                            const idx = values.friends.indexOf(name);
                            arrayHelpers.remove(idx);
                          }
                        }}
                      />
                    </Grid>
                  );
                })}
              </Grid>
            );
          }}
        </SQFormInclusionList>
        <Grid item sm={12}>
          <Grid container justifyContent="space-between">
            <SQFormResetButtonWithConfirmation
              variant="outlined"
              confirmationContent="You are about to reset this form. Any unsaved info for this customer will be removed"
            >
              RESET
            </SQFormResetButtonWithConfirmation>
            <SQFormButton>Submit</SQFormButton>
          </Grid>
        </Grid>
      </SQForm>
    </Card>
  );
}