Created common component for setting Bitcoin amount

This commit is contained in:
Pavel Ševčík 2018-12-25 15:16:23 +01:00
parent 1a8b8b6d27
commit 85867728d8
2 changed files with 57 additions and 34 deletions

View File

@ -1,6 +1,7 @@
/** @type {AppStorage} */
import React, { Component } from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
import { Icon, Button, FormLabel, FormInput, Text, Header, List, ListItem } from 'react-native-elements';
import {
TouchableOpacity,
@ -24,6 +25,7 @@ import { HDLegacyP2PKHWallet } from './class/hd-legacy-p2pkh-wallet';
import { HDLegacyBreadwalletWallet } from './class/hd-legacy-breadwallet-wallet';
import { HDSegwitP2SHWallet } from './class/hd-segwit-p2sh-wallet';
import { LightningCustodianWallet } from './class/lightning-custodian-wallet';
import { BitcoinUnit } from './models/bitcoinUnits';
let loc = require('./loc/');
/** @type {AppStorage} */
let BlueApp = require('./BlueApp');
@ -1102,3 +1104,52 @@ export class WalletsCarousel extends Component {
);
}
}
export class BlueBitcoinAmount extends Component {
static propTypes = {
isLoading: PropTypes.bool,
amount: PropTypes.string,
onChangeText: PropTypes.func,
disabled: PropTypes.bool,
};
render() {
return (
<View>
<View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
<TextInput
keyboardType="numeric"
onChangeText={text => this.props.onChangeText(text.replace(',', '.'))}
placeholder="0"
maxLength={10}
editable={!this.props.isLoading && !this.props.disabled}
value={this.props.amount}
placeholderTextColor="#0f5cc0"
style={{
color: '#0f5cc0',
fontSize: 36,
fontWeight: '600',
}}
/>
<Text
style={{
color: '#0f5cc0',
fontSize: 16,
marginHorizontal: 4,
paddingBottom: 6,
fontWeight: '600',
alignSelf: 'flex-end',
}}
>
{' ' + BitcoinUnit.BTC}
</Text>
</View>
<View style={{ alignItems: 'center', marginBottom: 22, marginTop: 4 }}>
<Text style={{ fontSize: 18, color: '#d4d4d4', fontWeight: '600' }}>
{loc.formatBalance(this.props.amount || 0, BitcoinUnit.LOCAL_CURRENCY)}
</Text>
</View>
</View>
);
}
}

View File

@ -14,7 +14,7 @@ import {
Text,
} from 'react-native';
import { Icon } from 'react-native-elements';
import { BlueNavigationStyle, BlueButton } from '../../BlueComponents';
import { BlueNavigationStyle, BlueButton, BlueBitcoinAmount } from '../../BlueComponents';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';
import NetworkTransactionFees, { NetworkTransactionFee } from '../../models/networkTransactionFees';
@ -485,39 +485,11 @@ export default class SendDetails extends Component {
<View style={{ flex: 1, justifyContent: 'space-between' }}>
<View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
<KeyboardAvoidingView behavior="position">
<View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
<TextInput
keyboardType="numeric"
onChangeText={text => this.setState({ amount: text.replace(',', '.') })}
placeholder="0"
maxLength={10}
editable={!this.state.isLoading}
value={this.state.amount}
placeholderTextColor="#0f5cc0"
style={{
color: '#0f5cc0',
fontSize: 36,
fontWeight: '600',
}}
<BlueBitcoinAmount
isLoading={this.state.isLoading}
amount={this.state.amount}
onChangeText={text => this.setState({ amount: text })}
/>
<Text
style={{
color: '#0f5cc0',
fontSize: 16,
marginHorizontal: 4,
paddingBottom: 6,
fontWeight: '600',
alignSelf: 'flex-end',
}}
>
{' ' + BitcoinUnit.BTC}
</Text>
</View>
<View style={{ alignItems: 'center', marginBottom: 22, marginTop: 4 }}>
<Text style={{ fontSize: 18, color: '#d4d4d4', fontWeight: '600' }}>
{loc.formatBalance(this.state.amount || 0, BitcoinUnit.LOCAL_CURRENCY)}
</Text>
</View>
<View
style={{
flexDirection: 'row',