From 4ee167df9e3cecece730c6bf89b8145126982ef8 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 8 Nov 2023 09:25:37 +0100 Subject: [PATCH 1/7] bump react-native-collapsible version --- package-lock.json | 11 +++++++---- package.json | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index b9eb50615924..5c7e14208387 100644 --- a/package-lock.json +++ b/package-lock.json @@ -78,7 +78,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", @@ -44560,8 +44560,9 @@ } }, "node_modules/react-native-collapsible": { - "version": "1.6.0", - "license": "MIT", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.6.1.tgz", + "integrity": "sha512-orF4BeiXd2hZW7fu9YcqIJXzN6TJcFcddY807D3MAOVktLuW9oQ+RIkrTJ5DR3v9ZOFfREkOjEmS79qeUTvkBQ==", "peerDependencies": { "react": "*", "react-native": "*" @@ -85276,7 +85277,9 @@ "dev": true }, "react-native-collapsible": { - "version": "1.6.0", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/react-native-collapsible/-/react-native-collapsible-1.6.1.tgz", + "integrity": "sha512-orF4BeiXd2hZW7fu9YcqIJXzN6TJcFcddY807D3MAOVktLuW9oQ+RIkrTJ5DR3v9ZOFfREkOjEmS79qeUTvkBQ==", "requires": {} }, "react-native-config": { diff --git a/package.json b/package.json index f10ec0d81ee9..0b05e0705537 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,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", From 6740d923d323f7885ae09971eccdec9fd9e1297e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 8 Nov 2023 09:26:41 +0100 Subject: [PATCH 2/7] migrate Collapsible to TypeScript --- .../Collapsible/index.native.js | 24 ------------------- .../Collapsible/index.native.tsx | 15 ++++++++++++ .../Collapsible/{index.js => index.tsx} | 0 3 files changed, 15 insertions(+), 24 deletions(-) delete mode 100644 src/components/CollapsibleSection/Collapsible/index.native.js create mode 100644 src/components/CollapsibleSection/Collapsible/index.native.tsx rename src/components/CollapsibleSection/Collapsible/{index.js => index.tsx} (100%) diff --git a/src/components/CollapsibleSection/Collapsible/index.native.js b/src/components/CollapsibleSection/Collapsible/index.native.js deleted file mode 100644 index 9b800304beeb..000000000000 --- a/src/components/CollapsibleSection/Collapsible/index.native.js +++ /dev/null @@ -1,24 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import CollapsibleRN from 'react-native-collapsible'; - -const propTypes = { - /** Whether the section should start expanded. False by default */ - isOpened: PropTypes.bool, - - /** Children to display inside the Collapsible component */ - children: PropTypes.node.isRequired, -}; - -const defaultProps = { - isOpened: false, -}; - -function Collapsible(props) { - return {props.children}; -} - -Collapsible.displayName = 'Collapsible'; -Collapsible.propTypes = propTypes; -Collapsible.defaultProps = defaultProps; -export default Collapsible; diff --git a/src/components/CollapsibleSection/Collapsible/index.native.tsx b/src/components/CollapsibleSection/Collapsible/index.native.tsx new file mode 100644 index 000000000000..48f118c7a189 --- /dev/null +++ b/src/components/CollapsibleSection/Collapsible/index.native.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import CollapsibleRN from 'react-native-collapsible'; +import ChildrenProps from '@src/types/utils/ChildrenProps'; + +type CollapsibleProps = ChildrenProps & { + /** Whether the section should start expanded. False by default */ + isOpened?: boolean; +}; + +function Collapsible({isOpened = false, children}: CollapsibleProps) { + return {children}; +} + +Collapsible.displayName = 'Collapsible'; +export default Collapsible; diff --git a/src/components/CollapsibleSection/Collapsible/index.js b/src/components/CollapsibleSection/Collapsible/index.tsx similarity index 100% rename from src/components/CollapsibleSection/Collapsible/index.js rename to src/components/CollapsibleSection/Collapsible/index.tsx From 0f9ecf598c70763153918a53f445b22471150a56 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 8 Nov 2023 09:26:56 +0100 Subject: [PATCH 3/7] start migrating CollapsibleSection to TypeScript --- src/components/CollapsibleSection/index.js | 71 --------------------- src/components/CollapsibleSection/index.tsx | 57 +++++++++++++++++ 2 files changed, 57 insertions(+), 71 deletions(-) delete mode 100644 src/components/CollapsibleSection/index.js create mode 100644 src/components/CollapsibleSection/index.tsx diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js deleted file mode 100644 index 32d422297ca4..000000000000 --- a/src/components/CollapsibleSection/index.js +++ /dev/null @@ -1,71 +0,0 @@ -import PropTypes from 'prop-types'; -import React 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 Collapsible from './Collapsible'; - -const propTypes = { - /** Title of the Collapsible section */ - title: PropTypes.string.isRequired, - - /** Children to display inside the Collapsible component */ - children: PropTypes.node.isRequired, -}; - -class CollapsibleSection extends React.Component { - constructor(props) { - super(props); - this.toggleSection = this.toggleSection.bind(this); - this.state = { - isExpanded: false, - }; - } - - /** - * Expands/collapses the section - */ - toggleSection() { - this.setState((prevState) => ({ - isExpanded: !prevState.isExpanded, - })); - } - - render() { - const src = this.state.isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow; - - return ( - - - - {this.props.title} - - - - - - - {this.props.children} - - - ); - } -} - -CollapsibleSection.propTypes = propTypes; -export default CollapsibleSection; diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx new file mode 100644 index 000000000000..1475b535cdaa --- /dev/null +++ b/src/components/CollapsibleSection/index.tsx @@ -0,0 +1,57 @@ +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(props: CollapsibleSectionProps) { + const [isExpanded, setIsExpanded] = useState(false); + + /** + * Expands/collapses the section + */ + const toggleSection = () => { + setIsExpanded(!isExpanded); + }; + + const src = isExpanded ? Expensicons.UpArrow : Expensicons.DownArrow; + + return ( + + + + {props.title} + + + + + + + {props.children} + + + ); +} + +export default CollapsibleSection; From d04a7338598becd085b2e6f8398ca21888fbc82e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 8 Nov 2023 13:24:09 +0100 Subject: [PATCH 4/7] fix type errors on CollapsibleSection --- src/components/CollapsibleSection/Collapsible/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CollapsibleSection/Collapsible/index.tsx b/src/components/CollapsibleSection/Collapsible/index.tsx index 51d650ed5748..867f0bb1228b 100644 --- a/src/components/CollapsibleSection/Collapsible/index.tsx +++ b/src/components/CollapsibleSection/Collapsible/index.tsx @@ -1,3 +1,3 @@ -import Collapsible from 'react-collapse'; +import {Collapse} from 'react-collapse'; -export default Collapsible; +export default Collapse; From 5d90cc0127907cd27859f1aad899dc8baddf25c7 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 8 Nov 2023 13:45:48 +0100 Subject: [PATCH 5/7] create common types file for Collapsible component --- .../CollapsibleSection/Collapsible/index.native.tsx | 7 +------ src/components/CollapsibleSection/Collapsible/index.tsx | 7 ++++++- src/components/CollapsibleSection/Collapsible/types.ts | 8 ++++++++ 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 src/components/CollapsibleSection/Collapsible/types.ts diff --git a/src/components/CollapsibleSection/Collapsible/index.native.tsx b/src/components/CollapsibleSection/Collapsible/index.native.tsx index 48f118c7a189..e8d3dc9439d0 100644 --- a/src/components/CollapsibleSection/Collapsible/index.native.tsx +++ b/src/components/CollapsibleSection/Collapsible/index.native.tsx @@ -1,11 +1,6 @@ import React from 'react'; import CollapsibleRN from 'react-native-collapsible'; -import ChildrenProps from '@src/types/utils/ChildrenProps'; - -type CollapsibleProps = ChildrenProps & { - /** Whether the section should start expanded. False by default */ - isOpened?: boolean; -}; +import CollapsibleProps from './types'; function Collapsible({isOpened = false, children}: CollapsibleProps) { return {children}; diff --git a/src/components/CollapsibleSection/Collapsible/index.tsx b/src/components/CollapsibleSection/Collapsible/index.tsx index 867f0bb1228b..2585fd92f42b 100644 --- a/src/components/CollapsibleSection/Collapsible/index.tsx +++ b/src/components/CollapsibleSection/Collapsible/index.tsx @@ -1,3 +1,8 @@ +import React from 'react'; import {Collapse} from 'react-collapse'; +import CollapsibleProps from './types'; -export default Collapse; +function Collapsible({isOpened = false, children}: CollapsibleProps) { + return {children}; +} +export default Collapsible; diff --git a/src/components/CollapsibleSection/Collapsible/types.ts b/src/components/CollapsibleSection/Collapsible/types.ts new file mode 100644 index 000000000000..8b8e8aba6860 --- /dev/null +++ b/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; From 97fde1b8f93521f395595a201ad2e42a187b7e42 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 8 Nov 2023 15:00:47 +0100 Subject: [PATCH 6/7] remove unnecessary newline --- src/components/CollapsibleSection/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx index 9b985aea803d..3cb19a52866d 100644 --- a/src/components/CollapsibleSection/index.tsx +++ b/src/components/CollapsibleSection/index.tsx @@ -45,7 +45,6 @@ function CollapsibleSection(props: CollapsibleSectionProps) { - {props.children} From e2d0ba1e5fee0c0f4e7024149dfc3393eb506e22 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 9 Nov 2023 11:39:48 +0100 Subject: [PATCH 7/7] destructure props in CollapsibleSection --- src/components/CollapsibleSection/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx index 3cb19a52866d..434017f2a547 100644 --- a/src/components/CollapsibleSection/index.tsx +++ b/src/components/CollapsibleSection/index.tsx @@ -14,7 +14,7 @@ type CollapsibleSectionProps = ChildrenProps & { title: string; }; -function CollapsibleSection(props: CollapsibleSectionProps) { +function CollapsibleSection({title, children}: CollapsibleSectionProps) { const [isExpanded, setIsExpanded] = useState(false); /** @@ -32,7 +32,7 @@ function CollapsibleSection(props: CollapsibleSectionProps) { onPress={toggleSection} style={[styles.pb4, styles.flexRow]} role={CONST.ACCESSIBILITY_ROLE.BUTTON} - accessibilityLabel={props.title} + accessibilityLabel={title} hoverDimmingValue={1} pressDimmingValue={0.2} > @@ -40,13 +40,13 @@ function CollapsibleSection(props: CollapsibleSectionProps) { style={[styles.flex1, styles.textStrong, styles.userSelectNone]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} > - {props.title} + {title} - {props.children} + {children} );