react-native-inapp-inspector 2.3.15 → 2.3.16

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

@@ -52,7 +52,7 @@ const NativeInspector_1 = require("../../native/NativeInspector");
 const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, setSettingsActiveSubTab, isFeedbackOpen, setIsFeedbackOpen, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const { width: windowWidth } = (0, react_native_1.useWindowDimensions)();
     const isNarrow = windowWidth < 360;
     const isCompact = windowWidth < 400;
@@ -113,7 +113,7 @@ const InspectorHeader = react_1.default.memo(() => {
             (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
-    const isAnySelected = isDetailView || isSettingsView;
+    const isAnySelected = isDetailView || isSettingsView || isFeedbackOpen;
     const settingsModuleTitle = (0, react_1.useMemo)(() => {
         switch (settingsPage) {
             case 'apis':
@@ -159,6 +159,10 @@ const InspectorHeader = react_1.default.memo(() => {
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
+            if (isFeedbackOpen) {
+                setIsFeedbackOpen(false);
+                return;
+            }
             if (isSettingsView) {
                 if (settingsPage === 'main') {
                     setSettingsPage(null);
@@ -199,7 +203,41 @@ const InspectorHeader = react_1.default.memo(() => {
               <NetworkIcons_1.WhiteBackNavigation />
             </TouchableScale_1.default>
 
-            {isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+            {isFeedbackOpen ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: isNarrow ? 14 : 16,
+                color: AppColors_1.AppColors.white,
+                letterSpacing: -0.2,
+            }} numberOfLines={1}>
+                    Support & Feedback
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                paddingHorizontal: isNarrow ? 4 : 6,
+                paddingVertical: 1.5,
+                borderRadius: 10,
+                borderWidth: 1,
+                borderColor: `${AppColors_1.AppColors.white}20`,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: isNarrow ? 8 : 9,
+                color: AppColors_1.AppColors.white,
+            }}>
+                      v{constants_2.LIB_VERSION}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: isNarrow ? 9.5 : 10.5,
+                color: `${AppColors_1.AppColors.white}CC`,
+            }} numberOfLines={1}>
+                  Direct line to maintainers & developers
+                </react_native_1.Text>
+              </react_native_1.View>) : isSettingsView ? (<react_native_1.View style={{ gap: 2, flex: 1, minWidth: 0 }}>
                 <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                   <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
@@ -791,7 +829,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
-            {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
+            {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Settings" onPress={() => setSettingsPage('main')} hitSlop={15} style={[
                 styles_1.default.closeButtonSquare,
                 {
                     width: buttonSize,
@@ -802,6 +840,20 @@ const InspectorHeader = react_1.default.memo(() => {
                 <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale_1.default>)}
 
+            {!isAnySelected && (<TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="About and System Specifications" onPress={() => {
+                setSettingsActiveSubTab('about');
+                setSettingsPage('main');
+            }} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    width: buttonSize,
+                    height: buttonSize,
+                    borderRadius: isNarrow ? 6 : 7,
+                },
+            ]}>
+                <NetworkIcons_1.InfoCircleIcon color={AppColors_1.AppColors.white} size={isNarrow ? 12 : 14}/>
+              </TouchableScale_1.default>)}
+
             <react_native_1.TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
             styles_1.default.closeButtonSquare,
             {

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);
@@ -128,7 +143,7 @@ const MainScreen = () => {
 
               <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 }}>
                     
@@ -145,7 +160,7 @@ const MainScreen = () => {
                         },
                     ],
                 },
-                (isDetailActive || settingsPage !== null) && {
+                (isDetailActive || settingsPage !== null || isFeedbackOpen) && {
                     pointerEvents: 'none',
                 },
             ]}>
@@ -205,6 +220,30 @@ const MainScreen = () => {
             ]}>
                     <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,6 +251,9 @@ const MainScreen = () => {
 
               
               <NpmUpdateToast_1.default />
+
+              
+              <NpmStarPrompt_1.default />
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>

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

@@ -394,12 +394,18 @@ const NetworkTab = react_1.default.memo(() => {
             </react_native_1.View>
 
             
-            <react_native_1.View style={{ marginBottom: 8 }}>
-              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+            <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                marginBottom: 8,
                 paddingHorizontal: 12,
+                gap: 6,
+            }}>
+              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 6,
+                paddingRight: 6,
             }}>
                 {QUICK_CHIPS.map(chip => {
                 const isActive = quickFilter === chip.id;
@@ -458,9 +464,10 @@ const NetworkTab = react_1.default.memo(() => {
                       </react_native_1.View>
                     </TouchableScale_1.default>);
             })}
+              </react_native_1.ScrollView>
 
-                <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)}>
-                  <react_native_1.View style={{
+              <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={{ flexShrink: 0 }}>
+                <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 paddingHorizontal: 10,
@@ -474,36 +481,40 @@ const NetworkTab = react_1.default.memo(() => {
                     ? AppColors_1.AppColors.purple
                     : AppColors_1.AppColors.grayBorderSecondary,
                 gap: 5,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.04,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+                elevation: 1,
             }}>
-                    <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                  <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors_1.AppColors.purple
                 : AppColors_1.AppColors.grayText}/>
-                    <react_native_1.Text style={{
+                  <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 10.5,
                 color: statusFilters.size > 0 || methodFilters.size > 0
                     ? AppColors_1.AppColors.purple
                     : AppColors_1.AppColors.grayText,
             }}>
-                      More Filters
-                    </react_native_1.Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
+                    More Filters
+                  </react_native_1.Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.purple,
                     paddingHorizontal: 4.5,
                     paddingVertical: 1,
                     borderRadius: 6,
                 }}>
-                        <react_native_1.Text style={{
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 8.5,
                     color: AppColors_1.AppColors.white,
                 }}>
-                          {statusFilters.size + methodFilters.size}
-                        </react_native_1.Text>
-                      </react_native_1.View>)}
-                  </react_native_1.View>
-                </TouchableScale_1.default>
-              </react_native_1.ScrollView>
+                        {statusFilters.size + methodFilters.size}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+              </TouchableScale_1.default>
             </react_native_1.View>
 
             
@@ -561,28 +572,6 @@ const NetworkTab = react_1.default.memo(() => {
             styles_1.default.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-      
-      <TouchableScale_1.default onPress={() => {
-            try {
-                apisListRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    apisListRef.current?.scrollToIndex({
-                        index: 0,
-                        animated: true,
-                    });
-                }
-                catch { }
-            }
-        }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
-        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
-          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
-        </react_native_1.View>
-      </TouchableScale_1.default>
 
       
       <NetworkFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>

package/dist/commonjs/components/Inspector/NpmStarPrompt.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const NpmStarPrompt: React.FC;
+export default NpmStarPrompt;