react-native-inapp-inspector 2.3.14 → 2.3.16

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

@@ -60,13 +60,16 @@ const StorageTab_1 = __importDefault(require("./StorageTab"));
 const DebuggingTab_1 = __importDefault(require("./DebuggingTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
+const NpmStarPrompt_1 = __importDefault(require("./NpmStarPrompt"));
+const FeedbackModal_1 = __importDefault(require("./FeedbackModal"));
 const Toast_1 = __importDefault(require("../Toast"));
+const NetworkIcons_1 = require("../NetworkIcons");
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const helpers_1 = require("../../helpers");
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -96,6 +99,18 @@ const MainScreen = () => {
             }).start();
         }
     }, [settingsPage !== null]);
+    const feedbackAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (isFeedbackOpen) {
+            feedbackAnim.setValue(0);
+            react_native_1.Animated.spring(feedbackAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isFeedbackOpen]);
     const tabAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     (0, react_1.useEffect)(() => {
         tabAnim.setValue(0);
@@ -110,45 +125,45 @@ const MainScreen = () => {
             enabled &&
             !visible &&
             !useNativeFab && <FabLauncher_1.default />}
-      <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
-      {visible && (<ErrorBoundary_1.default onClose={closeModal}>
+      <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true} onRequestClose={closeModal}>
+        <ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
             <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
             <react_native_1.View style={[
-                styles_1.default.modalContentCard,
-                {
-                    height: `${modalHeightPercent}%`,
-                    borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
-                    borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
-                },
-            ]}>
+            styles_1.default.modalContentCard,
+            {
+                height: `${modalHeightPercent}%`,
+                borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
+                borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
+            },
+        ]}>
               <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
               <InspectorHeader_1.default />
 
               <react_native_1.View style={{ flex: 1 }}>
                 
-                {!isDetailActive && <TabBar_1.default />}
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && <TabBar_1.default />}
 
                 {isReady ? (<react_native_1.View style={{ flex: 1 }}>
                     
                     <react_native_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_1.default />}
                       {activeTab === 'logs' && <ConsoleTab_1.default />}
                       {activeTab === 'analytics' && <AnalyticsTab_1.default />}
@@ -159,52 +174,76 @@ const MainScreen = () => {
                       {activeTab === 'device' && <DeviceInfoTab_1.default />}
                       {activeTab === 'storage' && <StorageTab_1.default />}
                       {react_native_1.Platform.OS === 'android' &&
-                    (0, helpers_1.isLocalDebugEnvironment)() &&
-                    activeTab === 'debugging' && <DebuggingTab_1.default />}
+                (0, helpers_1.isLocalDebugEnvironment)() &&
+                activeTab === 'debugging' && <DebuggingTab_1.default />}
                     </react_native_1.Animated.View>
 
                     
                     {isDetailActive && (<react_native_1.Animated.View style={[
-                        react_native_1.StyleSheet.absoluteFill,
-                        {
-                            backgroundColor: AppColors_1.AppColors.contentBg,
-                            opacity: detailAnim,
-                            transform: [
-                                {
-                                    translateX: detailAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [32, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}>
-                        {activeTab === 'apis' && selected != null && (<NetworkDetail_1.default />)}
-                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail_1.default event={selectedEvent}/>)}
-                        {activeTab === 'logs' && selectedLog != null && (<LogDetail_1.default />)}
-                        {activeTab === 'redux' && <ReduxDetail_1.default />}
-                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
-                      </react_native_1.Animated.View>)}
-                  </react_native_1.View>) : (<MainScreenSkeleton />)}
-
-                
-                {settingsPage !== null && (<react_native_1.Animated.View style={[
                     react_native_1.StyleSheet.absoluteFill,
                     {
-                        backgroundColor: AppColors_1.AppColors.grayBackground,
-                        opacity: settingsAnim,
+                        backgroundColor: AppColors_1.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_1.default />)}
+                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail_1.default event={selectedEvent}/>)}
+                        {activeTab === 'logs' && selectedLog != null && (<LogDetail_1.default />)}
+                        {activeTab === 'redux' && <ReduxDetail_1.default />}
+                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
+                      </react_native_1.Animated.View>)}
+                  </react_native_1.View>) : (<MainScreenSkeleton />)}
+
+                
+                {settingsPage !== null && (<react_native_1.Animated.View style={[
+                react_native_1.StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    opacity: settingsAnim,
+                    transform: [
+                        {
+                            translateY: settingsAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [24, 0],
+                            }),
+                        },
+                    ],
+                },
+            ]}>
                     <SettingsPanel_1.default />
                   </react_native_1.Animated.View>)}
+
+                
+                {isFeedbackOpen && (<react_native_1.Animated.View style={[
+                react_native_1.StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    opacity: feedbackAnim,
+                    transform: [
+                        {
+                            translateY: feedbackAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [24, 0],
+                            }),
+                        },
+                    ],
+                },
+            ]}>
+                    <FeedbackModal_1.default onClose={() => setIsFeedbackOpen(false)}/>
+                  </react_native_1.Animated.View>)}
+
+                
+                {!isDetailActive && settingsPage === null && !isFeedbackOpen && (<react_native_1.TouchableOpacity activeOpacity={0.8} onPress={() => setIsFeedbackOpen(true)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles_1.default.supportFab}>
+                    <NetworkIcons_1.HeadphonesIcon color={AppColors_1.AppColors.white} size={20}/>
+                  </react_native_1.TouchableOpacity>)}
               </react_native_1.View>
 
               
@@ -212,9 +251,12 @@ const MainScreen = () => {
 
               
               <NpmUpdateToast_1.default />
+
+              
+              <NpmStarPrompt_1.default />
             </react_native_1.View>
           </react_native_1.View>
-        </ErrorBoundary_1.default>)}
+        </ErrorBoundary_1.default>
       {hasNavigationContext && (<NavigationTracker_1.default onStateChange={setNavState}/>)}
     </react_native_1.Modal>
     </>);