react-native-inapp-inspector 2.5.9 → 2.5.11

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

@@ -1,6 +1,6 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,r,t,a){a===void 0&&(a=t);var i=Object.getOwnPropertyDescriptor(r,t);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(l,a,i)}):(function(l,r,t,a){a===void 0&&(a=t),l[a]=r[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,r){Object.defineProperty(l,"default",{enumerable:!0,value:r})}):function(l,r){l.default=r}),__importStar=this&&this.__importStar||(function(){var l=function(r){return l=Object.getOwnPropertyNames||function(t){var a=[];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(a[a.length]=i);return a},l(r)};return function(r){if(r&&r.__esModule)return r;var t={};if(r!=null)for(var a=l(r),i=0;i<a.length;i++)a[i]!=="default"&&__createBinding(t,r,a[i]);return __setModuleDefault(t,r),t}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:l,loadMoreSection:r,search:t,setSearch:a,setSearchScope:i,quickFilter:V,setQuickFilter:q,handleDelete:J,isGroupByPageEnabled:u,setIsGroupByPageEnabled:Y,selectedLogs:v,sortOrder:Z,setSortOrder:x,statusFilters:p,setStatusFilters:m,methodFilters:f,setMethodFilters:S,latencyFilter:h,setLatencyFilter:z,protocolFilter:y,setProtocolFilter:F,networkSortBy:b,setNetworkSortBy:I,filteredLogs:w,logs:T,toggleSectionFilter:E,toggleSectionCollapse:N,minStart:$,totalRange:H,newLogIds:j,toggleSelect:W,setSelected:G,maxNetworkLogs:B}=(0,InspectorContext_1.useInspector)(),{t:L}=(0,i18n_1.useTranslation)(),ee=(0,react_1.useRef)(null),[te,Q]=react_1.default.useState(!1),[K,U]=react_1.default.useState(!1),[R,X]=react_1.default.useState(B||50);react_1.default.useEffect(()=>{X(B||50)},[t,V,B]);const M=(0,react_1.useMemo)(()=>u?l:l.slice(0,R),[u,l,R]),oe=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),C=(0,react_1.useMemo)(()=>p.size>0&&!p.has("all")||f.size>0&&!f.has("all")||h!=="all"||y!=="all"||b!=="time_desc",[p,f,h,y,b]),re=(0,react_1.useMemo)(()=>{let e=0;return p.size>0&&!p.has("all")&&(e+=p.size),f.size>0&&!f.has("all")&&(e+=f.size),h!=="all"&&e++,y!=="all"&&e++,b!=="time_desc"&&e++,e},[p,f,h,y,b]),le=(0,react_1.useMemo)(()=>({statusCodes:p.size>0?new Set(p):new Set(["all"]),methods:f.size>0?new Set(f):new Set(["all"]),latency:h,protocol:y,sortBy:b}),[p,f,h,y,b]),ae=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?m(new Set):m(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?S(new Set):S(new Set([...e.methods].map(n=>n))),z(e.latency||"all"),F(e.protocol||"all"),I(e.sortBy||"time_desc"),e.sortBy==="time_asc"?x("oldest"):x("newest")},[m,S,z,F,I,x]),g=(0,react_1.useMemo)(()=>{let e=0,n=0,s=0,c=0,A=0,k=0;return T.forEach(d=>{const o=typeof d.status=="number"?d.status:parseInt(String(d.status),10);d.status===0||d.status==null||!isNaN(o)&&o>=400?e++:!isNaN(o)&&o>=200&&o<400&&n++,(d.duration||0)>=500&&s++;const O=(d.method||"").toUpperCase();O==="POST"&&c++,O==="GET"&&A++;const _=(d.url||"").toLowerCase(),P=(d.client||"").toLowerCase();(_.includes("graphql")||P.includes("graphql")||P.includes("apollo"))&&k++}),{all:T.length,errors:e,success:n,slow:s,post:c,get:A,graphql:k}},[T]),ie=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:g.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:g.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:g.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:g.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:g.post,color:constants_1.METHOD_COLORS.POST||AppColors_1.AppColors.blue500},{id:"GET",label:"GET",count:g.get,color:constants_1.METHOD_COLORS.GET||AppColors_1.AppColors.emerald500},{id:"graphql",label:"GraphQL",count:g.graphql,color:AppColors_1.AppColors.graphqlPink}],[g]),ne=(0,react_1.useCallback)(({item:e,index:n})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={n}distance={8}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,r,t,a){a===void 0&&(a=t);var i=Object.getOwnPropertyDescriptor(r,t);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(l,a,i)}):(function(l,r,t,a){a===void 0&&(a=t),l[a]=r[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,r){Object.defineProperty(l,"default",{enumerable:!0,value:r})}):function(l,r){l.default=r}),__importStar=this&&this.__importStar||(function(){var l=function(r){return l=Object.getOwnPropertyNames||function(t){var a=[];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(a[a.length]=i);return a},l(r)};return function(r){if(r&&r.__esModule)return r;var t={};if(r!=null)for(var a=l(r),i=0;i<a.length;i++)a[i]!=="default"&&__createBinding(t,r,a[i]);return __setModuleDefault(t,r),t}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),DeveloperSponsorCard_1=require("./DeveloperSponsorCard"),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:l,loadMoreSection:r,search:t,setSearch:a,setSearchScope:i,quickFilter:V,setQuickFilter:O,handleDelete:J,isGroupByPageEnabled:u,setIsGroupByPageEnabled:Y,selectedLogs:v,sortOrder:Z,setSortOrder:x,statusFilters:p,setStatusFilters:m,methodFilters:f,setMethodFilters:S,latencyFilter:h,setLatencyFilter:z,protocolFilter:y,setProtocolFilter:F,networkSortBy:b,setNetworkSortBy:I,filteredLogs:w,logs:T,toggleSectionFilter:E,toggleSectionCollapse:N,minStart:$,totalRange:H,newLogIds:j,toggleSelect:W,setSelected:G,maxNetworkLogs:P}=(0,InspectorContext_1.useInspector)(),{t:L}=(0,i18n_1.useTranslation)(),ee=(0,react_1.useRef)(null),[te,Q]=react_1.default.useState(!1),[K,U]=react_1.default.useState(!1),[R,X]=react_1.default.useState(P||50);react_1.default.useEffect(()=>{X(P||50)},[t,V,P]);const M=(0,react_1.useMemo)(()=>u?l:l.slice(0,R),[u,l,R]),oe=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),C=(0,react_1.useMemo)(()=>p.size>0&&!p.has("all")||f.size>0&&!f.has("all")||h!=="all"||y!=="all"||b!=="time_desc",[p,f,h,y,b]),re=(0,react_1.useMemo)(()=>{let e=0;return p.size>0&&!p.has("all")&&(e+=p.size),f.size>0&&!f.has("all")&&(e+=f.size),h!=="all"&&e++,y!=="all"&&e++,b!=="time_desc"&&e++,e},[p,f,h,y,b]),le=(0,react_1.useMemo)(()=>({statusCodes:p.size>0?new Set(p):new Set(["all"]),methods:f.size>0?new Set(f):new Set(["all"]),latency:h,protocol:y,sortBy:b}),[p,f,h,y,b]),ae=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?m(new Set):m(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?S(new Set):S(new Set([...e.methods].map(n=>n))),z(e.latency||"all"),F(e.protocol||"all"),I(e.sortBy||"time_desc"),e.sortBy==="time_asc"?x("oldest"):x("newest")},[m,S,z,F,I,x]),g=(0,react_1.useMemo)(()=>{let e=0,n=0,s=0,c=0,A=0,k=0;return T.forEach(d=>{const o=typeof d.status=="number"?d.status:parseInt(String(d.status),10);d.status===0||d.status==null||!isNaN(o)&&o>=400?e++:!isNaN(o)&&o>=200&&o<400&&n++,(d.duration||0)>=500&&s++;const B=(d.method||"").toUpperCase();B==="POST"&&c++,B==="GET"&&A++;const _=(d.url||"").toLowerCase(),q=(d.client||"").toLowerCase();(_.includes("graphql")||q.includes("graphql")||q.includes("apollo"))&&k++}),{all:T.length,errors:e,success:n,slow:s,post:c,get:A,graphql:k}},[T]),ie=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:g.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:g.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:g.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:g.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:g.post,color:constants_1.METHOD_COLORS.POST||AppColors_1.AppColors.blue500},{id:"GET",label:"GET",count:g.get,color:constants_1.METHOD_COLORS.GET||AppColors_1.AppColors.emerald500},{id:"graphql",label:"GraphQL",count:g.graphql,color:AppColors_1.AppColors.graphqlPink}],[g]),ne=(0,react_1.useCallback)(({item:e,index:n})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={n}distance={8}>
             <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={E}isCollapsed={e.isCollapsed}onToggleCollapse={N}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:d,color:o,remainingCount:O,totalCount:_,loadedCount:P,loadMoreStep:D,hasMore:se}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
+          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:d,color:o,remainingCount:B,totalCount:_,loadedCount:q,loadMoreStep:D,hasMore:se}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
             <react_native_1.View style={styles_1.default.treeLines}>
               <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:o},styles_1.default.modernTreeLineLast]}/>
             </react_native_1.View>
@@ -15,14 +15,14 @@
                         {L("footer.loadMoreRequests",{count:D,defaultValue:`Load ${D} More Requests`})}
                       </react_native_1.Text>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1}}>
-                        Showing {P} of {_} requests
+                        Showing {q} of {_} requests
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   <react_native_1.View style={{flexDirection:"row",alignItems:"center",backgroundColor:`${o}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${o}40`,gap:3}}>
                     <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:o}}>
-                      +{O}
+                      +{B}
                     </react_native_1.Text>
                     <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:o}}>
                       more
@@ -97,7 +97,7 @@
             
             <react_native_1.View style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {ie.map(e=>{const n=V===e.id,s=e.color||AppColors_1.AppColors.purple,c=n?AppColors_1.AppColors.white:s;return<TouchableScale_1.default testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{q(n?"all":e.id)}}>
+                {ie.map(e=>{const n=V===e.id,s=e.color||AppColors_1.AppColors.purple,c=n?AppColors_1.AppColors.white:s;return<TouchableScale_1.default testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{O(n?"all":e.id)}}>
                       <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:n?s:`${s}12`,borderWidth:1,borderColor:n?s:`${s}30`,gap:5}}>
                         {e.id==="all"&&<NetworkIcons_1.LayersIcon size={11}color={c}/>}
                         {e.id==="errors"&&<NetworkIcons_1.CircleXIcon size={11}color={c}/>}
@@ -138,7 +138,7 @@
                 <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
                   Showing {w.length} of {T.length} requests
                 </react_native_1.Text>
-                <TouchableScale_1.default onPress={()=>{a(""),q("all"),m(new Set),S(new Set),z("all"),F("all"),I("time_desc"),i("all")}}>
+                <TouchableScale_1.default onPress={()=>{a(""),O("all"),m(new Set),S(new Set),z("all"),F("all"),I("time_desc"),i("all")}}>
                   <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.errorColor}}>
                     Clear All Filters
                   </react_native_1.Text>
@@ -146,7 +146,10 @@
               </react_native_1.View>}
           </react_native_1.View>
 
-        <react_native_1.FlatList ref={ee}data={M}keyExtractor={oe}renderItem={ne}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||C||V!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),m(new Set),S(new Set),z("all"),F("all"),I("time_desc"),q("all"),i("all")}}/>}ListFooterComponent={l.length>0?<EndOfListFooter_1.default count={u?w.length:Math.min(R,w.length)}totalCount={w.length}label="requests"hasMore={!u&&w.length>R}loadMoreStep={30}onLoadMore={()=>X(e=>e+30)}/>:null}style={{flex:1}}contentContainerStyle={[styles_1.default.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <react_native_1.FlatList ref={ee}data={M}keyExtractor={oe}renderItem={ne}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||C||V!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),m(new Set),S(new Set),z("all"),F("all"),I("time_desc"),O("all"),i("all")}}/>}ListFooterComponent={l.length>0?<react_native_1.View style={{paddingBottom:24}}>
+              <DeveloperSponsorCard_1.DeveloperSponsorCard containerStyle={{marginHorizontal:10,marginTop:10,marginBottom:10}}/>
+              <EndOfListFooter_1.default count={u?w.length:Math.min(R,w.length)}totalCount={w.length}label="requests"hasMore={!u&&w.length>R}loadMoreStep={30}onLoadMore={()=>X(e=>e+30)}/>
+            </react_native_1.View>:null}style={{flex:1}}contentContainerStyle={[styles_1.default.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
       <NetworkFilterModal_1.default visible={te}onClose={()=>Q(!1)}filters={le}onApply={ae}searchQuery={t}/>