react-native-inapp-inspector 1.1.12 → 1.1.13

package/dist/commonjs/components/MetaAccordion.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // Constants
 const constants_1 = require("../constants");
@@ -13,13 +46,52 @@ const useAccordion_1 = __importDefault(require("../customHooks/useAccordion"));
 const helpers_1 = require("../helpers");
 // Assets
 const NetworkIcons_1 = require("./NetworkIcons");
+// Components
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
-const styles_1 = __importDefault(require("../styles"));
 const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const [urlExpanded, setUrlExpanded] = (0, react_1.useState)(false);
     const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 390);
     const isFailed = status === 0 || status == null;
+    const renderFormattedUrl = (rawUrl) => {
+        if (!rawUrl)
+            return '—';
+        try {
+            const doubleSlashIndex = rawUrl.indexOf('//');
+            let temp = rawUrl;
+            let protocol = '';
+            if (doubleSlashIndex !== -1) {
+                protocol = rawUrl.substring(0, doubleSlashIndex + 2);
+                temp = rawUrl.substring(doubleSlashIndex + 2);
+            }
+            const slashIndex = temp.indexOf('/');
+            let host = temp;
+            let pathAndSearch = '';
+            if (slashIndex !== -1) {
+                host = temp.substring(0, slashIndex);
+                pathAndSearch = temp.substring(slashIndex);
+            }
+            const queryIndex = pathAndSearch.indexOf('?');
+            let pathname = pathAndSearch;
+            let search = '';
+            if (queryIndex !== -1) {
+                pathname = pathAndSearch.substring(0, queryIndex);
+                search = pathAndSearch.substring(queryIndex);
+            }
+            return (<react_native_1.Text style={{ lineHeight: 16 }}>
+          {protocol ? (<react_native_1.Text style={{ color: '#94A3B8', fontFamily: AppFonts_1.AppFonts.interRegular }}>{protocol}</react_native_1.Text>) : null}
+          <react_native_1.Text style={{ color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }}>{host}</react_native_1.Text>
+          <react_native_1.Text style={{ color: '#334155', fontFamily: AppFonts_1.AppFonts.interMedium }}>{pathname}</react_native_1.Text>
+          {search ? (<react_native_1.Text style={{ color: '#0D9488', fontFamily: AppFonts_1.AppFonts.interRegular }}>{search}</react_native_1.Text>) : null}
+        </react_native_1.Text>);
+        }
+        catch {
+            return rawUrl;
+        }
+    };
     return (<react_native_1.View style={styles_1.default.metaContainer}>
       <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
         <react_native_1.View style={styles_1.default.metaHeader}>
@@ -145,29 +217,54 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
 
-          <react_native_1.View style={[styles_1.default.metaRow, { alignItems: 'flex-start' }]}>
-            <react_native_1.View style={styles_1.default.metaLabelRow}>
-              <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
+          <react_native_1.View style={[styles_1.default.metaRow, { alignItems: 'flex-start', flexDirection: 'column', gap: 6 }]}>
+            <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+              <react_native_1.View style={styles_1.default.metaLabelRow}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
+              </react_native_1.View>
+              
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                {url && url.length > 50 && (<TouchableScale_1.default onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                      {urlExpanded ? 'Show Less' : 'Show More'}
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>)}
+                
+                {url && (<TouchableScale_1.default onPress={() => (0, helpers_1.handleOpenExternalLink)(url)} hitSlop={8}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: AppColors_1.AppColors.purple,
+                textDecorationLine: 'underline',
+            }}>
+                      Open
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>)}
+              </react_native_1.View>
+            </react_native_1.View>
+            
+            <react_native_1.View style={{
+            backgroundColor: '#F8FAFC',
+            borderRadius: 8,
+            padding: 8,
+            borderWidth: 1.5,
+            borderColor: '#E2E8F0',
+            width: '100%',
+            marginTop: 2,
+        }}>
+              <react_native_1.Text selectable={true} numberOfLines={urlExpanded ? undefined : 2} ellipsizeMode="tail" style={{
+            fontSize: 11,
+            textAlign: 'left',
+            lineHeight: 16.5,
+        }}>
+                {renderFormattedUrl(url)}
+              </react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" onPress={() => {
-            if (url) {
-                react_native_1.Linking.openURL(url).catch(() => { });
-            }
-        }} style={[
-            styles_1.default.metaValue,
-            {
-                fontSize: 11.5,
-                color: url ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
-                textDecorationLine: url ? 'underline' : 'none',
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                flex: 1,
-                textAlign: 'right',
-                lineHeight: 16,
-            },
-        ]}>
-              {url || '—'}
-            </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Animated.View>

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -50,3 +50,4 @@ export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.E
 export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SortIcon: ({ ascending, color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
-exports.MotionIcon = void 0;
+exports.SortIcon = exports.MotionIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -393,3 +393,10 @@ const MotionIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, })
     </react_native_svg_1.default>);
 };
 exports.MotionIcon = MotionIcon;
+const SortIcon = ({ ascending, color = AppColors_1.AppColors.purple, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 4l-6 6h12z" fill={ascending ? color : AppColors_1.AppColors.grayTextWeak}/>
+      <react_native_svg_1.Path d="M12 20l6-6H6z" fill={!ascending ? color : AppColors_1.AppColors.grayTextWeak}/>
+    </react_native_svg_1.default>);
+};
+exports.SortIcon = SortIcon;

package/dist/commonjs/components/ReduxTreeView.d.ts

@@ -1,7 +1,16 @@
 import React from 'react';
-export declare const ReduxStoreIcon: ({ color, size, }: any) => React.JSX.Element;
-export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
+export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
     state: any;
-    lastActionMap: Record<string, any>;
+    actionHistory?: any[];
+    lastActionMap?: Record<string, any>;
     search?: string;
+    onSearchChange?: (val: string) => void;
+    autoRefresh?: boolean;
+    onToggleAutoRefresh?: () => void;
+    onClearHistory?: () => void;
+    onDetailOpenChange?: (isOpen: boolean) => void;
+    selectedSliceKey?: string | null;
+    onSelectSliceKey?: (key: string | null) => void;
+    selectedActionId?: number | null;
+    onSelectActionId?: (id: number | null) => void;
 }) => React.JSX.Element;