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

fix: Fix scrollable elements in Policy pages. #38719

Merged
merged 21 commits into from
May 23, 2024
Merged

fix: Fix scrollable elements in Policy pages. #38719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2812c29
fix: Fix scrollable elements in Policy pages.
Krishna2323 Mar 20, 2024
e99c7e4
Merge branch 'Expensify:main' into krishna2323/issue/37782
Krishna2323 Mar 28, 2024
4ecddcd
Merge branch 'Expensify:main' into krishna2323/issue/37782
Krishna2323 Apr 2, 2024
20912d7
feat: sticky header component selection list.
Krishna2323 Apr 2, 2024
950c69d
feat: make header buttons scroll on small screen width in policy pages.
Krishna2323 Apr 2, 2024
d46dc8e
fix header bg color.
Krishna2323 Apr 2, 2024
58d5823
Merge branch 'main' into krishna2323/issue/37782
Krishna2323 Apr 4, 2024
02b27c2
Merge branch 'Expensify:main' into krishna2323/issue/37782
Krishna2323 Apr 4, 2024
d49139d
Merge branch 'main' into krishna2323/issue/37782
Krishna2323 Apr 8, 2024
c065fbd
Merge branch 'Expensify:main' into krishna2323/issue/37782
Krishna2323 Apr 10, 2024
1a8bd9e
revert changes in WorkspaceMembersPage & BaseSelectionList.
Krishna2323 Apr 16, 2024
9781d42
Merge branch 'Expensify:main' into krishna2323/issue/37782
Krishna2323 Apr 16, 2024
fefe94b
update: WorkspaceMembersPage & BaseSelectionList.
Krishna2323 Apr 16, 2024
9eac082
revert changes in conflict files.
Krishna2323 May 5, 2024
dc12178
Merge branch 'main' of https://github.com/Krishna2323/App into krishn…
Krishna2323 May 5, 2024
10b5d84
add reverted changes back to conflict files.
Krishna2323 May 5, 2024
b8006bb
Merge branch 'Expensify:main' into krishna2323/issue/37782
Krishna2323 May 9, 2024
2804d7c
fix: make only header buttons fixed in selection list.
Krishna2323 May 9, 2024
d80d3fe
rename ListHeaderComponent prop to listHeaderContent.
Krishna2323 May 15, 2024
81fb43c
Merge branch 'main' into krishna2323/issue/37782
Krishna2323 May 15, 2024
d343397
Merge branch 'main' into krishna2323/issue/37782
Krishna2323 May 17, 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
73 changes: 43 additions & 30 deletions src/components/SelectionList/BaseSelectionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ function BaseSelectionList<TItem extends ListItem>(
sectionTitleStyles,
textInputAutoFocus = true,
shouldTextInputInterceptSwipe = false,
listHeaderContent,
onEndReached = () => {},
onEndReachedThreshold,
}: BaseSelectionListProps<TItem>,
Expand Down Expand Up @@ -323,7 +324,7 @@ function BaseSelectionList<TItem extends ListItem>(
return <section.CustomSectionHeader section={section} />;
}

if (!section.title || isEmptyObject(section.data)) {
if (!section.title || isEmptyObject(section.data) || listHeaderContent) {
return null;
}

Expand All @@ -338,6 +339,39 @@ function BaseSelectionList<TItem extends ListItem>(
);
};

const header = () => (
<>
{!headerMessage && canSelectMultiple && shouldShowSelectAll && (
<View style={[styles.userSelectNone, styles.peopleRow, styles.ph5, styles.pb3, listHeaderWrapperStyle, styles.selectionListStickyHeader]}>
<View style={[styles.flexRow, styles.alignItemsCenter]}>
<Checkbox
accessibilityLabel={translate('workspace.people.selectAll')}
isChecked={flattenedSections.allSelected}
onPress={selectAllRow}
disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
/>
{!customListHeader && (
<PressableWithFeedback
style={[styles.userSelectNone, styles.flexRow, styles.alignItemsCenter]}
onPress={selectAllRow}
accessibilityLabel={translate('workspace.people.selectAll')}
role="button"
accessibilityState={{checked: flattenedSections.allSelected}}
disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
>
<Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
</PressableWithFeedback>
)}
</View>
{customListHeader}
</View>
)}
{!headerMessage && !canSelectMultiple && customListHeader}
</>
);

const renderItem = ({item, index, section}: SectionListRenderItemInfo<TItem, SectionWithIndexOffset<TItem>>) => {
const normalizedIndex = index + (section?.indexOffset ?? 0);
const isDisabled = !!section.isDisabled || item.isDisabled;
Expand Down Expand Up @@ -569,39 +603,17 @@ function BaseSelectionList<TItem extends ListItem>(
<OptionsListSkeletonView shouldAnimate />
) : (
<>
{!headerMessage && canSelectMultiple && shouldShowSelectAll && (
<View style={[styles.userSelectNone, styles.peopleRow, styles.ph5, styles.pb3, listHeaderWrapperStyle]}>
<View style={[styles.flexRow, styles.alignItemsCenter]}>
<Checkbox
accessibilityLabel={translate('workspace.people.selectAll')}
isChecked={flattenedSections.allSelected}
onPress={selectAllRow}
disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
/>
{!customListHeader && (
<PressableWithFeedback
style={[styles.userSelectNone, styles.flexRow, styles.alignItemsCenter]}
onPress={selectAllRow}
accessibilityLabel={translate('workspace.people.selectAll')}
role="button"
accessibilityState={{checked: flattenedSections.allSelected}}
disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
>
<Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
</PressableWithFeedback>
)}
</View>
{customListHeader}
</View>
)}
{!headerMessage && !canSelectMultiple && customListHeader}
{!listHeaderContent && header()}
<SectionList
ref={listRef}
sections={slicedSections}
stickySectionHeadersEnabled={false}
renderSectionHeader={renderSectionHeader}
renderSectionHeader={(arg) => (
<>
{renderSectionHeader(arg)}
{listHeaderContent && header()}
</>
)}
renderItem={renderItem}
getItemLayout={getItemLayout}
onScroll={onScroll}
Expand All @@ -620,6 +632,7 @@ function BaseSelectionList<TItem extends ListItem>(
onLayout={onSectionListLayout}
style={(!maxToRenderPerBatch || (shouldHideListOnInitialRender && isInitialSectionListRender)) && styles.opacity0}
ListFooterComponent={listFooterContent ?? ShowMoreButtonInstance}
ListHeaderComponent={listHeaderContent && listHeaderContent}
onEndReached={onEndReached}
onEndReachedThreshold={onEndReachedThreshold}
/>
Expand Down
3 changes: 3 additions & 0 deletions src/components/SelectionList/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
/** Custom content to display in the header */
headerContent?: ReactNode;

/** Custom content to display in the header of list component. */
listHeaderContent?: React.JSX.Element | null;

/** Custom content to display in the footer */
footerContent?: ReactNode;

Expand Down
7 changes: 4 additions & 3 deletions src/pages/workspace/WorkspaceMembersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
onPress={() => null}
options={getBulkActionsButtonOptions()}
isSplitButton={false}
style={[isSmallScreenWidth && styles.flexGrow1]}
style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
/>
) : (
<Button
Expand All @@ -514,7 +514,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
text={translate('workspace.invite.member')}
icon={Expensicons.Plus}
innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
style={[isSmallScreenWidth && styles.flexGrow1]}
style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
/>
)}
</View>
Expand Down Expand Up @@ -572,7 +572,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
ListItem={TableListItem}
disableKeyboardShortcuts={removeMembersConfirmModalVisible}
headerMessage={getHeaderMessage()}
headerContent={getHeaderContent()}
headerContent={!isSmallScreenWidth && getHeaderContent()}
onSelectRow={openMemberDetails}
onCheckboxPress={(item) => toggleUser(item.accountID)}
onSelectAll={() => toggleAllUsers(data)}
Expand All @@ -582,6 +582,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
textInputRef={textInputRef}
customListHeader={getCustomListHeader()}
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
listHeaderContent={isSmallScreenWidth ? <View style={[styles.pl5, styles.pr5]}>{getHeaderContent()}</View> : null}
showScrollIndicator={false}
/>
</View>
Expand Down
35 changes: 20 additions & 15 deletions src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,24 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {

const shouldShowEmptyState = !categoryList.some((category) => category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && !isLoading;

const getHeaderText = () => (
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
{Object.keys(policy?.connections ?? {}).length > 0 ? (
<Text>
<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.categories.importedFromAccountingSoftware')} `}</Text>
<TextLink
style={[styles.textNormal, styles.link]}
href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyId)}`}
>
{`${translate('workspace.accounting.qbo')} ${translate('workspace.accounting.settings')}`}
</TextLink>
</Text>
) : (
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.categories.subtitle')}</Text>
)}
</View>
);

return (
<AccessOrNotFoundWrapper
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
Expand Down Expand Up @@ -274,21 +292,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
danger
/>
{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
{Object.keys(policy?.connections ?? {}).length > 0 ? (
<Text>
<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.categories.importedFromAccountingSoftware')} `}</Text>
<TextLink
style={[styles.textNormal, styles.link]}
href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyId)}`}
>
{`${translate('workspace.accounting.qbo')} ${translate('workspace.accounting.settings')}`}
</TextLink>
</Text>
) : (
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.categories.subtitle')}</Text>
)}
</View>
{!isSmallScreenWidth && getHeaderText()}
{isLoading && (
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
Expand All @@ -315,6 +319,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
onDismissError={dismissError}
customListHeader={getCustomListHeader()}
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
listHeaderContent={isSmallScreenWidth ? getHeaderText() : null}
showScrollIndicator={false}
/>
)}
Expand Down
11 changes: 8 additions & 3 deletions src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,12 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
</View>
);

const getHeaderText = () => (
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.distanceRates.centrallyManage')}</Text>
</View>
);

return (
<AccessOrNotFoundWrapper
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
Expand All @@ -282,9 +288,7 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
{!isSmallScreenWidth && headerButtons}
</HeaderWithBackButton>
{isSmallScreenWidth && <View style={[styles.ph5]}>{headerButtons}</View>}
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.distanceRates.centrallyManage')}</Text>
</View>
{!isSmallScreenWidth && getHeaderText()}
{isLoading && (
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
Expand All @@ -304,6 +308,7 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
customListHeader={getCustomListHeader()}
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
listHeaderContent={isSmallScreenWidth ? getHeaderText() : null}
showScrollIndicator={false}
/>
)}
Expand Down
37 changes: 21 additions & 16 deletions src/pages/workspace/tags/WorkspaceTagsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,24 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
);
};

const getHeaderText = () => (
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
{isConnectedToAccounting ? (
<Text>
<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.tags.importedFromAccountingSoftware')} `}</Text>
<TextLink
style={[styles.textNormal, styles.link]}
href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyID)}`}
>
{`${translate('workspace.accounting.qbo')} ${translate('workspace.accounting.settings')}`}
</TextLink>
</Text>
) : (
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.tags.subtitle')}</Text>
)}
</View>
);

return (
<AccessOrNotFoundWrapper
policyID={policyID}
Expand All @@ -289,6 +307,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
>
{!isSmallScreenWidth && getHeaderButtons()}
</HeaderWithBackButton>
{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
<ConfirmModal
isVisible={isDeleteTagsConfirmModalVisible}
onConfirm={deleteTags}
Expand All @@ -299,22 +318,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
cancelText={translate('common.cancel')}
danger
/>
{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
{isConnectedToAccounting ? (
<Text>
<Text style={[styles.textNormal, styles.colorMuted]}>{`${translate('workspace.tags.importedFromAccountingSoftware')} `}</Text>
<TextLink
style={[styles.textNormal, styles.link]}
href={`${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(policyID)}`}
>
{`${translate('workspace.accounting.qbo')} ${translate('workspace.accounting.settings')}`}
</TextLink>
</Text>
) : (
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.tags.subtitle')}</Text>
)}
</View>
{!isSmallScreenWidth && getHeaderText()}
{isLoading && (
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
Expand All @@ -341,6 +345,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
onDismissError={(item) => Policy.clearPolicyTagErrors(policyID, item.value)}
listHeaderContent={isSmallScreenWidth ? getHeaderText() : null}
showScrollIndicator={false}
/>
)}
Expand Down
13 changes: 8 additions & 5 deletions src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,12 @@ function WorkspaceTaxesPage({
/>
);

const getHeaderText = () => (
<View style={[styles.ph5, styles.pb5, styles.pt3]}>
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.taxes.subtitle')}</Text>
</View>
);

return (
<AccessOrNotFoundWrapper
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
Expand All @@ -253,12 +259,8 @@ function WorkspaceTaxesPage({
>
{!isSmallScreenWidth && headerButtons}
</HeaderWithBackButton>

{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{headerButtons}</View>}

<View style={[styles.ph5, styles.pb5, styles.pt3]}>
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.taxes.subtitle')}</Text>
</View>
{!isSmallScreenWidth && getHeaderText()}
{isLoading && (
<ActivityIndicator
size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
Expand All @@ -274,6 +276,7 @@ function WorkspaceTaxesPage({
onSelectAll={toggleAllTaxes}
ListItem={TableListItem}
customListHeader={getCustomListHeader()}
listHeaderContent={isSmallScreenWidth ? getHeaderText() : null}
shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
onDismissError={(item) => (item.keyForList ? clearTaxRateError(policyID, item.keyForList, item.pendingAction) : undefined)}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4481,6 +4481,10 @@ const styles = (theme: ThemeColors) =>
borderRadius: 8,
},

selectionListStickyHeader: {
backgroundColor: theme.appBG,
},

draggableTopBar: {
height: 30,
width: '100%',
Expand Down
Loading