fix: types and options

[rafma0]

Hi, while trying your lib I noticed the 3rd param for registerWithMask wasn't getting the types correctly

I'm not sure its the best way to fix it, but I did it importing Inputmask to types.ts

Another thing is the options for react-hook-form were getting passed to inputmask, so I separated them to a 4th param

Hope those fixes are OK and thank you :)

[eduardoborges]

I really dont like to use 3 params funcion. Not provide an good development experience. The secound funcion are an merge from Inputmask options and hook-form options. We dont need that.

[rafma0]

I see but unless I'm missing something, I think you're merging only the types, and the params belonging to react-hook-form register are never really passed to it?

What I mean is, for example, it will auto complete options like setValueAs, valueAsNumber, valueAsDate, which belong to register, but if if pass them, it will have no effect.

with the original code (after we fix the types import), TS won't complain about this

{...registerWithMask(
  'price',
  'brl-currency',
  { rightAlign: false, autoUnmask: true, setValueAs: (val) => (val.replace(',', '.')) }
)}

but the setValueAs will have no effect

with the modified code, we could have something like

{...registerWithMask(
  'price',
  'brl-currency',
  { rightAlign: false, autoUnmask: true },
  { setValueAs: (val) => (val.replace(',', '.')) }
)}

It was the simplest way I could think without messing a lot with the original code.

Now let me explain how I use this specificaly. When I use a schema like Joi.number() for my price field, it validates numbers and strings that can be converted to numbers directly. So doing this is the simplest way to keep my schemas happy when I use commas for decimals, etc. I could also write a custom Joi validation, but passing setValueAs to register is simpler.

I guess what I don't understand is why join the options if you can't do anything with the joined options?

[eduardoborges]

Uh! Of course, make all sense to me now. But... this pr will be a break change :/

I think we can sure that will be a minor change.

[rafma0]

What if we keep the merged types and pass only setValueAs to registerFn for now?

const { setValueAs } = options || {};

const { ref, ...restRegister } = registerFn(fieldName, { setValueAs });

Most of the other RegisterOptions we can pass direct to the component anyway.

I also tried passing valueAsNumber and valueAsDate and TS started yelling at me, but I'm ok converting to Number inside onSubmit, etc.

[eduardoborges]

Uh, check my new change request.

[eduardoborges]

We can pass all the props to register, no problem.

Suggested change

	const { ref, ...restRegister } = registerFn(fieldName, { setValueAs });
	const { ref, ...restRegister } = registerFn(fieldName, options);

[eduardoborges]

Passing all props to Hook Form they works like a charm, ignoring the inputmask props.

[rafma0]

I didn't thought of passing everything to register as well :D

[eduardoborges]

You can remove that, of course.

[eduardoborges]

LGTM

[eduardoborges]

🎉 This PR is included in version 3.3.4 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀