mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-23 15:20:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

REF: Reorder Wallets uses hooks

Browse source
This commit is contained in:
marcosrdz 2020-08-07 22:56:49 -04:00 • committed by Overtorment
parent 75f52e421e
commit 90f966f12e
1 changed files with 83 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
screen/wallets/reorderWallets.js
View file

@ -1,14 +1,13 @@
import React, { Component } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { View, ActivityIndicator, Image, Text, StyleSheet, StatusBar, ScrollView } from 'react-native'; import { View, ActivityIndicator, Image, Text, StyleSheet, StatusBar, ScrollView } from 'react-native';
import { SafeBlueArea, BlueNavigationStyle } from '../../BlueComponents'; import { SafeBlueArea, BlueNavigationStyle } from '../../BlueComponents';
import SortableList from 'react-native-sortable-list'; import SortableList from 'react-native-sortable-list';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import PropTypes from 'prop-types';
import { PlaceholderWallet, LightningCustodianWallet } from '../../class'; import { PlaceholderWallet, LightningCustodianWallet } from '../../class';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import WalletGradient from '../../class/wallet-gradient'; import WalletGradient from '../../class/wallet-gradient';
import loc, { formatBalance, transactionTimeToReadable } from '../../loc'; import loc, { formatBalance, transactionTimeToReadable } from '../../loc';
import { BlueCurrentTheme } from '../../components/themes'; import { useNavigation, useTheme } from '@react-navigation/native';
const EV = require('../../blue_modules/events'); const EV = require('../../blue_modules/events');
/** @type {AppStorage} */ /** @type {AppStorage} */
const BlueApp = require('../../BlueApp'); const BlueApp = require('../../BlueApp');
@ -20,7 +19,6 @@ const styles = StyleSheet.create({
}, },
root: { root: {
flex: 1, flex: 1,
backgroundColor: BlueCurrentTheme.colors.elevated,
}, },
itemRoot: { itemRoot: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
@ -67,47 +65,55 @@ const styles = StyleSheet.create({
}, },
}); });
export default class ReorderWallets extends Component { const ReorderWallets = () => {
constructor(props) { const [isLoading, setIsLoading] = useState(true);
super(props); const [data, setData] = useState([]);
this.state = { const [hasMovedARow, setHasMovedARow] = useState(false);
isLoading: true, const [scrollEnabled, setScrollEnabled] = useState(true);
data: [], const sortableList = useRef();
hasMovedARow: false, const { setParams, goBack } = useNavigation();
scrollEnabled: true, const { colors } = useTheme();
}; const stylesHook = {
} root: {
backgroundColor: colors.elevated,
},
loading: {
backgroundColor: colors.elevated,
},
};
sortableList = React.createRef(); useEffect(() => {
setParams(
componentDidMount() { {
this.props.navigation.setParams({ customCloseButtonFunction: async () => {
customCloseButtonFunction: async () => { if (sortableList.current.state.data.length === data.length && hasMovedARow) {
if (this.sortableList.current.state.data.length === this.state.data.length && this.state.hasMovedARow) { const newWalletsOrderArray = [];
const newWalletsOrderArray = []; sortableList.current.state.order.forEach(element => {
this.sortableList.current.state.order.forEach(element => { newWalletsOrderArray.push(data[element]);
newWalletsOrderArray.push(this.state.data[element]); });
}); BlueApp.wallets = newWalletsOrderArray;
BlueApp.wallets = newWalletsOrderArray; await BlueApp.saveToDisk();
await BlueApp.saveToDisk(); setTimeout(function () {
setTimeout(function () { EV(EV.enum.WALLETS_COUNT_CHANGED);
EV(EV.enum.WALLETS_COUNT_CHANGED); }, 500); // adds some animaton
}, 500); // adds some animaton goBack();
this.props.navigation.goBack(); } else {
} else { goBack();
this.props.navigation.goBack(); }
} },
}, },
}); [],
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [goBack, hasMovedARow, setParams]);
const wallets = BlueApp.getWallets().filter(wallet => wallet.type !== PlaceholderWallet.type); useEffect(() => {
this.setState({ const loadWallets = BlueApp.getWallets().filter(wallet => wallet.type !== PlaceholderWallet.type);
data: wallets, setData(loadWallets);
isLoading: false, setIsLoading(false);
}); }, []);
}
_renderItem = (item, _active) => { const renderItem = (item, _active) => {
if (!item.data) { if (!item.data) {
return; return;
} }
@ -142,50 +148,42 @@ export default class ReorderWallets extends Component {
); );
}; };
render() { const onChangeOrder = () => {
if (this.state.isLoading) { ReactNativeHapticFeedback.trigger('impactMedium', { ignoreAndroidSystemSettings: false });
return ( setHasMovedARow(true);
<View style={styles.loading}> };
<ActivityIndicator />
</View>
);
}
return ( const onActivateRow = () => {
<SafeBlueArea> ReactNativeHapticFeedback.trigger('selection', { ignoreAndroidSystemSettings: false });
<StatusBar barStyle="light-content" /> setScrollEnabled(false);
<ScrollView scrollEnabled={this.state.scrollEnabled}> };
<SortableList
ref={this.sortableList}
style={styles.root}
data={this.state.data}
renderRow={this._renderItem}
scrollEnabled={false}
onChangeOrder={() => {
ReactNativeHapticFeedback.trigger('impactMedium', { ignoreAndroidSystemSettings: false });
this.setState({ hasMovedARow: true });
}}
onActivateRow={() => {
ReactNativeHapticFeedback.trigger('selection', { ignoreAndroidSystemSettings: false });
this.setState({ scrollEnabled: false });
}}
onReleaseRow={() => {
ReactNativeHapticFeedback.trigger('impactLight', { ignoreAndroidSystemSettings: false });
this.setState({ scrollEnabled: true });
}}
/>
</ScrollView>
</SafeBlueArea>
);
}
}
ReorderWallets.propTypes = { const onReleaseRow = () => {
navigation: PropTypes.shape({ ReactNativeHapticFeedback.trigger('impactLight', { ignoreAndroidSystemSettings: false });
navigate: PropTypes.func, setScrollEnabled(true);
setParams: PropTypes.func, };
goBack: PropTypes.func,
}), return isLoading ? (
<View style={[styles.loading, stylesHook.loading]}>
<ActivityIndicator />
</View>
) : (
<SafeBlueArea>
<StatusBar barStyle="light-content" />
<ScrollView scrollEnabled={scrollEnabled}>
<SortableList
ref={sortableList}
style={[styles.root, stylesHook.root]}
data={data}
renderRow={renderItem}
scrollEnabled={false}
onChangeOrder={onChangeOrder}
onActivateRow={onActivateRow}
onReleaseRow={onReleaseRow}
/>
</ScrollView>
</SafeBlueArea>
);
}; };
ReorderWallets.navigationOptions = ({ navigation, route }) => ({ ReorderWallets.navigationOptions = ({ navigation, route }) => ({
@ -198,3 +196,5 @@ ReorderWallets.navigationOptions = ({ navigation, route }) => ({
headerLeft: null, headerLeft: null,
gestureEnabled: false, gestureEnabled: false,
}); });
export default ReorderWallets;