Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

addInputType not available anymore #167

Open
javaknight1 opened this issue Aug 26, 2019 · 1 comment
Open

addInputType not available anymore #167

javaknight1 opened this issue Aug 26, 2019 · 1 comment

Comments

@javaknight1
Copy link

We have a tool that is dependent on an older version react-formal that includes the function addInputTypes to add the ability to add custom form types.

For the later versions that don't include addInputTypes, is there something similar? How do I transition my code from using addInputTypes? How do I get around this?

@jquense
Copy link
Owner

jquense commented Aug 26, 2019

There isn't any equivalent API now, but you can achieve effectively the same thing by wrapping the Field Component and using it's renderProp. We've found thhat this is ultimately more flexible and involves a good bit less code in the library (and for consumers).

Here is an example of how we do it. You can fairly easily imaging keeping a type map like the old API if you prefer that approach as well.

import BaseForm from 'react-formal';

import FormCheck from './FormCheck';
import FormControl from './FormControl';
import FormControlFile from './FormControlFile';

const AppFormField = React.forwardRef(({ children, as, ...props }, ref) => (
  <BaseForm.Field ref={ref} {...props}>
    {innerProps => {
      if (typeof children === 'function') return children(innerProps);

      const { ...fieldProps } = innerProps;
      const { type } = fieldProps;
      let Input = as;

      if (!Input) {
        if (/checkbox|radio/.test(type)) {
          Input = FormCheck;
          fieldProps.checked = fieldProps.value;
          fieldProps.value = props.value;
        } else if (type === 'file') {
          Input = FormControlFile;
        } else {
          Input = FormControl;
        }
      }

      return <Input {...fieldProps}>{children}</Input>;
    }}
  </BaseForm.Field>
));

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants