react-native-inapp-inspector 2.3.14 → 2.3.16

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

@@ -13,7 +13,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, GlobeIcon, RequestIcon, ResponseIcon, HeadersIcon, AtomIcon, BoltIcon, ShieldAlertIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
@@ -135,85 +135,6 @@ const NetworkTab = React.memo(() => {
             color: '#E10098',
         },
     ], [quickCounts]);
-    const SEARCH_SCOPES = [
-        {
-            id: 'all',
-            label: 'All',
-            icon: color => <LayersIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'url',
-            label: 'URL / Path',
-            icon: color => <GlobeIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'reqBody',
-            label: 'Payload',
-            icon: color => <RequestIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'resBody',
-            label: 'Response',
-            icon: color => <ResponseIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'headers',
-            label: 'Headers',
-            icon: color => <HeadersIcon size={9.5} color={color}/>,
-        },
-    ];
-    const QUICK_API_QUERY_TAGS = useMemo(() => [
-        {
-            label: 'Failed',
-            query: 'is:error',
-            icon: (color) => <CircleXIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'Slow (>1s)',
-            query: 'slow:>1s',
-            icon: (color) => <ClockIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'POST',
-            query: 'm:POST',
-            icon: (color) => <RequestIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'GET',
-            query: 'm:GET',
-            icon: (color) => <ResponseIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'GraphQL',
-            query: 'is:graphql',
-            icon: (color) => <AtomIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'Axios',
-            query: 'client:axios',
-            icon: (color) => <BoltIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '200 OK',
-            query: 'status:200',
-            icon: (color) => <CircleCheckIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '404',
-            query: 'status:404',
-            icon: (color) => <CircleAlertIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '500',
-            query: 'status:500',
-            icon: (color) => <CircleXIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'HTTPS',
-            query: 'is:https',
-            icon: (color) => <ShieldAlertIcon size={9.5} color={color}/>,
-        },
-    ], []);
     const networkMetrics = useMemo(() => {
         if (!logs || logs.length === 0)
             return null;
@@ -359,61 +280,7 @@ const NetworkTab = React.memo(() => {
                 <SearchIcon color={isSearchFocused
                 ? AppColors.purple
                 : AppColors.grayTextWeak} size={15}/>
-                <TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-
-                
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3,
-                marginRight: 2,
-            }}>
-                  <Pressable hitSlop={8} onPress={() => setIsCaseSensitive(prev => !prev)} style={{
-                paddingHorizontal: 4.5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                backgroundColor: isCaseSensitive
-                    ? AppColors.purple
-                    : 'transparent',
-                borderWidth: 1,
-                borderColor: isCaseSensitive
-                    ? AppColors.purple
-                    : `${AppColors.grayBorderSecondary}`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: isCaseSensitive
-                    ? AppColors.white
-                    : AppColors.grayTextWeak,
-            }}>
-                      Aa
-                    </Text>
-                  </Pressable>
-
-                  <Pressable hitSlop={8} onPress={() => setIsRegexSearch(prev => !prev)} style={{
-                paddingHorizontal: 4.5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                backgroundColor: isRegexSearch
-                    ? AppColors.purple
-                    : 'transparent',
-                borderWidth: 1,
-                borderColor: isRegexSearch
-                    ? AppColors.purple
-                    : `${AppColors.grayBorderSecondary}`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: isRegexSearch
-                    ? AppColors.white
-                    : AppColors.grayTextWeak,
-            }}>
-                      .*
-                    </Text>
-                  </Pressable>
-                </View>
+                <TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
 
                 {search.length > 0 && (<View style={{
                     flexDirection: 'row',
@@ -489,100 +356,18 @@ const NetworkTab = React.memo(() => {
             </View>
 
             
-            <View style={{ paddingBottom: 4 }}>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                paddingHorizontal: 12,
+            <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 5,
-                paddingVertical: 2,
-            }}>
-                
-                {SEARCH_SCOPES.map(s => {
-                const isActive = searchScope === s.id;
-                return (<TouchableScale key={`scope_${s.id}`} onPress={() => setSearchScope(s.id)} hitSlop={6} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 3.5,
-                        paddingHorizontal: 7.5,
-                        paddingVertical: 3.5,
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                            ? AppColors.purple
-                            : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? AppColors.purple
-                            : AppColors.grayBorderSecondary,
-                    }}>
-                      {s.icon(isActive ? AppColors.white : AppColors.grayTextWeak)}
-                      <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        color: isActive ? AppColors.white : AppColors.grayText,
-                    }}>
-                        {s.label}
-                      </Text>
-                    </TouchableScale>);
-            })}
-
-                <View style={{
-                width: 1,
-                height: 14,
-                backgroundColor: AppColors.dividerColor,
-                marginHorizontal: 3,
-            }}/>
-
-                
-                {QUICK_API_QUERY_TAGS.map(q => {
-                const isActive = search.includes(q.query);
-                return (<TouchableScale key={`quick_${q.query}`} onPress={() => {
-                        setSearch(prev => {
-                            if (prev.includes(q.query)) {
-                                return prev
-                                    .replace(q.query, '')
-                                    .replace(/\s+/g, ' ')
-                                    .trim();
-                            }
-                            return `${prev} ${q.query}`.trim();
-                        });
-                    }} hitSlop={6} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 3.5,
-                        paddingHorizontal: 7.5,
-                        paddingVertical: 3.5,
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                            ? `${AppColors.purple}20`
-                            : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? AppColors.purple
-                            : AppColors.grayBorderSecondary,
-                    }}>
-                      {q.icon(isActive ? AppColors.purple : AppColors.grayTextWeak)}
-                      <Text style={{
-                        fontFamily: AppFonts.interMedium,
-                        fontSize: 10,
-                        color: isActive
-                            ? AppColors.purple
-                            : AppColors.grayText,
-                    }}>
-                        {q.label}
-                      </Text>
-                    </TouchableScale>);
-            })}
-              </ScrollView>
-            </View>
-
-            
-            <View style={{ marginBottom: 8 }}>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                marginBottom: 8,
                 paddingHorizontal: 12,
+                gap: 6,
+            }}>
+              <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;
@@ -641,9 +426,10 @@ const NetworkTab = React.memo(() => {
                       </View>
                     </TouchableScale>);
             })}
+              </ScrollView>
 
-                <TouchableScale onPress={() => setIsFilterModalOpen(true)}>
-                  <View style={{
+              <TouchableScale onPress={() => setIsFilterModalOpen(true)} style={{ flexShrink: 0 }}>
+                <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 paddingHorizontal: 10,
@@ -657,143 +443,43 @@ const NetworkTab = React.memo(() => {
                     ? AppColors.purple
                     : AppColors.grayBorderSecondary,
                 gap: 5,
+                shadowColor: AppColors.black,
+                shadowOpacity: 0.04,
+                shadowRadius: 2,
+                shadowOffset: { width: 0, height: 1 },
+                elevation: 1,
             }}>
-                    <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                  <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors.purple
                 : AppColors.grayText}/>
-                    <Text style={{
+                  <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 10.5,
                 color: statusFilters.size > 0 || methodFilters.size > 0
                     ? AppColors.purple
                     : AppColors.grayText,
             }}>
-                      More Filters
-                    </Text>
-                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
+                    More Filters
+                  </Text>
+                  {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
                     backgroundColor: AppColors.purple,
                     paddingHorizontal: 4.5,
                     paddingVertical: 1,
                     borderRadius: 6,
                 }}>
-                        <Text style={{
+                      <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 8.5,
                     color: AppColors.white,
                 }}>
-                          {statusFilters.size + methodFilters.size}
-                        </Text>
-                      </View>)}
-                  </View>
-                </TouchableScale>
-              </ScrollView>
+                        {statusFilters.size + methodFilters.size}
+                      </Text>
+                    </View>)}
+                </View>
+              </TouchableScale>
             </View>
 
             
-            {(isSearchFocused || search.length > 0) && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 12,
-                    marginBottom: 6,
-                    gap: 6,
-                }}>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.grayTextWeak,
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.5,
-                }}>
-                  Scope:
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                }}>
-                  {SEARCH_SCOPES.map(s => {
-                    const isSelected = searchScope === s.id;
-                    const iconColor = isSelected ? AppColors.white : AppColors.grayText;
-                    return (<TouchableScale key={s.id} onPress={() => setSearchScope(s.id)}>
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                                ? AppColors.purple
-                                : `${AppColors.grayBorderSecondary}40`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                                ? AppColors.purple
-                                : AppColors.grayBorderSecondary,
-                        }}>
-                          {s.icon(iconColor)}
-                          <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                                ? AppColors.white
-                                : AppColors.grayText,
-                        }}>
-                            {s.label}
-                          </Text>
-                        </View>
-                      </TouchableScale>);
-                })}
-                </ScrollView>
-              </View>)}
-
-            
-            {(isSearchFocused || search.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 8, maxHeight: 28 }} contentContainerStyle={{
-                    paddingHorizontal: 12,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                }}>
-                {QUICK_API_QUERY_TAGS.map(item => {
-                    const isSelected = search.includes(item.query);
-                    return (<TouchableScale key={item.query} onPress={() => {
-                            if (isSelected) {
-                                setSearch(prev => prev.replace(item.query, '').trim());
-                            }
-                            else {
-                                setSearch(prev => prev ? `${prev} ${item.query}`.trim() : item.query);
-                            }
-                        }}>
-                      <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                                ? AppColors.purple
-                                : `${AppColors.purple}14`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                                ? AppColors.purple
-                                : `${AppColors.purple}30`,
-                        }}>
-                        {item.icon(isSelected ? AppColors.white : AppColors.purple)}
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                                ? AppColors.white
-                                : AppColors.purple,
-                        }}>
-                          {item.label}
-                        </Text>
-                      </View>
-                    </TouchableScale>);
-                })}
-              </ScrollView>)}
-
-            
             {(quickFilter !== 'all' ||
                 search.trim().length > 0 ||
                 statusFilters.size > 0 ||
@@ -833,15 +519,6 @@ const NetworkTab = React.memo(() => {
                   </Text>
                 </TouchableScale>
               </View>)}
-
-            {(search ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                quickFilter !== 'all') && (<Text style={styles.resultCount}>
-                {filteredLogs.length === logs.length
-                    ? `${logs.length} requests`
-                    : `${filteredLogs.length} of ${logs.length} filtered requests`}
-              </Text>)}
           </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
                 methodFilters.size > 0 ||
@@ -857,28 +534,6 @@ const NetworkTab = React.memo(() => {
             styles.listContent,
             filteredLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
-      
-      <TouchableScale onPress={() => {
-            try {
-                apisListRef.current?.scrollToOffset({
-                    offset: 0,
-                    animated: true,
-                });
-            }
-            catch {
-                try {
-                    apisListRef.current?.scrollToIndex({
-                        index: 0,
-                        animated: true,
-                    });
-                }
-                catch { }
-            }
-        }} hitSlop={12} style={styles.scrollTopBtn}>
-        <View style={{ transform: [{ rotate: '180deg' }] }}>
-          <ChevronIcon color={AppColors.white} size={18}/>
-        </View>
-      </TouchableScale>
 
       
       <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>

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

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