react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,312 +1,52 @@
-import React, { useRef, useState } from 'react';
-import { Platform, ScrollView, Text, TouchableOpacity, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, ScreencastIcon, ChevronIcon, } from '../NetworkIcons';
-import { isReduxConnected } from '../../customHooks/reduxLogger';
-import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
-import { isLocalDebugEnvironment } from '../../helpers';
-const TabBar = React.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, mediaCount, } = useInspector();
-    const isReduxAvail = isReduxConnected();
-    const isAnalyticsAvail = isAnalyticsConnected();
-    const isMediaActive = activeTab === 'media';
-    const showMediaTab = (tabVisibility?.media ?? true) && mediaCount > 0;
-    const scrollViewRef = useRef(null);
-    const [canScrollLeft, setCanScrollLeft] = useState(false);
-    const [canScrollRight, setCanScrollRight] = useState(true);
-    const scrollOffsetRef = useRef(0);
-    const handleScroll = (event) => {
-        const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
-        const x = contentOffset.x;
-        scrollOffsetRef.current = x;
-        const hasLeft = x > 8;
-        const hasRight = x < contentSize.width - layoutMeasurement.width - 8;
-        if (canScrollLeft !== hasLeft)
-            setCanScrollLeft(hasLeft);
-        if (canScrollRight !== hasRight)
-            setCanScrollRight(hasRight);
-    };
-    const scrollTabs = (offset) => {
-        scrollViewRef.current?.scrollTo({
-            x: Math.max(0, scrollOffsetRef.current + offset),
-            animated: true,
-        });
-    };
-    return (<View style={[
-            styles.tabBarContainer,
-            {
-                flexDirection: 'row',
-                alignItems: 'center',
-                paddingHorizontal: 0,
-            },
-        ]}>
+import oe,{useRef as $,useState as E}from"react";import{Platform as te,ScrollView as Ce,Text as F,TouchableOpacity as U,View as C}from"react-native";import{useInspector as we}from"./InspectorContext";import k from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as ke}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Re,AnalyticsIcon as Te,PackageIcon as Ie,ReduxIcon as Le,PerformanceIcon as Ae,CrashIcon as Be,SmartphoneIcon as Ve,DatabaseIcon as Oe,QrCodeIcon as Pe,ScreencastIcon as De,ChevronIcon as Q}from"../NetworkIcons";import{isReduxConnected as Me}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as We}from"../../helpers";const $e=oe.memo(()=>{const{activeTab:R,switchActiveTab:B,tabVisibility:x,logs:V,consoleLogs:O,analyticsEvents:q,crashRecords:P,lastReadApisCount:J,lastReadLogsCount:K,lastReadCrashesCount:N,mediaCount:j}=we(),X=Me(),Y=He(),S=R==="media",z=(x?.media??!0)&&j>0,D=$(null),[L,Z]=E(!1),[M,_]=E(!0),H=$(0),ee=e=>{const{contentOffset:w,layoutMeasurement:t,contentSize:A}=e.nativeEvent,T=w.x;H.current=T;const v=T>8,I=T<A.width-t.width-8;L!==v&&Z(v),M!==I&&_(I)},W=e=>{D.current?.scrollTo({x:Math.max(0,H.current+e),animated:!0})};return<C style={[k.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
       
-      {canScrollLeft && (<TouchableOpacity onPress={() => scrollTabs(-160)} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} activeOpacity={0.7} style={{
-                paddingLeft: 6,
-                paddingRight: 2,
-                justifyContent: 'center',
-                alignItems: 'center',
-            }}>
-          <View style={{
-                width: 22,
-                height: 22,
-                borderRadius: 11,
-                backgroundColor: '#E5E7EB',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-            <ChevronIcon direction="left" size={13} color={AppColors.purple}/>
-          </View>
-        </TouchableOpacity>)}
+      {L&&<U onPress={()=>W(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
+          <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
+            <Q direction="left"size={13}color={o.purple}/>
+          </C>
+        </U>}
 
       
-      <ScrollView ref={scrollViewRef} horizontal showsHorizontalScrollIndicator={false} onScroll={handleScroll} scrollEventThrottle={16} style={{ flex: 1 }} contentContainerStyle={{
-            paddingLeft: canScrollLeft ? 4 : 12,
-            paddingRight: showMediaTab ? 6 : 12,
-        }}>
-        {[
-            {
-                id: 1,
-                key: 'apis',
-                label: 'APIs',
-                count: logs.length,
-                icon: 'apis',
-            },
-            {
-                id: 2,
-                key: 'logs',
-                label: 'Logs',
-                count: consoleLogs.length,
-                icon: 'logs',
-            },
-            {
-                id: 3,
-                key: 'analytics',
-                label: 'Analytics',
-                count: analyticsEvents.length,
-                icon: 'analytics',
-            },
-            {
-                id: 4,
-                key: 'redux',
-                label: 'Redux',
-                count: 0,
-                icon: 'redux',
-            },
-            {
-                id: 5,
-                key: 'storage',
-                label: 'Storage',
-                count: 0,
-                icon: 'storage',
-            },
-            {
-                id: 6,
-                key: 'device',
-                label: 'Device',
-                count: 0,
-                icon: 'device',
-            },
-            {
-                id: 7,
-                key: 'crash',
-                label: 'Crash',
-                count: crashRecords?.length || 0,
-                icon: 'crash',
-            },
-            {
-                id: 8,
-                key: 'bundle',
-                label: 'Bundle',
-                count: 0,
-                icon: 'bundle',
-            },
-            {
-                id: 9,
-                key: 'performance',
-                label: 'Performance',
-                count: 0,
-                icon: 'performance',
-            },
-            {
-                id: 10,
-                key: 'debugging',
-                label: 'Debugging',
-                count: 0,
-                icon: 'debugging',
-            },
-        ]
-            .filter(tab => {
-            if (tab.key === 'debugging') {
-                return (Platform.OS === 'android' &&
-                    isLocalDebugEnvironment() &&
-                    Boolean(tabVisibility?.debugging));
-            }
-            if (!tabVisibility?.[tab.key])
-                return false;
-            if (tab.key === 'redux' && !isReduxAvail)
-                return false;
-            if (tab.key === 'analytics' && !isAnalyticsAvail)
-                return false;
-            return true;
-        })
-            .map(tab => {
-            const isActive = activeTab === tab.key;
-            const iconColor = isActive
-                ? AppColors.white
-                : tab.key === 'crash' && tab.count > 0
-                    ? AppColors.errorColor
-                    : AppColors.grayText;
-            const countLabel = tab.count > 9 ? '9+' : String(tab.count);
-            const hasUnreadApis = activeTab !== 'apis' && logs.length > lastReadApisCount;
-            const hasUnreadLogs = activeTab !== 'logs' && consoleLogs.length > lastReadLogsCount;
-            const hasUnreadCrashes = activeTab !== 'crash' &&
-                (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
-            return (<TouchableScale key={tab.key} onPress={() => {
-                    switchActiveTab(tab.key);
-                }} style={[
-                    styles.contentTabButton,
-                    isActive && styles.contentTabButtonActive,
-                ]}>
-                <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                  {tab.icon === 'apis' && (<SignalIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'debugging' && (<QrCodeIcon color={iconColor} size={14}/>)}
-                  <View style={{
-                    minWidth: 20,
-                    height: 20,
-                    paddingHorizontal: 4,
-                    borderRadius: 10,
-                    backgroundColor: isActive
-                        ? `${AppColors.white}33`
-                        : `${AppColors.purple}1F`,
-                    borderWidth: 1,
-                    borderColor: isActive
-                        ? `${AppColors.white}66`
-                        : `${AppColors.purple}40`,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                    <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    lineHeight: 12,
-                    color: isActive ? AppColors.white : AppColors.purple,
-                }}>
-                      #{tab.id}
-                    </Text>
-                  </View>
-                  <Text numberOfLines={1} ellipsizeMode="tail" style={[
-                    styles.contentTabButtonText,
-                    isActive && styles.contentTabButtonTextActive,
-                ]}>
-                    {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
-                  </Text>
-                  {((tab.key === 'apis' && hasUnreadApis) ||
-                    (tab.key === 'logs' && hasUnreadLogs) ||
-                    (tab.key === 'crash' && hasUnreadCrashes)) && (<View style={{
-                        width: 6,
-                        height: 6,
-                        borderRadius: 3,
-                        backgroundColor: AppColors.errorColor,
-                        marginLeft: 4,
-                        alignSelf: 'center',
-                    }}/>)}
-                </View>
-              </TouchableScale>);
-        })}
-      </ScrollView>
+      <Ce ref={D}horizontal showsHorizontalScrollIndicator={!1}onScroll={ee}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:L?4:12,paddingRight:z?6:12}}>
+        {[{id:1,key:"apis",label:"APIs",count:V.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:O.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:q.length,icon:"analytics"},{id:4,key:"redux",label:"Redux",count:0,icon:"redux"},{id:5,key:"storage",label:"Storage",count:0,icon:"storage"},{id:6,key:"device",label:"Device",count:0,icon:"device"},{id:7,key:"crash",label:"Crash",count:P?.length||0,icon:"crash"},{id:8,key:"bundle",label:"Bundle",count:0,icon:"bundle"},{id:9,key:"performance",label:"Performance",count:0,icon:"performance"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?te.OS==="android"&&We()&&!!x?.debugging:!(!x?.[e.key]||e.key==="redux"&&!X||e.key==="analytics"&&!Y)).map(e=>{const w=R===e.key,t=w?o.white:e.key==="crash"&&e.count>0?o.errorColor:o.grayText,A=e.count>9?"9+":String(e.count),T=R!=="apis"&&V.length>J,v=R!=="logs"&&O.length>K,I=R!=="crash"&&(P?.length||0)>(N||0);return<G key={e.key}onPress={()=>{B(e.key)}}style={[k.contentTabButton,w&&k.contentTabButtonActive]}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  {e.icon==="apis"&&<Se color={t}size={14}/>}
+                  {e.icon==="logs"&&<Re color={t}size={14}/>}
+                  {e.icon==="analytics"&&<Te color={t}size={14}/>}
+                  {e.icon==="redux"&&<Le color={t}size={14}/>}
+                  {e.icon==="storage"&&<Oe color={t}size={14}/>}
+                  {e.icon==="device"&&<Ve color={t}size={14}/>}
+                  {e.icon==="crash"&&<Be color={t}size={14}/>}
+                  {e.icon==="bundle"&&<Ie color={t}size={14}/>}
+                  {e.icon==="performance"&&<Ae color={t}size={14}/>}
+                  {e.icon==="debugging"&&<Pe color={t}size={14}/>}
+                  <C style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:w?`${o.white}33`:`${o.purple}1F`,borderWidth:1,borderColor:w?`${o.white}66`:`${o.purple}40`,alignItems:"center",justifyContent:"center"}}>
+                    <F style={{fontFamily:ke.interBold,fontSize:9.5,lineHeight:12,color:w?o.white:o.purple}}>
+                      #{e.id}
+                    </F>
+                  </C>
+                  <F numberOfLines={1}ellipsizeMode="tail"style={[k.contentTabButtonText,w&&k.contentTabButtonTextActive]}>
+                    {e.label} {e.count>0?`(${A})`:""}
+                  </F>
+                  {(e.key==="apis"&&T||e.key==="logs"&&v||e.key==="crash"&&I)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                </C>
+              </G>})}
+      </Ce>
 
       
-      {canScrollRight && (<TouchableOpacity onPress={() => scrollTabs(160)} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} activeOpacity={0.7} style={{
-                paddingLeft: 2,
-                paddingRight: showMediaTab ? 4 : 8,
-                justifyContent: 'center',
-                alignItems: 'center',
-            }}>
-          <View style={{
-                width: 22,
-                height: 22,
-                borderRadius: 11,
-                backgroundColor: '#E5E7EB',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-            <ChevronIcon direction="right" size={13} color={AppColors.purple}/>
-          </View>
-        </TouchableOpacity>)}
+      {M&&<U onPress={()=>W(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:z?4:8,justifyContent:"center",alignItems:"center"}}>
+          <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
+            <Q direction="right"size={13}color={o.purple}/>
+          </C>
+        </U>}
 
       
-      {showMediaTab && (<View style={{
-                paddingLeft: 6,
-                paddingRight: 10,
-                borderLeftWidth: 1,
-                borderLeftColor: '#E5E7EB',
-                backgroundColor: '#ffffff',
-                justifyContent: 'center',
-                shadowColor: '#000000',
-                shadowOffset: { width: -3, height: 0 },
-                shadowOpacity: 0.12,
-                shadowRadius: 4,
-                elevation: 4,
-                zIndex: 10,
-            }}>
-          <TouchableScale key="media" onPress={() => {
-                switchActiveTab('media');
-            }} accessibilityRole="button" accessibilityLabel="Media Gallery" style={[
-                styles.contentTabButton,
-                {
-                    marginRight: 0,
-                    borderRadius: 8,
-                    backgroundColor: isMediaActive ? AppColors.purple : '#eeeeee',
-                    borderColor: isMediaActive ? AppColors.purple : '#E5E7EB',
-                    borderWidth: 1,
-                    paddingHorizontal: 10,
-                    paddingVertical: 7,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                },
-                isMediaActive && styles.contentTabButtonActive,
-            ]}>
-            <View style={{
-                position: 'relative',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-              <ScreencastIcon color={isMediaActive ? AppColors.white : AppColors.grayText} size={15}/>
-              {mediaCount > 0 && (<View style={{
-                    position: 'absolute',
-                    top: -3,
-                    right: -4,
-                    width: 7,
-                    height: 7,
-                    borderRadius: 3.5,
-                    backgroundColor: isMediaActive
-                        ? AppColors.emerald400
-                        : AppColors.purple,
-                    borderWidth: 1.2,
-                    borderColor: isMediaActive
-                        ? AppColors.purple
-                        : AppColors.white,
-                }}/>)}
-            </View>
-          </TouchableScale>
-        </View>)}
-    </View>);
-});
-export default TabBar;
+      {z&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:o.dividerColor,backgroundColor:o.primaryLight,justifyContent:"center",shadowColor:o.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
+          <G key="media"onPress={()=>{B("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[k.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:S?o.purple:o.graySurface,borderColor:S?o.purple:o.dividerColor,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},S&&k.contentTabButtonActive]}>
+            <C style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
+              <De color={S?o.white:o.grayText}size={15}/>
+              {j>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:S?o.emerald400:o.purple,borderWidth:1.2,borderColor:S?o.purple:o.white}}/>}
+            </C>
+          </G>
+        </C>}
+    </C>});export default $e;