Skip to content

Commit

Permalink
Merge pull request #30367 from adamgrzybowski/@swm/fix-report-header-…
Browse files Browse the repository at this point in the history 
…skeleton-view

Add ReportHeaderSkeletonView to ReportScreen
  • Loading branch information
Hayata Suenaga authored Nov 17, 2023
2 parents 3f7e66a + 175aa5c commit ae83639
Showing 1 changed file with 86 additions and 79 deletions.
165 changes: 86 additions & 79 deletions src/pages/home/HeaderView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import MultipleAvatars from '@components/MultipleAvatars';
import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
import participantPropTypes from '@components/participantPropTypes';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
import SubscriptAvatar from '@components/SubscriptAvatar';
import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
import Text from '@components/Text';
Expand Down Expand Up @@ -181,96 +182,102 @@ function HeaderView(props) {
const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);

const isLoading = !props.report || !title;

return (
<View
style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
dataSet={{dragArea: true}}
>
<View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
{props.isSmallScreenWidth && (
<PressableWithoutFeedback
onPress={props.onNavigationMenuButtonClicked}
style={[styles.LHNToggle]}
accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
accessibilityLabel={props.translate('common.back')}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
<Tooltip
text={props.translate('common.back')}
shiftVertical={4}
>
<View>
<Icon src={Expensicons.BackArrow} />
</View>
</Tooltip>
</PressableWithoutFeedback>
)}
{Boolean(props.report && title) && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<PressableWithoutFeedback
onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
disabled={shouldDisableDetailPage}
accessibilityLabel={title}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{shouldShowSubscript ? (
<SubscriptAvatar
mainAvatar={icons[0]}
secondaryAvatar={icons[1]}
size={defaultSubscriptSize}
/>
) : (
<MultipleAvatars
icons={icons}
shouldShowTooltip={!isChatRoom || isChatThread}
/>
)}
<View style={[styles.flex1, styles.flexColumn]}>
<DisplayNames
fullTitle={title}
displayNamesWithTooltips={displayNamesWithTooltips}
tooltipEnabled
numberOfLines={1}
textStyles={[styles.headerText, styles.pre]}
shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
/>
{!_.isEmpty(parentNavigationSubtitleData) && (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
parentReportID={props.report.parentReportID}
pressableStyles={[styles.alignSelfStart, styles.mw100]}
<View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && !isLoading && styles.pl5]}>
{isLoading ? (
<ReportHeaderSkeletonView />
) : (
<>
{props.isSmallScreenWidth && (
<PressableWithoutFeedback
onPress={props.onNavigationMenuButtonClicked}
style={[styles.LHNToggle]}
accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
accessibilityLabel={props.translate('common.back')}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
<Tooltip
text={props.translate('common.back')}
shiftVertical={4}
>
<View>
<Icon src={Expensicons.BackArrow} />
</View>
</Tooltip>
</PressableWithoutFeedback>
)}
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<PressableWithoutFeedback
onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
disabled={shouldDisableDetailPage}
accessibilityLabel={title}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{shouldShowSubscript ? (
<SubscriptAvatar
mainAvatar={icons[0]}
secondaryAvatar={icons[1]}
size={defaultSubscriptSize}
/>
) : (
<MultipleAvatars
icons={icons}
shouldShowTooltip={!isChatRoom || isChatThread}
/>
)}
{!_.isEmpty(subtitle) && (
<Text
style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
<View style={[styles.flex1, styles.flexColumn]}>
<DisplayNames
fullTitle={title}
displayNamesWithTooltips={displayNamesWithTooltips}
tooltipEnabled
numberOfLines={1}
>
{subtitle}
</Text>
)}
</View>
{brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
<Icon
src={Expensicons.DotIndicator}
fill={theme.danger}
textStyles={[styles.headerText, styles.pre]}
shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
/>
{!_.isEmpty(parentNavigationSubtitleData) && (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
parentReportID={props.report.parentReportID}
pressableStyles={[styles.alignSelfStart, styles.mw100]}
/>
)}
{!_.isEmpty(subtitle) && (
<Text
style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
numberOfLines={1}
>
{subtitle}
</Text>
)}
</View>
)}
</PressableWithoutFeedback>
<View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
{isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
{shouldShowThreeDotsButton && (
<ThreeDotsMenu
anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
menuItems={threeDotMenuItems}
shouldSetModalVisibility={false}
/>
)}
{brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
<Icon
src={Expensicons.DotIndicator}
fill={theme.danger}
/>
</View>
)}
</PressableWithoutFeedback>
<View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
{isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
{shouldShowThreeDotsButton && (
<ThreeDotsMenu
anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
menuItems={threeDotMenuItems}
shouldSetModalVisibility={false}
/>
)}
</View>
</View>
</View>
</>
)}
</View>
</View>
Expand Down

0 comments on commit ae83639

Please sign in to comment.