foxhound87 / mobx-react-form

Reactive MobX Form State Management
https://foxhound87.github.io/mobx-react-form
MIT License
1.1k stars 129 forks source link

Simplify custom bindings (override default bindings template) #497

Closed rosieks closed 1 year ago

rosieks commented 5 years ago

I want to change way how name should be generated. As far as I understand I have to do something like that. First create binding template like this:

const formBindings = {
  'pathAsName': ({ $try, field, props }: any) => ({
    id: $try(props.id, field.id),
    name: $try(props.name, field.path),
    type: $try(props.type, field.type),
    value: $try(props.value, field.value),
    label: $try(props.label, field.label),
    placeholder: $try(props.placeholder, field.placeholder),
    disabled: $try(props.disabled, field.disabled),
    onChange: $try(props.onChange, field.onChange),
    onBlur: $try(props.onBlur, field.onBlur),
    onFocus: $try(props.onFocus, field.onFocus),
    autoFocus: $try(props.autoFocus, field.autoFocus),
  }),
};

Then apply it to all fields in my forms.

const bindings = {
   'field1': 'pathAsName',
   'field2': 'pathAsName',
   'field3': 'pathAsName',
   'field4': 'pathAsName',
   'field5': 'pathAsName',
   'field6': 'pathAsName',
   'field7': 'pathAsName',
};

It would be much more easier if I could provide just function that override existing one:

const formBindings = ({ $try, field, props}) => ({
   name: $try(props.name, field.path)
});
foxhound87 commented 5 years ago

Good point, I will think about a solution.