Merge pull request #4002 from WiXSL/patch-class-to-function

Change Tab and FormTab components to function components.
marmelab · Nov 21, 2019 · cf80699 · cf80699
2 parents 89ac783 + 6415aae
commit cf80699
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 57 deletions.
diff --git 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 = () => (
         <MuiTab
             key={label}
             label={translate(label, { _: label })}
@@ -72,13 +86,7 @@ class Tab extends Component {
         />
     );
 
-    renderContent = ({
-        contentClassName,
-        children,
-        basePath,
-        record,
-        resource,
-    }) => (
+    const renderContent = () => (
         <span className={contentClassName}>
             {React.Children.map(children, field =>
                 field && isValidElement(field) ? (
@@ -115,13 +123,8 @@ class Tab extends Component {
         </span>
     );
 
-    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
@@ -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 (
-            <MuiTab
-                key={label}
-                label={translate(label, { _: label })}
-                value={value}
-                icon={icon}
-                className={classnames('form-tab', className)}
-                component={Link}
-                to={to}
-                {...sanitizeRestProps(rest)}
-            />
-        );
-    };
+    const renderHeader = () => (
+        <MuiTab
+            key={label}
+            label={translate(label, { _: label })}
+            value={value}
+            icon={icon}
+            className={classnames('form-tab', className)}
+            component={Link}
+            to={{ pathname: value }}
+            {...sanitizeRestProps(rest)}
+        />
+    );
 
-    renderContent = ({
-        contentClassName,
-        children,
-        hidden,
-        basePath,
-        record,
-        resource,
-        variant,
-        margin,
-    }) => (
+    const renderContent = () => (
         <span style={hidden ? hiddenStyle : null} className={contentClassName}>
             {React.Children.map(
                 children,
@@ -64,13 +68,8 @@ class FormTab extends Component {
         </span>
     );
 
-    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;