react-native-inapp-inspector 2.5.10 → 2.5.12

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

@@ -1,5 +1,5 @@
-import se,{useEffect as P,useRef as L}from"react";import{Animated as o,Modal as Se,Platform as q,Pressable as Be,StatusBar as Ce,StyleSheet as T,View as B}from"react-native";import{useInspector as Ve}from"./InspectorContext";import Me from"../ErrorBoundary";import S from"../ModuleErrorBoundary";import Ne from"./FabLauncher";import Re from"./InspectorHeader";import{SecondaryTelemetryStrip as De}from"./SecondaryTelemetryStrip";import Te from"./TabBar";import Ee from"./NetworkTab";import Ae from"./NetworkDetail";import Pe from"./LogDetail";import Le from"./ConsoleTab";import Ie from"./AnalyticsTab";import Oe from"../AnalyticsDetail";import We from"./ReduxTab";import Fe from"./ReduxDetail";import Ge from"./CrashTab";import He from"./CrashDetail";import Ye from"./PushTab";import Ue from"./PushDetail";import _e from"./SocketTab";import $e from"./SocketDetail";import Je from"./DeviceInfoTab";import Ke from"./StorageTab";import Qe from"./DebuggingTab";import{MediaGalleryTab as Xe}from"./MediaGalleryTab";import Ze from"./SettingsPanel";import So from"./AboutModal";import{SupportPage as Bo}from"./SupportPage";import{ConfirmationModal as Co}from"./ConfirmationModal";import{FloatingCaptureWidget as Vo}from"./FloatingCaptureWidget";import Mo from"./NpmUpdateToast";import No from"./NpmStarPrompt";import Ro from"../Toast";import H from"../../styles";import{AppColors as C}from"../../styles/AppColors";import Do from"./NavigationTracker";import{isLocalDebugEnvironment as To}from"../../helpers";const xo=()=>{const{visible:I,modalAnimationType:V,closeModal:M,modalHeightPercent:O,selected:Y,selectedEvent:W,selectedLog:U,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:_,selectedPush:F,setSelectedPush:K,selectedSocket:z,setSelectedSocket:Q,settingsPage:N,isAboutOpen:R,setIsAboutOpen:X,isSupportOpen:D,setIsSupportOpen:Z,activeTab:e,isReady:ee,enabled:oe,isDismissed:te,hasNavigationContext:re,setNavState:ae,confirmModal:v,setConfirmModal:ie,peekMode:le,peekOpacity:$}=Ve(),G=e==="apis"&&Y!=null||e==="analytics"&&W!=null||e==="logs"&&U!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&_!=null||e==="push"&&F!=null||e==="socket"&&z!=null,x=L(new o.Value(0)).current;P(()=>{N!==null&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[N!==null]);const E=L(new o.Value(0)).current;P(()=>{R&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R]);const A=L(new o.Value(0)).current;return P(()=>{D&&(A.setValue(0),o.spring(A,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
-      {(q.OS==="ios"||q.OS==="android")&&oe&&!te&&!I&&<Ne/>}
+import se,{useEffect as A,useRef as L}from"react";import{Animated as o,Modal as Se,Platform as q,Pressable as Be,StatusBar as Ce,StyleSheet as T,View as B}from"react-native";import{useInspector as Ve}from"./InspectorContext";import Me from"../ErrorBoundary";import S from"../ModuleErrorBoundary";import Ne from"./FabLauncher";import Re from"./InspectorHeader";import{SecondaryTelemetryStrip as De}from"./SecondaryTelemetryStrip";import Te from"./TabBar";import Ee from"./NetworkTab";import Pe from"./NetworkDetail";import Ae from"./LogDetail";import Le from"./ConsoleTab";import{PerformanceTab as Ie}from"./PerformanceTab";import Oe from"./AnalyticsTab";import Fe from"../AnalyticsDetail";import We from"./ReduxTab";import Ge from"./ReduxDetail";import He from"./CrashTab";import Ye from"./CrashDetail";import Ue from"./PushTab";import _e from"./PushDetail";import $e from"./SocketTab";import Je from"./SocketDetail";import Ke from"./DeviceInfoTab";import Qe from"./StorageTab";import Xe from"./DebuggingTab";import{MediaGalleryTab as Ze}from"./MediaGalleryTab";import So from"./SettingsPanel";import Bo from"./AboutModal";import{SupportPage as Co}from"./SupportPage";import{ConfirmationModal as Vo}from"./ConfirmationModal";import{FloatingCaptureWidget as Mo}from"./FloatingCaptureWidget";import No from"./NpmUpdateToast";import Ro from"./NpmStarPrompt";import Do from"../Toast";import H from"../../styles";import{AppColors as C}from"../../styles/AppColors";import To from"./NavigationTracker";import{isLocalDebugEnvironment as Eo}from"../../helpers";const xo=()=>{const{visible:I,modalAnimationType:V,closeModal:M,modalHeightPercent:O,selected:Y,selectedEvent:F,selectedLog:U,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:_,selectedPush:W,setSelectedPush:K,selectedSocket:z,setSelectedSocket:Q,settingsPage:v,isAboutOpen:R,setIsAboutOpen:X,isSupportOpen:D,setIsSupportOpen:Z,activeTab:e,isReady:ee,enabled:oe,isDismissed:re,hasNavigationContext:te,setNavState:ae,confirmModal:N,setConfirmModal:ie,peekMode:le,peekOpacity:$}=Ve(),G=e==="apis"&&Y!=null||e==="analytics"&&F!=null||e==="logs"&&U!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&_!=null||e==="push"&&W!=null||e==="socket"&&z!=null,E=L(new o.Value(0)).current;A(()=>{v!==null&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[v!==null]);const x=L(new o.Value(0)).current;A(()=>{R&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R]);const P=L(new o.Value(0)).current;return A(()=>{D&&(P.setValue(0),o.spring(P,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
+      {(q.OS==="ios"||q.OS==="android")&&oe&&!re&&!I&&<Ne/>}
       <Se visible={I}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={M}>
         <Me onClose={M}>
           <B style={[H.modalBackdrop,{zIndex:999999,elevation:999999}]}>
@@ -8,11 +8,11 @@ import se,{useEffect as P,useRef as L}from"react";import{Animated as o,Modal as
               <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
 
               <Re/>
-              {!G&&N===null&&!R&&!D&&<De/>}
+              {!G&&v===null&&!R&&!D&&<De/>}
 
               <B style={{flex:1,overflow:"hidden",backgroundColor:C.grayBackground}}>
                 
-                <B style={{flex:1}}pointerEvents={G||N!==null||R||D?"none":"auto"}>
+                <B style={{flex:1}}pointerEvents={G||v!==null||R||D?"none":"auto"}>
                   <Te/>
                   {ee?<B style={{flex:1}}>
                       {e==="apis"&&<S moduleName="Network API Monitor">
@@ -21,134 +21,137 @@ import se,{useEffect as P,useRef as L}from"react";import{Animated as o,Modal as
                       {e==="logs"&&<S moduleName="Console Logs Monitor">
                           <Le/>
                         </S>}
-                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
+                      {e==="perf"&&<S moduleName="Performance & FPS Profiler">
                           <Ie/>
                         </S>}
+                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
+                          <Oe/>
+                        </S>}
                       {e==="redux"&&<S moduleName="Redux State Inspector">
                           <We/>
                         </S>}
                       {e==="crash"&&<S moduleName="Crash Reporter">
-                          <Ge/>
+                          <He/>
                         </S>}
                       {e==="push"&&<S moduleName="Push Notifications">
-                          <Ye/>
+                          <Ue/>
                         </S>}
                       {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
-                          <_e/>
+                          <$e/>
                         </S>}
                       {e==="device"&&<S moduleName="Device Diagnostics">
-                          <Je/>
+                          <Ke/>
                         </S>}
                       {e==="storage"&&<S moduleName="Storage Inspector">
-                          <Ke/>
+                          <Qe/>
                         </S>}
                       {e==="media"&&<S moduleName="Media Gallery">
-                          <Xe/>
+                          <Ze/>
                         </S>}
-                      {q.OS==="android"&&To()&&e==="debugging"&&<S moduleName="Debugging Utilities">
-                            <Qe/>
+                      {q.OS==="android"&&Eo()&&e==="debugging"&&<S moduleName="Debugging Utilities">
+                            <Xe/>
                           </S>}
-                    </B>:<Eo/>}
+                    </B>:<Po/>}
                 </B>
 
                 
                 {G&&<B style={[T.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
                     {e==="apis"&&Y!=null&&<S moduleName="Network Request Details">
-                        <Ae/>
+                        <Pe/>
                       </S>}
-                    {e==="analytics"&&W!=null&&<S moduleName="Analytics Event Details">
-                        <Oe event={W}/>
+                    {e==="analytics"&&F!=null&&<S moduleName="Analytics Event Details">
+                        <Fe event={F}/>
                       </S>}
                     {e==="logs"&&U!=null&&<S moduleName="Console Log Details">
-                        <Pe/>
+                        <Ae/>
                       </S>}
                     {e==="redux"&&<S moduleName="Redux Action & State Details">
-                        <Fe/>
+                        <Ge/>
                       </S>}
                     {e==="crash"&&_!=null&&<S moduleName="Crash Log Details">
-                        <He/>
+                        <Ye/>
                       </S>}
-                    {e==="push"&&F!=null&&<S moduleName="Push Notification Details">
-                        <Ue item={F}onClose={()=>K(null)}/>
+                    {e==="push"&&W!=null&&<S moduleName="Push Notification Details">
+                        <_e item={W}onClose={()=>K(null)}/>
                       </S>}
                     {e==="socket"&&z!=null&&<S moduleName="WebSocket & Socket.IO Details">
-                        <$e item={z}onClose={()=>Q(null)}/>
+                        <Je item={z}onClose={()=>Q(null)}/>
                       </S>}
                   </B>}
 
                 
-                {N!==null&&<o.View style={[T.absoluteFill,{backgroundColor:C.grayBackground,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {v!==null&&<o.View style={[T.absoluteFill,{backgroundColor:C.grayBackground,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="Settings Panel">
-                      <Ze/>
+                      <So/>
                     </S>
                   </o.View>}
 
                 
-                {R&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {R&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="About & Diagnostics">
-                      <So onClose={()=>X(!1)}/>
+                      <Bo onClose={()=>X(!1)}/>
                     </S>
                   </o.View>}
 
                 
-                {D&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:A,transform:[{translateY:A.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {D&&<o.View style={[T.absoluteFill,{backgroundColor:C.primaryLight,opacity:P,transform:[{translateY:P.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="Support & Community">
-                      <Bo onClose={()=>Z(!1)}/>
+                      <Co onClose={()=>Z(!1)}/>
                     </S>
                   </o.View>}
               </B>
 
               
-              <Ro/>
+              <Do/>
 
               
-              <Mo/>
+              <No/>
 
               
-              <No/>
+              <Ro/>
 
               
-              <Vo/>
+              <Mo/>
 
               
-              <Co visible={v.visible}title={v.title}message={v.message}confirmText={v.confirmText}cancelText={v.cancelText}isDestructive={!0}icon="trash"onConfirm={v.onConfirm}onCancel={()=>ie(ne=>({...ne,visible:!1}))}/>
+              <Vo visible={N.visible}title={N.title}message={N.message}confirmText={N.confirmText}cancelText={N.cancelText}isDestructive={!0}icon="trash"onConfirm={N.onConfirm}onCancel={()=>ie(ne=>({...ne,visible:!1}))}/>
             </B>
           </B>
         </Me>
-      {re&&<Do onStateChange={ae}/>}
+      {te&&<To onStateChange={ae}/>}
     </Se>
-    </>},Eo=se.memo(function(){const V=L(new o.Value(.35)).current;return P(()=>{const M=o.loop(o.sequence([o.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),o.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return M.start(),()=>M.stop()},[V]),<B style={t.container}>
+    </>},Po=se.memo(function(){const V=L(new o.Value(.35)).current;return A(()=>{const M=o.loop(o.sequence([o.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),o.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return M.start(),()=>M.stop()},[V]),<B style={k.container}>
       
-      <B style={t.toolbarSkeleton}>
-        <o.View style={[t.searchBarSkeleton,{opacity:V}]}/>
-        <B style={t.actionButtonsRow}>
-          <o.View style={[t.iconButtonSkeleton,{opacity:V}]}/>
-          <o.View style={[t.iconButtonSkeleton,{opacity:V}]}/>
+      <B style={k.toolbarSkeleton}>
+        <o.View style={[k.searchBarSkeleton,{opacity:V}]}/>
+        <B style={k.actionButtonsRow}>
+          <o.View style={[k.iconButtonSkeleton,{opacity:V}]}/>
+          <o.View style={[k.iconButtonSkeleton,{opacity:V}]}/>
         </B>
       </B>
 
       
-      <B style={t.chipStripSkeleton}>
-        <o.View style={[t.chipSkeleton,{width:48,opacity:V}]}/>
-        <o.View style={[t.chipSkeleton,{width:68,opacity:V}]}/>
-        <o.View style={[t.chipSkeleton,{width:76,opacity:V}]}/>
-        <o.View style={[t.chipSkeleton,{width:58,opacity:V}]}/>
+      <B style={k.chipStripSkeleton}>
+        <o.View style={[k.chipSkeleton,{width:48,opacity:V}]}/>
+        <o.View style={[k.chipSkeleton,{width:68,opacity:V}]}/>
+        <o.View style={[k.chipSkeleton,{width:76,opacity:V}]}/>
+        <o.View style={[k.chipSkeleton,{width:58,opacity:V}]}/>
       </B>
 
       
-      {[0,1,2,3].map(M=><o.View key={`skeleton_card_${M}`}style={[t.cardSkeleton,{opacity:V}]}>
-          <B style={t.cardTopRow}>
-            <B style={t.badgeGroup}>
-              <B style={t.statusBadgeSkeleton}/>
-              <B style={t.methodBadgeSkeleton}/>
+      {[0,1,2,3].map(M=><o.View key={`skeleton_card_${M}`}style={[k.cardSkeleton,{opacity:V}]}>
+          <B style={k.cardTopRow}>
+            <B style={k.badgeGroup}>
+              <B style={k.statusBadgeSkeleton}/>
+              <B style={k.methodBadgeSkeleton}/>
             </B>
-            <B style={t.timeSkeleton}/>
+            <B style={k.timeSkeleton}/>
           </B>
-          <B style={t.urlLineLong}/>
-          <B style={t.urlLineShort}/>
-          <B style={t.cardBottomRow}>
-            <B style={t.metaPillSkeleton}/>
-            <B style={t.metaPillSkeleton}/>
+          <B style={k.urlLineLong}/>
+          <B style={k.urlLineShort}/>
+          <B style={k.cardBottomRow}>
+            <B style={k.metaPillSkeleton}/>
+            <B style={k.metaPillSkeleton}/>
           </B>
         </o.View>)}
-    </B>}),t=T.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},cardSkeleton:{backgroundColor:C.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:C.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:C.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:C.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:C.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:C.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:C.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:C.graySurface}});export default xo;
+    </B>}),k=T.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},cardSkeleton:{backgroundColor:C.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:C.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:C.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:C.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:C.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:C.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:C.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:C.graySurface}});export default xo;