From 224fb491caa833bf3f5087c5198e74c15677fb4d Mon Sep 17 00:00:00 2001 From: Dimitri Kopriwa Date: Tue, 26 Mar 2019 04:12:14 +0700 Subject: [PATCH 1/2] feat(layout): Added prop layout and added deprecation warning to appLayout BREAKING CHANGE: the prop appLayout will be removed in favor of layout --- docs/Admin.md | 8 ++++---- docs/Theming.md | 20 ++++++++++---------- docs/_layouts/default.html | 6 +++--- packages/ra-core/src/CoreAdmin.tsx | 14 +++++++++++--- packages/ra-core/src/CoreAdminRouter.tsx | 6 +++--- packages/react-admin/src/Admin.ts | 2 +- 6 files changed, 32 insertions(+), 24 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 67959ee8da8..645fc604438 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -34,7 +34,7 @@ Here are all the props accepted by the component: - [`catchAll`](#catchall) - [`menu`](#menu) - [`theme`](#theme) - - [`appLayout`](#applayout) + - [`layout`](#layout) - [`customReducers`](#customreducers) - [`customSagas`](#customsagas) - [`customRoutes`](#customroutes) @@ -153,7 +153,7 @@ const App = () => ( ## `menu` -**Tip**: This prop is deprecated. To override the menu component, use a [custom layout](#applayout) instead. +**Tip**: This prop is deprecated. To override the menu component, use a [custom layout](#layout) instead. React-admin uses the list of `` components passed as children of `` to build a menu to each resource with a `list` component. @@ -243,7 +243,7 @@ const App = () => ( For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://material-ui.com/customization/themes/). -## `appLayout` +## `layout` If you want to deeply customize the app header, the menu, or the notifications, the best way is to provide a custom layout component. It must contain a `{children}` placeholder, where react-admin will render the resources. If you use material UI fields and inputs, it should contain a `` element. And finally, if you want to show the spinner in the app header when the app fetches data in the background, the Layout should connect to the redux store. @@ -254,7 +254,7 @@ Use the [default layout](https://github.com/marmelab/react-admin/blob/master/pac import MyLayout from './MyLayout'; const App = () => ( - + // ... ); diff --git a/docs/Theming.md b/docs/Theming.md index 8d1e4530744..18bd97903f2 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -352,14 +352,14 @@ const App = () => ( ## Using a Custom Layout -Instead of the default layout, you can use your own component as the admin layout. Just use the `appLayout` prop of the `` component: +Instead of the default layout, you can use your own component as the admin layout. Just use the `layout` prop of the `` component: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -605,14 +605,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` with the `appLayout` prop: +Then, use this layout in the `` with the `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -709,14 +709,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` `appLayout` prop: +Then, use this layout in the `` `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -807,14 +807,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` `applayout` prop: +Then, use this layout in the `` `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -874,14 +874,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` `applayout` prop: +Then, use this layout in the `` `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 56a5b78a58b..d0ad2afb962 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -152,8 +152,8 @@
  • - - appLayout + + layout
  • @@ -729,7 +729,7 @@
  • <Query> and <Mutation> -
    • +
  • Using a Custom Action Creator
    • diff --git a/packages/ra-core/src/CoreAdmin.tsx b/packages/ra-core/src/CoreAdmin.tsx index 95334544c95..550fa14e56b 100644 --- a/packages/ra-core/src/CoreAdmin.tsx +++ b/packages/ra-core/src/CoreAdmin.tsx @@ -29,7 +29,8 @@ export type ChildrenFunction = () => ComponentType[]; const DefaultLayout: SFC = ({ children }) => <>{children}; export interface AdminProps { - appLayout: LayoutComponent; + layout: LayoutComponent; + appLayout?: LayoutComponent; authProvider?: AuthProvider; children?: AdminChildren; catchAll: CatchAllComponent; @@ -61,7 +62,8 @@ class CoreAdminBase extends Component { static defaultProps: Partial = { catchAll: () => null, - appLayout: DefaultLayout, + layout: DefaultLayout, + appLayout: undefined, loading: () => null, loginPage: false, }; @@ -90,6 +92,7 @@ React-admin requires a valid dataProvider function to work.`); renderCore() { const { + layout, appLayout, authProvider, children, @@ -106,6 +109,11 @@ React-admin requires a valid dataProvider function to work.`); const logout = authProvider ? createElement(logoutButton) : null; + if (appLayout) { + console.warn( + 'You are using deprecated prop "appLayout", it was replaced by "layout", see https://github.com/marmelab/react-admin/issues/2918' + ); + } if (loginPage === true && process.env.NODE_ENV !== 'production') { console.warn( 'You passed true to the loginPage prop. You must either pass false to disable it or a component class to customize it' @@ -133,7 +141,7 @@ React-admin requires a valid dataProvider function to work.`); path="/" render={props => ( createElement( - appLayout, + layout, { dashboard, logout, diff --git a/packages/react-admin/src/Admin.ts b/packages/react-admin/src/Admin.ts index 358ad1059a6..bdf280d36ef 100644 --- a/packages/react-admin/src/Admin.ts +++ b/packages/react-admin/src/Admin.ts @@ -10,7 +10,7 @@ import { const Admin = CoreAdmin; Admin.defaultProps = { - appLayout: DefaultLayout, + layout: DefaultLayout, catchAll: NotFound, loading: Loading, loginPage: Login, From a45ee228284693d5bb10ff55f1524585fb258c5a Mon Sep 17 00:00:00 2001 From: Dimitri Kopriwa Date: Tue, 26 Mar 2019 04:12:14 +0700 Subject: [PATCH 2/2] feat(layout): Added prop layout and added deprecation warning to appLayout BREAKING CHANGE: the prop appLayout will be removed in favor of layout Fix https://github.com/marmelab/react-admin/issues/2918 --- docs/Admin.md | 8 ++++---- docs/Theming.md | 20 ++++++++++---------- docs/_layouts/default.html | 6 +++--- packages/ra-core/src/CoreAdmin.tsx | 14 +++++++++++--- packages/ra-core/src/CoreAdminRouter.tsx | 6 +++--- packages/react-admin/src/Admin.ts | 2 +- 6 files changed, 32 insertions(+), 24 deletions(-) diff --git a/docs/Admin.md b/docs/Admin.md index 67959ee8da8..645fc604438 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -34,7 +34,7 @@ Here are all the props accepted by the component: - [`catchAll`](#catchall) - [`menu`](#menu) - [`theme`](#theme) - - [`appLayout`](#applayout) + - [`layout`](#layout) - [`customReducers`](#customreducers) - [`customSagas`](#customsagas) - [`customRoutes`](#customroutes) @@ -153,7 +153,7 @@ const App = () => ( ## `menu` -**Tip**: This prop is deprecated. To override the menu component, use a [custom layout](#applayout) instead. +**Tip**: This prop is deprecated. To override the menu component, use a [custom layout](#layout) instead. React-admin uses the list of `` components passed as children of `` to build a menu to each resource with a `list` component. @@ -243,7 +243,7 @@ const App = () => ( For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://material-ui.com/customization/themes/). -## `appLayout` +## `layout` If you want to deeply customize the app header, the menu, or the notifications, the best way is to provide a custom layout component. It must contain a `{children}` placeholder, where react-admin will render the resources. If you use material UI fields and inputs, it should contain a `` element. And finally, if you want to show the spinner in the app header when the app fetches data in the background, the Layout should connect to the redux store. @@ -254,7 +254,7 @@ Use the [default layout](https://github.com/marmelab/react-admin/blob/master/pac import MyLayout from './MyLayout'; const App = () => ( - + // ... ); diff --git a/docs/Theming.md b/docs/Theming.md index 8d1e4530744..18bd97903f2 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -352,14 +352,14 @@ const App = () => ( ## Using a Custom Layout -Instead of the default layout, you can use your own component as the admin layout. Just use the `appLayout` prop of the `` component: +Instead of the default layout, you can use your own component as the admin layout. Just use the `layout` prop of the `` component: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -605,14 +605,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` with the `appLayout` prop: +Then, use this layout in the `` with the `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -709,14 +709,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` `appLayout` prop: +Then, use this layout in the `` `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -807,14 +807,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` `applayout` prop: +Then, use this layout in the `` `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); @@ -874,14 +874,14 @@ const MyLayout = (props) => ; export default MyLayout; ``` -Then, use this layout in the `` `applayout` prop: +Then, use this layout in the `` `layout` prop: ```jsx // in src/App.js import MyLayout from './MyLayout'; const App = () => ( - + // ... ); diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 56a5b78a58b..d0ad2afb962 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -152,8 +152,8 @@
    • - - appLayout + + layout
    • @@ -729,7 +729,7 @@
    • <Query> and <Mutation> -
      • +
    • Using a Custom Action Creator
      • diff --git a/packages/ra-core/src/CoreAdmin.tsx b/packages/ra-core/src/CoreAdmin.tsx index 95334544c95..550fa14e56b 100644 --- a/packages/ra-core/src/CoreAdmin.tsx +++ b/packages/ra-core/src/CoreAdmin.tsx @@ -29,7 +29,8 @@ export type ChildrenFunction = () => ComponentType[]; const DefaultLayout: SFC = ({ children }) => <>{children}; export interface AdminProps { - appLayout: LayoutComponent; + layout: LayoutComponent; + appLayout?: LayoutComponent; authProvider?: AuthProvider; children?: AdminChildren; catchAll: CatchAllComponent; @@ -61,7 +62,8 @@ class CoreAdminBase extends Component { static defaultProps: Partial = { catchAll: () => null, - appLayout: DefaultLayout, + layout: DefaultLayout, + appLayout: undefined, loading: () => null, loginPage: false, }; @@ -90,6 +92,7 @@ React-admin requires a valid dataProvider function to work.`); renderCore() { const { + layout, appLayout, authProvider, children, @@ -106,6 +109,11 @@ React-admin requires a valid dataProvider function to work.`); const logout = authProvider ? createElement(logoutButton) : null; + if (appLayout) { + console.warn( + 'You are using deprecated prop "appLayout", it was replaced by "layout", see https://github.com/marmelab/react-admin/issues/2918' + ); + } if (loginPage === true && process.env.NODE_ENV !== 'production') { console.warn( 'You passed true to the loginPage prop. You must either pass false to disable it or a component class to customize it' @@ -133,7 +141,7 @@ React-admin requires a valid dataProvider function to work.`); path="/" render={props => ( createElement( - appLayout, + layout, { dashboard, logout, diff --git a/packages/react-admin/src/Admin.ts b/packages/react-admin/src/Admin.ts index 358ad1059a6..bdf280d36ef 100644 --- a/packages/react-admin/src/Admin.ts +++ b/packages/react-admin/src/Admin.ts @@ -10,7 +10,7 @@ import { const Admin = CoreAdmin; Admin.defaultProps = { - appLayout: DefaultLayout, + layout: DefaultLayout, catchAll: NotFound, loading: Loading, loginPage: Login,