Migrate Layout components to typescript

packages/ra-ui-materialui/src/field/ReferenceArrayField.tsx

@@ -12,8 +12,8 @@ import {
 } from 'ra-core';
 
 import { fieldPropTypes, FieldProps, InjectedFieldProps } from './types';
+import { ClassesOverride } from '../types';
 import sanitizeRestProps from './sanitizeRestProps';
-import { ClassNameMap } from '@material-ui/styles';
 
 /**
  * A container component that fetches records from another resource specified
@@ -128,9 +128,11 @@ ReferenceArrayField.defaultProps = {
     addLabel: true,
 };
 
-interface ReferenceArrayFieldProps extends FieldProps, InjectedFieldProps {
+export interface ReferenceArrayFieldProps
+    extends FieldProps,
+        InjectedFieldProps {
     children: ReactElement;
-    classes?: Partial<ClassNameMap<ReferenceArrayFieldClassKey>>;
+    classes?: ClassesOverride<typeof useStyles>;
     filter?: Filter;
     page?: number;
     pagination?: ReactElement;
@@ -147,14 +149,14 @@ const useStyles = makeStyles(
     { name: 'RaReferenceArrayField' }
 );
 
-type ReferenceArrayFieldClassKey = 'progress';
-
-interface ReferenceArrayFieldViewProps
+export interface ReferenceArrayFieldViewProps
     extends Omit<
             ReferenceArrayFieldProps,
             'basePath' | 'resource' | 'page' | 'perPage'
         >,
-        ListControllerProps {}
+        ListControllerProps {
+    classes?: ClassesOverride<typeof useStyles>;
+}
 
 export const ReferenceArrayFieldView: FC<
     ReferenceArrayFieldViewProps

packages/ra-ui-materialui/src/field/ReferenceField.tsx

@@ -15,8 +15,8 @@ import {
 import LinearProgress from '../layout/LinearProgress';
 import Link from '../Link';
 import sanitizeRestProps from './sanitizeRestProps';
-import { ClassNameMap } from '@material-ui/styles';
 import { FieldProps, fieldPropTypes, InjectedFieldProps } from './types';
+import { ClassesOverride } from '../types';
 
 /**
  * Fetch reference record, and delegate rendering to child component.
@@ -129,9 +129,9 @@ ReferenceField.defaultProps = {
     link: 'edit',
 };
 
-interface ReferenceFieldProps extends FieldProps, InjectedFieldProps {
+export interface ReferenceFieldProps extends FieldProps, InjectedFieldProps {
     children: ReactElement;
-    classes?: Partial<ClassNameMap<ReferenceFieldClassKey>>;
+    classes?: ClassesOverride<typeof useStyles>;
     reference: string;
     resource?: string;
     source: string;
@@ -237,13 +237,11 @@ ReferenceFieldView.propTypes = {
     translateChoice: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 };
 
-type ReferenceFieldClassKey = 'link';
-
-interface ReferenceFieldViewProps
+export interface ReferenceFieldViewProps
     extends FieldProps,
         InjectedFieldProps,
         UseReferenceProps {
-    classes?: Partial<ClassNameMap<ReferenceFieldClassKey>>;
+    classes?: ClassesOverride<typeof useStyles>;
     reference: string;
     resource?: string;
     translateChoice?: Function | boolean;

packages/ra-ui-materialui/src/input/NumberInput.tsx

@@ -13,12 +13,6 @@ const convertStringToNumber = value => {
     return isNaN(float) ? null : float;
 };
 
-interface Props {
-    step?: string | number;
-    min?: string | number;
-    max?: string | number;
-}
-
 /**
  * An Input component for a number
  *
@@ -31,11 +25,7 @@ interface Props {
  *
  * The object passed as `options` props is passed to the material-ui <TextField> component
  */
-const NumberInput: FunctionComponent<
-    Props &
-        InputProps<TextFieldProps> &
-        Omit<TextFieldProps, 'label' | 'helperText'>
-> = ({
+const NumberInput: FunctionComponent<NumberInputProps> = ({
     format,
     helperText,
     label,
@@ -118,4 +108,20 @@ NumberInput.defaultProps = {
     textAlign: 'right',
 };
 
+export interface NumberInputProps
+    extends InputProps<TextFieldProps>,
+        Omit<
+            TextFieldProps,
+            | 'label'
+            | 'helperText'
+            | 'onChange'
+            | 'onBlur'
+            | 'onFocus'
+            | 'defaultValue'
+        > {
+    step?: string | number;
+    min?: string | number;
+    max?: string | number;
+}
+
 export default NumberInput;

packages/ra-ui-materialui/src/input/ReferenceInput.tsx

@@ -20,17 +20,6 @@ import LinearProgress from '../layout/LinearProgress';
 import Labeled from './Labeled';
 import ReferenceError from './ReferenceError';
 
-interface Props {
-    allowEmpty: boolean;
-    basePath: string;
-    children: ReactElement;
-    classes: any;
-    className: string;
-    label: string;
-    reference: string;
-    resource: string;
-    [key: string]: any;
-}
 /**
  * An Input component for choosing a reference record. Useful for foreign keys.
  *
@@ -110,7 +99,7 @@ interface Props {
  *     <AutocompleteInput optionText="title" />
  * </ReferenceInput>
  */
-const ReferenceInput: FunctionComponent<Props & InputProps> = ({
+const ReferenceInput: FunctionComponent<ReferenceInputProps> = ({
     format,
     onBlur,
     onChange,
@@ -165,6 +154,18 @@ ReferenceInput.defaultProps = {
     sort: { field: 'id', order: 'DESC' },
 };
 
+export interface ReferenceInputProps extends InputProps {
+    allowEmpty: boolean;
+    basePath: string;
+    children: ReactElement;
+    classes: any;
+    className: string;
+    label: string;
+    reference: string;
+    resource: string;
+    [key: string]: any;
+}
+
 const sanitizeRestProps = ({
     choices,
     className,
@@ -184,7 +185,7 @@ const sanitizeRestProps = ({
     ...rest
 }: any) => sanitizeInputProps(rest);
 
-interface ReferenceInputViewProps {
+export interface ReferenceInputViewProps {
     allowEmpty?: boolean;
     basePath: string;
     children: ReactElement;

packages/ra-ui-materialui/src/layout/AppBar.js → packages/ra-ui-materialui/src/layout/AppBar.tsx

@@ -10,7 +10,9 @@ import {
     Tooltip,
     Typography,
     useMediaQuery,
+    Theme,
 } from '@material-ui/core';
+import { AppBarProps as MuiAppBarProps } from '@material-ui/core/AppBar';
 
 import { makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -19,6 +21,7 @@ import { toggleSidebar, useTranslate } from 'ra-core';
 import LoadingIndicator from './LoadingIndicator';
 import DefaultUserMenu from './UserMenu';
 import HideOnScroll from './HideOnScroll';
+import { ClassesOverride } from '../types';
 
 const useStyles = makeStyles(
     theme => ({
@@ -80,13 +83,12 @@ const useStyles = makeStyles(
  *    );
  *};
  */
-const AppBar = props => {
+const AppBar = (props: AppBarProps): JSX.Element => {
     const {
         children,
         classes: classesOverride,
         className,
         color = 'secondary',
-        logo,
         logout,
         open,
         title,
@@ -95,7 +97,9 @@ const AppBar = props => {
     } = props;
     const classes = useStyles(props);
     const dispatch = useDispatch();
-    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
+    const isXSmall = useMediaQuery<Theme>(theme =>
+        theme.breakpoints.down('xs')
+    );
     const translate = useTranslate();
 
     return (
@@ -151,6 +155,7 @@ const AppBar = props => {
 
 AppBar.propTypes = {
     children: PropTypes.node,
+    // @ts-ignore
     classes: PropTypes.object,
     className: PropTypes.string,
     color: PropTypes.oneOf([
@@ -169,4 +174,12 @@ AppBar.defaultProps = {
     userMenu: <DefaultUserMenu />,
 };
 
+export interface AppBarProps extends Omit<MuiAppBarProps, 'title' | 'classes'> {
+    classes?: ClassesOverride<typeof useStyles>;
+    logout?: JSX.Element;
+    open?: boolean;
+    title?: string | JSX.Element;
+    userMenu?: JSX.Element;
+}
+
 export default AppBar;

packages/ra-ui-materialui/src/layout/CardContentInner.js → packages/ra-ui-materialui/src/layout/CardContentInner.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CardContent from '@material-ui/core/CardContent';
 import { makeStyles } from '@material-ui/core/styles';
 
+import { ClassesOverride } from '../types';
+
 const useStyles = makeStyles(
     theme => ({
         root: {
@@ -30,7 +33,7 @@ const useStyles = makeStyles(
  * padding double the spacing between each CardContent, leading to too much
  * wasted space. Use this component as a CardContent alternative.
  */
-const CardContentInner = props => {
+const CardContentInner = (props: CardContentInnerProps): JSX.Element => {
     const { className, children } = props;
     const classes = useStyles(props);
     return (
@@ -46,4 +49,10 @@ CardContentInner.propTypes = {
     children: PropTypes.node,
 };
 
+export interface CardContentInnerProps {
+    className?: string;
+    children: ReactNode;
+    classes?: ClassesOverride<typeof useStyles>;
+}
+
 export default CardContentInner;

packages/ra-ui-materialui/src/layout/DeviceTestWrapper.js → packages/ra-ui-materialui/src/layout/DeviceTestWrapper.tsx

@@ -14,7 +14,10 @@ import { createMuiTheme } from '@material-ui/core/styles';
  *     <MyResponsiveComponent />
  * <DeviceTestWrapper>
  */
-const DeviceTestWrapper = ({ width = 'md', children }) => {
+const DeviceTestWrapper = ({
+    width = 'md',
+    children,
+}: DeviceTestWrapperProps): JSX.Element => {
     const theme = createMuiTheme();
 
     // Use https://github.com/ericf/css-mediaquery as ponyfill.
@@ -37,4 +40,9 @@ const DeviceTestWrapper = ({ width = 'md', children }) => {
     );
 };
 
+export interface DeviceTestWrapperProps {
+    width: 'md' | 'xs' | 'sm' | 'lg' | 'xl';
+    children: JSX.Element;
+}
+
 export default DeviceTestWrapper;

packages/ra-ui-materialui/src/layout/Error.js → packages/ra-ui-materialui/src/layout/Error.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Fragment } from 'react';
+import { Fragment, HtmlHTMLAttributes, ErrorInfo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Button from '@material-ui/core/Button';
@@ -10,9 +10,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import ErrorIcon from '@material-ui/icons/Report';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import History from '@material-ui/icons/History';
+import { useTranslate } from 'ra-core';
 
 import Title, { TitlePropType } from './Title';
-import { useTranslate } from 'ra-core';
+import { ClassesOverride } from '../types';
 
 const useStyles = makeStyles(
     theme => ({
@@ -53,7 +54,7 @@ function goBack() {
     window.history.go(-1);
 }
 
-const Error = props => {
+const Error = (props: ErrorProps): JSX.Element => {
     const {
         error,
         errorInfo,
@@ -89,7 +90,7 @@ const Error = props => {
                 <div className={classes.toolbar}>
                     <Button
                         variant="contained"
-                        icon={<History />}
+                        startIcon={<History />}
                         onClick={goBack}
                     >
                         {translate('ra.action.back')}
@@ -108,4 +109,11 @@ Error.propTypes = {
     title: TitlePropType,
 };
 
+export interface ErrorProps extends HtmlHTMLAttributes<HTMLDivElement> {
+    classes?: ClassesOverride<typeof useStyles>;
+    className?: string;
+    error: any;
+    errorInfo?: ErrorInfo;
+    title?: string;
+}
 export default Error;