From 40f5f4cd0d61555fb11b846fa3ee61df69985890 Mon Sep 17 00:00:00 2001
From: Calin Chitu <calinte2002@yahoo.co.uk>
Date: Thu, 27 Jan 2022 12:46:49 +0200
Subject: [PATCH] feat(welcome) blur room name input onListContainerPress

---
 .../components/CalendarList.native.js         | 37 +++++++++++++------
 .../welcome/components/WelcomePageTabs.js     | 17 +++++++--
 .../components/RecentList.native.js           | 29 ++++++++++-----
 .../welcome/components/WelcomePage.native.js  |  4 +-
 4 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/react/features/calendar-sync/components/CalendarList.native.js b/react/features/calendar-sync/components/CalendarList.native.js
index e60cdd71e..6ab759927 100644
--- a/react/features/calendar-sync/components/CalendarList.native.js
+++ b/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
-                    style = {
-                        disabled
-                            ? styles.calendarSyncDisabled
-                            : styles.calendarSync }>
-                    <CalendarListContent
-                        disabled = { disabled }
-                        listEmptyComponent
-                            = { this._getRenderListEmptyComponent() } />
-                </View>
+                ? <TouchableWithoutFeedback
+                    onPress = { onListContainerPress }>
+                    <View
+                        style = {
+                            disabled
+                                ? styles.calendarSyncDisabled
+                                : styles.calendarSync }>
+                        <CalendarListContent
+                            disabled = { disabled }
+                            listEmptyComponent
+                                = { this._getRenderListEmptyComponent() } />
+                    </View>
+                </TouchableWithoutFeedback>
                 : null
         );
     }
diff --git a/react/features/mobile/navigation/components/welcome/components/WelcomePageTabs.js b/react/features/mobile/navigation/components/welcome/components/WelcomePageTabs.js
index b0be08d13..291527319 100644
--- a/react/features/mobile/navigation/components/welcome/components/WelcomePageTabs.js
+++ b/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 (
diff --git a/react/features/recent-list/components/RecentList.native.js b/react/features/recent-list/components/RecentList.native.js
index fa4dbff60..9dd36a9c4 100644
--- a/react/features/recent-list/components/RecentList.native.js
+++ b/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 }>
-                <NavigateSectionList
-                    disabled = { disabled }
-                    onLongPress = { this._onLongPress }
-                    onPress = { this._onPress }
-                    renderListEmptyComponent
-                        = { this._getRenderListEmptyComponent() }
-                    sections = { recentList } />
-            </View>
+            <TouchableWithoutFeedback
+                onPress = { onListContainerPress }>
+                <View style = { disabled ? styles.recentListDisabled : styles.recentList }>
+                    <NavigateSectionList
+                        disabled = { disabled }
+                        onLongPress = { this._onLongPress }
+                        onPress = { this._onPress }
+                        renderListEmptyComponent
+                            = { this._getRenderListEmptyComponent() }
+                        sections = { recentList } />
+                </View>
+            </TouchableWithoutFeedback>
         );
     }
 
diff --git a/react/features/welcome/components/WelcomePage.native.js b/react/features/welcome/components/WelcomePage.native.js
index ccf56011b..29d6af780 100644
--- a/react/features/welcome/components/WelcomePage.native.js
+++ b/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>
             </>
         );