Merge pull request #5342 from marmelab/tab-typescript

Convert Tab component to TypeScript

Author: Luwangel

packages/ra-ui-materialui/src/detail/Tab.js packages/ra-ui-materialui/src/detail/Tab.tsx

@@ -1,22 +1,13 @@
 import * as React from 'react';
-import { isValidElement } from 'react';
+import { isValidElement, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import MuiTab from '@material-ui/core/Tab';
-import { useTranslate } from 'ra-core';
+import MuiTab, { TabProps as MuiTabProps } from '@material-ui/core/Tab';
+import { useTranslate, Record } from 'ra-core';
 import classnames from 'classnames';
 
 import Labeled from '../input/Labeled';
 
-const sanitizeRestProps = ({
-    contentClassName,
-    label,
-    icon,
-    value,
-    translate,
-    ...rest
-}) => rest;
-
 /**
  * Tab element for the SimpleShowLayout.
  *
@@ -71,7 +62,7 @@ const Tab = ({
     resource,
     value,
     ...rest
-}) => {
+}: TabProps) => {
     const translate = useTranslate();
 
     const renderHeader = () => (
@@ -81,16 +72,15 @@ const Tab = ({
             value={value}
             icon={icon}
             className={classnames('show-tab', className)}
-            component={Link}
-            to={value}
-            {...sanitizeRestProps(rest)}
+            {...({ component: Link, to: value } as any)} // to avoid TypeScript screams, see https://github.com/mui-org/material-ui/issues/9106#issuecomment-451270521
+            {...rest}
         />
     );
 
     const renderContent = () => (
         <span className={contentClassName}>
             {React.Children.map(children, field =>
-                field && isValidElement(field) ? (
+                field && isValidElement<any>(field) ? (
                     <div
                         key={field.props.source}
                         className={classnames(
@@ -137,4 +127,17 @@ Tab.propTypes = {
     value: PropTypes.string,
 };
 
+export interface TabProps extends MuiTabProps {
+    basePath?: string;
+    children: ReactNode;
+    contentClassName?: string;
+    context?: 'header' | 'content';
+    className?: string;
+    icon?: ReactElement;
+    label: string;
+    record?: Record;
+    resource?: string;
+    value?: string;
+}
+
 export default Tab;

packages/ra-ui-materialui/src/detail/index.ts

@@ -1,17 +1,14 @@
-import Create from './Create';
-import { CreateView } from './Create';
+import Create, { CreateView } from './Create';
 import CreateActions from './CreateActions';
-import Edit from './Edit';
-import { EditView } from './Edit';
+import Edit, { EditView } from './Edit';
 import EditActions from './EditActions';
 import EditGuesser from './EditGuesser';
-import Show from './Show';
-import { ShowView } from './Show';
-import ShowActions from './ShowActions';
+import Show, { ShowView } from './Show';
+import ShowActions, { ShowActionsProps } from './ShowActions';
 import ShowGuesser from './ShowGuesser';
-import SimpleShowLayout from './SimpleShowLayout';
-import TabbedShowLayout from './TabbedShowLayout';
-import Tab from './Tab';
+import SimpleShowLayout, { SimpleShowLayoutProps } from './SimpleShowLayout';
+import TabbedShowLayout, { TabbedShowLayoutProps } from './TabbedShowLayout';
+import Tab, { TabProps } from './Tab';
 import TabbedShowLayoutTabs from './TabbedShowLayoutTabs';
 
 export {
@@ -31,3 +28,10 @@ export {
     Tab,
     TabbedShowLayoutTabs,
 };
+
+export type {
+    SimpleShowLayoutProps,
+    ShowActionsProps,
+    TabProps,
+    TabbedShowLayoutProps,
+};