react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,49 +1,85 @@
-import React from 'react';
-import { Animated, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import BrandCircleIcon from '../BrandCircleIcon';
-import { AppColors } from '../../styles/AppColors';
-import styles from '../../styles';
-const FabLauncher = () => {
-    const { setVisible, fabPan, fabPanResponder, fabDraggedRef, pulseAnim, fabShineAnim, unreadPulseAnim, logs, analyticsEvents, } = useInspector();
-    return (<Animated.View style={[styles.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
-      <TouchableScale style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
-            if (fabDraggedRef.current)
-                return;
-            setVisible(true);
-        }} hitSlop={10}>
-        <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
-        <BrandCircleIcon size={62}/>
-        
-        <View pointerEvents="none" style={styles.fabShineClip}>
-          <Animated.View style={[
-            styles.fabShineStreak,
-            {
-                transform: [
-                    {
-                        translateX: fabShineAnim.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [-48, 96],
-                        }),
-                    },
-                    { rotate: '25deg' },
-                ],
-            },
-        ]}>
-            <LinearGradient colors={[
-            `${AppColors.white}00`,
-            `${AppColors.white}8C`,
-            `${AppColors.white}00`,
-        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
-          </Animated.View>
-        </View>
-        {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
-                styles.fabGreenDot,
-                { transform: [{ scale: unreadPulseAnim }] },
-            ]}/>)}
-      </TouchableScale>
-    </Animated.View>);
-};
-export default FabLauncher;
+import{useCallback as O,useEffect as F,useRef as B,useState as W}from"react";import{Animated as s,PanResponder as de,Platform as q,StyleSheet as pe,Text as M,TouchableOpacity as Se,useWindowDimensions as xe,View as S}from"react-native";import H from"react-native-linear-gradient";import{useInspector as Re}from"./InspectorContext";import A from"../TouchableScale";import Ce from"../AppHeaderLogo";import Te from"../BrandCircleIcon";import{AndroidIcon as Ie,AppleIcon as Ve,CameraIcon as Pe,CloseWhite as Be,MaximizeIcon as Me,NpmIcon as Ae,VideoCameraIcon as $e}from"../NetworkIcons";import{ScreenCapture as V}from"../../capture";import{triggerNativeHaptic as x}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{getAppName as Ee,getAppVersionAndBuild as Le}from"../../helpers";import{LIB_VERSION as De}from"../../constants";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as _}from"../../styles/AppFonts";import $ from"../../styles";import{useTranslation as Oe}from"../../i18n";import{MediaPreviewModal as We}from"./MediaPreviewModal";const ke=()=>{const{setVisible:z,isMinimized:X,setIsMinimized:E,appIcon:Y,fabPan:J,fabPanResponder:K,fabDraggedRef:Q,pulseAnim:U,fabShineAnim:G,unreadPulseAnim:Z,logs:ee,analyticsEvents:te,refreshMediaCount:C}=Re(),{width:re}=xe(),{t:o}=Oe(),[ie]=W(()=>Le().formatted),[a,L]=W(!1),[oe,k]=W(0),T=B(null),[N,P]=W(null),n=B(new s.ValueXY({x:0,y:0})).current,D=B({x:0,y:0});F(()=>{const e=n.x.addListener(I=>D.current.x=I.value),r=n.y.addListener(I=>D.current.y=I.value);return()=>{n.x.removeListener(e),n.y.removeListener(r)}},[n]);const R=B(!1),ne=B(de.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,r)=>Math.abs(r.dx)>4||Math.abs(r.dy)>4,onPanResponderGrant:()=>{R.current=!0,n.setOffset({x:D.current.x,y:D.current.y}),n.setValue({x:0,y:0})},onPanResponderMove:s.event([null,{dx:n.x,dy:n.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{n.flattenOffset(),setTimeout(()=>{R.current=!1},50)},onPanResponderTerminate:()=>{n.flattenOffset(),R.current=!1}})).current;F(()=>{V.isRecording().then(e=>{L(!!e)}).catch(()=>{})},[]),F(()=>(a?(k(0),T.current=setInterval(()=>{k(e=>e+1)},1e3)):(T.current&&(clearInterval(T.current),T.current=null),k(0)),()=>{T.current&&clearInterval(T.current)}),[a]);const ae=O(async()=>{if(!R.current)try{x("light");const e=await V.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){x("success");const r={id:`screenshot_${e.timestamp}.png`,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`screenshot_${e.timestamp}.png`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};P(r),C?.().catch(()=>{}),v(o("header.screenshotCaptured","Screenshot captured"))}else v(o("header.screenshotFailed","Failed to capture screenshot"))}catch{v(o("header.screenshotError","Error capturing screenshot"))}},[C,o]),se=O(async()=>{if(!R.current)try{if(a){x("medium");const e=await V.stopRecording();if(L(!1),e){x("success");const r={id:`video_${e.timestamp}.${e.format}`,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`video_${e.timestamp}.${e.format}`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio};P(r),C?.().catch(()=>{}),v(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else x("medium"),await V.startRecording({fps:24,audioSource:"none"})?(L(!0),v(o("header.recordingStarted","Recording started"))):v(o("header.recordingStartFailed","Failed to start recording"))}catch{v(o("header.recordingError","Error during screen recording")),L(!1)}},[a,C,o]),j=O(()=>{R.current||(x("light"),E?.(!1),z(!0))},[E,z]),le=O(()=>{R.current||(x("light"),E?.(!1),z(!1))},[E,z]),ce=e=>{const r=Math.floor(e/60),I=e%60;return`${r}:${I<10?"0":""}${I}`};return<>
+      
+      {X?<s.View style={[t.playerContainer,{transform:n.getTranslateTransform()}]}{...ne.panHandlers}>
+          
+          <H colors={[i.indigo600,i.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.gradientBg}pointerEvents="none"/>
+
+          
+          <S pointerEvents="none"style={t.playerShineClip}>
+            <s.View style={[t.playerShineStreak,{transform:[{translateX:G.interpolate({inputRange:[0,1],outputRange:[-80,re+80]})},{rotate:"28deg"}]}]}>
+              <H colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0)"]}locations={[0,.22,.44,.5,.56,.78,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
+            </s.View>
+          </S>
+
+          
+          <Se activeOpacity={.75}onPress={j}style={t.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
+            <Ce size={36}customIcon={Y}/>
+            <S style={t.titleWrapper}>
+              <M style={t.appTitle}numberOfLines={1}>
+                {Ee()}
+              </M>
+              <S style={t.versionRow}>
+                
+                <S style={t.versionChip}>
+                  {q.OS==="ios"?<Ve color={`${i.white}E6`}size={9}/>:<Ie color={`${i.white}E6`}size={9}/>}
+                  <M style={t.versionChipText}numberOfLines={1}>
+                    {ie}
+                  </M>
+                </S>
+
+                
+                <S style={t.versionChip}>
+                  <Ae size={9}color={i.npmRedLight}/>
+                  <M style={t.versionChipText}numberOfLines={1}>
+                    v{De}
+                  </M>
+                </S>
+              </S>
+            </S>
+          </Se>
+
+          
+          <S style={t.actionsRow}>
+            
+            <A onPress={ae}hitSlop={{top:6,bottom:6,left:4,right:4}}style={t.actionBtn}>
+              <Pe size={12}color={i.white}/>
+              <M style={t.actionText}>
+                {o("header.photo","Photo")}
+              </M>
+            </A>
+
+            
+            <A onPress={se}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[t.actionBtn,a&&t.recordingBtnActive]}>
+              {a?<S style={t.recordingDot}/>:<$e size={12}color={i.white}/>}
+              <M style={[t.actionText,a&&{color:i.red300}]}>
+                {a?`${o("header.rec","REC")} ${ce(oe)}`:o("header.record","Record")}
+              </M>
+            </A>
+
+            
+            <A onPress={j}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={t.actionBtnSquare}>
+              <Me size={12}color={i.white}/>
+            </A>
+
+            
+            <A onPress={le}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={t.actionBtnSquare}>
+              <Be size={10}color={i.white}/>
+            </A>
+          </S>
+        </s.View>:<s.View style={[$.fabWrapper,{transform:J.getTranslateTransform()}]}{...K.panHandlers}>
+          <A style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{Q.current||(x("light"),z(!0))}}hitSlop={10}>
+            <s.View style={[$.fabPulseRing,{transform:[{scale:U}]}]}/>
+            <Te size={62}/>
+            
+            <S pointerEvents="none"style={$.fabShineClip}>
+              <s.View style={[$.fabShineStreak,{transform:[{translateX:G.interpolate({inputRange:[0,1],outputRange:[-48,96]})},{rotate:"25deg"}]}]}>
+                <H colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0.95)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0)"]}locations={[0,.25,.5,.75,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
+              </s.View>
+            </S>
+            {(ee.length>0||te.length>0)&&<s.View style={[$.fabGreenDot,{transform:[{scale:Z}]}]}/>}
+          </A>
+        </s.View>}
+
+      
+      <We item={N}visible={!!N}onClose={()=>P(null)}onDelete={async e=>{await V.deleteMedia(e.uri),C?.().catch(()=>{}),P(null)}}onConvertToGif={async e=>{const r=await V.convertToGif(e.uri,{fps:12,width:480});r&&(C?.().catch(()=>{}),P({id:`anim_${r.timestamp}.gif`,type:"gif",format:"gif",uri:r.uri,filename:r.uri.split("/").pop()||`anim_${r.timestamp}.gif`,sizeBytes:r.sizeBytes,timestamp:r.timestamp,durationMs:r.durationMs}))}}/>
+    </>},t=pe.create({playerContainer:{position:"absolute",bottom:q.OS==="ios"?34:18,left:12,right:12,minHeight:58,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.28)",paddingHorizontal:12,paddingVertical:7,gap:8,zIndex:99999,elevation:25,shadowColor:i.indigo600,shadowOffset:{width:0,height:8},shadowOpacity:.45,shadowRadius:14,overflow:"hidden"},gradientBg:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16},playerShineClip:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16,overflow:"hidden"},playerShineStreak:{position:"absolute",top:-60,width:75,height:200},brandSection:{flexDirection:"row",alignItems:"center",gap:9,flex:1,minWidth:0,paddingVertical:2},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:_.interBold,fontSize:13.5,color:i.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${i.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${i.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:_.interMedium,fontSize:8.5,color:`${i.white}EB`,letterSpacing:.1},actionsRow:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"rgba(255, 255, 255, 0.22)",paddingHorizontal:8,paddingVertical:5.5,borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},actionBtnSquare:{alignItems:"center",justifyContent:"center",width:27,height:27,backgroundColor:"rgba(255, 255, 255, 0.22)",borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},recordingBtnActive:{backgroundColor:"rgba(239, 68, 68, 0.32)",borderColor:i.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:i.red500},actionText:{fontFamily:_.interSemiBold,fontSize:10.5,color:i.white}});export default ke;

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

@@ -1,74 +1,18 @@
-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>
+import{useState as R}from"react";import{StyleSheet as S,Text as I,View as T,Pressable as B}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{WarningTriangleIcon as W,ClearIcon as E}from"../NetworkIcons";export const FeatureUnderDevNotice=({featureName:w,compact:V=!1})=>{const[z,D]=R(!1);return z?null:<T style={[e.container,V&&e.containerCompact]}>
+      <T style={e.contentRow}>
+        <T style={e.badgeWrap}>
+          <W color={t.warningIconGold}size={12}/>
+          <I style={e.badgeText}>IN ACTIVE DEVELOPMENT</I>
+        </T>
 
-        <Pressable onPress={() => setIsDismissed(true)} hitSlop={8} style={styles.dismissBtn} accessible={true} accessibilityRole="button" accessibilityLabel="Dismiss notice">
-          <ClearIcon color={AppColors.grayTextWeak} size={11}/>
-        </Pressable>
-      </View>
+        <B onPress={()=>D(!0)}hitSlop={8}style={e.dismissBtn}accessible={!0}accessibilityRole="button"accessibilityLabel="Dismiss notice">
+          <E color={t.grayTextWeak}size={11}/>
+        </B>
+      </T>
 
-      <Text style={styles.messageText}>
-        {featureName ? `${featureName} is` : 'This module is'} currently in active
+      <I style={e.messageText}>
+        {w?`${w} 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;
+      </I>
+    </T>};const e=S.create({container:{marginHorizontal:12,marginTop:8,marginBottom:6,paddingHorizontal:12,paddingVertical:9,borderRadius:8,backgroundColor:`${t.warningIconGold}12`,borderWidth:1,borderColor:`${t.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:C.interBold,fontSize:9.5,color:t.warningIconGold,letterSpacing:.4},dismissBtn:{padding:2},messageText:{fontFamily:C.interRegular,fontSize:10.5,color:t.grayText,lineHeight:15}});export default FeatureUnderDevNotice;

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

@@ -3,5 +3,14 @@ export interface FeedbackModalProps {
     visible?: boolean;
     onClose: () => void;
 }
+export interface InspectorModuleItem {
+    id: string;
+    name: string;
+    category: string;
+    icon: string;
+    description: string;
+    color: string;
+    quickChips: string[];
+}
 export declare const FeedbackModal: React.FC<FeedbackModalProps>;
 export default FeedbackModal;