react-native-inapp-inspector 2.3.14 → 2.3.16

package/dist/esm/components/Inspector/MainScreen.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, View, } from 'react-native';
+import { Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -22,13 +22,16 @@ import StorageTab from './StorageTab';
 import DebuggingTab from './DebuggingTab';
 import SettingsPanel from './SettingsPanel';
 import NpmUpdateToast from './NpmUpdateToast';
+import NpmStarPrompt from './NpmStarPrompt';
+import FeedbackModal from './FeedbackModal';
 import Toast from '../Toast';
+import { HeadphonesIcon } from '../NetworkIcons';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 import { isLocalDebugEnvironment } from '../../helpers';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -58,6 +61,18 @@ const MainScreen = () => {
             }).start();
         }
     }, [settingsPage !== null]);
+    const feedbackAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (isFeedbackOpen) {
+            feedbackAnim.setValue(0);
+            Animated.spring(feedbackAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isFeedbackOpen]);
     const tabAnim = useRef(new Animated.Value(1)).current;
     useEffect(() => {
         tabAnim.setValue(0);
@@ -72,45 +87,45 @@ const MainScreen = () => {
             enabled &&
             !visible &&
             !useNativeFab && <FabLauncher />}
-      <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
-      {visible && (<ErrorBoundary onClose={closeModal}>
+      <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true} onRequestClose={closeModal}>
+        <ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
             <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
             <View style={[
-                styles.modalContentCard,
-                {
-                    height: `${modalHeightPercent}%`,
-                    borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
-                    borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
-                },
-            ]}>
+            styles.modalContentCard,
+            {
+                height: `${modalHeightPercent}%`,
+                borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
+                borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
+            },
+        ]}>
               <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
               <InspectorHeader />
 
               <View style={{ flex: 1 }}>
                 
-                {!isDetailActive && <TabBar />}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar />}
 
                 {isReady ? (<View style={{ flex: 1 }}>
                     
                     <Animated.View style={[
-                    {
-                        flex: 1,
-                        opacity: tabAnim,
-                        transform: [
-                            {
-                                translateY: tabAnim.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [6, 0],
-                                }),
-                            },
-                        ],
-                    },
-                    (isDetailActive || settingsPage !== null) && {
-                        pointerEvents: 'none',
-                    },
-                ]}>
+                {
+                    flex: 1,
+                    opacity: tabAnim,
+                    transform: [
+                        {
+                            translateY: tabAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [6, 0],
+                            }),
+                        },
+                    ],
+                },
+                (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
+                    pointerEvents: 'none',
+                },
+            ]}>
                       {activeTab === 'apis' && <NetworkTab />}
                       {activeTab === 'logs' && <ConsoleTab />}
                       {activeTab === 'analytics' && <AnalyticsTab />}
@@ -121,52 +136,76 @@ const MainScreen = () => {
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
                       {Platform.OS === 'android' &&
-                    isLocalDebugEnvironment() &&
-                    activeTab === 'debugging' && <DebuggingTab />}
+                isLocalDebugEnvironment() &&
+                activeTab === 'debugging' && <DebuggingTab />}
                     </Animated.View>
 
                     
                     {isDetailActive && (<Animated.View style={[
-                        StyleSheet.absoluteFill,
-                        {
-                            backgroundColor: AppColors.contentBg,
-                            opacity: detailAnim,
-                            transform: [
-                                {
-                                    translateX: detailAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [32, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}>
-                        {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
-                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
-                        {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
-                        {activeTab === 'redux' && <ReduxDetail />}
-                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
-                      </Animated.View>)}
-                  </View>) : (<MainScreenSkeleton />)}
-
-                
-                {settingsPage !== null && (<Animated.View style={[
                     StyleSheet.absoluteFill,
                     {
-                        backgroundColor: AppColors.grayBackground,
-                        opacity: settingsAnim,
+                        backgroundColor: AppColors.contentBg,
+                        opacity: detailAnim,
                         transform: [
                             {
-                                translateY: settingsAnim.interpolate({
+                                translateX: detailAnim.interpolate({
                                     inputRange: [0, 1],
-                                    outputRange: [24, 0],
+                                    outputRange: [32, 0],
                                 }),
                             },
                         ],
                     },
                 ]}>
+                        {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
+                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
+                        {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
+                        {activeTab === 'redux' && <ReduxDetail />}
+                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
+                      </Animated.View>)}
+                  </View>) : (<MainScreenSkeleton />)}
+
+                
+                {settingsPage !== null && (<Animated.View style={[
+                StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors.grayBackground,
+                    opacity: settingsAnim,
+                    transform: [
+                        {
+                            translateY: settingsAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [24, 0],
+                            }),
+                        },
+                    ],
+                },
+            ]}>
                     <SettingsPanel />
                   </Animated.View>)}
+
+                
+                {isFeedbackOpen && (<Animated.View style={[
+                StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors.primaryLight,
+                    opacity: feedbackAnim,
+                    transform: [
+                        {
+                            translateY: feedbackAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [24, 0],
+                            }),
+                        },
+                    ],
+                },
+            ]}>
+                    <FeedbackModal onClose={() => setIsFeedbackOpen(false)}/>
+                  </Animated.View>)}
+
+                
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && (<TouchableOpacity activeOpacity={0.8} onPress={() => setIsFeedbackOpen(true)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles.supportFab}>
+                    <HeadphonesIcon color={AppColors.white} size={20}/>
+                  </TouchableOpacity>)}
               </View>
 
               
@@ -174,9 +213,12 @@ const MainScreen = () => {
 
               
               <NpmUpdateToast />
+
+              
+              <NpmStarPrompt />
             </View>
           </View>
-        </ErrorBoundary>)}
+        </ErrorBoundary>
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
     </Modal>
     </>);