Fix LayoutPRops conflict

vikky410 · Nov 2, 2020 · 085c2b5 · 085c2b5
1 parent 3f08c64
commit 085c2b5
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 26 deletions.
diff --git a/examples/demo/src/layout/Layout.tsx b/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
     );

diff --git a/packages/ra-core/src/core/CoreAdminRouter.tsx b/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;

diff --git a/packages/ra-core/src/core/CoreAdminUI.tsx b/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}</>
 );
 

diff --git a/packages/ra-core/src/types.ts b/packages/ra-core/src/types.ts
@@ -386,7 +386,7 @@ interface LoginComponentProps extends RouteComponentProps {
 export type LoginComponent = ComponentType<LoginComponentProps>;
 export type DashboardComponent = ComponentType<WithPermissionsChildrenParams>;
 
-export interface LayoutProps {
+export interface CoreLayoutProps {
     appBar?: ComponentType;
     children?: ReactNode;
     dashboard?: DashboardComponent;
@@ -395,12 +395,12 @@ export interface LayoutProps {
         logout?: ReactNode;
         hasDashboard?: boolean;
     }>;
-    sideBar?: ComponentType;
+    sidebar?: ComponentType;
     theme?: ThemeOptions;
     title?: TitleComponent;
 }
 
-export type LayoutComponent = ComponentType<LayoutProps>;
+export type LayoutComponent = ComponentType<CoreLayoutProps>;
 
 export interface ResourceComponentInjectedProps {
     basePath?: string;

diff --git a/packages/ra-ui-materialui/src/layout/Layout.tsx b/packages/ra-ui-materialui/src/layout/Layout.tsx
@@ -21,11 +21,7 @@ import {
 } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import { ThemeOptions } from '@material-ui/core';
-import {
-    ComponentPropType,
-    CustomRoutes,
-    LayoutProps as MuiLayoutProps,
-} from 'ra-core';
+import { ComponentPropType, CustomRoutes, CoreLayoutProps } from 'ra-core';
 import compose from 'lodash/flowRight';
 
 import DefaultAppBar from './AppBar';
@@ -90,7 +86,10 @@ const sanitizeRestProps = ({
     ...props
 }: RestProps) => props;
 
-class Layout extends Component<LayoutProps, LayoutState> {
+class LayoutWithoutTheme extends Component<
+    LayoutWithoutThemeProps,
+    LayoutState
+> {
     state = { hasError: false, errorMessage: null, errorInfo: null };
 
     constructor(props) {
@@ -187,8 +186,8 @@ class Layout extends Component<LayoutProps, LayoutState> {
     };
 }
 
-export interface LayoutProps
-    extends MuiLayoutProps,
+interface LayoutWithoutThemeProps
+    extends CoreLayoutProps,
         RouteComponentProps,
         Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'> {
     className?: string;
@@ -210,7 +209,7 @@ export interface LayoutProps
 }
 
 export type RestProps = Omit<
-    LayoutProps,
+    LayoutWithoutThemeProps,
     | 'appBar'
     | 'children'
     | 'classes'
@@ -243,12 +242,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));
 
@@ -266,16 +265,16 @@ const LayoutWithTheme = ({
     );
 };
 
-LayoutWithTheme.propTypes = {
+Layout.propTypes = {
     theme: PropTypes.object,
 };
 
-LayoutWithTheme.defaultProps = {
+Layout.defaultProps = {
     theme: defaultTheme,
 };
 
-interface LayoutWithThemeProps extends LayoutProps {
+export interface LayoutProps extends LayoutWithoutThemeProps {
     theme?: ThemeOptions;
 }
 
-export default LayoutWithTheme;
+export default Layout;
diff --git a/packages/ra-ui-materialui/src/layout/index.ts b/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,