Default Bindings


Simple Usage

The Default Bindings can be used on any input component using the fields bind() method:

export default observer(({ field, type = 'text' }) => (
  <div>
    <input type={type} {...field.bind()} />
  </div>
));


Properties Overwrite

The bind() method will overwrite any component property, just pass to it an object with all properties you want to overwrite:

export default observer(({ field, type = 'password', placeholder = 'Insert Password' }) => (
  <div>
    <input {...field.bind({ type, placeholder })} />
  </div>
));

When passing properties to the bind() method, the field properties which are defined on form initialization will be treated as fallbacks (until you implement a new Template).

IMPORTANT!

The props passed to the bind() method will not mutate the package's store but only your component.

Do this only for handling edge cases, as it's not the default behavior to handle field props, define fields normally instead.

We are done!




WARNING

The following code is BUILT-IN and it's just an explaination on how the bindings modes works, maybe you DO NOT need to reimplement it!

You can eventually reimplement it if you need more flexibility registering a new binding with the default key. Check out how to create Custom Bindings.

BUILT-IN default Template & Rewriter

Here you can see the structure of the default Template & Rewriter.

The default rewriter define which component properties has assigned to the field property key

Default Rewriter

export default {
  default: {
    id: 'id',
    name: 'name',
    type: 'type',
    value: 'value',
    label: 'label',
    placeholder: 'placeholder',
    disabled: 'disabled',
    onChange: 'onChange',
    onBlur: 'onBlur',
    onFocus: 'onFocus',
    autoFocus: 'autoFocus',
  }
}

In every Rewriter the props passed to the bind() method always takes precedence on the field properties.

Then these keys are assigned to the template which will handle the props values priorities and fallbacks:

Default Template

export default {
  default: ({ $try, field, props, keys }) => ({
    [keys.id]: $try(props.id, field.id),
    [keys.name]: $try(props.name, field.name),
    [keys.type]: $try(props.type, field.type),
    [keys.value]: $try(props.value, field.value),
    [keys.label]: $try(props.label, field.label),
    [keys.placeholder]: $try(props.placeholder, field.placeholder),
    [keys.disabled]: $try(props.disabled, field.disabled),
    [keys.onChange]: $try(props.onChange, field.onChange),
    [keys.onBlur]: $try(props.onBlur, field.onBlur),
    [keys.onFocus]: $try(props.onFocus, field.onFocus),
    [keys.autoFocus]: $try(props.autoFocus, field.autoFocus),
  }),
}

$try() is a small helper function which takes unlimited arguments in input, it returns the first defined.

The function takes in input an object with the following props:

  • the field: which is the current field, you can retrieve the fields properites form it.
  • the props: which are the properties passed from the components as fallback.
  • the keys: which contains the properties defined in the rewriter that will match the components properties.

results matching ""

    No results matching ""