feat(welcome) blur room name input onListContainerPress

react/features/calendar-sync/components/CalendarList.native.js

@@ -1,7 +1,12 @@
 // @flow
 
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import {
+    Text,
+    TouchableOpacity,
+    TouchableWithoutFeedback,
+    View
+} from 'react-native';
 
 import { translate } from '../../base/i18n';
 import { AbstractPage } from '../../base/react';
@@ -27,6 +32,11 @@ type Props = {
      */
     disabled: boolean,
 
+    /**
+     * Callback to be invoked when pressing the list container.
+     */
+    onListContainerPress?: boolean,
+
     /**
      * The translate function.
      */
@@ -71,20 +81,23 @@ class CalendarList extends AbstractPage<Props> {
      * @inheritdoc
      */
     render() {
-        const { disabled } = this.props;
+        const { disabled, onListContainerPress } = this.props;
 
         return (
             CalendarListContent
-                ? <View
+                ? <TouchableWithoutFeedback
-                    style = {
+                    onPress = { onListContainerPress }>
-                        disabled
+                    <View
-                            ? styles.calendarSyncDisabled
+                        style = {
-                            : styles.calendarSync }>
+                            disabled
-                    <CalendarListContent
+                                ? styles.calendarSyncDisabled
-                        disabled = { disabled }
+                                : styles.calendarSync }>
-                        listEmptyComponent
+                        <CalendarListContent
-                            = { this._getRenderListEmptyComponent() } />
+                            disabled = { disabled }
-                </View>
+                            listEmptyComponent
+                                = { this._getRenderListEmptyComponent() } />
+                    </View>
+                </TouchableWithoutFeedback>
                 : null
         );
     }

react/features/mobile/navigation/components/welcome/components/WelcomePageTabs.js

@@ -23,18 +23,27 @@ type Props = {
     /**
      * Renders the lists disabled.
      */
-    disabled: boolean
+    disabled: boolean,
+
+    /**
+     * Callback to be invoked when pressing the list container.
+     */
+    onListContainerPress?: Function
 };
 
-const WelcomePageTabs = ({ disabled }: Props) => {
+const WelcomePageTabs = ({ disabled, onListContainerPress }: Props) => {
     const RecentListScreen = useCallback(() =>
-        <RecentList disabled = { disabled } />
+        (<RecentList
+            disabled = { disabled }
+            onListContainerPress = { onListContainerPress } />)
     );
 
     const calendarEnabled = useSelector(isCalendarEnabled);
 
     const CalendarListScreen = useCallback(() =>
-        <CalendarList disabled = { disabled } />
+        (<CalendarList
+            disabled = { disabled }
+            onListContainerPress = { onListContainerPress } />)
     );
 
     return (

react/features/recent-list/components/RecentList.native.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import type { Dispatch } from 'redux';
 
 import { getDefaultURL } from '../../app/functions';
@@ -30,6 +30,11 @@ type Props = {
      */
     dispatch: Dispatch<any>,
 
+    /**
+     * Callback to be invoked when pressing the list container.
+     */
+    onListContainerPress?: Function,
+
     /**
      * The translate function.
      */
@@ -77,6 +82,7 @@ class RecentList extends AbstractRecentList<Props> {
         }
         const {
             disabled,
+            onListContainerPress,
             t,
             _defaultServerURL,
             _recentList
@@ -84,15 +90,18 @@ class RecentList extends AbstractRecentList<Props> {
         const recentList = toDisplayableList(_recentList, t, _defaultServerURL);
 
         return (
-            <View style = { disabled ? styles.recentListDisabled : styles.recentList }>
+            <TouchableWithoutFeedback
-                <NavigateSectionList
+                onPress = { onListContainerPress }>
-                    disabled = { disabled }
+                <View style = { disabled ? styles.recentListDisabled : styles.recentList }>
-                    onLongPress = { this._onLongPress }
+                    <NavigateSectionList
-                    onPress = { this._onPress }
+                        disabled = { disabled }
-                    renderListEmptyComponent
+                        onLongPress = { this._onLongPress }
-                        = { this._getRenderListEmptyComponent() }
+                        onPress = { this._onPress }
-                    sections = { recentList } />
+                        renderListEmptyComponent
-            </View>
+                            = { this._getRenderListEmptyComponent() }
+                        sections = { recentList } />
+                </View>
+            </TouchableWithoutFeedback>
         );
     }
 

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

@@ -369,7 +369,9 @@ class WelcomePage extends AbstractWelcomePage<*> {
                         </View>
                     </SafeAreaView>
                     {/* // $FlowExpectedError*/}
-                    <WelcomePageTabs disabled = { this.state._fieldFocused } />
+                    <WelcomePageTabs
+                        disabled = { this.state._fieldFocused }
+                        onListContainerPress = { this._onFieldBlur } />
                 </View>
             </>
         );