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

[Workspace feeds] Add search bar if cards assignment list has 8+ cards #51955

Merged
merged 9 commits into from
Nov 8, 2024
Merged

[Workspace feeds] Add search bar if cards assignment list has 8+ cards #51955

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9a98fec
Add cards list search bar
VickyStash Nov 4, 2024
5bac1ab
Merge branch 'refs/heads/main' into VickyStash/feature/51906-card-lis…
VickyStash Nov 5, 2024
aaabf8b
Merge branch 'refs/heads/main' into VickyStash/feature/51906-card-lis…
VickyStash Nov 6, 2024
1da4eae
Fix keyboard overlapping on small devices
VickyStash Nov 6, 2024
a3e9c13
Minor fix
VickyStash Nov 6, 2024
b46bc0c
Rename CARD_LIST_THRESHOLD const
VickyStash Nov 7, 2024
952c0f0
Update startTransactionDate -> transactionStartDate
VickyStash Nov 7, 2024
8082a9a
Remove padding above the button
VickyStash Nov 8, 2024
a9bdbe2
Remove extra padding above the button on ios
VickyStash Nov 8, 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
1 change: 1 addition & 0 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2803,6 +2803,7 @@ const CONST = {
RESTRICT: 'corporate',
ALLOW: 'personal',
},
CARD_LIST_THRESHOLD: 8,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should make a generic const for this, any list like this should turn into a searchable list if it has more than 8 elements

EXPORT_CARD_TYPES: {
/**
* Name of Card NVP for QBO custom export accounts
Expand Down
94 changes: 54 additions & 40 deletions src/components/SelectionList/BaseSelectionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ function BaseSelectionList<TItem extends ListItem>(
textInputIconLeft,
sectionTitleStyles,
textInputAutoFocus = true,
shouldShowTextInputAfterHeader = false,
shouldTextInputInterceptSwipe = false,
listHeaderContent,
onEndReached = () => {},
Expand Down Expand Up @@ -500,6 +501,48 @@ function BaseSelectionList<TItem extends ListItem>(
return null;
};

const renderInput = () => {
return (
<View style={[styles.ph5, styles.pb3]}>
<TextInput
ref={(element) => {
innerTextInputRef.current = element as RNTextInput;

if (!textInputRef) {
return;
}

if (typeof textInputRef === 'function') {
textInputRef(element as RNTextInput);
} else {
// eslint-disable-next-line no-param-reassign
textInputRef.current = element as RNTextInput;
}
}}
onFocus={() => (isTextInputFocusedRef.current = true)}
onBlur={() => (isTextInputFocusedRef.current = false)}
label={textInputLabel}
accessibilityLabel={textInputLabel}
hint={textInputHint}
role={CONST.ROLE.PRESENTATION}
value={textInputValue}
placeholder={textInputPlaceholder}
maxLength={textInputMaxLength}
onChangeText={onChangeText}
inputMode={inputMode}
selectTextOnFocus
spellCheck={false}
iconLeft={textInputIconLeft}
onSubmitEditing={selectFocusedOption}
blurOnSubmit={!!flattenedSections.allOptions.length}
isLoading={isLoadingNewOptions}
testID="selection-list-text-input"
shouldInterceptSwipe={shouldTextInputInterceptSwipe}
/>
</View>
);
};

const scrollToFocusedIndexOnFirstRender = useCallback(
(nativeEvent: LayoutChangeEvent) => {
if (shouldUseDynamicMaxToRenderPerBatch) {
Expand Down Expand Up @@ -677,45 +720,7 @@ function BaseSelectionList<TItem extends ListItem>(
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<View style={[styles.flex1, (!isKeyboardShown || !!footerContent || showConfirmButton) && safeAreaPaddingBottomStyle, containerStyle]}>
{shouldShowTextInput && (
<View style={[styles.ph5, styles.pb3]}>
<TextInput
ref={(element) => {
innerTextInputRef.current = element as RNTextInput;

if (!textInputRef) {
return;
}

if (typeof textInputRef === 'function') {
textInputRef(element as RNTextInput);
} else {
// eslint-disable-next-line no-param-reassign
textInputRef.current = element as RNTextInput;
}
}}
onFocus={() => (isTextInputFocusedRef.current = true)}
onBlur={() => (isTextInputFocusedRef.current = false)}
label={textInputLabel}
accessibilityLabel={textInputLabel}
hint={textInputHint}
role={CONST.ROLE.PRESENTATION}
value={textInputValue}
placeholder={textInputPlaceholder}
maxLength={textInputMaxLength}
onChangeText={onChangeText}
inputMode={inputMode}
selectTextOnFocus
spellCheck={false}
iconLeft={textInputIconLeft}
onSubmitEditing={selectFocusedOption}
blurOnSubmit={!!flattenedSections.allOptions.length}
isLoading={isLoadingNewOptions}
testID="selection-list-text-input"
shouldInterceptSwipe={shouldTextInputInterceptSwipe}
/>
</View>
)}
{shouldShowTextInput && !shouldShowTextInputAfterHeader && renderInput()}
{/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */}
{/* This is misleading because we might be in the process of loading fresh options from the server. */}
{(!isLoadingNewOptions || headerMessage !== translate('common.noResultsFound') || (flattenedSections.allOptions.length === 0 && !showLoadingPlaceholder)) &&
Expand Down Expand Up @@ -759,7 +764,16 @@ function BaseSelectionList<TItem extends ListItem>(
testID="selection-list"
onLayout={onSectionListLayout}
style={[(!maxToRenderPerBatch || (shouldHideListOnInitialRender && isInitialSectionListRender)) && styles.opacity0, sectionListStyle]}
ListHeaderComponent={listHeaderContent}
ListHeaderComponent={
shouldShowTextInput && shouldShowTextInputAfterHeader ? (
<>
{listHeaderContent}
{renderInput()}
</>
) : (
listHeaderContent
)
}
ListFooterComponent={listFooterContent ?? ShowMoreButtonInstance}
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 @@ -443,6 +443,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
/** Item `keyForList` to focus initially */
initiallyFocusedOptionKey?: string | null;

/** Whether the text input should be shown after list header */
shouldShowTextInputAfterHeader?: boolean;

/** Callback to fire when the list is scrolled */
onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;

Expand Down
44 changes: 32 additions & 12 deletions src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, {useState} from 'react';
import React, {useMemo, useState} from 'react';
import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
import Icon from '@components/Icon';
import * as Illustrations from '@components/Icon/Illustrations';
import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
Expand Down Expand Up @@ -36,6 +37,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {environmentURL} = useEnvironment();
const [searchText, setSearchText] = useState('');
const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD);
const [list] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${feed}`);
const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
Expand Down Expand Up @@ -117,12 +119,14 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {

const listOptions = accountCardList?.length > 0 ? accountCardListOptions : cardListOptions;

const searchedListOptions = useMemo(() => {
return listOptions.filter((option) => option.text.toLowerCase().includes(searchText));
}, [searchText, listOptions]);

return (
<InteractiveStepWrapper
wrapperID={CardSelectionStep.displayName}
handleBackButtonPress={handleBackButtonPress}
startStepIndex={listOptions.length ? 1 : undefined}
stepNames={listOptions.length ? CONST.COMPANY_CARD.STEP_NAMES : undefined}
headerTitle={translate('workspace.companyCards.assignCard')}
headerSubtitle={assigneeDisplayName}
>
Expand All @@ -147,18 +151,34 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
</View>
) : (
<>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt3]}>{translate('workspace.companyCards.chooseCard')}</Text>
<Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>
{translate('workspace.companyCards.chooseCardFor', {
assignee: assigneeDisplayName,
feed: CardUtils.getCardFeedName(feed),
})}
</Text>
<SelectionList
sections={[{data: listOptions}]}
sections={[{data: searchedListOptions}]}
shouldShowTextInput={listOptions.length > CONST.COMPANY_CARDS.CARD_LIST_THRESHOLD}
textInputLabel={translate('common.search')}
textInputValue={searchText}
onChangeText={setSearchText}
ListItem={RadioListItem}
onSelectRow={({value}) => handleSelectCard(value)}
initiallyFocusedOptionKey={cardSelected}
listHeaderContent={
<View>
<View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
<InteractiveStepSubHeader
startStepIndex={1}
stepNames={CONST.COMPANY_CARD.STEP_NAMES}
/>
</View>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt3]}>{translate('workspace.companyCards.chooseCard')}</Text>
<Text style={[styles.textSupporting, styles.ph5, styles.mv3]}>
{translate('workspace.companyCards.chooseCardFor', {
assignee: assigneeDisplayName,
feed: CardUtils.getCardFeedName(feed),
})}
</Text>
</View>
}
shouldShowTextInputAfterHeader
shouldShowListEmptyContent={false}
shouldUpdateFocusedIndex
/>
<FormAlertWithSubmitButton
Expand All @@ -167,7 +187,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
isAlertVisible={shouldShowError}
containerStyles={styles.ph5}
message={translate('common.error.pleaseSelectOne')}
buttonStyles={styles.mb5}
buttonStyles={[styles.mb5, styles.mt1]}
/>
</>
)}
Expand Down
Loading