Merge pull request #2647 from myxmaster/use-uuid-for-nodes

Use index for keyExtractor in nodes DragList
ZeusLN · Dec 19, 2024 · b7cc030 · b7cc030
2 parents cc42f9d + b85eb54
commit b7cc030
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 23 deletions.
diff --git a/components/TextInput.tsx b/components/TextInput.tsx
@@ -39,8 +39,8 @@ interface TextInputProps {
 }
 
 const TextInput = React.forwardRef<TextInputRN, TextInputProps>(
-    (
-        {
+    (props, ref) => {
+        const {
             placeholder,
             value,
             onChangeText,
@@ -62,9 +62,7 @@ const TextInput = React.forwardRef<TextInputRN, TextInputProps>(
             onPressIn,
             right,
             error
-        },
-        ref
-    ) => {
+        } = props;
         const defaultStyle = numberOfLines
             ? {
                   paddingTop: 10
@@ -185,7 +183,9 @@ const TextInput = React.forwardRef<TextInputRN, TextInputProps>(
             </View>
         );
     }
-);
+) as React.ForwardRefExoticComponent<
+    TextInputProps & React.RefAttributes<TextInputRN>
+>;
 
 const styles = StyleSheet.create({
     wrapper: {

diff --git a/package.json b/package.json
@@ -92,7 +92,7 @@
     "react-native-crypto": "2.2.0",
     "react-native-date-picker": "4.3.3",
     "react-native-device-info": "11.1.0",
-    "react-native-draglist": "3.5.1",
+    "react-native-draglist": "3.8.0",
     "react-native-elements": "3.4.3",
     "react-native-encrypted-storage": "4.0.3",
     "react-native-fs": "2.20.0",

diff --git a/views/Settings/CurrencyConverter.tsx b/views/Settings/CurrencyConverter.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
-import { observer, inject } from 'mobx-react';
 import {
     TouchableOpacity,
     View,
     StyleSheet,
     Animated,
     Easing,
-    ScrollView
+    ScrollView,
+    FlatListProps
 } from 'react-native';
+
+import { observer, inject } from 'mobx-react';
 import Svg, { Text } from 'react-native-svg';
 import DragList, { DragListRenderItemInfo } from 'react-native-draglist';
 import { Icon } from 'react-native-elements';
@@ -25,6 +27,8 @@ import { Row } from '../../components/layout/Row';
 
 import { themeColor } from '../../utils/ThemeUtils';
 import { localeString } from '../../utils/LocaleUtils';
+import { numberWithCommas } from '../../utils/UnitsUtils';
+
 import FiatStore from '../../stores/FiatStore';
 import { CURRENCY_KEYS } from '../../stores/SettingsStore';
 
@@ -33,7 +37,12 @@ import Edit from '../../assets/images/SVG/Pen.svg';
 import DragDots from '../../assets/images/SVG/DragDots.svg';
 import BitcoinIcon from '../../assets/images/SVG/bitcoin-icon.svg';
 
-import { numberWithCommas } from '../../utils/UnitsUtils';
+interface Props<T> extends Omit<FlatListProps<T>, 'renderItem'> {
+    data: T[];
+    keyExtractor: (item: T, index: number) => string;
+    renderItem: (info: DragListRenderItemInfo<T>) => React.ReactElement | null;
+    onReordered?: (fromIndex: number, toIndex: number) => Promise<void> | void;
+}
 
 interface CurrencyConverterProps {
     navigation: StackNavigationProp<any, any>;
@@ -53,6 +62,8 @@ const EMOJI_REPLACEMENTS = {
     XAG: 'Ag'
 };
 
+const TypedDragList = DragList as unknown as React.ComponentType<Props<string>>;
+
 @inject('FiatStore')
 @observer
 export default class CurrencyConverter extends React.Component<
@@ -498,10 +509,10 @@ export default class CurrencyConverter extends React.Component<
                                 paddingBottom: 10
                             }}
                         >
-                            <DragList
+                            <TypedDragList
                                 onReordered={this.onReordered}
                                 data={Object.keys(inputValues)}
-                                keyExtractor={(item: any) => item}
+                                keyExtractor={(item) => String(item)}
                                 scrollEnabled={false}
                                 renderItem={({
                                     item,

diff --git a/views/Settings/Wallets.tsx b/views/Settings/Wallets.tsx
@@ -1,18 +1,31 @@
 import * as React from 'react';
-import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    Image,
+    StyleSheet,
+    FlatListProps
+} from 'react-native';
+
 import DragList, { DragListRenderItemInfo } from 'react-native-draglist';
 import { Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 import { StackNavigationProp } from '@react-navigation/stack';
+import cloneDeep from 'lodash/cloneDeep';
 
 import Button from '../../components/Button';
 import Header from '../../components/Header';
 import NodeIdenticon, { NodeTitle } from '../../components/NodeIdenticon';
 import Screen from '../../components/Screen';
+import LoadingIndicator from '../../components/LoadingIndicator';
 
 import BalanceStore from '../../stores/BalanceStore';
 import NodeInfoStore from '../../stores/NodeInfoStore';
-import SettingsStore, { INTERFACE_KEYS } from '../../stores/SettingsStore';
+import SettingsStore, {
+    INTERFACE_KEYS,
+    Node
+} from '../../stores/SettingsStore';
 import ChannelsStore from '../../stores/ChannelsStore';
 
 import { getPhoto } from '../../utils/PhotoUtils';
@@ -22,8 +35,13 @@ import BackendUtils from '../../utils/BackendUtils';
 
 import Add from '../../assets/images/SVG/Add.svg';
 import DragDots from '../../assets/images/SVG/DragDots.svg';
-import LoadingIndicator from '../../components/LoadingIndicator';
-import cloneDeep from 'lodash/cloneDeep';
+
+interface Props<T> extends Omit<FlatListProps<T>, 'renderItem'> {
+    data: T[];
+    keyExtractor: (item: T, index: number) => string;
+    renderItem: (info: DragListRenderItemInfo<T>) => React.ReactElement | null;
+    onReordered?: (fromIndex: number, toIndex: number) => Promise<void> | void;
+}
 
 interface NodesProps {
     nodes: any[];
@@ -43,6 +61,8 @@ interface NodesState {
     loading: boolean;
 }
 
+const TypedDragList = DragList as unknown as React.ComponentType<Props<Node>>;
+
 @inject('BalanceStore', 'NodeInfoStore', 'ChannelsStore', 'SettingsStore')
 @observer
 export default class Nodes extends React.Component<NodesProps, NodesState> {
@@ -187,11 +207,11 @@ export default class Nodes extends React.Component<NodesProps, NodesState> {
                 {loading && <LoadingIndicator />}
                 {!loading && !!nodes && nodes.length > 0 && (
                     <View style={{ marginBottom: 50 }}>
-                        <DragList
+                        <TypedDragList
                             onReordered={onReordered}
                             data={nodes}
-                            keyExtractor={(item: any) => {
-                                return JSON.stringify(item);
+                            keyExtractor={(item, index) => {
+                                return JSON.stringify(item) + index;
                             }}
                             // keyExtractor={(item) => item}
                             renderItem={({

diff --git a/yarn.lock b/yarn.lock
@@ -8803,10 +8803,10 @@ react-native-device-info@11.1.0:
   resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-11.1.0.tgz#7db5c4e5a179dce761efac155a493aa0956a40ab"
   integrity sha512-hzXJSObJdezEz0hF7MAJ3tGeoesuQWenXXt9mrQR9Mjb8kXpZ09rqSsZ/quNpJdZpQ3rYiFa3/0GFG5KNn9PBg==
 
-react-native-draglist@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/react-native-draglist/-/react-native-draglist-3.5.1.tgz#894df241080fbb94ebeb322c971b8d2db92d8774"
-  integrity sha512-Xe5ZIJfLMdwVbvKg3ji4gndj4++eQjpdqKAXPztFyR5CM6ZAF593G40XLdTGQpuVOKVwY7d0NxrTdG2Z+xpewQ==
+react-native-draglist@3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-draglist/-/react-native-draglist-3.8.0.tgz#b2ea51cece675ce9356ab6f1e472df8b43dda9a4"
+  integrity sha512-nmhxDk2pJhwg3zkuw6r3Gyk2hSoYDLAVa3zqy+SVpwiV/rDfMbOWi97lBgCQP1JbHWuYSVSKdYdmAfPa03jgmA==
 
 react-native-elements@3.4.3:
   version "3.4.3"