feat: top back & responsive desktop

berty · Mar 19, 2019 · 32605aa · 32605aa
1 parent f2550b4
commit 32605aa
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/client/react-native/common/components/Library/BackActionProvider.js b/client/react-native/common/components/Library/BackActionProvider.js
@@ -36,7 +36,10 @@ const BackActionProvider = ({ navigation, children }) => {
       splitNavigator.dispatch(NavigationActions.navigate({ routeName: shownPaneRouteName }))
     }
 
-    navigation.goBack(...args)
+    if (navigation.goBack(...args) === false) {
+      navigation.navigate('placeholder')
+      splitNavigator.dispatch(NavigationActions.navigate({ routeName: 'placeholder' }))
+    }
   }
 
   return children({ goBack })

diff --git a/client/react-native/common/components/Navigator/SplitNavigator.js b/client/react-native/common/components/Navigator/SplitNavigator.js
@@ -1,19 +1,47 @@
 import React from 'react'
-import { View } from 'react-native'
+import { Dimensions, View } from 'react-native'
 import createTabNavigator from 'react-navigation-tabs/src/utils/createTabNavigator'
 import { createSwitchNavigator, createBottomTabNavigator } from 'react-navigation'
 
 class SplitterView extends React.PureComponent {
+  constructor (props) {
+    super(props)
+
+    this.state = this.getDims()
+  }
+
+  getDims () {
+    return Dimensions.get('window') || Dimensions.get('screen') || { height: 0, width: 0 }
+  }
+
+  componentDidMount () {
+    if (this._screenSizeWatcher === undefined) {
+      this._screenSizeWatcher = (...args) => this.screenSizeWatcher(...args)
+    }
+    Dimensions.addEventListener('change', this._screenSizeWatcher)
+  }
+
+  componentWillUnmount () {
+    Dimensions.removeEventListener('change', this._screenSizeWatcher)
+  }
+
+  screenSizeWatcher () {
+    this.setState(this.getDims())
+  }
+
   render () {
     const { renderScene } = this.props
     const { navigation } = this.props
     const { state } = navigation
 
+    const narrow = this.state.width <= 750
+    const isPlaceholder = state.routes[1].routes[state.routes[1].index].routeName === 'placeholder'
+
     return <View style={{ flex: 1, flexDirection: 'row' }}>
-      <View style={{ width: 400 }}>
+      <View style={{ width: narrow ? '100%' : 350, display: narrow && !isPlaceholder ? 'none' : 'flex' }}>
         {renderScene({ route: state.routes[0] })}
       </View>
-      <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, display: narrow && isPlaceholder ? 'none' : 'flex' }}>
         {renderScene({ route: state.routes[1] })}
       </View>
     </View>