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.

Sign up for GitHub

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

Jump to bottom

[DataGrid] Include MUI core component localizations in localeText #1913

Merged
merged 9 commits into from
Jun 18, 2021
Merged

[DataGrid] Include MUI core component localizations in localeText #1913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ec6b49b
Include core component translations without duplicating
DanailH Jun 16, 2021
d425b3a
Update docs
DanailH Jun 16, 2021
8d9e5fc
only add MuiTablePagination translations
DanailH Jun 17, 2021
8f42808
Update docs
DanailH Jun 17, 2021
fd998f9
fix docs
DanailH Jun 17, 2021
16955a3
Update docs/src/pages/components/data-grid/localization/localization.md
DanailH Jun 18, 2021
186fd72
Update docs/src/pages/components/data-grid/localization/localization.md
DanailH Jun 18, 2021
3de6ae8
Update docs
DanailH Jun 18, 2021
9cd4f15
Pull latest
DanailH Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api-docs/data-grid/grid-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import { GridApi } from '@material-ui/x-grid';
| <span class="prop-name">getEditCellProps</span> | <span class="prop-type">(rowId: GridRowId, field: string) =&gt; GridEditCellProps</span> | Gets the input props for the edit cell of a given `rowId` and `field`. |
| <span class="prop-name">getEditCellPropsParams</span> | <span class="prop-type">(rowId: GridRowId, field: string) =&gt; GridEditCellPropsParams</span> | Gets the params to be passed when calling `setEditCellProps`. |
| <span class="prop-name">getEditRowsModel</span> | <span class="prop-type">() =&gt; GridEditRowsModel</span> | Gets the edit rows model of the grid. |
| <span class="prop-name">getLocaleText</span> | <span class="prop-type">(key: T) =&gt; GridLocaleText[T]</span> | Returns the translation for the `key`. |
| <span class="prop-name">getLocaleText</span> | <span class="prop-type">(key: T) =&gt; GridLocaleText&lt;&gt;[T]</span> | Returns the translation for the `key`. |
| <span class="prop-name">getRow</span> | <span class="prop-type">(id: GridRowId) =&gt; GridRowData</span> | Gets the row data with a given id. |
| <span class="prop-name">getRowElement</span> | <span class="prop-type">(id: GridRowId) =&gt; null \| HTMLDivElement</span> | Gets the underlying DOM element for a row at the given `id`. |
| <span class="prop-name">getRowIdFromRowIndex</span> | <span class="prop-type">(index: number) =&gt; GridRowId</span> | Gets the `GridRowId` of a row at a specific index. |
Expand Down
30 changes: 29 additions & 1 deletion docs/src/pages/components/data-grid/localization/localization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,35 @@ const theme = createMuiTheme(

Note that `createMuiTheme` accepts any number of arguments.
If you are already using the [translations of the core components](/guides/localization/#locale-text), you can add `bgBG` as a new argument.
DanailH marked this conversation as resolved.
Show resolved Hide resolved
The same import works with `XGrid` as it's an extension of `DataGrid`.
The same import works for `XGrid` as it's an extension of `DataGrid`.

```jsx
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { DataGrid, bgBG } from '@material-ui/data-grid';
import { bgBG as coreBgBG } from '@material-ui/core/locale';

const theme = createMuiTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
bgBG,
coreBgBG,
);
Comment on lines +52 to +60
Copy link
Member

Choose a reason for hiding this comment

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

👍


<ThemeProvider theme={theme}>
<DataGrid />
</ThemeProvider>;
```

If you want to pass language translations directly to the grid without using `createMuiTheme` and `ThemeProvider`, you can directly load the language translations from the `@material-ui/data-grid` or `@material-ui/x-grid` package.

```jsx
import { DataGrid, nlNL } from '@material-ui/data-grid';

<DataGrid localeText={nlNL.props.MuiDataGrid.localeText} />;
```

### Supported locales

Expand Down
1 change: 1 addition & 0 deletions packages/grid/_modules_/grid/components/GridPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export const GridPagination = React.forwardRef<
: []
}
rowsPerPage={paginationState.pageSize}
{...apiRef!.current.getLocaleText('MuiTablePagination')}
{...getPaginationChangeHandlers()}
{...props}
/>
Expand Down
3 changes: 3 additions & 0 deletions packages/grid/_modules_/grid/constants/localeTextConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,4 +98,7 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
// Boolean cell text
booleanCellTrueLabel: 'true',
booleanCellFalseLabel: 'false',

// Used core components translation keys
MuiTablePagination: {},
};
7 changes: 6 additions & 1 deletion packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Localization as CoreLocalization } from '@material-ui/core/locale';

// @ts-expect-error We have different structure in v5
type MuiComponentsLocalization = CoreLocalization['props'] | CoreLocalization['components'];

/**
* Set the types of the texts in the grid.
*/
export interface GridLocaleText {
export interface GridLocaleText extends Partial<MuiComponentsLocalization> {
Comment on lines +1 to +9
Copy link
Member

@oliviertassinari oliviertassinari Jul 10, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

This type is not correct, we extend any:

  1. This should fail: https://codesandbox.io/s/material-demo-forked-d8djr?file=/demo.tsx, it doesn't. Fixed in [DataGrid] Fix localeText type #2117.
  2. The tests of [docs] Fix DataTable.tsx demo in v4 material-ui#27196 shouldn't fail, they do. Fixed in [DataGrid] Fix localeText type #2117
  3. It allows regressions like [DataGrid] Add missing localeText types #2118

// Root
noRowsLabel: string;
noResultsOverlayLabel: string;
Expand Down
12 changes: 8 additions & 4 deletions packages/grid/_modules_/grid/utils/getGridLocalization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,24 @@ export const getGridLocalization = (
components: {
MuiDataGrid: {
defaultProps: {
localeText: gridTranslations,
localeText: {
...gridTranslations,
MuiTablePagination: coreTranslations?.components?.MuiTablePagination,
},
},
},
...coreTranslations?.components,
Copy link
Member

Choose a reason for hiding this comment

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

We need to revert this line and its v4 counterpart below. If another component from the core is used, it will not get translations.

Copy link
Member

@oliviertassinari oliviertassinari Jun 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

@m4theushw It seems that you envision a different solution. This change seems to be OK/aligned with the intent to have all the translations happening inside MuiDataGrid.localeText, even for the core components.

Copy link
Member

Choose a reason for hiding this comment

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

I have no problem with appending the core translations into MuiDataGrid.localeText. My point is that if another component from the core (e.g. Alert) is used outside the DataGrid it will not get translations. That's because in the docs we recommend to use the locale from the data-grid package to create the theme. Open this CodeSandbox and note that the standalone TablePagination is not translated.

Copy link
Member Author

Choose a reason for hiding this comment

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

I see your worry - I will update the docs to match this implementation. That's why it's marked as a breaking change because you will no longer import all translations from the X package, you would need a mixed solution depending on your case.

Copy link
Member

@oliviertassinari oliviertassinari Jun 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Open this CodeSandbox and note that the standalone TablePagination is not translated.

The table component not translated sounds like the expected behavior, translations do no longer leak.

},
};
}

return {
props: {
MuiDataGrid: {
localeText: gridTranslations,
localeText: {
...gridTranslations,
MuiTablePagination: coreTranslations?.props?.MuiTablePagination,
},
},
...coreTranslations?.props,
},
};
};