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

fix: datagrid typescript declarations #6122

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

wkeese
Copy link
Contributor

@wkeese wkeese commented Sep 25, 2024

Refs #5257, #6115.

This fixes some (but not all) of the Typescript issues with Datagrid.

Specifically:

  1. Export DataGridState type. Maybe other types should be exported too. Note that in other places the G is not capitalized, but it is for the type.

  2. onAllRowSelect() is (and should be) optional.

  3. Presumably you aren't required to have a button on your empty state screens, so "emptyStateAction" should be optional.

  4. "allRowsLabel" should be optional because you only need it if your table has a "Select all" checkbox. And also because it's optional in PropTypes.

  5. Properties like "page" are only necessary if your table has pagination, so make UsePaginationInstanceProps props optional.

  6. UseFiltersInstanceProps defines a bunch of weird and required properties like "preFilteredRows", "preFilteredFlatRows", "preFilteredRowsById". AFAICT none of those are valid for DataGridState except for setFilter() and setAllFilters(), and even those should be optional.

  7. The original DataGridState class extended both UseRowSelectInstanceProps and Pick<UseRowSelectInstanceProps, 'toggleAllRowsSelected'>. Obviously that doesn't make sense because of the redundancy. But I'm not sure what does make sense. AFAIK users don't directly defined functions like toggleRowSelected() or toggleAllRowsSelected()... but there is code that calls them.

This PR doesn't address the main issues with the types, where useDatagrid() returns a TableInstance but Datagrid.datagridState is a DataGridState.

Further, I think maybe DataGridState needs to be split into two types. Consider that:

  1. The object passed to Datagrid.datagridState does not contain "row".
  2. DataGridRow's props DO include "row".
  3. Both Datagrid.datagridState and DataGridRow's props are defined as DataGridState.

What did you change?

Typescript declarations for Datagrid.

How did you test and verify your work?

Tested locally with my own app.

This fixes some (but not all) of the Typescript issues with Datagrid.

Specifically:

1. Export DataGridState type.  Maybe other types should be exported too.
   Note that in other places the G is not capitalized, but it is for
   the type.

2. onAllRowSelect() is (and should be) optional.

3. Presumably you aren't required to have a button on your empty state
   screens, so "emptyStateAction" should be optional.

4. "allRowsLabel" should be optional because you only need it if your
   table has a "Select all" checkbox.  And also because it's optional
   in PropTypes.

5. Properties like "page" are only necessary if your table has pagination,
   so make UsePaginationInstanceProps props optional.

6. UseFiltersInstanceProps defines a bunch of weird and required properties like
   "preFilteredRows", "preFilteredFlatRows", "preFilteredRowsById".  AFAICT none
   of those are valid for DataGridState except for setFilter() and
   setAllFilters(), and even those should be optional.

7. The original DataGridState class extended both UseRowSelectInstanceProps and
   Pick<UseRowSelectInstanceProps<T>, 'toggleAllRowsSelected'>.  Obviously that
   doesn't make sense because of the redundancy.  But I'm not sure what does
   make sense.  AFAIK users don't directly defined functions like
   toggleRowSelected() or toggleAllRowsSelected()... but there is code that
   calls them.

This PR doesn't address the main issues with the types, where useDatagrid()
returns a TableInstance but Datagrid.datagridState is a DataGridState.

Further, I think maybe DataGridState needs to be split into two types.
Consider that:

1. The object passed to Datagrid.datagridState does not contain "row".
2. DataGridRow's props DO include "row".
3. Both Datagrid.datagridState and DataGridRow's props are defined as
   DataGridState.

Refs carbon-design-system#5257, carbon-design-system#6115.
@wkeese wkeese requested a review from a team as a code owner September 25, 2024 23:48
@wkeese wkeese requested review from elycheea and devadula-nandan and removed request for a team September 25, 2024 23:48
Copy link

netlify bot commented Sep 25, 2024

Deploy Preview for carbon-for-ibm-products ready!

Name Link
🔨 Latest commit a1bc8a8
🔍 Latest deploy log https://app.netlify.com/sites/carbon-for-ibm-products/deploys/66f4a1497dffb80008d79a5b
😎 Deploy Preview https://deploy-preview-6122--carbon-for-ibm-products.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

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.

1 participant