rn,welcome-page: use random room name generator

This commit is contained in:
Saúl Ibarra Corretgé 2020-03-27 13:48:33 +01:00 committed by Saúl Ibarra Corretgé
parent e1a4478a06
commit d3a26f9b4e
3 changed files with 15 additions and 34 deletions

View File

@ -7,7 +7,6 @@ import type { Dispatch } from 'redux';
import { createWelcomePageEvent, sendAnalytics } from '../../analytics'; import { createWelcomePageEvent, sendAnalytics } from '../../analytics';
import { appNavigate } from '../../app'; import { appNavigate } from '../../app';
import { isCalendarEnabled } from '../../calendar-sync'; import { isCalendarEnabled } from '../../calendar-sync';
import { isRoomValid } from '../../base/conference';
/** /**
* {@code AbstractWelcomePage}'s React {@code Component} prop types. * {@code AbstractWelcomePage}'s React {@code Component} prop types.
@ -155,18 +154,6 @@ export class AbstractWelcomePage extends Component<Props, *> {
clearTimeout(this.state.updateTimeoutId); clearTimeout(this.state.updateTimeoutId);
} }
/**
* Determines whether the 'Join' button is (to be) disabled i.e. There's no
* valid room name typed into the respective text input field.
*
* @protected
* @returns {boolean} If the 'Join' button is (to be) disabled, true;
* otherwise, false.
*/
_isJoinDisabled() {
return this.state.joining || !isRoomValid(this.state.room);
}
_onJoin: () => void; _onJoin: () => void;
/** /**

View File

@ -75,6 +75,8 @@ class WelcomePage extends AbstractWelcomePage {
componentDidMount() { componentDidMount() {
super.componentDidMount(); super.componentDidMount();
this._updateRoomname();
const { dispatch } = this.props; const { dispatch } = this.props;
if (this.props._settings.startAudioOnly) { if (this.props._settings.startAudioOnly) {
@ -227,19 +229,12 @@ class WelcomePage extends AbstractWelcomePage {
); );
} }
const buttonDisabled = this._isJoinDisabled();
return ( return (
<TouchableHighlight <TouchableHighlight
accessibilityLabel = accessibilityLabel =
{ t('welcomepage.accessibilityLabel.join') } { t('welcomepage.accessibilityLabel.join') }
disabled = { buttonDisabled }
onPress = { this._onJoin } onPress = { this._onJoin }
style = { [ style = { styles.button }
styles.button,
buttonDisabled ? styles.buttonDisabled : null
] }
underlayColor = { ColorPalette.white }> underlayColor = { ColorPalette.white }>
{ children } { children }
</TouchableHighlight> </TouchableHighlight>
@ -268,6 +263,9 @@ class WelcomePage extends AbstractWelcomePage {
</Header> </Header>
<SafeAreaView style = { styles.roomContainer } > <SafeAreaView style = { styles.roomContainer } >
<View style = { styles.joinControls } > <View style = { styles.joinControls } >
<Text style = { styles.enterRoomText }>
{ t('welcomepage.roomname') }
</Text>
<TextInput <TextInput
accessibilityLabel = { t(roomnameAccLabel) } accessibilityLabel = { t(roomnameAccLabel) }
autoCapitalize = 'none' autoCapitalize = 'none'
@ -278,10 +276,8 @@ class WelcomePage extends AbstractWelcomePage {
onChangeText = { this._onRoomChange } onChangeText = { this._onRoomChange }
onFocus = { this._onFieldFocus } onFocus = { this._onFieldFocus }
onSubmitEditing = { this._onJoin } onSubmitEditing = { this._onJoin }
placeholder = { t('welcomepage.roomname') } placeholder = { this.state.roomPlaceholder }
placeholderTextColor = { placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
PLACEHOLDER_TEXT_COLOR
}
returnKeyType = { 'go' } returnKeyType = { 'go' }
style = { styles.textInput } style = { styles.textInput }
underlineColorAndroid = 'transparent' underlineColorAndroid = 'transparent'

View File

@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native';
import { BoxModel, ColorPalette } from '../../base/styles'; import { BoxModel, ColorPalette } from '../../base/styles';
export const PLACEHOLDER_TEXT_COLOR = 'rgba(255, 255, 255, 0.3)'; export const PLACEHOLDER_TEXT_COLOR = 'rgba(255, 255, 255, 0.5)';
export const SIDEBAR_AVATAR_SIZE = 100; export const SIDEBAR_AVATAR_SIZE = 100;
@ -64,14 +64,6 @@ export default {
paddingHorizontal: 20 paddingHorizontal: 20
}, },
/**
* Renders the button visually disabled.
*/
buttonDisabled: {
backgroundColor: '#cccccc',
borderColor: '#999999'
},
/** /**
* Join button text style. * Join button text style.
*/ */
@ -91,6 +83,12 @@ export default {
textAlign: 'center' textAlign: 'center'
}, },
enterRoomText: {
color: TEXT_COLOR,
fontSize: 18,
marginBottom: BoxModel.margin
},
/** /**
* The welcome screen header style. * The welcome screen header style.
*/ */