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, ReactNode } 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,7 +30,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: FC<Props> = props => {
     const { className, children } = props;
     const classes = useStyles(props);
     return (
@@ -40,6 +40,12 @@ const CardContentInner = props => {
     );
 };
 
+interface Props {
+    classes?: object;
+    className?: string;
+    children: ReactNode;
+}
+
 CardContentInner.propTypes = {
     className: PropTypes.string,
     classes: PropTypes.object,

packages/ra-ui-materialui/src/layout/Confirm.tsx

@@ -104,8 +104,13 @@ const Confirm: FC<ConfirmProps> = props => {
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Button disabled={loading} onClick={onClose}>
-                    <CancelIcon className={classes.iconPaddingStyle} />
+                <Button
+                    disabled={loading}
+                    onClick={onClose}
+                    startIcon={
+                        <CancelIcon className={classes.iconPaddingStyle} />
+                    }
+                >
                     {translate(cancel, { _: cancel })}
                 </Button>
                 <Button
@@ -116,8 +121,10 @@ const Confirm: FC<ConfirmProps> = props => {
                         [classes.confirmPrimary]: confirmColor === 'primary',
                     })}
                     autoFocus
+                    startIcon={
+                        <ConfirmIcon className={classes.iconPaddingStyle} />
+                    }
                 >
-                    <ConfirmIcon className={classes.iconPaddingStyle} />
                     {translate(confirm, { _: confirm })}
                 </Button>
             </DialogActions>

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,7 @@ function goBack() {
     window.history.go(-1);
 }
 
-const Error = props => {
+const Error: FC<ErrorProps> = props => {
     const {
         error,
         errorInfo,
@@ -88,8 +88,8 @@ const Error = props => {
                 <div className={classes.toolbar}>
                     <Button
                         variant="contained"
-                        icon={<History />}
                         onClick={goBack}
+                        startIcon={<History />}
                     >
                         {translate('ra.action.back')}
                     </Button>
@@ -99,11 +99,19 @@ const Error = props => {
     );
 };
 
+export interface ErrorProps {
+    className?: string;
+    error: Error;
+    errorInfo: ErrorInfo;
+    title: TitleProps['defaultTitle'];
+    classes?: object;
+}
+
 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/ErrorBoundary.tsx

@@ -0,0 +1,63 @@
+import { Component, ComponentType, createElement, ErrorInfo } from 'react';
+import PropTypes from 'prop-types';
+import { ComponentPropType, TitleComponent } from 'ra-core';
+import { withRouter, RouteComponentProps } from 'react-router';
+
+import { ErrorProps } from './Error';
+
+class _ErrorBoundary extends Component<
+    ErrorBoundaryProps & RouteComponentProps,
+    ErrorBoundaryState
+> {
+    static propTypes = {
+        children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+        error: ComponentPropType,
+        title: PropTypes.element.isRequired,
+    };
+
+    state = { hasError: false, errorMessage: null, errorInfo: null };
+
+    constructor(props) {
+        super(props);
+        /**
+         * Reset the error state upon navigation
+         *
+         * @see https://stackoverflow.com/questions/48121750/browser-navigation-broken-by-use-of-react-error-boundaries
+         */
+        props.history.listen(() => {
+            if (this.state.hasError) {
+                this.setState({ hasError: false });
+            }
+        });
+    }
+
+    componentDidCatch(errorMessage, errorInfo) {
+        this.setState({ hasError: true, errorMessage, errorInfo });
+    }
+
+    render() {
+        const { hasError, errorMessage, errorInfo } = this.state;
+        const { children, error, title } = this.props;
+
+        return hasError
+            ? createElement(error, {
+                  error: errorMessage,
+                  errorInfo,
+                  title,
+              })
+            : children;
+    }
+}
+
+export const ErrorBoundary = withRouter(_ErrorBoundary);
+
+export interface ErrorBoundaryProps {
+    error: ComponentType<ErrorProps>;
+    title?: TitleComponent;
+}
+
+interface ErrorBoundaryState {
+    hasError?: boolean;
+    errorMessage: Error | null;
+    errorInfo: ErrorInfo | null;
+}