Skip to content

Commit

Permalink
Merge pull request #1623 from kaloudis/amount-input-new-button
Browse files Browse the repository at this point in the history 
AmountInput: new currency change button
  • Loading branch information
@kaloudis
kaloudis authored Aug 25, 2023
2 parents cea0af7 + 91bc429 commit 31cdc9b
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 108 deletions.
1 change: 1 addition & 0 deletions assets/images/SVG/Exchange.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 67 additions & 62 deletions components/AmountInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import Stores from '../stores/Stores';
import FiatStore from '../stores/FiatStore';
import SettingsStore from '../stores/SettingsStore';
import UnitsStore, { SATS_PER_BTC } from '../stores/UnitsStore';
import { Row } from './layout/Row';

import ExchangeSVG from '../assets/images/SVG/Exchange.svg';

interface AmountInputProps {
onAmountChange: (amount: string, satAmount: string | number) => void;
Expand Down Expand Up @@ -133,73 +136,75 @@ export default class AmountInput extends React.Component<

return (
<React.Fragment>
{title && (
<TouchableOpacity
onPress={() => !locked && this.onChangeUnits()}
>
<Text
style={{
fontFamily: 'Lato-Regular',
color: themeColor('secondaryText')
}}
>
{title}
</Text>
</TouchableOpacity>
)}
<TextInput
keyboardType="numeric"
placeholder={'0'}
value={amount}
onChangeText={(text: string) => {
const satAmount = getSatAmount(text);
onAmountChange(text, satAmount);
this.setState({ satAmount });
<Text
style={{
fontFamily: 'Lato-Regular',
color: themeColor('secondaryText')
}}
locked={locked}
prefix={
units !== 'sats' &&
(units === 'BTC'
? '₿'
: !getSymbol().rtl
? getSymbol().symbol
: null)
}
suffix={
units === 'sats'
? units
: getSymbol().rtl &&
units === 'fiat' &&
getSymbol().symbol
}
toggleUnits={() => !locked && this.onChangeUnits()}
/>
{!hideConversion && (
>
{title}
</Text>
<Row>
<TextInput
keyboardType="numeric"
placeholder={'0'}
value={amount}
onChangeText={(text: string) => {
const satAmount = getSatAmount(text);
onAmountChange(text, satAmount);
this.setState({ satAmount });
}}
locked={locked}
prefix={
units !== 'sats' &&
(units === 'BTC'
? '₿'
: !getSymbol().rtl
? getSymbol().symbol
: null)
}
suffix={
units === 'sats'
? units
: getSymbol().rtl &&
units === 'fiat' &&
getSymbol().symbol
}
style={{ width: '85%' }}
/>
<TouchableOpacity
onPress={() => !locked && this.onChangeUnits()}
style={{ margin: 8 }}
>
<View style={{ marginBottom: 10 }}>
{fiatEnabled && units !== 'fiat' && (
<Amount sats={satAmount} fixedUnits="fiat" />
)}
{fiatEnabled && (
<Text
style={{
fontFamily: 'Lato-Regular',
color: themeColor('text')
}}
>
{getRate(units === 'sats')}
</Text>
)}
{units !== 'sats' && (
<Amount sats={satAmount} fixedUnits="sats" />
)}
{units !== 'BTC' && (
<Amount sats={satAmount} fixedUnits="BTC" />
)}
</View>
<ExchangeSVG
fill={themeColor('text')}
width="48"
height="48"
/>
</TouchableOpacity>
</Row>
{!hideConversion && (
<View style={{ marginBottom: 10 }}>
{fiatEnabled && (
<Text
style={{
fontFamily: 'Lato-Regular',
color: themeColor('text')
}}
>
{getRate(units === 'sats')}
</Text>
)}
{fiatEnabled && units !== 'fiat' && (
<Amount sats={satAmount} fixedUnits="fiat" />
)}
{units !== 'BTC' && (
<Amount sats={satAmount} fixedUnits="BTC" />
)}
{units !== 'sats' && (
<Amount sats={satAmount} fixedUnits="sats" />
)}
</View>
)}
</React.Fragment>
);
Expand Down
112 changes: 66 additions & 46 deletions components/TextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,52 @@ export default function TextInput(props: TextInputProps) {
height: 60
};

const Prefix = () => (
<Text
style={
toggleUnits
? {
...styles.unit,
padding: toggleUnits ? 5 : 0,
marginRight: 5,
color: themeColor('text'),
backgroundColor: themeColor('background')
}
: {
...styles.unit,
padding: toggleUnits ? 5 : 0,
marginRight: 5,
color: themeColor('text')
}
}
>
{prefix}
</Text>
);

const Suffix = () => (
<Text
style={
toggleUnits
? {
...styles.unit,
padding: toggleUnits ? 5 : 0,
right: right || 45,
color: themeColor('text'),
backgroundColor: themeColor('background')
}
: {
...styles.unit,
padding: toggleUnits ? 5 : 0,
right: right || 45,
color: themeColor('text')
}
}
>
{suffix}
</Text>
);

return (
<View
style={{
Expand All @@ -73,29 +119,17 @@ export default function TextInput(props: TextInputProps) {
backgroundColor: themeColor('secondary')
}}
>
{prefix && (
<TouchableOpacity onPress={() => toggleUnits && toggleUnits()}>
<Text
style={
toggleUnits
? {
...styles.unit,
marginRight: 5,
color: themeColor('text'),
backgroundColor: themeColor('background')
}
: {
...styles.unit,
marginRight: 5,
color: themeColor('text')
}
}
{prefix ? (
toggleUnits ? (
<TouchableOpacity
onPress={() => toggleUnits && toggleUnits()}
>
{prefix}
</Text>
</TouchableOpacity>
)}
<Prefix />
</TouchableOpacity>
) : (
<Prefix />
)
) : null}
<TextInputRN
placeholder={placeholder}
value={value}
Expand All @@ -120,29 +154,17 @@ export default function TextInput(props: TextInputProps) {
secureTextEntry={secureTextEntry}
onPressIn={onPressIn}
/>
{suffix && (
<TouchableOpacity onPress={() => toggleUnits && toggleUnits()}>
<Text
style={
toggleUnits
? {
...styles.unit,
right: right || 45,
color: themeColor('text'),
backgroundColor: themeColor('background')
}
: {
...styles.unit,
right: right || 45,
color: themeColor('text')
}
}
{suffix ? (
toggleUnits ? (
<TouchableOpacity
onPress={() => toggleUnits && toggleUnits()}
>
{suffix}
</Text>
</TouchableOpacity>
)}
<Suffix />
</TouchableOpacity>
) : (
<Suffix />
)
) : null}
</View>
);
}
Expand All @@ -159,13 +181,11 @@ const styles = StyleSheet.create({
},
unit: {
fontSize: 20,
borderRadius: 6,
padding: 5
borderRadius: 6
},
input: {
fontSize: 20,
width: '100%',
fontFamily: 'Lato-Regular',
top: 3
fontFamily: 'Lato-Regular'
}
});

0 comments on commit 31cdc9b

Please sign in to comment.