From b85eb544308b016c2c21416bef4e650021eb379b Mon Sep 17 00:00:00 2001 From: myxmaster Date: Tue, 17 Dec 2024 22:55:00 +0100 Subject: [PATCH] update DragList to 3.8.0, use index for keyExtractor in nodes DragList --- components/TextInput.tsx | 12 +++++----- package.json | 2 +- views/Settings/CurrencyConverter.tsx | 21 +++++++++++++---- views/Settings/Wallets.tsx | 34 ++++++++++++++++++++++------ yarn.lock | 8 +++---- 5 files changed, 54 insertions(+), 23 deletions(-) diff --git a/components/TextInput.tsx b/components/TextInput.tsx index 372273e66..ef9a2acb6 100644 --- a/components/TextInput.tsx +++ b/components/TextInput.tsx @@ -39,8 +39,8 @@ interface TextInputProps { } const TextInput = React.forwardRef( - ( - { + (props, ref) => { + const { placeholder, value, onChangeText, @@ -62,9 +62,7 @@ const TextInput = React.forwardRef( onPressIn, right, error - }, - ref - ) => { + } = props; const defaultStyle = numberOfLines ? { paddingTop: 10 @@ -185,7 +183,9 @@ const TextInput = React.forwardRef( ); } -); +) as React.ForwardRefExoticComponent< + TextInputProps & React.RefAttributes +>; const styles = StyleSheet.create({ wrapper: { diff --git a/package.json b/package.json index ed39b7a78..a091464bb 100644 --- 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 index e510ac0ef..f380b5860 100644 --- 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 extends Omit, 'renderItem'> { + data: T[]; + keyExtractor: (item: T, index: number) => string; + renderItem: (info: DragListRenderItemInfo) => React.ReactElement | null; + onReordered?: (fromIndex: number, toIndex: number) => Promise | void; +} interface CurrencyConverterProps { navigation: StackNavigationProp; @@ -53,6 +62,8 @@ const EMOJI_REPLACEMENTS = { XAG: 'Ag' }; +const TypedDragList = DragList as unknown as React.ComponentType>; + @inject('FiatStore') @observer export default class CurrencyConverter extends React.Component< @@ -498,10 +509,10 @@ export default class CurrencyConverter extends React.Component< paddingBottom: 10 }} > - item} + keyExtractor={(item) => String(item)} scrollEnabled={false} renderItem={({ item, diff --git a/views/Settings/Wallets.tsx b/views/Settings/Wallets.tsx index 1f285bf46..a626567e5 100644 --- 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 extends Omit, 'renderItem'> { + data: T[]; + keyExtractor: (item: T, index: number) => string; + renderItem: (info: DragListRenderItemInfo) => React.ReactElement | null; + onReordered?: (fromIndex: number, toIndex: number) => Promise | void; +} interface NodesProps { nodes: any[]; @@ -43,6 +61,8 @@ interface NodesState { loading: boolean; } +const TypedDragList = DragList as unknown as React.ComponentType>; + @inject('BalanceStore', 'NodeInfoStore', 'ChannelsStore', 'SettingsStore') @observer export default class Nodes extends React.Component { @@ -187,11 +207,11 @@ export default class Nodes extends React.Component { {loading && } {!loading && !!nodes && nodes.length > 0 && ( - { - return JSON.stringify(item); + keyExtractor={(item, index) => { + return JSON.stringify(item) + index; }} // keyExtractor={(item) => item} renderItem={({ diff --git a/yarn.lock b/yarn.lock index 70dc05baf..351616893 100644 --- 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"