convert ra-ui-materialui layout to typescript

packages/ra-ui-materialui/src/defaultTheme.ts

@@ -1,4 +1,24 @@
-export default {
+import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
+import { CSSProperties } from 'react';
+
+type Width = CSSProperties['width'];
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+    interface Theme {
+        sidebar?: {
+            width: Width;
+            closedWidth: Width;
+        };
+    }
+    interface ThemeOptions {
+        sidebar?: {
+            width: Width;
+            closedWidth: Width;
+        };
+    }
+}
+
+const defaultTheme: ThemeOptions = {
     palette: {
         secondary: {
             light: '#6ec6ff',
@@ -7,11 +27,6 @@ export default {
             contrastText: '#fff',
         },
     },
-    typography: {
-        title: {
-            fontWeight: 400,
-        },
-    },
     sidebar: {
         width: 240,
         closedWidth: 55,
@@ -27,3 +42,5 @@ export default {
         },
     },
 };
+
+export default defaultTheme;

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import CardContent from '@material-ui/core/CardContent';
+import CardContent, { CardContentProps } from '@material-ui/core/CardContent';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
@@ -30,11 +30,11 @@ 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 { className, children } = props;
+const CardContentInner: FC<CardContentProps> = props => {
+    const { className, children, ...rest } = props;
     const classes = useStyles(props);
     return (
-        <CardContent className={classnames(classes.root, className)}>
+        <CardContent className={classnames(classes.root, className)} {...rest}>
             {children}
         </CardContent>
     );

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

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { ReactNode, FC } from 'react';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider } from '@material-ui/styles';
 import { createMuiTheme } from '@material-ui/core/styles';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+
+interface Props {
+    width: Breakpoint;
+}
 
 /**
  * Test utility to simulate a device form factor for server-side mediaQueries
@@ -14,7 +19,7 @@ import { createMuiTheme } from '@material-ui/core/styles';
  *     <MyResponsiveComponent />
  * <DeviceTestWrapper>
  */
-const DeviceTestWrapper = ({ width = 'md', children }) => {
+const DeviceTestWrapper: FC<Props> = ({ width = 'md', children }) => {
     const theme = createMuiTheme();
 
     // Use https://github.com/ericf/css-mediaquery as ponyfill.

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, FC, ErrorInfo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Button from '@material-ui/core/Button';
@@ -10,7 +10,7 @@ import ErrorIcon from '@material-ui/icons/Report';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import History from '@material-ui/icons/History';
 
-import Title, { TitlePropType } from './Title';
+import Title, { TitlePropType, TitleProps } from './Title';
 import { useTranslate } from 'ra-core';
 
 const useStyles = makeStyles(
@@ -52,7 +52,15 @@ function goBack() {
     window.history.go(-1);
 }
 
-const Error = props => {
+export interface ErrorComponentProps {
+    className?: string;
+    error: Error;
+    errorInfo: ErrorInfo;
+    title: TitleProps['defaultTitle'];
+    classes?: object;
+}
+
+const Error: FC<ErrorComponentProps> = props => {
     const {
         error,
         errorInfo,
@@ -86,12 +94,8 @@ const Error = props => {
                     </ExpansionPanel>
                 )}
                 <div className={classes.toolbar}>
-                    <Button
-                        variant="contained"
-                        icon={<History />}
-                        onClick={goBack}
-                    >
-                        {translate('ra.action.back')}
+                    <Button variant="contained" onClick={goBack}>
+                        <History /> {translate('ra.action.back')}
                     </Button>
                 </div>
             </div>
@@ -102,8 +106,8 @@ const Error = props => {
 Error.propTypes = {
     classes: PropTypes.object,
     className: PropTypes.string,
-    error: PropTypes.object.isRequired,
-    errorInfo: PropTypes.object,
+    error: PropTypes.any.isRequired,
+    errorInfo: PropTypes.any,
     title: TitlePropType,
 };
 

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

@@ -4,26 +4,37 @@ import React, {
     useEffect,
     useRef,
     useState,
+    ComponentType,
+    ReactNode,
+    ErrorInfo,
+    FC,
 } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 import {
     createMuiTheme,
     withStyles,
     createStyles,
 } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider, ClassNameMap } from '@material-ui/styles';
 import compose from 'recompose/compose';
 
 import DefaultAppBar from './AppBar';
 import DefaultSidebar from './Sidebar';
-import DefaultMenu from './Menu';
-import DefaultNotification from './Notification';
-import DefaultError from './Error';
+import DefaultMenu, { MenuProps } from './Menu';
+import DefaultNotification, { NotificationProps } from './Notification';
+import DefaultError, { ErrorComponentProps } from './Error';
 import defaultTheme from '../defaultTheme';
-import { ComponentPropType } from 'ra-core';
+import {
+    ComponentPropType,
+    DashboardComponent,
+    TitleComponent,
+    ReduxState,
+} from 'ra-core';
+import { DrawerProps } from '@material-ui/core';
+import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
 
 const styles = theme =>
     createStyles({
@@ -74,11 +85,59 @@ const sanitizeRestProps = ({
     location,
     match,
     ...props
-}) => props;
+}: Partial<LayoutProps>): Omit<
+    LayoutProps,
+    keyof RouteComponentProps | 'title'
+> => props;
+
+interface LayoutProps extends RouteComponentProps {
+    appBar?: ComponentType<any>;
+    classes?: ClassNameMap;
+    className?: string;
+    customRoutes?: any[];
+    dashboard?: DashboardComponent;
+    error?: ComponentType<ErrorComponentProps>;
+    logout?: ReactNode;
+    menu?: ComponentType<MenuProps>;
+    notification?: ComponentType<NotificationProps>;
+    open?: boolean;
+    sidebar?: ComponentType<DrawerProps>;
+    title: TitleComponent;
+}
 
-class Layout extends Component {
-    state = { hasError: false, errorMessage: null, errorInfo: null };
+type LayoutState = {
+    hasError?: boolean;
+    errorMessage: Error | null;
+    errorInfo: ErrorInfo | null;
+};
 
+class Layout extends Component<LayoutProps, LayoutState> {
+    static propTypes = {
+        appBar: ComponentPropType,
+        children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+        classes: PropTypes.object,
+        className: PropTypes.string,
+        customRoutes: PropTypes.array,
+        dashboard: ComponentPropType,
+        error: ComponentPropType,
+        history: PropTypes.object.isRequired,
+        logout: PropTypes.element,
+        menu: ComponentPropType,
+        notification: ComponentPropType,
+        open: PropTypes.bool,
+        sidebar: ComponentPropType,
+        title: PropTypes.node.isRequired,
+    };
+
+    static defaultProps = {
+        appBar: DefaultAppBar,
+        error: DefaultError,
+        menu: DefaultMenu,
+        notification: DefaultNotification,
+        sidebar: DefaultSidebar,
+    };
+
+    state = { hasError: false, errorMessage: null, errorInfo: null };
     constructor(props) {
         super(props);
         /**
@@ -146,32 +205,7 @@ class Layout extends Component {
     }
 }
 
-Layout.propTypes = {
-    appBar: ComponentPropType,
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    customRoutes: PropTypes.array,
-    dashboard: ComponentPropType,
-    error: ComponentPropType,
-    history: PropTypes.object.isRequired,
-    logout: PropTypes.element,
-    menu: ComponentPropType,
-    notification: ComponentPropType,
-    open: PropTypes.bool,
-    sidebar: ComponentPropType,
-    title: PropTypes.node.isRequired,
-};
-
-Layout.defaultProps = {
-    appBar: DefaultAppBar,
-    error: DefaultError,
-    menu: DefaultMenu,
-    notification: DefaultNotification,
-    sidebar: DefaultSidebar,
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: ReduxState) => ({
     open: state.admin.ui.sidebarOpen,
 });
 
@@ -184,7 +218,14 @@ const EnhancedLayout = compose(
     withStyles(styles, { name: 'RaLayout' })
 )(Layout);
 
-const LayoutWithTheme = ({ theme: themeOverride, ...props }) => {
+interface LayoutWithThemeProps extends LayoutProps {
+    theme?: ThemeOptions;
+}
+
+const LayoutWithTheme: FC<LayoutWithThemeProps> = ({
+    theme: themeOverride,
+    ...props
+}) => {
     const themeProp = useRef(themeOverride);
     const [theme, setTheme] = useState(createMuiTheme(themeOverride));
 
@@ -203,7 +244,7 @@ const LayoutWithTheme = ({ theme: themeOverride, ...props }) => {
 };
 
 LayoutWithTheme.propTypes = {
-    theme: PropTypes.object,
+    theme: PropTypes.any,
 };
 
 LayoutWithTheme.defaultProps = {

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

@@ -1,5 +1,7 @@
-import React from 'react';
-import Progress from '@material-ui/core/LinearProgress';
+import React, { FC } from 'react';
+import Progress, {
+    LinearProgressProps,
+} from '@material-ui/core/LinearProgress';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -24,7 +26,7 @@ const useStyles = makeStyles(
  *
  * @param {Object} classes CSS class names
  */
-const LinearProgress = props => {
+const LinearProgress: FC<LinearProgressProps> = props => {
     const { classes: classesOverride, className, ...rest } = props;
     const classes = useStyles(props);
     return (

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -33,7 +33,13 @@ const useStyles = makeStyles(
     { name: 'RaLoading' }
 );
 
-const Loading = props => {
+interface Props {
+    className?: string;
+    loadingPrimary?: string;
+    loadingSecondary?: string;
+}
+
+const Loading: FC<Props> = props => {
     const {
         className,
         loadingPrimary = 'ra.page.loading',
@@ -53,7 +59,6 @@ const Loading = props => {
 };
 
 Loading.propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     loadingPrimary: PropTypes.string,
     loadingSecondary: PropTypes.string,