react-native-inapp-inspector 2.4.1 → 2.5.0

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

@@ -1,40 +1,40 @@
-import X,{useCallback as F,useState as Y,useMemo as Z,useRef as Fe}from"react";import{FlatList as Pe,Platform as Re,Pressable as Ve,ScrollView as Be,Text as N,TextInput as Me,TouchableOpacity as Ce,View as C}from"react-native";import{animateNextLayout as _e,useInspector as Ne}from"./InspectorContext";import Oe from"../AnalyticsEventCard";import $e from"./AnalyticsFilterModal";import De from"../EndOfListFooter";import He from"../EmptyState";import I from"../../styles";import{AppColors as r}from"../../styles/AppColors";import{AppFonts as O}from"../../styles/AppFonts";import{useTranslation as We}from"../../i18n";import Ge from"../TouchableScale";import{getEventCategory as je}from"../../helpers";import{LayersIcon as Je,SearchIcon as Qe,ClearIcon as Ke,TrashIcon as Ue,FilterIcon as Xe,CartIcon as Ye,GlobeIcon as Ze,BoltIcon as et,SparkleIcon as tt}from"../NetworkIcons";const Se=10,ot=X.memo(()=>{const{t:$}=We(),{analyticsEvents:D,filteredAnalyticsEvents:a,analyticsSearch:S,setAnalyticsSearch:P,analyticsFilters:A,setAnalyticsFilters:H,handleDelete:we,selectedEvent:Ie,setSelectedEvent:W,newEventIds:G,logRouteMapRef:j,isAnalyticsLayoutReady:Te,setIsAnalyticsLayoutReady:ve,isAnalyticsFilterApplied:R,maxAnalyticsEventsLimit:V}=Ne(),xe=V||100,J=Fe(null),[Le,Q]=Y(!1),[q,K]=Y(xe);X.useEffect(()=>{K(V||100),J.current?.scrollToOffset({offset:0,animated:!1})},[S,A,V]);const B=Z(()=>a.slice(0,q),[a,q]),v=Z(()=>{let e=0,o=0,t=0,w=0;for(const E of D){const k=je(E.name),T=E.count||1;k==="ecommerce"?e+=T:k==="page_view"?o+=T:k==="system"?t+=T:w+=T}const L=e+o+t+w;return{ecommerce:e,page_view:o,system:t,custom:w,totalCount:L}},[D]),ke=F(e=>{_e(),H(o=>{if(e==="all")return{...o,categories:new Set(["all"])};const t=new Set(o.categories);if(t.has("all"))t.delete("all"),t.add(e);else if(t.has(e))t.delete(e),t.size===0&&t.add("all");else if(t.add(e),t.has("ecommerce")&&t.has("page_view")&&t.has("system")&&t.has("custom"))return{...o,categories:new Set(["all"])};return{...o,categories:t}})},[H]),Ae=F((e,o)=>e?.id?.toString()??o.toString(),[]),Ee=F(({item:e,index:o})=>{const t=a[o+1],w=a[o-1],L=t?e.timestamp-t.timestamp:void 0,E=Math.floor(e.timestamp/6e4),k=w?Math.floor(w.timestamp/6e4):-1,T=o===0||E!==k;return<Oe event={e}onPress={()=>{W(e)}}isNew={G.has(e.id)}searchStr={S}isFirst={o===0}isLast={o===a.length-1}msSincePrev={L}showTimestamp={T}computedScreenName={(()=>{if(!e)return"";const z=e.screenName||e.screenClass||e.pageTitle||e.pageLocation||e.params?.firebase_screen||e.params?.screen_name||e.params?.firebase_screen_class||e.params?.screen_class;let M=typeof z=="string"?z:z?JSON.stringify(z):"";const _=j.current.get(e.id+1e6);if(!M&&_&&_.path!=="Navigators"){const U=_.path.split(" \u2794 ");M=U[U.length-1]}return M})()}/>},[a,S,G,W,j]),ze=F((e,o)=>({length:86,offset:86*o,index:o}),[]);return<>
+import X,{useCallback as F,useState as Y,useMemo as Z,useRef as Fe}from"react";import{FlatList as Pe,Pressable as Re,ScrollView as Ve,Text as N,TextInput as Be,TouchableOpacity as Ce,View as C}from"react-native";import{animateNextLayout as Me,useInspector as _e}from"./InspectorContext";import Ne from"../AnalyticsEventCard";import Oe from"./AnalyticsFilterModal";import $e from"../EndOfListFooter";import De from"../EmptyState";import T from"../../styles";import{AppColors as r}from"../../styles/AppColors";import{AppFonts as O}from"../../styles/AppFonts";import{useTranslation as He}from"../../i18n";import We from"../TouchableScale";import{getEventCategory as Ge}from"../../helpers";import{LayersIcon as je,SearchIcon as Je,ClearIcon as Qe,TrashIcon as Ke,FilterIcon as Ue,CartIcon as Xe,GlobeIcon as Ye,BoltIcon as Ze,SparkleIcon as et}from"../NetworkIcons";const Se=10,tt=X.memo(()=>{const{t:$}=He(),{analyticsEvents:D,filteredAnalyticsEvents:S,analyticsSearch:w,setAnalyticsSearch:P,analyticsFilters:A,setAnalyticsFilters:H,handleDelete:we,selectedEvent:Ie,setSelectedEvent:W,newEventIds:G,logRouteMapRef:j,isAnalyticsLayoutReady:Te,setIsAnalyticsLayoutReady:ve,isAnalyticsFilterApplied:R,maxAnalyticsEventsLimit:V}=_e(),xe=V||100,J=Fe(null),[Le,Q]=Y(!1),[q,K]=Y(xe);X.useEffect(()=>{K(V||100),J.current?.scrollToOffset({offset:0,animated:!1})},[w,A,V]);const B=Z(()=>S.slice(0,q),[S,q]),x=Z(()=>{let e=0,o=0,t=0,I=0;for(const E of D){const k=Ge(E.name),v=E.count||1;k==="ecommerce"?e+=v:k==="page_view"?o+=v:k==="system"?t+=v:I+=v}const L=e+o+t+I;return{ecommerce:e,page_view:o,system:t,custom:I,totalCount:L}},[D]),ke=F(e=>{Me(),H(o=>{if(e==="all")return{...o,categories:new Set(["all"])};const t=new Set(o.categories);if(t.has("all"))t.delete("all"),t.add(e);else if(t.has(e))t.delete(e),t.size===0&&t.add("all");else if(t.add(e),t.has("ecommerce")&&t.has("page_view")&&t.has("system")&&t.has("custom"))return{...o,categories:new Set(["all"])};return{...o,categories:t}})},[H]),Ae=F((e,o)=>e?.id?.toString()??o.toString(),[]),Ee=F(({item:e,index:o})=>{const t=S[o+1],I=S[o-1],L=t?e.timestamp-t.timestamp:void 0,E=Math.floor(e.timestamp/6e4),k=I?Math.floor(I.timestamp/6e4):-1,v=o===0||E!==k;return<Ne event={e}onPress={()=>{W(e)}}isNew={G.has(e.id)}searchStr={w}isFirst={o===0}isLast={o===S.length-1}msSincePrev={L}showTimestamp={v}computedScreenName={(()=>{if(!e)return"";const z=e.screenName||e.screenClass||e.pageTitle||e.pageLocation||e.params?.firebase_screen||e.params?.screen_name||e.params?.firebase_screen_class||e.params?.screen_class;let M=typeof z=="string"?z:z?JSON.stringify(z):"";const _=j.current.get(e.id+1e6);if(!M&&_&&_.path!=="Navigators"){const U=_.path.split(" \u2794 ");M=U[U.length-1]}return M})()}/>},[S,w,G,W,j]),ze=F((e,o)=>({length:86,offset:86*o,index:o}),[]);return<>
       
       {Ie==null&&<C style={{backgroundColor:r.white,borderBottomWidth:1,borderBottomColor:r.dividerColor,paddingBottom:6}}>
-          <C style={[I.toolbarRow,{marginTop:12,marginBottom:8}]}>
-            <C style={I.searchContainer}>
-              <Qe color={r.grayTextWeak}size={16}/>
-              <Me placeholder={$("analytics.searchPlaceholder","Search events...")}placeholderTextColor={r.grayTextWeak}value={S}onChangeText={P}style={I.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-              {S.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+          <C style={[T.toolbarRow,{marginTop:12,marginBottom:8}]}>
+            <C style={T.searchContainer}>
+              <Je color={r.grayTextWeak}size={16}/>
+              <Be placeholder={$("analytics.searchPlaceholder","Search events...")}placeholderTextColor={r.grayTextWeak}value={w}onChangeText={P}style={T.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              {w.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
                   <C style={{backgroundColor:`${r.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
                     <N style={{color:r.purple,fontSize:9.5,fontFamily:O.interBold}}>
-                      {a.length}
+                      {S.length}
                     </N>
                   </C>
-                  <Ve onPress={()=>P("")}hitSlop={10}style={I.clearBtn}>
-                    <Ke color={r.grayTextWeak}size={13}/>
-                  </Ve>
+                  <Re onPress={()=>P("")}hitSlop={10}style={T.clearBtn}>
+                    <Qe color={r.grayTextWeak}size={13}/>
+                  </Re>
                 </C>}
             </C>
-            <C style={I.toolbarRight}>
+            <C style={T.toolbarRight}>
               
-              <Ce style={[I.toolbarBtn,R&&{borderColor:`${r.brandPurple}60`,backgroundColor:`${r.brandPurple}15`}]}onPress={()=>Q(!0)}hitSlop={6}>
-                <Xe color={R?r.brandPurple:r.grayTextStrong}size={15}/>
+              <Ce style={[T.toolbarBtn,R&&{borderColor:`${r.brandPurple}60`,backgroundColor:`${r.brandPurple}15`}]}onPress={()=>Q(!0)}hitSlop={6}>
+                <Ue color={R?r.brandPurple:r.grayTextStrong}size={15}/>
                 {R&&<C style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:r.darkOrange,borderWidth:1,borderColor:r.white}}/>}
               </Ce>
 
-              <Ce style={[I.toolbarBtn,{borderColor:`${r.errorColor}38`,backgroundColor:`${r.errorColor}0F`}]}onPress={we}hitSlop={6}>
-                <Ue color={r.errorColor}size={15}/>
+              <Ce style={[T.toolbarBtn,{borderColor:`${r.errorColor}38`,backgroundColor:`${r.errorColor}0F`}]}onPress={we}hitSlop={6}>
+                <Ke color={r.errorColor}size={15}/>
               </Ce>
             </C>
           </C>
 
           
-          <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
-            <Be horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-              {[{id:"all",label:$("common.all","All"),count:v.totalCount,color:r.purple,Icon:Je},{id:"ecommerce",label:"Ecommerce",count:v.ecommerce,color:r.amber600,Icon:Ye},{id:"page_view",label:"Screens",count:v.page_view,color:r.sky600,Icon:Ze},{id:"system",label:"System",count:v.system,color:r.violet600,Icon:et},{id:"custom",label:"Custom",count:v.custom,color:r.teal600,Icon:tt}].map(e=>{const o=e.id==="all"?A.categories.has("all"):!A.categories.has("all")&&A.categories.has(e.id),t=e.color||r.purple,w=o?r.white:t,L=e.Icon;return<Ge key={e.id}onPress={()=>ke(e.id)}>
+          <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
+            <Ve horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+              {[{id:"all",label:$("common.all","All"),count:x.totalCount,color:r.purple,Icon:je},{id:"ecommerce",label:"Ecommerce",count:x.ecommerce,color:r.amber600,Icon:Xe},{id:"page_view",label:"Screens",count:x.page_view,color:r.sky600,Icon:Ye},{id:"system",label:"System",count:x.system,color:r.violet600,Icon:Ze},{id:"custom",label:"Custom",count:x.custom,color:r.teal600,Icon:et}].map(e=>{const o=e.id==="all"?A.categories.has("all"):!A.categories.has("all")&&A.categories.has(e.id),t=e.color||r.purple,I=o?r.white:t,L=e.Icon;return<We key={e.id}onPress={()=>ke(e.id)}>
                     <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:o?t:`${t}12`,borderWidth:1,borderColor:o?t:`${t}30`,gap:5}}>
-                      <L size={11}color={w}/>
+                      <L size={11}color={I}/>
                       <N style={{fontFamily:O.interBold,fontSize:10.5,color:o?r.white:r.primaryBlack}}>
                         {e.label}
                       </N>
@@ -44,17 +44,17 @@ import X,{useCallback as F,useState as Y,useMemo as Z,useRef as Fe}from"react";i
                         </N>
                       </C>
                     </C>
-                  </Ge>})}
-            </Be>
+                  </We>})}
+            </Ve>
           </C>
         </C>}
 
       
-      <$e visible={Le}onClose={()=>Q(!1)}/>
+      <Oe visible={Le}onClose={()=>Q(!1)}/>
 
       <C style={{flex:1}}onLayout={()=>ve(!0)}>
         {Te?<>
-            <Pe ref={J}data={B}keyExtractor={Ae}renderItem={Ee}getItemLayout={ze}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={Re.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<He isSearch={S.length>0}searchQuery={S}customTitle={S.length>0?"No matching analytics events":"No analytics events yet"}customSub={S.length>0?`No events matched "${S}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>P("")}/>}ListFooterComponent={a.length>0?<De count={B.length}totalCount={a.length}label="events"loadMoreStep={Se}hasMore={B.length<a.length}onLoadMore={()=>K(e=>e+Se)}/>:null}contentContainerStyle={[I.listContent,a.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+            <Pe ref={J}data={B}keyExtractor={Ae}renderItem={Ee}getItemLayout={ze}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<De isSearch={w.length>0}searchQuery={w}customTitle={w.length>0?"No matching analytics events":"No analytics events yet"}customSub={w.length>0?`No events matched "${w}"`:"Call setupAnalyticsLogger(analytics()) at app start."}onClearSearch={()=>P("")}/>}ListFooterComponent={S.length>0?<$e count={B.length}totalCount={S.length}label="events"loadMoreStep={Se}hasMore={B.length<S.length}onLoadMore={()=>K(e=>e+Se)}/>:null}style={{flex:1}}contentContainerStyle={[T.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
           </>:null}
       </C>
-    </>});export default ot;
+    </>});export default tt;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ConfirmationModalProps {
+    visible: boolean;
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    isDestructive?: boolean;
+    icon?: 'trash' | 'alert' | 'reset' | 'info';
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;

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

@@ -0,0 +1,30 @@
+import"react";import{View as C,Text as B,StyleSheet as R,Pressable as J,Platform as I}from"react-native";import P from"../TouchableScale";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{TrashIcon as K,AlertTriangleIcon as Q,ResetIcon as U,InfoCircleIcon as X,CloseWhite as Y}from"../NetworkIcons";import{triggerNativeHaptic as j}from"../../native/NativeInspector";import{useTranslation as Z}from"../../i18n";export const ConfirmationModal=({visible:A,title:H,message:V,confirmText:$,cancelText:L,isDestructive:o=!0,icon:T="trash",onConfirm:D,onCancel:M})=>{const{t:F}=Z();if(!A)return null;const O=$||F("common.confirm","Confirm"),W=L||F("common.cancel","Cancel"),N=()=>{j(o?"heavy":"medium"),D()},S=()=>{j("light"),M()},q=()=>{switch(T){case"trash":return<K size={24}color={e.red500}/>;case"alert":return<Q size={24}color={e.amber500}/>;case"reset":return<U size={24}color={e.purple}/>;default:return<X size={24}color={e.purple}/>}},E=o?e.red100:T==="alert"?e.amber100:e.purple50,G=o?`${e.red500}4D`:T==="alert"?e.amber200:e.purple200;return<C style={[R.absoluteFill,t.overlay,{zIndex:999999,elevation:999}]}>
+      <J style={t.backdrop}onPress={S}/>
+
+      <C style={t.card}>
+        
+        <P onPress={S}hitSlop={8}style={t.cornerCloseBtn}>
+          <Y size={11}color={e.grayTextWeak}/>
+        </P>
+
+        
+        <C style={[t.iconBadge,{backgroundColor:E,borderColor:G}]}>
+          {q()}
+        </C>
+
+        
+        <B style={t.title}>{H}</B>
+        <B style={t.message}>{V}</B>
+
+        
+        <C style={t.buttonRow}>
+          <P accessible={!0}accessibilityRole="button"accessibilityLabel={W}onPress={S}style={t.cancelBtn}>
+            <B style={t.cancelBtnText}>{W}</B>
+          </P>
+
+          <P accessible={!0}accessibilityRole="button"accessibilityLabel={O}onPress={N}style={[t.confirmBtn,o?t.confirmBtnDestructive:t.confirmBtnPrimary]}>
+            <B style={t.confirmBtnText}>{O}</B>
+          </P>
+        </C>
+      </C>
+    </C>};const t=R.create({overlay:{flex:1,backgroundColor:`${e.slate900}A6`,justifyContent:"center",alignItems:"center",paddingHorizontal:24},backdrop:{...R.absoluteFillObject},card:{width:"100%",maxWidth:340,backgroundColor:e.white,borderRadius:22,paddingTop:24,paddingBottom:18,paddingHorizontal:20,alignItems:"center",borderWidth:1,borderColor:`${e.white}CC`,...I.select({ios:{shadowColor:e.slate900,shadowOffset:{width:0,height:12},shadowOpacity:.28,shadowRadius:24},android:{elevation:12}})},cornerCloseBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.graySurface,alignItems:"center",justifyContent:"center"},iconBadge:{width:54,height:54,borderRadius:27,borderWidth:1.5,alignItems:"center",justifyContent:"center",marginBottom:14},title:{fontFamily:x.interBold,fontSize:17,color:e.slate900,textAlign:"center",marginBottom:8,letterSpacing:-.2},message:{fontFamily:x.interRegular,fontSize:13,color:e.grayTextWeak,textAlign:"center",lineHeight:19,paddingHorizontal:8,marginBottom:22},buttonRow:{flexDirection:"row",alignItems:"center",gap:10,width:"100%"},cancelBtn:{flex:1,height:44,borderRadius:12,backgroundColor:e.graySurface,borderWidth:1,borderColor:e.grayBorderSecondary,alignItems:"center",justifyContent:"center"},cancelBtnText:{fontFamily:x.interSemiBold,fontSize:14,color:e.grayText},confirmBtn:{flex:1.15,height:44,borderRadius:12,alignItems:"center",justifyContent:"center"},confirmBtnDestructive:{backgroundColor:e.red500,...I.select({ios:{shadowColor:e.red500,shadowOffset:{width:0,height:4},shadowOpacity:.35,shadowRadius:8},android:{elevation:4}})},confirmBtnPrimary:{backgroundColor:e.purple,...I.select({ios:{shadowColor:e.purple,shadowOffset:{width:0,height:4},shadowOpacity:.35,shadowRadius:8},android:{elevation:4}})},confirmBtnText:{fontFamily:x.interBold,fontSize:14,color:e.white,letterSpacing:.2}});

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

@@ -1,71 +1,71 @@
-import F,{useCallback as $,useMemo as k,useRef as lo}from"react";import{FlatList as So,Platform as ho,Pressable as Co,ScrollView as _,Text as L,TextInput as To,View as S}from"react-native";import{useInspector as Io}from"./InspectorContext";import{useTranslation as xo}from"../../i18n";import H from"../TouchableScale";import Ao from"../AnimatedEntrance";import{ConsoleLogCard as Lo}from"../ConsoleLogCard";import Vo from"../EmptyState";import Eo from"../EndOfListFooter";import I from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{LogFilter as V}from"../../types";import{SearchIcon as Bo,ClearIcon as Fo,SortArrowIcon as Ho,TrashIcon as Po,LayersIcon as Ro,UserIcon as Oo,InfoCircleIcon as Wo,WarningTriangleIcon as $o,ErrorCircleIcon as Do,AnalyticsIcon as No}from"../NetworkIcons";const Q=10,Uo=F.memo(()=>{const{t:b}=xo(),{logSearch:h,setLogSearch:E,logSortOrder:Y,setLogSortOrder:K,handleDelete:X,logFilters:C,setLogFilters:P,logCounts:x,filteredConsoleLogs:w,visibleConsoleLogs:D,maxConsoleLogs:R}=Io(),j=R||100,N=lo(null),[U,G]=F.useState(j);F.useEffect(()=>{G(R||100),N.current?.scrollToOffset({offset:0,animated:!1})},[h,C,R]);const O=k(()=>w.slice(0,U),[w,U]),q=$(({item:o,index:t})=><Ao index={t}distance={8}>
-        <Lo item={o}searchStr={h}/>
-      </Ao>,[h]),J=$((o,t)=>({length:148,offset:148*t,index:t}),[]),Z=$((o,t)=>o?.id?.toString()??t.toString(),[]),oo=k(()=>{const o=D.length,t=w.length;if(C.has("all")||!Array.from(C).some(B=>B!=="all"))return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
-          <L style={{fontFamily:z.interMedium,fontSize:11,color:e.grayTextWeak,letterSpacing:.2}}>
-            {t===o?`Showing ${o} logs`:`Showing ${t} of ${o} logs`}
-          </L>
-        </S>;{const B=Array.from(C).filter(T=>T!=="all").map(T=>T==="user-log"?"Log":T==="analytics"?"Analytics":T.charAt(0).toUpperCase()+T.slice(1));return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
-          <L style={{fontFamily:z.interMedium,fontSize:11,color:e.grayTextWeak,letterSpacing:.2}}>
-            Filtered by {B.join(", ")} ({t} of {o} logs)
-          </L>
-        </S>}},[D.length,w.length,C]),[W,M]=F.useState(!1),eo=k(()=>["[AXIOS]","[API]","[GRAPHQL]","[REDUX]","[ANALYTICS]","[AUTH]","[NAV]","[STORAGE]","[PERF]","[WS]","[PUSH]","[PAYMENT]","[SYNC]","[BLE]","[LOCATION]","[TEST]","[DEBUG]"],[]),to=k(()=>[{id:V.All,label:b("common.all","All"),count:x.all?.split("/")?.[0]??"0",color:e.purple,Icon:Ro},{id:V.UserLog,label:b("console.log","Log"),count:x["user-log"]?.split("/")?.[0]??"0",color:e.teal600,Icon:Oo},{id:V.Info,label:b("console.info","Info"),count:x.info?.split("/")?.[0]??"0",color:e.sky600,Icon:Wo},{id:V.Warn,label:b("console.warning","Warn"),count:x.warn?.split("/")?.[0]??"0",color:e.amber600,Icon:$o},{id:V.Error,label:b("console.error","Error"),count:x.error?.split("/")?.[0]??"0",color:e.errorColor,Icon:Do},{id:V.Analytics,label:b("console.analytics","Analytics"),count:x.analytics?.split("/")?.[0]??"0",color:e.violet600,Icon:No}],[x,b]);return<S style={{flex:1}}>
-      <S style={{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingBottom:6}}>
-        <S style={[I.toolbarRow,{marginTop:12,marginBottom:8}]}>
-          <S style={[I.searchContainer,W&&{borderColor:e.purple,borderWidth:1.5}]}>
-            <Bo color={W?e.purple:e.grayTextWeak}size={16}/>
-            <To placeholder={b("console.searchPlaceholder")}placeholderTextColor={e.grayTextWeak}value={h}onChangeText={E}onFocus={()=>M(!0)}onBlur={()=>M(!1)}style={I.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-            {h.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
-                <S style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:2}}>
-                  <L style={{color:e.purple,fontSize:10,fontFamily:z.interBold}}>
+import F,{useCallback as k,useMemo as P,useRef as ne}from"react";import{FlatList as Se,Pressable as Ce,ScrollView as Q,Text as A,TextInput as Ie,View as S}from"react-native";import{useInspector as Te}from"./InspectorContext";import{useTranslation as xe}from"../../i18n";import H from"../TouchableScale";import Le from"../AnimatedEntrance";import{ConsoleLogCard as Ae}from"../ConsoleLogCard";import Ve from"../EmptyState";import Ee from"../EndOfListFooter";import T from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{LogFilter as V}from"../../types";import{SearchIcon as Be,ClearIcon as Fe,SortArrowIcon as Pe,TrashIcon as He,LayersIcon as Re,UserIcon as We,InfoCircleIcon as $e,WarningTriangleIcon as Oe,ErrorCircleIcon as De,AnalyticsIcon as Ne}from"../NetworkIcons";const Y=10,Ue=F.memo(()=>{const{t:C}=xe(),{logSearch:y,setLogSearch:E,logSortOrder:K,setLogSortOrder:X,handleDelete:j,logFilters:h,setLogFilters:R,logCounts:x,filteredConsoleLogs:w,visibleConsoleLogs:D,maxConsoleLogs:W,setSelectedLog:N}=Te(),q=W||100,U=ne(null),[G,M]=F.useState(q);F.useEffect(()=>{M(W||100),U.current?.scrollToOffset({offset:0,animated:!1})},[y,h,W]);const $=P(()=>w.slice(0,G),[w,G]),v=k(e=>{N(e)},[N]),J=k(({item:e,index:t})=><Le index={t}distance={8}>
+        <Ae item={e}searchStr={y}onPress={v}/>
+      </Le>,[y,v]),Z=k((e,t)=>({length:148,offset:148*t,index:t}),[]),ee=k((e,t)=>e?.id?.toString()??t.toString(),[]),oe=P(()=>{const e=D.length,t=w.length;if(h.has("all")||!Array.from(h).some(B=>B!=="all"))return<S style={{paddingHorizontal:8,paddingTop:8,paddingBottom:3}}>
+          <A style={{fontFamily:z.interMedium,fontSize:11,color:o.grayTextWeak,letterSpacing:.2}}>
+            {t===e?`Showing ${e} logs`:`Showing ${t} of ${e} logs`}
+          </A>
+        </S>;{const B=Array.from(h).filter(I=>I!=="all").map(I=>I==="user-log"?"Log":I==="analytics"?"Analytics":I.charAt(0).toUpperCase()+I.slice(1));return<S style={{paddingHorizontal:12,paddingTop:8,paddingBottom:3}}>
+          <A style={{fontFamily:z.interMedium,fontSize:11,color:o.grayTextWeak,letterSpacing:.2}}>
+            Filtered by {B.join(", ")} ({t} of {e} logs)
+          </A>
+        </S>}},[D.length,w.length,h]),[O,_]=F.useState(!1),te=P(()=>["[AXIOS]","[API]","[GRAPHQL]","[REDUX]","[ANALYTICS]","[AUTH]","[NAV]","[STORAGE]","[PERF]","[WS]","[PUSH]","[PAYMENT]","[SYNC]","[BLE]","[LOCATION]","[TEST]","[DEBUG]"],[]),re=P(()=>[{id:V.All,label:C("common.all","All"),count:x.all?.split("/")?.[0]??"0",color:o.purple,Icon:Re},{id:V.UserLog,label:C("console.log","Log"),count:x["user-log"]?.split("/")?.[0]??"0",color:o.teal600,Icon:We},{id:V.Info,label:C("console.info","Info"),count:x.info?.split("/")?.[0]??"0",color:o.sky600,Icon:$e},{id:V.Warn,label:C("console.warning","Warn"),count:x.warn?.split("/")?.[0]??"0",color:o.amber600,Icon:Oe},{id:V.Error,label:C("console.error","Error"),count:x.error?.split("/")?.[0]??"0",color:o.errorColor,Icon:De},{id:V.Analytics,label:C("console.analytics","Analytics"),count:x.analytics?.split("/")?.[0]??"0",color:o.violet600,Icon:Ne}],[x,C]);return<S style={{flex:1}}>
+      <S style={{backgroundColor:o.white,borderBottomWidth:1,borderBottomColor:o.dividerColor,paddingBottom:6}}>
+        <S style={[T.toolbarRow,{marginTop:12,marginBottom:8}]}>
+          <S style={[T.searchContainer,O&&{borderColor:o.purple,borderWidth:1.5}]}>
+            <Be color={O?o.purple:o.grayTextWeak}size={16}/>
+            <Ie placeholder={C("console.searchPlaceholder")}placeholderTextColor={o.grayTextWeak}value={y}onChangeText={E}onFocus={()=>_(!0)}onBlur={()=>_(!1)}style={T.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {y.length>0&&<S style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                <S style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:2}}>
+                  <A style={{color:o.purple,fontSize:10,fontFamily:z.interBold}}>
                     {w.length}
-                  </L>
+                  </A>
                 </S>
-                <Co onPress={()=>E("")}hitSlop={10}style={I.clearBtn}>
-                  <Fo color={e.grayTextWeak}size={14}/>
-                </Co>
+                <Ce onPress={()=>E("")}hitSlop={10}style={T.clearBtn}>
+                  <Fe color={o.grayTextWeak}size={14}/>
+                </Ce>
               </S>}
           </S>
 
-          <S style={I.toolbarRight}>
-            <H style={I.toolbarBtn}onPress={()=>K(o=>o==="newest"?"oldest":"newest")}hitSlop={10}>
-              <Ho color={e.grayTextStrong}size={18}direction={Y==="newest"?"down":"up"}/>
+          <S style={T.toolbarRight}>
+            <H style={T.toolbarBtn}onPress={()=>X(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+              <Pe color={o.grayTextStrong}size={18}direction={K==="newest"?"down":"up"}/>
             </H>
-            <H style={[I.toolbarBtn,{borderColor:`${e.errorColor}38`,backgroundColor:`${e.errorColor}0F`}]}onPress={X}hitSlop={6}>
-              <Po color={e.errorColor}size={15}/>
+            <H style={[T.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={j}hitSlop={6}>
+              <He color={o.errorColor}size={15}/>
             </H>
           </S>
         </S>
 
         
-        {(W||h.length>0)&&<_ horizontal showsHorizontalScrollIndicator={!1}style={{marginBottom:6,maxHeight:30}}contentContainerStyle={{paddingHorizontal:16,flexDirection:"row",alignItems:"center",gap:6}}>
-            {eo.map(o=>{const t=h.includes(o);return<H key={o}onPress={()=>{E(t?r=>r.replace(o,"").trim():r=>r?`${r} ${o}`.trim():o)}}>
-                  <S style={{paddingHorizontal:8,paddingVertical:3,borderRadius:6,backgroundColor:t?e.purple:`${e.purple}14`,borderWidth:1,borderColor:t?e.purple:`${e.purple}30`}}>
-                    <L style={{fontFamily:z.interBold,fontSize:10,color:t?e.white:e.purple}}>
-                      {o}
-                    </L>
+        {(O||y.length>0)&&<Q horizontal showsHorizontalScrollIndicator={!1}style={{marginBottom:6,maxHeight:30}}contentContainerStyle={{paddingHorizontal:8,flexDirection:"row",alignItems:"center",gap:6}}>
+            {te.map(e=>{const t=y.includes(e);return<H key={e}onPress={()=>{E(t?r=>r.replace(e,"").trim():r=>r?`${r} ${e}`.trim():e)}}>
+                  <S style={{paddingHorizontal:8,paddingVertical:3,borderRadius:6,backgroundColor:t?o.purple:`${o.purple}14`,borderWidth:1,borderColor:t?o.purple:`${o.purple}30`}}>
+                    <A style={{fontFamily:z.interBold,fontSize:10,color:t?o.white:o.purple}}>
+                      {e}
+                    </A>
                   </S>
                 </H>})}
-          </_>}
+          </Q>}
 
         
-        <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
-          <_ horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-            {to.map(o=>{const t=o.id==="all"?C.has("all"):C.has(o.id)&&!C.has("all"),r=o.color||e.purple,B=t?e.white:r,T=o.Icon;return<H key={o.id}onPress={()=>{o.id==="all"?P(new Set(["all"])):P(ro=>{const A=new Set(ro);return A.delete("all"),A.has(o.id)?A.delete(o.id):A.add(o.id),A.size===0&&A.add("all"),A})}}>
+        <S style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
+          <Q horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+            {re.map(e=>{const t=e.id==="all"?h.has("all"):h.has(e.id)&&!h.has("all"),r=e.color||o.purple,B=t?o.white:r,I=e.Icon;return<H key={e.id}onPress={()=>{e.id==="all"?R(new Set(["all"])):R(le=>{const L=new Set(le);return L.delete("all"),L.has(e.id)?L.delete(e.id):L.add(e.id),L.size===0&&L.add("all"),L})}}>
                   <S style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:t?r:`${r}12`,borderWidth:1,borderColor:t?r:`${r}30`,gap:5}}>
-                    <T size={11}color={B}/>
-                    <L style={{fontFamily:z.interBold,fontSize:10.5,color:t?e.white:e.primaryBlack}}>
-                      {o.label}
-                    </L>
+                    <I size={11}color={B}/>
+                    <A style={{fontFamily:z.interBold,fontSize:10.5,color:t?o.white:o.primaryBlack}}>
+                      {e.label}
+                    </A>
                     <S style={{backgroundColor:t?"rgba(255,255,255,0.25)":`${r}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
-                      <L style={{fontFamily:z.interBold,fontSize:9,color:t?e.white:r}}>
-                        {o.count}
-                      </L>
+                      <A style={{fontFamily:z.interBold,fontSize:9,color:t?o.white:r}}>
+                        {e.count}
+                      </A>
                     </S>
                   </S>
                 </H>})}
-          </_>
+          </Q>
         </S>
       </S>
 
-      <So ref={N}data={O}keyExtractor={Z}ListHeaderComponent={oo}renderItem={q}getItemLayout={J}initialNumToRender={15}maxToRenderPerBatch={10}windowSize={9}removeClippedSubviews={ho.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Vo isSearch={h.length>0||!C.has("all")}searchQuery={h}customTitle={h.length>0?"No matching console logs":"No console logs"}onClearSearch={()=>{E(""),P(new Set(["all"]))}}/>}ListFooterComponent={w.length>0?<Eo count={O.length}totalCount={w.length}label="logs"loadMoreStep={Q}hasMore={O.length<w.length}onLoadMore={()=>G(o=>o+Q)}/>:null}contentContainerStyle={[I.listContent,w.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
-    </S>});export default Uo;
+      <Se ref={U}data={$}keyExtractor={ee}ListHeaderComponent={oe}renderItem={J}getItemLayout={Z}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Ve isSearch={y.length>0||!h.has("all")}searchQuery={y}customTitle={y.length>0?"No matching console logs":"No console logs"}onClearSearch={()=>{E(""),R(new Set(["all"]))}}/>}ListFooterComponent={w.length>0?<Ee count={$.length}totalCount={w.length}label="logs"loadMoreStep={Y}hasMore={$.length<w.length}onLoadMore={()=>M(e=>e+Y)}/>:null}style={{flex:1}}contentContainerStyle={[T.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </S>});export default Ue;