implement onTabLongPress event handler (facebook#66)

* implement onTabLongPress event handler * style fix * defaultHandler for long press
react-one · Aug 18, 2019 · 331055c · 331055c
1 parent 8ecc08b
commit 331055c
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.js
@@ -55,6 +55,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
       getTestID,
       renderIcon,
       onTabPress,
+      onTabLongPress,
     } = this.props;
 
     const { descriptors } = this.props;
@@ -74,6 +75,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
         navigation={navigation}
         screenProps={screenProps}
         onTabPress={onTabPress}
+        onTabLongPress={onTabLongPress}
         getLabelText={getLabelText}
         getButtonComponent={getButtonComponent}
         getAccessibilityLabel={getAccessibilityLabel}

diff --git a/packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js b/packages/bottom-tabs/src/navigators/createMaterialTopTabNavigator.js
@@ -109,6 +109,7 @@ class MaterialTabView extends React.PureComponent<Props, State> {
         getTestID={this.props.getTestID}
         renderIcon={this._renderIcon}
         onTabPress={this.props.onTabPress}
+        onTabLongPress={this.props.onTabLongPress}
       />
     );
   };

diff --git a/packages/bottom-tabs/src/utils/createTabNavigator.js b/packages/bottom-tabs/src/utils/createTabNavigator.js
@@ -23,6 +23,7 @@ export type InjectedProps = {
   renderScene: (props: { route: any }) => ?React.Node,
   onIndexChange: (index: number) => any,
   onTabPress: (props: { route: any }) => mixed,
+  onTabLongPress: (props: { route: any }) => mixed,
   navigation: any,
   descriptors: any,
   screenProps?: any,
@@ -117,25 +118,27 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
       return options.tabBarTestID;
     };
 
+    _makeDefaultHandler = ({ route, navigation }) => () => {
+      if (navigation.isFocused()) {
+        if (route.hasOwnProperty('index') && route.index > 0) {
+          // If current tab has a nested navigator, pop to top
+          navigation.dispatch(StackActions.popToTop({ key: route.key }));
+        } else {
+          navigation.emit('refocus');
+        }
+      } else {
+        this._jumpTo(route.routeName);
+      }
+    };
+
     _handleTabPress = ({ route }) => {
       this._isTabPress = true;
 
       const { descriptors } = this.props;
       const descriptor = descriptors[route.key];
       const { navigation, options } = descriptor;
 
-      const defaultHandler = () => {
-        if (navigation.isFocused()) {
-          if (route.hasOwnProperty('index') && route.index > 0) {
-            // If current tab has a nested navigator, pop to top
-            navigation.dispatch(StackActions.popToTop({ key: route.key }));
-          } else {
-            navigation.emit('refocus');
-          }
-        } else {
-          this._jumpTo(route.routeName);
-        }
-      };
+      const defaultHandler = this._makeDefaultHandler({ route, navigation });
 
       if (options.tabBarOnPress) {
         options.tabBarOnPress({ navigation, defaultHandler });
@@ -144,6 +147,20 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
       }
     };
 
+    _handleTabLongPress = ({ route }) => {
+      const { descriptors } = this.props;
+      const descriptor = descriptors[route.key];
+      const { navigation, options } = descriptor;
+
+      const defaultHandler = this._makeDefaultHandler({ route, navigation });
+
+      if (options.tabBarOnLongPress) {
+        options.tabBarOnLongPress({ navigation, defaultHandler });
+      } else {
+        defaultHandler();
+      }
+    };
+
     _handleIndexChange = index => {
       if (this._isTabPress) {
         this._isTabPress = false;
@@ -187,6 +204,7 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
           renderScene={this._renderScene}
           onIndexChange={this._handleIndexChange}
           onTabPress={this._handleTabPress}
+          onTabLongPress={this._handleTabLongPress}
           navigation={navigation}
           descriptors={descriptors}
           screenProps={screenProps}

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.js b/packages/bottom-tabs/src/views/BottomTabBar.js
@@ -32,6 +32,7 @@ type Props = TabBarOptions & {
   descriptors: any,
   jumpTo: any,
   onTabPress: any,
+  onTabLongPress: any,
   getAccessibilityLabel: (props: { route: any }) => string,
   getButtonComponent: ({ route: any }) => any,
   getLabelText: ({ route: any }) => any,
@@ -50,11 +51,18 @@ const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
 
 class TouchableWithoutFeedbackWrapper extends React.Component<*> {
   render() {
-    const { onPress, testID, accessibilityLabel, ...props } = this.props;
+    const {
+      onPress,
+      onLongPress,
+      testID,
+      accessibilityLabel,
+      ...props
+    } = this.props;
 
     return (
       <TouchableWithoutFeedback
         onPress={onPress}
+        onLongPress={onLongPress}
         testID={testID}
         hitSlop={{ left: 15, right: 15, top: 5, bottom: 5 }}
         accessibilityLabel={accessibilityLabel}
@@ -191,6 +199,7 @@ class TabBarBottom extends React.Component<Props> {
       activeBackgroundColor,
       inactiveBackgroundColor,
       onTabPress,
+      onTabLongPress,
       safeAreaInset,
       style,
       tabStyle,
@@ -228,6 +237,7 @@ class TabBarBottom extends React.Component<Props> {
             <ButtonComponent
               key={route.key}
               onPress={() => onTabPress({ route })}
+              onLongPress={() => onTabLongPress({ route })}
               testID={testID}
               accessibilityLabel={accessibilityLabel}
               style={[