react-native-inapp-inspector 2.3.8 → 2.3.9

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

@@ -1,16 +1,18 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Alert, FlatList, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useTranslation } from '../../i18n';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import EndOfListFooter from '../EndOfListFooter';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import HighlightText from '../HighlightText';
+import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { clearCrashRecords, } from '../../customHooks/crashHandler';
 import CrashFilterModal, { DEFAULT_CRASH_FILTERS, isCrashFiltersDefault, } from './CrashFilterModal';
-import { SearchIcon, ClearIcon, TrashIcon, TerminalIcon, LayersIcon, ClockIcon, ShieldAlertIcon, FlameIcon, JsIcon, HourglassIcon, SkullIcon, LayoutIcon, ChipIcon, AppleIcon, AndroidIcon, RepeatIcon, CodeBracketsIcon, FilterIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, TerminalIcon, LayersIcon, ClockIcon, ShieldAlertIcon, FlameIcon, JsIcon, HourglassIcon, SkullIcon, LayoutIcon, ChipIcon, AppleIcon, AndroidIcon, RepeatIcon, CodeBracketsIcon, FilterIcon, ChevronIcon, } from '../NetworkIcons';
 const getRelativeTime = (timestamp) => {
     const now = Date.now();
     const diff = Math.max(0, now - timestamp);
@@ -29,6 +31,7 @@ const getRelativeTime = (timestamp) => {
 const CrashTab = React.memo(() => {
     const { t } = useTranslation();
     const { crashRecords, selectedCrash, setSelectedCrash } = useInspector();
+    const listRef = useRef(null);
     const [searchQuery, setSearchQuery] = useState('');
     const [filterType, setFilterType] = useState('all');
     const [crashFilters, setCrashFilters] = useState(DEFAULT_CRASH_FILTERS);
@@ -349,6 +352,8 @@ const CrashTab = React.memo(() => {
               </TouchableScale>
             </View>
 
+            <FeatureUnderDevNotice featureName="Crash & Exception Sentinel"/>
+
             
             <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
               {[
@@ -403,7 +408,31 @@ const CrashTab = React.memo(() => {
                 Clear Search
               </Text>
             </TouchableScale>)}
-        </ScrollView>) : (<FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>)}
+        </ScrollView>) : (<>
+          <FlatList ref={listRef} data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>
+
+          <TouchableScale onPress={() => {
+                try {
+                    listRef.current?.scrollToOffset({
+                        offset: 0,
+                        animated: true,
+                    });
+                }
+                catch {
+                    try {
+                        listRef.current?.scrollToIndex({
+                            index: 0,
+                            animated: true,
+                        });
+                    }
+                    catch { }
+                }
+            }} hitSlop={12} style={styles.scrollTopBtn}>
+            <View style={{ transform: [{ rotate: '180deg' }] }}>
+              <ChevronIcon color={AppColors.white} size={18}/>
+            </View>
+          </TouchableScale>
+        </>)}
 
       
       <CrashFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>

package/dist/esm/components/Inspector/FeatureUnderDevNotice.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FeatureUnderDevNoticeProps {
+    featureName?: string;
+    compact?: boolean;
+}
+export declare const FeatureUnderDevNotice: React.FC<FeatureUnderDevNoticeProps>;
+export default FeatureUnderDevNotice;

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

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, Pressable } from 'react-native';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import { WarningTriangleIcon, ClearIcon } from '../NetworkIcons';
+export const FeatureUnderDevNotice = ({ featureName, compact = false, }) => {
+    const [isDismissed, setIsDismissed] = useState(false);
+    if (isDismissed)
+        return null;
+    return (<View style={[styles.container, compact && styles.containerCompact]}>
+      <View style={styles.contentRow}>
+        <View style={styles.badgeWrap}>
+          <WarningTriangleIcon color={AppColors.warningIconGold} size={12}/>
+          <Text style={styles.badgeText}>IN ACTIVE DEVELOPMENT</Text>
+        </View>
+
+        <Pressable onPress={() => setIsDismissed(true)} hitSlop={8} style={styles.dismissBtn} accessible={true} accessibilityRole="button" accessibilityLabel="Dismiss notice">
+          <ClearIcon color={AppColors.grayTextWeak} size={11}/>
+        </Pressable>
+      </View>
+
+      <Text style={styles.messageText}>
+        {featureName ? `${featureName} is` : 'This module is'} currently in active
+        development. Results and metrics may vary in accuracy. We are continuously
+        improving this feature for upcoming releases.
+      </Text>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        marginHorizontal: 12,
+        marginTop: 8,
+        marginBottom: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 9,
+        borderRadius: 8,
+        backgroundColor: `${AppColors.warningIconGold}12`,
+        borderWidth: 1,
+        borderColor: `${AppColors.warningIconGold}30`,
+    },
+    containerCompact: {
+        marginTop: 4,
+        marginBottom: 4,
+        paddingVertical: 7,
+        paddingHorizontal: 10,
+    },
+    contentRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 4,
+    },
+    badgeWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4.5,
+    },
+    badgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.warningIconGold,
+        letterSpacing: 0.4,
+    },
+    dismissBtn: {
+        padding: 2,
+    },
+    messageText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors.grayText,
+        lineHeight: 15,
+    },
+});
+export default FeatureUnderDevNotice;