Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new empty state component to report fields page #46476

Merged
merged 4 commits into from
Aug 4, 2024
+20 −10
Merged

Add new empty state component to report fields page #46476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
92fef72
Add new empty state component to report fields page
filip-solecki Jul 30, 2024
04ad226
Add new empty state component to add report field list type page
filip-solecki Jul 30, 2024
81895d7
Merge branch 'main' into filip-solecki/report-fields-empty-state
filip-solecki Jul 31, 2024
bb1b072
Add top margin to empty state component
filip-solecki Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/EmptyStateComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import Lottie from '@components/Lottie';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import VideoPlayer from '@components/VideoPlayer';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import CONST from '@src/CONST';
import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';

Expand All @@ -27,7 +27,7 @@ function EmptyStateComponent({
emptyStateForegroundStyles,
}: EmptyStateComponentProps) {
const styles = useThemeStyles();
const {isSmallScreenWidth} = useWindowDimensions();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);

const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
Expand Down Expand Up @@ -86,7 +86,7 @@ function EmptyStateComponent({
shouldAnimate={false}
/>
</View>
<View style={[styles.emptyStateForeground(isSmallScreenWidth), emptyStateForegroundStyles]}>
<View style={[styles.emptyStateForeground(shouldUseNarrowLayout), emptyStateForegroundStyles]}>
<View style={styles.emptyStateContent}>
<View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
<View style={styles.p8}>
Expand Down
12 changes: 8 additions & 4 deletions src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Button from '@components/Button';
import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
import ConfirmModal from '@components/ConfirmModal';
import EmptyStateComponent from '@components/EmptyStateComponent';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
Expand All @@ -14,8 +15,8 @@ import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRight
import TableListItem from '@components/SelectionList/TableListItem';
import type {ListItem} from '@components/SelectionList/types';
import SelectionListWithModal from '@components/SelectionListWithModal';
import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
import Text from '@components/Text';
import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
Expand Down Expand Up @@ -305,11 +306,14 @@ function ReportFieldsListValuesPage({
<Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>{translate('workspace.reportFields.listInputSubtitle')}</Text>
</View>
{shouldShowEmptyState && (
<WorkspaceEmptyStateSection
containerStyle={[styles.bgTransparent, styles.mtAuto, styles.mbAuto]}
<EmptyStateComponent
title={translate('workspace.reportFields.emptyReportFieldsValues.title')}
icon={Illustrations.EmptyStateExpenses}
subtitle={translate('workspace.reportFields.emptyReportFieldsValues.subtitle')}
SkeletonComponent={TableListItemSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMedia={Illustrations.EmptyStateExpenses}
headerStyles={styles.emptyFolderBG}
headerContentStyles={styles.emptyStateFolderIconSize}
/>
)}
{!shouldShowEmptyState && (
Expand Down
11 changes: 8 additions & 3 deletions src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Button from '@components/Button';
import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
import ConfirmModal from '@components/ConfirmModal';
import EmptyStateComponent from '@components/EmptyStateComponent';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
Expand All @@ -16,9 +17,9 @@ import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRight
import TableListItem from '@components/SelectionList/TableListItem';
import type {ListItem} from '@components/SelectionList/types';
import SelectionListWithModal from '@components/SelectionListWithModal';
import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
import useEnvironment from '@hooks/useEnvironment';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
Expand Down Expand Up @@ -276,10 +277,14 @@ function WorkspaceReportFieldsPage({
/>
)}
{shouldShowEmptyState && (
<WorkspaceEmptyStateSection
<EmptyStateComponent
title={translate('workspace.reportFields.emptyReportFields.title')}
icon={Illustrations.EmptyStateExpenses}
subtitle={translate('workspace.reportFields.emptyReportFields.subtitle')}
SkeletonComponent={TableListItemSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
headerMedia={Illustrations.EmptyStateExpenses}
headerStyles={styles.emptyFolderBG}
headerContentStyles={styles.emptyStateFolderIconSize}
/>
)}
{!shouldShowEmptyState && !isLoading && (
Expand Down
1 change: 1 addition & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5110,6 +5110,7 @@ const styles = (theme: ThemeColors) =>
},

emptyStateScrollView: {
marginTop: 12,
minHeight: 400,
height: '100%',
flex: 1,
Expand Down
Loading