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

[DataGrid] Implement internationalization #718

Merged

Conversation

DanailH
Copy link
Member

@DanailH DanailH commented Dec 10, 2020

One iteration on #196

Overview

I'm this is the first part of the "Implement Localization" ticket. For the second part there is going to be a follow up ticket. This feature is available on both the DataGrid and XGrid components.

What does this PR solves?

- We add a localeText prop to the DataGrid and XGrid components. This is an object that can be globally overridden through the theme with theme.components.MuiDataGrid.defaultProps.localeText.
- The prop performs a deep merge with the default translations.
- The default translations are in the en_US locale.
- We use the context to propagate the prop down to all the components of the grid. This propagation can be implemented with a custom context or the apiRef, to be determined on what we need to optimize. No matter the solution we pick, it needs to propagate everywhere in the data grid. I memo shouldn't prevent the value to be updated.
- We document it.

I've added a useI18n hook that has only one exported method for now that is the getText. It is used to get the text value that is assigned to a key in the 'localText' object.

Later on we can extend the hook with additional functionality needed for part 2.

Documentation, tests and full text replacement is missing from this Draft. Once we have the implementation and the naming 😅 nailed down I'll add in the missing things and convert the Draft into a normal PR.

Example usage:

<DataGrid localeText={{ densityText: 'size' }} />

ToDo:

@DanailH DanailH added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Dec 10, 2020
@DanailH DanailH self-assigned this Dec 10, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea to only translate a few keys!

@DanailH DanailH force-pushed the feature/DataGrid-196-implement-localization branch from 112520a to 8e5ce3c Compare December 11, 2020 11:01
@oliviertassinari oliviertassinari changed the title [DataGrid] Implement localization [DataGrid] Implement internationalization Dec 11, 2020
@DanailH DanailH marked this pull request as ready for review December 15, 2020 13:59
@DanailH
Copy link
Member Author

DanailH commented Dec 15, 2020

I've fixed the outstanding issues and comments, added a test case and updated the docs.

Note: I've only converted the text in the Density Selector component for now to make the PR more focused on the functionality. Once this is merged I'll open a follow up PR that handles the rest of the text used in the grid.

DanailH and others added 2 commits December 18, 2020 12:56
…leText.tsx

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
@DanailH DanailH merged commit 6269bf8 into mui:master Dec 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants