Skip to content

Commit 499c44f

Browse files
authored
Merge pull request #940 from commercelayer/pagelayout-overlary-footer
Enable `overlayFooter` prop in `PageLayout` when working as overlay
2 parents 2ca16a4 + aa0cd4a commit 499c44f

File tree

1 file changed

+43
-27
lines changed

1 file changed

+43
-27
lines changed

packages/app-elements/src/ui/composite/PageLayout.tsx

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,42 @@ import { PageHeading, type PageHeadingProps } from '#ui/atoms/PageHeading'
55
import { ScrollToTop } from '#ui/atoms/ScrollToTop'
66
import { withSkeletonTemplate } from '#ui/atoms/SkeletonTemplate'
77
import { Spacer } from '#ui/atoms/Spacer'
8-
import { Overlay } from '#ui/internals/Overlay'
8+
import { Overlay, type OverlayProps } from '#ui/internals/Overlay'
99
import { type ReactNode } from 'react'
1010

11-
export interface PageLayoutProps
12-
extends Pick<
13-
PageHeadingProps,
14-
'title' | 'description' | 'navigationButton' | 'toolbar' | 'gap'
15-
>,
16-
Pick<ContainerProps, 'minHeight'> {
17-
/**
18-
* Page content
19-
*/
20-
children: ReactNode
21-
/**
22-
* When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
23-
* Only if app is standalone mode.
24-
*/
25-
mode?: 'test' | 'live'
26-
/**
27-
* Renders as overlay
28-
*/
29-
overlay?: boolean
30-
/**
31-
* Optional prop to enable scroll to top behavior on location change
32-
*/
33-
scrollToTop?: boolean
34-
}
11+
export type PageLayoutProps = Pick<
12+
PageHeadingProps,
13+
'title' | 'description' | 'navigationButton' | 'toolbar' | 'gap'
14+
> &
15+
Pick<ContainerProps, 'minHeight'> & {
16+
/**
17+
* Page content
18+
*/
19+
children: ReactNode
20+
/**
21+
* When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
22+
* Only if app is standalone mode.
23+
*/
24+
mode?: 'test' | 'live'
25+
/**
26+
* Optional prop to enable scroll to top behavior on location change
27+
*/
28+
scrollToTop?: boolean
29+
} & (
30+
| {
31+
overlay?: false
32+
}
33+
| {
34+
/**
35+
* Renders as overlay
36+
*/
37+
overlay: true
38+
/**
39+
* Footer element to be rendered at the bottom of the overlay.
40+
**/
41+
overlayFooter?: OverlayProps['footer']
42+
}
43+
)
3544

3645
export const PageLayout = withSkeletonTemplate<PageLayoutProps>(
3746
({
@@ -47,12 +56,15 @@ export const PageLayout = withSkeletonTemplate<PageLayoutProps>(
4756
overlay = false,
4857
isLoading,
4958
delayMs,
50-
...rest
59+
...props
5160
}) => {
5261
const {
5362
settings: { isInDashboard }
5463
} = useTokenProvider()
5564

65+
const { overlayFooter, ...rest } =
66+
'overlayFooter' in props ? props : { ...props, overlayFooter: undefined }
67+
5668
const component = (
5769
<>
5870
<PageHeading
@@ -78,7 +90,11 @@ export const PageLayout = withSkeletonTemplate<PageLayoutProps>(
7890
)
7991

8092
if (overlay) {
81-
return <Overlay backgroundColor='light'>{component}</Overlay>
93+
return (
94+
<Overlay backgroundColor='light' footer={overlayFooter}>
95+
{component}
96+
</Overlay>
97+
)
8298
}
8399

84100
return (

0 commit comments

Comments
 (0)