From 2d94a2d1ec0db913aff8a329eb800d6c052da784 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 21 Jun 2024 15:05:52 +0200
Subject: [PATCH] support subtitle in TypeSelectorPicker

---
 .../TypeSelector/TypeSelectorModal.tsx         | 18 ++++++++++++++----
 .../reportFields/TypeSelector/index.tsx        |  6 +++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/reportFields/TypeSelector/TypeSelectorModal.tsx b/src/pages/workspace/reportFields/TypeSelector/TypeSelectorModal.tsx
index bf457705b3aa..fe59d0cdb613 100644
--- 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
index fb6532f0aee2..d9ab19980314 100644
--- a/src/pages/workspace/reportFields/TypeSelector/index.tsx
+++ b/src/pages/workspace/reportFields/TypeSelector/index.tsx
@@ -14,6 +14,9 @@ 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;
 
@@ -21,7 +24,7 @@ type TypeSelectorProps = Pick<MenuItemBaseProps, 'label' | 'rightLabel'> & {
     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>
     );