mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-01-18 21:35:21 +01:00
REF: InputAccessoryAllFunds now with position: absolute
This commit is contained in:
Ivan Vershigora
parent
c761a0ba5c
commit
2a5a625e7a
@ -829,80 +829,6 @@ export const BlueSpacing10 = props => {
|
||||
return <View {...props} style={{ height: 10, opacity: 0 }} />;
|
||||
};
|
||||
|
||||
export const BlueUseAllFundsButton = ({ balance, canUseAll, onUseAllPressed }) => {
|
||||
const { colors } = useTheme();
|
||||
const inputView = (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
maxHeight: 44,
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.inputBackgroundColor,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.alternativeTextColor,
|
||||
fontSize: 16,
|
||||
marginLeft: 8,
|
||||
marginRight: 0,
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
}}
|
||||
>
|
||||
{loc.send.input_total}
|
||||
</Text>
|
||||
{canUseAll ? (
|
||||
<BlueButtonLink
|
||||
onPress={onUseAllPressed}
|
||||
style={{ marginLeft: 8, paddingRight: 0, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
|
||||
title={`${balance} ${BitcoinUnit.BTC}`}
|
||||
/>
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: colors.alternativeTextColor,
|
||||
fontSize: 16,
|
||||
marginLeft: 8,
|
||||
marginRight: 0,
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
}}
|
||||
>
|
||||
{balance} {BitcoinUnit.BTC}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
|
||||
<BlueButtonLink
|
||||
style={{ paddingRight: 8, paddingLeft: 0, paddingTop: 12, paddingBottom: 12 }}
|
||||
title={loc.send.input_done}
|
||||
onPress={Keyboard.dismiss}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
if (Platform.OS === 'ios') {
|
||||
return <InputAccessoryView nativeID={BlueUseAllFundsButton.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
|
||||
} else {
|
||||
return <KeyboardAvoidingView style={{ height: 44 }}>{inputView}</KeyboardAvoidingView>;
|
||||
}
|
||||
};
|
||||
BlueUseAllFundsButton.InputAccessoryViewID = 'useMaxInputAccessoryViewID';
|
||||
BlueUseAllFundsButton.propTypes = {
|
||||
balance: PropTypes.string.isRequired,
|
||||
canUseAll: PropTypes.bool.isRequired,
|
||||
onUseAllPressed: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export const BlueDismissKeyboardInputAccessory = () => {
|
||||
const { colors } = useTheme();
|
||||
BlueDismissKeyboardInputAccessory.InputAccessoryViewID = 'BlueDismissKeyboardInputAccessory';
|
||||
|
||||
126
components/InputAccessoryAllFunds.js
Normal file
126
components/InputAccessoryAllFunds.js
Normal file
@ -0,0 +1,126 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Text } from 'react-native-elements';
|
||||
import { InputAccessoryView, StyleSheet, Keyboard, Platform, View } from 'react-native';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
import loc from '../loc';
|
||||
import { BitcoinUnit } from '../models/bitcoinUnits';
|
||||
import { BlueButtonLink } from '../BlueComponents';
|
||||
|
||||
const InputAccessoryAllFunds = ({ balance, canUseAll, onUseAllPressed }) => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const stylesHook = StyleSheet.create({
|
||||
root: {
|
||||
backgroundColor: colors.inputBackgroundColor,
|
||||
},
|
||||
totalLabel: {
|
||||
color: colors.alternativeTextColor,
|
||||
},
|
||||
totalCanNot: {
|
||||
color: colors.alternativeTextColor,
|
||||
},
|
||||
});
|
||||
|
||||
const inputView = (
|
||||
<View style={[styles.root, stylesHook.root]}>
|
||||
<View style={styles.left}>
|
||||
<Text style={[styles.totalLabel, stylesHook.totalLabel]}>{loc.send.input_total}</Text>
|
||||
{canUseAll ? (
|
||||
<BlueButtonLink onPress={onUseAllPressed} style={styles.totalCan} title={`${balance} ${BitcoinUnit.BTC}`} />
|
||||
) : (
|
||||
<Text style={[styles.totalCanNot, stylesHook.totalCanNot]}>
|
||||
{balance} {BitcoinUnit.BTC}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.right}>
|
||||
<BlueButtonLink style={styles.done} title={loc.send.input_done} onPress={Keyboard.dismiss} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
if (Platform.OS === 'ios') {
|
||||
return <InputAccessoryView nativeID={InputAccessoryAllFunds.InputAccessoryViewID}>{inputView}</InputAccessoryView>;
|
||||
}
|
||||
|
||||
// androidPlaceholder View is needed to force shrink screen (KeyboardAvoidingView) where this component is used
|
||||
return (
|
||||
<>
|
||||
<View style={styles.androidPlaceholder} />
|
||||
<View style={styles.androidAbsolute}>{inputView}</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
InputAccessoryAllFunds.InputAccessoryViewID = 'useMaxInputAccessoryViewID';
|
||||
|
||||
InputAccessoryAllFunds.propTypes = {
|
||||
balance: PropTypes.string.isRequired,
|
||||
canUseAll: PropTypes.bool.isRequired,
|
||||
onUseAllPressed: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
maxHeight: 44,
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
left: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
totalLabel: {
|
||||
fontSize: 16,
|
||||
marginLeft: 8,
|
||||
marginRight: 0,
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
totalCan: {
|
||||
marginLeft: 8,
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
totalCanNot: {
|
||||
fontSize: 16,
|
||||
marginLeft: 8,
|
||||
marginRight: 0,
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
right: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
done: {
|
||||
paddingRight: 8,
|
||||
paddingLeft: 0,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
androidPlaceholder: {
|
||||
height: 44,
|
||||
},
|
||||
androidAbsolute: {
|
||||
height: 44,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default InputAccessoryAllFunds;
|
||||
@ -25,14 +25,7 @@ import RNFS from 'react-native-fs';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import * as bitcoin from 'bitcoinjs-lib';
|
||||
|
||||
import {
|
||||
BlueButton,
|
||||
BlueDismissKeyboardInputAccessory,
|
||||
BlueListItem,
|
||||
BlueLoading,
|
||||
BlueText,
|
||||
BlueUseAllFundsButton,
|
||||
} from '../../BlueComponents';
|
||||
import { BlueButton, BlueDismissKeyboardInputAccessory, BlueListItem, BlueLoading, BlueText } from '../../BlueComponents';
|
||||
import { navigationStyleTx } from '../../components/navigationStyle';
|
||||
import NetworkTransactionFees, { NetworkTransactionFee } from '../../models/networkTransactionFees';
|
||||
import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
|
||||
@ -44,6 +37,7 @@ import CoinsSelected from '../../components/CoinsSelected';
|
||||
import BottomModal from '../../components/BottomModal';
|
||||
import AddressInput from '../../components/AddressInput';
|
||||
import AmountInput from '../../components/AmountInput';
|
||||
import InputAccessoryAllFunds from '../../components/InputAccessoryAllFunds';
|
||||
import { AbstractHDElectrumWallet } from '../../class/wallets/abstract-hd-electrum-wallet';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
const currency = require('../../blue_modules/currency');
|
||||
@ -1175,7 +1169,7 @@ const SendDetails = () => {
|
||||
});
|
||||
}}
|
||||
unit={units[index] || amountUnit}
|
||||
inputAccessoryViewID={BlueUseAllFundsButton.InputAccessoryViewID}
|
||||
inputAccessoryViewID={InputAccessoryAllFunds.InputAccessoryViewID}
|
||||
/>
|
||||
<AddressInput
|
||||
onChangeText={text => {
|
||||
@ -1278,9 +1272,9 @@ const SendDetails = () => {
|
||||
</View>
|
||||
<BlueDismissKeyboardInputAccessory />
|
||||
{Platform.select({
|
||||
ios: <BlueUseAllFundsButton canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />,
|
||||
ios: <InputAccessoryAllFunds canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />,
|
||||
android: isAmountToolbarVisibleForAndroid && (
|
||||
<BlueUseAllFundsButton canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />
|
||||
<InputAccessoryAllFunds canUseAll={balance > 0} onUseAllPressed={onUseAllPressed} balance={allBalance} />
|
||||
),
|
||||
})}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user