From ec6b49b07f80f1d27570fbed2294579c4f8f11ed Mon Sep 17 00:00:00 2001 From: Danail H Date: Wed, 16 Jun 2021 13:12:27 +0300 Subject: [PATCH 1/8] Include core component translations without duplicating --- .../grid/_modules_/grid/components/GridPagination.tsx | 1 + .../grid/_modules_/grid/constants/localeTextConstants.ts | 8 ++++++++ .../grid/_modules_/grid/models/api/gridLocaleTextApi.ts | 7 ++++++- packages/grid/_modules_/grid/utils/getGridLocalization.ts | 6 ++---- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/grid/_modules_/grid/components/GridPagination.tsx b/packages/grid/_modules_/grid/components/GridPagination.tsx index fa633562b182..272ffa4d018b 100644 --- a/packages/grid/_modules_/grid/components/GridPagination.tsx +++ b/packages/grid/_modules_/grid/components/GridPagination.tsx @@ -97,6 +97,7 @@ export const GridPagination = React.forwardRef< : [] } rowsPerPage={paginationState.pageSize} + {...apiRef!.current.getLocaleText('MuiTablePagination')} {...getPaginationChangeHandlers()} {...props} /> diff --git a/packages/grid/_modules_/grid/constants/localeTextConstants.ts b/packages/grid/_modules_/grid/constants/localeTextConstants.ts index 6798b707a6e8..e59361d94ff2 100644 --- a/packages/grid/_modules_/grid/constants/localeTextConstants.ts +++ b/packages/grid/_modules_/grid/constants/localeTextConstants.ts @@ -98,4 +98,12 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Boolean cell text booleanCellTrueLabel: 'true', booleanCellFalseLabel: 'false', + + // Core components keys + MuiTablePagination: {}, + MuiPagination: {}, + MuiAlert: {}, + MuiBreadcrumbs: {}, + MuiRating: {}, + MuiAutocomplete: {}, }; diff --git a/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts b/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts index ac0a1085d667..af40069cbc88 100644 --- a/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts +++ b/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts @@ -1,7 +1,12 @@ +import { Localization as CoreLocalization } from '@material-ui/core/locale'; + +// @ts-ignore +type MuiComponentsLocalization = CoreLocalization['props'] | CoreLocalization['components']; + /** * Set the types of the texts in the grid. */ -export interface GridLocaleText { +export interface GridLocaleText extends Partial { // Root noRowsLabel: string; noResultsOverlayLabel: string; diff --git a/packages/grid/_modules_/grid/utils/getGridLocalization.ts b/packages/grid/_modules_/grid/utils/getGridLocalization.ts index 42759d3fa4b3..60e49202d3e1 100644 --- a/packages/grid/_modules_/grid/utils/getGridLocalization.ts +++ b/packages/grid/_modules_/grid/utils/getGridLocalization.ts @@ -27,10 +27,9 @@ export const getGridLocalization = ( components: { MuiDataGrid: { defaultProps: { - localeText: gridTranslations, + localeText: { ...gridTranslations, ...coreTranslations?.components }, }, }, - ...coreTranslations?.components, }, }; } @@ -38,9 +37,8 @@ export const getGridLocalization = ( return { props: { MuiDataGrid: { - localeText: gridTranslations, + localeText: { ...gridTranslations, ...coreTranslations?.props }, }, - ...coreTranslations?.props, }, }; }; From d425b3a3bdbe06f118b9ee92d5e8a957034262ef Mon Sep 17 00:00:00 2001 From: Danail H Date: Wed, 16 Jun 2021 13:29:29 +0300 Subject: [PATCH 2/8] Update docs --- docs/pages/api-docs/data-grid/grid-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md index c1cca1dda7e2..3cdcdfa1ed8a 100644 --- a/docs/pages/api-docs/data-grid/grid-api.md +++ b/docs/pages/api-docs/data-grid/grid-api.md @@ -38,7 +38,7 @@ import { GridApi } from '@material-ui/x-grid'; | getEditCellProps | (rowId: GridRowId, field: string) => GridEditCellProps | Gets the input props for the edit cell of a given `rowId` and `field`. | | getEditCellPropsParams | (rowId: GridRowId, field: string) => GridEditCellPropsParams | Gets the params to be passed when calling `setEditCellProps`. | | getEditRowsModel | () => GridEditRowsModel | Gets the edit rows model of the grid. | -| getLocaleText | (key: T) => GridLocaleText[T] | Returns the translation for the `key`. | +| getLocaleText | (key: T) => GridLocaleText<>[T] | Returns the translation for the `key`. | | getRow | (id: GridRowId) => GridRowData | Gets the row data with a given id. | | getRowElement | (id: GridRowId) => null \| HTMLDivElement | Gets the underlying DOM element for a row at the given `id`. | | getRowIdFromRowIndex | (index: number) => GridRowId | Gets the `GridRowId` of a row at a specific index. | From 8d9e5fcb4981e33a4f171d1b3ddaf2f6e80f401b Mon Sep 17 00:00:00 2001 From: Danail H Date: Thu, 17 Jun 2021 12:32:09 +0300 Subject: [PATCH 3/8] only add MuiTablePagination translations --- .../_modules_/grid/constants/localeTextConstants.ts | 7 +------ .../grid/_modules_/grid/utils/getGridLocalization.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/grid/_modules_/grid/constants/localeTextConstants.ts b/packages/grid/_modules_/grid/constants/localeTextConstants.ts index e59361d94ff2..d53b154e55d7 100644 --- a/packages/grid/_modules_/grid/constants/localeTextConstants.ts +++ b/packages/grid/_modules_/grid/constants/localeTextConstants.ts @@ -99,11 +99,6 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { booleanCellTrueLabel: 'true', booleanCellFalseLabel: 'false', - // Core components keys + // Used core components translation keys MuiTablePagination: {}, - MuiPagination: {}, - MuiAlert: {}, - MuiBreadcrumbs: {}, - MuiRating: {}, - MuiAutocomplete: {}, }; diff --git a/packages/grid/_modules_/grid/utils/getGridLocalization.ts b/packages/grid/_modules_/grid/utils/getGridLocalization.ts index 60e49202d3e1..370cd8a7c93a 100644 --- a/packages/grid/_modules_/grid/utils/getGridLocalization.ts +++ b/packages/grid/_modules_/grid/utils/getGridLocalization.ts @@ -27,7 +27,10 @@ export const getGridLocalization = ( components: { MuiDataGrid: { defaultProps: { - localeText: { ...gridTranslations, ...coreTranslations?.components }, + localeText: { + ...gridTranslations, + MuiTablePagination: coreTranslations?.components?.MuiTablePagination, + }, }, }, }, @@ -37,7 +40,10 @@ export const getGridLocalization = ( return { props: { MuiDataGrid: { - localeText: { ...gridTranslations, ...coreTranslations?.props }, + localeText: { + ...gridTranslations, + MuiTablePagination: coreTranslations?.props?.MuiTablePagination, + }, }, }, }; From 8f4280844aa9e472dda5893400bedd0004691c19 Mon Sep 17 00:00:00 2001 From: Danail H Date: Thu, 17 Jun 2021 12:43:32 +0300 Subject: [PATCH 4/8] Update docs --- .../components/data-grid/localization/localization.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/src/pages/components/data-grid/localization/localization.md b/docs/src/pages/components/data-grid/localization/localization.md index f9a2345de32b..b31bf64d3b50 100644 --- a/docs/src/pages/components/data-grid/localization/localization.md +++ b/docs/src/pages/components/data-grid/localization/localization.md @@ -44,6 +44,14 @@ 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. The same import works with `XGrid` as it's an extension of `DataGrid`. +**Note**: if you want to pass in language translations directly to the grid and not use the `createMuiTheme` in combination with the `ThemeProvider` you can directly load the language translations you need from the `DataGrid` or `XGrid` package. + +```jsx +import { DataGrid, nlNL } from '@material-ui/data-grid'; + +; +``` + ### Supported locales | Locale | BCP 47 language tag | Import name | From fd998f948296cc9c54bdd261b7e9697f0f04ac16 Mon Sep 17 00:00:00 2001 From: Danail H Date: Thu, 17 Jun 2021 12:56:34 +0300 Subject: [PATCH 5/8] fix docs --- .../src/pages/components/data-grid/localization/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/localization/localization.md b/docs/src/pages/components/data-grid/localization/localization.md index b31bf64d3b50..377ebcc61f26 100644 --- a/docs/src/pages/components/data-grid/localization/localization.md +++ b/docs/src/pages/components/data-grid/localization/localization.md @@ -44,7 +44,7 @@ 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. The same import works with `XGrid` as it's an extension of `DataGrid`. -**Note**: if you want to pass in language translations directly to the grid and not use the `createMuiTheme` in combination with the `ThemeProvider` you can directly load the language translations you need from the `DataGrid` or `XGrid` package. +**Note**: if you want to pass in language translations directly to the grid and not use the `createMuiTheme` in combination with the `ThemeProvider` you can directly load the language translations from the `DataGrid` or `XGrid` package. ```jsx import { DataGrid, nlNL } from '@material-ui/data-grid'; From 16955a3134496e41e2645d1bc77b042e504d9cd9 Mon Sep 17 00:00:00 2001 From: Danail Hadjiatanasov Date: Fri, 18 Jun 2021 16:22:18 +0300 Subject: [PATCH 6/8] Update docs/src/pages/components/data-grid/localization/localization.md Co-authored-by: Matheus Wichman --- .../src/pages/components/data-grid/localization/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/localization/localization.md b/docs/src/pages/components/data-grid/localization/localization.md index 377ebcc61f26..e9e84d1199a6 100644 --- a/docs/src/pages/components/data-grid/localization/localization.md +++ b/docs/src/pages/components/data-grid/localization/localization.md @@ -42,7 +42,7 @@ 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. -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`. **Note**: if you want to pass in language translations directly to the grid and not use the `createMuiTheme` in combination with the `ThemeProvider` you can directly load the language translations from the `DataGrid` or `XGrid` package. From 186fd72c7e50fc7f3bea44b60e9ef609fef0fabf Mon Sep 17 00:00:00 2001 From: Danail Hadjiatanasov Date: Fri, 18 Jun 2021 16:22:34 +0300 Subject: [PATCH 7/8] Update docs/src/pages/components/data-grid/localization/localization.md Co-authored-by: Matheus Wichman --- .../src/pages/components/data-grid/localization/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/localization/localization.md b/docs/src/pages/components/data-grid/localization/localization.md index e9e84d1199a6..731d23d68b29 100644 --- a/docs/src/pages/components/data-grid/localization/localization.md +++ b/docs/src/pages/components/data-grid/localization/localization.md @@ -44,7 +44,7 @@ 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. The same import works for `XGrid` as it's an extension of `DataGrid`. -**Note**: if you want to pass in language translations directly to the grid and not use the `createMuiTheme` in combination with the `ThemeProvider` you can directly load the language translations from the `DataGrid` or `XGrid` package. +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'; From 3de6ae8aa3269b8eb0196c28bda9fc2de7837437 Mon Sep 17 00:00:00 2001 From: Danail H Date: Fri, 18 Jun 2021 16:50:22 +0300 Subject: [PATCH 8/8] Update docs --- .../data-grid/localization/localization.md | 20 +++++++++++++++++++ .../grid/models/api/gridLocaleTextApi.ts | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/localization/localization.md b/docs/src/pages/components/data-grid/localization/localization.md index 377ebcc61f26..a966201f08e0 100644 --- a/docs/src/pages/components/data-grid/localization/localization.md +++ b/docs/src/pages/components/data-grid/localization/localization.md @@ -44,6 +44,26 @@ 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. The same import works with `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, +); + + + +; +``` + **Note**: if you want to pass in language translations directly to the grid and not use the `createMuiTheme` in combination with the `ThemeProvider` you can directly load the language translations from the `DataGrid` or `XGrid` package. ```jsx diff --git a/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts b/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts index af40069cbc88..73e10a626601 100644 --- a/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts +++ b/packages/grid/_modules_/grid/models/api/gridLocaleTextApi.ts @@ -1,6 +1,6 @@ import { Localization as CoreLocalization } from '@material-ui/core/locale'; -// @ts-ignore +// @ts-expect-error We have different structure in v5 type MuiComponentsLocalization = CoreLocalization['props'] | CoreLocalization['components']; /**