#26126: Tag picker sections

src/CONST.ts

@@ -2638,6 +2638,7 @@ const CONST = {
     INDENTS: '    ',
     PARENT_CHILD_SEPARATOR: ': ',
     CATEGORY_LIST_THRESHOLD: 8,
+    TAG_LIST_THRESHOLD: 8,
     DEMO_PAGES: {
         SAASTR: 'SaaStrDemoSetup',
         SBE: 'SbeDemoSetup',

src/components/CategoryPicker/index.js

@@ -46,7 +46,7 @@ function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentl
     }, [policyCategories, selectedOptions, isCategoriesCountBelowThreshold]);
 
     const sections = useMemo(
-        () => OptionsListUtils.getNewChatOptions({}, {}, [], searchValue, selectedOptions, [], false, false, true, policyCategories, policyRecentlyUsedCategories, false).categoryOptions,
+        () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, true, policyCategories, policyRecentlyUsedCategories, false).categoryOptions,
         [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions],
     );
 

src/components/MoneyRequestConfirmationList.js

@@ -201,6 +201,7 @@ function MoneyRequestConfirmationList(props) {
     const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []);
     const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], '');
     const canUseTags = Permissions.canUseTags(props.betas);
+    const shouldShowTags = canUseTags && _.any(tagList, (tag) => tag.enabled);
 
     const hasRoute = TransactionUtils.hasRoute(transaction);
     const isDistanceRequestWithoutRoute = props.isDistanceRequest && !hasRoute;
@@ -527,7 +528,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
-                    {canUseTags && !!tagList && (
+                    {shouldShowTags && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouTag}

src/components/TagPicker/index.js

@@ -1,62 +1,58 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
+import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import useLocalize from '../../hooks/useLocalize';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import OptionsSelector from '../OptionsSelector';
 import {propTypes, defaultProps} from './tagPickerPropTypes';
 
-function TagPicker({policyTags, reportID, tag, iouType, iou}) {
+function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit}) {
     const {translate} = useLocalize();
+    const [searchValue, setSearchValue] = useState('');
+
+    const policyRecentlyUsedTagsList = lodashGet(policyRecentlyUsedTags, tag, []);
+    const policyTagList = lodashGet(policyTags, [tag, 'tags'], {});
+    const policyTagsCount = _.size(_.filter(policyTagList, (policyTag) => policyTag.enabled));
+    const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD;
+
+    const shouldShowTextInput = !isTagsCountBelowThreshold;
 
     const selectedOptions = useMemo(() => {
-        if (!iou.tag) {
+        if (!selectedTag) {
             return [];
         }
 
         return [
             {
-                name: iou.tag,
+                name: selectedTag,
                 enabled: true,
+                accountID: null,
             },
         ];
-    }, [iou.tag]);
-
-    // Only shows one section, which will be the default behavior if there are
-    // less than 8 policy tags
-    // TODO: support sections with search
-    const sections = useMemo(() => {
-        const tagList = _.chain(lodashGet(policyTags, [tag, 'tags'], {}))
-            .values()
-            .map((t) => ({
-                text: t.name,
-                keyForList: t.name,
-                tooltipText: t.name,
-            }))
-            .value();
+    }, [selectedTag]);
 
-        return [
-            {
-                data: tagList,
-            },
-        ];
-    }, [policyTags, tag]);
+    const initialFocusedIndex = useMemo(() => {
+        if (isTagsCountBelowThreshold && selectedOptions.length > 0) {
+            return _.chain(policyTagList)
+                .values()
+                .findIndex((policyTag) => policyTag.name === selectedOptions[0].name, true)
+                .value();
+        }
 
-    const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, '');
+        return 0;
+    }, [policyTagList, selectedOptions, isTagsCountBelowThreshold]);
 
-    const navigateBack = () => {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
-    };
+    const sections = useMemo(
+        () =>
+            OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, policyTagList, policyRecentlyUsedTagsList, false).tagOptions,
+        [searchValue, selectedOptions, policyTagList, policyRecentlyUsedTagsList],
+    );
 
-    const updateTag = () => {
-        // TODO: add logic to save the selected tag
-        navigateBack();
-    };
+    const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, '');
 
     return (
         <OptionsSelector
@@ -66,9 +62,13 @@ function TagPicker({policyTags, reportID, tag, iouType, iou}) {
             headerMessage={headerMessage}
             textInputLabel={translate('common.search')}
             boldStyle
-            value=""
-            onSelectRow={updateTag}
-            shouldShowTextInput={false}
+            highlightSelectedOptions
+            isRowMultilineSupported
+            shouldShowTextInput={shouldShowTextInput}
+            value={searchValue}
+            initialFocusedIndex={initialFocusedIndex}
+            onChangeText={setSearchValue}
+            onSelectRow={onSubmit}
         />
     );
 }
@@ -84,7 +84,4 @@ export default withOnyx({
     policyRecentlyUsedTags: {
         key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`,
     },
-    iou: {
-        key: ONYXKEYS.IOU,
-    },
 })(TagPicker);

src/components/TagPicker/tagPickerPropTypes.js

@@ -1,22 +1,18 @@
 import PropTypes from 'prop-types';
 import tagPropTypes from '../tagPropTypes';
-import {iouPropTypes, iouDefaultProps} from '../../pages/iou/propTypes';
 
 const propTypes = {
-    /** The report ID of the IOU */
-    reportID: PropTypes.string.isRequired,
-
     /** The policyID we are getting tags for */
     policyID: PropTypes.string.isRequired,
 
+    /** The selected tag of the money request */
+    selectedTag: PropTypes.string.isRequired,
+
     /** The name of tag list we are getting tags for */
     tag: PropTypes.string.isRequired,
 
-    /** The type of IOU report, i.e. bill, request, send */
-    iouType: PropTypes.string.isRequired,
-
     /** Callback to submit the selected tag */
-    onSubmit: PropTypes.func,
+    onSubmit: PropTypes.func.isRequired,
 
     /* Onyx Props */
     /** Collection of tags attached to a policy */
@@ -29,15 +25,11 @@ const propTypes = {
 
     /** List of recently used tags */
     policyRecentlyUsedTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
-
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: iouPropTypes,
 };
 
 const defaultProps = {
     policyTags: {},
     policyRecentlyUsedTags: {},
-    iou: iouDefaultProps,
 };
 
 export {propTypes, defaultProps};