Merge pull request #7157 from marmelab/remove-with-translate

Remove withTranslate HOC
marmelab · Jan 28, 2022 · 03ba2fe · 03ba2fe
2 parents 236e536 + 758b7d5
commit 03ba2fe
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 140 deletions.
diff --git a/UPGRADE.md b/UPGRADE.md
@@ -1307,6 +1307,10 @@ If you still relied on sagas, you have to port your saga code to react `useEffec
 
 - Removed `<ReferenceField linkType>` prop (use `<ReferenceField link>` instead)
 
+## Removed Deprecated HOCs
+
+- Removed `withTranslate` HOC (use `useTranslate` hook)
+
 ## Removed connected-react-router
 
 If you were dispatching `connected-react-router` actions to navigate, you'll now have to use `react-router` hooks:

diff --git a/docs/Reference.md b/docs/Reference.md
@@ -138,7 +138,6 @@ title: "Reference"
 * [`<TourProvider>`](https://marmelab.com/ra-enterprise/modules/ra-tour)<img class="icon" src="./img/premium.svg" />
 * [`<Tree>`](https://marmelab.com/ra-enterprise/modules/ra-tree#tree-component)<img class="icon" src="./img/premium.svg" />
 * [`<TreeWithDetails>`](https://marmelab.com/ra-enterprise/modules/ra-tree#treewithdetails-component)<img class="icon" src="./img/premium.svg" />
-* [`translate`](./Translation.md#withtranslate-hoc)
 * [`<Toolbar>`](./CreateEdit.md#toolbar)
 * `<TopToolbar>`
 * [`<UrlField>`](./UrlField.md)
@@ -204,7 +203,6 @@ title: "Reference"
 * [`useUnselectAll`](./useUnselectAll.md)
 * [`useWarnWhenUnsavedChanges`](./CreateEdit.md#warning-about-unsaved-changes)
 * [`withDataProvider`](./Actions.md#legacy-components-query-mutation-and-withdataprovider)
-* [`withTranslate`](./Translation.md#withtranslate-hoc)
 * [`<WithPermissions>`](./Authentication.md#usepermissions-hook)
 
 </div>
diff --git a/docs/Translation.md b/docs/Translation.md
@@ -528,28 +528,6 @@ export default MyHelloButton;
 // and translate the `resources.customers.fields.first_name` key
 ```
 
-## `withTranslate` HOC
-
-If you're stuck with class components, react-admin also exports a `withTranslate` higher-order component, which injects the `translate` function as prop. 
-
-```jsx
-// in src/MyHelloButton.js
-import * as React from 'react';
-import { Component } from 'react';
-import { withTranslate } from 'react-admin';
-
-class MyHelloButton extends Component {
-    render() {
-        const { translate } = this.props;
-        return (
-            <button>{translate('myroot.hello.world')}</button>
-        );
-    } 
-};
-
-export default withTranslate(MyHelloButton);
-```
-
 ## Using Specific Polyglot Features
 
 Polyglot.js is a fantastic library: in addition to being small, fully maintained, and totally framework-agnostic, it provides some nice features such as interpolation and pluralization, that you can use in react-admin.

diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.ts b/packages/ra-core/src/controller/input/useReferenceInputController.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { useGetList, UseGetManyHookValue } from '../../dataProvider';
 import { getStatusForInput as getDataStatus } from './referenceDataStatus';
-import useTranslate from '../../i18n/useTranslate';
+import { useTranslate } from '../../i18n';
 import { PaginationPayload, RaRecord, SortPayload } from '../../types';
 import { ListControllerResult } from '../list';
 import { useReference } from '../useReference';

diff --git a/packages/ra-core/src/core/CoreAdminContext.tsx b/packages/ra-core/src/core/CoreAdminContext.tsx
@@ -12,7 +12,7 @@ import {
     defaultDataProvider,
 } from '../dataProvider';
 import createAdminStore from './createAdminStore';
-import TranslationProvider from '../i18n/TranslationProvider';
+import { TranslationProvider } from '../i18n';
 import { ResourceDefinitionContextProvider } from './ResourceDefinitionContext';
 import { NotificationContextProvider } from '../notification';
 import {

diff --git a/packages/ra-core/src/i18n/TestTranslationProvider.tsx b/packages/ra-core/src/i18n/TestTranslationProvider.tsx
@@ -3,7 +3,11 @@ import lodashGet from 'lodash/get';
 
 import { TranslationContext } from './TranslationContext';
 
-export default ({ translate, messages, children }: any) => (
+export const TestTranslationProvider = ({
+    translate,
+    messages,
+    children,
+}: any) => (
     <TranslationContext.Provider
         value={{
             locale: 'en',

diff --git a/packages/ra-core/src/i18n/TranslationProvider.tsx b/packages/ra-core/src/i18n/TranslationProvider.tsx
@@ -27,7 +27,7 @@ interface State {
  *         </Provider>
  *     );
  */
-const TranslationProvider = (props: TranslationProviderProps) => {
+export const TranslationProvider = (props: TranslationProviderProps) => {
     const { i18nProvider, children } = props;
 
     const [state, setState] = useSafeSetState<State>({
@@ -57,5 +57,3 @@ const TranslationProvider = (props: TranslationProviderProps) => {
         </TranslationContext.Provider>
     );
 };
-
-export default TranslationProvider;
diff --git a/packages/ra-core/src/i18n/index.ts b/packages/ra-core/src/i18n/index.ts
@@ -1,33 +1,14 @@
-import translate from './translate';
-import TranslationProvider, {
-    TranslationProviderProps,
-} from './TranslationProvider';
-import TestTranslationProvider from './TestTranslationProvider';
-import useLocale from './useLocale';
-import useSetLocale from './useSetLocale';
-import useTranslate from './useTranslate';
-
-// Alias to translate to avoid shadowed variable names error with tslint
-const withTranslate = translate;
-
-export {
-    translate, // deprecated
-    withTranslate, // deprecated
-    TranslationProvider,
-    TestTranslationProvider,
-    useLocale,
-    useSetLocale,
-    useTranslate,
-};
-
-export type { TranslationProviderProps };
-
 export const DEFAULT_LOCALE = 'en';
 
-export * from './TranslationUtils';
+export * from './TestTranslationProvider';
 export * from './TranslationContext';
 export * from './TranslationMessages';
 export * from './TranslatableContext';
 export * from './TranslatableContextProvider';
+export * from './TranslationProvider';
+export * from './TranslationUtils';
+export * from './useLocale';
+export * from './useSetLocale';
 export * from './useTranslatable';
 export * from './useTranslatableContext';
+export * from './useTranslate';
diff --git a/packages/ra-core/src/i18n/translate.spec.tsx b/packages/ra-core/src/i18n/translate.spec.tsx
diff --git a/packages/ra-core/src/i18n/translate.tsx b/packages/ra-core/src/i18n/translate.tsx
diff --git a/packages/ra-core/src/i18n/useLocale.tsx b/packages/ra-core/src/i18n/useLocale.tsx
@@ -20,9 +20,7 @@ import { TranslationContext } from './TranslationContext';
  *     return <span>{availableLanguages[locale]}</span>;
  * }
  */
-const useLocale = () => {
+export const useLocale = () => {
     const { locale } = useContext(TranslationContext);
     return locale;
 };
-
-export default useLocale;
diff --git a/packages/ra-core/src/i18n/useSetLocale.spec.js b/packages/ra-core/src/i18n/useSetLocale.spec.js
@@ -9,8 +9,8 @@ import {
 } from '@testing-library/react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 
-import useTranslate from './useTranslate';
-import useSetLocale from './useSetLocale';
+import { useTranslate } from './useTranslate';
+import { useSetLocale } from './useSetLocale';
 import { TranslationContext, TranslationProvider } from './';
 
 describe('useSetLocale', () => {

diff --git a/packages/ra-core/src/i18n/useSetLocale.tsx b/packages/ra-core/src/i18n/useSetLocale.tsx
@@ -29,7 +29,7 @@ import { useNotify } from '../notification';
  *     );
  * }
  */
-const useSetLocale = (): SetLocale => {
+export const useSetLocale = (): SetLocale => {
     const { setLocale, i18nProvider } = useContext(TranslationContext);
     const notify = useNotify();
     return useCallback(
@@ -51,5 +51,3 @@ const useSetLocale = (): SetLocale => {
 };
 
 type SetLocale = (locale: String) => Promise<void>;
-
-export default useSetLocale;
diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts
@@ -2,8 +2,8 @@ import { useState, useMemo } from 'react';
 import { useResourceContext } from '../core';
 import { getFieldLabelTranslationArgs } from '../util';
 import { TranslatableContextValue } from './TranslatableContext';
-import useLocale from './useLocale';
-import useTranslate from './useTranslate';
+import { useLocale } from './useLocale';
+import { useTranslate } from './useTranslate';
 
 /**
  * Hook supplying the logic to translate a field value in multiple languages.

diff --git a/packages/ra-core/src/i18n/useTranslate.spec.tsx b/packages/ra-core/src/i18n/useTranslate.spec.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import expect from 'expect';
 import { render, screen } from '@testing-library/react';
 
-import useTranslate from './useTranslate';
-import TranslationProvider from './TranslationProvider';
+import { useTranslate } from './useTranslate';
+import { TranslationProvider } from './TranslationProvider';
 import { TranslationContext } from './TranslationContext';
 
 describe('useTranslate', () => {

diff --git a/packages/ra-core/src/i18n/useTranslate.ts b/packages/ra-core/src/i18n/useTranslate.ts
@@ -22,7 +22,7 @@ import { Translate } from '../types';
  *     return <MenuItem>{translate('settings')}</MenuItem>;
  * }
  */
-const useTranslate = (): Translate => {
+export const useTranslate = (): Translate => {
     const { i18nProvider, locale } = useContext(TranslationContext);
     const translate = useCallback(
         (key: string, options?: any) =>
@@ -34,5 +34,3 @@ const useTranslate = (): Translate => {
 };
 
 const identity = key => key;
-
-export default useTranslate;
diff --git a/packages/ra-core/src/util/FieldTitle.spec.tsx b/packages/ra-core/src/util/FieldTitle.spec.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import * as React from 'react';
 
 import { FieldTitle } from './FieldTitle';
-import TestTranslationProvider from '../i18n/TestTranslationProvider';
+import { TestTranslationProvider } from '../i18n';
 
 describe('FieldTitle', () => {
     it('should return empty span by default', () => {

diff --git a/packages/ra-core/src/util/FieldTitle.tsx b/packages/ra-core/src/util/FieldTitle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactElement, memo } from 'react';
 
-import useTranslate from '../i18n/useTranslate';
+import { useTranslate } from '../i18n';
 import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
 import { useResourceContext } from '../core/useResourceContext';