[RN] WelcomeScreen post-merge changes

react/features/base/known-domains/reducer.js

@@ -61,8 +61,7 @@ function _addKnownDomains(state, knownDomains) {
         nextState = Array.from(state);
         for (let knownDomain of knownDomains) {
             knownDomain = knownDomain.toLowerCase();
-            nextState.indexOf(knownDomain) === -1
-                && nextState.push(knownDomain);
+            !nextState.includes(knownDomain) && nextState.push(knownDomain);
         }
     }
 

react/features/settings/components/native/FormRow.js

@@ -25,7 +25,7 @@ type Props = {
     /**
      * The i18n key of the text label of the form field.
      */
-    i18nLabel: string,
+    label: string,
 
     /**
      * Invoked to obtain translated strings.
@@ -78,7 +78,7 @@ class FormRow extends Component<Props> {
                             styles.text,
                             styles.fieldLabelText
                         ] } >
-                        { t(this.props.i18nLabel) }
+                        { t(this.props.label) }
                     </Text>
                 </View>
                 <View style = { styles.fieldValueContainer } >

react/features/settings/components/native/FormSectionHeader.js

@@ -15,7 +15,7 @@ type Props = {
     /**
      * The i18n key of the text label of the section.
      */
-    i18nLabel: string,
+    label: string,
 
     /**
      * An external style object passed to the component.
@@ -41,7 +41,7 @@ class FormSectionHeader extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { i18nLabel, style, t } = this.props;
+        const { label, style, t } = this.props;
 
         return (
             <View
@@ -50,7 +50,7 @@ class FormSectionHeader extends Component<Props> {
                     style
                 ] } >
                 <Text>
-                    { t(i18nLabel) }
+                    { t(label) }
                 </Text>
             </View>
         );

react/features/settings/components/native/SettingsView.js

@@ -146,17 +146,17 @@ class SettingsView extends AbstractSettingsView {
             <SafeAreaView style = { styles.settingsForm }>
                 <ScrollView>
                     <FormSectionHeader
-                        i18nLabel = 'settingsView.profileSection' />
+                        label = 'settingsView.profileSection' />
                     <FormRow
                         fieldSeparator = { true }
-                        i18nLabel = 'settingsView.displayName'>
+                        label = 'settingsView.displayName'>
                         <TextInput
                             autoCorrect = { false }
                             onChangeText = { this._onChangeDisplayName }
                             placeholder = 'John Doe'
                             value = { _settings.displayName } />
                     </FormRow>
-                    <FormRow i18nLabel = 'settingsView.email'>
+                    <FormRow label = 'settingsView.email'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
@@ -166,10 +166,10 @@ class SettingsView extends AbstractSettingsView {
                             value = { _settings.email } />
                     </FormRow>
                     <FormSectionHeader
-                        i18nLabel = 'settingsView.conferenceSection' />
+                        label = 'settingsView.conferenceSection' />
                     <FormRow
                         fieldSeparator = { true }
-                        i18nLabel = 'settingsView.serverURL'>
+                        label = 'settingsView.serverURL'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
@@ -180,12 +180,12 @@ class SettingsView extends AbstractSettingsView {
                     </FormRow>
                     <FormRow
                         fieldSeparator = { true }
-                        i18nLabel = 'settingsView.startWithAudioMuted'>
+                        label = 'settingsView.startWithAudioMuted'>
                         <Switch
                             onValueChange = { this._onStartAudioMutedChange }
                             value = { _settings.startWithAudioMuted } />
                     </FormRow>
-                    <FormRow i18nLabel = 'settingsView.startWithVideoMuted'>
+                    <FormRow label = 'settingsView.startWithVideoMuted'>
                         <Switch
                             onValueChange = { this._onStartVideoMutedChange }
                             value = { _settings.startWithVideoMuted } />

react/features/welcome/components/SideBarItem.js

@@ -11,14 +11,14 @@ import styles from './styles';
 type Props = {
 
     /**
-     * The i18n label of the item.
+     * The icon of the item.
      */
-    i18Label: string,
+    icon: string,
 
     /**
-     * The icon of the item.
+     * The i18n label of the item.
      */
-    icon: string,
+    label: string,
 
     /**
      * The function to be invoked when the item is pressed
@@ -61,7 +61,7 @@ class SideBarItem extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { onPress, t } = this.props;
+        const { label, onPress, t } = this.props;
         const onPressCalculated
             = typeof onPress === 'function' ? onPress : this._onOpenURL;
 
@@ -74,7 +74,7 @@ class SideBarItem extends Component<Props> {
                         name = { this.props.icon }
                         style = { styles.sideBarItemIcon } />
                     <Text style = { styles.sideBarItemText }>
-                        { t(this.props.i18Label) }
+                        { t(label) }
                     </Text>
                 </View>
             </TouchableOpacity>

react/features/welcome/components/WelcomePage.native.js

@@ -47,10 +47,13 @@ class WelcomePage extends AbstractWelcomePage {
         this.state.hintBoxAnimation = new Animated.Value(0);
 
         // Bind event handlers so they are only bound once per instance.
-        this._getHintBoxStyle = this._getHintBoxStyle.bind(this);
         this._onFieldFocusChange = this._onFieldFocusChange.bind(this);
         this._onShowSideBar = this._onShowSideBar.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 }
                                 autoCorrect = { false }
                                 autoFocus = { false }
-                                onBlur = { this._onFieldFocusChange(false) }
+                                onBlur = { this._onFieldBlur }
                                 onChangeText = { this._onRoomChange }
-                                onFocus = { this._onFieldFocusChange(true) }
+                                onFocus = { this._onFieldFocus }
                                 onSubmitEditing = { this._onJoin }
                                 placeholder = { t('welcomepage.roomname') }
                                 placeholderTextColor = {
@@ -149,28 +152,26 @@ class WelcomePage extends AbstractWelcomePage {
      *
      * @private
      * @param {boolean} focused - The focused state of the field.
-     * @returns {Function}
+     * @returns {void}
      */
     _onFieldFocusChange(focused) {
-        return () => {
-            focused
-                && this.setState({
-                    _fieldFocused: true
-                });
+        focused
+            && this.setState({
+                _fieldFocused: true
+            });
 
-            Animated.timing(
-                this.state.hintBoxAnimation,
-                {
-                    duration: 300,
-                    toValue: focused ? 1 : 0
-                })
-                .start(animationState =>
-                    animationState.finished
-                        && !focused
-                        && this.setState({
-                            _fieldFocused: false
-                        }));
-        };
+        Animated.timing(
+            this.state.hintBoxAnimation,
+            {
+                duration: 300,
+                toValue: focused ? 1 : 0
+            })
+            .start(animationState =>
+                animationState.finished
+                    && !focused
+                    && this.setState({
+                        _fieldFocused: false
+                    }));
     }
 
     /**

react/features/welcome/components/WelcomePageSideBar.native.js

@@ -45,7 +45,7 @@ type Props = {
     /**
      * The avatar URL to be rendered.
      */
-    _avatar: string,
+    _avatarURL: string,
 
     /**
      * Display name of the local participant.
@@ -90,7 +90,7 @@ class WelcomePageSideBar extends Component<Props> {
                     <Avatar
                         size = { SIDEBAR_AVATAR_SIZE }
                         style = { styles.avatar }
-                        uri = { this.props._avatar } />
+                        uri = { this.props._avatarURL } />
                     <Text style = { styles.displayName }>
                         { this.props._displayName }
                     </Text>
@@ -99,20 +99,20 @@ class WelcomePageSideBar extends Component<Props> {
                     <ScrollView
                         style = { styles.itemContainer }>
                         <SideBarItem
-                            i18Label = 'settings.title'
                             icon = 'settings'
+                            label = 'settings.title'
                             onPress = { this._onOpenSettings } />
                         <SideBarItem
-                            i18Label = 'welcomepage.terms'
                             icon = 'info'
+                            label = 'welcomepage.terms'
                             url = { TERMS_URL } />
                         <SideBarItem
-                            i18Label = 'welcomepage.privacy'
                             icon = 'info'
+                            label = 'welcomepage.privacy'
                             url = { PRIVACY_URL } />
                         <SideBarItem
-                            i18Label = 'welcomepage.sendFeedback'
                             icon = 'info'
+                            label = 'welcomepage.sendFeedback'
                             url = { SEND_FEEDBACK_URL } />
                     </ScrollView>
                 </SafeAreaView>
@@ -153,13 +153,17 @@ class WelcomePageSideBar extends Component<Props> {
  *
  * @param {Object} state - The redux state.
  * @protected
- * @returns {Object}
+ * @returns {{
+ *     _avatarURL: string,
+ *     _displayName: string,
+ *     _visible: boolean
+ * }}
  */
 function _mapStateToProps(state: Object) {
     const localParticipant = getLocalParticipant(state);
 
     return {
-        _avatar: getAvatarURL(localParticipant),
+        _avatarURL: getAvatarURL(localParticipant),
         _displayName: getParticipantDisplayName(state, localParticipant.id),
         _visible: state['features/welcome'].sideBarVisible
     };