react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/InspectorHeader.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { NetworkLog, AnalyticsEvent, ConsoleLog } from '../types';
+interface InspectorHeaderProps {
+    headerTopPadding: number;
+    selected: NetworkLog | null;
+    selectedEvent: AnalyticsEvent | null;
+    selectedConsoleLog: ConsoleLog | null;
+    detailTitle: string;
+    showHeaderInfo: boolean;
+    clearAnim: Animated.Value;
+    onBack: () => void;
+    onToggleHeaderInfo: () => void;
+    onClearAll: () => void;
+    onOpenSettings: () => void;
+    onCloseModal: () => void;
+}
+export declare const InspectorHeader: React.FC<InspectorHeaderProps>;
+export default InspectorHeader;

package/dist/esm/components/InspectorHeader.js

@@ -0,0 +1,323 @@
+import React from 'react';
+import { Alert, Animated, Text, View, } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import { WhiteBackNavigation, WipeIcon, SettingsIcon, CloseWhite, ClockIcon, BrandCircleIcon, ChevronIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
+import { METHOD_COLORS, LIB_VERSION } from '../constants';
+import { getStatusColor, getAppName } from '../helpers';
+export const InspectorHeader = React.memo(({ headerTopPadding, selected, selectedEvent, selectedConsoleLog, detailTitle, showHeaderInfo, clearAnim, onBack, onToggleHeaderInfo, onClearAll, onOpenSettings, onCloseModal, }) => {
+    const { t } = useTranslation();
+    const isNoDetailSelected = selected == null && selectedEvent == null && selectedConsoleLog == null;
+    return (<LinearGradient colors={[AppColors.purple, AppColors.gradientPurpleStart]} style={styles.headerGradient}>
+      <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
+        <View style={styles.header}>
+          <View style={[
+            styles.headerLeft,
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                flex: isNoDetailSelected ? 5 : 1,
+            },
+        ]}>
+            <TouchableScale onPress={onBack} hitSlop={15} style={[
+            {
+                width: 38,
+                height: 38,
+                borderRadius: 19,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(255,255,255,0.18)',
+                borderWidth: 1,
+                borderColor: 'rgba(255,255,255,0.30)',
+            },
+            isNoDetailSelected && { display: 'none' },
+        ]}>
+              <View style={{
+            position: 'absolute',
+            width: 48,
+            height: 48,
+            borderRadius: 24,
+            backgroundColor: 'rgba(255,255,255,0.10)',
+        }}/>
+              <WhiteBackNavigation />
+            </TouchableScale>
+
+            {isNoDetailSelected ? (<TouchableScale onPress={onToggleHeaderInfo} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                <View style={{
+                width: 38,
+                height: 38,
+                borderRadius: 19,
+                backgroundColor: 'rgba(255,255,255,0.13)',
+                borderWidth: 1.5,
+                borderColor: 'rgba(255,255,255,0.25)',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+                  <BrandCircleIcon size={26} color={AppColors.white}/>
+                </View>
+                <View style={styles.columnFlex1}>
+                  <View style={styles.rowGap4}>
+                    <Text style={[
+                styles.headerTitle,
+                { fontSize: 16, color: AppColors.white },
+            ]}>
+                      {t('header.title')}
+                    </Text>
+                    <View style={{
+                transform: [
+                    { rotate: showHeaderInfo ? '180deg' : '0deg' },
+                ],
+            }}>
+                      <ChevronIcon color="rgba(255,255,255,0.7)" size={12}/>
+                    </View>
+                  </View>
+
+                  {showHeaderInfo && (<View style={{
+                    marginTop: 4,
+                    padding: 8,
+                    backgroundColor: 'rgba(0,0,0,0.25)',
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: 'rgba(255,255,255,0.15)',
+                    gap: 4,
+                }}>
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors.white,
+                }}>
+                        {getAppName()}
+                      </Text>
+                      <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                        <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 10,
+                    color: 'rgba(255,255,255,0.8)',
+                }}>
+                          {t('header.engine')}
+                        </Text>
+                        <View style={{
+                    paddingHorizontal: 6,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                    backgroundColor: 'rgba(255,255,255,0.2)',
+                }}>
+                          <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors.white,
+                }}>
+                            v{LIB_VERSION}
+                          </Text>
+                        </View>
+                      </View>
+                    </View>)}
+                </View>
+              </TouchableScale>) : null}
+          </View>
+
+          {!isNoDetailSelected && (<View style={styles.headerCenter}>
+              {selected != null ? (<View style={styles.headerDetailCenter}>
+                  <View style={styles.headerDetailRow}>
+                    <View style={[
+                    styles.headerMethodBadge,
+                    {
+                        backgroundColor: METHOD_COLORS[selected.method] ??
+                            AppColors.grayText,
+                    },
+                ]}>
+                      <Text style={styles.headerMethodText}>
+                        {selected.method}
+                      </Text>
+                    </View>
+                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {detailTitle}
+                    </Text>
+                  </View>
+                  <View style={styles.headerDetailSubRow}>
+                    <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${getStatusColor(selected.status)}26`,
+                    borderWidth: 1,
+                    borderColor: `${getStatusColor(selected.status)}55`,
+                }}>
+                      <View style={[
+                    styles.headerStatusDot,
+                    {
+                        backgroundColor: getStatusColor(selected.status),
+                    },
+                ]}/>
+                      <Text style={[
+                    styles.headerSubTitle,
+                    { fontFamily: AppFonts.interBold },
+                ]}>
+                        {selected.status === 0
+                    ? 'Failed'
+                    : selected.status ?? 'Pending'}
+                      </Text>
+                    </View>
+                    <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: 'rgba(255,255,255,0.16)',
+                }}>
+                      <ClockIcon color={AppColors.white} size={11}/>
+                      <Text style={styles.headerSubTitle}>
+                        {selected.duration != null
+                    ? `${selected.duration}ms`
+                    : '—'}
+                      </Text>
+                    </View>
+                  </View>
+                </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
+                  <View style={styles.headerDetailRow}>
+                    <View style={[
+                    styles.headerMethodBadge,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? 'rgba(224,123,26,0.3)'
+                            : 'rgba(124,92,191,0.3)',
+                    },
+                ]}>
+                      <Text style={styles.headerMethodText}>
+                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                      </Text>
+                    </View>
+                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedEvent.name}
+                    </Text>
+                  </View>
+                  <View style={styles.headerDetailSubRow}>
+                    <View style={[
+                    styles.headerStatusDot,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? AppColors.amber
+                            : AppColors.purple,
+                    },
+                ]}/>
+                    <Text style={styles.headerSubTitle}>
+                      {Object.keys(selectedEvent.params ?? {}).length} param
+                      {Object.keys(selectedEvent.params ?? {}).length !== 1
+                    ? 's'
+                    : ''}
+                      {' · '}
+                      {selectedEvent.source}
+                    </Text>
+                  </View>
+                </View>) : selectedConsoleLog != null ? (<View style={styles.headerDetailCenter}>
+                  <View style={styles.headerDetailRow}>
+                    <View style={[
+                    styles.headerMethodBadge,
+                    {
+                        backgroundColor: selectedConsoleLog.type === 'error'
+                            ? AppColors.errorColor
+                            : selectedConsoleLog.type === 'warn'
+                                ? AppColors.lightOrange
+                                : AppColors.purple,
+                    },
+                ]}>
+                      <Text style={styles.headerMethodText}>
+                        {selectedConsoleLog.type?.toUpperCase() || 'LOG'}
+                      </Text>
+                    </View>
+                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {t('details.console_log')} #{selectedConsoleLog.id + 1}
+                    </Text>
+                  </View>
+                  <View style={styles.headerDetailSubRow}>
+                    <Text style={styles.headerSubTitle}>
+                      console.
+                      {selectedConsoleLog.sourceMethod ||
+                    selectedConsoleLog.type ||
+                    'log'}
+                    </Text>
+                  </View>
+                </View>) : null}
+            </View>)}
+
+          <View style={[
+            styles.headerRight,
+            isNoDetailSelected && {
+                flexShrink: 0,
+                minWidth: 116,
+            },
+        ]}>
+            {isNoDetailSelected && (<TouchableScale onPress={() => {
+                Alert.alert(t('header.clear_all'), t('header.clear_all_confirm'), [
+                    { text: t('header.cancel'), style: 'cancel' },
+                    {
+                        text: t('header.clear'),
+                        onPress: onClearAll,
+                        style: 'destructive',
+                    },
+                ]);
+            }} hitSlop={15} style={[
+                styles.closeButtonSquare,
+                {
+                    marginRight: 8,
+                    backgroundColor: 'rgba(255,255,255,0.15)',
+                },
+            ]}>
+                <Animated.View style={{
+                transform: [
+                    {
+                        rotate: clearAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: ['0deg', '-25deg'],
+                        }),
+                    },
+                    {
+                        scale: clearAnim.interpolate({
+                            inputRange: [0, 0.5, 1],
+                            outputRange: [1, 1.25, 1],
+                        }),
+                    },
+                ],
+            }}>
+                  <WipeIcon color={AppColors.white} size={16}/>
+                </Animated.View>
+              </TouchableScale>)}
+
+            {isNoDetailSelected && (<TouchableScale onPress={onOpenSettings} hitSlop={15} style={[
+                styles.closeButtonSquare,
+                {
+                    marginRight: 8,
+                    backgroundColor: 'rgba(255,255,255,0.15)',
+                },
+            ]}>
+                <SettingsIcon color={AppColors.white} size={16}/>
+              </TouchableScale>)}
+
+            <TouchableScale onPress={onCloseModal} hitSlop={15} style={styles.closeButtonSquare}>
+              <CloseWhite size={16}/>
+            </TouchableScale>
+          </View>
+        </View>
+      </View>
+    </LinearGradient>);
+});
+export default InspectorHeader;

package/dist/esm/components/InspectorTabBar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { ActiveTab } from '../types';
+interface InspectorTabBarProps {
+    activeTab: ActiveTab;
+    tabVisibility: Record<string, boolean>;
+    apisCount: number;
+    logsCount: number;
+    analyticsCount: number;
+    hasUnreadApis: boolean;
+    hasUnreadLogs: boolean;
+    unreadPulseAnim: Animated.Value;
+    onSelectTab: (tabKey: ActiveTab) => void;
+}
+export declare const InspectorTabBar: React.FC<InspectorTabBarProps>;
+export default InspectorTabBar;

package/dist/esm/components/InspectorTabBar.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Animated, ScrollView, Text, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, } from './NetworkIcons';
+import { InspectorTab } from '../enums';
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+export const InspectorTabBar = React.memo(({ activeTab, tabVisibility, apisCount, logsCount, analyticsCount, hasUnreadApis, hasUnreadLogs, unreadPulseAnim, onSelectTab, }) => {
+    const { t } = useTranslation();
+    const tabs = [
+        {
+            key: InspectorTab.APIs,
+            label: t('tabs.apis'),
+            count: apisCount,
+            hasUnread: hasUnreadApis,
+            icon: (color) => <SignalIcon color={color} size={14}/>,
+        },
+        {
+            key: InspectorTab.Logs,
+            label: t('tabs.logs'),
+            count: logsCount,
+            hasUnread: hasUnreadLogs,
+            icon: (color) => <TerminalIcon color={color} size={14}/>,
+        },
+        {
+            key: InspectorTab.Analytics,
+            label: t('tabs.analytics'),
+            count: analyticsCount,
+            hasUnread: false,
+            icon: (color) => <AnalyticsIcon color={color} size={14}/>,
+        },
+        {
+            key: InspectorTab.Redux,
+            label: t('tabs.redux'),
+            count: null,
+            hasUnread: false,
+            icon: (color) => (<View style={{ width: 14, height: 14, alignItems: 'center', justifyContent: 'center' }}>
+          <Text style={{ fontSize: 10, color, fontWeight: '700' }}>⚛︎</Text>
+        </View>),
+        },
+    ];
+    return (<View style={styles.tabBarContainer}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
+        {tabs
+            .filter(tab => tabVisibility?.[tab.key])
+            .map(tab => {
+            const isActive = activeTab === tab.key;
+            const iconColor = isActive ? AppColors.white : AppColors.grayText;
+            const countLabel = tab.count > 99 ? '99+' : String(tab.count);
+            const showUnread = (tab.key === 'apis' && hasUnreadApis) ||
+                (tab.key === 'logs' && hasUnreadLogs);
+            return (<TouchableScale key={tab.key} onPress={() => onSelectTab(tab.key)} style={[
+                    styles.contentTabButton,
+                    isActive && styles.contentTabButtonActive,
+                ]}>
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                  {typeof tab.icon === 'function' ? tab.icon(iconColor) : null}
+                  <Text numberOfLines={1} ellipsizeMode="tail" style={[
+                    styles.contentTabButtonText,
+                    isActive && styles.contentTabButtonTextActive,
+                ]}>
+                    {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
+                  </Text>
+                  {showUnread && (<Animated.View style={{
+                        width: 6,
+                        height: 6,
+                        borderRadius: 3,
+                        backgroundColor: AppColors.errorColor,
+                        marginLeft: 4,
+                        alignSelf: 'center',
+                        transform: [{ scale: unreadPulseAnim }],
+                    }}/>)}
+                </View>
+              </TouchableScale>);
+        })}
+      </ScrollView>
+    </View>);
+});
+export default InspectorTabBar;

package/dist/esm/components/JsonViewer.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, onModeChange, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, maxHeight, mode: externalMode, onModeChange, hideTabs, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
     wrap?: boolean;
     fullHeight?: boolean;
+    maxHeight?: number;
+    mode?: "pretty" | "raw" | "table";
     onModeChange?: (mode: "pretty" | "raw" | "table") => void;
+    hideTabs?: boolean;
 }) => React.JSX.Element;
 export default JsonViewer;