From 92fef7286bb8e869ea7bc20e9a30b7f9021f48b3 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Tue, 30 Jul 2024 10:10:26 +0200 Subject: [PATCH 1/3] Add new empty state component to report fields page --- .../reportFields/WorkspaceReportFieldsPage.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx index f4e3b01145d..dbf80fe9d0f 100644 --- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx @@ -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'; @@ -16,9 +17,9 @@ import SelectionList from '@components/SelectionList'; import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel'; import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; +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'; @@ -265,10 +266,14 @@ function WorkspaceReportFieldsPage({ /> )} {shouldShowEmptyState && ( - )} {!shouldShowEmptyState && !isLoading && ( From 04ad2261ac8057fb03bac777e8ce2606e704b49a Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Tue, 30 Jul 2024 11:31:42 +0200 Subject: [PATCH 2/3] Add new empty state component to add report field list type page --- src/components/EmptyStateComponent/index.tsx | 6 +++--- .../reportFields/ReportFieldsListValuesPage.tsx | 14 +++++++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx index 56f8fa5e3d8..c3d8323b2cf 100644 --- a/src/components/EmptyStateComponent/index.tsx +++ b/src/components/EmptyStateComponent/index.tsx @@ -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'; @@ -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) => { @@ -86,7 +86,7 @@ function EmptyStateComponent({ shouldAnimate={false} /> - + {HeaderComponent} diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index adbe3339795..eee1b7f7a70 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -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'; @@ -14,8 +15,8 @@ import SelectionList from '@components/SelectionList'; import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel'; import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem} from '@components/SelectionList/types'; +import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton'; import Text from '@components/Text'; -import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -99,7 +100,7 @@ function ReportFieldsListValuesPage({ }, [disabledListValues, listValues, policy?.fieldList, reportFieldID, selectedValues, translate]); const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy); - const shouldShowEmptyState = Object.values(listValues ?? {}).length <= 0; + const shouldShowEmptyState = true; const selectedValuesArray = Object.keys(selectedValues).filter((key) => selectedValues[key]); const toggleValue = (valueItem: ValueListItem) => { @@ -292,11 +293,14 @@ function ReportFieldsListValuesPage({ {translate('workspace.reportFields.listInputSubtitle')} {shouldShowEmptyState && ( - )} {!shouldShowEmptyState && ( From bb1b072a014167821254cdc77c36a1c8d63b3e34 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Wed, 31 Jul 2024 10:38:06 +0200 Subject: [PATCH 3/3] Add top margin to empty state component --- src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index b3cb5b624ba..3d5a2e98f3b 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5110,6 +5110,7 @@ const styles = (theme: ThemeColors) => }, emptyStateScrollView: { + marginTop: 12, minHeight: 400, height: '100%', flex: 1,