Fix layout component type

examples/demo/src/layout/Layout.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Layout, Sidebar } from 'react-admin';
+import { Layout, LayoutProps, Sidebar } from 'react-admin';
 import AppBar from './AppBar';
 import Menu from './Menu';
 import { darkTheme, lightTheme } from './themes';
 import { AppState } from '../types';
 
 const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
 
-export default (props: any) => {
+export default (props: LayoutProps) => {
     const theme = useSelector((state: AppState) =>
         state.theme === 'dark' ? darkTheme : lightTheme
     );

examples/demo/src/layout/Menu.tsx

@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { FC, useState } from 'react';
+import { FC, useState, ReactNode } from 'react';
 import { useSelector } from 'react-redux';
 import SettingsIcon from '@material-ui/icons/Settings';
 import LabelIcon from '@material-ui/icons/Label';
 import { useMediaQuery, Theme, Box } from '@material-ui/core';
-import { useTranslate, DashboardMenuItem, MenuItemLink } from 'react-admin';
+import {
+    useTranslate,
+    DashboardMenuItem,
+    MenuItemLink,
+    MenuProps,
+} from 'react-admin';
 
 import visitors from '../visitors';
 import orders from '../orders';
@@ -17,13 +22,7 @@ import { AppState } from '../types';
 
 type MenuName = 'menuCatalog' | 'menuSales' | 'menuCustomers';
 
-interface Props {
-    dense: boolean;
-    logout: () => void;
-    onMenuClick: () => void;
-}
-
-const Menu: FC<Props> = ({ onMenuClick, dense, logout }) => {
+const Menu: FC<MenuProps> = ({ onMenuClick, logout, dense = false }) => {
     const [state, setState] = useState({
         menuCatalog: true,
         menuSales: true,

examples/demo/src/layout/themes.ts

@@ -6,7 +6,7 @@ export const darkTheme = {
         secondary: {
             main: '#FBBA72',
         },
-        type: 'dark', // Switching the dark mode on is a single property value change.
+        type: 'dark' as 'dark', // Switching the dark mode on is a single property value change.
     },
     overrides: {
         MuiAppBar: {
@@ -32,6 +32,7 @@ export const lightTheme = {
         background: {
             default: '#fcfcfe',
         },
+        type: 'light' as 'light',
     },
     shape: {
         borderRadius: 10,

packages/ra-core/src/core/CoreAdminRouter.tsx

@@ -17,13 +17,13 @@ import {
     CustomRoutes,
     CatchAllComponent,
     LayoutComponent,
-    LayoutProps,
+    CoreLayoutProps,
     ResourceProps,
     RenderResourcesFunction,
     ResourceElement,
 } from '../types';
 
-export interface AdminRouterProps extends LayoutProps {
+export interface AdminRouterProps extends CoreLayoutProps {
     layout: LayoutComponent;
     catchAll: CatchAllComponent;
     children?: AdminChildren;

packages/ra-core/src/core/CoreAdminUI.tsx

@@ -7,7 +7,7 @@ import {
     TitleComponent,
     LoginComponent,
     LayoutComponent,
-    LayoutProps,
+    CoreLayoutProps,
     AdminChildren,
     CatchAllComponent,
     CustomRoutes,
@@ -16,7 +16,7 @@ import {
 
 export type ChildrenFunction = () => ComponentType[];
 
-const DefaultLayout: FunctionComponent<LayoutProps> = ({ children }) => (
+const DefaultLayout: FunctionComponent<CoreLayoutProps> = ({ children }) => (
     <>{children}</>
 );
 

packages/ra-core/src/types.ts

@@ -386,21 +386,19 @@ interface LoginComponentProps extends RouteComponentProps {
 export type LoginComponent = ComponentType<LoginComponentProps>;
 export type DashboardComponent = ComponentType<WithPermissionsChildrenParams>;
 
-export interface LayoutProps {
-    appBar?: ComponentType;
+export interface CoreLayoutProps {
     children?: ReactNode;
     dashboard?: DashboardComponent;
     logout?: ReactNode;
     menu?: ComponentType<{
         logout?: ReactNode;
         hasDashboard?: boolean;
     }>;
-    sideBar?: ComponentType;
     theme?: ThemeOptions;
     title?: TitleComponent;
 }
 
-export type LayoutComponent = ComponentType<LayoutProps>;
+export type LayoutComponent = ComponentType<CoreLayoutProps>;
 
 export interface ResourceComponentInjectedProps {
     basePath?: string;

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

@@ -13,20 +13,20 @@ import React, {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import {
     createMuiTheme,
     withStyles,
     createStyles,
 } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import { ThemeOptions } from '@material-ui/core';
-import { ComponentPropType, CustomRoutes, LayoutProps } from 'ra-core';
+import { ComponentPropType, CoreLayoutProps } from 'ra-core';
 import compose from 'lodash/flowRight';
 
 import DefaultAppBar from './AppBar';
 import DefaultSidebar from './Sidebar';
-import DefaultMenu from './Menu';
+import DefaultMenu, { MenuProps } from './Menu';
 import DefaultNotification from './Notification';
 import DefaultError from './Error';
 import defaultTheme from '../defaultTheme';
@@ -78,15 +78,10 @@ const styles = theme =>
         },
     });
 
-const sanitizeRestProps = ({
-    staticContext,
-    history,
-    location,
-    match,
-    ...props
-}: RestProps) => props;
-
-class Layout extends Component<MuiLayoutProps, LayoutState> {
+class LayoutWithoutTheme extends Component<
+    LayoutWithoutThemeProps,
+    LayoutState
+> {
     state = { hasError: false, errorMessage: null, errorInfo: null };
 
     constructor(props) {
@@ -113,7 +108,6 @@ class Layout extends Component<MuiLayoutProps, LayoutState> {
             children,
             classes,
             className,
-            customRoutes,
             error,
             dashboard,
             logout,
@@ -122,14 +116,19 @@ class Layout extends Component<MuiLayoutProps, LayoutState> {
             open,
             sidebar,
             title,
+            // sanitize react-router props
+            match,
+            location,
+            history,
+            staticContext,
             ...props
         } = this.props;
         const { hasError, errorMessage, errorInfo } = this.state;
         return (
             <>
                 <div
                     className={classnames('layout', classes.root, className)}
-                    {...sanitizeRestProps(props)}
+                    {...props}
                 >
                     <div className={classes.appFrame}>
                         {createElement(appBar, { title, open, logout })}
@@ -162,7 +161,6 @@ class Layout extends Component<MuiLayoutProps, LayoutState> {
         children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
         classes: PropTypes.object,
         className: PropTypes.string,
-        customRoutes: PropTypes.array,
         dashboard: ComponentPropType,
         error: ComponentPropType,
         history: PropTypes.object.isRequired,
@@ -183,51 +181,39 @@ class Layout extends Component<MuiLayoutProps, LayoutState> {
     };
 }
 
-export interface MuiLayoutProps
-    extends LayoutProps,
-        RouteComponentProps,
+export interface LayoutProps
+    extends CoreLayoutProps,
         Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'> {
-    className?: string;
-    classes?: any;
-    customRoutes?: CustomRoutes;
     appBar?: ComponentType<{
         title?: string | ReactElement<any>;
         open?: boolean;
         logout?: ReactNode;
     }>;
-    sidebar?: ComponentType<{ children: JSX.Element }>;
+    classes?: any;
+    className?: string;
     error?: ComponentType<{
         error?: string;
         errorInfo?: React.ErrorInfo;
         title?: string | ReactElement<any>;
     }>;
+    menu?: ComponentType<MenuProps>;
     notification?: ComponentType;
-    open?: boolean;
+    sidebar?: ComponentType<{ children: JSX.Element }>;
+    theme?: ThemeOptions;
 }
 
-export type RestProps = Omit<
-    MuiLayoutProps,
-    | 'appBar'
-    | 'children'
-    | 'classes'
-    | 'className'
-    | 'customRoutes'
-    | 'error'
-    | 'dashboard'
-    | 'logout'
-    | 'menu'
-    | 'notification'
-    | 'open'
-    | 'sidebar'
-    | 'title'
->;
-
 export interface LayoutState {
     hasError: boolean;
     errorMessage: string;
     errorInfo: ErrorInfo;
 }
 
+interface LayoutWithoutThemeProps
+    extends RouteComponentProps,
+        Omit<LayoutProps, 'theme'> {
+    open?: boolean;
+}
+
 const mapStateToProps = state => ({
     open: state.admin.ui.sidebarOpen,
 });
@@ -239,12 +225,12 @@ const EnhancedLayout = compose(
     ),
     withRouter,
     withStyles(styles, { name: 'RaLayout' })
-)(Layout);
+)(LayoutWithoutTheme);
 
-const LayoutWithTheme = ({
+const Layout = ({
     theme: themeOverride,
     ...props
-}: LayoutWithThemeProps): JSX.Element => {
+}: LayoutProps): JSX.Element => {
     const themeProp = useRef(themeOverride);
     const [theme, setTheme] = useState(createMuiTheme(themeOverride));
 
@@ -262,16 +248,12 @@ const LayoutWithTheme = ({
     );
 };
 
-LayoutWithTheme.propTypes = {
+Layout.propTypes = {
     theme: PropTypes.object,
 };
 
-LayoutWithTheme.defaultProps = {
+Layout.defaultProps = {
     theme: defaultTheme,
 };
 
-interface LayoutWithThemeProps extends LayoutProps {
-    theme?: ThemeOptions;
-}
-
-export default LayoutWithTheme;
+export default Layout;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement } from 'react';
+import { FC, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { shallowEqual, useSelector } from 'react-redux';
 // @ts-ignore
@@ -100,8 +100,8 @@ export interface MenuProps {
     classes?: object;
     className?: string;
     dense?: boolean;
-    hasDashboard: boolean;
-    logout?: ReactElement;
+    hasDashboard?: boolean;
+    logout?: ReactNode;
     onMenuClick?: () => void;
 }
 

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

@@ -6,7 +6,7 @@ import DashboardMenuItem, { DashboardMenuItemProps } from './DashboardMenuItem';
 import DeviceTestWrapper, { DeviceTestWrapperProps } from './DeviceTestWrapper';
 import Error, { ErrorProps } from './Error';
 import HideOnScroll, { HideOnScrollProps } from './HideOnScroll';
-import Layout from './Layout';
+import Layout, { LayoutProps } from './Layout';
 import Loading from './Loading';
 import LinearProgress from './LinearProgress';
 import LoadingIndicator from './LoadingIndicator';
@@ -54,6 +54,7 @@ export type {
     DeviceTestWrapperProps,
     ErrorProps,
     HideOnScrollProps,
+    LayoutProps,
     MenuItemLinkProps,
     MenuProps,
     ResponsiveProps,