support subtitle in TypeSelectorPicker

rezkiy37 · Jun 21, 2024 · 2d94a2d · 2d94a2d
1 parent 7e3a26c
commit 2d94a2d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/pages/workspace/reportFields/TypeSelector/TypeSelectorModal.tsx b/src/pages/workspace/reportFields/TypeSelector/TypeSelectorModal.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
+import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import type {ReportFieldItemType} from '@components/ReportFieldTypePicker';
 import ReportFieldTypePicker from '@components/ReportFieldTypePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {PolicyReportFieldType} from '@src/types/onyx/Policy';
@@ -15,18 +18,22 @@ type TypeSelectorModalProps = {
     /** Selected type */
     currentType: PolicyReportFieldType;
 
+    /** Label to display on field */
+    label: string;
+
+    /** Subtitle to display on field */
+    subtitle: string;
+
     /** Function to call when the user selects a type */
     onTypeSelected: (value: ReportFieldItemType) => void;
 
     /** Function to call when the user closes the type selector modal */
     onClose: () => void;
-
-    /** Label to display on field */
-    label: string;
 };
 
-function TypeSelectorModal({isVisible, currentType, onTypeSelected, onClose, label}: TypeSelectorModalProps) {
+function TypeSelectorModal({isVisible, currentType, label, subtitle, onTypeSelected, onClose}: TypeSelectorModalProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
 
     return (
         <Modal
@@ -48,6 +55,9 @@ function TypeSelectorModal({isVisible, currentType, onTypeSelected, onClose, lab
                     shouldShowBackButton
                     onBackButtonPress={onClose}
                 />
+                <View style={[styles.ph5, styles.pb4]}>
+                    <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.pre])}>{subtitle}</Text>
+                </View>
                 <ReportFieldTypePicker
                     defaultValue={currentType}
                     onOptionSelected={onTypeSelected}

diff --git a/src/pages/workspace/reportFields/TypeSelector/index.tsx b/src/pages/workspace/reportFields/TypeSelector/index.tsx
@@ -14,14 +14,17 @@ type TypeSelectorProps = Pick<MenuItemBaseProps, 'label' | 'rightLabel'> & {
     /** Currently selected type */
     value?: string;
 
+    /** Subtitle to display on field */
+    subtitle?: string;
+
     /** Function to call when the user selects a type */
     onInputChange?: (value: string) => void;
 
     /** Function to call when the user selects a type */
     onTypeSelected?: (reportFieldType: PolicyReportFieldType) => void;
 };
 
-function TypeSelector({value, label, rightLabel, onInputChange, onTypeSelected}: TypeSelectorProps, forwardedRef: ForwardedRef<View>) {
+function TypeSelector({value, label, rightLabel, subtitle, onInputChange, onTypeSelected}: TypeSelectorProps, forwardedRef: ForwardedRef<View>) {
     const {translate} = useLocalize();
 
     const [isPickerVisible, setIsPickerVisible] = useState(false);
@@ -56,6 +59,7 @@ function TypeSelector({value, label, rightLabel, onInputChange, onTypeSelected}:
                 onClose={hidePickerModal}
                 onTypeSelected={updateTypeInput}
                 label={label ?? ''}
+                subtitle={subtitle ?? ''}
             />
         </View>
     );