Merge pull request #37456 from neonbhai/category-picker-indent-fix

fix: Add indenting logic for subcategories
Expensify · Mar 25, 2024 · a5189c4 · a5189c4
2 parents bd3bfba + ac67125
commit a5189c4
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {RadioListItemProps} from './types';
 
@@ -22,6 +23,9 @@ function RadioListItem({
 }: RadioListItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
+    const indentsLength = (item.text?.length ?? 0) - (fullTitle?.length ?? 0);
+    const paddingLeft = Math.floor(indentsLength / CONST.INDENTS.length) * styles.ml3.marginLeft;
 
     return (
         <BaseListItem
@@ -44,14 +48,15 @@ function RadioListItem({
                 <View style={[styles.flex1, styles.alignItemsStart]}>
                     <TextWithTooltip
                         shouldShowTooltip={showTooltip}
-                        text={item.text ?? ''}
+                        text={fullTitle ?? ''}
                         style={[
                             styles.optionDisplayName,
                             isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                             styles.sidebarLinkTextBold,
                             isMultilineSupported ? styles.preWrap : styles.pre,
                             item.alternateText ? styles.mb1 : null,
                             isDisabled && styles.colorMuted,
+                            isMultilineSupported ? {paddingLeft} : null,
                         ]}
                         numberOfLines={isMultilineSupported ? 2 : 1}
                     />