react-native-in-app-debugger 1.0.37 → 1.0.39

package/Api.jsx

@@ -8,6 +8,7 @@ import {
   TouchableOpacity,
 } from "react-native";
 import Text from "./Text";
+import Highlight from "./Highlight";
 let Clipboard;
 try {
   Clipboard = require("@react-native-clipboard/clipboard")?.default;
@@ -17,7 +18,7 @@ try {
 
 const MAX_URL_LENGTH = 100;
 
-const Row = ({ item }) => {
+const Row = ({ item, filter }) => {
   const tabs = [
     { value: "Response Body" },
     { value: "Request Body", hide: !item.request.data },
@@ -53,7 +54,7 @@ const Row = ({ item }) => {
     <View style={styles.details}>
       {item.request.url.length > MAX_URL_LENGTH && (
         <Text style={{ color: "#ffffff99", paddingVertical: 20 }}>
-          {item.request.url}
+          <Highlight text={item.request.url} filter={filter} />
         </Text>
       )}
       <View>
@@ -65,17 +66,26 @@ const Row = ({ item }) => {
 
         {tab === tabs[0].value && hasResponse && (
           <Text style={{ color: "white" }}>
-            {JSON.stringify(item.response.data, undefined, 4)}
+            <Highlight
+              text={JSON.stringify(item.response.data, undefined, 4)}
+              filter={filter}
+            />
           </Text>
         )}
         {tab === tabs[1].value && (
           <Text style={{ color: "white" }}>
-            {JSON.stringify(item.request.data, undefined, 4)}
+            <Highlight
+              text={JSON.stringify(item.request.data, undefined, 4)}
+              filter={filter}
+            />
           </Text>
         )}
         {tab === tabs[2].value && (
           <Text style={{ color: "white" }}>
-            {JSON.stringify(item.request.headers, undefined, 4)}
+            <Highlight
+              text={JSON.stringify(item.request.headers, undefined, 4)}
+              filter={filter}
+            />
           </Text>
         )}
       </View>
@@ -175,7 +185,11 @@ export default (props) => {
           )
           .map((data) => ({ data: [data], id: data.id }))}
         renderItem={(i) =>
-          expands[i.item.id] ? <Row {...i} /> : <View style={{ height: 20 }} />
+          expands[i.item.id] ? (
+            <Row {...i} filter={filter} />
+          ) : (
+            <View style={{ height: 20 }} />
+          )
         }
         renderSectionHeader={({ section: { data } }) => {
           const item = data[0];
@@ -207,7 +221,10 @@ export default (props) => {
                     (hasResponse ? " - " + duration + " second(s)" : "") +
                     "\n"}
                 </Text>
-                {item.request.url.slice(0, MAX_URL_LENGTH)}
+                <Highlight
+                  text={item.request.url.slice(0, MAX_URL_LENGTH)}
+                  filter={filter}
+                />
                 {item.request.url.length > MAX_URL_LENGTH && "......."}
               </Text>
               <View style={{ gap: 4 }}>

package/Highlight.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Text from './Text';
+
+export default ({ text, filter }) => {
+    if (!filter || !/^[a-zA-Z0-9./]+$/.test(filter)) return text;
+    const indices = [...text.matchAll(new RegExp(filter, 'gi'))].map((a) => a.index);
+    if (!indices.length) return text;
+    return (
+      <>
+        {indices.map((i, ii) => {
+          const preText = !ii ? text.slice(0, i) : text.slice(indices[ii - 1] + filter.length, i);
+          const searchText = text.slice(i, i + filter.length);
+          const seqText = !indices[ii + 1] ? text.slice(i + filter.length) : '';
+          return (
+            <>
+              {preText}
+              <Text style={{ backgroundColor: 'yellow', color: 'black' }}>{searchText}</Text>
+              {seqText}
+            </>
+          );
+        })}
+      </>
+    );
+  };

package/Variables.jsx

@@ -1,30 +1,36 @@
-import React, { useState } from 'react';
-import { FlatList, TextInput } from 'react-native';
+import React, { useState } from "react";
+import { FlatList, TextInput } from "react-native";
 import Text from "./Text";
+import Highlight from "./Highlight";
 
 export default ({ variables }) => {
-  const [filter, setFilter] = useState('');
+  const [filter, setFilter] = useState("");
 
   return (
     <>
       <TextInput
         value={filter}
-        placeholder='Filter...'
-        placeholderTextColor='grey'
-        style={{ paddingHorizontal: 5, color: 'white' }}
+        placeholder="Filter..."
+        placeholderTextColor="grey"
+        style={{ paddingHorizontal: 5, color: "white" }}
         onChangeText={(t) => setFilter(t.toLowerCase())}
         clearButtonMode="always"
       />
       <FlatList
         contentContainerStyle={{ padding: 5, paddingBottom: 20 }}
         data={Object.keys(variables).filter(
-          (k) => !filter || variables[k].toLowerCase().includes(filter) || k.toLowerCase().includes(filter),
+          (k) =>
+            !filter ||
+            variables[k].toLowerCase().includes(filter) ||
+            k.toLowerCase().includes(filter)
         )}
         showsVerticalScrollIndicator
         keyExtractor={(i) => i}
         renderItem={({ item }) => (
-          <Text selectable style={{ color: 'white', marginVertical: 10 }}>
-            {item + ' : ' + variables[item]}
+          <Text selectable style={{ color: "white", marginVertical: 10 }}>
+            <Highlight text={item} filter={filter} />
+            {" : "}
+            <Highlight text={variables[item]} filter={filter} />
           </Text>
         )}
       />

package/index.jsx

@@ -78,6 +78,7 @@ export default ({
     isOpen,
     panResponder,
     setIsOpen,
+    shouldShowDetails,
   } = useAnimation(badgeHeight);
   return (
     <Animated.View
@@ -92,7 +93,7 @@ export default ({
       }}
       {...(isOpen ? {} : panResponder.panHandlers)}
     >
-      {!isOpen ? (
+      {!shouldShowDetails ? (
         <TouchableOpacity
           onPress={() => setIsOpen(true)}
           style={styles.box}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "This library's main usage is to be used by Non-Technical testers during UAT, SIT or any testing phase.",
   "main": "index.jsx",
   "scripts": {

package/useAnimation.ts

@@ -14,6 +14,7 @@ export default (defaultBadgeHeight) => {
   const badgeWidth = useRef(new Animated.Value(defaultBadgeWidth)).current;
   const { width, height } = useWindowDimensions();
   const [isOpen, setIsOpen] = useState(false);
+  const [shouldShowDetails, setShouldShowDetails] = useState(false);
 
   useEffect(() => {
     const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
@@ -29,7 +30,6 @@ export default (defaultBadgeHeight) => {
     };
   }, [isOpen]);
 
-
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => false,
@@ -57,6 +57,7 @@ export default (defaultBadgeHeight) => {
   }, [defaultBadgeHeight]);
 
   useEffect(() => {
+    setTimeout(() => setShouldShowDetails(isOpen), isOpen ? 200 : 0);
     Animated.spring(position, { toValue: isOpen ? { x: 0, y: 0 } : cachePosition.current, ...und }).start();
     Animated.spring(borderRadius, { toValue: isOpen ? 0 : defaultBorderRadius, ...und }).start();
     Animated.spring(badgeHeight, { toValue: isOpen ? height : defaultBadgeHeight, ...und }).start();
@@ -72,5 +73,6 @@ export default (defaultBadgeHeight) => {
     isOpen,
     setIsOpen,
     borderRadius,
+    shouldShowDetails,
   };
 };