react-native-inapp-inspector 2.2.2 → 2.2.3

package/src/components/HeadersSection.tsx

@@ -0,0 +1,192 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {useTranslation} from '../i18n';
+import {View, Pressable, Text, Animated} from 'react-native';
+
+// Components
+import CopyButton from './CopyButton';
+import TouchableScale from './TouchableScale';
+
+// Helpers
+import {copyToClipboard} from '../helpers';
+
+// Custom Hooks
+import useAccordion from '../customHooks/useAccordion';
+
+// Assets
+import {HeadersIcon, ChevronIcon, CopyIcon} from './NetworkIcons';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import styles from '../styles';
+
+// Type Definition
+import {HeadersSectionProps} from '../types';
+
+const HeaderRow = React.memo(function HeaderRow({
+  headerKey,
+  value,
+  isLast,
+  index,
+}: {
+  headerKey: string;
+  value: string;
+  isLast: boolean;
+  index: number;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const isLong = value.length > 35;
+
+  const entryAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(entryAnim, {
+      toValue: 1,
+      duration: 220,
+      delay: index * 30,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const rowAnimStyle = {
+    opacity: entryAnim,
+    transform: [
+      {
+        translateY: entryAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [8, 0],
+        }),
+      },
+    ],
+  };
+
+  return (
+    <Animated.View
+      style={[styles.htRow, !isLast && styles.htRowBorder, rowAnimStyle]}>
+      <View style={styles.htKeyCell}>
+        <Text style={styles.htKey} numberOfLines={2}>
+          {headerKey}
+        </Text>
+      </View>
+      <View style={styles.htCellDivider} />
+      <Pressable
+        style={styles.htValueCell}
+        onPress={() => isLong && setExpanded(v => !v)}
+        hitSlop={8}>
+        <Text
+          style={styles.htValue}
+          selectable
+          numberOfLines={expanded ? undefined : 3}>
+          {value}
+        </Text>
+        {isLong && (
+          <View style={styles.htExpandRow}>
+            <Text style={styles.htExpandText}>
+              {expanded ? '▲ less' : '▼ more'}
+            </Text>
+          </View>
+        )}
+      </Pressable>
+      <TouchableScale
+        onPress={() => copyToClipboard(value, headerKey)}
+        hitSlop={8}
+        style={styles.htCopyBtn}>
+        <CopyIcon color={AppColors.grayTextWeak} size={14} />
+      </TouchableScale>
+    </Animated.View>
+  );
+});
+
+const HeadersSection = ({
+  title,
+  headers,
+  search,
+  resetKey,
+}: HeadersSectionProps) => {
+  const {t} = useTranslation();
+  const {toggleOpen, forceOpen, chevronStyle, bodyStyle} = useAccordion(
+    false,
+    2400,
+    300,
+  );
+
+  useEffect(() => {
+    forceOpen(false);
+  }, [resetKey]);
+
+  const entries = useMemo(
+    () => (headers ? Object.entries(headers) : []),
+    [headers],
+  );
+
+  const filtered = useMemo(() => {
+    if (!search) return entries;
+    const q = search.toLowerCase();
+    return entries.filter(
+      ([k, v]) => k.toLowerCase().includes(q) || v.toLowerCase().includes(q),
+    );
+  }, [entries, search]);
+
+  if (entries.length === 0) return null;
+
+  const isRequest =
+    title.toLowerCase().includes('request') ||
+    title.toLowerCase().includes('api');
+  const accentColor = isRequest ? AppColors.offerPurple : AppColors.greenColor;
+  const accentBg = isRequest
+    ? `${AppColors.offerPurple}10`
+    : `${AppColors.greenColor}10`;
+
+  return (
+    <View style={[styles.htCard, {borderLeftColor: accentColor}]}>
+      <Pressable onPress={toggleOpen} hitSlop={10}>
+        <View style={styles.htCardHeader}>
+          <View style={[styles.htIconWrap, {backgroundColor: accentBg}]}>
+            <HeadersIcon color={accentColor} />
+          </View>
+          <Text style={styles.htTitle}>{title}</Text>
+          <View
+            style={[
+              styles.htBadge,
+              {backgroundColor: accentBg, borderColor: accentColor},
+            ]}>
+            <Text style={[styles.htBadgeText, {color: accentColor}]}>
+              {entries.length}
+            </Text>
+          </View>
+          <View style={styles.htHeaderSpacer} />
+          <CopyButton value={headers} label={title} />
+          <View style={styles.htChevronBtn}>
+            <Animated.View style={chevronStyle}>
+              <ChevronIcon color={AppColors.grayTextStrong} size={14} />
+            </Animated.View>
+          </View>
+        </View>
+      </Pressable>
+
+      <Animated.View style={bodyStyle}>
+        <View style={styles.htColHeadRow}>
+          <Text style={[styles.htColHead, {width: '30%'}]}>{t('network.jsonViewer.key')}</Text>
+          <Text style={[styles.htColHead, {flex: 1}]}>{t('network.jsonViewer.value')}</Text>
+        </View>
+
+        {filtered.length > 0 ? (
+          filtered.map(([k, v], i) => (
+            <HeaderRow
+              key={k}
+              headerKey={k}
+              value={v}
+              isLast={i === filtered.length - 1}
+              index={i}
+            />
+          ))
+        ) : (
+          <View style={styles.htEmpty}>
+            <Text style={styles.htEmptyText}>{t('network.noMatchingHeaders')}</Text>
+          </View>
+        )}
+      </Animated.View>
+    </View>
+  );
+};
+
+export default HeadersSection;

package/src/components/HighlightText.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {Text, Linking} from 'react-native';
+
+// Helpers
+import {escapeRegex, handleOpenExternalLink} from '../helpers';
+
+const HighlightText = React.memo(function HighlightText({
+  text,
+  search,
+  style,
+  highlightStyle,
+  detectLinks,
+  numberOfLines,
+  ...rest
+}: any) {
+  // Optimization: For huge strings (> 20KB) with no active search, bypass all splitting/regex overhead
+  if (!text || (text.length > 20000 && !search && !detectLinks)) {
+    return (
+      <Text style={style} numberOfLines={numberOfLines} {...rest}>
+        {text}
+      </Text>
+    );
+  }
+
+  // Regex to detect absolute URLs
+  const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+
+  const renderNormalOrHighlighted = (subText: string, keyPrefix: string) => {
+    if (!search) {
+      return <Text key={keyPrefix}>{subText}</Text>;
+    }
+    const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
+    const parts = subText.split(regex);
+    return (
+      <Text key={keyPrefix}>
+        {parts.map((part: any, i: number) =>
+          part.toLowerCase() === search.toLowerCase() ? (
+            <Text key={i} style={highlightStyle}>
+              {part}
+            </Text>
+          ) : (
+            <Text key={i}>{part}</Text>
+          ),
+        )}
+      </Text>
+    );
+  };
+
+  if (detectLinks && text && text.length < 20000) {
+    const parts = text.split(URL_REGEX);
+    return (
+      <Text style={style} numberOfLines={numberOfLines} {...rest}>
+        {parts.map((part: string, i: number) => {
+          if (part.match(URL_REGEX)) {
+            return (
+              <Text
+                key={`link-${i}`}
+                style={{
+                  color: '#007AFF', // skyBlue link color
+                  textDecorationLine: 'underline',
+                }}
+                onPress={() => {
+                  handleOpenExternalLink(part);
+                }}>
+                {part}
+              </Text>
+            );
+          }
+          return renderNormalOrHighlighted(part, `text-${i}`);
+        })}
+      </Text>
+    );
+  }
+
+  if (!search)
+    return (
+      <Text style={style} numberOfLines={numberOfLines} {...rest}>
+        {text}
+      </Text>
+    );
+
+  const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <Text style={style} numberOfLines={numberOfLines} {...rest}>
+      {parts.map((part: any, i: number) =>
+        part.toLowerCase() === search.toLowerCase() ? (
+          <Text key={i} style={highlightStyle}>
+            {part}
+          </Text>
+        ) : (
+          <Text key={i}>{part}</Text>
+        ),
+      )}
+    </Text>
+  );
+});
+
+export default HighlightText;