Merge pull request #1125 from glouvigny/glouvigny/hud-convo-search

feat: typehead go to conversation using cmd+K

client/react-native/common/components/App.js

@@ -17,6 +17,7 @@ import { AppNavigator } from './Navigator/AppNavigator'
 import { RelayContext } from '../relay'
 import { UpdateContext } from '../update'
 import * as KeyboardContext from '../helpers/KeyboardContext'
+import Mousetrap from 'mousetrap'
 
 const { CoreModule } = NativeModules
 
@@ -160,6 +161,15 @@ export default class App extends PureComponent {
       })
       .catch(() => {})
 
+    if (Platform.OS === 'web') {
+      if (this._showQuickSwitch === undefined) {
+        this._showQuickSwitch = () => this.showQuickSwitch()
+      }
+
+      Mousetrap.prototype.stopCallback = () => {}
+      Mousetrap.bind(['command+k', 'ctrl+k', 'command+t', 'ctrl+t'], this._showQuickSwitch)
+    }
+
     this.setState({ loading: false })
   }
 
@@ -169,6 +179,15 @@ export default class App extends PureComponent {
     if (this._handleOpenURL !== undefined) {
       Linking.removeEventListener('url', this._handleOpenURL)
     }
+
+    if (Platform.OS === 'web') {
+      Mousetrap.unbind(['command+k', 'ctrl+k'], this._showQuickSwitch)
+    }
+  }
+
+  showQuickSwitch () {
+    NavigationService.navigate('modal/chats/switcher')
+    return false
   }
 
   _onLanguageChange = ({ language } = {}) => {

client/react-native/common/components/Library/ModalScreen.js

@@ -1,102 +1,127 @@
 import { StackActions, withNavigation } from 'react-navigation'
-import { View } from 'react-native'
+import {
+  View,
+  Platform,
+  TouchableOpacity,
+} from 'react-native'
 import React from 'react'
 
 import Loader  from './Loader'
 import Button from './Button'
 import colors from '../../constants/colors'
 
-const ModalScreen = props => {
-  const {
-    children,
-    navigation,
-    loading,
-    showDismiss,
-    width,
-    footer,
-    ...otherProps
-  } = props
+class ModalScreen extends React.PureComponent {
+  componentDidMount () {
+    if (Platform.OS === 'web') {
+      if (this._keyboardListener === undefined) {
+        this._keyboardListener = (e) => this.keyboardListener(e)
+      }
+      window.addEventListener('keyup', this._keyboardListener)
+    }
+  }
 
-  const beforeDismiss = navigation.getParam('beforeDismiss')
+  componentWillUnmount () {
+    window.removeEventListener('keyup', this._keyboardListener)
+  }
 
-  return (
-    <>
-      <View
-        style={{
+  keyboardListener (event) {
+    if ((this.props.showDismiss || this.props.keyboardDismiss) && event.key === 'Escape') {
+      this.dismiss()
+    }
+  }
+
+  render = () => {
+    const {
+      children,
+      loading,
+      showDismiss,
+      width,
+      footer,
+      ...otherProps
+    } = this.props
+
+    return (
+      <>
+        <TouchableOpacity style={{
           position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
           zIndex: -1,
-        }}
-      >
-        <View
-          style={{
-            backgroundColor: colors.transparentGrey,
-            flex: 1,
-          }}
-        />
-      </View>
-      {!loading ? (
-        <View
-          style={{
-            width: width || 320,
-            position: 'absolute',
-            flex: 1,
-          }}
-        >
+        }} onPress={() => (this.props.showDismiss || this.props.keyboardDismiss) && this.dismiss()}>
           <View
-            style={[
-              {
-                backgroundColor: colors.white,
-                borderRadius: 10,
-              },
-            ]}
-            {...otherProps}
+            style={{
+              backgroundColor: this.props.backgroundColor || colors.transparentGrey,
+              flex: 1,
+            }}
+          />
+        </TouchableOpacity>
+        {!loading ? (
+          <View
+            style={{
+              width: width || 320,
+              position: 'absolute',
+              flex: 1,
+            }}
           >
-            {showDismiss ? (
+            <View
+              style={[
+                {
+                  backgroundColor: colors.white,
+                  borderRadius: 10,
+                },
+              ]}
+              {...otherProps}
+            >
+              {showDismiss ? (
+                <View
+                  style={{
+                    flex: 1,
+                    marginTop: 10,
+                    marginRight: 10,
+                    alignSelf: 'flex-end',
+                    zIndex: 1,
+                  }}
+                >
+                  <Button
+                    onPress={() => this.dismiss()}
+                    icon={'x'}
+                    color={colors.fakeBlack}
+                    large
+                  />
+                </View>
+              ) : null}
               <View
                 style={{
-                  flex: 1,
-                  marginTop: 10,
-                  marginRight: 10,
-                  alignSelf: 'flex-end',
-                  zIndex: 1,
+                  marginTop: -24,
                 }}
               >
-                <Button
-                  onPress={() => {
-                    if (beforeDismiss !== undefined) {
-                      beforeDismiss()
-                    }
-
-                    navigation.dispatch(
-                      StackActions.pop({
-                        n: 1,
-                      })
-                    )
-                  }}
-                  icon={'x'}
-                  color={colors.fakeBlack}
-                  large
-                />
+                {children}
               </View>
-            ) : null}
-            <View
-              style={{
-                marginTop: -24,
-              }}
-            >
-              {children}
             </View>
+            {footer}
           </View>
-          {footer}
-        </View>
-      ) : null}
-      {loading && <Loader />}
-    </>
-  )
+        ) : null}
+        {loading && <Loader />}
+      </>
+    )
+  }
+
+  dismiss () {
+    const { navigation } = this.props
+    const beforeDismiss = navigation.getParam('beforeDismiss')
+
+    if (beforeDismiss !== undefined) {
+      beforeDismiss()
+    }
+
+    navigation.dispatch(
+      StackActions.pop({
+        n: 1,
+      })
+    )
+  }
 }
 
 export default withNavigation(ModalScreen)

client/react-native/common/components/Library/Text.js

@@ -354,6 +354,14 @@ export class ForegroundText extends PureComponent {
     return ForegroundText.styles[propsHash]
   }
 
+  focus () {
+    this._input.focus()
+  }
+
+  blur () {
+    this._input.blur()
+  }
+
   render () {
     const { icon, input, children, multiline, onSubmit, onChangeText, value, flip } = this.props
     const numberOfLines = typeof multiline === 'number' ? multiline : undefined
@@ -371,12 +379,14 @@ export class ForegroundText extends PureComponent {
             {...(typeof input === 'object' ? input : {})}
             style={styles.input}
             placeholder={children || input.placeholder}
+            autoFocus={!!input.autoFocus}
             placeholderTextColor={colors.subtleGrey}
             onSubmitEditing={onSubmit}
             onChangeText={onChangeText || (() => {})}
             multiline={!!multiline}
             numberOfLines={numberOfLines}
             value={value}
+            ref={c => (this._input = c)}
           />
         ) : (
           <TextNative
@@ -393,13 +403,24 @@ export class ForegroundText extends PureComponent {
   }
 }
 
-export const Text = props => {
-  props = reverse(props)
-  return (
-    <BackgroundText {...props}>
-      <ForegroundText {...props} />
-    </BackgroundText>
-  )
+export class Text extends React.PureComponent {
+  focus () {
+    this._text.focus()
+  }
+
+  blur () {
+    this._text.blur()
+  }
+
+  render () {
+    const props = reverse(this.props)
+
+    return (
+      <BackgroundText {...props}>
+        <ForegroundText {...props} ref={c => (this._text = c)} />
+      </BackgroundText>
+    )
+  }
 }
 
 export default Text

client/react-native/common/components/Navigator/BottomNavigator.js

@@ -240,7 +240,7 @@ export default createBottomTabNavigator(
 export const SplitNavigator = createSplitNavigator({
   'placeholder': Placeholder,
   'contacts': SubviewsContactNavigator,
-  'chats': SubviewsChatNavigator,
+  'chats/subviews': SubviewsChatNavigator,
 }, {
   'side/contacts': {
     screen: SplitSideContactNavigator,

client/react-native/common/components/Navigator/MainNavigator.js

@@ -4,6 +4,7 @@ import { Easing, Animated, Platform } from 'react-native'
 import { EventListFilterModal } from '../Screens/Settings/Devtools/EventList'
 import ContactCardModal from '../Screens/Contacts/ContactCardModal'
 import { ViewExportComponent } from '../../helpers/saveViewToCamera'
+import ChatsSwitcherModal from '../Screens/Contacts/ChatsSwitcherModal'
 
 export default createStackNavigator(
   {
@@ -14,6 +15,9 @@ export default createStackNavigator(
     'modal/contacts/card': {
       screen: ContactCardModal,
     },
+    'modal/chats/switcher': {
+      screen: ChatsSwitcherModal,
+    },
     'virtual/view-export': {
       screen: ViewExportComponent,
     },