react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,342 +1,108 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Modal, Platform, Pressable, StatusBar, StyleSheet, TouchableOpacity, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import ErrorBoundary from '../ErrorBoundary';
-import FabLauncher from './FabLauncher';
-import InspectorHeader from './InspectorHeader';
-import TabBar from './TabBar';
-import NetworkTab from './NetworkTab';
-import NetworkDetail from './NetworkDetail';
-import LogDetail from './LogDetail';
-import ConsoleTab from './ConsoleTab';
-import AnalyticsTab from './AnalyticsTab';
-import AnalyticsDetail from '../AnalyticsDetail';
-import ReduxTab from './ReduxTab';
-import ReduxDetail from './ReduxDetail';
-import BundleTab from './BundleTab';
-import PerformanceTab from './PerformanceTab';
-import CrashTab from './CrashTab';
-import CrashDetail from './CrashDetail';
-import DeviceInfoTab from './DeviceInfoTab';
-import StorageTab from './StorageTab';
-import DebuggingTab from './DebuggingTab';
-import SettingsPanel from './SettingsPanel';
-import NpmUpdateToast from './NpmUpdateToast';
-import NpmStarPrompt from './NpmStarPrompt';
-import FeedbackModal from './FeedbackModal';
-import Toast from '../Toast';
-import { HeadphonesIcon } from '../NetworkIcons';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import NavigationTracker from './NavigationTracker';
-import { isLocalDebugEnvironment } from '../../helpers';
-const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, isFeedbackOpen, setIsFeedbackOpen, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
-    const isDetailActive = (activeTab === 'apis' && selected != null) ||
-        (activeTab === 'analytics' && selectedEvent != null) ||
-        (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
-        (activeTab === 'crash' && selectedCrash != null);
-    const settingsAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        if (settingsPage !== null) {
-            settingsAnim.setValue(0);
-            Animated.spring(settingsAnim, {
-                toValue: 1,
-                friction: 8,
-                tension: 65,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [settingsPage !== null]);
-    const feedbackAnim = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-        if (isFeedbackOpen) {
-            feedbackAnim.setValue(0);
-            Animated.spring(feedbackAnim, {
-                toValue: 1,
-                friction: 8,
-                tension: 65,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [isFeedbackOpen]);
-    return (<>
-      {(Platform.OS === 'ios' || Platform.OS === 'android') &&
-            enabled &&
-            !visible &&
-            !useNativeFab && <FabLauncher />}
-      <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true} onRequestClose={closeModal}>
-        <ErrorBoundary onClose={closeModal}>
-          <View style={styles.modalBackdrop}>
-            <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
-            <View style={[
-            styles.modalContentCard,
-            {
-                height: `${modalHeightPercent}%`,
-                borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
-                borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
-            },
-        ]}>
-              <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
+import Q,{useEffect as L,useRef as N}from"react";import{Animated as e,Modal as X,Platform as z,Pressable as Z,StatusBar as Se,StyleSheet as T,TouchableOpacity as Ve,View as S}from"react-native";import{useInspector as Ce}from"./InspectorContext";import Re from"../ErrorBoundary";import Be from"./FabLauncher";import Te from"./InspectorHeader";import De from"./TabBar";import Ae from"./NetworkTab";import Le from"./NetworkDetail";import Ne from"./LogDetail";import Pe from"./ConsoleTab";import Fe from"./AnalyticsTab";import Ie from"../AnalyticsDetail";import Me from"./ReduxTab";import Oe from"./ReduxDetail";import Ee from"./BundleTab";import He from"./PerformanceTab";import We from"./CrashTab";import Ge from"./CrashDetail";import Ye from"./DeviceInfoTab";import _e from"./StorageTab";import $e from"./DebuggingTab";import{MediaGalleryTab as Ue}from"./MediaGalleryTab";import Je from"./SettingsPanel";import Ke from"./AboutModal";import Qe from"./NpmUpdateToast";import Xe from"./NpmStarPrompt";import Ze from"./FeedbackModal";import St from"../Toast";import{HeadphonesIcon as Vt}from"../NetworkIcons";import P from"../../styles";import{AppColors as k}from"../../styles/AppColors";import Ct from"./NavigationTracker";import{isLocalDebugEnvironment as Rt}from"../../helpers";const vt=()=>{const{visible:F,isMinimized:V,modalAnimationType:C,closeModal:I,modalHeightPercent:M,selected:H,selectedEvent:O,selectedLog:W,selectedReduxSlice:q,selectedReduxAction:_,selectedCrash:G,settingsPage:R,isFeedbackOpen:v,setIsFeedbackOpen:Y,isAboutOpen:B,setIsAboutOpen:$,activeTab:o,isReady:j,enabled:U,useNativeFab:Tt,hasNavigationContext:J,setNavState:K}=Ce(),E=o==="apis"&&H!=null||o==="analytics"&&O!=null||o==="logs"&&W!=null||o==="redux"&&(q!=null||_!=null)||o==="crash"&&G!=null,x=N(new e.Value(0)).current;L(()=>{R!==null&&(x.setValue(0),e.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R!==null]);const D=N(new e.Value(0)).current;L(()=>{v&&(D.setValue(0),e.spring(D,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[v]);const A=N(new e.Value(0)).current;return L(()=>{B&&(A.setValue(0),e.spring(A,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[B]),<>
+      {(z.OS==="ios"||z.OS==="android")&&U&&!F&&<Be/>}
+      <X visible={F}animationType={C}transparent statusBarTranslucent={!0}onRequestClose={I}>
+        <Re onClose={I}>
+          <S style={P.modalBackdrop}>
+            <Z style={P.modalBackdropPressable}onPress={I}/>
+            <S style={[P.modalContentCard,{height:`${M}%`,borderTopLeftRadius:M>=100?0:20,borderTopRightRadius:M>=100?0:20}]}>
+              <Se translucent backgroundColor="transparent"barStyle="light-content"/>
 
-              <InspectorHeader />
+              <Te/>
 
-              <View style={{ flex: 1 }}>
+              <S style={{flex:1}}>
                 
-                <View style={{ flex: 1 }} pointerEvents={isDetailActive || settingsPage !== null || isFeedbackOpen
-            ? 'none'
-            : 'auto'}>
-                  <TabBar />
-                  {isReady ? (<View style={{ flex: 1 }}>
-                      {activeTab === 'apis' && <NetworkTab />}
-                      {activeTab === 'logs' && <ConsoleTab />}
-                      {activeTab === 'analytics' && <AnalyticsTab />}
-                      {activeTab === 'redux' && <ReduxTab />}
-                      {activeTab === 'bundle' && <BundleTab />}
-                      {activeTab === 'performance' && <PerformanceTab />}
-                      {activeTab === 'crash' && <CrashTab />}
-                      {activeTab === 'device' && <DeviceInfoTab />}
-                      {activeTab === 'storage' && <StorageTab />}
-                      {Platform.OS === 'android' &&
-                isLocalDebugEnvironment() &&
-                activeTab === 'debugging' && <DebuggingTab />}
-                    </View>) : (<MainScreenSkeleton />)}
-                </View>
+                <S style={{flex:1}}pointerEvents={E||R!==null||v||B?"none":"auto"}>
+                  <De/>
+                  {j?<S style={{flex:1}}>
+                      {o==="apis"&&<Ae/>}
+                      {o==="logs"&&<Pe/>}
+                      {o==="analytics"&&<Fe/>}
+                      {o==="redux"&&<Me/>}
+                      {o==="bundle"&&<Ee/>}
+                      {o==="performance"&&<He/>}
+                      {o==="crash"&&<We/>}
+                      {o==="device"&&<Ye/>}
+                      {o==="storage"&&<_e/>}
+                      {o==="media"&&<Ue/>}
+                      {z.OS==="android"&&Rt()&&o==="debugging"&&<$e/>}
+                    </S>:<Bt/>}
+                </S>
 
                 
-                {isDetailActive && (<View style={[
-                StyleSheet.absoluteFill,
-                {
-                    backgroundColor: AppColors.contentBg,
-                    zIndex: 10,
-                },
-            ]}>
-                    {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
-                    {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
-                    {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
-                    {activeTab === 'redux' && <ReduxDetail />}
-                    {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
-                  </View>)}
+                {E&&<S style={[T.absoluteFill,{backgroundColor:k.contentBg,zIndex:10}]}>
+                    {o==="apis"&&H!=null&&<Le/>}
+                    {o==="analytics"&&O!=null&&<Ie event={O}/>}
+                    {o==="logs"&&W!=null&&<Ne/>}
+                    {o==="redux"&&<Oe/>}
+                    {o==="crash"&&G!=null&&<Ge/>}
+                  </S>}
 
                 
-                {settingsPage !== null && (<Animated.View style={[
-                StyleSheet.absoluteFill,
-                {
-                    backgroundColor: AppColors.grayBackground,
-                    opacity: settingsAnim,
-                    transform: [
-                        {
-                            translateY: settingsAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [24, 0],
-                            }),
-                        },
-                    ],
-                },
-            ]}>
-                    <SettingsPanel />
-                  </Animated.View>)}
+                {R!==null&&<e.View style={[T.absoluteFill,{backgroundColor:k.grayBackground,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <Je/>
+                  </e.View>}
 
                 
-                {isFeedbackOpen && (<Animated.View style={[
-                StyleSheet.absoluteFill,
-                {
-                    backgroundColor: AppColors.primaryLight,
-                    opacity: feedbackAnim,
-                    transform: [
-                        {
-                            translateY: feedbackAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [24, 0],
-                            }),
-                        },
-                    ],
-                },
-            ]}>
-                    <FeedbackModal onClose={() => setIsFeedbackOpen(false)}/>
-                  </Animated.View>)}
+                {v&&<e.View style={[T.absoluteFill,{backgroundColor:k.primaryLight,opacity:D,transform:[{translateY:D.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <Ze onClose={()=>Y(!1)}/>
+                  </e.View>}
 
                 
-                {!isDetailActive && settingsPage === null && !isFeedbackOpen && (<TouchableOpacity activeOpacity={0.8} onPress={() => setIsFeedbackOpen(true)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles.supportFab}>
-                    <HeadphonesIcon color={AppColors.white} size={20}/>
-                  </TouchableOpacity>)}
-              </View>
+                {B&&<e.View style={[T.absoluteFill,{backgroundColor:k.primaryLight,opacity:A,transform:[{translateY:A.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                    <Ke onClose={()=>$(!1)}/>
+                  </e.View>}
+
+                
+                {!E&&R===null&&!v&&!B&&<Ve activeOpacity={.8}onPress={()=>Y(!0)}hitSlop={{top:10,bottom:10,left:10,right:10}}style={P.supportFab}>
+                    <Vt color={k.white}size={20}/>
+                  </Ve>}
+              </S>
 
               
-              <Toast />
+              <St/>
 
               
-              <NpmUpdateToast />
+              <Qe/>
 
               
-              <NpmStarPrompt />
-            </View>
-          </View>
-        </ErrorBoundary>
-      {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
-    </Modal>
-    </>);
-};
-const MainScreenSkeleton = React.memo(function MainScreenSkeleton() {
-    const shimmerAnim = useRef(new Animated.Value(0.35)).current;
-    useEffect(() => {
-        const animation = Animated.loop(Animated.sequence([
-            Animated.timing(shimmerAnim, {
-                toValue: 0.85,
-                duration: 750,
-                useNativeDriver: false,
-            }),
-            Animated.timing(shimmerAnim, {
-                toValue: 0.35,
-                duration: 750,
-                useNativeDriver: false,
-            }),
-        ]));
-        animation.start();
-        return () => animation.stop();
-    }, [shimmerAnim]);
-    return (<View style={skeletonStyles.container}>
+              <Xe/>
+            </S>
+          </S>
+        </Re>
+      {J&&<Ct onStateChange={K}/>}
+    </X>
+    </>},Bt=Q.memo(function(){const V=N(new e.Value(.35)).current;return L(()=>{const C=e.loop(e.sequence([e.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),e.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return C.start(),()=>C.stop()},[V]),<S style={t.container}>
       
-      <View style={skeletonStyles.toolbarSkeleton}>
-        <Animated.View style={[skeletonStyles.searchBarSkeleton, { opacity: shimmerAnim }]}/>
-        <View style={skeletonStyles.actionButtonsRow}>
-          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
-          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
-        </View>
-      </View>
+      <S style={t.toolbarSkeleton}>
+        <e.View style={[t.searchBarSkeleton,{opacity:V}]}/>
+        <S style={t.actionButtonsRow}>
+          <e.View style={[t.iconButtonSkeleton,{opacity:V}]}/>
+          <e.View style={[t.iconButtonSkeleton,{opacity:V}]}/>
+        </S>
+      </S>
 
       
-      <View style={skeletonStyles.chipStripSkeleton}>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
-      </View>
+      <S style={t.chipStripSkeleton}>
+        <e.View style={[t.chipSkeleton,{width:48,opacity:V}]}/>
+        <e.View style={[t.chipSkeleton,{width:68,opacity:V}]}/>
+        <e.View style={[t.chipSkeleton,{width:76,opacity:V}]}/>
+        <e.View style={[t.chipSkeleton,{width:58,opacity:V}]}/>
+      </S>
 
       
-      {[0, 1, 2, 3].map(i => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
-          <View style={skeletonStyles.cardTopRow}>
-            <View style={skeletonStyles.badgeGroup}>
-              <View style={skeletonStyles.statusBadgeSkeleton}/>
-              <View style={skeletonStyles.methodBadgeSkeleton}/>
-            </View>
-            <View style={skeletonStyles.timeSkeleton}/>
-          </View>
-          <View style={skeletonStyles.urlLineLong}/>
-          <View style={skeletonStyles.urlLineShort}/>
-          <View style={skeletonStyles.cardBottomRow}>
-            <View style={skeletonStyles.metaPillSkeleton}/>
-            <View style={skeletonStyles.metaPillSkeleton}/>
-          </View>
-        </Animated.View>))}
-    </View>);
-});
-const skeletonStyles = StyleSheet.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: AppColors.graySurface,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    actionButtonsRow: {
-        flexDirection: 'row',
-        gap: 6,
-    },
-    iconButtonSkeleton: {
-        width: 36,
-        height: 36,
-        borderRadius: 8,
-        backgroundColor: AppColors.graySurface,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    chipStripSkeleton: {
-        flexDirection: 'row',
-        gap: 6,
-        marginBottom: 10,
-    },
-    chipSkeleton: {
-        height: 24,
-        borderRadius: 6,
-        backgroundColor: AppColors.graySurface,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    cardSkeleton: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 10,
-        padding: 12,
-        marginBottom: 8,
-        borderWidth: 1,
-        borderColor: AppColors.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: AppColors.graySurface,
-    },
-    methodBadgeSkeleton: {
-        width: 44,
-        height: 18,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-    timeSkeleton: {
-        width: 48,
-        height: 12,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-    urlLineLong: {
-        height: 13,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-        marginBottom: 5,
-        width: '90%',
-    },
-    urlLineShort: {
-        height: 11,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-        marginBottom: 8,
-        width: '55%',
-    },
-    cardBottomRow: {
-        flexDirection: 'row',
-        gap: 8,
-        marginTop: 2,
-    },
-    metaPillSkeleton: {
-        width: 52,
-        height: 14,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-});
-export default MainScreen;
+      {[0,1,2,3].map(C=><e.View key={`skeleton_card_${C}`}style={[t.cardSkeleton,{opacity:V}]}>
+          <S style={t.cardTopRow}>
+            <S style={t.badgeGroup}>
+              <S style={t.statusBadgeSkeleton}/>
+              <S style={t.methodBadgeSkeleton}/>
+            </S>
+            <S style={t.timeSkeleton}/>
+          </S>
+          <S style={t.urlLineLong}/>
+          <S style={t.urlLineShort}/>
+          <S style={t.cardBottomRow}>
+            <S style={t.metaPillSkeleton}/>
+            <S style={t.metaPillSkeleton}/>
+          </S>
+        </e.View>)}
+    </S>}),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:k.graySurface,borderWidth:1,borderColor:k.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},cardSkeleton:{backgroundColor:k.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:k.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:k.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:k.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:k.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:k.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:k.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:k.graySurface}});export default vt;