[No QA] [TS Migration] Migrate CollapsibleSection to TypeScript

package.json

@@ -126,7 +126,7 @@
     "react-native": "0.72.4",
     "react-native-android-location-enabler": "^1.2.2",
     "react-native-blob-util": "^0.17.3",
-    "react-native-collapsible": "^1.6.0",
+    "react-native-collapsible": "^1.6.1",
     "react-native-config": "^1.4.5",
     "react-native-dev-menu": "^4.1.1",
     "react-native-device-info": "^10.3.0",

src/components/CollapsibleSection/Collapsible/index.native.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import CollapsibleRN from 'react-native-collapsible';
+import CollapsibleProps from './types';
+
+function Collapsible({isOpened = false, children}: CollapsibleProps) {
+    return <CollapsibleRN collapsed={!isOpened}>{children}</CollapsibleRN>;
+}
+
+Collapsible.displayName = 'Collapsible';
+export default Collapsible;

src/components/CollapsibleSection/Collapsible/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Collapse} from 'react-collapse';
+import CollapsibleProps from './types';
+
+function Collapsible({isOpened = false, children}: CollapsibleProps) {
+    return <Collapse isOpened={isOpened}>{children}</Collapse>;
+}
+export default Collapsible;

src/components/CollapsibleSection/Collapsible/types.ts

@@ -0,0 +1,8 @@
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type CollapsibleProps = ChildrenProps & {
+    /** Whether the section should start expanded. False by default */
+    isOpened?: boolean;
+};
+
+export default CollapsibleProps;

src/components/CollapsibleSection/index.tsx

@@ -0,0 +1,55 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import styles from '@styles/styles';
+import CONST from '@src/CONST';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+import Collapsible from './Collapsible';
+
+type CollapsibleSectionProps = ChildrenProps & {
+    /** Title of the Collapsible section */
+    title: string;
+};
+
+function CollapsibleSection({title, children}: CollapsibleSectionProps) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    /**
+     * Expands/collapses the section
+     */
+    const toggleSection = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    const src = isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow;
+
+    return (
+        <View style={styles.mt4}>
+            <PressableWithFeedback
+                onPress={toggleSection}
+                style={[styles.pb4, styles.flexRow]}
+                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                accessibilityLabel={title}
+                hoverDimmingValue={1}
+                pressDimmingValue={0.2}
+            >
+                <Text
+                    style={[styles.flex1, styles.textStrong, styles.userSelectNone]}
+                    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                >
+                    {title}
+                </Text>
+                <Icon src={src} />
+            </PressableWithFeedback>
+            <View style={styles.collapsibleSectionBorder} />
+            <Collapsible isOpened={isExpanded}>
+                <View>{children}</View>
+            </Collapsible>
+        </View>
+    );
+}
+
+export default CollapsibleSection;