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

feat: make typings for customInput generic #577

Merged
merged 1 commit into from
Dec 1, 2021
Merged

feat: make typings for customInput generic #577

merged 1 commit into from
Dec 1, 2021

Conversation

patsimm
Copy link
Contributor

@patsimm patsimm commented Sep 10, 2021

Describe the issue/change

We are using react-number-format together with material-ui. In our case we want to use the custumInput "TextField" but pass the prop: { size: "small" }.

When we do this we get the error:

No overload matches this call.
  Overload 1 of 2, '(props: NumberFormatProps | Readonly<NumberFormatProps>): NumberFormat', gave the following error.
    Type 'string' is not assignable to type 'number | undefined'.
  Overload 2 of 2, '(props: NumberFormatProps, context: any): NumberFormat', gave the following error.
    Type 'string' is not assignable to type 'number | undefined'.ts(2769)

The problem here is, that NumberFormatProps are typed to always extend InputAttributes. Where actually when we use a customInput there is no reason to pass InputAttributes. In that case we should be able to pass the props of the customInput.

As far as I understand this is how the actual logic works.

Add CodeSandbox link to illustrate the issue (If applicable)

https://codesandbox.io/s/beautiful-tess-eb5r6?file=/src/App.tsx

Describe the changes proposed/implemented in this PR

I updated the typings of NumberFormatProps to be generic. Now instead of always extending from InputAttributes the Props-Type of the component passed as customInput are extracted and added to the typing. Typescript is actually smart enought to this automatically.

I must say that I can not promise this does not introduce breaking changes for people that import and use the current typings. But in my opinion those generic typings are closer to how the component actually works.

Link Github issue if this PR solved an existing issue

#422

Example usage (If applicable)

See the updated typings/number_format.spec.tsx c9e0627#diff-9d8e8f0103177d8c0688a00a41889511f17c18bfa6150b4d4922aa40fc87825aR7

@s-yadav
Copy link
Owner

s-yadav commented Dec 1, 2021

Sorry for looking late into this. Looks great, thanks for PR.

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

Successfully merging this pull request may close these issues.

None yet

3 participants