REF: MultipleStepsListItem to TSX

2025-02-23 15:20:55 +01:00 · 2025-01-19 15:12:35 -04:00 · 2025-01-19 15:12:35 -04:00 · 40c5cc7295
commit 40c5cc7295
parent a5fb1bf6f5
5 changed files with 92 additions and 70 deletions
--- a/components/MultipleStepsListItem.tsx
+++ b/components/MultipleStepsListItem.tsx
@ -1,23 +1,66 @@
-import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
-import { ActivityIndicator, findNodeHandle, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  ActivityIndicator,
+  findNodeHandle,
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { Icon } from '@rneui/themed';
-
 import ActionSheet from '../screen/ActionSheet';
-import ActionSheetOptions from '../screen/ActionSheet.common';
 import { useTheme } from './themes';
-export const MultipleStepsListItemDashType = Object.freeze({ none: 0, top: 1, bottom: 2, topAndBottom: 3 });
-export const MultipleStepsListItemButtohType = Object.freeze({ partial: 0, full: 1 });
+import { ActionSheetOptions } from '../screen/ActionSheet.common';

-const MultipleStepsListItem = props => {
+export enum MultipleStepsListItemDashType {
+  None = 0,
+  Top = 1,
+  Bottom = 2,
+  TopAndBottom = 3,
+}
+
+export enum MultipleStepsListItemButtonType {
+  Partial = 0,
+  Full = 1,
+}
+
+interface MultipleStepsListItemProps {
+  circledText?: string;
+  checked?: boolean;
+  leftText?: string;
+  showActivityIndicator?: boolean;
+  isActionSheet?: boolean;
+  actionSheetOptions?: ActionSheetOptions;
+  dashes?: MultipleStepsListItemDashType;
+  button?: {
+    text?: string;
+    onPress?: (e: GestureResponderEvent | number) => void;
+    disabled?: boolean;
+    buttonType?: MultipleStepsListItemButtonType;
+    leftText?: string;
+    showActivityIndicator?: boolean;
+    testID?: string;
+  };
+  rightButton?: {
+    text?: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    showActivityIndicator?: boolean;
+  };
+}
+
+const MultipleStepsListItem = (props: MultipleStepsListItemProps) => {
  const { colors } = useTheme();
  const {
    showActivityIndicator = false,
-    dashes = MultipleStepsListItemDashType.none,
+    dashes = MultipleStepsListItemDashType.None,
    circledText = '',
    leftText = '',
    checked = false,
-    useActionSheet = false,
+    isActionSheet = false,
    actionSheetOptions = null, // Default to null or appropriate default
  } = props;
  const stylesHook = StyleSheet.create({
@ -43,7 +86,7 @@ const MultipleStepsListItem = props => {
  const selfRef = useRef(null); // Create a ref for the component itself

  const handleOnPressForActionSheet = () => {
-    if (useActionSheet && actionSheetOptions) {
+    if (isActionSheet && actionSheetOptions) {
      // Clone options to modify them
      let modifiedOptions = { ...actionSheetOptions };

@ -57,16 +100,16 @@ const MultipleStepsListItem = props => {

      ActionSheet.showActionSheetWithOptions(modifiedOptions, buttonIndex => {
        // Call the original onPress function, if provided, and not cancelled
-        if (buttonIndex !== -1 && props.button.onPress) {
+        if (buttonIndex !== -1 && props.button?.onPress) {
          props.button.onPress(buttonIndex);
        }
      });
    }
  };

-  const renderDashes = () => {
+  const renderDashes = (): StyleProp<ViewStyle> => {
    switch (dashes) {
-      case MultipleStepsListItemDashType.topAndBottom:
+      case MultipleStepsListItemDashType.TopAndBottom:
        return {
          width: 1,
          borderStyle: 'dashed',
@ -77,7 +120,7 @@ const MultipleStepsListItem = props => {
          marginLeft: 20,
          position: 'absolute',
        };
-      case MultipleStepsListItemDashType.bottom:
+      case MultipleStepsListItemDashType.Bottom:
        return {
          width: 1,
          borderStyle: 'dashed',
@ -88,7 +131,7 @@ const MultipleStepsListItem = props => {
          marginLeft: 20,
          position: 'absolute',
        };
-      case MultipleStepsListItemDashType.top:
+      case MultipleStepsListItemDashType.Top:
        return {
          width: 1,
          borderStyle: 'dashed',
@ -105,6 +148,7 @@ const MultipleStepsListItem = props => {
  };
  const buttonOpacity = { opacity: props.button?.disabled ? 0.5 : 1.0 };
  const rightButtonOpacity = { opacity: props.rightButton?.disabled ? 0.5 : 1.0 };
+  const onPress = isActionSheet ? handleOnPressForActionSheet : props.button?.onPress;
  return (
    <View>
      <View style={renderDashes()} />
@ -131,19 +175,19 @@ const MultipleStepsListItem = props => {
        {!showActivityIndicator && props.button && (
          <>
            {props.button.buttonType === undefined ||
-              (props.button.buttonType === MultipleStepsListItemButtohType.full && (
+              (props.button.buttonType === MultipleStepsListItemButtonType.Full && (
                <TouchableOpacity
-                  ref={useActionSheet ? selfRef : null}
+                  ref={isActionSheet ? selfRef : null}
                  testID={props.button.testID}
                  accessibilityRole="button"
                  disabled={props.button.disabled}
                  style={[styles.provideKeyButton, stylesHook.provideKeyButton, buttonOpacity]}
-                  onPress={useActionSheet ? handleOnPressForActionSheet : props.button.onPress}
+                  onPress={onPress}
                >
                  <Text style={[styles.provideKeyButtonText, stylesHook.provideKeyButtonText]}>{props.button.text}</Text>
                </TouchableOpacity>
              ))}
-            {props.button.buttonType === MultipleStepsListItemButtohType.partial && (
+            {props.button.buttonType === MultipleStepsListItemButtonType.Partial && (
              <View style={styles.buttonPartialContainer}>
                <Text numberOfLines={1} style={[styles.rowPartialLeftText, stylesHook.rowPartialLeftText]} lineBreakMode="middle">
                  {props.button.leftText}
@ -153,7 +197,7 @@ const MultipleStepsListItem = props => {
                  accessibilityRole="button"
                  disabled={props.button.disabled}
                  style={[styles.rowPartialRightButton, stylesHook.provideKeyButton, rightButtonOpacity]}
-                  onPress={props.button.onPress}
+                  onPress={onPress}
                >
                  {props.button.showActivityIndicator ? (
                    <ActivityIndicator />
@ -188,30 +232,6 @@ const MultipleStepsListItem = props => {
  );
 };

-MultipleStepsListItem.propTypes = {
-  circledText: PropTypes.string,
-  checked: PropTypes.bool,
-  leftText: PropTypes.string,
-  showActivityIndicator: PropTypes.bool,
-  useActionSheet: PropTypes.bool,
-  actionSheetOptions: PropTypes.shape(ActionSheetOptions),
-  dashes: PropTypes.number,
-  button: PropTypes.shape({
-    text: PropTypes.string,
-    onPress: PropTypes.func,
-    disabled: PropTypes.bool,
-    buttonType: PropTypes.number,
-    leftText: PropTypes.string,
-    showActivityIndicator: PropTypes.bool,
-  }),
-  rightButton: PropTypes.shape({
-    text: PropTypes.string,
-    onPress: PropTypes.func,
-    disabled: PropTypes.bool,
-    showActivityIndicator: PropTypes.bool,
-  }),
-};
-
 const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -13,7 +13,7 @@ PODS:
    - hermes-engine/Pre-built (= 0.75.4)
  - hermes-engine/Pre-built (0.75.4)
  - lottie-ios (4.5.0)
-  - lottie-react-native (7.2.1):
+  - lottie-react-native (7.2.2):
    - DoubleConversion
    - glog
    - hermes-engine
@ -2209,7 +2209,7 @@ SPEC CHECKSUMS:
  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
  hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
  lottie-ios: a881093fab623c467d3bce374367755c272bdd59
-  lottie-react-native: 816fb00189b309b3eee7c152ddfc8d37f56d1865
+  lottie-react-native: 64e768349391867509ebdd097663ac991afcbd8c
  RCT-Folly: 34124ae2e667a0e5f0ea378db071d27548124321
  RCTDeprecation: 726d24248aeab6d7180dac71a936bbca6a994ed1
  RCTRequired: a94e7febda6db0345d207e854323c37e3a31d93b
--- a/screen/ActionSheet.common.ts
+++ b/screen/ActionSheet.common.ts
@ -5,6 +5,7 @@ export interface ActionSheetOptions {
  options: string[]; // Array of button labels.
  destructiveButtonIndex?: number;
  cancelButtonIndex?: number;
+  confirmButtonIndex?: number;
  anchor?: number;
 }

--- a/screen/wallets/ViewEditMultisigCosigners.tsx
+++ b/screen/wallets/ViewEditMultisigCosigners.tsx
@ -5,6 +5,7 @@ import {
  Alert,
  findNodeHandle,
  FlatList,
+  GestureResponderEvent,
  InteractionManager,
  Keyboard,
  LayoutAnimation,
@ -31,7 +32,7 @@ import presentAlert from '../../components/Alert';
 import BottomModal, { BottomModalHandle } from '../../components/BottomModal';
 import Button from '../../components/Button';
 import MultipleStepsListItem, {
-  MultipleStepsListItemButtohType,
+  MultipleStepsListItemButtonType,
  MultipleStepsListItemDashType,
 } from '../../components/MultipleStepsListItem';
 import QRCodeComponent from '../../components/QRCodeComponent';
@ -321,7 +322,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
        <MultipleStepsListItem
          checked
          leftText={loc.formatString(loc.multisig.vault_key, { number: el.index + 1 })}
-          dashes={el.index === length - 1 ? MultipleStepsListItemDashType.bottom : MultipleStepsListItemDashType.topAndBottom}
+          dashes={el.index === length - 1 ? MultipleStepsListItemDashType.Bottom : MultipleStepsListItemDashType.TopAndBottom}
        />

        {isXpub ? (
@ -329,7 +330,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
            {!vaultKeyData.isLoading && (
              <MultipleStepsListItem
                button={{
-                  buttonType: MultipleStepsListItemButtohType.partial,
+                  buttonType: MultipleStepsListItemButtonType.Partial,
                  leftText,
                  text: loc.multisig.view,
                  showActivityIndicator: isVaultKeyIndexDataLoading === el.index + 1,
@ -362,21 +363,21 @@ const ViewEditMultisigCosigners: React.FC = () => {
                    }, 100);
                  },
                }}
-                dashes={MultipleStepsListItemDashType.topAndBottom}
+                dashes={MultipleStepsListItemDashType.TopAndBottom}
              />
            )}
            <MultipleStepsListItem
              showActivityIndicator={vaultKeyData.keyIndex === el.index + 1 && vaultKeyData.isLoading}
              button={{
                text: loc.multisig.i_have_mnemonics,
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
                disabled: vaultKeyData.isLoading,
                onPress: () => {
                  setCurrentlyEditingCosignerNum(el.index + 1);
                  provideMnemonicsModalRef.current?.present();
                },
              }}
-              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.top : MultipleStepsListItemDashType.topAndBottom}
+              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.Top : MultipleStepsListItemDashType.TopAndBottom}
            />
          </View>
        ) : (
@ -389,7 +390,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
                  text: loc.multisig.view,
                  disabled: vaultKeyData.isLoading,
                  showActivityIndicator: isVaultKeyIndexDataLoading === el.index + 1,
-                  buttonType: MultipleStepsListItemButtohType.partial,
+                  buttonType: MultipleStepsListItemButtonType.Partial,
                  onPress: () => {
                    setIsVaultKeyIndexDataLoading(el.index + 1);
                    setTimeout(() => {
@ -420,7 +421,7 @@ const ViewEditMultisigCosigners: React.FC = () => {
                    }, 100);
                  },
                }}
-                dashes={MultipleStepsListItemDashType.topAndBottom}
+                dashes={MultipleStepsListItemDashType.TopAndBottom}
              />
            )}

@ -433,14 +434,14 @@ const ViewEditMultisigCosigners: React.FC = () => {
                confirmButtonIndex: 1,
              }}
              showActivityIndicator={vaultKeyData.keyIndex === el.index + 1 && vaultKeyData.isLoading}
-              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.top : MultipleStepsListItemDashType.topAndBottom}
+              dashes={el.index === length - 1 ? MultipleStepsListItemDashType.Top : MultipleStepsListItemDashType.TopAndBottom}
              button={{
                text: loc.multisig.forget_this_seed,
                disabled: vaultKeyData.isLoading,
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,

-                onPress: (buttonIndex: number) => {
-                  if (buttonIndex === 0) return;
+                onPress: (e: number | GestureResponderEvent) => {
+                  if (e === 0) return;
                  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
                  setVaultKeyData({
                    ...vaultKeyData,
--- a/screen/wallets/addMultisigStep2.js
+++ b/screen/wallets/addMultisigStep2.js
@ -21,10 +21,6 @@ import { HDSegwitBech32Wallet, MultisigCosigner, MultisigHDWallet } from '../../
 import presentAlert from '../../components/Alert';
 import BottomModal from '../../components/BottomModal';
 import Button from '../../components/Button';
-import MultipleStepsListItem, {
-  MultipleStepsListItemButtohType,
-  MultipleStepsListItemDashType,
-} from '../../components/MultipleStepsListItem';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import { useTheme } from '../../components/themes';
 import confirm from '../../helpers/confirm';
@ -42,6 +38,10 @@ import {
  DoneAndDismissKeyboardInputAccessory,
  DoneAndDismissKeyboardInputAccessoryViewID,
 } from '../../components/DoneAndDismissKeyboardInputAccessory';
+import MultipleStepsListItem, {
+  MultipleStepsListItemButtonType,
+  MultipleStepsListItemDashType,
+} from '../../components/MultipleStepsListItem';

 const staticCache = {};

@ -495,15 +495,15 @@ const WalletsAddMultisigStep2 = () => {
  const dashType = ({ index, lastIndex, isChecked, isFocus }) => {
    if (isChecked) {
      if (index === lastIndex) {
-        return MultipleStepsListItemDashType.top;
+        return MultipleStepsListItemDashType;
      } else {
-        return MultipleStepsListItemDashType.topAndBottom;
+        return MultipleStepsListItemDashType.TopAndBottom;
      }
    } else {
      if (index === lastIndex) {
-        return isFocus ? MultipleStepsListItemDashType.topAndBottom : MultipleStepsListItemDashType.top;
+        return isFocus ? MultipleStepsListItemDashType.TopAndBottom : MultipleStepsListItemDashType.Top;
      } else {
-        return MultipleStepsListItemDashType.topAndBottom;
+        return MultipleStepsListItemDashType.TopAndBottom;
      }
    }
  };
@ -531,7 +531,7 @@ const WalletsAddMultisigStep2 = () => {
            <MultipleStepsListItem
              showActivityIndicator={vaultKeyData.keyIndex === el.index && vaultKeyData.isLoading}
              button={{
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
                onPress: () => {
                  setVaultKeyData({ keyIndex: el.index, xpub: '', seed: '', isLoading: true });
                  generateNewKey();
@ -539,18 +539,18 @@ const WalletsAddMultisigStep2 = () => {
                text: loc.multisig.create_new_key,
                disabled: vaultKeyData.isLoading,
              }}
-              dashes={MultipleStepsListItemDashType.topAndBottom}
+              dashes={MultipleStepsListItemDashType.TopAndBottom}
              checked={isChecked}
            />
            <MultipleStepsListItem
              button={{
                testID: 'VaultCosignerImport' + String(el.index + 1),
                onPress: iHaveMnemonics,
-                buttonType: MultipleStepsListItemButtohType.full,
+                buttonType: MultipleStepsListItemButtonType.Full,
                text: loc.wallets.import_do_import,
                disabled: vaultKeyData.isLoading,
              }}
-              dashes={el.index === data.current.length - 1 ? MultipleStepsListItemDashType.top : MultipleStepsListItemDashType.topAndBottom}
+              dashes={el.index === data.current.length - 1 ? MultipleStepsListItemDashType.Top : MultipleStepsListItemDashType.TopAndBottom}
              checked={isChecked}
            />
          </>