Merge pull request #44137 from software-mansion-labs/filip-solecki/em…

…pty-state-component

Empty State Component for Search

src/CONST.ts

@@ -5250,6 +5250,13 @@ const CONST = {
     },
 
     EXCLUDE_FROM_LAST_VISITED_PATH: [SCREENS.NOT_FOUND, SCREENS.SAML_SIGN_IN, SCREENS.VALIDATE_LOGIN] as string[],
+
+    EMPTY_STATE_MEDIA: {
+        ANIMATION: 'animation',
+        ILLUSTRATION: 'illustration',
+        VIDEO: 'video',
+    },
+
     UPGRADE_FEATURE_INTRO_MAPPING: [
         {
             id: 'reportFields',
@@ -5260,6 +5267,7 @@ const CONST = {
             icon: 'Pencil',
         },
     ],
+
     REPORT_FIELD_TYPES: {
         TEXT: 'text',
         DATE: 'date',

src/components/AccountingListSkeletonView.tsx

@@ -4,12 +4,14 @@ import ItemListSkeletonView from './Skeletons/ItemListSkeletonView';
 
 type AccountingListSkeletonViewProps = {
     shouldAnimate?: boolean;
+    gradientOpacityEnabled?: boolean;
 };
 
-function AccountingListSkeletonView({shouldAnimate = true}: AccountingListSkeletonViewProps) {
+function AccountingListSkeletonView({shouldAnimate = true, gradientOpacityEnabled = false}: AccountingListSkeletonViewProps) {
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}
+            gradientOpacityEnabled={gradientOpacityEnabled}
             renderSkeletonItem={() => (
                 <>
                     <Circle

src/components/EmptyStateComponent/index.tsx

@@ -0,0 +1,100 @@
+import type {VideoReadyForDisplayEvent} from 'expo-av';
+import React, {useMemo, useState} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import ImageSVG from '@components/ImageSVG';
+import Lottie from '@components/Lottie';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import VideoPlayer from '@components/VideoPlayer';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import CONST from '@src/CONST';
+import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';
+
+const VIDEO_ASPECT_RATIO = 400 / 225;
+
+function EmptyStateComponent({SkeletonComponent, headerMediaType, headerMedia, buttonText, buttonAction, title, subtitle, headerStyles, headerContentStyles}: EmptyStateComponentProps) {
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
+
+    const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
+        if (!event) {
+            return;
+        }
+
+        if ('naturalSize' in event) {
+            setVideoAspectRatio(event.naturalSize.width / event.naturalSize.height);
+        } else {
+            setVideoAspectRatio(event.srcElement.videoWidth / event.srcElement.videoHeight);
+        }
+    };
+
+    const HeaderComponent = useMemo(() => {
+        switch (headerMediaType) {
+            case CONST.EMPTY_STATE_MEDIA.VIDEO:
+                return (
+                    <VideoPlayer
+                        url={headerMedia}
+                        videoPlayerStyle={[headerContentStyles, {aspectRatio: videoAspectRatio}]}
+                        videoStyle={styles.emptyStateVideo}
+                        onVideoLoaded={setAspectRatio}
+                        controlsStatus={CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW}
+                        shouldUseControlsBottomMargin={false}
+                        shouldPlay
+                        isLooping
+                    />
+                );
+            case CONST.EMPTY_STATE_MEDIA.ANIMATION:
+                return (
+                    <Lottie
+                        source={headerMedia}
+                        autoPlay
+                        loop
+                        style={headerContentStyles}
+                    />
+                );
+            case CONST.EMPTY_STATE_MEDIA.ILLUSTRATION:
+                return (
+                    <ImageSVG
+                        style={headerContentStyles}
+                        src={headerMedia}
+                    />
+                );
+            default:
+                return null;
+        }
+    }, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo]);
+
+    return (
+        <ScrollView contentContainerStyle={styles.emptyStateScrollView}>
+            <View style={styles.skeletonBackground}>
+                <SkeletonComponent
+                    gradientOpacityEnabled
+                    shouldAnimate={false}
+                />
+            </View>
+            <View style={styles.emptyStateForeground(isSmallScreenWidth)}>
+                <View style={styles.emptyStateContent}>
+                    <View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
+                    <View style={styles.p8}>
+                        <Text style={[styles.textAlignCenter, styles.textHeadlineH1, styles.mb2]}>{title}</Text>
+                        <Text style={[styles.textAlignCenter, styles.textSupporting, styles.textNormal]}>{subtitle}</Text>
+                        {!!buttonText && !!buttonAction && (
+                            <Button
+                                success
+                                onPress={buttonAction}
+                            >
+                                {buttonText}
+                            </Button>
+                        )}
+                    </View>
+                </View>
+            </View>
+        </ScrollView>
+    );
+}
+
+EmptyStateComponent.displayName = 'EmptyStateComponent';
+export default EmptyStateComponent;

src/components/EmptyStateComponent/types.ts

@@ -0,0 +1,41 @@
+import type {ImageStyle} from 'expo-image';
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import type DotLottieAnimation from '@components/LottieAnimations/types';
+import type SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
+import type TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
+import type CONST from '@src/CONST';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type ValidSkeletons = typeof SearchRowSkeleton | typeof TableRowSkeleton;
+type MediaTypes = ValueOf<typeof CONST.EMPTY_STATE_MEDIA>;
+
+type SharedProps<T> = {
+    SkeletonComponent: ValidSkeletons;
+    title: string;
+    subtitle: string;
+    buttonText?: string;
+    buttonAction?: () => void;
+    headerStyles?: StyleProp<ViewStyle>;
+    headerMediaType: T;
+    headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
+};
+
+type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
+    headerMedia: HeaderMedia;
+};
+
+type VideoProps = MediaType<string, 'video'>;
+type IllustrationProps = MediaType<IconAsset, 'illustration'>;
+type AnimationProps = MediaType<DotLottieAnimation, 'animation'>;
+
+type EmptyStateComponentProps = VideoProps | IllustrationProps | AnimationProps;
+
+type VideoLoadedEventType = {
+    srcElement: {
+        videoWidth: number;
+        videoHeight: number;
+    };
+};
+
+export type {EmptyStateComponentProps, VideoLoadedEventType};

src/components/Icon/Illustrations.ts

@@ -53,6 +53,7 @@ import ConciergeNew from '@assets/images/simple-illustrations/simple-illustratio
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
+import EmptyState from '@assets/images/simple-illustrations/simple-illustration__empty-state.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
@@ -198,6 +199,7 @@ export {
     CheckmarkCircle,
     CreditCardEyes,
     LockClosedOrange,
+    EmptyState,
     FolderWithPapers,
     VirtualCard,
 };

src/components/OptionsListSkeletonView.tsx

@@ -18,16 +18,18 @@ function getLinedWidth(index: number): string {
 
 type OptionsListSkeletonViewProps = {
     shouldAnimate?: boolean;
+    gradientOpacityEnabled?: boolean;
     shouldStyleAsTable?: boolean;
 };
 
-function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = false}: OptionsListSkeletonViewProps) {
+function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = false, gradientOpacityEnabled = false}: OptionsListSkeletonViewProps) {
     const styles = useThemeStyles();
 
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}
             itemViewStyle={shouldStyleAsTable && [styles.highlightBG, styles.mb3, styles.mh5, styles.br2]}
+            gradientOpacityEnabled={gradientOpacityEnabled}
             renderSkeletonItem={({itemIndex}) => {
                 const lineWidth = getLinedWidth(itemIndex);
 

src/components/Search/index.tsx

@@ -5,7 +5,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
-import TableListItemSkeleton from '@components/Skeletons/TableListItemSkeleton';
+import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -101,7 +101,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
                     query={query}
                     hash={hash}
                 />
-                <TableListItemSkeleton shouldAnimate />
+                <SearchRowSkeleton shouldAnimate />
             </>
         );
     }
@@ -207,7 +207,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
             onEndReached={fetchMoreResults}
             listFooterContent={
                 isLoadingMoreItems ? (
-                    <TableListItemSkeleton
+                    <SearchRowSkeleton
                         shouldAnimate
                         fixedNumItems={5}
                     />