haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[RN] WelcomeScreen post-merge changes

This commit is contained in:
Bettenbuk Zoltan 2018-05-29 14:51:55 +02:00 committed by Saúl Ibarra Corretgé
parent 693b1c392f
commit 5579464951
7 changed files with 55 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/features/base/known-domains/reducer.js
View File

@ -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);
} }
} }

4
react/features/settings/components/native/FormRow.js
View File

@ -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 } >

6
react/features/settings/components/native/FormSectionHeader.js
View File

@ -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>
); );

14
react/features/settings/components/native/SettingsView.js
View File

@ -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 } />

14
react/features/welcome/components/SideBarItem.js
View File

@ -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>

45
react/features/welcome/components/WelcomePage.native.js
View File

@ -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,28 +152,26 @@ 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 });
});
Animated.timing( Animated.timing(
this.state.hintBoxAnimation, this.state.hintBoxAnimation,
{ {
duration: 300, duration: 300,
toValue: focused ? 1 : 0 toValue: focused ? 1 : 0
}) })
.start(animationState => .start(animationState =>
animationState.finished animationState.finished
&& !focused && !focused
&& this.setState({ && this.setState({
_fieldFocused: false _fieldFocused: false
})); }));
};
} }
/** /**

20
react/features/welcome/components/WelcomePageSideBar.native.js
View File

@ -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
}; };