react-native-inapp-inspector 2.5.12 → 2.5.14

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

@@ -1,157 +1,120 @@
-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}]}>
-            <Be style={H.modalBackdropPressable}onPress={M}/>
-            <B style={[H.modalContentCard,{height:`${O}%`,borderTopLeftRadius:O>=100?0:20,borderTopRightRadius:O>=100?0:20,opacity:le?Math.max(.05,Math.min(1,typeof $=="number"?$:.3)):1,zIndex:9999999,elevation:999999}]}>
-              <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
+import{useEffect as O,useRef as F}from"react";import{Animated as N,Modal as Me,Platform as U,Pressable as Ne,StatusBar as Se,StyleSheet as w,View as B}from"react-native";import{useInspector as he}from"./InspectorContext";import Be from"../ErrorBoundary";import M from"../ModuleErrorBoundary";import Ce from"./FabLauncher";import Ee from"./InspectorHeader";import{SecondaryTelemetryStrip as Te}from"./SecondaryTelemetryStrip";import De from"./TabBar";import Ve from"./NetworkTab";import Pe from"./NetworkDetail";import Re from"./LogDetail";import Ae from"./ConsoleTab";import{PerformanceTab as Ie}from"./PerformanceTab";import Le from"./AnalyticsTab";import Oe from"../AnalyticsDetail";import Fe from"./ReduxTab";import He from"./ReduxDetail";import We from"./CrashTab";import Ye from"./CrashDetail";import Ge from"./PushTab";import Ue from"./PushDetail";import $e from"./SocketTab";import Je from"./SocketDetail";import Ke from"./DeviceInfoTab";import Qe from"./StorageTab";import{MediaGalleryTab as Xe}from"./MediaGalleryTab";import Ze from"./SettingsPanel";import _e from"./AboutModal";import{SupportPage as Mo}from"./SupportPage";import{ConfirmationModal as No}from"./ConfirmationModal";import{FloatingCaptureWidget as So}from"./FloatingCaptureWidget";import Bo from"./SkeletonPlaceholder";import Co from"./NpmUpdateToast";import Eo from"./NpmStarPrompt";import To from"../Toast";import z from"../../styles";import{AppColors as v}from"../../styles/AppColors";import Do from"./NavigationTracker";const Vo=()=>{const{visible:H,modalAnimationType:$,closeModal:x,modalHeightPercent:P,selected:W,selectedEvent:R,selectedLog:Y,selectedReduxSlice:j,selectedReduxAction:J,selectedCrash:q,selectedPush:A,setSelectedPush:K,selectedSocket:I,setSelectedSocket:Q,settingsPage:C,isAboutOpen:k,setIsAboutOpen:X,isSupportOpen:E,setIsSupportOpen:Z,activeTab:e,isReady:_,enabled:ee,isDismissed:oe,hasNavigationContext:re,setNavState:te,confirmModal:S,setConfirmModal:ae,peekMode:le,peekOpacity:G}=he(),L=e==="apis"&&W!=null||e==="analytics"&&R!=null||e==="logs"&&Y!=null||e==="redux"&&(j!=null||J!=null)||e==="crash"&&q!=null||e==="push"&&A!=null||e==="socket"&&I!=null,T=F(new N.Value(0)).current;O(()=>{C!==null&&(T.setValue(0),N.spring(T,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[C!==null]);const D=F(new N.Value(0)).current;O(()=>{k&&(D.setValue(0),N.spring(D,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[k]);const V=F(new N.Value(0)).current;return O(()=>{E&&(V.setValue(0),N.spring(V,{toValue:1,friction:8,tension:65,useNativeDriver:!0}).start())},[E]),<>
+      {(U.OS==="ios"||U.OS==="android")&&ee&&!oe&&!H&&<Ce/>}
+      <Me visible={H}animationType={$}transparent statusBarTranslucent={!0}onRequestClose={x}>
+        <Be onClose={x}>
+          <B style={[z.modalBackdrop,{zIndex:999999,elevation:999999}]}>
+            <Ne style={z.modalBackdropPressable}onPress={x}accessible={!0}accessibilityRole="button"accessibilityLabel="Dismiss Inspector"accessibilityHint="Double tap to dismiss the inspector modal"/>
+            <B accessible={!1}accessibilityViewIsModal={!0}style={[z.modalContentCard,{height:`${P}%`,borderTopLeftRadius:P>=100?0:20,borderTopRightRadius:P>=100?0:20,opacity:le?Math.max(.05,Math.min(1,typeof G=="number"?G:.3)):1,zIndex:9999999,elevation:999999}]}>
+              <Se translucent backgroundColor="transparent"barStyle="light-content"/>
 
-              <Re/>
-              {!G&&v===null&&!R&&!D&&<De/>}
+              <Ee/>
+              {!L&&C===null&&!k&&!E&&<Te/>}
 
-              <B style={{flex:1,overflow:"hidden",backgroundColor:C.grayBackground}}>
+              <B style={{flex:1,overflow:"hidden",backgroundColor:v.grayBackground}}>
                 
-                <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">
-                          <Ee/>
-                        </S>}
-                      {e==="logs"&&<S moduleName="Console Logs Monitor">
-                          <Le/>
-                        </S>}
-                      {e==="perf"&&<S moduleName="Performance & FPS Profiler">
+                <B style={{flex:1}}pointerEvents={L||C!==null||k||E?"none":"auto"}>
+                  <De/>
+                  {_?<B style={{flex:1}}>
+                      {e==="apis"&&<M moduleName="Network API Monitor">
+                          <Ve/>
+                        </M>}
+                      {e==="logs"&&<M moduleName="Console Logs Monitor">
+                          <Ae/>
+                        </M>}
+                      {e==="perf"&&<M moduleName="Performance & FPS Profiler">
                           <Ie/>
-                        </S>}
-                      {e==="analytics"&&<S moduleName="Analytics Event Tracker">
-                          <Oe/>
-                        </S>}
-                      {e==="redux"&&<S moduleName="Redux State Inspector">
+                        </M>}
+                      {e==="analytics"&&<M moduleName="Analytics Event Tracker">
+                          <Le/>
+                        </M>}
+                      {e==="redux"&&<M moduleName="Redux State Inspector">
+                          <Fe/>
+                        </M>}
+                      {e==="crash"&&<M moduleName="Crash Reporter">
                           <We/>
-                        </S>}
-                      {e==="crash"&&<S moduleName="Crash Reporter">
-                          <He/>
-                        </S>}
-                      {e==="push"&&<S moduleName="Push Notifications">
-                          <Ue/>
-                        </S>}
-                      {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
+                        </M>}
+                      {e==="push"&&<M moduleName="Push Notifications">
+                          <Ge/>
+                        </M>}
+                      {e==="socket"&&<M moduleName="WebSocket & Socket.IO">
                           <$e/>
-                        </S>}
-                      {e==="device"&&<S moduleName="Device Diagnostics">
+                        </M>}
+                      {e==="device"&&<M moduleName="Device Diagnostics">
                           <Ke/>
-                        </S>}
-                      {e==="storage"&&<S moduleName="Storage Inspector">
+                        </M>}
+                      {e==="storage"&&<M moduleName="Storage Inspector">
                           <Qe/>
-                        </S>}
-                      {e==="media"&&<S moduleName="Media Gallery">
-                          <Ze/>
-                        </S>}
-                      {q.OS==="android"&&Eo()&&e==="debugging"&&<S moduleName="Debugging Utilities">
-                            <Xe/>
-                          </S>}
-                    </B>:<Po/>}
+                        </M>}
+                      {e==="media"&&<M moduleName="Media Gallery">
+                          <Xe/>
+                        </M>}
+                    </B>:<Bo tab={e}/>}
                 </B>
 
                 
-                {G&&<B style={[T.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
-                    {e==="apis"&&Y!=null&&<S moduleName="Network Request Details">
+                {L&&<B style={[w.absoluteFill,{backgroundColor:v.contentBg,zIndex:10}]}>
+                    {e==="apis"&&W!=null&&<M moduleName="Network Request Details">
                         <Pe/>
-                      </S>}
-                    {e==="analytics"&&F!=null&&<S moduleName="Analytics Event Details">
-                        <Fe event={F}/>
-                      </S>}
-                    {e==="logs"&&U!=null&&<S moduleName="Console Log Details">
-                        <Ae/>
-                      </S>}
-                    {e==="redux"&&<S moduleName="Redux Action & State Details">
-                        <Ge/>
-                      </S>}
-                    {e==="crash"&&_!=null&&<S moduleName="Crash Log Details">
+                      </M>}
+                    {e==="analytics"&&R!=null&&<M moduleName="Analytics Event Details">
+                        <Oe event={R}/>
+                      </M>}
+                    {e==="logs"&&Y!=null&&<M moduleName="Console Log Details">
+                        <Re/>
+                      </M>}
+                    {e==="redux"&&<M moduleName="Redux Action & State Details">
+                        <He/>
+                      </M>}
+                    {e==="crash"&&q!=null&&<M moduleName="Crash Log Details">
                         <Ye/>
-                      </S>}
-                    {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">
-                        <Je item={z}onClose={()=>Q(null)}/>
-                      </S>}
+                      </M>}
+                    {e==="push"&&A!=null&&<M moduleName="Push Notification Details">
+                        <Ue item={A}onClose={()=>K(null)}/>
+                      </M>}
+                    {e==="socket"&&I!=null&&<M moduleName="WebSocket & Socket.IO Details">
+                        <Je item={I}onClose={()=>Q(null)}/>
+                      </M>}
                   </B>}
 
                 
-                {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">
-                      <So/>
-                    </S>
-                  </o.View>}
+                {C!==null&&<N.View style={[w.absoluteFill,{backgroundColor:v.grayBackground,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <M moduleName="Settings Panel">
+                      <Ze/>
+                    </M>
+                  </N.View>}
 
                 
-                {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">
-                      <Bo onClose={()=>X(!1)}/>
-                    </S>
-                  </o.View>}
+                {k&&<N.View style={[w.absoluteFill,{backgroundColor:v.primaryLight,opacity:D,transform:[{translateY:D.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <M moduleName="About & Diagnostics">
+                      <_e onClose={()=>X(!1)}/>
+                    </M>
+                  </N.View>}
 
                 
-                {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">
-                      <Co onClose={()=>Z(!1)}/>
-                    </S>
-                  </o.View>}
+                {E&&<N.View style={[w.absoluteFill,{backgroundColor:v.primaryLight,opacity:V,transform:[{translateY:V.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <M moduleName="Support & Community">
+                      <Mo onClose={()=>Z(!1)}/>
+                    </M>
+                  </N.View>}
               </B>
 
               
-              <Do/>
+              <To/>
 
               
-              <No/>
+              <Co/>
 
               
-              <Ro/>
+              <Eo/>
 
               
-              <Mo/>
+              <So/>
 
               
-              <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}))}/>
+              <No visible={S.visible}title={S.title}message={S.message}confirmText={S.confirmText}cancelText={S.cancelText}isDestructive={!0}icon="trash"onConfirm={S.onConfirm}onCancel={()=>ae(ie=>({...ie,visible:!1}))}/>
             </B>
           </B>
-        </Me>
-      {te&&<To onStateChange={ae}/>}
-    </Se>
-    </>},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={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={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={[k.cardSkeleton,{opacity:V}]}>
-          <B style={k.cardTopRow}>
-            <B style={k.badgeGroup}>
-              <B style={k.statusBadgeSkeleton}/>
-              <B style={k.methodBadgeSkeleton}/>
-            </B>
-            <B style={k.timeSkeleton}/>
-          </B>
-          <B style={k.urlLineLong}/>
-          <B style={k.urlLineShort}/>
-          <B style={k.cardBottomRow}>
-            <B style={k.metaPillSkeleton}/>
-            <B style={k.metaPillSkeleton}/>
-          </B>
-        </o.View>)}
-    </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;
+        </Be>
+      {re&&<Do onStateChange={te}/>}
+    </Me>
+    </>};export default Vo;