react-native-inapp-inspector 1.1.24 → 1.1.26

package/dist/commonjs/components/Inspector/InspectorContext.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.animateNextLayout = exports.useInspector = exports.InspectorContext = void 0;
+exports.animateNextLayout = exports.useInspector = exports.InspectorContext = exports.LogFilter = exports.SettingsSubTab = exports.SettingsPage = exports.ModalAnimationType = void 0;
 const react_1 = require("react");
+var types_1 = require("../../types");
+Object.defineProperty(exports, "ModalAnimationType", { enumerable: true, get: function () { return types_1.ModalAnimationType; } });
+Object.defineProperty(exports, "SettingsPage", { enumerable: true, get: function () { return types_1.SettingsPage; } });
+Object.defineProperty(exports, "SettingsSubTab", { enumerable: true, get: function () { return types_1.SettingsSubTab; } });
+Object.defineProperty(exports, "LogFilter", { enumerable: true, get: function () { return types_1.LogFilter; } });
 exports.InspectorContext = (0, react_1.createContext)(null);
 const useInspector = () => {
     const ctx = (0, react_1.useContext)(exports.InspectorContext);

package/dist/commonjs/components/Inspector/InspectorHeader.js

@@ -50,7 +50,7 @@ const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, } = (0, InspectorContext_1.useInspector)();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -89,7 +89,8 @@ const InspectorHeader = react_1.default.memo(() => {
     const isDetailView = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'crash' && selectedCrash != null);
     const isAnySelected = isDetailView;
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} style={styles_1.default.headerGradient}>
@@ -100,8 +101,9 @@ const InspectorHeader = react_1.default.memo(() => {
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 16,
-                flex: !isDetailView ? 5 : 1,
+                gap: 12,
+                flex: !isDetailView ? 1 : 0,
+                minWidth: 0,
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
@@ -111,6 +113,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 setSelectedLog(null);
                 setSelectedReduxSlice(null);
                 setSelectedReduxAction(null);
+                setSelectedCrash(null);
             });
         }} hitSlop={15} style={[
             {
@@ -232,10 +235,14 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderColor: `${AppColors_1.AppColors.white}2E`,
                 }}>
                         <react_native_1.View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3.5,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors_1.AppColors.white}47`,
                 }}>
+                          {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={AppColors_1.AppColors.white} size={10}/>) : (<NetworkIcons_1.AndroidIcon color={AppColors_1.AppColors.white} size={10}/>)}
                           <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 9,
@@ -247,7 +254,7 @@ const InspectorHeader = react_1.default.memo(() => {
                         </react_native_1.View>
                         <react_native_1.View style={{
                     paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors_1.AppColors.white}1F`,
                 }}>
                           <react_native_1.Text style={{
@@ -268,10 +275,14 @@ const InspectorHeader = react_1.default.memo(() => {
                     borderColor: `${AppColors_1.AppColors.white}2E`,
                 }}>
                         <react_native_1.View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3.5,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2.5,
                     backgroundColor: `${AppColors_1.AppColors.white}47`,
                 }}>
+                          <NetworkIcons_1.PackageBoxIcon color={AppColors_1.AppColors.white} size={10}/>
                           <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 9,
@@ -516,18 +527,58 @@ const InspectorHeader = react_1.default.memo(() => {
                       {selectedReduxAction.timestamp || 'Dispatched'}
                     </react_native_1.Text>
                   </react_native_1.View>
+                </react_native_1.View>) : activeTab === 'crash' && selectedCrash != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#D97706',
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedCrash.name || selectedCrash.message}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#F59E0B',
+                    },
+                ]}/>
+                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                    </react_native_1.Text>
+                    {selectedCrash.deviceInfo?.platform && (<>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {selectedCrash.deviceInfo.platform.toUpperCase()}
+                        </react_native_1.Text>
+                      </>)}
+                  </react_native_1.View>
                 </react_native_1.View>) : null}
             </react_native_1.View>)}
 
           <react_native_1.View style={[
             styles_1.default.headerRight,
-            !isAnySelected && {
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
                 flexShrink: 0,
-                minWidth: 116,
+                gap: 8,
             },
         ]}>
             {!isAnySelected && (<TouchableScale_1.default onPress={() => {
-                react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
+                react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
                         text: 'Clear All',
@@ -535,13 +586,7 @@ const InspectorHeader = react_1.default.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors_1.AppColors.white}26`,
-                },
-            ]}>
+            }} hitSlop={15} style={styles_1.default.closeButtonSquare}>
                 <react_native_1.Animated.View style={{
                 transform: [
                     {
@@ -562,15 +607,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors_1.AppColors.white}26`,
-                },
-            ]}>
+            {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={styles_1.default.closeButtonSquare}>
                 <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={16}/>
               </TouchableScale_1.default>)}