LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

show/hide advanced link

Browse source
This commit is contained in:
Akinwale Ariwodola 2020-03-20 14:14:29 +01:00
parent 01758dda5e
commit 744680d78d
2 changed files with 81 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/component/modalRepostView/view.js
View file

@ -15,11 +15,12 @@ export default class ModalRepostView extends React.PureComponent {
depositAmountInput; depositAmountInput;
state = { state = {
repostName: null,
channelName: null, channelName: null,
creditsInputFocused: false, creditsInputFocused: false,
depositAmount: '0.1', depositAmount: '0.1',
repostName: null,
repostStarted: false, repostStarted: false,
showAdvanced: false,
}; };
componentDidMount() { componentDidMount() {
@ -92,6 +93,7 @@ export default class ModalRepostView extends React.PureComponent {
const { balance, channels, reposting, title, onCancelPress, onOverlayPress } = this.props; const { balance, channels, reposting, title, onCancelPress, onOverlayPress } = this.props;
const canRepost = !!this.state.channelName && !!this.state.repostName; const canRepost = !!this.state.channelName && !!this.state.repostName;
const channelsLoaded = channels && channels.length > 0; const channelsLoaded = channels && channels.length > 0;
const processing = this.state.repostStarted || reposting || !channelsLoaded;
return ( return (
<TouchableOpacity style={modalStyle.overlay} activeOpacity={1} onPress={onOverlayPress}> <TouchableOpacity style={modalStyle.overlay} activeOpacity={1} onPress={onOverlayPress}>
@ -118,66 +120,81 @@ export default class ModalRepostView extends React.PureComponent {
onChannelChange={this.handleChannelChange} onChannelChange={this.handleChannelChange}
/> />
<Text style={modalRepostStyle.label}>{__('Name')}</Text> {this.state.showAdvanced && (
<View style={modalRepostStyle.nameRow}> <View>
<TextInput <Text style={modalRepostStyle.label}>{__('Name')}</Text>
editable={false} <View style={modalRepostStyle.nameRow}>
value={this.state.channelName ? `lbry://${this.state.channelName}/` : ''} <TextInput
style={modalRepostStyle.input} editable={false}
/> value={this.state.channelName ? `lbry://${this.state.channelName}/` : ''}
<TextInput style={modalRepostStyle.input}
editable={canRepost} />
value={this.state.repostName} <TextInput
underlineColorAndroid={Colors.NextLbryGreen} editable={canRepost}
selectTextOnFocus value={this.state.repostName}
onChangeText={value => this.setState({ repostName: value })} underlineColorAndroid={Colors.NextLbryGreen}
style={modalRepostStyle.input} selectTextOnFocus
/> onChangeText={value => this.setState({ repostName: value })}
</View> style={modalRepostStyle.input}
/>
</View>
<Text style={modalRepostStyle.label}>{__('Deposit')}</Text> <Text style={modalRepostStyle.label}>{__('Deposit')}</Text>
<View style={modalRepostStyle.row}> <View style={modalRepostStyle.row}>
<View style={modalRepostStyle.amountRow}> <View style={modalRepostStyle.amountRow}>
<TextInput <TextInput
editable={!this.state.repostStarted} editable={!this.state.repostStarted}
ref={ref => (this.depositAmountInput = ref)} ref={ref => (this.depositAmountInput = ref)}
onChangeText={value => this.setState({ tipAmount: value })} onChangeText={value => this.setState({ tipAmount: value })}
underlineColorAndroid={Colors.NextLbryGreen} underlineColorAndroid={Colors.NextLbryGreen}
keyboardType={'numeric'} keyboardType={'numeric'}
onFocus={() => this.setState({ creditsInputFocused: true })} onFocus={() => this.setState({ creditsInputFocused: true })}
onBlur={() => this.setState({ creditsInputFocused: false })} onBlur={() => this.setState({ creditsInputFocused: false })}
placeholder={'0'} placeholder={'0'}
value={this.state.depositAmount} value={this.state.depositAmount}
selectTextOnFocus selectTextOnFocus
style={modalRepostStyle.depositAmountInput} style={modalRepostStyle.depositAmountInput}
/> />
<Text style={modalRepostStyle.currency}>LBC</Text> <Text style={modalRepostStyle.currency}>LBC</Text>
<View style={modalRepostStyle.balance}> <View style={modalRepostStyle.balance}>
{this.state.creditsInputFocused && <Icon name="coins" size={12} />} {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
{this.state.creditsInputFocused && ( {this.state.creditsInputFocused && (
<Text style={modalRepostStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text> <Text style={modalRepostStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
)} )}
</View>
</View>
</View> </View>
</View> </View>
{(this.state.repostStarted || reposting || !channelsLoaded) && ( )}
<ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
)}
</View>
<View style={modalRepostStyle.buttonRow}> <View style={modalRepostStyle.buttonRow}>
<Link {!processing && (
style={modalRepostStyle.cancelLink} <Link
text={__('Cancel')} style={modalRepostStyle.cancelLink}
onPress={() => { text={__('Cancel')}
if (onCancelPress) onCancelPress(); onPress={() => {
}} if (onCancelPress) onCancelPress();
/> }}
<Button />
text={__('Repost')} )}
style={modalRepostStyle.button}
disabled={!canRepost || this.state.repostStarted || reposting} {processing && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
onPress={this.handleRepost}
/> <View style={modalRepostStyle.rightButtonRow}>
<Link
style={modalRepostStyle.advancedLink}
text={this.state.showAdvanced ? __('Hide advanced') : __('Show advanced')}
onPress={() => {
this.setState({ showAdvanced: !this.state.showAdvanced });
}}
/>
<Button
text={__('Repost')}
style={modalRepostStyle.button}
disabled={!canRepost || this.state.repostStarted || reposting}
onPress={this.handleRepost}
/>
</View>
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>

8
src/styles/modalRepost.js
View file

@ -44,6 +44,10 @@ const modalRepostStyle = StyleSheet.create({
cancelLink: { cancelLink: {
color: Colors.Grey, color: Colors.Grey,
}, },
advancedLink: {
color: Colors.Grey,
marginRight: 16,
},
balance: { balance: {
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
@ -76,6 +80,10 @@ const modalRepostStyle = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}, },
rightButtonRow: {
flexDirection: 'row',
alignItems: 'center',
},
input: { input: {
fontFamily: 'Inter-Regular', fontFamily: 'Inter-Regular',
fontSize: 14, fontSize: 14,