react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,183 +1,52 @@
-import React from 'react';
-import { Platform, ScrollView, Text, 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, } 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, unreadPulseAnim, } = useInspector();
-    const isReduxAvail = isReduxConnected();
-    const isAnalyticsAvail = isAnalyticsConnected();
-    return (<View style={styles.tabBarContainer}>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
-        {[
-            {
-                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>
-    </View>);
-});
-export default TabBar;
+import oe,{useRef as W,useState as $}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 Re,TerminalIcon as Te,AnalyticsIcon as Ie,PackageIcon as Se,ReduxIcon as Le,PerformanceIcon as Ae,CrashIcon as Ee,SmartphoneIcon as Be,DatabaseIcon as Ve,QrCodeIcon as Oe,ScreencastIcon as Pe,ChevronIcon as Q}from"../NetworkIcons";import{isReduxConnected as je}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as De}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as Me}from"../../helpers";const He=oe.memo(()=>{const{activeTab:T,switchActiveTab:E,tabVisibility:v,logs:B,consoleLogs:V,analyticsEvents:q,crashRecords:O,lastReadApisCount:J,lastReadLogsCount:K,lastReadCrashesCount:N,mediaCount:P}=we(),X=je(),Y=De(),R=T==="media",z=(v?.media??!0)&&P>0,j=W(null),[L,Z]=$(!1),[D,_]=$(!0),M=W(0),ee=e=>{const{contentOffset:w,layoutMeasurement:t,contentSize:A}=e.nativeEvent,I=w.x;M.current=I;const S=I>8,x=I<A.width-t.width-8;L!==S&&Z(S),D!==x&&_(x)},H=e=>{j.current?.scrollTo({x:Math.max(0,M.current+e),animated:!0})};return<C style={[k.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
+      
+      {L&&<U onPress={()=>H(-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:"#E5E7EB",alignItems:"center",justifyContent:"center"}}>
+            <Q direction="left"size={13}color={o.purple}/>
+          </C>
+        </U>}
+
+      
+      <Ce ref={j}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:B.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:V.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:O?.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"&&Me()&&!!v?.debugging:!(!v?.[e.key]||e.key==="redux"&&!X||e.key==="analytics"&&!Y)).map(e=>{const w=T===e.key,t=w?o.white:e.key==="crash"&&e.count>0?o.errorColor:o.grayText,A=e.count>9?"9+":String(e.count),I=T!=="apis"&&B.length>J,S=T!=="logs"&&V.length>K,x=T!=="crash"&&(O?.length||0)>(N||0);return<G key={e.key}onPress={()=>{E(e.key)}}style={[k.contentTabButton,w&&k.contentTabButtonActive]}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  {e.icon==="apis"&&<Re color={t}size={14}/>}
+                  {e.icon==="logs"&&<Te color={t}size={14}/>}
+                  {e.icon==="analytics"&&<Ie color={t}size={14}/>}
+                  {e.icon==="redux"&&<Le color={t}size={14}/>}
+                  {e.icon==="storage"&&<Ve color={t}size={14}/>}
+                  {e.icon==="device"&&<Be color={t}size={14}/>}
+                  {e.icon==="crash"&&<Ee color={t}size={14}/>}
+                  {e.icon==="bundle"&&<Se color={t}size={14}/>}
+                  {e.icon==="performance"&&<Ae color={t}size={14}/>}
+                  {e.icon==="debugging"&&<Oe 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"&&I||e.key==="logs"&&S||e.key==="crash"&&x)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                </C>
+              </G>})}
+      </Ce>
+
+      
+      {D&&<U onPress={()=>H(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:"#E5E7EB",alignItems:"center",justifyContent:"center"}}>
+            <Q direction="right"size={13}color={o.purple}/>
+          </C>
+        </U>}
+
+      
+      {z&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:"#E5E7EB",backgroundColor:"#ffffff",justifyContent:"center",shadowColor:"#000000",shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
+          <G key="media"onPress={()=>{E("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[k.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:R?o.purple:"#eeeeee",borderColor:R?o.purple:"#E5E7EB",borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},R&&k.contentTabButtonActive]}>
+            <C style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
+              <Pe color={R?o.white:o.grayText}size={15}/>
+              {P>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:R?o.emerald400:o.purple,borderWidth:1.2,borderColor:R?o.purple:o.white}}/>}
+            </C>
+          </G>
+        </C>}
+    </C>});export default He;