Merge pull request #52042 from callstack-internal/add-search-for-more…

…-than-eight-export-rows Workspace Feed - add Search for more than 8 export rows
Expensify · Nov 7, 2024 · 160a2d2 · 160a2d2
2 parents 96f5546 + ee15e84
commit 160a2d2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -3067,6 +3067,7 @@ const CONST = {
     // Character Limits
     FORM_CHARACTER_LIMIT: 50,
     STANDARD_LENGTH_LIMIT: 100,
+    STANDARD_LIST_ITEM_LIMIT: 8,
     LEGAL_NAMES_CHARACTER_LIMIT: 150,
     LOGIN_CHARACTER_LIMIT: 254,
     CATEGORY_NAME_LIMIT: 256,

diff --git a/src/components/SelectionScreen.tsx b/src/components/SelectionScreen.tsx
@@ -93,6 +93,18 @@ type SelectionScreenProps<T = string> = {
 
     /** Whether to update the focused index on a row select */
     shouldUpdateFocusedIndex?: boolean;
+
+    /** Whether to show the text input */
+    shouldShowTextInput?: boolean;
+
+    /** Label for the text input */
+    textInputLabel?: string;
+
+    /** Value for the text input */
+    textInputValue?: string;
+
+    /** Callback to fire when the text input changes */
+    onChangeText?: (text: string) => void;
 };
 
 function SelectionScreen<T = string>({
@@ -117,6 +129,10 @@ function SelectionScreen<T = string>({
     onClose,
     shouldSingleExecuteRowSelect,
     headerTitleAlreadyTranslated,
+    textInputLabel,
+    textInputValue,
+    onChangeText,
+    shouldShowTextInput,
     shouldUpdateFocusedIndex = false,
 }: SelectionScreenProps<T>) {
     const {translate} = useLocalize();
@@ -152,9 +168,13 @@ function SelectionScreen<T = string>({
                         sections={sections}
                         ListItem={listItem}
                         showScrollIndicator
+                        onChangeText={onChangeText}
                         shouldShowTooltips={false}
                         initiallyFocusedOptionKey={initiallyFocusedOptionKey}
                         listEmptyContent={listEmptyContent}
+                        textInputLabel={textInputLabel}
+                        textInputValue={textInputValue}
+                        shouldShowTextInput={shouldShowTextInput}
                         listFooterContent={listFooterContent}
                         sectionListStyle={!!sections.length && [styles.flexGrow0]}
                         shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardAccountSelectCardPage.tsx
@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import BlockingView from '@components/BlockingViews/BlockingView';
@@ -31,12 +31,18 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard
     const {policyID, cardID, bank} = route.params;
     const policy = usePolicy(policyID);
     const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+    const [searchText, setSearchText] = useState('');
 
     const [allBankCards] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bank}`);
     const card = allBankCards?.[cardID];
     const connectedIntegration = PolicyUtils.getConnectedIntegration(policy) ?? CONST.POLICY.CONNECTIONS.NAME.QBO;
     const exportMenuItem = getExportMenuItem(connectedIntegration, policyID, translate, policy, card);
     const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy);
+    const shouldShowTextInput = (exportMenuItem?.data?.length ?? 0) >= CONST.STANDARD_LIST_ITEM_LIMIT;
+
+    const searchedListOptions = useMemo(() => {
+        return exportMenuItem?.data.filter((option) => option.value.toLowerCase().includes(searchText));
+    }, [exportMenuItem?.data, searchText]);
 
     const listEmptyContent = useMemo(
         () => (
@@ -87,14 +93,18 @@ function WorkspaceCompanyCardAccountSelectCardPage({route}: WorkspaceCompanyCard
             }
             featureName={CONST.POLICY.MORE_FEATURES.ARE_COMPANY_CARDS_ENABLED}
             displayName={WorkspaceCompanyCardAccountSelectCardPage.displayName}
-            sections={[{data: exportMenuItem?.data ?? []}]}
+            sections={[{data: searchedListOptions ?? []}]}
             listItem={RadioListItem}
+            textInputLabel={translate('common.search')}
+            textInputValue={searchText}
+            onChangeText={setSearchText}
             onSelectRow={updateExportAccount}
             initiallyFocusedOptionKey={exportMenuItem?.data?.find((mode) => mode.isSelected)?.keyForList}
             onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, cardID, bank))}
             headerTitleAlreadyTranslated={exportMenuItem?.description}
             listEmptyContent={listEmptyContent}
             connectionName={connectedIntegration}
+            shouldShowTextInput={shouldShowTextInput}
         />
     );
 }