forked from Expensify/App
-
Notifications
You must be signed in to change notification settings - Fork 0
/
IllustratedHeaderPageLayout.tsx
56 lines (48 loc) · 2.03 KB
/
IllustratedHeaderPageLayout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React from 'react';
import type {ReactNode} from 'react';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import HeaderPageLayout from './HeaderPageLayout';
import type {HeaderPageLayoutProps} from './HeaderPageLayout';
import Lottie from './Lottie';
import type DotLottieAnimation from './LottieAnimations/types';
type IllustratedHeaderPageLayoutProps = HeaderPageLayoutProps & {
/** The illustration to display in the header. Can be a JSON object representing a Lottie animation. */
illustration: DotLottieAnimation;
/** The background color to apply in the upper half of the screen. */
backgroundColor?: string;
/** Overlay content to display on top of animation */
overlayContent?: () => ReactNode;
/** TestID to apply to the whole section container */
testID: string;
};
function IllustratedHeaderPageLayout({backgroundColor, children, illustration, testID, overlayContent, ...rest}: IllustratedHeaderPageLayoutProps) {
const theme = useTheme();
const styles = useThemeStyles();
const shouldLimitHeight = !rest.shouldShowBackButton;
return (
<HeaderPageLayout
backgroundColor={backgroundColor ?? theme.appBG}
headerContent={
<>
<Lottie
source={illustration}
style={styles.w100}
webStyle={shouldLimitHeight ? styles.h100 : styles.w100}
autoPlay
loop
/>
{overlayContent?.()}
</>
}
testID={testID}
headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldLimitHeight && styles.centralPaneAnimation]}
// eslint-disable-next-line react/jsx-props-no-spreading
{...rest}
>
{children}
</HeaderPageLayout>
);
}
IllustratedHeaderPageLayout.displayName = 'IllustratedHeaderPageLayout';
export default IllustratedHeaderPageLayout;