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;