[DataGrid] Register getLocaleText synchronously (#8029)

mui · Feb 27, 2023 · 3149c0a · 3149c0a
1 parent 13c7b10
commit 3149c0a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx b/packages/grid/x-data-grid/src/hooks/core/useGridLocaleText.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { GridLocaleTextApi } from '../../models/api/gridLocaleTextApi';
-import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
 export const useGridLocaleText = (
@@ -18,9 +17,7 @@ export const useGridLocaleText = (
     [props.localeText],
   );
 
-  const localeTextApi: GridLocaleTextApi = {
+  apiRef.current.register('public', {
     getLocaleText,
-  };
-
-  useGridApiMethod(apiRef, localeTextApi, 'public');
+  });
 };
diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -892,6 +892,28 @@ describe('<DataGrid /> - Layout & Warnings', () => {
       );
       expect(document.querySelector('[title="Ordenar"]')).not.to.equal(null);
     });
+
+    it('should allow to change localeText on the fly', () => {
+      function TestCase(props: Partial<DataGridProps>) {
+        return (
+          <div style={{ width: 300, height: 300 }}>
+            <DataGrid
+              {...baselineProps}
+              components={{
+                Toolbar: GridToolbar,
+              }}
+              {...props}
+            />
+          </div>
+        );
+      }
+      const { setProps, getByText } = render(
+        <TestCase localeText={{ toolbarDensity: 'Density' }} />,
+      );
+      expect(getByText('Density')).not.to.equal(null);
+      setProps({ localeText: { toolbarDensity: 'Densidade' } });
+      expect(getByText('Densidade')).not.to.equal(null);
+    });
   });
 
   it('should allow style customization using the theme', function test() {