react-native-in-app-debugger 1.0.44 → 1.0.46

package/Api/index.jsx

@@ -3,6 +3,7 @@ import { SectionList, TextInput, View, Alert, StyleSheet, TouchableOpacity } fro
 import Text from '../Text';
 import Highlight from '../Highlight';
 import Bookmark from '../Bookmark';
+import X from '../X';
 import getRandomBrightColor from '../utils/getRandomBrightColor';
 import { MAX_URL_LENGTH } from './Row';
 let Clipboard;
@@ -14,10 +15,17 @@ try {
 
 import Row from './Row';
 
+const BlacklistIcon = () => (
+  <View style={{ borderRadius: 100, backgroundColor: 'black' }}>
+    <X size={12} />
+  </View>
+);
+
 const isError = (a) => a.response?.status < 200 || a.response?.status >= 400;
 export default (props) => {
   const [filter, setFilter] = useState('');
   const [errorOnly, setErrorOnly] = useState(false);
+  const [showBookmarkOnly, setShowBookmarkOnly] = useState(false);
   const [expands, setExpands] = useState({});
   const apis = props.apis.filter((a) => !errorOnly || isError(a));
 
@@ -28,7 +36,7 @@ export default (props) => {
       <View style={styles.container}>
         {!!apis.length && !filter && (
           <TouchableOpacity
-            style={{ padding: 5, backgroundColor: 'white', borderRadius: 5 }}
+            style={styles.actionButton}
             onPress={() =>
               Alert.alert('Are you sure', 'You want to clear all logs', [
                 { text: 'Delete', onPress: props.clear, style: 'cancel' },
@@ -55,7 +63,7 @@ export default (props) => {
         )}
         {!!props.blacklists.length && !filter && (
           <TouchableOpacity
-            style={{ padding: 5, backgroundColor: 'white', borderRadius: 5 }}
+            style={styles.actionButton}
             onPress={() =>
               Alert.alert('Are you sure', 'You want to clear all blacklists', [
                 { text: 'Clear', onPress: () => props.setBlacklists(), style: 'cancel' },
@@ -63,16 +71,28 @@ export default (props) => {
               ])
             }
           >
-            <Text style={{ color: 'black', fontSize: 10 }}>Clear {props.blacklists.length} Blacklists</Text>
+            <Text style={{ color: 'black', fontSize: 10 }}>Clear {props.blacklists.length}</Text>
+            <BlacklistIcon />
           </TouchableOpacity>
         )}
-
+        {!!Object.keys(props.bookmarks).length && (
+          <>
+            <TouchableOpacity style={styles.actionButton} onPress={() => setShowBookmarkOnly((v) => !v)}>
+              <Bookmark size={7} />
+              <Text style={{ color: 'black', fontSize: 10 }}>{showBookmarkOnly ? '& others' : 'Only'}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.actionButton} onPress={() => props.setBookmarks({})}>
+              <Text style={{ color: 'black', fontSize: 10 }}>Clear {Object.keys(props.bookmarks).length}</Text>
+              <Bookmark size={7} />
+            </TouchableOpacity>
+          </>
+        )}
         <TextInput
           value={filter}
           placeholder='Filter...'
           clearButtonMode='always'
           placeholderTextColor='grey'
-          style={{ paddingHorizontal: 5, color: 'white', flex: 1 }}
+          style={styles.textInput}
           onChangeText={(t) => setFilter(t.toLowerCase())}
         />
       </View>
@@ -85,6 +105,7 @@ export default (props) => {
         showsVerticalScrollIndicator
         sections={apis
           .filter((a) => !filter || JSON.stringify(a).toLowerCase().includes(filter))
+          .filter((a) => !showBookmarkOnly || props.bookmarks[a.id])
           .map((data) => ({ data: [data], id: data.id }))}
         renderItem={(i) => (expands[i.item.id] ? <Row {...i} filter={filter} /> : <View style={{ height: 20 }} />)}
         renderSectionHeader={({ section: { data } }) => {
@@ -164,7 +185,7 @@ export default (props) => {
                   }}
                   style={styles.actionButton}
                 >
-                  <Text style={{ color: 'black', fontSize: 10 }}>Blacklist</Text>
+                  <BlacklistIcon />
                 </TouchableOpacity>
               </View>
             </View>
@@ -178,11 +199,20 @@ export default (props) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     paddingLeft: 5,
     alignItems: 'center',
     gap: 5,
   },
-  actionButton: { backgroundColor: 'white', borderRadius: 5, padding: 4 },
+  actionButton: {
+    backgroundColor: 'white',
+    borderRadius: 5,
+    padding: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 3,
+  },
   rowHeader: {
     flexDirection: 'row',
     gap: 5,
@@ -200,4 +230,5 @@ const styles = StyleSheet.create({
     elevation: 10,
     zIndex: 99,
   },
+  textInput: { paddingHorizontal: 5, color: 'white', flex: 1, minWidth: 100 },
 });

package/Bookmark.jsx

@@ -1,26 +1,19 @@
 import React from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
 
-export default ({ size = 10, color = '#222', onPress }) => {
+export default ({ size = 10, color = '#222', ...rest }) => {
   const tristyle = { borderRightWidth: size / 2, borderTopWidth: size / 2, borderTopColor: color };
+  const Component = rest.onPress ? TouchableOpacity : View;
   return (
-    <View>
-      <View style={{ width: size, height: size, backgroundColor: color }} />
-      <View style={{ flexDirection: 'row' }}>
-        <View style={[styles.triangleCorner, tristyle]} />
-        <View style={[styles.triangleCorner, tristyle, { transform: [{ rotate: '90deg' }] }]} />
+    <Component {...rest} style={[styles.container, { height: size + size / 2 }]}>
+      <View style={{ transform: [{ scale: 0.3 }] }}>
+        <View style={{ width: size, height: size, backgroundColor: color }} />
+        <View style={{ flexDirection: 'row' }}>
+          <View style={[styles.triangleCorner, tristyle]} />
+          <View style={[styles.triangleCorner, tristyle, { transform: [{ rotate: '90deg' }] }]} />
+        </View>
       </View>
-      <Pressable
-        onPress={onPress}
-        style={[
-          {
-            width: size,
-            height: size + size / 2,
-          },
-          styles.pressable,
-        ]}
-      />
-    </View>
+    </Component>
   );
 };
 
@@ -32,8 +25,7 @@ const styles = StyleSheet.create({
     borderStyle: 'solid',
     borderRightColor: 'transparent',
   },
-  pressable: {
-    position: 'absolute',
-    transform: [{ scale: 1.7 }],
+  container: {
+    transform: [{ scale: 3 }],
   },
 });

package/X.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 
-export default ({ size = 20, color = 'white', onPress }) => {
+const height = 3;
+export default ({ size = 20, color = 'white', ...rest }) => {
   const panelStyle = { top: size / 2, width: size, backgroundColor: color };
+  const Component = rest.onPress ? TouchableOpacity : View;
   return (
-    <TouchableOpacity
-      onPress={onPress}
+    <Component
+      {...rest}
       style={{
         width: size,
         height: size,
@@ -13,16 +15,17 @@ export default ({ size = 20, color = 'white', onPress }) => {
       }}
     >
       <View style={{ width: size, height: size, transform: [{ scale: 0.5 }] }}>
-        <View style={[styles.panel, panelStyle, { transform: [{ rotate: '45deg' }] }]} />
-        <View style={[styles.panel, panelStyle, { transform: [{ rotate: '-45deg' }] }]} />
+        <View style={[styles.panel, panelStyle, { transform: [...styles.panel.transform, { rotate: '45deg' }] }]} />
+        <View style={[styles.panel, panelStyle, { transform: [...styles.panel.transform, { rotate: '-45deg' }] }]} />
       </View>
-    </TouchableOpacity>
+    </Component>
   );
 };
 
 const styles = StyleSheet.create({
   panel: {
-    height: 3,
+    height,
+    transform: [{ translateY: -height / 2 }],
     position: 'absolute',
   },
 });

package/index.jsx

@@ -57,7 +57,8 @@ export default ({
   version = v,
   maxNumOfApiToStore = 0,
   labels = [],
-  interceptResponse
+  interceptResponse,
+  tabs = [],
 }) => {
   const [blacklists, setB] = useState([]);
 
@@ -116,6 +117,8 @@ export default ({
     setIsOpen,
     shouldShowDetails,
   } = useAnimation(badgeHeight);
+
+  const CustomTabComponent = tabs.find(t => tab === t.title)?.component;
   return (
     <Animated.View
       style={{
@@ -163,7 +166,7 @@ export default ({
           <View style={{ flexDirection: "row", padding: 5 }}>
             <View style={{ flex: 1, flexDirection: "row" }}>
               {!!variables &&
-                ["api", "variables"].map((t) => {
+                ["api", "variables", ...tabs.map(t => t.title)].map((t) => {
                   const isSelected = t === tab;
                   return (
                     <TouchableOpacity
@@ -200,6 +203,7 @@ export default ({
               {...restApiInterceptor}
             />
           )}
+          {!!CustomTabComponent && <CustomTabComponent />}
         </SafeAreaView>
       )}
     </Animated.View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "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/useApiInterceptor.js

@@ -21,6 +21,19 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
   const [apis, setApis] = useState([]);
   const [bookmarks, setBookmarks] = useState({});
 
+  useEffect(() => {
+    setBookmarks((v) => {
+      const oldV = { ...v };
+      const bookmarkkeys = Object.keys(oldV);
+      for (let i = 0; i < bookmarkkeys.length; i++) {
+        if (!apis.some(({ id }) => id === bookmarkkeys[i])) {
+          delete oldV[bookmarkkeys[i]];
+        }
+      }
+      return oldV;
+    });
+  }, [apis]);
+
   const makeRequest = (data) => {
     if (blacklists.some((b) => b.url === data.url && b.method === data.method)) return;
     const date = new Date();