diff --git a/components/MultipleStepsListItem.js b/components/MultipleStepsListItem.tsx similarity index 81% rename from components/MultipleStepsListItem.js rename to components/MultipleStepsListItem.tsx index a6f5e4a23..a62d68082 100644 --- a/components/MultipleStepsListItem.js +++ 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 => { 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 ( @@ -131,19 +175,19 @@ const MultipleStepsListItem = props => { {!showActivityIndicator && props.button && ( <> {props.button.buttonType === undefined || - (props.button.buttonType === MultipleStepsListItemButtohType.full && ( + (props.button.buttonType === MultipleStepsListItemButtonType.Full && ( {props.button.text} ))} - {props.button.buttonType === MultipleStepsListItemButtohType.partial && ( + {props.button.buttonType === MultipleStepsListItemButtonType.Partial && ( {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 ? ( @@ -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', diff --git a/ios/Podfile.lock b/ios/Podfile.lock index ba03a849c..31579cd1c 100644 --- 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 diff --git a/screen/ActionSheet.common.ts b/screen/ActionSheet.common.ts index c2b66233f..46e4155be 100644 --- 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; } diff --git a/screen/wallets/ViewEditMultisigCosigners.tsx b/screen/wallets/ViewEditMultisigCosigners.tsx index 590a7b098..a782172d5 100644 --- 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 = () => { {isXpub ? ( @@ -329,7 +330,7 @@ const ViewEditMultisigCosigners: React.FC = () => { {!vaultKeyData.isLoading && ( { }, 100); }, }} - dashes={MultipleStepsListItemDashType.topAndBottom} + dashes={MultipleStepsListItemDashType.TopAndBottom} /> )} { 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} /> ) : ( @@ -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, diff --git a/screen/wallets/addMultisigStep2.js b/screen/wallets/addMultisigStep2.js index 1ce3c1f47..f16d4c451 100644 --- 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 = () => { { 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} />