Remove layout and retain functional wrapper layout

forinda · Nov 15, 2022 · 55f9582 · 55f9582
1 parent 702396e
commit 55f9582
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -63,24 +63,6 @@ const Comp = () => (
 
 If you are using a layout component for your app that runs acrosss all components then you can just plug it in
 
-```jsx
-type LayoutProps = {
-  children: JSX.Element,
-}
-const LayoutComponent = (props: LayoutProps) => (
-  <div>
-    <div>Header section</div>
-    <div>{props.children}</div>
-    <div>Footer section</div>
-  </div>
-)
-const ComponentPage = () => (
-  <MapRouter routes={[]} topScroll browserRouter Layout={LayoutComponent} />
-)
-```
-
-> Another way of using the Layout is component level layout for each route i.e
-
 ```jsx
 type Lmap = (
   LayoutContainer: React.FC<{
@@ -124,7 +106,7 @@ const routes: IRouteProps[] = [
 const ComponentPage = () => <MapRouter routes={routes} topScroll />
 ```
 
-## For versions `<=1.0.0`
+For versions `<=1.0.0`
 
 ```jsx
 import { MapRouter } from 'react-router-map'

diff --git a/__tests__/route_render.test.tsx b/__tests__/route_render.test.tsx
@@ -26,7 +26,6 @@ describe('Render routes', () => {
           },
         ]}
         topScroll
-      Layout={Comp}
       />,
     )
   })

diff --git a/src/components/MapRouter.tsx b/src/components/MapRouter.tsx
@@ -8,33 +8,8 @@ export const MapRouter: MapRouterFunction = function ({
   routes,
   browserRouter = false,
   topScroll = true,
-  Layout,
 }: MapRouterProps): JSX.Element {
-  return Layout !==undefined? (
-    browserRouter ? (
-      <BrowserRouter>
-        {topScroll ? <TopScroll /> : <></>}
-        <Layout>
-          <Routes>
-            {routes.map((route: IRouteProps) => (
-              <RouteFunction key={route.path} {...route} />
-            ))}
-          </Routes>
-        </Layout>
-      </BrowserRouter>
-    ) : (
-      <HashRouter>
-        {topScroll && <TopScroll />}
-        <Layout>
-          <Routes>
-            {routes.map((route: IRouteProps) => (
-              <RouteFunction key={route.path} {...route} />
-            ))}
-          </Routes>
-        </Layout>
-      </HashRouter>
-    )
-  ) : browserRouter ? (
+  return browserRouter ? (
     <BrowserRouter>
       {topScroll && <TopScroll />}
       <Routes>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import React from 'react'
 
-export type LayoutType = (props: { children: JSX.Element }) => JSX.Element
-
 export interface IRouteProps {
   [key: string]: any
   pathName: string
@@ -16,6 +14,5 @@ export type MapRouterProps = {
   routes: IRouteProps[]
   topScroll?: boolean
   browserRouter?: boolean
-  Layout?: (props: { children: JSX.Element }) => any
 }
 export type MapRouterFunction = (props: MapRouterProps) => JSX.Element