Demo integrating form components with ReduxForm

It would be super helpful to have a few canonical examples of how to integrate the form components with ReduxForm.

Additionally, it may be worth considering adding some ReduxForm HOC to wrap the components:

// Wrapped component
export function ReduxFormTextInput(props) {
  const {
    input: {onChange, value},
    placeholder,
    disabled,
    ...otherProps
  } = props;
  return (
    <TextInput
      onChange={onChange}
      value={value}
      placeholder={placeholder}
      disabled={disabled}
      {...otherProps}
    />
  );
}

// Example use:
<Field
  component={ReduxFormTextInput}
  placeholder="placeholder"
  name="fieldName"
/>

If BaseUI doesn’t expose these wrappers, I think that each project that wants to integrate with ReduxForm will need to reimplement this boilerplate.

I wanted to kick off a discussion of where these examples/wrappers belong. Maybe it makes more sense to create a separate baseui-reduxform repo to prevent bleeding concerns?

[caseyhebebrand]

Here is an example of BaseUI’s stateful input wrapper that we use with redux-forms. This wrapper accepts all redux-form Field props and any props that the StatefulInput is expecting.

type Props = {
  disabled?: boolean,
  value?: string,
  placeholder?: string,
  label?: string,
  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => void,
  $style?: { [key: string]: any },
};

function ReduxFormTextInput(props: ReduxFormInputProps) {
  const {
    input: { value, onChange },
    meta: { touched, error },
    label,
    placeholder,
    disabled,
    $style,
    ...otherProps
  } = props;
  const shouldShowError = touched && error;

  return (
    <Main $style={$style}>
      <Label>{label}</Label>
      <Container>
        <StatefulInput
          disabled={disabled}
          placeholder={placeholder}
          value={value}
          onChange={onChange}
          error={shouldShowError}
          {...otherProps}
        />
      </Container>
      {shouldShowError && <Error>{error}</Error>}
    </Main>
  );
}

This is how we would utilize the above ReduxFormTextInput component in a redux-form Field:

<Field
      name={'callbackName'}
       label={'Callback name'}
       component={ReduxFormTextInput}
       required={false}
       placeholder={'Enter a name'}
        inputRef={el => (this.callbackNameRef = el)}
        $style={{
             marginLeft: layout.padding.large,
         }}
       validate=[validateCallbackName]
 />

You can see that we pass any of the BaseUI props (overrides, placeholder, etc.) directly into the Field. The wrapper layer utilizes meta for error handling, and directly utilizes redux-form value and onChange.

If you want your field to populate with data, all you need to do is:

1. Pass initialValues prop into your form component… Each key should correlate to the name of your field. (Ex: initialValues: { callbackName: 'Casey' }).
2. Determine which prop in BaseUI accepts the initial value, and pass value from the wrapper component to that prop.

  const {
    input: { value, onChange },
  } = props;

<ReduxFormTextInput initialState={{ value: 'Casey' }}/>

[leyanlo]

@Warbring3r’s solution was super helpful, but we ran into issues around redux-form’s default value being an empty string: https://redux-form.com/8.2.0/docs/api/field.md/#-code-input-value-any-code-

This ended up being incompatible with the Base Select component, and we would not see the placeholder (#1252). We also removed the inline function declaration to avoid memory leaks. For those who might find this helpful, our HOC ended up looking like this:

// @flow
import * as React from 'react';
import {Select} from 'baseui/select';
import type {FieldProps} from 'redux-form';
import type {PropsT} from 'baseui/select';

type ReduxFormSelectProps = FieldProps & PropsT;
export class ReduxFormSelect extends React.PureComponent<ReduxFormSelectProps> {
  onChange = ({
    value: v,
  }: {
    value: $PropertyType<$PropertyType<FieldProps, 'input'>, 'value'>,
  }) => this.props.input.onChange(v);

  render() {
    const {
      input: {value},
      ...restProps
    } = this.props;
    return (
      <Select
        onChange={this.onChange}
        {...(value !== '' ? {value} : {})}
        {...restProps}
      />
    );
  }
}

And our usage looks like:

<Field
  component={ReduxFormSelect}
  name="equipment"
  options={[
    {id: 'van', label: 'Dry Van'},
    {id: 'reefer', label: 'Reefer'},
  ]}
/>