diff --git a/packages/ra-ui-materialui/src/detail/Tab.js b/packages/ra-ui-materialui/src/detail/Tab.js
index 50d7a15875..35f9b998fe 100644
--- a/packages/ra-ui-materialui/src/detail/Tab.js
+++ b/packages/ra-ui-materialui/src/detail/Tab.js
@@ -1,8 +1,8 @@
-import React, { Component, isValidElement } from 'react';
+import React, { isValidElement } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import MuiTab from '@material-ui/core/Tab';
-import { translate } from 'ra-core';
+import { useTranslate } from 'ra-core';
import classnames from 'classnames';
import Labeled from '../input/Labeled';
@@ -58,8 +58,22 @@ const sanitizeRestProps = ({
* );
* export default App;
*/
-class Tab extends Component {
- renderHeader = ({ className, label, icon, value, translate, ...rest }) => (
+const Tab = ({
+ basePath,
+ children,
+ contentClassName,
+ context,
+ className,
+ icon,
+ label,
+ record,
+ resource,
+ value,
+ ...rest
+}) => {
+ const translate = useTranslate();
+
+ const renderHeader = () => (
);
- renderContent = ({
- contentClassName,
- children,
- basePath,
- record,
- resource,
- }) => (
+ const renderContent = () => (
{React.Children.map(children, field =>
field && isValidElement(field) ? (
@@ -115,13 +123,8 @@ class Tab extends Component {
);
- render() {
- const { children, context, ...rest } = this.props;
- return context === 'header'
- ? this.renderHeader(rest)
- : this.renderContent({ children, ...rest });
- }
-}
+ return context === 'header' ? renderHeader() : renderContent();
+};
Tab.propTypes = {
className: PropTypes.string,
@@ -130,8 +133,7 @@ Tab.propTypes = {
context: PropTypes.oneOf(['header', 'content']),
icon: PropTypes.element,
label: PropTypes.string.isRequired,
- translate: PropTypes.func.isRequired,
value: PropTypes.string,
};
-export default translate(Tab);
+export default Tab;
diff --git a/packages/ra-ui-materialui/src/form/FormTab.js b/packages/ra-ui-materialui/src/form/FormTab.js
index 83c79bf7a7..07e44d47cc 100644
--- a/packages/ra-ui-materialui/src/form/FormTab.js
+++ b/packages/ra-ui-materialui/src/form/FormTab.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import MuiTab from '@material-ui/core/Tab';
import classnames from 'classnames';
-import { translate } from 'ra-core';
+import { useTranslate } from 'ra-core';
import FormInput from './FormInput';
@@ -18,34 +18,38 @@ const sanitizeRestProps = ({
const hiddenStyle = { display: 'none' };
-class FormTab extends Component {
- renderHeader = ({ className, label, icon, value, translate, ...rest }) => {
- const to = { pathname: value };
+const FormTab = ({
+ basePath,
+ className,
+ contentClassName,
+ children,
+ hidden,
+ icon,
+ intent,
+ label,
+ margin,
+ record,
+ resource,
+ variant,
+ value,
+ ...rest
+}) => {
+ const translate = useTranslate();
- return (
-
- );
- };
+ const renderHeader = () => (
+
+ );
- renderContent = ({
- contentClassName,
- children,
- hidden,
- basePath,
- record,
- resource,
- variant,
- margin,
- }) => (
+ const renderContent = () => (
{React.Children.map(
children,
@@ -64,13 +68,8 @@ class FormTab extends Component {
);
- render() {
- const { children, intent, ...rest } = this.props;
- return intent === 'header'
- ? this.renderHeader(rest)
- : this.renderContent({ children, ...rest });
- }
-}
+ return intent === 'header' ? renderHeader() : renderContent();
+};
FormTab.propTypes = {
className: PropTypes.string,
@@ -81,10 +80,9 @@ FormTab.propTypes = {
icon: PropTypes.element,
label: PropTypes.string.isRequired,
path: PropTypes.string,
- translate: PropTypes.func.isRequired,
value: PropTypes.string,
};
FormTab.displayName = 'FormTab';
-export default translate(FormTab);
+export default FormTab;