Limit tag list to 500 items

src/CONST.ts

@@ -2900,6 +2900,8 @@ const CONST = {
         LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/getting-started/Referral-Program',
         LINK: 'https://join.my.expensify.com',
     },
+
+    MAX_COUNT_OF_TAGS: 500,
 } as const;
 
 export default CONST;

src/components/MoneyRequestConfirmationList.js

@@ -27,17 +27,16 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import Button from './Button';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import FormHelpMessage from './FormHelpMessage';
-import * as Expensicons from './Icon/Expensicons';
 import Image from './Image';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import optionPropTypes from './optionPropTypes';
 import OptionsSelector from './OptionsSelector';
 import SettlementButton from './SettlementButton';
+import ShowMore from './ShowMore';
 import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
 import Text from './Text';
@@ -635,20 +634,10 @@ function MoneyRequestConfirmationList(props) {
                 numberOfLinesTitle={2}
             />
             {!shouldShowAllFields && (
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
-                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
-                    <Button
-                        small
-                        onPress={toggleShouldExpandFields}
-                        text={translate('common.showMore')}
-                        shouldShowRightIcon
-                        iconRight={Expensicons.DownArrow}
-                        iconFill={theme.icon}
-                        style={styles.mh0}
-                    />
-
-                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
-                </View>
+                <ShowMore
+                    containerStyle={styles.mt1}
+                    onPress={toggleShouldExpandFields}
+                />
             )}
             {shouldShowAllFields && (
                 <>

src/components/OptionsList/BaseOptionsList.js

@@ -70,6 +70,7 @@ function BaseOptionsList({
     isLoadingNewOptions,
     nestedScrollEnabled,
     bounces,
+    renderFooterContent,
 }) {
     const styles = useThemeStyles();
     const flattenedData = useRef();
@@ -286,6 +287,7 @@ function BaseOptionsList({
                         viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                         onViewableItemsChanged={onViewableItemsChanged}
                         bounces={bounces}
+                        ListFooterComponent={renderFooterContent}
                     />
                 </>
             )}

src/components/OptionsList/optionsListPropTypes.js

@@ -100,6 +100,9 @@ const propTypes = {
 
     /** Whether the list should have a bounce effect on iOS */
     bounces: PropTypes.bool,
+
+    /** Custom content to display in the floating footer */
+    renderFooterContent: PropTypes.func,
 };
 
 const defaultProps = {
@@ -130,6 +133,7 @@ const defaultProps = {
     isLoadingNewOptions: false,
     nestedScrollEnabled: true,
     bounces: true,
+    renderFooterContent: undefined,
 };
 
 export {propTypes, defaultProps};

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -11,6 +11,7 @@ import Icon from '@components/Icon';
 import {Info} from '@components/Icon/Expensicons';
 import OptionsList from '@components/OptionsList';
 import {PressableWithoutFeedback} from '@components/Pressable';
+import ShowMore from '@components/ShowMore';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
@@ -74,6 +75,7 @@ class BaseOptionsSelector extends Component {
         this.selectFocusedOption = this.selectFocusedOption.bind(this);
         this.addToSelection = this.addToSelection.bind(this);
         this.updateSearchValue = this.updateSearchValue.bind(this);
+        this.incrementPage = this.incrementPage.bind(this);
         this.relatedTarget = null;
 
         const allOptions = this.flattenSections();
@@ -85,6 +87,7 @@ class BaseOptionsSelector extends Component {
             shouldDisableRowSelection: false,
             shouldShowReferralModal: false,
             errorMessage: '',
+            paginationPage: 1,
         };
     }
 
@@ -189,8 +192,43 @@ class BaseOptionsSelector extends Component {
         return defaultIndex;
     }
 
+    /**
+     * When pagination is enabled,
+     * maps sections to render only allowed count of them.
+     */
+    get sections() {
+        if (!_.isNumber(this.props.itemsPerPage)) {
+            return this.props.sections;
+        }
+
+        return _.map(this.props.sections, (section) => {
+            if (_.isEmpty(section.data)) {
+                return section;
+            }
+
+            return {
+                ...section,
+                data: section.data.slice(0, this.props.itemsPerPage * this.state.paginationPage),
+            };
+        });
+    }
+
+    /**
+     * Calculates all exactly visible options of sections.
+     */
+    get allVisibleOptionsCount() {
+        let count = 0;
+
+        _.forEach(this.sections, (section) => {
+            count += lodashGet(section, 'data.length', 0);
+        });
+
+        return count;
+    }
+
     updateSearchValue(value) {
         this.setState({
+            paginationPage: 1,
             errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '',
         });
 
@@ -387,7 +425,17 @@ class BaseOptionsSelector extends Component {
         this.props.onAddToSelection(option);
     }
 
+    /**
+     * Increments a pagination page to show more items
+     */
+    incrementPage() {
+        this.setState((prev) => ({
+            paginationPage: prev.paginationPage + 1,
+        }));
+    }
+
     render() {
+        const shouldShowShowMore = this.state.allOptions.length > this.props.itemsPerPage * this.state.paginationPage;
         const shouldShowFooter =
             !this.props.isReadOnly && (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions));
         const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
@@ -424,7 +472,7 @@ class BaseOptionsSelector extends Component {
                 ref={(el) => (this.list = el)}
                 optionHoveredStyle={this.props.optionHoveredStyle}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
-                sections={this.props.sections}
+                sections={this.sections}
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
@@ -458,6 +506,16 @@ class BaseOptionsSelector extends Component {
                 shouldPreventDefaultFocusOnSelectRow={this.props.shouldPreventDefaultFocusOnSelectRow}
                 nestedScrollEnabled={this.props.nestedScrollEnabled}
                 bounces={!this.props.shouldTextInputAppearBelowOptions || !this.props.shouldAllowScrollingChildren}
+                renderFooterContent={() =>
+                    shouldShowShowMore && (
+                        <ShowMore
+                            containerStyle={styles.mv2}
+                            currentCount={this.props.itemsPerPage * this.state.paginationPage}
+                            totalCount={this.state.allOptions.length}
+                            onPress={this.incrementPage}
+                        />
+                    )
+                }
             />
         );
 
@@ -475,7 +533,7 @@ class BaseOptionsSelector extends Component {
             <ArrowKeyFocusManager
                 disabledIndexes={this.disabledOptionsIndexes}
                 focusedIndex={this.state.focusedIndex}
-                maxIndex={this.state.allOptions.length - 1}
+                maxIndex={this.allVisibleOptionsCount - 1}
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
                 shouldResetIndexOnEndReached={false}
             >

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -138,6 +138,9 @@ const propTypes = {
 
     /** Whether nested scroll of options is enabled, true by default */
     nestedScrollEnabled: PropTypes.bool,
+
+    /** A maximum number of items per page. Then it multiplies by page. */
+    itemsPerPage: PropTypes.number,
 };
 
 const defaultProps = {
@@ -178,6 +181,7 @@ const defaultProps = {
     shouldTextInputInterceptSwipe: false,
     shouldAllowScrollingChildren: false,
     nestedScrollEnabled: true,
+    itemsPerPage: undefined,
 };
 
 export {propTypes, defaultProps};

src/components/ShowMore/index.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Text, View} from 'react-native';
+import _ from 'underscore';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import * as NumberFormatUtils from '@libs/NumberFormatUtils';
+import stylePropTypes from '@styles/stylePropTypes';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+
+const propTypes = {
+    /** Additional styles for container */
+    containerStyle: stylePropTypes,
+
+    /** A number of current showed items */
+    currentCount: PropTypes.number,
+
+    /** A number of total items */
+    totalCount: PropTypes.number,
+
+    /** A handler fires when button has been pressed */
+    onPress: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+    containerStyle: {},
+    currentCount: undefined,
+    totalCount: undefined,
+};
+
+function ShowMore({containerStyle, currentCount, totalCount, onPress}) {
+    const {translate, preferredLocale} = useLocalize();
+
+    const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount);
+
+    return (
+        <View style={[styles.alignItemsCenter, containerStyle]}>
+            {shouldShowCounter && (
+                <Text style={[styles.mb2, styles.textLabelSupporting]}>
+                    {`${translate('common.showing')} `}
+                    <Text style={styles.textStrong}>{currentCount}</Text>
+                    {` ${translate('common.of')} `}
+                    <Text style={styles.textStrong}>{NumberFormatUtils.format(preferredLocale, totalCount)}</Text>
+                </Text>
+            )}
+            <View style={[styles.w100, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
+                <Button
+                    style={styles.mh0}
+                    small
+                    shouldShowRightIcon
+                    iconFill={themeColors.icon}
+                    iconRight={Expensicons.DownArrow}
+                    text={translate('common.showMore')}
+                    accessibilityLabel={translate('common.showMore')}
+                    onPress={onPress}
+                />
+                <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
+            </View>
+        </View>
+    );
+}
+
+ShowMore.displayName = 'ShowMore';
+ShowMore.propTypes = propTypes;
+ShowMore.defaultProps = defaultProps;
+
+export default ShowMore;

src/components/TagPicker/index.js

@@ -6,12 +6,13 @@ import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './tagPickerPropTypes';
 
-function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit, shouldShowDisabledAndSelectedOption}) {
+function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption, insets, onSubmit}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
@@ -66,6 +67,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
 
     return (
         <OptionsSelector
+            contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
             optionHoveredStyle={styles.hoveredComponentBG}
             sectionHeaderStyle={styles.mt5}
             sections={sections}
@@ -78,6 +80,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
             shouldShowTextInput={shouldShowTextInput}
             value={searchValue}
             initialFocusedIndex={initialFocusedIndex}
+            itemsPerPage={CONST.MAX_COUNT_OF_TAGS}
             onChangeText={setSearchValue}
             onSelectRow={onSubmit}
         />

src/components/TagPicker/tagPickerPropTypes.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import tagPropTypes from '@components/tagPropTypes';
+import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
 
 const propTypes = {
     /** The policyID we are getting tags for */
@@ -23,6 +24,9 @@ const propTypes = {
 
     /** Should show the selected option that is disabled? */
     shouldShowDisabledAndSelectedOption: PropTypes.bool,
+
+    /** Safe area insets required for mobile devices margins */
+    insets: safeAreaInsetPropTypes.isRequired,
 };
 
 const defaultProps = {

src/languages/en.ts

@@ -267,6 +267,8 @@ export default {
         tbd: 'TBD',
         selectCurrency: 'Select a currency',
         card: 'Card',
+        showing: 'Showing',
+        of: 'of',
     },
     location: {
         useCurrent: 'Use current location',
@@ -583,8 +585,8 @@ export default {
             `changed the distance to ${newDistanceToDisplay} (previously ${oldDistanceToDisplay}), which updated the amount to ${newAmountToDisplay} (previously ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
         threadSentMoneyReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} sent${comment ? ` for ${comment}` : ''}`,
-        tagSelection: ({tagName}: TagSelectionParams) => `Select a ${tagName} to add additional organization to your money`,
-        categorySelection: 'Select a category to add additional organization to your money',
+        tagSelection: ({tagName}: TagSelectionParams) => `Select a ${tagName} to add additional organization to your money.`,
+        categorySelection: 'Select a category to add additional organization to your money.',
         error: {
             invalidAmount: 'Please enter a valid amount before continuing.',
             invalidSplit: 'Split amounts do not equal total amount',

src/languages/es.ts

@@ -257,6 +257,8 @@ export default {
         tbd: 'Por determinar',
         selectCurrency: 'Selecciona una moneda',
         card: 'Tarjeta',
+        showing: 'Mostrando',
+        of: 'de',
     },
     location: {
         useCurrent: 'Usar ubicación actual',
@@ -577,8 +579,8 @@ export default {
             `cambió la distancia a ${newDistanceToDisplay} (previamente ${oldDistanceToDisplay}), lo que cambió el importe a ${newAmountToDisplay} (previamente ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,
         threadSentMoneyReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} enviado${comment ? ` para ${comment}` : ''}`,
-        tagSelection: ({tagName}: TagSelectionParams) => `Seleccione una ${tagName} para organizar mejor tu dinero`,
-        categorySelection: 'Seleccione una categoría para organizar mejor tu dinero',
+        tagSelection: ({tagName}: TagSelectionParams) => `Seleccione una ${tagName} para organizar mejor tu dinero.`,
+        categorySelection: 'Seleccione una categoría para organizar mejor tu dinero.',
         error: {
             invalidAmount: 'Por favor ingresa un monto válido antes de continuar.',
             invalidSplit: 'La suma de las partes no equivale al monto total',