react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/esm/components/AnalyticsEventCard.js

@@ -1,355 +1,97 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, Text, View } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import { formatGap, formatTime, getEventColor, getEventCategory, getCategoryColors, } from '../helpers';
-import { useTranslation } from '../i18n';
-import HighlightText from './HighlightText';
-import TouchableScale from './TouchableScale';
-import { CartIcon, MoneyIcon, GlobeIcon, BoltIcon, SparkleIcon, ClockIcon, } from './NetworkIcons';
-const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
-    const { t } = useTranslation();
-    const color = getEventColor(event.name);
-    const paramCount = event.params ? Object.keys(event.params).length : 0;
-    const userPropCount = event.userProperties
-        ? Object.keys(event.userProperties).length
-        : 0;
-    const catKey = getEventCategory(event.name);
-    const tagColors = getCategoryColors(catKey);
-    const flashOpacity = useRef(new Animated.Value(isNew ? 1 : 0)).current;
-    useEffect(() => {
-        if (isNew) {
-            Animated.timing(flashOpacity, {
-                toValue: 0,
-                duration: 1200,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [isNew]);
-    const showGap = msSincePrev != null && msSincePrev >= 2000;
-    const categoryLabel = catKey === 'page_view'
-        ? t('analytics.pageViewCategory')
-        : catKey === 'ecommerce'
-            ? t('analytics.ecommerceCategory')
-            : catKey === 'system'
-                ? t('analytics.systemCategory')
-                : t('analytics.customCategory');
-    return (<View style={cardStyles.container}>
+import K,{useEffect as U,useRef as q}from"react";import{Animated as F,StyleSheet as $,Text as V,View as C}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as T}from"../styles/AppFonts";import{formatGap as Q,formatTime as X,getEventColor as Y,getEventCategory as Z,getCategoryColors as v}from"../helpers";import{useTranslation as ee}from"../i18n";import Ce from"./HighlightText";import Te from"./TouchableScale";import{CartIcon as L,MoneyIcon as Be,GlobeIcon as Ve,BoltIcon as Se,SparkleIcon as O,ClockIcon as Re}from"./NetworkIcons";const Ie=K.memo(function({event:o,onPress:j,isNew:I=!1,searchStr:A="",msSincePrev:W,computedScreenName:P}){const{t:S}=ee(),E=Y(o.name),_=o.params?Object.keys(o.params).length:0,D=o.userProperties?Object.keys(o.userProperties).length:0,z=Z(o.name),B=v(z),H=q(new F.Value(I?1:0)).current;U(()=>{I&&F.timing(H,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[I]);const N=W!=null&&W>=2e3,G=S(z==="page_view"?"analytics.pageViewCategory":z==="ecommerce"?"analytics.ecommerceCategory":z==="system"?"analytics.systemCategory":"analytics.customCategory");return<C style={r.container}>
       
-      {showGap && (<View style={cardStyles.gapContainer}>
-          <View style={cardStyles.gapLine}/>
-          <Text style={[cardStyles.gapText, { color: AppColors.grayTextWeak }]}>
-            +{formatGap(msSincePrev)}
-          </Text>
-          <View style={cardStyles.gapLine}/>
-        </View>)}
+      {N&&<C style={r.gapContainer}>
+          <C style={r.gapLine}/>
+          <V style={[r.gapText,{color:e.grayTextWeak}]}>
+            +{Q(W)}
+          </V>
+          <C style={r.gapLine}/>
+        </C>}
 
       
-      <TouchableScale onPress={onPress} style={[
-            cardStyles.modernCard,
-            {
-                borderLeftWidth: 3.5,
-                borderLeftColor: tagColors.text,
-            },
-        ]}>
-        {isNew && (<Animated.View style={[
-                StyleSheet.absoluteFill,
-                {
-                    backgroundColor: color,
-                    opacity: flashOpacity.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, 0.08],
-                    }),
-                },
-            ]}/>)}
+      <Te onPress={j}style={[r.modernCard,{borderLeftWidth:3.5,borderLeftColor:B.text}]}>
+        {I&&<F.View style={[$.absoluteFill,{backgroundColor:E,opacity:H.interpolate({inputRange:[0,1],outputRange:[0,.08]})}]}/>}
 
         
-        <View style={cardStyles.cardHeader}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 7, flex: 1 }}>
+        <C style={r.cardHeader}>
+          <C style={{flexDirection:"row",alignItems:"center",gap:6,flex:1}}>
             
-            <View style={[
-            cardStyles.iconBadge,
-            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
-        ]}>
-              {catKey === 'ecommerce' ? (<CartIcon color={tagColors.text} size={12}/>) : catKey === 'page_view' ? (<GlobeIcon color={tagColors.text} size={12}/>) : catKey === 'system' ? (<BoltIcon color={tagColors.text} size={12}/>) : (<SparkleIcon color={tagColors.text} size={12}/>)}
-            </View>
+            <C style={r.idBadge}>
+              <V style={r.idBadgeText}>
+                #{o.id!=null?o.id+1:1}
+              </V>
+            </C>
 
             
-            <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: AppColors.primaryBlack }]} highlightStyle={cardStyles.highlight} numberOfLines={1}/>
+            <C style={[r.iconBadge,{backgroundColor:B.bg,borderColor:B.border}]}>
+              {z==="ecommerce"?<L color={B.text}size={12}/>:z==="page_view"?<Ve color={B.text}size={12}/>:z==="system"?<Se color={B.text}size={12}/>:<O color={B.text}size={12}/>}
+            </C>
 
             
-            <View style={[
-            cardStyles.categoryBadge,
-            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
-        ]}>
-              <Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
-                {categoryLabel}
-              </Text>
-            </View>
+            <Ce text={o.name}search={A}style={[r.eventName,{color:e.primaryBlack}]}highlightStyle={r.highlight}numberOfLines={1}/>
 
             
-            {event.count !== undefined && event.count > 0 ? (<View style={[
-                cardStyles.duplicateBadge,
-                event.count === 1 && {
-                    backgroundColor: AppColors.grayBackground,
-                    borderColor: AppColors.grayBorderSecondary,
-                },
-            ]}>
-                <Text style={[
-                cardStyles.duplicateText,
-                event.count === 1 && { color: AppColors.grayTextStrong },
-            ]}>
-                  {event.count}×
-                </Text>
-              </View>) : null}
-          </View>
+            <C style={[r.categoryBadge,{backgroundColor:B.bg,borderColor:B.border}]}>
+              <V style={[r.categoryText,{color:B.text}]}>
+                {G}
+              </V>
+            </C>
+
+            
+            {o.count!==void 0&&o.count>0?<C style={[r.duplicateBadge,o.count===1&&{backgroundColor:e.grayBackground,borderColor:e.grayBorderSecondary}]}>
+                <V style={[r.duplicateText,o.count===1&&{color:e.grayTextStrong}]}>
+                  {o.count}×
+                </V>
+              </C>:null}
+          </C>
 
           
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
-            <ClockIcon color={AppColors.grayTextWeak} size={10}/>
-            <Text style={[cardStyles.timestamp, { color: AppColors.grayTextWeak }]}>
-              {formatTime(event.timestamp)}
-            </Text>
-          </View>
-        </View>
+          <C style={{flexDirection:"row",alignItems:"center",gap:3}}>
+            <Re color={e.grayTextWeak}size={10}/>
+            <V style={[r.timestamp,{color:e.grayTextWeak}]}>
+              {X(o.timestamp)}
+            </V>
+          </C>
+        </C>
 
         
-        <View style={cardStyles.cardBody}>
-          <View style={cardStyles.chipsRow}>
-            {(() => {
-            const rawScreenName = computedScreenName ||
-                event.screenName ||
-                event.params?.firebase_screen ||
-                event.params?.screen_name ||
-                event.params?.firebase_screen_class;
-            if (!rawScreenName)
-                return null;
-            const screenNameStr = typeof rawScreenName === 'object'
-                ? JSON.stringify(rawScreenName)
-                : String(rawScreenName);
-            return (<View style={[
-                    cardStyles.chip,
-                    {
-                        backgroundColor: `${AppColors.amber500}12`,
-                        borderColor: `${AppColors.amber500}2E`,
-                    },
-                ]}>
-                  <View style={[cardStyles.screenDot, { backgroundColor: AppColors.amber500 }]}/>
-                  <Text style={[cardStyles.chipText, { color: AppColors.amber700, fontFamily: AppFonts.interBold }]} numberOfLines={1}>
-                    {screenNameStr}
-                  </Text>
-                </View>);
-        })()}
+        <C style={r.cardBody}>
+          <C style={r.chipsRow}>
+            {(()=>{const w=P||o.screenName||o.params?.firebase_screen||o.params?.screen_name||o.params?.firebase_screen_class;if(!w)return null;const R=typeof w=="object"?JSON.stringify(w):String(w);return<C style={[r.chip,{backgroundColor:`${e.amber500}12`,borderColor:`${e.amber500}2E`}]}>
+                  <C style={[r.screenDot,{backgroundColor:e.amber500}]}/>
+                  <V style={[r.chipText,{color:e.amber700,fontFamily:T.interBold}]}numberOfLines={1}>
+                    {R}
+                  </V>
+                </C>})()}
 
-            <View style={[
-            cardStyles.chip,
-            {
-                backgroundColor: AppColors.grayBackground,
-                borderColor: AppColors.grayBorderSecondary,
-            },
-        ]}>
-              <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>
-                {'{} '} {paramCount} {t('analytics.params')}
-              </Text>
-            </View>
+            <C style={[r.chip,{backgroundColor:e.grayBackground,borderColor:e.grayBorderSecondary}]}>
+              <V style={[r.chipText,{color:e.grayText}]}>
+                {"{} "} {_} {S("analytics.params")}
+              </V>
+            </C>
 
-            {userPropCount > 0 && (<View style={[
-                cardStyles.chip,
-                {
-                    backgroundColor: `${AppColors.brandPurple}10`,
-                    borderColor: `${AppColors.brandPurple}25`,
-                },
-            ]}>
-                <SparkleIcon color={AppColors.brandPurple} size={10}/>
-                <Text style={[cardStyles.chipText, { color: AppColors.brandPurple, fontFamily: AppFonts.interBold }]}>
-                  {userPropCount} {t('analytics.props')}
-                </Text>
-              </View>)}
+            {D>0&&<C style={[r.chip,{backgroundColor:`${e.brandPurple}10`,borderColor:`${e.brandPurple}25`}]}>
+                <O color={e.brandPurple}size={10}/>
+                <V style={[r.chipText,{color:e.brandPurple,fontFamily:T.interBold}]}>
+                  {D} {S("analytics.props")}
+                </V>
+              </C>}
 
-            {(() => {
-            const items = event.params?.items;
-            if (Array.isArray(items) && items.length > 0) {
-                return (<View style={[
-                        cardStyles.chip,
-                        {
-                            backgroundColor: AppColors.amberBg,
-                            borderColor: AppColors.amberBorder,
-                        },
-                    ]}>
-                    <CartIcon color={AppColors.amber700} size={11}/>
-                    <Text style={[
-                        cardStyles.chipText,
-                        {
-                            color: AppColors.amber700,
-                            fontFamily: AppFonts.interBold,
-                        },
-                    ]}>
-                      {items.length}{' '}
-                      {items.length === 1
-                        ? t('analytics.item')
-                        : t('analytics.items')}
-                    </Text>
-                  </View>);
-            }
-            return null;
-        })()}
+            {(()=>{const w=o.params?.items;return Array.isArray(w)&&w.length>0?<C style={[r.chip,{backgroundColor:e.amberBg,borderColor:e.amberBorder}]}>
+                    <L color={e.amber700}size={11}/>
+                    <V style={[r.chipText,{color:e.amber700,fontFamily:T.interBold}]}>
+                      {w.length}{" "}
+                      {w.length===1?S("analytics.item"):S("analytics.items")}
+                    </V>
+                  </C>:null})()}
 
-            {(() => {
-            const val = event.params?.value ?? event.params?.price;
-            const currency = event.params?.currency ?? '';
-            const isPrimitive = typeof val === 'string' || typeof val === 'number';
-            if (val != null && isPrimitive && String(val).trim() !== '') {
-                const currencyStr = typeof currency === 'string' && currency.trim() !== ''
-                    ? currency.toUpperCase()
-                    : '';
-                return (<View style={[
-                        cardStyles.chip,
-                        {
-                            backgroundColor: `${AppColors.emerald500}15`,
-                            borderColor: `${AppColors.emerald500}35`,
-                        },
-                    ]}>
-                    <MoneyIcon color={AppColors.emerald600} size={11}/>
-                    <Text style={[
-                        cardStyles.chipText,
-                        {
-                            color: AppColors.emerald600,
-                            fontFamily: AppFonts.interBold,
-                        },
-                    ]}>
-                      {String(val)} {currencyStr}
-                    </Text>
-                  </View>);
-            }
-            return null;
-        })()}
-          </View>
-        </View>
-      </TouchableScale>
-    </View>);
-});
-const cardStyles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 10,
-        paddingVertical: 3,
-    },
-    gapContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginVertical: 6,
-        gap: 8,
-    },
-    gapLine: {
-        flex: 1,
-        height: 1,
-        backgroundColor: `${AppColors.dividerColor}`,
-    },
-    gapText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    modernCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        padding: 10,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.03,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-        overflow: 'hidden',
-        gap: 8,
-    },
-    cardHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    iconBadge: {
-        width: 22,
-        height: 22,
-        borderRadius: 6,
-        borderWidth: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    eventName: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        letterSpacing: 0.1,
-        color: AppColors.primaryBlack,
-    },
-    timestamp: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    highlight: {
-        backgroundColor: AppColors.yellowHighlight,
-        color: AppColors.primaryBlack,
-        borderRadius: 2,
-    },
-    cardBody: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    chipsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-        gap: 6,
-        flex: 1,
-    },
-    chip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-        borderRadius: 5,
-        borderWidth: 1,
-        gap: 3.5,
-    },
-    chipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayText,
-    },
-    screenDot: {
-        width: 5,
-        height: 5,
-        borderRadius: 2.5,
-    },
-    duplicateBadge: {
-        backgroundColor: AppColors.roseBg,
-        borderColor: AppColors.roseBorder,
-        borderWidth: 1,
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-    },
-    duplicateText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.rose600,
-        textTransform: 'uppercase',
-    },
-    categoryBadge: {
-        borderWidth: 1,
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-    },
-    categoryText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        textTransform: 'uppercase',
-        letterSpacing: 0.4,
-    },
-});
-export default AnalyticsEventCard;
+            {(()=>{const w=o.params?.value??o.params?.price,R=o.params?.currency??"",M=typeof w=="string"||typeof w=="number";if(w!=null&&M&&String(w).trim()!==""){const J=typeof R=="string"&&R.trim()!==""?R.toUpperCase():"";return<C style={[r.chip,{backgroundColor:`${e.emerald500}15`,borderColor:`${e.emerald500}35`}]}>
+                    <Be color={e.emerald600}size={11}/>
+                    <V style={[r.chipText,{color:e.emerald600,fontFamily:T.interBold}]}>
+                      {String(w)} {J}
+                    </V>
+                  </C>}return null})()}
+          </C>
+        </C>
+      </Te>
+    </C>}),r=$.create({container:{paddingHorizontal:10,paddingVertical:3},gapContainer:{flexDirection:"row",alignItems:"center",justifyContent:"center",marginVertical:6,gap:8},gapLine:{flex:1,height:1,backgroundColor:`${e.dividerColor}`},gapText:{fontFamily:T.interBold,fontSize:9.5,color:e.grayTextWeak,letterSpacing:.5},modernCard:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.dividerColor,padding:10,shadowColor:e.black,shadowOpacity:.03,shadowRadius:3,shadowOffset:{width:0,height:1},elevation:1,overflow:"hidden",gap:8},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},iconBadge:{width:22,height:22,borderRadius:6,borderWidth:1,alignItems:"center",justifyContent:"center"},eventName:{fontFamily:T.interBold,fontSize:13,letterSpacing:.1,color:e.primaryBlack},timestamp:{fontFamily:T.interMedium,fontSize:10,color:e.grayTextWeak},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},cardBody:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},chipsRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6,flex:1},chip:{flexDirection:"row",alignItems:"center",paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,borderWidth:1,gap:3.5},chipText:{fontFamily:T.interMedium,fontSize:10,color:e.grayText},screenDot:{width:5,height:5,borderRadius:2.5},duplicateBadge:{backgroundColor:e.roseBg,borderColor:e.roseBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},duplicateText:{fontFamily:T.interBold,fontSize:9,color:e.rose600,textTransform:"uppercase"},idBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:6,backgroundColor:`${e.slate500}12`,borderWidth:1,borderColor:`${e.slate500}22`},idBadgeText:{fontFamily:T.interBold,fontSize:10,color:e.grayTextWeak,letterSpacing:.2},categoryBadge:{borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},categoryText:{fontFamily:T.interBold,fontSize:8.5,textTransform:"uppercase",letterSpacing:.4}});export default Ie;