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: CSVReader typescript improvements | style object type casting refactoring #150

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

berkinanik
Copy link

@berkinanik berkinanik commented Feb 24, 2023

resolves #149

  • properly typed useCSVReader hook and CSVReader component.
  • updated examples on CSVReader usage.
  • style object type refactoring by removing unnecessary CSSProperties casting.
  • Additional fix on no console logs on local file examples on demo page.

might be considered as a breaking change proposal

Important parts are under: useCSVReader.tsx

@berkinanik
Copy link
Author

  • Generic element types (HTMLDivElement or HTMLButtonElement) used for root and clickable remove elements which allow getRemoveFileProps and getRootProps to be properly types are added for useCSVReader.
  • Return types are updated for the hook, ProgressBar and Remove components as ComponentType which allows proper prop intellisense while using the components.
  • Event handler functions are generically typed using that generic element type for proper event handler types and event types. No more explicit event type definition is required.
  • ParseResult fn is updated so result is properly typed. Its object attributes can now be viewed using intellisense.

@berkinanik
Copy link
Author

berkinanik commented Feb 25, 2023

js-docs for useCSVReader hook

image


useCSVReader hook returns the properly typed CSVReader component

image

generic element type provides proper event handler, event and children render function's arguments proper types

image

first generic type is the parsed result's data type which affects return result type


results object is now properly typed as ParseResult and thanks to properly type CSVReader and the hook. Its type is inferred using the handler onUploadAccepted functions argument type

image

image


Thanks to properly typed children render function arguments and all the return types of those argument methods, now children render function is properly typed and proper types are inferred

image

image

Inferred types of those renderer func arguments, all that methods return proper props of the elements for the spread operation

image

image

image

image

image

image


All the events themselves and the handler function types are properly inferred

image

image

image

image

@statusunknown418
Copy link

why hasn't this been merged yet :(

@antoinerousseau
Copy link

Thanks @berkinanik ❤️

@Bunlong can we merge this? it's awesome

@spencemc
Copy link

spencemc commented Apr 6, 2023

This would be awesome to merge! @Bunlong

@jjjjonathan
Copy link

Any blocker here? @Bunlong would love to have this

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.

TypeScript Improvements and Refactoring on CSVReader | style object type refactoring
5 participants