[RN] WelcomeScreen post-merge changes
This commit is contained in:
parent
693b1c392f
commit
5579464951
|
@ -61,8 +61,7 @@ function _addKnownDomains(state, knownDomains) {
|
||||||
nextState = Array.from(state);
|
nextState = Array.from(state);
|
||||||
for (let knownDomain of knownDomains) {
|
for (let knownDomain of knownDomains) {
|
||||||
knownDomain = knownDomain.toLowerCase();
|
knownDomain = knownDomain.toLowerCase();
|
||||||
nextState.indexOf(knownDomain) === -1
|
!nextState.includes(knownDomain) && nextState.push(knownDomain);
|
||||||
&& nextState.push(knownDomain);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,7 +25,7 @@ type Props = {
|
||||||
/**
|
/**
|
||||||
* The i18n key of the text label of the form field.
|
* The i18n key of the text label of the form field.
|
||||||
*/
|
*/
|
||||||
i18nLabel: string,
|
label: string,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Invoked to obtain translated strings.
|
* Invoked to obtain translated strings.
|
||||||
|
@ -78,7 +78,7 @@ class FormRow extends Component<Props> {
|
||||||
styles.text,
|
styles.text,
|
||||||
styles.fieldLabelText
|
styles.fieldLabelText
|
||||||
] } >
|
] } >
|
||||||
{ t(this.props.i18nLabel) }
|
{ t(this.props.label) }
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style = { styles.fieldValueContainer } >
|
<View style = { styles.fieldValueContainer } >
|
||||||
|
|
|
@ -15,7 +15,7 @@ type Props = {
|
||||||
/**
|
/**
|
||||||
* The i18n key of the text label of the section.
|
* The i18n key of the text label of the section.
|
||||||
*/
|
*/
|
||||||
i18nLabel: string,
|
label: string,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An external style object passed to the component.
|
* An external style object passed to the component.
|
||||||
|
@ -41,7 +41,7 @@ class FormSectionHeader extends Component<Props> {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const { i18nLabel, style, t } = this.props;
|
const { label, style, t } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
|
@ -50,7 +50,7 @@ class FormSectionHeader extends Component<Props> {
|
||||||
style
|
style
|
||||||
] } >
|
] } >
|
||||||
<Text>
|
<Text>
|
||||||
{ t(i18nLabel) }
|
{ t(label) }
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
|
@ -146,17 +146,17 @@ class SettingsView extends AbstractSettingsView {
|
||||||
<SafeAreaView style = { styles.settingsForm }>
|
<SafeAreaView style = { styles.settingsForm }>
|
||||||
<ScrollView>
|
<ScrollView>
|
||||||
<FormSectionHeader
|
<FormSectionHeader
|
||||||
i18nLabel = 'settingsView.profileSection' />
|
label = 'settingsView.profileSection' />
|
||||||
<FormRow
|
<FormRow
|
||||||
fieldSeparator = { true }
|
fieldSeparator = { true }
|
||||||
i18nLabel = 'settingsView.displayName'>
|
label = 'settingsView.displayName'>
|
||||||
<TextInput
|
<TextInput
|
||||||
autoCorrect = { false }
|
autoCorrect = { false }
|
||||||
onChangeText = { this._onChangeDisplayName }
|
onChangeText = { this._onChangeDisplayName }
|
||||||
placeholder = 'John Doe'
|
placeholder = 'John Doe'
|
||||||
value = { _settings.displayName } />
|
value = { _settings.displayName } />
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormRow i18nLabel = 'settingsView.email'>
|
<FormRow label = 'settingsView.email'>
|
||||||
<TextInput
|
<TextInput
|
||||||
autoCapitalize = 'none'
|
autoCapitalize = 'none'
|
||||||
autoCorrect = { false }
|
autoCorrect = { false }
|
||||||
|
@ -166,10 +166,10 @@ class SettingsView extends AbstractSettingsView {
|
||||||
value = { _settings.email } />
|
value = { _settings.email } />
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormSectionHeader
|
<FormSectionHeader
|
||||||
i18nLabel = 'settingsView.conferenceSection' />
|
label = 'settingsView.conferenceSection' />
|
||||||
<FormRow
|
<FormRow
|
||||||
fieldSeparator = { true }
|
fieldSeparator = { true }
|
||||||
i18nLabel = 'settingsView.serverURL'>
|
label = 'settingsView.serverURL'>
|
||||||
<TextInput
|
<TextInput
|
||||||
autoCapitalize = 'none'
|
autoCapitalize = 'none'
|
||||||
autoCorrect = { false }
|
autoCorrect = { false }
|
||||||
|
@ -180,12 +180,12 @@ class SettingsView extends AbstractSettingsView {
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormRow
|
<FormRow
|
||||||
fieldSeparator = { true }
|
fieldSeparator = { true }
|
||||||
i18nLabel = 'settingsView.startWithAudioMuted'>
|
label = 'settingsView.startWithAudioMuted'>
|
||||||
<Switch
|
<Switch
|
||||||
onValueChange = { this._onStartAudioMutedChange }
|
onValueChange = { this._onStartAudioMutedChange }
|
||||||
value = { _settings.startWithAudioMuted } />
|
value = { _settings.startWithAudioMuted } />
|
||||||
</FormRow>
|
</FormRow>
|
||||||
<FormRow i18nLabel = 'settingsView.startWithVideoMuted'>
|
<FormRow label = 'settingsView.startWithVideoMuted'>
|
||||||
<Switch
|
<Switch
|
||||||
onValueChange = { this._onStartVideoMutedChange }
|
onValueChange = { this._onStartVideoMutedChange }
|
||||||
value = { _settings.startWithVideoMuted } />
|
value = { _settings.startWithVideoMuted } />
|
||||||
|
|
|
@ -10,16 +10,16 @@ import styles from './styles';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
||||||
/**
|
|
||||||
* The i18n label of the item.
|
|
||||||
*/
|
|
||||||
i18Label: string,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The icon of the item.
|
* The icon of the item.
|
||||||
*/
|
*/
|
||||||
icon: string,
|
icon: string,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The i18n label of the item.
|
||||||
|
*/
|
||||||
|
label: string,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The function to be invoked when the item is pressed
|
* The function to be invoked when the item is pressed
|
||||||
* if the item is a button.
|
* if the item is a button.
|
||||||
|
@ -61,7 +61,7 @@ class SideBarItem extends Component<Props> {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const { onPress, t } = this.props;
|
const { label, onPress, t } = this.props;
|
||||||
const onPressCalculated
|
const onPressCalculated
|
||||||
= typeof onPress === 'function' ? onPress : this._onOpenURL;
|
= typeof onPress === 'function' ? onPress : this._onOpenURL;
|
||||||
|
|
||||||
|
@ -74,7 +74,7 @@ class SideBarItem extends Component<Props> {
|
||||||
name = { this.props.icon }
|
name = { this.props.icon }
|
||||||
style = { styles.sideBarItemIcon } />
|
style = { styles.sideBarItemIcon } />
|
||||||
<Text style = { styles.sideBarItemText }>
|
<Text style = { styles.sideBarItemText }>
|
||||||
{ t(this.props.i18Label) }
|
{ t(label) }
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
|
@ -47,10 +47,13 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
this.state.hintBoxAnimation = new Animated.Value(0);
|
this.state.hintBoxAnimation = new Animated.Value(0);
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once per instance.
|
// Bind event handlers so they are only bound once per instance.
|
||||||
this._getHintBoxStyle = this._getHintBoxStyle.bind(this);
|
|
||||||
this._onFieldFocusChange = this._onFieldFocusChange.bind(this);
|
this._onFieldFocusChange = this._onFieldFocusChange.bind(this);
|
||||||
this._onShowSideBar = this._onShowSideBar.bind(this);
|
this._onShowSideBar = this._onShowSideBar.bind(this);
|
||||||
this._renderHintBox = this._renderHintBox.bind(this);
|
this._renderHintBox = this._renderHintBox.bind(this);
|
||||||
|
|
||||||
|
// Specially bind functions to avoid function definition on render.
|
||||||
|
this._onFieldBlur = this._onFieldFocusChange.bind(this, false);
|
||||||
|
this._onFieldFocus = this._onFieldFocusChange.bind(this, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -103,9 +106,9 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
autoComplete = { false }
|
autoComplete = { false }
|
||||||
autoCorrect = { false }
|
autoCorrect = { false }
|
||||||
autoFocus = { false }
|
autoFocus = { false }
|
||||||
onBlur = { this._onFieldFocusChange(false) }
|
onBlur = { this._onFieldBlur }
|
||||||
onChangeText = { this._onRoomChange }
|
onChangeText = { this._onRoomChange }
|
||||||
onFocus = { this._onFieldFocusChange(true) }
|
onFocus = { this._onFieldFocus }
|
||||||
onSubmitEditing = { this._onJoin }
|
onSubmitEditing = { this._onJoin }
|
||||||
placeholder = { t('welcomepage.roomname') }
|
placeholder = { t('welcomepage.roomname') }
|
||||||
placeholderTextColor = {
|
placeholderTextColor = {
|
||||||
|
@ -149,10 +152,9 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
*
|
*
|
||||||
* @private
|
* @private
|
||||||
* @param {boolean} focused - The focused state of the field.
|
* @param {boolean} focused - The focused state of the field.
|
||||||
* @returns {Function}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
_onFieldFocusChange(focused) {
|
_onFieldFocusChange(focused) {
|
||||||
return () => {
|
|
||||||
focused
|
focused
|
||||||
&& this.setState({
|
&& this.setState({
|
||||||
_fieldFocused: true
|
_fieldFocused: true
|
||||||
|
@ -170,7 +172,6 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
&& this.setState({
|
&& this.setState({
|
||||||
_fieldFocused: false
|
_fieldFocused: false
|
||||||
}));
|
}));
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -45,7 +45,7 @@ type Props = {
|
||||||
/**
|
/**
|
||||||
* The avatar URL to be rendered.
|
* The avatar URL to be rendered.
|
||||||
*/
|
*/
|
||||||
_avatar: string,
|
_avatarURL: string,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Display name of the local participant.
|
* Display name of the local participant.
|
||||||
|
@ -90,7 +90,7 @@ class WelcomePageSideBar extends Component<Props> {
|
||||||
<Avatar
|
<Avatar
|
||||||
size = { SIDEBAR_AVATAR_SIZE }
|
size = { SIDEBAR_AVATAR_SIZE }
|
||||||
style = { styles.avatar }
|
style = { styles.avatar }
|
||||||
uri = { this.props._avatar } />
|
uri = { this.props._avatarURL } />
|
||||||
<Text style = { styles.displayName }>
|
<Text style = { styles.displayName }>
|
||||||
{ this.props._displayName }
|
{ this.props._displayName }
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -99,20 +99,20 @@ class WelcomePageSideBar extends Component<Props> {
|
||||||
<ScrollView
|
<ScrollView
|
||||||
style = { styles.itemContainer }>
|
style = { styles.itemContainer }>
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
i18Label = 'settings.title'
|
|
||||||
icon = 'settings'
|
icon = 'settings'
|
||||||
|
label = 'settings.title'
|
||||||
onPress = { this._onOpenSettings } />
|
onPress = { this._onOpenSettings } />
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
i18Label = 'welcomepage.terms'
|
|
||||||
icon = 'info'
|
icon = 'info'
|
||||||
|
label = 'welcomepage.terms'
|
||||||
url = { TERMS_URL } />
|
url = { TERMS_URL } />
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
i18Label = 'welcomepage.privacy'
|
|
||||||
icon = 'info'
|
icon = 'info'
|
||||||
|
label = 'welcomepage.privacy'
|
||||||
url = { PRIVACY_URL } />
|
url = { PRIVACY_URL } />
|
||||||
<SideBarItem
|
<SideBarItem
|
||||||
i18Label = 'welcomepage.sendFeedback'
|
|
||||||
icon = 'info'
|
icon = 'info'
|
||||||
|
label = 'welcomepage.sendFeedback'
|
||||||
url = { SEND_FEEDBACK_URL } />
|
url = { SEND_FEEDBACK_URL } />
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
|
@ -153,13 +153,17 @@ class WelcomePageSideBar extends Component<Props> {
|
||||||
*
|
*
|
||||||
* @param {Object} state - The redux state.
|
* @param {Object} state - The redux state.
|
||||||
* @protected
|
* @protected
|
||||||
* @returns {Object}
|
* @returns {{
|
||||||
|
* _avatarURL: string,
|
||||||
|
* _displayName: string,
|
||||||
|
* _visible: boolean
|
||||||
|
* }}
|
||||||
*/
|
*/
|
||||||
function _mapStateToProps(state: Object) {
|
function _mapStateToProps(state: Object) {
|
||||||
const localParticipant = getLocalParticipant(state);
|
const localParticipant = getLocalParticipant(state);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
_avatar: getAvatarURL(localParticipant),
|
_avatarURL: getAvatarURL(localParticipant),
|
||||||
_displayName: getParticipantDisplayName(state, localParticipant.id),
|
_displayName: getParticipantDisplayName(state, localParticipant.id),
|
||||||
_visible: state['features/welcome'].sideBarVisible
|
_visible: state['features/welcome'].sideBarVisible
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue