From 758b7d532ac618fc2fa9303d0925073f77d4dc5b Mon Sep 17 00:00:00 2001 From: Travis CI Date: Fri, 28 Jan 2022 17:08:57 +0100 Subject: [PATCH] Remove withTranslate HOC --- UPGRADE.md | 4 ++ docs/Reference.md | 2 - docs/Translation.md | 22 --------- .../input/useReferenceInputController.ts | 2 +- .../ra-core/src/core/CoreAdminContext.tsx | 2 +- .../src/i18n/TestTranslationProvider.tsx | 6 ++- .../ra-core/src/i18n/TranslationProvider.tsx | 4 +- packages/ra-core/src/i18n/index.ts | 31 +++--------- packages/ra-core/src/i18n/translate.spec.tsx | 19 ------- packages/ra-core/src/i18n/translate.tsx | 49 ------------------- packages/ra-core/src/i18n/useLocale.tsx | 4 +- .../ra-core/src/i18n/useSetLocale.spec.js | 4 +- packages/ra-core/src/i18n/useSetLocale.tsx | 4 +- packages/ra-core/src/i18n/useTranslatable.ts | 4 +- .../ra-core/src/i18n/useTranslate.spec.tsx | 4 +- packages/ra-core/src/i18n/useTranslate.ts | 4 +- packages/ra-core/src/util/FieldTitle.spec.tsx | 2 +- packages/ra-core/src/util/FieldTitle.tsx | 2 +- 18 files changed, 29 insertions(+), 140 deletions(-) delete mode 100644 packages/ra-core/src/i18n/translate.spec.tsx delete mode 100644 packages/ra-core/src/i18n/translate.tsx diff --git a/UPGRADE.md b/UPGRADE.md index 84d2749ccfc..7765f0fa928 100644 --- 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 `` prop (use `` 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 index 4ae0ef6b10f..b4d1476e375 100644 --- a/docs/Reference.md +++ b/docs/Reference.md @@ -138,7 +138,6 @@ title: "Reference" * [``](https://marmelab.com/ra-enterprise/modules/ra-tour) * [``](https://marmelab.com/ra-enterprise/modules/ra-tree#tree-component) * [``](https://marmelab.com/ra-enterprise/modules/ra-tree#treewithdetails-component) -* [`translate`](./Translation.md#withtranslate-hoc) * [``](./CreateEdit.md#toolbar) * `` * [``](./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) * [``](./Authentication.md#usepermissions-hook) diff --git a/docs/Translation.md b/docs/Translation.md index d3690348913..433658dbb5a 100644 --- 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 ( - - ); - } -}; - -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 index a0735fff667..b2d2e7b3d85 100644 --- 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 index f33f2ae8299..79aa9c1e34d 100644 --- 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 index 5c3537f6abb..dafbf91d876 100644 --- 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) => ( * ); */ -const TranslationProvider = (props: TranslationProviderProps) => { +export const TranslationProvider = (props: TranslationProviderProps) => { const { i18nProvider, children } = props; const [state, setState] = useSafeSetState({ @@ -57,5 +57,3 @@ const TranslationProvider = (props: TranslationProviderProps) => { ); }; - -export default TranslationProvider; diff --git a/packages/ra-core/src/i18n/index.ts b/packages/ra-core/src/i18n/index.ts index 1ce297ce55f..9901f8a1902 100644 --- 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 deleted file mode 100644 index e45e1a127bf..00000000000 --- a/packages/ra-core/src/i18n/translate.spec.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import { FunctionComponent } from 'react'; -import expect from 'expect'; - -import translate from './translate'; -import { TranslationContextProps } from './TranslationContext'; - -interface Props extends TranslationContextProps { - foo: string; -} -describe('translate HOC', () => { - it('should conserve base component default props', () => { - const Component: FunctionComponent = () =>
; - Component.defaultProps = { foo: 'bar' }; - - const TranslatedComponent = translate(Component); - expect(TranslatedComponent.defaultProps).toEqual({ foo: 'bar' }); - }); -}); diff --git a/packages/ra-core/src/i18n/translate.tsx b/packages/ra-core/src/i18n/translate.tsx deleted file mode 100644 index 736788b4a03..00000000000 --- a/packages/ra-core/src/i18n/translate.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import { ComponentType } from 'react'; -import { default as warning } from '../util/warning'; -import useTranslate from './useTranslate'; -import useLocale from './useLocale'; - -/** - * Higher-Order Component for getting access to the `locale` and the `translate` function in props. - * - * Requires that the app is decorated by the to inject - * the translation dictionaries and function in the context. - * - * @example - * import * as React from "react"; - * import { translate } from 'react-admin'; - * - * const MyHelloButton = ({ translate }) => ( - * - * ); - * - * export default translate(MyHelloButton); - * - * @param {*} BaseComponent The component to decorate - */ -const withTranslate = (BaseComponent: ComponentType): ComponentType => { - warning( - typeof BaseComponent === 'string', - `The translate function is a Higher Order Component, and should not be called directly with a translation key. Use the translate function passed as prop to your component props instead: - -const MyHelloButton = ({ translate }) => ( - -);` - ); - - const TranslatedComponent = props => { - const translate = useTranslate(); - const locale = useLocale(); - - return ( - - ); - }; - - TranslatedComponent.defaultProps = BaseComponent.defaultProps; - - return TranslatedComponent; -}; - -export default withTranslate; diff --git a/packages/ra-core/src/i18n/useLocale.tsx b/packages/ra-core/src/i18n/useLocale.tsx index faa5c8e398e..7a2b983eabb 100644 --- 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 {availableLanguages[locale]}; * } */ -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 index bd198d13024..9a40b1e63e9 100644 --- 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 index b26dd57df24..476bf2b247d 100644 --- 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; - -export default useSetLocale; diff --git a/packages/ra-core/src/i18n/useTranslatable.ts b/packages/ra-core/src/i18n/useTranslatable.ts index 8844245cd0a..aa6f1b5700c 100644 --- 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 index fc49aa3fd7a..06538086dc4 100644 --- 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 index ffbc64578c1..2dcc591d6e5 100644 --- 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 {translate('settings')}; * } */ -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 index 33822663846..a88b296fb51 100644 --- 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 index bbaf67bbb01..c50299119f5 100644 --- 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';