Merge pull request #30267 from software-mansion-labs/ts/ConfirmationPage

[TS migration] Migrate 'ConfirmationPage.js' component to TypeScript

src/components/ConfirmationPage.js → src/components/ConfirmationPage.tsx

@@ -1,75 +1,63 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
+import DotLottieAnimation from './LottieAnimations/types';
 import Text from './Text';
 
-const propTypes = {
+type ConfirmationPageProps = {
     /** The asset to render */
-    // eslint-disable-next-line react/forbid-prop-types
-    animation: PropTypes.object,
+    animation?: DotLottieAnimation;
 
     /** Heading of the confirmation page */
-    heading: PropTypes.string,
+    heading: string;
 
     /** Description of the confirmation page */
-    description: PropTypes.string,
+    description: string;
 
     /** The text for the button label */
-    buttonText: PropTypes.string,
+    buttonText?: string;
 
     /** A function that is called when the button is clicked on */
-    onButtonPress: PropTypes.func,
+    onButtonPress?: () => void;
 
     /** Whether we should show a confirmation button */
-    shouldShowButton: PropTypes.bool,
+    shouldShowButton?: boolean;
 };
 
-const defaultProps = {
-    animation: LottieAnimations.Fireworks,
-    heading: '',
-    description: '',
-    buttonText: '',
-    onButtonPress: () => {},
-    shouldShowButton: false,
-};
-
-function ConfirmationPage(props) {
+function ConfirmationPage({animation = LottieAnimations.Fireworks, heading, description, buttonText = '', onButtonPress = () => {}, shouldShowButton = false}: ConfirmationPageProps) {
     const styles = useThemeStyles();
+
     return (
         <>
             <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
                 <Lottie
-                    source={props.animation}
+                    source={animation}
                     autoPlay
                     loop
                     style={styles.confirmationAnimation}
-                    webStyle={styles.confirmationAnimationWeb}
                 />
-                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{props.heading}</Text>
-                <Text style={styles.textAlignCenter}>{props.description}</Text>
+                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{heading}</Text>
+                <Text style={styles.textAlignCenter}>{description}</Text>
             </View>
-            {props.shouldShowButton && (
+            {shouldShowButton && (
                 <FixedFooter>
                     <Button
                         success
-                        text={props.buttonText}
+                        text={buttonText}
                         style={styles.mt6}
                         pressOnEnter
-                        onPress={props.onButtonPress}
+                        onPress={onButtonPress}
                     />
                 </FixedFooter>
             )}
         </>
     );
 }
 
-ConfirmationPage.propTypes = propTypes;
-ConfirmationPage.defaultProps = defaultProps;
 ConfirmationPage.displayName = 'ConfirmationPage';
 
 export default ConfirmationPage;

src/components/FixedFooter.tsx

@@ -10,7 +10,7 @@ type FixedFooterProps = {
     style?: StyleProp<ViewStyle>;
 };
 
-function FixedFooter({style = [], children}: FixedFooterProps) {
+function FixedFooter({style, children}: FixedFooterProps) {
     const styles = useThemeStyles();
     return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, style]}>{children}</View>;
 }