react-native-inapp-inspector 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +203 -44
- package/dist/commonjs/customHooks/analyticsLogger.d.ts +1 -0
- package/dist/commonjs/customHooks/analyticsLogger.js +57 -17
- package/dist/commonjs/customHooks/networkLogger.d.ts +1 -1
- package/dist/commonjs/customHooks/networkLogger.js +66 -54
- package/dist/commonjs/index.d.ts +1 -1
- package/dist/commonjs/index.js +1501 -793
- package/dist/esm/customHooks/analyticsLogger.d.ts +1 -0
- package/dist/esm/customHooks/analyticsLogger.js +55 -16
- package/dist/esm/customHooks/networkLogger.d.ts +1 -1
- package/dist/esm/customHooks/networkLogger.js +64 -55
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +1501 -794
- package/example/App.tsx +5 -3
- package/package.json +3 -1
package/dist/commonjs/index.js
CHANGED
|
@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
36
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.subscribeReduxState = exports.getReduxState = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
|
|
39
|
+
exports.subscribeReduxState = exports.getReduxState = exports.connectReduxStore = exports.ErrorBoundary = exports.subscribeWebView = exports.clearWebViewData = exports.getWebViewHtmlUrl = exports.getWebViewJs = exports.getWebViewCss = exports.getWebViewHtml = exports.getWebViewNavHistory = exports.getWebViewLogs = exports.WebView = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = exports.logAnalyticsEvent = exports.setupAnalyticsLogger = exports.subscribeConsoleLogs = exports.clearConsoleLogs = exports.setupConsoleLogger = exports.addAxiosInterceptors = exports.subscribeNetworkLogs = exports.clearNetworkLogs = exports.setupNetworkLogger = void 0;
|
|
40
40
|
const react_1 = __importStar(require("react"));
|
|
41
41
|
const react_native_1 = require("react-native");
|
|
42
42
|
const react_native_svg_1 = __importStar(require("react-native-svg"));
|
|
@@ -146,7 +146,7 @@ const NavigationTracker = ({ onStateChange }) => {
|
|
|
146
146
|
}, [navState, onStateChange]);
|
|
147
147
|
return null;
|
|
148
148
|
};
|
|
149
|
-
const NetworkInspector = ({ enabled = true }) => {
|
|
149
|
+
const NetworkInspector = ({ enabled = true, }) => {
|
|
150
150
|
const [isDark, setIsDark] = (0, react_1.useState)(false);
|
|
151
151
|
const [reduxState, setReduxState] = (0, react_1.useState)(null);
|
|
152
152
|
const [expandedReducers, setExpandedReducers] = (0, react_1.useState)({});
|
|
@@ -161,16 +161,11 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
161
161
|
const [reduxActiveSubTab, setReduxActiveSubTab] = (0, react_1.useState)('timeline');
|
|
162
162
|
const [apiDetailActiveTab, setApiDetailActiveTab] = (0, react_1.useState)('response');
|
|
163
163
|
(0, react_1.useEffect)(() => {
|
|
164
|
-
|
|
165
|
-
react_native_1.LogBox.ignoreAllLogs(true);
|
|
166
|
-
}
|
|
167
|
-
else {
|
|
168
|
-
react_native_1.LogBox.ignoreAllLogs(false);
|
|
169
|
-
}
|
|
164
|
+
react_native_1.LogBox.ignoreAllLogs(enabled);
|
|
170
165
|
return () => {
|
|
171
166
|
react_native_1.LogBox.ignoreAllLogs(false);
|
|
172
167
|
};
|
|
173
|
-
}, [enabled
|
|
168
|
+
}, [enabled]);
|
|
174
169
|
(0, react_1.useEffect)(() => {
|
|
175
170
|
if (selected) {
|
|
176
171
|
setApiDetailActiveTab('response');
|
|
@@ -432,7 +427,7 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
432
427
|
(0, networkLogger_1.setupNetworkLogger)();
|
|
433
428
|
(0, networkLogger_1.clearNetworkLogs)();
|
|
434
429
|
(0, consoleLogger_1.setupConsoleLogger)();
|
|
435
|
-
|
|
430
|
+
(0, analyticsLogger_1.autoSetupAnalyticsLogger)();
|
|
436
431
|
let timeoutId;
|
|
437
432
|
const unsubscribe = (0, networkLogger_1.subscribeNetworkLogs)((raw) => {
|
|
438
433
|
clearTimeout(timeoutId);
|
|
@@ -988,8 +983,21 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
988
983
|
<NetworkIcons_1.WhiteBackNavigation color="#FFFFFF" size={16}/>
|
|
989
984
|
</TouchableScale_1.default>
|
|
990
985
|
<react_native_1.View style={{ flex: 1 }}>
|
|
991
|
-
<react_native_1.Text style={{
|
|
992
|
-
|
|
986
|
+
<react_native_1.Text style={{
|
|
987
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
988
|
+
fontSize: 17,
|
|
989
|
+
color: '#FFFFFF',
|
|
990
|
+
}}>
|
|
991
|
+
Settings
|
|
992
|
+
</react_native_1.Text>
|
|
993
|
+
<react_native_1.Text style={{
|
|
994
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
995
|
+
fontSize: 11,
|
|
996
|
+
color: 'rgba(255,255,255,0.75)',
|
|
997
|
+
marginTop: 1,
|
|
998
|
+
}}>
|
|
999
|
+
Manage modules and preferences
|
|
1000
|
+
</react_native_1.Text>
|
|
993
1001
|
</react_native_1.View>
|
|
994
1002
|
<react_native_1.View style={{
|
|
995
1003
|
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
|
@@ -997,17 +1005,28 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
997
1005
|
paddingVertical: 4,
|
|
998
1006
|
borderRadius: 8,
|
|
999
1007
|
borderWidth: 1,
|
|
1000
|
-
borderColor: 'rgba(255, 255, 255, 0.1)'
|
|
1008
|
+
borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
1009
|
+
}}>
|
|
1010
|
+
<react_native_1.Text style={{
|
|
1011
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1012
|
+
fontSize: 10.5,
|
|
1013
|
+
color: '#FFFFFF',
|
|
1001
1014
|
}}>
|
|
1002
|
-
|
|
1015
|
+
v1.0.13
|
|
1016
|
+
</react_native_1.Text>
|
|
1003
1017
|
</react_native_1.View>
|
|
1004
1018
|
</react_native_1.View>
|
|
1005
1019
|
</react_native_linear_gradient_1.default>
|
|
1006
1020
|
|
|
1007
1021
|
<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
|
|
1008
|
-
|
|
1009
1022
|
{/* Tab list */}
|
|
1010
|
-
<react_native_1.View style={{
|
|
1023
|
+
<react_native_1.View style={{
|
|
1024
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1025
|
+
borderRadius: 12,
|
|
1026
|
+
borderWidth: 1,
|
|
1027
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1028
|
+
overflow: 'hidden',
|
|
1029
|
+
}}>
|
|
1011
1030
|
{/* Table Header */}
|
|
1012
1031
|
<react_native_1.View style={{
|
|
1013
1032
|
flexDirection: 'row',
|
|
@@ -1019,8 +1038,26 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1019
1038
|
borderBottomColor: AppColors_1.AppColors.dividerColor,
|
|
1020
1039
|
gap: 12,
|
|
1021
1040
|
}}>
|
|
1022
|
-
<react_native_1.Text style={{
|
|
1023
|
-
|
|
1041
|
+
<react_native_1.Text style={{
|
|
1042
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1043
|
+
fontSize: 10,
|
|
1044
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
1045
|
+
letterSpacing: 0.6,
|
|
1046
|
+
flex: 1,
|
|
1047
|
+
}}>
|
|
1048
|
+
MODULE
|
|
1049
|
+
</react_native_1.Text>
|
|
1050
|
+
<react_native_1.Text style={{
|
|
1051
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1052
|
+
fontSize: 10,
|
|
1053
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
1054
|
+
letterSpacing: 0.6,
|
|
1055
|
+
width: 90,
|
|
1056
|
+
textAlign: 'right',
|
|
1057
|
+
paddingRight: 4,
|
|
1058
|
+
}}>
|
|
1059
|
+
VISIBILITY
|
|
1060
|
+
</react_native_1.Text>
|
|
1024
1061
|
</react_native_1.View>
|
|
1025
1062
|
|
|
1026
1063
|
{settingsTabs.map((tab, idx) => {
|
|
@@ -1037,27 +1074,53 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1037
1074
|
gap: 12,
|
|
1038
1075
|
}}>
|
|
1039
1076
|
{/* Icon + Label — fills remaining space */}
|
|
1040
|
-
<react_native_1.View style={{
|
|
1077
|
+
<react_native_1.View style={{
|
|
1078
|
+
flex: 1,
|
|
1079
|
+
flexDirection: 'row',
|
|
1080
|
+
alignItems: 'center',
|
|
1081
|
+
gap: 8,
|
|
1082
|
+
}}>
|
|
1041
1083
|
{/* Small icon tile */}
|
|
1042
1084
|
<react_native_1.View style={{
|
|
1043
|
-
width: 20,
|
|
1044
|
-
|
|
1085
|
+
width: 20,
|
|
1086
|
+
height: 20,
|
|
1087
|
+
borderRadius: 6,
|
|
1088
|
+
backgroundColor: isLocked
|
|
1089
|
+
? AppColors_1.AppColors.grayBorderSecondary
|
|
1090
|
+
: AppColors_1.AppColors.purpleShade50,
|
|
1045
1091
|
borderWidth: 1,
|
|
1046
|
-
borderColor: isLocked
|
|
1047
|
-
|
|
1092
|
+
borderColor: isLocked
|
|
1093
|
+
? AppColors_1.AppColors.dividerColor
|
|
1094
|
+
: 'rgba(104,75,155,0.2)',
|
|
1095
|
+
alignItems: 'center',
|
|
1096
|
+
justifyContent: 'center',
|
|
1048
1097
|
}}>
|
|
1049
|
-
{tab.icon === 'insights' && <NetworkIcons_1.InsightsIcon color={isLocked
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
{tab.icon === '
|
|
1053
|
-
|
|
1054
|
-
|
|
1098
|
+
{tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={isLocked
|
|
1099
|
+
? AppColors_1.AppColors.grayTextWeak
|
|
1100
|
+
: AppColors_1.AppColors.purple} size={11}/>)}
|
|
1101
|
+
{tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isLocked
|
|
1102
|
+
? AppColors_1.AppColors.grayTextWeak
|
|
1103
|
+
: AppColors_1.AppColors.purple} size={11}/>)}
|
|
1104
|
+
{tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isLocked
|
|
1105
|
+
? AppColors_1.AppColors.grayTextWeak
|
|
1106
|
+
: AppColors_1.AppColors.purple} size={11}/>)}
|
|
1107
|
+
{tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isLocked
|
|
1108
|
+
? AppColors_1.AppColors.grayTextWeak
|
|
1109
|
+
: AppColors_1.AppColors.purple} size={11}/>)}
|
|
1110
|
+
{tab.icon === 'webview' && (<NetworkIcons_1.GlobeIcon color={isLocked
|
|
1111
|
+
? AppColors_1.AppColors.grayTextWeak
|
|
1112
|
+
: AppColors_1.AppColors.purple} size={11}/>)}
|
|
1113
|
+
{tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isLocked
|
|
1114
|
+
? AppColors_1.AppColors.grayTextWeak
|
|
1115
|
+
: AppColors_1.AppColors.purple} size={11}/>)}
|
|
1055
1116
|
</react_native_1.View>
|
|
1056
1117
|
{/* Label + Required badge */}
|
|
1057
1118
|
<react_native_1.Text style={{
|
|
1058
1119
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1059
1120
|
fontSize: 13,
|
|
1060
|
-
color: isLocked
|
|
1121
|
+
color: isLocked
|
|
1122
|
+
? AppColors_1.AppColors.grayText
|
|
1123
|
+
: AppColors_1.AppColors.primaryBlack,
|
|
1061
1124
|
}}>
|
|
1062
1125
|
{tab.label}
|
|
1063
1126
|
</react_native_1.Text>
|
|
@@ -1072,8 +1135,19 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1072
1135
|
borderColor: 'rgba(104,75,155,0.18)',
|
|
1073
1136
|
gap: 3,
|
|
1074
1137
|
}}>
|
|
1075
|
-
<react_native_1.View style={{
|
|
1076
|
-
|
|
1138
|
+
<react_native_1.View style={{
|
|
1139
|
+
width: 4,
|
|
1140
|
+
height: 4,
|
|
1141
|
+
borderRadius: 2,
|
|
1142
|
+
backgroundColor: AppColors_1.AppColors.purple,
|
|
1143
|
+
opacity: 0.7,
|
|
1144
|
+
}}/>
|
|
1145
|
+
<react_native_1.Text style={{
|
|
1146
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1147
|
+
fontSize: 8.5,
|
|
1148
|
+
color: AppColors_1.AppColors.purple,
|
|
1149
|
+
letterSpacing: 0.4,
|
|
1150
|
+
}}>
|
|
1077
1151
|
DEFAULT
|
|
1078
1152
|
</react_native_1.Text>
|
|
1079
1153
|
</react_native_1.View>)}
|
|
@@ -1094,12 +1168,18 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1094
1168
|
</react_native_1.View>
|
|
1095
1169
|
|
|
1096
1170
|
{/* Visibility Switch in VISIBILITY column */}
|
|
1097
|
-
<react_native_1.View style={{
|
|
1171
|
+
<react_native_1.View style={{
|
|
1172
|
+
width: 90,
|
|
1173
|
+
alignItems: 'flex-end',
|
|
1174
|
+
justifyContent: 'center',
|
|
1175
|
+
}}>
|
|
1098
1176
|
<TouchableScale_1.default disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
|
|
1099
1177
|
width: 38,
|
|
1100
1178
|
height: 22,
|
|
1101
1179
|
borderRadius: 11,
|
|
1102
|
-
backgroundColor: isVisible
|
|
1180
|
+
backgroundColor: isVisible
|
|
1181
|
+
? AppColors_1.AppColors.purple
|
|
1182
|
+
: AppColors_1.AppColors.grayBorderSecondary,
|
|
1103
1183
|
padding: 2,
|
|
1104
1184
|
justifyContent: 'center',
|
|
1105
1185
|
alignItems: isVisible ? 'flex-end' : 'flex-start',
|
|
@@ -1122,8 +1202,22 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1122
1202
|
|
|
1123
1203
|
{/* Preferences Section */}
|
|
1124
1204
|
<react_native_1.View style={{ marginTop: 8 }}>
|
|
1125
|
-
<react_native_1.Text style={{
|
|
1126
|
-
|
|
1205
|
+
<react_native_1.Text style={{
|
|
1206
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1207
|
+
fontSize: 10,
|
|
1208
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
1209
|
+
letterSpacing: 0.6,
|
|
1210
|
+
marginBottom: 8,
|
|
1211
|
+
}}>
|
|
1212
|
+
PREFERENCES
|
|
1213
|
+
</react_native_1.Text>
|
|
1214
|
+
<react_native_1.View style={{
|
|
1215
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1216
|
+
borderRadius: 12,
|
|
1217
|
+
borderWidth: 1,
|
|
1218
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1219
|
+
overflow: 'hidden',
|
|
1220
|
+
}}>
|
|
1127
1221
|
<react_native_1.View style={{
|
|
1128
1222
|
flexDirection: 'row',
|
|
1129
1223
|
alignItems: 'center',
|
|
@@ -1132,13 +1226,21 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1132
1226
|
gap: 12,
|
|
1133
1227
|
}}>
|
|
1134
1228
|
{/* Icon + Label */}
|
|
1135
|
-
<react_native_1.View style={{
|
|
1229
|
+
<react_native_1.View style={{
|
|
1230
|
+
flex: 1,
|
|
1231
|
+
flexDirection: 'row',
|
|
1232
|
+
alignItems: 'center',
|
|
1233
|
+
gap: 8,
|
|
1234
|
+
}}>
|
|
1136
1235
|
<react_native_1.View style={{
|
|
1137
|
-
width: 20,
|
|
1236
|
+
width: 20,
|
|
1237
|
+
height: 20,
|
|
1238
|
+
borderRadius: 6,
|
|
1138
1239
|
backgroundColor: AppColors_1.AppColors.purpleShade50,
|
|
1139
1240
|
borderWidth: 1,
|
|
1140
1241
|
borderColor: 'rgba(104,75,155,0.2)',
|
|
1141
|
-
alignItems: 'center',
|
|
1242
|
+
alignItems: 'center',
|
|
1243
|
+
justifyContent: 'center',
|
|
1142
1244
|
}}>
|
|
1143
1245
|
{isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={11}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={11}/>)}
|
|
1144
1246
|
</react_native_1.View>
|
|
@@ -1162,7 +1264,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1162
1264
|
width: 38,
|
|
1163
1265
|
height: 22,
|
|
1164
1266
|
borderRadius: 11,
|
|
1165
|
-
backgroundColor: isDark
|
|
1267
|
+
backgroundColor: isDark
|
|
1268
|
+
? AppColors_1.AppColors.purple
|
|
1269
|
+
: AppColors_1.AppColors.grayBorderSecondary,
|
|
1166
1270
|
padding: 2,
|
|
1167
1271
|
justifyContent: 'center',
|
|
1168
1272
|
alignItems: isDark ? 'flex-end' : 'flex-start',
|
|
@@ -1207,14 +1311,23 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1207
1311
|
<NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.purple} size={16}/>
|
|
1208
1312
|
</TouchableScale_1.default>
|
|
1209
1313
|
{icon && (<react_native_1.View style={{
|
|
1210
|
-
width: 36,
|
|
1314
|
+
width: 36,
|
|
1315
|
+
height: 36,
|
|
1316
|
+
borderRadius: 10,
|
|
1211
1317
|
backgroundColor: AppColors_1.AppColors.purpleShade50,
|
|
1212
|
-
borderWidth: 1,
|
|
1213
|
-
|
|
1318
|
+
borderWidth: 1,
|
|
1319
|
+
borderColor: 'rgba(104,75,155,0.2)',
|
|
1320
|
+
alignItems: 'center',
|
|
1321
|
+
justifyContent: 'center',
|
|
1214
1322
|
}}>
|
|
1215
1323
|
{icon}
|
|
1216
1324
|
</react_native_1.View>)}
|
|
1217
|
-
<react_native_1.Text style={{
|
|
1325
|
+
<react_native_1.Text style={{
|
|
1326
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1327
|
+
fontSize: 18,
|
|
1328
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
1329
|
+
flex: 1,
|
|
1330
|
+
}}>
|
|
1218
1331
|
{title}
|
|
1219
1332
|
</react_native_1.Text>
|
|
1220
1333
|
{rightInfo ? (<react_native_1.View style={{
|
|
@@ -1225,7 +1338,11 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1225
1338
|
borderWidth: 1,
|
|
1226
1339
|
borderColor: 'rgba(104,75,155,0.15)',
|
|
1227
1340
|
}}>
|
|
1228
|
-
<react_native_1.Text style={{
|
|
1341
|
+
<react_native_1.Text style={{
|
|
1342
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1343
|
+
fontSize: 11,
|
|
1344
|
+
color: AppColors_1.AppColors.purple,
|
|
1345
|
+
}}>
|
|
1229
1346
|
{rightInfo}
|
|
1230
1347
|
</react_native_1.Text>
|
|
1231
1348
|
</react_native_1.View>) : null}
|
|
@@ -1242,18 +1359,31 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1242
1359
|
gap: 12,
|
|
1243
1360
|
}}>
|
|
1244
1361
|
<react_native_1.View style={{
|
|
1245
|
-
width: 36,
|
|
1362
|
+
width: 36,
|
|
1363
|
+
height: 36,
|
|
1364
|
+
borderRadius: 10,
|
|
1246
1365
|
backgroundColor: AppColors_1.AppColors.purpleShade50,
|
|
1247
|
-
borderWidth: 1,
|
|
1248
|
-
|
|
1366
|
+
borderWidth: 1,
|
|
1367
|
+
borderColor: 'rgba(104,75,155,0.18)',
|
|
1368
|
+
alignItems: 'center',
|
|
1369
|
+
justifyContent: 'center',
|
|
1249
1370
|
}}>
|
|
1250
1371
|
{opts.icon}
|
|
1251
1372
|
</react_native_1.View>
|
|
1252
1373
|
<react_native_1.View style={{ flex: 1 }}>
|
|
1253
|
-
<react_native_1.Text style={{
|
|
1374
|
+
<react_native_1.Text style={{
|
|
1375
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1376
|
+
fontSize: 14,
|
|
1377
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
1378
|
+
}}>
|
|
1254
1379
|
{opts.label}
|
|
1255
1380
|
</react_native_1.Text>
|
|
1256
|
-
{opts.description ? (<react_native_1.Text style={{
|
|
1381
|
+
{opts.description ? (<react_native_1.Text style={{
|
|
1382
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
1383
|
+
fontSize: 11,
|
|
1384
|
+
color: AppColors_1.AppColors.grayText,
|
|
1385
|
+
marginTop: 1,
|
|
1386
|
+
}}>
|
|
1257
1387
|
{opts.description}
|
|
1258
1388
|
</react_native_1.Text>) : null}
|
|
1259
1389
|
</react_native_1.View>
|
|
@@ -1275,14 +1405,20 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1275
1405
|
paddingVertical: 6,
|
|
1276
1406
|
alignItems: 'center',
|
|
1277
1407
|
borderRadius: 6,
|
|
1278
|
-
backgroundColor: isActive
|
|
1408
|
+
backgroundColor: isActive
|
|
1409
|
+
? AppColors_1.AppColors.purple
|
|
1410
|
+
: 'transparent',
|
|
1279
1411
|
}}>
|
|
1280
1412
|
<react_native_1.Text style={{
|
|
1281
1413
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1282
1414
|
fontSize: 11,
|
|
1283
1415
|
color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
|
|
1284
1416
|
}}>
|
|
1285
|
-
{typeof opt === 'number' &&
|
|
1417
|
+
{typeof opt === 'number' &&
|
|
1418
|
+
opt >= 500 &&
|
|
1419
|
+
settingsPage === 'insights'
|
|
1420
|
+
? `${opt}ms`
|
|
1421
|
+
: opt}
|
|
1286
1422
|
</react_native_1.Text>
|
|
1287
1423
|
</TouchableScale_1.default>);
|
|
1288
1424
|
})}
|
|
@@ -1291,7 +1427,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1291
1427
|
if (settingsPage === 'apis') {
|
|
1292
1428
|
return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
|
|
1293
1429
|
{renderSubHeader('APIs Settings', <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>, `Total: ${logs.length}`)}
|
|
1294
|
-
<react_native_1.View style={{
|
|
1430
|
+
<react_native_1.View style={{
|
|
1431
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1432
|
+
padding: 16,
|
|
1433
|
+
borderRadius: 12,
|
|
1434
|
+
borderWidth: 1,
|
|
1435
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1436
|
+
gap: 4,
|
|
1437
|
+
}}>
|
|
1295
1438
|
{renderSettingRow({
|
|
1296
1439
|
icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
|
|
1297
1440
|
label: 'Max Request Logs',
|
|
@@ -1305,7 +1448,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1305
1448
|
})}
|
|
1306
1449
|
</react_native_1.View>
|
|
1307
1450
|
|
|
1308
|
-
<react_native_1.View style={{
|
|
1451
|
+
<react_native_1.View style={{
|
|
1452
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1453
|
+
borderRadius: 12,
|
|
1454
|
+
borderWidth: 1,
|
|
1455
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1456
|
+
padding: 16,
|
|
1457
|
+
marginTop: 12,
|
|
1458
|
+
}}>
|
|
1309
1459
|
{renderSettingRow({
|
|
1310
1460
|
icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
|
|
1311
1461
|
label: 'Clear Network Logs',
|
|
@@ -1316,8 +1466,21 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1316
1466
|
setSelected(null);
|
|
1317
1467
|
react_native_1.Alert.alert('Success', 'Network logs cleared.');
|
|
1318
1468
|
},
|
|
1319
|
-
right: (<react_native_1.View style={{
|
|
1320
|
-
|
|
1469
|
+
right: (<react_native_1.View style={{
|
|
1470
|
+
paddingHorizontal: 10,
|
|
1471
|
+
paddingVertical: 5,
|
|
1472
|
+
borderRadius: 7,
|
|
1473
|
+
backgroundColor: 'rgba(255,46,87,0.08)',
|
|
1474
|
+
borderWidth: 1,
|
|
1475
|
+
borderColor: 'rgba(255,46,87,0.2)',
|
|
1476
|
+
}}>
|
|
1477
|
+
<react_native_1.Text style={{
|
|
1478
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1479
|
+
fontSize: 11,
|
|
1480
|
+
color: AppColors_1.AppColors.errorColor,
|
|
1481
|
+
}}>
|
|
1482
|
+
Clear
|
|
1483
|
+
</react_native_1.Text>
|
|
1321
1484
|
</react_native_1.View>),
|
|
1322
1485
|
})}
|
|
1323
1486
|
</react_native_1.View>
|
|
@@ -1326,7 +1489,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1326
1489
|
if (settingsPage === 'logs') {
|
|
1327
1490
|
return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
|
|
1328
1491
|
{renderSubHeader('Logs Settings', <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>, `Total: ${consoleLogs.length}`)}
|
|
1329
|
-
<react_native_1.View style={{
|
|
1492
|
+
<react_native_1.View style={{
|
|
1493
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1494
|
+
padding: 16,
|
|
1495
|
+
borderRadius: 12,
|
|
1496
|
+
borderWidth: 1,
|
|
1497
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1498
|
+
gap: 4,
|
|
1499
|
+
}}>
|
|
1330
1500
|
{renderSettingRow({
|
|
1331
1501
|
icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
|
|
1332
1502
|
label: 'Max Console Logs',
|
|
@@ -1338,30 +1508,67 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1338
1508
|
},
|
|
1339
1509
|
})}
|
|
1340
1510
|
<react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
|
|
1341
|
-
<react_native_1.Text style={{
|
|
1511
|
+
<react_native_1.Text style={{
|
|
1512
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1513
|
+
fontSize: 13,
|
|
1514
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
1515
|
+
paddingTop: 4,
|
|
1516
|
+
}}>
|
|
1517
|
+
Log Levels
|
|
1518
|
+
</react_native_1.Text>
|
|
1342
1519
|
{['info', 'warn', 'error'].map((level, li) => {
|
|
1343
1520
|
const isLvlActive = showConsoleLevels[level];
|
|
1344
|
-
const levelColor = level === 'error'
|
|
1521
|
+
const levelColor = level === 'error'
|
|
1522
|
+
? AppColors_1.AppColors.errorColor
|
|
1523
|
+
: level === 'warn'
|
|
1524
|
+
? AppColors_1.AppColors.warningIconGold
|
|
1525
|
+
: AppColors_1.AppColors.skyBlue;
|
|
1345
1526
|
return renderSettingRow({
|
|
1346
|
-
icon: <react_native_1.View style={{
|
|
1527
|
+
icon: (<react_native_1.View style={{
|
|
1528
|
+
width: 10,
|
|
1529
|
+
height: 10,
|
|
1530
|
+
borderRadius: 5,
|
|
1531
|
+
backgroundColor: levelColor,
|
|
1532
|
+
}}/>),
|
|
1347
1533
|
label: `Show ${level.charAt(0).toUpperCase() + level.slice(1)} logs`,
|
|
1348
|
-
description: level === 'info'
|
|
1534
|
+
description: level === 'info'
|
|
1535
|
+
? 'Informational messages'
|
|
1536
|
+
: level === 'warn'
|
|
1537
|
+
? 'Warning messages'
|
|
1538
|
+
: 'Error messages',
|
|
1349
1539
|
isLast: level === 'error',
|
|
1350
|
-
onPress: () => setShowConsoleLevels(prev => ({
|
|
1540
|
+
onPress: () => setShowConsoleLevels(prev => ({
|
|
1541
|
+
...prev,
|
|
1542
|
+
[level]: !prev[level],
|
|
1543
|
+
})),
|
|
1351
1544
|
right: (<react_native_1.View style={{
|
|
1352
|
-
width: 22,
|
|
1545
|
+
width: 22,
|
|
1546
|
+
height: 22,
|
|
1547
|
+
borderRadius: 6,
|
|
1353
1548
|
borderWidth: 2,
|
|
1354
|
-
borderColor: isLvlActive
|
|
1355
|
-
|
|
1356
|
-
|
|
1549
|
+
borderColor: isLvlActive
|
|
1550
|
+
? AppColors_1.AppColors.purple
|
|
1551
|
+
: AppColors_1.AppColors.grayTextWeak,
|
|
1552
|
+
backgroundColor: isLvlActive
|
|
1553
|
+
? 'rgba(104, 75, 155, 0.1)'
|
|
1554
|
+
: 'transparent',
|
|
1555
|
+
alignItems: 'center',
|
|
1556
|
+
justifyContent: 'center',
|
|
1357
1557
|
}}>
|
|
1358
|
-
{isLvlActive && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
|
|
1558
|
+
{isLvlActive && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
|
|
1359
1559
|
</react_native_1.View>),
|
|
1360
1560
|
});
|
|
1361
1561
|
})}
|
|
1362
1562
|
</react_native_1.View>
|
|
1363
1563
|
|
|
1364
|
-
<react_native_1.View style={{
|
|
1564
|
+
<react_native_1.View style={{
|
|
1565
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1566
|
+
borderRadius: 12,
|
|
1567
|
+
borderWidth: 1,
|
|
1568
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1569
|
+
padding: 16,
|
|
1570
|
+
marginTop: 12,
|
|
1571
|
+
}}>
|
|
1365
1572
|
{renderSettingRow({
|
|
1366
1573
|
icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
|
|
1367
1574
|
label: 'Clear Console Logs',
|
|
@@ -1371,8 +1578,21 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1371
1578
|
(0, consoleLogger_1.clearConsoleLogs)();
|
|
1372
1579
|
react_native_1.Alert.alert('Success', 'Console logs cleared.');
|
|
1373
1580
|
},
|
|
1374
|
-
right: (<react_native_1.View style={{
|
|
1375
|
-
|
|
1581
|
+
right: (<react_native_1.View style={{
|
|
1582
|
+
paddingHorizontal: 10,
|
|
1583
|
+
paddingVertical: 5,
|
|
1584
|
+
borderRadius: 7,
|
|
1585
|
+
backgroundColor: 'rgba(255,46,87,0.08)',
|
|
1586
|
+
borderWidth: 1,
|
|
1587
|
+
borderColor: 'rgba(255,46,87,0.2)',
|
|
1588
|
+
}}>
|
|
1589
|
+
<react_native_1.Text style={{
|
|
1590
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1591
|
+
fontSize: 11,
|
|
1592
|
+
color: AppColors_1.AppColors.errorColor,
|
|
1593
|
+
}}>
|
|
1594
|
+
Clear
|
|
1595
|
+
</react_native_1.Text>
|
|
1376
1596
|
</react_native_1.View>),
|
|
1377
1597
|
})}
|
|
1378
1598
|
</react_native_1.View>
|
|
@@ -1381,7 +1601,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1381
1601
|
if (settingsPage === 'analytics') {
|
|
1382
1602
|
return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
|
|
1383
1603
|
{renderSubHeader('Analytics Settings', <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>, `Events: ${analyticsEvents.length}`)}
|
|
1384
|
-
<react_native_1.View style={{
|
|
1604
|
+
<react_native_1.View style={{
|
|
1605
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1606
|
+
padding: 16,
|
|
1607
|
+
borderRadius: 12,
|
|
1608
|
+
borderWidth: 1,
|
|
1609
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1610
|
+
gap: 4,
|
|
1611
|
+
}}>
|
|
1385
1612
|
{renderSettingRow({
|
|
1386
1613
|
icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
|
|
1387
1614
|
label: 'Events Captured',
|
|
@@ -1389,7 +1616,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1389
1616
|
isLast: true,
|
|
1390
1617
|
})}
|
|
1391
1618
|
</react_native_1.View>
|
|
1392
|
-
<react_native_1.View style={{
|
|
1619
|
+
<react_native_1.View style={{
|
|
1620
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1621
|
+
borderRadius: 12,
|
|
1622
|
+
borderWidth: 1,
|
|
1623
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1624
|
+
padding: 16,
|
|
1625
|
+
marginTop: 12,
|
|
1626
|
+
}}>
|
|
1393
1627
|
{renderSettingRow({
|
|
1394
1628
|
icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
|
|
1395
1629
|
label: 'Clear Analytics History',
|
|
@@ -1400,8 +1634,21 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1400
1634
|
setSelectedEvent(null);
|
|
1401
1635
|
react_native_1.Alert.alert('Success', 'Analytics events cleared.');
|
|
1402
1636
|
},
|
|
1403
|
-
right: (<react_native_1.View style={{
|
|
1404
|
-
|
|
1637
|
+
right: (<react_native_1.View style={{
|
|
1638
|
+
paddingHorizontal: 10,
|
|
1639
|
+
paddingVertical: 5,
|
|
1640
|
+
borderRadius: 7,
|
|
1641
|
+
backgroundColor: 'rgba(255,46,87,0.08)',
|
|
1642
|
+
borderWidth: 1,
|
|
1643
|
+
borderColor: 'rgba(255,46,87,0.2)',
|
|
1644
|
+
}}>
|
|
1645
|
+
<react_native_1.Text style={{
|
|
1646
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1647
|
+
fontSize: 11,
|
|
1648
|
+
color: AppColors_1.AppColors.errorColor,
|
|
1649
|
+
}}>
|
|
1650
|
+
Clear
|
|
1651
|
+
</react_native_1.Text>
|
|
1405
1652
|
</react_native_1.View>),
|
|
1406
1653
|
})}
|
|
1407
1654
|
</react_native_1.View>
|
|
@@ -1410,25 +1657,46 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1410
1657
|
if (settingsPage === 'webview') {
|
|
1411
1658
|
return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
|
|
1412
1659
|
{renderSubHeader('WebView Settings', <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={16}/>, `History: ${webViewNavHistory.length}`)}
|
|
1413
|
-
<react_native_1.View style={{
|
|
1660
|
+
<react_native_1.View style={{
|
|
1661
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1662
|
+
padding: 16,
|
|
1663
|
+
borderRadius: 12,
|
|
1664
|
+
borderWidth: 1,
|
|
1665
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1666
|
+
gap: 4,
|
|
1667
|
+
}}>
|
|
1414
1668
|
{renderSettingRow({
|
|
1415
1669
|
icon: <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={16}/>,
|
|
1416
1670
|
label: 'Capture CSS & JavaScript',
|
|
1417
1671
|
description: 'Extract stylesheet and script source from pages',
|
|
1418
1672
|
onPress: () => setWebViewCaptureCssJs(prev => !prev),
|
|
1419
1673
|
right: (<react_native_1.View style={{
|
|
1420
|
-
width: 22,
|
|
1674
|
+
width: 22,
|
|
1675
|
+
height: 22,
|
|
1676
|
+
borderRadius: 6,
|
|
1421
1677
|
borderWidth: 2,
|
|
1422
|
-
borderColor: webViewCaptureCssJs
|
|
1423
|
-
|
|
1424
|
-
|
|
1678
|
+
borderColor: webViewCaptureCssJs
|
|
1679
|
+
? AppColors_1.AppColors.purple
|
|
1680
|
+
: AppColors_1.AppColors.grayTextWeak,
|
|
1681
|
+
backgroundColor: webViewCaptureCssJs
|
|
1682
|
+
? 'rgba(104, 75, 155, 0.1)'
|
|
1683
|
+
: 'transparent',
|
|
1684
|
+
alignItems: 'center',
|
|
1685
|
+
justifyContent: 'center',
|
|
1425
1686
|
}}>
|
|
1426
|
-
{webViewCaptureCssJs && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
|
|
1687
|
+
{webViewCaptureCssJs && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
|
|
1427
1688
|
</react_native_1.View>),
|
|
1428
1689
|
isLast: true,
|
|
1429
1690
|
})}
|
|
1430
1691
|
</react_native_1.View>
|
|
1431
|
-
<react_native_1.View style={{
|
|
1692
|
+
<react_native_1.View style={{
|
|
1693
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1694
|
+
borderRadius: 12,
|
|
1695
|
+
borderWidth: 1,
|
|
1696
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1697
|
+
padding: 16,
|
|
1698
|
+
marginTop: 12,
|
|
1699
|
+
}}>
|
|
1432
1700
|
{renderSettingRow({
|
|
1433
1701
|
icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
|
|
1434
1702
|
label: 'Clear WebView Data',
|
|
@@ -1438,8 +1706,21 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1438
1706
|
(0, webViewLogger_1.clearWebViewData)();
|
|
1439
1707
|
react_native_1.Alert.alert('Success', 'WebView source history cleared.');
|
|
1440
1708
|
},
|
|
1441
|
-
right: (<react_native_1.View style={{
|
|
1442
|
-
|
|
1709
|
+
right: (<react_native_1.View style={{
|
|
1710
|
+
paddingHorizontal: 10,
|
|
1711
|
+
paddingVertical: 5,
|
|
1712
|
+
borderRadius: 7,
|
|
1713
|
+
backgroundColor: 'rgba(255,46,87,0.08)',
|
|
1714
|
+
borderWidth: 1,
|
|
1715
|
+
borderColor: 'rgba(255,46,87,0.2)',
|
|
1716
|
+
}}>
|
|
1717
|
+
<react_native_1.Text style={{
|
|
1718
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1719
|
+
fontSize: 11,
|
|
1720
|
+
color: AppColors_1.AppColors.errorColor,
|
|
1721
|
+
}}>
|
|
1722
|
+
Clear
|
|
1723
|
+
</react_native_1.Text>
|
|
1443
1724
|
</react_native_1.View>),
|
|
1444
1725
|
})}
|
|
1445
1726
|
</react_native_1.View>
|
|
@@ -1448,20 +1729,34 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1448
1729
|
if (settingsPage === 'redux') {
|
|
1449
1730
|
return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
|
|
1450
1731
|
{renderSubHeader('Redux Settings', <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>, `Reducers: ${Object.keys(reduxState || {}).length}`)}
|
|
1451
|
-
<react_native_1.View style={{
|
|
1732
|
+
<react_native_1.View style={{
|
|
1733
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1734
|
+
padding: 16,
|
|
1735
|
+
borderRadius: 12,
|
|
1736
|
+
borderWidth: 1,
|
|
1737
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1738
|
+
gap: 4,
|
|
1739
|
+
}}>
|
|
1452
1740
|
{renderSettingRow({
|
|
1453
1741
|
icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
|
|
1454
1742
|
label: 'Auto-refresh Store',
|
|
1455
1743
|
description: 'Automatically capture Redux store state updates',
|
|
1456
1744
|
onPress: () => setReduxAutoRefreshState(prev => !prev),
|
|
1457
1745
|
right: (<react_native_1.View style={{
|
|
1458
|
-
width: 22,
|
|
1746
|
+
width: 22,
|
|
1747
|
+
height: 22,
|
|
1748
|
+
borderRadius: 6,
|
|
1459
1749
|
borderWidth: 2,
|
|
1460
|
-
borderColor: reduxAutoRefresh
|
|
1461
|
-
|
|
1462
|
-
|
|
1750
|
+
borderColor: reduxAutoRefresh
|
|
1751
|
+
? AppColors_1.AppColors.purple
|
|
1752
|
+
: AppColors_1.AppColors.grayTextWeak,
|
|
1753
|
+
backgroundColor: reduxAutoRefresh
|
|
1754
|
+
? 'rgba(104, 75, 155, 0.1)'
|
|
1755
|
+
: 'transparent',
|
|
1756
|
+
alignItems: 'center',
|
|
1757
|
+
justifyContent: 'center',
|
|
1463
1758
|
}}>
|
|
1464
|
-
{reduxAutoRefresh && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
|
|
1759
|
+
{reduxAutoRefresh && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
|
|
1465
1760
|
</react_native_1.View>),
|
|
1466
1761
|
})}
|
|
1467
1762
|
<react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
|
|
@@ -1478,18 +1773,40 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1478
1773
|
})}
|
|
1479
1774
|
</react_native_1.View>
|
|
1480
1775
|
|
|
1481
|
-
<react_native_1.View style={{
|
|
1776
|
+
<react_native_1.View style={{
|
|
1777
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1778
|
+
borderRadius: 12,
|
|
1779
|
+
borderWidth: 1,
|
|
1780
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1781
|
+
padding: 16,
|
|
1782
|
+
marginTop: 12,
|
|
1783
|
+
}}>
|
|
1482
1784
|
{renderSettingRow({
|
|
1483
1785
|
icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
|
|
1484
1786
|
label: 'Clear Redux State',
|
|
1485
|
-
description: reduxState
|
|
1787
|
+
description: reduxState
|
|
1788
|
+
? 'Reset state snapshot in inspector'
|
|
1789
|
+
: 'No store snapshot stored',
|
|
1486
1790
|
isLast: true,
|
|
1487
1791
|
onPress: () => {
|
|
1488
1792
|
setReduxState(null);
|
|
1489
1793
|
react_native_1.Alert.alert('Success', 'Redux state snapshot cleared.');
|
|
1490
1794
|
},
|
|
1491
|
-
right: (<react_native_1.View style={{
|
|
1492
|
-
|
|
1795
|
+
right: (<react_native_1.View style={{
|
|
1796
|
+
paddingHorizontal: 10,
|
|
1797
|
+
paddingVertical: 5,
|
|
1798
|
+
borderRadius: 7,
|
|
1799
|
+
backgroundColor: 'rgba(255,46,87,0.08)',
|
|
1800
|
+
borderWidth: 1,
|
|
1801
|
+
borderColor: 'rgba(255,46,87,0.2)',
|
|
1802
|
+
}}>
|
|
1803
|
+
<react_native_1.Text style={{
|
|
1804
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1805
|
+
fontSize: 11,
|
|
1806
|
+
color: AppColors_1.AppColors.errorColor,
|
|
1807
|
+
}}>
|
|
1808
|
+
Clear
|
|
1809
|
+
</react_native_1.Text>
|
|
1493
1810
|
</react_native_1.View>),
|
|
1494
1811
|
})}
|
|
1495
1812
|
</react_native_1.View>
|
|
@@ -1498,7 +1815,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1498
1815
|
// Default return page is Insights settings
|
|
1499
1816
|
return (<react_native_1.ScrollView style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }} contentContainerStyle={{ padding: 16 }}>
|
|
1500
1817
|
{renderSubHeader('Insights Settings', <NetworkIcons_1.InsightsIcon color={AppColors_1.AppColors.purple} size={16}/>)}
|
|
1501
|
-
<react_native_1.View style={{
|
|
1818
|
+
<react_native_1.View style={{
|
|
1819
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
1820
|
+
padding: 16,
|
|
1821
|
+
borderRadius: 12,
|
|
1822
|
+
borderWidth: 1,
|
|
1823
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
1824
|
+
gap: 4,
|
|
1825
|
+
}}>
|
|
1502
1826
|
{renderSettingRow({
|
|
1503
1827
|
icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
|
|
1504
1828
|
label: 'Slow Latency Warning',
|
|
@@ -1517,13 +1841,20 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1517
1841
|
isLast: true,
|
|
1518
1842
|
onPress: () => setInsightsShowConsoleAlerts(prev => !prev),
|
|
1519
1843
|
right: (<react_native_1.View style={{
|
|
1520
|
-
width: 22,
|
|
1844
|
+
width: 22,
|
|
1845
|
+
height: 22,
|
|
1846
|
+
borderRadius: 6,
|
|
1521
1847
|
borderWidth: 2,
|
|
1522
|
-
borderColor: insightsShowConsoleAlerts
|
|
1523
|
-
|
|
1524
|
-
|
|
1848
|
+
borderColor: insightsShowConsoleAlerts
|
|
1849
|
+
? AppColors_1.AppColors.purple
|
|
1850
|
+
: AppColors_1.AppColors.grayTextWeak,
|
|
1851
|
+
backgroundColor: insightsShowConsoleAlerts
|
|
1852
|
+
? 'rgba(104, 75, 155, 0.1)'
|
|
1853
|
+
: 'transparent',
|
|
1854
|
+
alignItems: 'center',
|
|
1855
|
+
justifyContent: 'center',
|
|
1525
1856
|
}}>
|
|
1526
|
-
{insightsShowConsoleAlerts && <NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>}
|
|
1857
|
+
{insightsShowConsoleAlerts && (<NetworkIcons_1.CheckIcon size={12} color={AppColors_1.AppColors.purple}/>)}
|
|
1527
1858
|
</react_native_1.View>),
|
|
1528
1859
|
})}
|
|
1529
1860
|
</react_native_1.View>
|
|
@@ -1531,10 +1862,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1531
1862
|
};
|
|
1532
1863
|
const renderInsightsDashboard = () => {
|
|
1533
1864
|
const apiTotal = logs.length;
|
|
1534
|
-
const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) ||
|
|
1865
|
+
const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) ||
|
|
1866
|
+
l.status === 0 ||
|
|
1867
|
+
l.status == null).length;
|
|
1535
1868
|
const apiSuccess = apiTotal - apiErrors;
|
|
1536
1869
|
const apiSuccessRate = apiTotal > 0 ? Math.round((apiSuccess / apiTotal) * 100) : 100;
|
|
1537
|
-
const durations = logs
|
|
1870
|
+
const durations = logs
|
|
1871
|
+
.filter(l => l.duration != null)
|
|
1872
|
+
.map(l => l.duration);
|
|
1538
1873
|
const avgTime = durations.length > 0
|
|
1539
1874
|
? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length)
|
|
1540
1875
|
: null;
|
|
@@ -1544,7 +1879,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1544
1879
|
const logInfos = visibleConsoleLogs.filter(l => l.type === 'info').length;
|
|
1545
1880
|
const analyticsTotal = analyticsEvents.length;
|
|
1546
1881
|
const uniqueEvents = new Set(analyticsEvents.map(e => e.name)).size;
|
|
1547
|
-
const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' ||
|
|
1882
|
+
const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' ||
|
|
1883
|
+
e.name === 'page_view' ||
|
|
1884
|
+
e.name === 'firebase_screen_class').length;
|
|
1548
1885
|
const webviewTotal = webViewNavHistory.length;
|
|
1549
1886
|
return (<react_native_1.View style={styles_1.default.dashboardContainer}>
|
|
1550
1887
|
{/* Module 1: APIs */}
|
|
@@ -1562,13 +1899,19 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1562
1899
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Requests</react_native_1.Text>
|
|
1563
1900
|
</react_native_1.View>
|
|
1564
1901
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1565
|
-
<react_native_1.Text style={[
|
|
1902
|
+
<react_native_1.Text style={[
|
|
1903
|
+
styles_1.default.dashboardGridVal,
|
|
1904
|
+
apiSuccessRate < 90 && { color: AppColors_1.AppColors.warningIconGold },
|
|
1905
|
+
]}>
|
|
1566
1906
|
{apiSuccessRate}%
|
|
1567
1907
|
</react_native_1.Text>
|
|
1568
1908
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Success Rate</react_native_1.Text>
|
|
1569
1909
|
</react_native_1.View>
|
|
1570
1910
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1571
|
-
<react_native_1.Text style={[
|
|
1911
|
+
<react_native_1.Text style={[
|
|
1912
|
+
styles_1.default.dashboardGridVal,
|
|
1913
|
+
apiErrors > 0 && { color: AppColors_1.AppColors.errorColor },
|
|
1914
|
+
]}>
|
|
1572
1915
|
{apiErrors}
|
|
1573
1916
|
</react_native_1.Text>
|
|
1574
1917
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
|
|
@@ -1597,17 +1940,25 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1597
1940
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Logs</react_native_1.Text>
|
|
1598
1941
|
</react_native_1.View>
|
|
1599
1942
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1600
|
-
<react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>
|
|
1943
|
+
<react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>
|
|
1944
|
+
{logInfos}
|
|
1945
|
+
</react_native_1.Text>
|
|
1601
1946
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Info</react_native_1.Text>
|
|
1602
1947
|
</react_native_1.View>
|
|
1603
1948
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1604
|
-
<react_native_1.Text style={[
|
|
1949
|
+
<react_native_1.Text style={[
|
|
1950
|
+
styles_1.default.dashboardGridVal,
|
|
1951
|
+
logWarns > 0 && { color: AppColors_1.AppColors.warningIconGold },
|
|
1952
|
+
]}>
|
|
1605
1953
|
{logWarns}
|
|
1606
1954
|
</react_native_1.Text>
|
|
1607
1955
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Warnings</react_native_1.Text>
|
|
1608
1956
|
</react_native_1.View>
|
|
1609
1957
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1610
|
-
<react_native_1.Text style={[
|
|
1958
|
+
<react_native_1.Text style={[
|
|
1959
|
+
styles_1.default.dashboardGridVal,
|
|
1960
|
+
logErrors > 0 && { color: AppColors_1.AppColors.errorColor },
|
|
1961
|
+
]}>
|
|
1611
1962
|
{logErrors}
|
|
1612
1963
|
</react_native_1.Text>
|
|
1613
1964
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
|
|
@@ -1620,7 +1971,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1620
1971
|
<react_native_1.View style={styles_1.default.dashboardModuleHeader}>
|
|
1621
1972
|
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
1622
1973
|
<NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
|
|
1623
|
-
<react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
|
|
1974
|
+
<react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
|
|
1975
|
+
Analytics Events
|
|
1976
|
+
</react_native_1.Text>
|
|
1624
1977
|
</react_native_1.View>
|
|
1625
1978
|
<react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
|
|
1626
1979
|
</react_native_1.View>
|
|
@@ -1630,7 +1983,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1630
1983
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Events</react_native_1.Text>
|
|
1631
1984
|
</react_native_1.View>
|
|
1632
1985
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1633
|
-
<react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>
|
|
1986
|
+
<react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>
|
|
1987
|
+
{uniqueEvents}
|
|
1988
|
+
</react_native_1.Text>
|
|
1634
1989
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Unique Names</react_native_1.Text>
|
|
1635
1990
|
</react_native_1.View>
|
|
1636
1991
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
@@ -1639,7 +1994,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1639
1994
|
</react_native_1.View>
|
|
1640
1995
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1641
1996
|
<react_native_1.Text style={styles_1.default.dashboardGridVal}>
|
|
1642
|
-
{analyticsTotal > 0
|
|
1997
|
+
{analyticsTotal > 0
|
|
1998
|
+
? Math.round(analyticsTotal / Math.max(1, logs.length / 5))
|
|
1999
|
+
: 0}
|
|
1643
2000
|
</react_native_1.Text>
|
|
1644
2001
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Events Ratio</react_native_1.Text>
|
|
1645
2002
|
</react_native_1.View>
|
|
@@ -1651,7 +2008,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1651
2008
|
<react_native_1.View style={styles_1.default.dashboardModuleHeader}>
|
|
1652
2009
|
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
1653
2010
|
<NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
|
|
1654
|
-
<react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
|
|
2011
|
+
<react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
|
|
2012
|
+
WebView Captures
|
|
2013
|
+
</react_native_1.Text>
|
|
1655
2014
|
</react_native_1.View>
|
|
1656
2015
|
<react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
|
|
1657
2016
|
</react_native_1.View>
|
|
@@ -1661,12 +2020,16 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1661
2020
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>History Size</react_native_1.Text>
|
|
1662
2021
|
</react_native_1.View>
|
|
1663
2022
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1664
|
-
<react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>
|
|
2023
|
+
<react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>
|
|
2024
|
+
Active
|
|
2025
|
+
</react_native_1.Text>
|
|
1665
2026
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Status</react_native_1.Text>
|
|
1666
2027
|
</react_native_1.View>
|
|
1667
2028
|
<react_native_1.View style={styles_1.default.dashboardGridItem}>
|
|
1668
2029
|
<react_native_1.Text numberOfLines={1} style={styles_1.default.dashboardGridVal}>
|
|
1669
|
-
{webviewTotal > 0
|
|
2030
|
+
{webviewTotal > 0
|
|
2031
|
+
? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...`
|
|
2032
|
+
: '—'}
|
|
1670
2033
|
</react_native_1.Text>
|
|
1671
2034
|
<react_native_1.Text style={styles_1.default.dashboardGridLbl}>Last URL</react_native_1.Text>
|
|
1672
2035
|
</react_native_1.View>
|
|
@@ -1678,34 +2041,69 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1678
2041
|
<react_native_1.View style={styles_1.default.dashboardModuleHeader}>
|
|
1679
2042
|
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
1680
2043
|
<NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
|
|
1681
|
-
<react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
|
|
2044
|
+
<react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
|
|
2045
|
+
Redux Store State
|
|
2046
|
+
</react_native_1.Text>
|
|
1682
2047
|
</react_native_1.View>
|
|
1683
2048
|
<react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
|
|
1684
2049
|
</react_native_1.View>
|
|
1685
2050
|
{reduxState ? (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
|
|
1686
|
-
<react_native_1.View style={{
|
|
1687
|
-
|
|
2051
|
+
<react_native_1.View style={{
|
|
2052
|
+
flexDirection: 'row',
|
|
2053
|
+
justifyContent: 'space-between',
|
|
2054
|
+
marginBottom: 4,
|
|
2055
|
+
}}>
|
|
2056
|
+
<react_native_1.Text style={{
|
|
2057
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2058
|
+
fontSize: 10,
|
|
2059
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
2060
|
+
letterSpacing: 0.5,
|
|
2061
|
+
}}>
|
|
1688
2062
|
REDUCER NAME
|
|
1689
2063
|
</react_native_1.Text>
|
|
1690
|
-
<react_native_1.Text style={{
|
|
2064
|
+
<react_native_1.Text style={{
|
|
2065
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2066
|
+
fontSize: 10,
|
|
2067
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
2068
|
+
letterSpacing: 0.5,
|
|
2069
|
+
}}>
|
|
1691
2070
|
SIZE / FIELDS
|
|
1692
2071
|
</react_native_1.Text>
|
|
1693
2072
|
</react_native_1.View>
|
|
1694
2073
|
{Object.keys(reduxState).map(key => {
|
|
1695
2074
|
const val = reduxState[key];
|
|
1696
|
-
const fieldsCount = typeof val === 'object' && val !== null
|
|
2075
|
+
const fieldsCount = typeof val === 'object' && val !== null
|
|
2076
|
+
? Object.keys(val).length
|
|
2077
|
+
: 0;
|
|
1697
2078
|
const sizeStr = (0, helpers_1.getSize)(val);
|
|
1698
|
-
return (<react_native_1.View key={key} style={{
|
|
1699
|
-
|
|
2079
|
+
return (<react_native_1.View key={key} style={{
|
|
2080
|
+
flexDirection: 'row',
|
|
2081
|
+
justifyContent: 'space-between',
|
|
2082
|
+
alignItems: 'center',
|
|
2083
|
+
paddingVertical: 2,
|
|
2084
|
+
}}>
|
|
2085
|
+
<react_native_1.Text style={{
|
|
2086
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
2087
|
+
fontSize: 12,
|
|
2088
|
+
color: AppColors_1.AppColors.grayTextStrong,
|
|
2089
|
+
}}>
|
|
1700
2090
|
{key}
|
|
1701
2091
|
</react_native_1.Text>
|
|
1702
|
-
<react_native_1.Text style={{
|
|
2092
|
+
<react_native_1.Text style={{
|
|
2093
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
2094
|
+
fontSize: 11,
|
|
2095
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
2096
|
+
}}>
|
|
1703
2097
|
{sizeStr} ({fieldsCount} fields)
|
|
1704
2098
|
</react_native_1.Text>
|
|
1705
2099
|
</react_native_1.View>);
|
|
1706
2100
|
})}
|
|
1707
2101
|
</react_native_1.View>) : (<react_native_1.View style={{ padding: 12, alignItems: 'center' }}>
|
|
1708
|
-
<react_native_1.Text style={{
|
|
2102
|
+
<react_native_1.Text style={{
|
|
2103
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
2104
|
+
fontSize: 12,
|
|
2105
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
2106
|
+
}}>
|
|
1709
2107
|
No connected Redux store.
|
|
1710
2108
|
</react_native_1.Text>
|
|
1711
2109
|
</react_native_1.View>)}
|
|
@@ -1760,10 +2158,19 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1760
2158
|
<NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={20}/>
|
|
1761
2159
|
</react_native_1.View>
|
|
1762
2160
|
<react_native_1.View style={{ flex: 1 }}>
|
|
1763
|
-
<react_native_1.Text style={{
|
|
2161
|
+
<react_native_1.Text style={{
|
|
2162
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2163
|
+
fontSize: 13,
|
|
2164
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
2165
|
+
}}>
|
|
1764
2166
|
Redux Store Snapshot
|
|
1765
2167
|
</react_native_1.Text>
|
|
1766
|
-
<react_native_1.Text style={{
|
|
2168
|
+
<react_native_1.Text style={{
|
|
2169
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
2170
|
+
fontSize: 11,
|
|
2171
|
+
color: AppColors_1.AppColors.grayText,
|
|
2172
|
+
marginTop: 2,
|
|
2173
|
+
}}>
|
|
1767
2174
|
Total size: {(0, helpers_1.getSize)(reduxState)} • {reducerKeys.length} Reducers
|
|
1768
2175
|
</react_native_1.Text>
|
|
1769
2176
|
</react_native_1.View>
|
|
@@ -1787,12 +2194,16 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1787
2194
|
alignItems: 'center',
|
|
1788
2195
|
justifyContent: 'center',
|
|
1789
2196
|
borderRadius: 8,
|
|
1790
|
-
backgroundColor: reduxActiveSubTab === 'timeline'
|
|
2197
|
+
backgroundColor: reduxActiveSubTab === 'timeline'
|
|
2198
|
+
? AppColors_1.AppColors.purple
|
|
2199
|
+
: 'transparent',
|
|
1791
2200
|
}}>
|
|
1792
2201
|
<react_native_1.Text style={{
|
|
1793
2202
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
1794
2203
|
fontSize: 11,
|
|
1795
|
-
color: reduxActiveSubTab === 'timeline'
|
|
2204
|
+
color: reduxActiveSubTab === 'timeline'
|
|
2205
|
+
? '#FFFFFF'
|
|
2206
|
+
: AppColors_1.AppColors.grayText,
|
|
1796
2207
|
}}>
|
|
1797
2208
|
⚡ Action Timeline
|
|
1798
2209
|
</react_native_1.Text>
|
|
@@ -1828,7 +2239,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1828
2239
|
borderColor: AppColors_1.AppColors.dividerColor,
|
|
1829
2240
|
height: 36,
|
|
1830
2241
|
}}>
|
|
1831
|
-
<react_native_1.TextInput placeholder={reduxActiveSubTab === 'timeline'
|
|
2242
|
+
<react_native_1.TextInput placeholder={reduxActiveSubTab === 'timeline'
|
|
2243
|
+
? 'Search actions or payloads...'
|
|
2244
|
+
: 'Search Redux keys or values...'} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
|
|
1832
2245
|
flex: 1,
|
|
1833
2246
|
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
1834
2247
|
fontSize: 12,
|
|
@@ -1874,22 +2287,22 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1874
2287
|
<react_native_1.Modal visible={visible} animationType="slide" transparent>
|
|
1875
2288
|
{visible && (<ErrorBoundary_1.default onClose={closeModal}>
|
|
1876
2289
|
<react_native_1.View style={styles_1.default.modalBackdrop}>
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
2290
|
+
<react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
|
|
2291
|
+
<react_native_1.View style={styles_1.default.modalContentCard}>
|
|
2292
|
+
<react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
|
|
1880
2293
|
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
2294
|
+
<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, '#6B4EFF']} style={styles_1.default.headerGradient}>
|
|
2295
|
+
<react_native_1.View style={styles_1.default.header}>
|
|
2296
|
+
<react_native_1.View style={[
|
|
1884
2297
|
styles_1.default.headerLeft,
|
|
1885
2298
|
{
|
|
1886
2299
|
flexDirection: 'row',
|
|
1887
2300
|
alignItems: 'center',
|
|
1888
2301
|
gap: 16,
|
|
1889
|
-
flex:
|
|
2302
|
+
flex: selected == null && selectedEvent == null ? 5 : 1,
|
|
1890
2303
|
},
|
|
1891
2304
|
]}>
|
|
1892
|
-
|
|
2305
|
+
<TouchableScale_1.default onPress={() => {
|
|
1893
2306
|
requestAnimationFrame(() => {
|
|
1894
2307
|
setSelected(null);
|
|
1895
2308
|
setSelectedEvent(null);
|
|
@@ -1899,11 +2312,16 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1899
2312
|
selected == null &&
|
|
1900
2313
|
selectedEvent == null && { display: 'none' },
|
|
1901
2314
|
]}>
|
|
1902
|
-
|
|
1903
|
-
|
|
2315
|
+
<NetworkIcons_1.WhiteBackNavigation />
|
|
2316
|
+
</TouchableScale_1.default>
|
|
1904
2317
|
|
|
1905
|
-
|
|
1906
|
-
|
|
2318
|
+
{selected == null && selectedEvent == null ? (<react_native_1.View style={{
|
|
2319
|
+
flexDirection: 'row',
|
|
2320
|
+
alignItems: 'center',
|
|
2321
|
+
gap: 14,
|
|
2322
|
+
flex: 1,
|
|
2323
|
+
}}>
|
|
2324
|
+
<react_native_1.View style={{
|
|
1907
2325
|
width: 42,
|
|
1908
2326
|
height: 42,
|
|
1909
2327
|
borderRadius: 10,
|
|
@@ -1917,56 +2335,80 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1917
2335
|
shadowRadius: 4,
|
|
1918
2336
|
shadowOffset: { width: 0, height: 2 },
|
|
1919
2337
|
}}>
|
|
1920
|
-
|
|
1921
|
-
</react_native_1.View>
|
|
1922
|
-
<react_native_1.View style={{ gap: 3 }}>
|
|
1923
|
-
<react_native_1.Text style={[styles_1.default.headerTitle, { fontSize: 17, letterSpacing: 0.2 }]}>RN InApp Inspector</react_native_1.Text>
|
|
1924
|
-
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
|
|
1925
|
-
<react_native_1.Animated.View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#4ADE80', opacity: activePulseAnim }}/>
|
|
1926
|
-
<react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 10, color: 'rgba(255,255,255,0.78)', letterSpacing: 0.3 }}>
|
|
1927
|
-
Active • {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'} (v1.0.13)
|
|
1928
|
-
</react_native_1.Text>
|
|
2338
|
+
<NetworkIcons_1.BrandSquareIcon size={36}/>
|
|
1929
2339
|
</react_native_1.View>
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
2340
|
+
<react_native_1.View style={{ gap: 3 }}>
|
|
2341
|
+
<react_native_1.Text style={[
|
|
2342
|
+
styles_1.default.headerTitle,
|
|
2343
|
+
{ fontSize: 17, letterSpacing: 0.2 },
|
|
2344
|
+
]}>
|
|
2345
|
+
RN InApp Inspector
|
|
2346
|
+
</react_native_1.Text>
|
|
2347
|
+
<react_native_1.View style={{
|
|
2348
|
+
flexDirection: 'row',
|
|
2349
|
+
alignItems: 'center',
|
|
2350
|
+
gap: 5,
|
|
2351
|
+
}}>
|
|
2352
|
+
<react_native_1.Animated.View style={{
|
|
2353
|
+
width: 6,
|
|
2354
|
+
height: 6,
|
|
2355
|
+
borderRadius: 3,
|
|
2356
|
+
backgroundColor: '#4ADE80',
|
|
2357
|
+
opacity: activePulseAnim,
|
|
2358
|
+
}}/>
|
|
2359
|
+
<react_native_1.Text style={{
|
|
2360
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
2361
|
+
fontSize: 10,
|
|
2362
|
+
color: 'rgba(255,255,255,0.78)',
|
|
2363
|
+
letterSpacing: 0.3,
|
|
2364
|
+
}}>
|
|
2365
|
+
Active •{' '}
|
|
2366
|
+
{react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'}{' '}
|
|
2367
|
+
(v1.0.13)
|
|
2368
|
+
</react_native_1.Text>
|
|
2369
|
+
</react_native_1.View>
|
|
2370
|
+
</react_native_1.View>
|
|
2371
|
+
</react_native_1.View>) : null}
|
|
2372
|
+
</react_native_1.View>
|
|
2373
|
+
|
|
2374
|
+
<react_native_1.View style={styles_1.default.headerCenter}>
|
|
2375
|
+
{selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
|
|
2376
|
+
<react_native_1.View style={styles_1.default.headerDetailRow}>
|
|
2377
|
+
<react_native_1.View style={[
|
|
2378
|
+
styles_1.default.headerMethodBadge,
|
|
2379
|
+
{
|
|
1940
2380
|
backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
|
|
1941
2381
|
AppColors_1.AppColors.grayText,
|
|
1942
2382
|
},
|
|
1943
2383
|
]}>
|
|
1944
|
-
|
|
1945
|
-
|
|
2384
|
+
<react_native_1.Text style={styles_1.default.headerMethodText}>
|
|
2385
|
+
{selected.method}
|
|
2386
|
+
</react_native_1.Text>
|
|
2387
|
+
</react_native_1.View>
|
|
2388
|
+
<react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
|
|
2389
|
+
{detailTitle}
|
|
1946
2390
|
</react_native_1.Text>
|
|
1947
2391
|
</react_native_1.View>
|
|
1948
|
-
<react_native_1.
|
|
1949
|
-
{
|
|
1950
|
-
</react_native_1.Text>
|
|
1951
|
-
</react_native_1.View>
|
|
1952
|
-
<react_native_1.View style={styles_1.default.headerDetailSubRow}>
|
|
1953
|
-
<react_native_1.View style={[
|
|
2392
|
+
<react_native_1.View style={styles_1.default.headerDetailSubRow}>
|
|
2393
|
+
<react_native_1.View style={[
|
|
1954
2394
|
styles_1.default.headerStatusDot,
|
|
1955
|
-
{
|
|
2395
|
+
{
|
|
2396
|
+
backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
|
|
2397
|
+
},
|
|
1956
2398
|
]}/>
|
|
1957
|
-
|
|
1958
|
-
|
|
2399
|
+
<react_native_1.Text style={styles_1.default.headerSubTitle}>
|
|
2400
|
+
{selected.status === 0
|
|
1959
2401
|
? 'Failed'
|
|
1960
2402
|
: selected.status ?? 'Pending'}{' '}
|
|
1961
|
-
|
|
1962
|
-
|
|
2403
|
+
•{' '}
|
|
2404
|
+
{selected.duration != null
|
|
1963
2405
|
? `${selected.duration}ms`
|
|
1964
2406
|
: '-'}
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
2407
|
+
</react_native_1.Text>
|
|
2408
|
+
</react_native_1.View>
|
|
2409
|
+
</react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
|
|
2410
|
+
<react_native_1.View style={styles_1.default.headerDetailRow}>
|
|
2411
|
+
<react_native_1.View style={[
|
|
1970
2412
|
styles_1.default.headerMethodBadge,
|
|
1971
2413
|
{
|
|
1972
2414
|
backgroundColor: selectedEvent.source === 'firebase'
|
|
@@ -1974,16 +2416,18 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1974
2416
|
: 'rgba(124,92,191,0.3)',
|
|
1975
2417
|
},
|
|
1976
2418
|
]}>
|
|
1977
|
-
|
|
1978
|
-
|
|
2419
|
+
<react_native_1.Text style={styles_1.default.headerMethodText}>
|
|
2420
|
+
{selectedEvent.source === 'firebase'
|
|
2421
|
+
? 'FB'
|
|
2422
|
+
: 'MAN'}
|
|
2423
|
+
</react_native_1.Text>
|
|
2424
|
+
</react_native_1.View>
|
|
2425
|
+
<react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
|
|
2426
|
+
{selectedEvent.name}
|
|
1979
2427
|
</react_native_1.Text>
|
|
1980
2428
|
</react_native_1.View>
|
|
1981
|
-
<react_native_1.
|
|
1982
|
-
{
|
|
1983
|
-
</react_native_1.Text>
|
|
1984
|
-
</react_native_1.View>
|
|
1985
|
-
<react_native_1.View style={styles_1.default.headerDetailSubRow}>
|
|
1986
|
-
<react_native_1.View style={[
|
|
2429
|
+
<react_native_1.View style={styles_1.default.headerDetailSubRow}>
|
|
2430
|
+
<react_native_1.View style={[
|
|
1987
2431
|
styles_1.default.headerStatusDot,
|
|
1988
2432
|
{
|
|
1989
2433
|
backgroundColor: selectedEvent.source === 'firebase'
|
|
@@ -1991,46 +2435,90 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
1991
2435
|
: AppColors_1.AppColors.purple,
|
|
1992
2436
|
},
|
|
1993
2437
|
]}/>
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
2438
|
+
<react_native_1.Text style={styles_1.default.headerSubTitle}>
|
|
2439
|
+
{Object.keys(selectedEvent.params).length} param
|
|
2440
|
+
{Object.keys(selectedEvent.params).length !== 1
|
|
1997
2441
|
? 's'
|
|
1998
2442
|
: ''}
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2443
|
+
{' · '}
|
|
2444
|
+
{selectedEvent.source}
|
|
2445
|
+
</react_native_1.Text>
|
|
2446
|
+
</react_native_1.View>
|
|
2447
|
+
</react_native_1.View>) : null}
|
|
2448
|
+
</react_native_1.View>
|
|
2005
2449
|
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2450
|
+
<react_native_1.View style={styles_1.default.headerRight}>
|
|
2451
|
+
{selected == null && selectedEvent == null && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
|
|
2452
|
+
styles_1.default.closeButtonSquare,
|
|
2453
|
+
{
|
|
2454
|
+
marginRight: 8,
|
|
2455
|
+
backgroundColor: 'rgba(255,255,255,0.15)',
|
|
2456
|
+
},
|
|
2457
|
+
]}>
|
|
2458
|
+
<NetworkIcons_1.SettingsIcon color="#FFFFFF" size={16}/>
|
|
2459
|
+
</TouchableScale_1.default>)}
|
|
2010
2460
|
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2461
|
+
<TouchableScale_1.default onPress={closeModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
|
|
2462
|
+
<NetworkIcons_1.CloseWhite size={16}/>
|
|
2463
|
+
</TouchableScale_1.default>
|
|
2464
|
+
</react_native_1.View>
|
|
2014
2465
|
</react_native_1.View>
|
|
2015
|
-
</
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
{
|
|
2022
|
-
|
|
2023
|
-
{
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2466
|
+
</react_native_linear_gradient_1.default>
|
|
2467
|
+
|
|
2468
|
+
{/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
|
|
2469
|
+
{selected == null &&
|
|
2470
|
+
selectedEvent == null &&
|
|
2471
|
+
settingsPage === null ? (<react_native_1.View style={styles_1.default.tabBarContainer}>
|
|
2472
|
+
<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
|
|
2473
|
+
{[
|
|
2474
|
+
{
|
|
2475
|
+
key: 'insights',
|
|
2476
|
+
label: 'Insights',
|
|
2477
|
+
count: 0,
|
|
2478
|
+
icon: 'insights',
|
|
2479
|
+
},
|
|
2480
|
+
{
|
|
2481
|
+
key: 'apis',
|
|
2482
|
+
label: 'APIs',
|
|
2483
|
+
count: logs.length,
|
|
2484
|
+
icon: 'apis',
|
|
2485
|
+
},
|
|
2486
|
+
{
|
|
2487
|
+
key: 'logs',
|
|
2488
|
+
label: 'Logs',
|
|
2489
|
+
count: consoleLogs.length,
|
|
2490
|
+
icon: 'logs',
|
|
2491
|
+
},
|
|
2492
|
+
{
|
|
2493
|
+
key: 'analytics',
|
|
2494
|
+
label: 'Analytics',
|
|
2495
|
+
count: analyticsEvents.length,
|
|
2496
|
+
icon: 'analytics',
|
|
2497
|
+
},
|
|
2498
|
+
{
|
|
2499
|
+
key: 'webview',
|
|
2500
|
+
label: 'WebView',
|
|
2501
|
+
count: webViewNavHistory.length,
|
|
2502
|
+
icon: 'webview',
|
|
2503
|
+
},
|
|
2504
|
+
{
|
|
2505
|
+
key: 'redux',
|
|
2506
|
+
label: 'Redux',
|
|
2507
|
+
count: 0,
|
|
2508
|
+
icon: 'redux',
|
|
2509
|
+
},
|
|
2510
|
+
]
|
|
2511
|
+
.filter(tab => tabVisibility[tab.key])
|
|
2512
|
+
.map(tab => {
|
|
2029
2513
|
const isActive = activeTab === tab.key;
|
|
2030
|
-
const iconColor = isActive
|
|
2514
|
+
const iconColor = isActive
|
|
2515
|
+
? '#FFFFFF'
|
|
2516
|
+
: AppColors_1.AppColors.grayText;
|
|
2031
2517
|
const countLabel = tab.count > 9 ? '9+' : String(tab.count);
|
|
2032
|
-
const hasUnreadApis = activeTab !== 'apis' &&
|
|
2033
|
-
|
|
2518
|
+
const hasUnreadApis = activeTab !== 'apis' &&
|
|
2519
|
+
logs.length > lastReadApisCount;
|
|
2520
|
+
const hasUnreadLogs = activeTab !== 'logs' &&
|
|
2521
|
+
consoleLogs.length > lastReadLogsCount;
|
|
2034
2522
|
return (<TouchableScale_1.default key={tab.key} onPress={() => {
|
|
2035
2523
|
requestAnimationFrame(() => {
|
|
2036
2524
|
setActiveTab(tab.key);
|
|
@@ -2039,20 +2527,27 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2039
2527
|
styles_1.default.contentTabButton,
|
|
2040
2528
|
isActive && styles_1.default.contentTabButtonActive,
|
|
2041
2529
|
]}>
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2530
|
+
<react_native_1.View style={{
|
|
2531
|
+
flexDirection: 'row',
|
|
2532
|
+
alignItems: 'center',
|
|
2533
|
+
gap: 6,
|
|
2534
|
+
}}>
|
|
2535
|
+
{tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={iconColor} size={14}/>)}
|
|
2536
|
+
{tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={iconColor} size={14}/>)}
|
|
2537
|
+
{tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
|
|
2538
|
+
{tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>)}
|
|
2539
|
+
{tab.icon === 'webview' && (<NetworkIcons_1.GlobeIcon color={iconColor} size={14}/>)}
|
|
2540
|
+
{tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
|
|
2541
|
+
<react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
|
|
2050
2542
|
styles_1.default.contentTabButtonText,
|
|
2051
|
-
isActive &&
|
|
2543
|
+
isActive &&
|
|
2544
|
+
styles_1.default.contentTabButtonTextActive,
|
|
2052
2545
|
]}>
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2546
|
+
{tab.label}{' '}
|
|
2547
|
+
{tab.count > 0 ? `(${countLabel})` : ''}
|
|
2548
|
+
</react_native_1.Text>
|
|
2549
|
+
{((tab.key === 'apis' && hasUnreadApis) ||
|
|
2550
|
+
(tab.key === 'logs' && hasUnreadLogs)) && (<react_native_1.Animated.View style={{
|
|
2056
2551
|
width: 6,
|
|
2057
2552
|
height: 6,
|
|
2058
2553
|
borderRadius: 3,
|
|
@@ -2061,42 +2556,45 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2061
2556
|
alignSelf: 'center',
|
|
2062
2557
|
transform: [{ scale: unreadPulseAnim }],
|
|
2063
2558
|
}}/>)}
|
|
2064
|
-
|
|
2065
|
-
|
|
2559
|
+
</react_native_1.View>
|
|
2560
|
+
</TouchableScale_1.default>);
|
|
2066
2561
|
})}
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2562
|
+
</react_native_1.ScrollView>
|
|
2563
|
+
</react_native_1.View>) : null}
|
|
2071
2564
|
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
<react_native_1.View
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
{
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2565
|
+
{/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
|
|
2566
|
+
{isReady &&
|
|
2567
|
+
activeTab === 'analytics' &&
|
|
2568
|
+
selectedEvent == null && (<react_native_1.View>
|
|
2569
|
+
{/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
|
|
2570
|
+
<react_native_1.View style={[
|
|
2571
|
+
styles_1.default.toolbarRow,
|
|
2572
|
+
{ marginTop: 12, marginBottom: 4 },
|
|
2573
|
+
]}>
|
|
2574
|
+
<react_native_1.View style={styles_1.default.searchContainer}>
|
|
2575
|
+
<NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
|
|
2576
|
+
<react_native_1.TextInput placeholder="Search events..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={setAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
|
|
2577
|
+
{analyticsSearch.length > 0 && (<react_native_1.Pressable onPress={() => setAnalyticsSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
|
|
2578
|
+
<NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
2579
|
+
</react_native_1.Pressable>)}
|
|
2580
|
+
</react_native_1.View>
|
|
2581
|
+
{analyticsSubTab === 'ga_events' && (<react_native_1.View style={styles_1.default.toolbarRight}>
|
|
2582
|
+
<TouchableScale_1.default style={[
|
|
2085
2583
|
styles_1.default.toolbarBtn,
|
|
2086
2584
|
!hideScreenView && styles_1.default.toolbarBtnActive,
|
|
2087
2585
|
]} onPress={() => setHideScreenView(prev => !prev)} hitSlop={10}>
|
|
2088
|
-
|
|
2586
|
+
<NetworkIcons_1.ScreenIcon color={!hideScreenView
|
|
2089
2587
|
? AppColors_1.AppColors.purple
|
|
2090
2588
|
: AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2589
|
+
</TouchableScale_1.default>
|
|
2590
|
+
<TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
|
|
2591
|
+
<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2592
|
+
</TouchableScale_1.default>
|
|
2593
|
+
</react_native_1.View>)}
|
|
2594
|
+
</react_native_1.View>
|
|
2097
2595
|
|
|
2098
|
-
|
|
2099
|
-
|
|
2596
|
+
{/* ─── Secondary Tab Bar for Analytics ──────────────────────── */}
|
|
2597
|
+
<react_native_1.View style={{
|
|
2100
2598
|
marginHorizontal: 16,
|
|
2101
2599
|
marginTop: 4,
|
|
2102
2600
|
marginBottom: 8,
|
|
@@ -2107,7 +2605,7 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2107
2605
|
borderWidth: 1,
|
|
2108
2606
|
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
2109
2607
|
}}>
|
|
2110
|
-
|
|
2608
|
+
<react_native_1.Pressable style={[
|
|
2111
2609
|
{
|
|
2112
2610
|
flex: 1,
|
|
2113
2611
|
paddingVertical: 8,
|
|
@@ -2123,7 +2621,7 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2123
2621
|
elevation: 2,
|
|
2124
2622
|
},
|
|
2125
2623
|
]} onPress={() => setAnalyticsSubTab('ga_events')}>
|
|
2126
|
-
|
|
2624
|
+
<react_native_1.Text style={[
|
|
2127
2625
|
{
|
|
2128
2626
|
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
2129
2627
|
fontSize: 13,
|
|
@@ -2134,14 +2632,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2134
2632
|
color: AppColors_1.AppColors.purple,
|
|
2135
2633
|
},
|
|
2136
2634
|
]}>
|
|
2137
|
-
|
|
2138
|
-
|
|
2635
|
+
GA Events (
|
|
2636
|
+
{analyticsSearch
|
|
2139
2637
|
? filteredAnalyticsEvents.length
|
|
2140
2638
|
: analyticsEvents.length}
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2639
|
+
)
|
|
2640
|
+
</react_native_1.Text>
|
|
2641
|
+
</react_native_1.Pressable>
|
|
2642
|
+
<react_native_1.Pressable style={[
|
|
2145
2643
|
{
|
|
2146
2644
|
flex: 1,
|
|
2147
2645
|
paddingVertical: 8,
|
|
@@ -2157,7 +2655,7 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2157
2655
|
elevation: 2,
|
|
2158
2656
|
},
|
|
2159
2657
|
]} onPress={() => setAnalyticsSubTab('top_events')}>
|
|
2160
|
-
|
|
2658
|
+
<react_native_1.Text style={[
|
|
2161
2659
|
{
|
|
2162
2660
|
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
2163
2661
|
fontSize: 13,
|
|
@@ -2168,15 +2666,15 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2168
2666
|
color: AppColors_1.AppColors.purple,
|
|
2169
2667
|
},
|
|
2170
2668
|
]}>
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2669
|
+
Top Events ({topEventsArray.length})
|
|
2670
|
+
</react_native_1.Text>
|
|
2671
|
+
</react_native_1.Pressable>
|
|
2672
|
+
</react_native_1.View>
|
|
2673
|
+
</react_native_1.View>)}
|
|
2176
2674
|
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2675
|
+
{isReady ? (activeTab === 'insights' ? (<react_native_1.ScrollView style={styles_1.default.insightsContainer} contentContainerStyle={styles_1.default.insightsContent} showsVerticalScrollIndicator={false}>
|
|
2676
|
+
{renderInsightsDashboard()}
|
|
2677
|
+
</react_native_1.ScrollView>) : activeTab === 'analytics' ? (selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : analyticsSubTab === 'top_events' ? (<react_native_1.FlatList data={topEventsArray} keyExtractor={item => item[0]} contentContainerStyle={[
|
|
2180
2678
|
styles_1.default.listContent,
|
|
2181
2679
|
{ paddingHorizontal: 16, paddingTop: 16 },
|
|
2182
2680
|
]} renderItem={({ item: [name, count] }) => {
|
|
@@ -2186,45 +2684,45 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2186
2684
|
styles_1.default.analyticsTopEventsCard,
|
|
2187
2685
|
{ marginBottom: 12, paddingVertical: 16 },
|
|
2188
2686
|
]}>
|
|
2189
|
-
|
|
2190
|
-
|
|
2687
|
+
<react_native_1.View style={styles_1.default.analyticsTopEventRow}>
|
|
2688
|
+
<react_native_1.View style={{
|
|
2191
2689
|
flexDirection: 'row',
|
|
2192
2690
|
alignItems: 'center',
|
|
2193
2691
|
gap: 8,
|
|
2194
2692
|
flex: 1,
|
|
2195
2693
|
}}>
|
|
2196
|
-
|
|
2694
|
+
<react_native_1.View style={[
|
|
2197
2695
|
styles_1.default.analyticsIconCircle,
|
|
2198
2696
|
{ backgroundColor: `${color}1A` },
|
|
2199
2697
|
]}>
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2698
|
+
<react_native_svg_1.default width={14} height={14} viewBox="0 0 24 24" fill={color}>
|
|
2699
|
+
<react_native_svg_1.Circle cx="12" cy="12" r="10" opacity="0.3"/>
|
|
2700
|
+
<react_native_svg_1.Path d="M7 14l3-3 4 4 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
|
2701
|
+
</react_native_svg_1.default>
|
|
2702
|
+
</react_native_1.View>
|
|
2703
|
+
<react_native_1.Text style={styles_1.default.analyticsTopEventName} numberOfLines={2}>
|
|
2704
|
+
{name}
|
|
2705
|
+
</react_native_1.Text>
|
|
2706
|
+
</react_native_1.View>
|
|
2707
|
+
<react_native_1.View style={styles_1.default.analyticsTopEventBarWrap}>
|
|
2708
|
+
<react_native_linear_gradient_1.default colors={[color, `${color}99`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[
|
|
2211
2709
|
styles_1.default.analyticsTopEventBar,
|
|
2212
2710
|
{
|
|
2213
2711
|
width: `${Math.max(6, (count / maxCount) * 100)}%`,
|
|
2214
2712
|
},
|
|
2215
2713
|
]}/>
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2714
|
+
</react_native_1.View>
|
|
2715
|
+
<react_native_1.Text style={styles_1.default.analyticsTopEventCount}>
|
|
2716
|
+
{count}
|
|
2717
|
+
</react_native_1.Text>
|
|
2718
|
+
</react_native_1.View>
|
|
2719
|
+
</react_native_1.View>);
|
|
2222
2720
|
}} ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2721
|
+
<react_native_1.View style={styles_1.default.emptyIconWrap}>
|
|
2722
|
+
<NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
|
|
2723
|
+
</react_native_1.View>
|
|
2724
|
+
<react_native_1.Text style={styles_1.default.emptyTitle}>No Top Events</react_native_1.Text>
|
|
2725
|
+
</react_native_1.View>}/>) : (<react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={item => item.id.toString()} renderItem={({ item, index }) => {
|
|
2228
2726
|
const prev = filteredAnalyticsEvents[index + 1];
|
|
2229
2727
|
const next = filteredAnalyticsEvents[index - 1];
|
|
2230
2728
|
const msSincePrev = prev
|
|
@@ -2255,67 +2753,68 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2255
2753
|
return screenName;
|
|
2256
2754
|
})()}/>);
|
|
2257
2755
|
}} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={5} removeClippedSubviews ListEmptyComponent={<react_native_1.View style={styles_1.default.emptyContainer}>
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2756
|
+
<react_native_1.View style={styles_1.default.emptyIconWrap}>
|
|
2757
|
+
<NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
|
|
2758
|
+
</react_native_1.View>
|
|
2759
|
+
<react_native_1.Text style={styles_1.default.emptyTitle}>
|
|
2760
|
+
{analyticsSearch.length > 0
|
|
2263
2761
|
? 'No matching events'
|
|
2264
2762
|
: 'No analytics events yet'}
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2763
|
+
</react_native_1.Text>
|
|
2764
|
+
<react_native_1.Text style={styles_1.default.emptySub}>
|
|
2765
|
+
{analyticsSearch.length > 0
|
|
2268
2766
|
? 'Try adjusting your search.'
|
|
2269
2767
|
: 'Call setupAnalyticsLogger(analytics()) at app start.'}
|
|
2270
|
-
|
|
2271
|
-
|
|
2768
|
+
</react_native_1.Text>
|
|
2769
|
+
</react_native_1.View>} contentContainerStyle={[
|
|
2272
2770
|
styles_1.default.listContent,
|
|
2273
|
-
filteredAnalyticsEvents.length === 0 && {
|
|
2771
|
+
filteredAnalyticsEvents.length === 0 && {
|
|
2772
|
+
flexGrow: 1,
|
|
2773
|
+
},
|
|
2274
2774
|
]} keyboardShouldPersistTaps="handled"/>)) : activeTab === 'apis' && selected == null ? (<react_native_1.FlatList data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
<react_native_1.View style={styles_1.default.toolbarRight}>
|
|
2285
|
-
<TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
|
|
2286
|
-
<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2287
|
-
{selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
|
|
2288
|
-
<react_native_1.Text style={styles_1.default.trashBadgeText}>
|
|
2289
|
-
{selectedLogs.size}
|
|
2290
|
-
</react_native_1.Text>
|
|
2291
|
-
</react_native_1.View>)}
|
|
2292
|
-
</TouchableScale_1.default>
|
|
2775
|
+
<react_native_1.View style={styles_1.default.toolbarRow}>
|
|
2776
|
+
<react_native_1.View style={styles_1.default.searchContainer}>
|
|
2777
|
+
<NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
|
|
2778
|
+
<react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
|
|
2779
|
+
{search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
|
|
2780
|
+
<NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
2781
|
+
</react_native_1.Pressable>)}
|
|
2782
|
+
</react_native_1.View>
|
|
2293
2783
|
|
|
2784
|
+
<react_native_1.View style={styles_1.default.toolbarRight}>
|
|
2785
|
+
<TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
|
|
2786
|
+
<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2787
|
+
{selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
|
|
2788
|
+
<react_native_1.Text style={styles_1.default.trashBadgeText}>
|
|
2789
|
+
{selectedLogs.size}
|
|
2790
|
+
</react_native_1.Text>
|
|
2791
|
+
</react_native_1.View>)}
|
|
2792
|
+
</TouchableScale_1.default>
|
|
2294
2793
|
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2794
|
+
<TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
|
|
2795
|
+
<NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2796
|
+
</TouchableScale_1.default>
|
|
2298
2797
|
|
|
2299
|
-
|
|
2798
|
+
<TouchableScale_1.default style={[
|
|
2300
2799
|
styles_1.default.toolbarBtn,
|
|
2301
2800
|
filtersAccordion.isOpen &&
|
|
2302
2801
|
styles_1.default.toolbarBtnActive,
|
|
2303
2802
|
]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
|
|
2304
|
-
|
|
2803
|
+
<NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
|
|
2305
2804
|
? AppColors_1.AppColors.purple
|
|
2306
2805
|
: AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2307
|
-
|
|
2806
|
+
</TouchableScale_1.default>
|
|
2807
|
+
</react_native_1.View>
|
|
2308
2808
|
</react_native_1.View>
|
|
2309
|
-
</react_native_1.View>
|
|
2310
2809
|
|
|
2311
|
-
|
|
2810
|
+
<react_native_1.Animated.View style={[
|
|
2312
2811
|
filtersAccordion.bodyStyle,
|
|
2313
2812
|
{ overflow: 'hidden' },
|
|
2314
2813
|
]}>
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2814
|
+
<react_native_1.View style={styles_1.default.filtersContainer}>
|
|
2815
|
+
<react_native_1.Text style={styles_1.default.filtersHeading}>STATUS</react_native_1.Text>
|
|
2816
|
+
<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
|
|
2817
|
+
{constants_1.STATUS_FILTERS.map(filter => {
|
|
2319
2818
|
const isAll = filter === 'ALL';
|
|
2320
2819
|
const active = isAll
|
|
2321
2820
|
? statusFilters.size === 0
|
|
@@ -2334,35 +2833,38 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2334
2833
|
});
|
|
2335
2834
|
}
|
|
2336
2835
|
}} hitSlop={10}>
|
|
2337
|
-
|
|
2836
|
+
{active ? (<react_native_1.View style={[
|
|
2338
2837
|
styles_1.default.statusFilterChip,
|
|
2339
2838
|
styles_1.default.statusFilterActive,
|
|
2340
2839
|
{ overflow: 'hidden' },
|
|
2341
2840
|
]}>
|
|
2342
|
-
|
|
2841
|
+
<react_native_linear_gradient_1.default colors={[
|
|
2343
2842
|
AppColors_1.AppColors.purpleShade50,
|
|
2344
2843
|
'#EAE5FF',
|
|
2345
2844
|
]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
|
|
2346
|
-
|
|
2845
|
+
<react_native_1.Text style={[
|
|
2347
2846
|
styles_1.default.statusFilterText,
|
|
2348
2847
|
{ color: AppColors_1.AppColors.purple },
|
|
2349
2848
|
]}>
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2849
|
+
{filter}
|
|
2850
|
+
</react_native_1.Text>
|
|
2851
|
+
</react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
|
|
2852
|
+
<react_native_1.Text style={styles_1.default.statusFilterText}>
|
|
2853
|
+
{filter}
|
|
2854
|
+
</react_native_1.Text>
|
|
2855
|
+
</react_native_1.View>)}
|
|
2856
|
+
</TouchableScale_1.default>);
|
|
2358
2857
|
})}
|
|
2359
|
-
|
|
2858
|
+
</react_native_1.ScrollView>
|
|
2360
2859
|
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2860
|
+
<react_native_1.Text style={[
|
|
2861
|
+
styles_1.default.filtersHeading,
|
|
2862
|
+
{ marginTop: 16 },
|
|
2863
|
+
]}>
|
|
2864
|
+
METHOD
|
|
2865
|
+
</react_native_1.Text>
|
|
2866
|
+
<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
|
|
2867
|
+
{availableMethods.map(filter => {
|
|
2366
2868
|
const isAll = filter === 'ALL';
|
|
2367
2869
|
const active = isAll
|
|
2368
2870
|
? methodFilters.size === 0
|
|
@@ -2381,101 +2883,101 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2381
2883
|
});
|
|
2382
2884
|
}
|
|
2383
2885
|
}} hitSlop={10}>
|
|
2384
|
-
|
|
2886
|
+
{active ? (<react_native_1.View style={[
|
|
2385
2887
|
styles_1.default.statusFilterChip,
|
|
2386
2888
|
styles_1.default.statusFilterActive,
|
|
2387
2889
|
{ overflow: 'hidden' },
|
|
2388
2890
|
]}>
|
|
2389
|
-
|
|
2891
|
+
<react_native_linear_gradient_1.default colors={[
|
|
2390
2892
|
AppColors_1.AppColors.purpleShade50,
|
|
2391
2893
|
'#EAE5FF',
|
|
2392
2894
|
]} style={react_native_1.StyleSheet.absoluteFill} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}/>
|
|
2393
|
-
|
|
2895
|
+
<react_native_1.Text style={[
|
|
2394
2896
|
styles_1.default.statusFilterText,
|
|
2395
2897
|
{ color: AppColors_1.AppColors.purple },
|
|
2396
2898
|
]}>
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2899
|
+
{filter}
|
|
2900
|
+
</react_native_1.Text>
|
|
2901
|
+
</react_native_1.View>) : (<react_native_1.View style={styles_1.default.statusFilterChip}>
|
|
2902
|
+
<react_native_1.Text style={styles_1.default.statusFilterText}>
|
|
2903
|
+
{filter}
|
|
2904
|
+
</react_native_1.Text>
|
|
2905
|
+
</react_native_1.View>)}
|
|
2906
|
+
</TouchableScale_1.default>);
|
|
2405
2907
|
})}
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2908
|
+
</react_native_1.ScrollView>
|
|
2909
|
+
</react_native_1.View>
|
|
2910
|
+
</react_native_1.Animated.View>
|
|
2409
2911
|
|
|
2410
|
-
|
|
2912
|
+
{(search ||
|
|
2411
2913
|
statusFilters.size > 0 ||
|
|
2412
2914
|
methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
|
|
2413
|
-
|
|
2915
|
+
{filteredLogs.length === logs.length
|
|
2414
2916
|
? `${logs.length} requests`
|
|
2415
2917
|
: `${filteredLogs.length} of ${logs.length} filtered requests`}
|
|
2416
|
-
|
|
2417
|
-
|
|
2918
|
+
</react_native_1.Text>)}
|
|
2919
|
+
</react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} contentContainerStyle={[
|
|
2418
2920
|
styles_1.default.listContent,
|
|
2419
2921
|
filteredLogs.length === 0 && { flexGrow: 1 },
|
|
2420
2922
|
]} keyboardShouldPersistTaps="handled"/>) : activeTab === 'logs' ? (<react_native_1.View style={{ flex: 1 }}>
|
|
2421
|
-
|
|
2923
|
+
<react_native_1.View style={{
|
|
2422
2924
|
backgroundColor: '#FFFFFF',
|
|
2423
2925
|
borderBottomWidth: 1,
|
|
2424
2926
|
borderBottomColor: AppColors_1.AppColors.dividerColor,
|
|
2425
2927
|
paddingBottom: 6,
|
|
2426
2928
|
}}>
|
|
2427
|
-
|
|
2929
|
+
<react_native_1.View style={[
|
|
2428
2930
|
styles_1.default.toolbarRow,
|
|
2429
2931
|
{ marginTop: 12, marginBottom: 8 },
|
|
2430
2932
|
]}>
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2933
|
+
<react_native_1.View style={styles_1.default.searchContainer}>
|
|
2934
|
+
<NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
|
|
2935
|
+
<react_native_1.TextInput placeholder="Search logs..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
|
|
2936
|
+
{logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
|
|
2937
|
+
<NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
2938
|
+
</react_native_1.Pressable>)}
|
|
2939
|
+
</react_native_1.View>
|
|
2438
2940
|
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2941
|
+
<react_native_1.View style={styles_1.default.toolbarRight}>
|
|
2942
|
+
<TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={handleDelete} hitSlop={10}>
|
|
2943
|
+
<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextStrong} size={18}/>
|
|
2944
|
+
</TouchableScale_1.default>
|
|
2945
|
+
</react_native_1.View>
|
|
2946
|
+
</react_native_1.View>
|
|
2445
2947
|
|
|
2446
|
-
|
|
2948
|
+
<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
|
|
2447
2949
|
paddingHorizontal: 16,
|
|
2448
2950
|
paddingBottom: 4,
|
|
2449
2951
|
flexDirection: 'row',
|
|
2450
2952
|
alignItems: 'center',
|
|
2451
2953
|
gap: 8,
|
|
2452
2954
|
}}>
|
|
2453
|
-
|
|
2955
|
+
{(() => {
|
|
2454
2956
|
const active = logFilters.has('all');
|
|
2455
2957
|
return (<TouchableScale_1.default onPress={() => {
|
|
2456
2958
|
setLogFilters(new Set(['all']));
|
|
2457
2959
|
}}>
|
|
2458
|
-
|
|
2960
|
+
<react_native_1.View style={[
|
|
2459
2961
|
styles_1.default.statusFilterChip,
|
|
2460
2962
|
active && {
|
|
2461
2963
|
borderColor: AppColors_1.AppColors.purpleShade700,
|
|
2462
2964
|
backgroundColor: '#F4EBFF',
|
|
2463
2965
|
},
|
|
2464
2966
|
]}>
|
|
2465
|
-
|
|
2967
|
+
<react_native_1.Text numberOfLines={1} style={[
|
|
2466
2968
|
styles_1.default.statusFilterText,
|
|
2467
2969
|
active && {
|
|
2468
2970
|
color: AppColors_1.AppColors.purpleShade700,
|
|
2469
2971
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2470
2972
|
},
|
|
2471
2973
|
]}>
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2974
|
+
All ({logCounts.all})
|
|
2975
|
+
</react_native_1.Text>
|
|
2976
|
+
</react_native_1.View>
|
|
2977
|
+
</TouchableScale_1.default>);
|
|
2476
2978
|
})()}
|
|
2477
2979
|
|
|
2478
|
-
|
|
2980
|
+
{(() => {
|
|
2479
2981
|
const active = logFilters.has('user-log');
|
|
2480
2982
|
return (<TouchableScale_1.default onPress={() => {
|
|
2481
2983
|
setLogFilters(prev => {
|
|
@@ -2489,27 +2991,27 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2489
2991
|
return next;
|
|
2490
2992
|
});
|
|
2491
2993
|
}}>
|
|
2492
|
-
|
|
2994
|
+
<react_native_1.View style={[
|
|
2493
2995
|
styles_1.default.statusFilterChip,
|
|
2494
2996
|
active && {
|
|
2495
2997
|
borderColor: '#64748B',
|
|
2496
2998
|
backgroundColor: '#F1F5F9',
|
|
2497
2999
|
},
|
|
2498
3000
|
]}>
|
|
2499
|
-
|
|
3001
|
+
<react_native_1.Text numberOfLines={1} style={[
|
|
2500
3002
|
styles_1.default.statusFilterText,
|
|
2501
3003
|
active && {
|
|
2502
3004
|
color: '#334155',
|
|
2503
3005
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2504
3006
|
},
|
|
2505
3007
|
]}>
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
3008
|
+
User Log ({logCounts['user-log']})
|
|
3009
|
+
</react_native_1.Text>
|
|
3010
|
+
</react_native_1.View>
|
|
3011
|
+
</TouchableScale_1.default>);
|
|
2510
3012
|
})()}
|
|
2511
3013
|
|
|
2512
|
-
|
|
3014
|
+
{(() => {
|
|
2513
3015
|
const active = logFilters.has('info');
|
|
2514
3016
|
return (<TouchableScale_1.default onPress={() => {
|
|
2515
3017
|
setLogFilters(prev => {
|
|
@@ -2523,27 +3025,27 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2523
3025
|
return next;
|
|
2524
3026
|
});
|
|
2525
3027
|
}}>
|
|
2526
|
-
|
|
3028
|
+
<react_native_1.View style={[
|
|
2527
3029
|
styles_1.default.statusFilterChip,
|
|
2528
3030
|
active && {
|
|
2529
3031
|
borderColor: AppColors_1.AppColors.purple,
|
|
2530
3032
|
backgroundColor: AppColors_1.AppColors.purpleShade50,
|
|
2531
3033
|
},
|
|
2532
3034
|
]}>
|
|
2533
|
-
|
|
3035
|
+
<react_native_1.Text numberOfLines={1} style={[
|
|
2534
3036
|
styles_1.default.statusFilterText,
|
|
2535
3037
|
active && {
|
|
2536
3038
|
color: AppColors_1.AppColors.purple,
|
|
2537
3039
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2538
3040
|
},
|
|
2539
3041
|
]}>
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
3042
|
+
Info ({logCounts.info})
|
|
3043
|
+
</react_native_1.Text>
|
|
3044
|
+
</react_native_1.View>
|
|
3045
|
+
</TouchableScale_1.default>);
|
|
2544
3046
|
})()}
|
|
2545
3047
|
|
|
2546
|
-
|
|
3048
|
+
{(() => {
|
|
2547
3049
|
const active = logFilters.has('warn');
|
|
2548
3050
|
return (<TouchableScale_1.default onPress={() => {
|
|
2549
3051
|
setLogFilters(prev => {
|
|
@@ -2557,14 +3059,14 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2557
3059
|
return next;
|
|
2558
3060
|
});
|
|
2559
3061
|
}}>
|
|
2560
|
-
|
|
3062
|
+
<react_native_1.View style={[
|
|
2561
3063
|
styles_1.default.statusFilterChip,
|
|
2562
3064
|
active && {
|
|
2563
3065
|
borderColor: AppColors_1.AppColors.lightOrange,
|
|
2564
3066
|
backgroundColor: '#FFFDF6',
|
|
2565
3067
|
},
|
|
2566
3068
|
]}>
|
|
2567
|
-
|
|
3069
|
+
<react_native_1.Text numberOfLines={1} style={[
|
|
2568
3070
|
styles_1.default.statusFilterText,
|
|
2569
3071
|
active && {
|
|
2570
3072
|
color: AppColors_1.AppColors.darkOrange ||
|
|
@@ -2572,13 +3074,13 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2572
3074
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2573
3075
|
},
|
|
2574
3076
|
]}>
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
3077
|
+
Warning ({logCounts.warn})
|
|
3078
|
+
</react_native_1.Text>
|
|
3079
|
+
</react_native_1.View>
|
|
3080
|
+
</TouchableScale_1.default>);
|
|
2579
3081
|
})()}
|
|
2580
3082
|
|
|
2581
|
-
|
|
3083
|
+
{(() => {
|
|
2582
3084
|
const active = logFilters.has('error');
|
|
2583
3085
|
return (<TouchableScale_1.default onPress={() => {
|
|
2584
3086
|
setLogFilters(prev => {
|
|
@@ -2592,27 +3094,27 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2592
3094
|
return next;
|
|
2593
3095
|
});
|
|
2594
3096
|
}}>
|
|
2595
|
-
|
|
3097
|
+
<react_native_1.View style={[
|
|
2596
3098
|
styles_1.default.statusFilterChip,
|
|
2597
3099
|
active && {
|
|
2598
3100
|
borderColor: AppColors_1.AppColors.errorColor,
|
|
2599
3101
|
backgroundColor: '#FFF5F6',
|
|
2600
3102
|
},
|
|
2601
3103
|
]}>
|
|
2602
|
-
|
|
3104
|
+
<react_native_1.Text numberOfLines={1} style={[
|
|
2603
3105
|
styles_1.default.statusFilterText,
|
|
2604
3106
|
active && {
|
|
2605
3107
|
color: AppColors_1.AppColors.errorColor,
|
|
2606
3108
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2607
3109
|
},
|
|
2608
3110
|
]}>
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
3111
|
+
Error ({logCounts.error})
|
|
3112
|
+
</react_native_1.Text>
|
|
3113
|
+
</react_native_1.View>
|
|
3114
|
+
</TouchableScale_1.default>);
|
|
2613
3115
|
})()}
|
|
2614
3116
|
|
|
2615
|
-
|
|
3117
|
+
{(() => {
|
|
2616
3118
|
const active = logFilters.has('analytics');
|
|
2617
3119
|
return (<TouchableScale_1.default onPress={() => {
|
|
2618
3120
|
setLogFilters(prev => {
|
|
@@ -2626,29 +3128,29 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2626
3128
|
return next;
|
|
2627
3129
|
});
|
|
2628
3130
|
}}>
|
|
2629
|
-
|
|
3131
|
+
<react_native_1.View style={[
|
|
2630
3132
|
styles_1.default.statusFilterChip,
|
|
2631
3133
|
active && {
|
|
2632
3134
|
borderColor: AppColors_1.AppColors.skyBlue,
|
|
2633
3135
|
backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
|
|
2634
3136
|
},
|
|
2635
3137
|
]}>
|
|
2636
|
-
|
|
3138
|
+
<react_native_1.Text numberOfLines={1} style={[
|
|
2637
3139
|
styles_1.default.statusFilterText,
|
|
2638
3140
|
active && {
|
|
2639
3141
|
color: AppColors_1.AppColors.skyBlue,
|
|
2640
3142
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2641
3143
|
},
|
|
2642
3144
|
]}>
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
3145
|
+
Analytics ({logCounts.analytics})
|
|
3146
|
+
</react_native_1.Text>
|
|
3147
|
+
</react_native_1.View>
|
|
3148
|
+
</TouchableScale_1.default>);
|
|
2647
3149
|
})()}
|
|
2648
|
-
|
|
2649
|
-
|
|
3150
|
+
</react_native_1.ScrollView>
|
|
3151
|
+
</react_native_1.View>
|
|
2650
3152
|
|
|
2651
|
-
|
|
3153
|
+
<react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={item => item.id.toString()} ListHeaderComponent={(() => {
|
|
2652
3154
|
const total = visibleConsoleLogs.length;
|
|
2653
3155
|
const filtered = filteredConsoleLogs.length;
|
|
2654
3156
|
const isAllSelected = logFilters.has('all') ||
|
|
@@ -2658,8 +3160,8 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2658
3160
|
styles_1.default.resultCount,
|
|
2659
3161
|
{ marginBottom: 4, marginTop: 12 },
|
|
2660
3162
|
]}>
|
|
2661
|
-
|
|
2662
|
-
|
|
3163
|
+
Showing ({filtered}/{total}) logs showing
|
|
3164
|
+
</react_native_1.Text>);
|
|
2663
3165
|
}
|
|
2664
3166
|
else {
|
|
2665
3167
|
const activeFilterNames = Array.from(logFilters)
|
|
@@ -2669,31 +3171,35 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2669
3171
|
return 'User Log';
|
|
2670
3172
|
if (f === 'analytics')
|
|
2671
3173
|
return 'Analytics';
|
|
2672
|
-
return f.charAt(0).toUpperCase() +
|
|
3174
|
+
return (f.charAt(0).toUpperCase() +
|
|
3175
|
+
f.slice(1));
|
|
2673
3176
|
});
|
|
2674
3177
|
return (<react_native_1.Text style={[
|
|
2675
3178
|
styles_1.default.resultCount,
|
|
2676
3179
|
{ marginBottom: 4, marginTop: 12 },
|
|
2677
3180
|
]}>
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
3181
|
+
Filtering with {activeFilterNames.join(', ')} (
|
|
3182
|
+
{filtered}/{total}) logs is showing
|
|
3183
|
+
</react_native_1.Text>);
|
|
2681
3184
|
}
|
|
2682
3185
|
})()} renderItem={({ item }) => (<ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>)} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} contentContainerStyle={[
|
|
2683
3186
|
styles_1.default.listContent,
|
|
2684
3187
|
filteredConsoleLogs.length === 0 && { flexGrow: 1 },
|
|
2685
3188
|
]} keyboardShouldPersistTaps="handled"/>
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
3189
|
+
</react_native_1.View>) : activeTab === 'webview' ? (webViewNavHistory.length === 0 ? (<react_native_1.View style={styles_1.default.emptyContainer}>
|
|
3190
|
+
<react_native_1.View style={styles_1.default.emptyIconWrap}>
|
|
3191
|
+
<NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
|
|
3192
|
+
</react_native_1.View>
|
|
3193
|
+
<react_native_1.Text style={styles_1.default.emptyTitle}>
|
|
3194
|
+
No WebView Activity
|
|
3195
|
+
</react_native_1.Text>
|
|
3196
|
+
<react_native_1.Text style={styles_1.default.emptySub}>
|
|
3197
|
+
Load a webpage within a connected WebView component to
|
|
3198
|
+
inspect pages, page source, and console logs.
|
|
3199
|
+
</react_native_1.Text>
|
|
3200
|
+
</react_native_1.View>) : (<react_native_1.View style={{ flex: 1 }}>
|
|
3201
|
+
{/* ─── Current Page Address Bar (Now on top) ─── */}
|
|
3202
|
+
{(() => {
|
|
2697
3203
|
const currentUrl = webViewNavHistory[0]?.url;
|
|
2698
3204
|
if (!currentUrl)
|
|
2699
3205
|
return null;
|
|
@@ -2705,7 +3211,7 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2705
3211
|
borderBottomWidth: 1,
|
|
2706
3212
|
borderBottomColor: AppColors_1.AppColors.dividerColor,
|
|
2707
3213
|
}}>
|
|
2708
|
-
|
|
3214
|
+
<react_native_1.View style={{
|
|
2709
3215
|
flexDirection: 'row',
|
|
2710
3216
|
alignItems: 'center',
|
|
2711
3217
|
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
@@ -2716,27 +3222,42 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2716
3222
|
paddingVertical: 5,
|
|
2717
3223
|
gap: 8,
|
|
2718
3224
|
}}>
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
|
|
2724
|
-
|
|
3225
|
+
{/* Left: Lock and HTTPS label */}
|
|
3226
|
+
<react_native_1.View style={{
|
|
3227
|
+
flexDirection: 'row',
|
|
3228
|
+
alignItems: 'center',
|
|
3229
|
+
gap: 4,
|
|
3230
|
+
}}>
|
|
3231
|
+
<react_native_1.Text style={{ fontSize: 11 }}>🔒</react_native_1.Text>
|
|
3232
|
+
<react_native_1.Text style={{
|
|
3233
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3234
|
+
fontSize: 9.5,
|
|
3235
|
+
color: AppColors_1.AppColors.greenColor,
|
|
3236
|
+
letterSpacing: 0.5,
|
|
3237
|
+
}}>
|
|
3238
|
+
HTTPS
|
|
3239
|
+
</react_native_1.Text>
|
|
3240
|
+
</react_native_1.View>
|
|
3241
|
+
<react_native_1.View style={{
|
|
3242
|
+
width: 1.5,
|
|
3243
|
+
height: 12,
|
|
3244
|
+
backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
3245
|
+
}}/>
|
|
2725
3246
|
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
3247
|
+
{/* Middle: URL text (Address style) */}
|
|
3248
|
+
<react_native_1.View style={{ flex: 1 }}>
|
|
3249
|
+
<HighlightText_1.default text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
|
|
2729
3250
|
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
2730
3251
|
fontSize: 11.5,
|
|
2731
3252
|
color: AppColors_1.AppColors.primaryBlack,
|
|
2732
3253
|
}} highlightStyle={styles_1.default.highlight} detectLinks={false}/>
|
|
2733
|
-
|
|
3254
|
+
</react_native_1.View>
|
|
2734
3255
|
|
|
2735
|
-
|
|
2736
|
-
|
|
3256
|
+
{/* Right: Copy Button */}
|
|
3257
|
+
<CopyButton_1.default value={currentUrl} label="URL"/>
|
|
2737
3258
|
|
|
2738
|
-
|
|
2739
|
-
|
|
3259
|
+
{/* Right: Globe Icon button to open browser */}
|
|
3260
|
+
<TouchableScale_1.default onPress={() => react_native_1.Linking.openURL(currentUrl)} hitSlop={8} style={{
|
|
2740
3261
|
width: 26,
|
|
2741
3262
|
height: 26,
|
|
2742
3263
|
borderRadius: 13,
|
|
@@ -2746,26 +3267,26 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2746
3267
|
alignItems: 'center',
|
|
2747
3268
|
justifyContent: 'center',
|
|
2748
3269
|
}}>
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
3270
|
+
<NetworkIcons_1.GlobeIcon size={11} color={AppColors_1.AppColors.purple}/>
|
|
3271
|
+
</TouchableScale_1.default>
|
|
3272
|
+
</react_native_1.View>
|
|
3273
|
+
</react_native_1.View>);
|
|
2753
3274
|
})()}
|
|
2754
3275
|
|
|
2755
|
-
|
|
2756
|
-
|
|
3276
|
+
{/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
|
|
3277
|
+
<react_native_1.View style={{
|
|
2757
3278
|
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
2758
3279
|
borderBottomWidth: 1,
|
|
2759
3280
|
borderBottomColor: AppColors_1.AppColors.dividerColor,
|
|
2760
3281
|
paddingVertical: 6,
|
|
2761
3282
|
}}>
|
|
2762
|
-
|
|
3283
|
+
<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
|
|
2763
3284
|
paddingHorizontal: 12,
|
|
2764
3285
|
flexDirection: 'row',
|
|
2765
3286
|
gap: 8,
|
|
2766
3287
|
}}>
|
|
2767
|
-
|
|
2768
|
-
|
|
3288
|
+
{/* Sub-tab 1: Preview */}
|
|
3289
|
+
<react_native_1.Pressable style={[
|
|
2769
3290
|
{
|
|
2770
3291
|
paddingVertical: 6,
|
|
2771
3292
|
paddingHorizontal: 14,
|
|
@@ -2782,18 +3303,24 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2782
3303
|
borderColor: AppColors_1.AppColors.purple,
|
|
2783
3304
|
},
|
|
2784
3305
|
]} onPress={() => setWebViewSubTab('preview')}>
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
3306
|
+
<NetworkIcons_1.EyeIcon color={webViewSubTab === 'preview'
|
|
3307
|
+
? '#FFFFFF'
|
|
3308
|
+
: AppColors_1.AppColors.grayTextWeak} size={13}/>
|
|
3309
|
+
<react_native_1.Text style={{
|
|
3310
|
+
fontFamily: webViewSubTab === 'preview'
|
|
3311
|
+
? AppFonts_1.AppFonts.interBold
|
|
3312
|
+
: AppFonts_1.AppFonts.interMedium,
|
|
2788
3313
|
fontSize: 12,
|
|
2789
|
-
color: webViewSubTab === 'preview'
|
|
3314
|
+
color: webViewSubTab === 'preview'
|
|
3315
|
+
? '#FFFFFF'
|
|
3316
|
+
: AppColors_1.AppColors.grayTextStrong,
|
|
2790
3317
|
}}>
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
3318
|
+
Preview
|
|
3319
|
+
</react_native_1.Text>
|
|
3320
|
+
</react_native_1.Pressable>
|
|
2794
3321
|
|
|
2795
|
-
|
|
2796
|
-
|
|
3322
|
+
{/* Sub-tab 2: Page Source */}
|
|
3323
|
+
<react_native_1.Pressable style={[
|
|
2797
3324
|
{
|
|
2798
3325
|
paddingVertical: 6,
|
|
2799
3326
|
paddingHorizontal: 14,
|
|
@@ -2810,18 +3337,24 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2810
3337
|
borderColor: AppColors_1.AppColors.purple,
|
|
2811
3338
|
},
|
|
2812
3339
|
]} onPress={() => setWebViewSubTab('html')}>
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
3340
|
+
<NetworkIcons_1.HtmlIcon color={webViewSubTab === 'html'
|
|
3341
|
+
? '#FFFFFF'
|
|
3342
|
+
: AppColors_1.AppColors.grayTextWeak} size={13}/>
|
|
3343
|
+
<react_native_1.Text style={{
|
|
3344
|
+
fontFamily: webViewSubTab === 'html'
|
|
3345
|
+
? AppFonts_1.AppFonts.interBold
|
|
3346
|
+
: AppFonts_1.AppFonts.interMedium,
|
|
2816
3347
|
fontSize: 12,
|
|
2817
|
-
color: webViewSubTab === 'html'
|
|
3348
|
+
color: webViewSubTab === 'html'
|
|
3349
|
+
? '#FFFFFF'
|
|
3350
|
+
: AppColors_1.AppColors.grayTextStrong,
|
|
2818
3351
|
}}>
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
3352
|
+
Page Source
|
|
3353
|
+
</react_native_1.Text>
|
|
3354
|
+
</react_native_1.Pressable>
|
|
2822
3355
|
|
|
2823
|
-
|
|
2824
|
-
|
|
3356
|
+
{/* Sub-tab 3: History */}
|
|
3357
|
+
<react_native_1.Pressable style={[
|
|
2825
3358
|
{
|
|
2826
3359
|
paddingVertical: 6,
|
|
2827
3360
|
paddingHorizontal: 14,
|
|
@@ -2838,18 +3371,24 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2838
3371
|
borderColor: AppColors_1.AppColors.purple,
|
|
2839
3372
|
},
|
|
2840
3373
|
]} onPress={() => setWebViewSubTab('navigation')}>
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
3374
|
+
<NetworkIcons_1.ClockIcon color={webViewSubTab === 'navigation'
|
|
3375
|
+
? '#FFFFFF'
|
|
3376
|
+
: AppColors_1.AppColors.grayTextWeak} size={13}/>
|
|
3377
|
+
<react_native_1.Text style={{
|
|
3378
|
+
fontFamily: webViewSubTab === 'navigation'
|
|
3379
|
+
? AppFonts_1.AppFonts.interBold
|
|
3380
|
+
: AppFonts_1.AppFonts.interMedium,
|
|
2844
3381
|
fontSize: 12,
|
|
2845
|
-
color: webViewSubTab === 'navigation'
|
|
3382
|
+
color: webViewSubTab === 'navigation'
|
|
3383
|
+
? '#FFFFFF'
|
|
3384
|
+
: AppColors_1.AppColors.grayTextStrong,
|
|
2846
3385
|
}}>
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
3386
|
+
History ({webViewNavHistory.length})
|
|
3387
|
+
</react_native_1.Text>
|
|
3388
|
+
</react_native_1.Pressable>
|
|
2850
3389
|
|
|
2851
|
-
|
|
2852
|
-
|
|
3390
|
+
{/* Sub-tab 4: Console */}
|
|
3391
|
+
<react_native_1.Pressable style={[
|
|
2853
3392
|
{
|
|
2854
3393
|
paddingVertical: 6,
|
|
2855
3394
|
paddingHorizontal: 14,
|
|
@@ -2866,22 +3405,28 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2866
3405
|
borderColor: AppColors_1.AppColors.purple,
|
|
2867
3406
|
},
|
|
2868
3407
|
]} onPress={() => setWebViewSubTab('console')}>
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
3408
|
+
<NetworkIcons_1.TerminalIcon color={webViewSubTab === 'console'
|
|
3409
|
+
? '#FFFFFF'
|
|
3410
|
+
: AppColors_1.AppColors.grayTextWeak} size={13}/>
|
|
3411
|
+
<react_native_1.Text style={{
|
|
3412
|
+
fontFamily: webViewSubTab === 'console'
|
|
3413
|
+
? AppFonts_1.AppFonts.interBold
|
|
3414
|
+
: AppFonts_1.AppFonts.interMedium,
|
|
2872
3415
|
fontSize: 12,
|
|
2873
|
-
color: webViewSubTab === 'console'
|
|
3416
|
+
color: webViewSubTab === 'console'
|
|
3417
|
+
? '#FFFFFF'
|
|
3418
|
+
: AppColors_1.AppColors.grayTextStrong,
|
|
2874
3419
|
}}>
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
3420
|
+
Console ({webViewLogs.length})
|
|
3421
|
+
</react_native_1.Text>
|
|
3422
|
+
</react_native_1.Pressable>
|
|
3423
|
+
</react_native_1.ScrollView>
|
|
3424
|
+
</react_native_1.View>
|
|
2880
3425
|
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
3426
|
+
{webViewSubTab === 'html' ? (<react_native_1.View style={{ flex: 1 }}>
|
|
3427
|
+
{webViewHtml || webViewCss || webViewJs ? (<react_native_1.View style={{ flex: 1 }}>
|
|
3428
|
+
{/* Clear Inspect Banner */}
|
|
3429
|
+
{inspectedElement && (<react_native_1.View style={{
|
|
2885
3430
|
flexDirection: 'row',
|
|
2886
3431
|
alignItems: 'center',
|
|
2887
3432
|
justifyContent: 'space-between',
|
|
@@ -2891,36 +3436,44 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2891
3436
|
borderBottomWidth: 1,
|
|
2892
3437
|
borderBottomColor: AppColors_1.AppColors.dividerColor,
|
|
2893
3438
|
}}>
|
|
2894
|
-
|
|
3439
|
+
<react_native_1.Text style={{
|
|
2895
3440
|
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
2896
3441
|
fontSize: 11.5,
|
|
2897
3442
|
color: AppColors_1.AppColors.purple,
|
|
2898
3443
|
flex: 1,
|
|
2899
3444
|
}}>
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
3445
|
+
Inspecting element:{' '}
|
|
3446
|
+
<react_native_1.Text style={{
|
|
3447
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3448
|
+
}}>
|
|
3449
|
+
<{inspectedElement.tagName}
|
|
3450
|
+
{inspectedElement.id
|
|
3451
|
+
? ` id="${inspectedElement.id}"`
|
|
3452
|
+
: ''}
|
|
3453
|
+
{inspectedElement.className
|
|
3454
|
+
? ` class="${inspectedElement.className
|
|
3455
|
+
.trim()
|
|
3456
|
+
.split(/\s+/)[0]}"`
|
|
3457
|
+
: ''}
|
|
3458
|
+
>
|
|
3459
|
+
</react_native_1.Text>
|
|
3460
|
+
</react_native_1.Text>
|
|
3461
|
+
<react_native_1.Pressable onPress={() => setInspectedElement(null)} style={{
|
|
2909
3462
|
paddingHorizontal: 8,
|
|
2910
3463
|
paddingVertical: 4,
|
|
2911
3464
|
}}>
|
|
2912
|
-
|
|
3465
|
+
<react_native_1.Text style={{
|
|
2913
3466
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
2914
3467
|
fontSize: 11,
|
|
2915
3468
|
color: AppColors_1.AppColors.purple,
|
|
2916
3469
|
}}>
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
3470
|
+
Clear Inspect
|
|
3471
|
+
</react_native_1.Text>
|
|
3472
|
+
</react_native_1.Pressable>
|
|
3473
|
+
</react_native_1.View>)}
|
|
2921
3474
|
|
|
2922
|
-
|
|
2923
|
-
|
|
3475
|
+
{/* Inner sub-tabs inside HTML source view */}
|
|
3476
|
+
<react_native_1.View style={{
|
|
2924
3477
|
flexDirection: 'row',
|
|
2925
3478
|
borderBottomWidth: 1,
|
|
2926
3479
|
borderBottomColor: AppColors_1.AppColors.dividerColor,
|
|
@@ -2928,7 +3481,7 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2928
3481
|
paddingHorizontal: 12,
|
|
2929
3482
|
gap: 12,
|
|
2930
3483
|
}}>
|
|
2931
|
-
|
|
3484
|
+
{['html', 'css', 'javascript'].map(tab => {
|
|
2932
3485
|
const active = htmlSubTab === tab;
|
|
2933
3486
|
const label = tab === 'html'
|
|
2934
3487
|
? 'HTML'
|
|
@@ -2951,10 +3504,16 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2951
3504
|
alignItems: 'center',
|
|
2952
3505
|
gap: 4,
|
|
2953
3506
|
}}>
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
3507
|
+
{tab === 'html' && (<NetworkIcons_1.HtmlIcon color={active
|
|
3508
|
+
? activeColor
|
|
3509
|
+
: AppColors_1.AppColors.grayTextWeak} size={14}/>)}
|
|
3510
|
+
{tab === 'css' && (<NetworkIcons_1.CssIcon color={active
|
|
3511
|
+
? activeColor
|
|
3512
|
+
: AppColors_1.AppColors.grayTextWeak} size={14}/>)}
|
|
3513
|
+
{tab === 'javascript' && (<NetworkIcons_1.JsIcon color={active
|
|
3514
|
+
? activeColor
|
|
3515
|
+
: AppColors_1.AppColors.grayTextWeak} size={14}/>)}
|
|
3516
|
+
<react_native_1.Text style={{
|
|
2958
3517
|
fontFamily: active
|
|
2959
3518
|
? AppFonts_1.AppFonts.interBold
|
|
2960
3519
|
: AppFonts_1.AppFonts.interMedium,
|
|
@@ -2963,58 +3522,67 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
2963
3522
|
? activeColor
|
|
2964
3523
|
: AppColors_1.AppColors.grayTextWeak,
|
|
2965
3524
|
}}>
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
3525
|
+
{label}
|
|
3526
|
+
</react_native_1.Text>
|
|
3527
|
+
</react_native_1.Pressable>);
|
|
2969
3528
|
})}
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
3529
|
+
</react_native_1.View>
|
|
3530
|
+
<react_native_1.View style={{ flex: 1, padding: 12 }}>
|
|
3531
|
+
{!isHtmlTabReady ? (<react_native_1.View style={{
|
|
3532
|
+
flex: 1,
|
|
3533
|
+
justifyContent: 'center',
|
|
3534
|
+
alignItems: 'center',
|
|
3535
|
+
minHeight: 200,
|
|
3536
|
+
}}>
|
|
3537
|
+
<react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
|
|
3538
|
+
</react_native_1.View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet_1.default code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
|
|
2975
3539
|
fontFamily: 'monospace',
|
|
2976
3540
|
fontSize: 11,
|
|
2977
3541
|
color: '#94A3B8',
|
|
2978
3542
|
padding: 12,
|
|
2979
3543
|
}}>
|
|
2980
|
-
|
|
2981
|
-
|
|
3544
|
+
No HTML content captured.
|
|
3545
|
+
</react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet_1.default code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
|
|
2982
3546
|
fontFamily: 'monospace',
|
|
2983
3547
|
fontSize: 11,
|
|
2984
3548
|
color: '#94A3B8',
|
|
2985
3549
|
padding: 12,
|
|
2986
3550
|
}}>
|
|
2987
|
-
|
|
2988
|
-
|
|
3551
|
+
No CSS styles detected on this page.
|
|
3552
|
+
</react_native_1.Text>)) : webViewJs ? (<CodeSnippet_1.default code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
|
|
2989
3553
|
fontFamily: 'monospace',
|
|
2990
3554
|
fontSize: 11,
|
|
2991
3555
|
color: '#94A3B8',
|
|
2992
3556
|
padding: 12,
|
|
2993
3557
|
}}>
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3558
|
+
No scripts detected on this page.
|
|
3559
|
+
</react_native_1.Text>)}
|
|
3560
|
+
</react_native_1.View>
|
|
3561
|
+
</react_native_1.View>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
|
|
3562
|
+
<react_native_1.View style={styles_1.default.emptyIconWrap}>
|
|
3563
|
+
<NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
|
|
3564
|
+
</react_native_1.View>
|
|
3565
|
+
<react_native_1.Text style={styles_1.default.emptyTitle}>
|
|
3566
|
+
No Page Source Captured
|
|
3567
|
+
</react_native_1.Text>
|
|
3568
|
+
<react_native_1.Text style={styles_1.default.emptySub}>
|
|
3569
|
+
Load a page in the WebView to inspect its
|
|
3570
|
+
HTML, CSS, or Javascript source.
|
|
3571
|
+
</react_native_1.Text>
|
|
3572
|
+
</react_native_1.View>)}
|
|
3573
|
+
</react_native_1.View>) : webViewSubTab === 'navigation' ? (<react_native_1.FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{
|
|
3574
|
+
flex: 1,
|
|
3575
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
3576
|
+
}} ListHeaderComponent={<react_native_1.View style={{
|
|
3010
3577
|
paddingHorizontal: 16,
|
|
3011
3578
|
paddingTop: 12,
|
|
3012
3579
|
paddingBottom: 8,
|
|
3013
3580
|
}}>
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3581
|
+
<react_native_1.Text style={styles_1.default.resultCount}>
|
|
3582
|
+
Navigation History ({webViewNavHistory.length}
|
|
3583
|
+
)
|
|
3584
|
+
</react_native_1.Text>
|
|
3585
|
+
</react_native_1.View>} renderItem={({ item, index, }) => {
|
|
3018
3586
|
const isLatest = index === 0;
|
|
3019
3587
|
const formatNavTime = (ts) => {
|
|
3020
3588
|
const d = new Date(ts);
|
|
@@ -3026,7 +3594,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3026
3594
|
borderRadius: 12,
|
|
3027
3595
|
borderWidth: 1,
|
|
3028
3596
|
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
3029
|
-
backgroundColor: isLatest
|
|
3597
|
+
backgroundColor: isLatest
|
|
3598
|
+
? AppColors_1.AppColors.purpleShade50
|
|
3599
|
+
: AppColors_1.AppColors.primaryLight,
|
|
3030
3600
|
padding: 14,
|
|
3031
3601
|
flexDirection: 'row',
|
|
3032
3602
|
alignItems: 'center',
|
|
@@ -3038,23 +3608,23 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3038
3608
|
shadowRadius: 4,
|
|
3039
3609
|
elevation: 2,
|
|
3040
3610
|
}}>
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3611
|
+
<react_native_1.View style={{ flex: 1, gap: 8 }}>
|
|
3612
|
+
{/* Top row: Title and Badge */}
|
|
3613
|
+
<react_native_1.View style={{
|
|
3044
3614
|
flexDirection: 'row',
|
|
3045
3615
|
alignItems: 'center',
|
|
3046
3616
|
gap: 8,
|
|
3047
3617
|
flexWrap: 'wrap',
|
|
3048
3618
|
}}>
|
|
3049
|
-
|
|
3619
|
+
<react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
|
|
3050
3620
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3051
3621
|
fontSize: 14,
|
|
3052
3622
|
color: AppColors_1.AppColors.primaryBlack,
|
|
3053
3623
|
flexShrink: 1,
|
|
3054
3624
|
}}>
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3625
|
+
{item.title || 'Untitled Page'}
|
|
3626
|
+
</react_native_1.Text>
|
|
3627
|
+
{isLatest && (<react_native_1.View style={{
|
|
3058
3628
|
flexDirection: 'row',
|
|
3059
3629
|
alignItems: 'center',
|
|
3060
3630
|
gap: 4,
|
|
@@ -3063,62 +3633,97 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3063
3633
|
paddingVertical: 3,
|
|
3064
3634
|
borderRadius: 12,
|
|
3065
3635
|
}}>
|
|
3066
|
-
|
|
3636
|
+
<react_native_1.View style={{
|
|
3067
3637
|
width: 6,
|
|
3068
3638
|
height: 6,
|
|
3069
3639
|
borderRadius: 3,
|
|
3070
3640
|
backgroundColor: AppColors_1.AppColors.greenBaggageText,
|
|
3071
3641
|
}}/>
|
|
3072
|
-
|
|
3642
|
+
<react_native_1.Text style={{
|
|
3073
3643
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3074
3644
|
fontSize: 9.5,
|
|
3075
3645
|
color: AppColors_1.AppColors.greenBaggageText,
|
|
3076
3646
|
}}>
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3647
|
+
Active
|
|
3648
|
+
</react_native_1.Text>
|
|
3649
|
+
</react_native_1.View>)}
|
|
3650
|
+
</react_native_1.View>
|
|
3081
3651
|
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3652
|
+
{/* Middle row: URL with Globe Icon */}
|
|
3653
|
+
<react_native_1.View style={{
|
|
3654
|
+
flexDirection: 'row',
|
|
3655
|
+
alignItems: 'center',
|
|
3656
|
+
gap: 6,
|
|
3657
|
+
}}>
|
|
3658
|
+
<NetworkIcons_1.GlobeIcon size={12} color={AppColors_1.AppColors.grayTextWeak}/>
|
|
3659
|
+
<HighlightText_1.default text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
|
|
3086
3660
|
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
3087
3661
|
fontSize: 12,
|
|
3088
3662
|
color: AppColors_1.AppColors.grayText,
|
|
3089
3663
|
flex: 1,
|
|
3090
3664
|
}} highlightStyle={styles_1.default.highlight} detectLinks={true}/>
|
|
3091
|
-
|
|
3665
|
+
</react_native_1.View>
|
|
3092
3666
|
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3667
|
+
{/* Bottom row: Time */}
|
|
3668
|
+
<react_native_1.View style={{
|
|
3669
|
+
flexDirection: 'row',
|
|
3670
|
+
alignItems: 'center',
|
|
3671
|
+
gap: 6,
|
|
3672
|
+
}}>
|
|
3673
|
+
<NetworkIcons_1.ClockIcon size={11} color={AppColors_1.AppColors.grayTextWeak}/>
|
|
3674
|
+
<react_native_1.Text style={{
|
|
3675
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
3676
|
+
fontSize: 11,
|
|
3677
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
3678
|
+
}}>
|
|
3679
|
+
{formatNavTime(item.timestamp)}
|
|
3680
|
+
</react_native_1.Text>
|
|
3681
|
+
</react_native_1.View>
|
|
3682
|
+
</react_native_1.View>
|
|
3683
|
+
<CopyButton_1.default value={item.url} label="URL"/>
|
|
3684
|
+
</react_native_1.View>);
|
|
3103
3685
|
}} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
|
|
3104
3686
|
styles_1.default.listContent,
|
|
3105
|
-
filteredNavHistory.length === 0 && {
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3687
|
+
filteredNavHistory.length === 0 && {
|
|
3688
|
+
flexGrow: 1,
|
|
3689
|
+
},
|
|
3690
|
+
]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<react_native_1.View style={{
|
|
3691
|
+
flex: 1,
|
|
3692
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
3693
|
+
}}>
|
|
3694
|
+
{webViewLogs.length > 0 ? (<react_native_1.FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<react_native_1.View style={{
|
|
3695
|
+
paddingHorizontal: 16,
|
|
3696
|
+
paddingTop: 12,
|
|
3697
|
+
paddingBottom: 8,
|
|
3698
|
+
flexDirection: 'row',
|
|
3699
|
+
justifyContent: 'space-between',
|
|
3700
|
+
alignItems: 'center',
|
|
3701
|
+
}}>
|
|
3702
|
+
<react_native_1.Text style={styles_1.default.resultCount}>
|
|
3703
|
+
Console Logs ({webViewLogs.length})
|
|
3704
|
+
</react_native_1.Text>
|
|
3705
|
+
<TouchableScale_1.default onPress={() => (0, webViewLogger_1.clearWebViewData)()} style={{
|
|
3706
|
+
padding: 6,
|
|
3707
|
+
borderRadius: 6,
|
|
3708
|
+
backgroundColor: AppColors_1.AppColors.primaryLight,
|
|
3709
|
+
borderWidth: 1,
|
|
3710
|
+
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
3711
|
+
}}>
|
|
3712
|
+
<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
|
|
3713
|
+
</TouchableScale_1.default>
|
|
3714
|
+
</react_native_1.View>} renderItem={({ item }) => {
|
|
3715
|
+
const logColor = item.type === 'error'
|
|
3716
|
+
? AppColors_1.AppColors.errorColor
|
|
3717
|
+
: item.type === 'warn'
|
|
3718
|
+
? AppColors_1.AppColors.warningIconGold
|
|
3719
|
+
: item.type === 'info'
|
|
3720
|
+
? AppColors_1.AppColors.skyBlue
|
|
3721
|
+
: AppColors_1.AppColors.grayTextWeak;
|
|
3722
|
+
const bgColor = item.type === 'error'
|
|
3723
|
+
? 'rgba(255, 46, 87, 0.06)'
|
|
3724
|
+
: item.type === 'warn'
|
|
3725
|
+
? 'rgba(191, 162, 82, 0.08)'
|
|
3726
|
+
: AppColors_1.AppColors.primaryLight;
|
|
3122
3727
|
const d = new Date(item.timestamp);
|
|
3123
3728
|
const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
|
|
3124
3729
|
return (<react_native_1.View style={{
|
|
@@ -3135,34 +3740,65 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3135
3740
|
gap: 8,
|
|
3136
3741
|
alignItems: 'flex-start',
|
|
3137
3742
|
}}>
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3743
|
+
<react_native_1.View style={{ paddingTop: 1 }}>
|
|
3744
|
+
<NetworkIcons_1.TerminalIcon color={logColor} size={11}/>
|
|
3745
|
+
</react_native_1.View>
|
|
3746
|
+
<react_native_1.View style={{ flex: 1, gap: 3 }}>
|
|
3747
|
+
<react_native_1.View style={{
|
|
3748
|
+
flexDirection: 'row',
|
|
3749
|
+
alignItems: 'center',
|
|
3750
|
+
justifyContent: 'space-between',
|
|
3751
|
+
}}>
|
|
3752
|
+
<react_native_1.Text style={{
|
|
3753
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3754
|
+
fontSize: 10,
|
|
3755
|
+
color: logColor,
|
|
3756
|
+
textTransform: 'uppercase',
|
|
3757
|
+
letterSpacing: 0.5,
|
|
3758
|
+
}}>
|
|
3759
|
+
{item.type}
|
|
3760
|
+
</react_native_1.Text>
|
|
3761
|
+
<react_native_1.Text style={{
|
|
3762
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
3763
|
+
fontSize: 10,
|
|
3764
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
3765
|
+
}}>
|
|
3766
|
+
{timeStr}
|
|
3767
|
+
</react_native_1.Text>
|
|
3768
|
+
</react_native_1.View>
|
|
3769
|
+
<react_native_1.Text style={{
|
|
3770
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
3771
|
+
fontSize: 12,
|
|
3772
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
3773
|
+
lineHeight: 16,
|
|
3774
|
+
}}>
|
|
3775
|
+
{item.message}
|
|
3776
|
+
</react_native_1.Text>
|
|
3777
|
+
</react_native_1.View>
|
|
3778
|
+
</react_native_1.View>);
|
|
3779
|
+
}} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
|
|
3780
|
+
styles_1.default.listContent,
|
|
3781
|
+
webViewLogs.length === 0 && { flexGrow: 1 },
|
|
3782
|
+
]}/>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
|
|
3783
|
+
<react_native_1.View style={styles_1.default.emptyIconWrap}>
|
|
3784
|
+
<NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
|
|
3153
3785
|
</react_native_1.View>
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
</react_native_1.
|
|
3163
|
-
|
|
3164
|
-
|
|
3165
|
-
|
|
3786
|
+
<react_native_1.Text style={styles_1.default.emptyTitle}>
|
|
3787
|
+
No Console Logs
|
|
3788
|
+
</react_native_1.Text>
|
|
3789
|
+
<react_native_1.Text style={styles_1.default.emptySub}>
|
|
3790
|
+
Console logs from the WebView will appear
|
|
3791
|
+
here.
|
|
3792
|
+
</react_native_1.Text>
|
|
3793
|
+
</react_native_1.View>)}
|
|
3794
|
+
</react_native_1.View>) : (<react_native_1.View style={{
|
|
3795
|
+
flex: 1,
|
|
3796
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
3797
|
+
}}>
|
|
3798
|
+
{webViewHtml ? (OriginalWebView ? (<OriginalWebView source={{
|
|
3799
|
+
html: webViewHtml,
|
|
3800
|
+
baseUrl: webViewHtmlUrl,
|
|
3801
|
+
}} injectedJavaScript={previewInspectScript} onMessage={(event) => {
|
|
3166
3802
|
try {
|
|
3167
3803
|
const data = JSON.parse(event.nativeEvent.data);
|
|
3168
3804
|
if (data.type === 'preview-inspect') {
|
|
@@ -3177,27 +3813,39 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3177
3813
|
}
|
|
3178
3814
|
}
|
|
3179
3815
|
catch (err) { }
|
|
3180
|
-
}} style={{ flex: 1 }}/>) : (<react_native_1.View style={{
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3816
|
+
}} style={{ flex: 1 }}/>) : (<react_native_1.View style={{
|
|
3817
|
+
flex: 1,
|
|
3818
|
+
justifyContent: 'center',
|
|
3819
|
+
alignItems: 'center',
|
|
3820
|
+
padding: 20,
|
|
3821
|
+
}}>
|
|
3822
|
+
<react_native_1.Text style={{
|
|
3823
|
+
color: AppColors_1.AppColors.grayText,
|
|
3824
|
+
textAlign: 'center',
|
|
3825
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
3826
|
+
}}>
|
|
3827
|
+
react-native-webview is not installed in the
|
|
3828
|
+
target project. Install it to enable Preview
|
|
3829
|
+
mode.
|
|
3830
|
+
</react_native_1.Text>
|
|
3831
|
+
</react_native_1.View>)) : (<react_native_1.View style={styles_1.default.emptyContainer}>
|
|
3832
|
+
<react_native_1.View style={styles_1.default.emptyIconWrap}>
|
|
3833
|
+
<NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
|
|
3834
|
+
</react_native_1.View>
|
|
3835
|
+
<react_native_1.Text style={styles_1.default.emptyTitle}>
|
|
3836
|
+
No Preview Available
|
|
3837
|
+
</react_native_1.Text>
|
|
3838
|
+
<react_native_1.Text style={styles_1.default.emptySub}>
|
|
3839
|
+
Load a page in the WebView to see its visual
|
|
3840
|
+
preview.
|
|
3841
|
+
</react_native_1.Text>
|
|
3842
|
+
</react_native_1.View>)}
|
|
3843
|
+
</react_native_1.View>)}
|
|
3844
|
+
</react_native_1.View>)) : activeTab === 'redux' ? (renderReduxTab()) : (<react_native_1.View style={{ flex: 1 }}>
|
|
3845
|
+
{/* Non-scrollable details header */}
|
|
3846
|
+
<react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
|
|
3847
|
+
<react_native_1.View style={styles_1.default.detailInfoBar}>
|
|
3848
|
+
{(() => {
|
|
3201
3849
|
let hostStr = '';
|
|
3202
3850
|
let pathStr = detailDisplayUrl;
|
|
3203
3851
|
let queryStr = '';
|
|
@@ -3226,31 +3874,29 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3226
3874
|
}
|
|
3227
3875
|
catch (e) { }
|
|
3228
3876
|
return (<>
|
|
3229
|
-
|
|
3230
|
-
|
|
3877
|
+
<react_native_1.View style={styles_1.default.detailInfoTop}>
|
|
3878
|
+
<react_native_1.View style={{
|
|
3231
3879
|
flexDirection: 'row',
|
|
3232
3880
|
alignItems: 'center',
|
|
3233
3881
|
gap: 8,
|
|
3234
3882
|
}}>
|
|
3235
|
-
|
|
3883
|
+
<react_native_1.View style={[
|
|
3236
3884
|
styles_1.default.methodBadge,
|
|
3237
3885
|
{
|
|
3238
|
-
backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ??
|
|
3239
|
-
constants_1.METHOD_COLORS.ALL}15`,
|
|
3886
|
+
backgroundColor: `${constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL}15`,
|
|
3240
3887
|
},
|
|
3241
3888
|
]}>
|
|
3242
|
-
|
|
3889
|
+
<react_native_1.Text style={[
|
|
3243
3890
|
styles_1.default.methodBadgeText,
|
|
3244
3891
|
{
|
|
3245
|
-
color: constants_1.METHOD_COLORS[selected.method] ??
|
|
3246
|
-
constants_1.METHOD_COLORS.ALL,
|
|
3892
|
+
color: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
|
|
3247
3893
|
},
|
|
3248
3894
|
]}>
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3895
|
+
{selected.method}
|
|
3896
|
+
</react_native_1.Text>
|
|
3897
|
+
</react_native_1.View>
|
|
3252
3898
|
|
|
3253
|
-
|
|
3899
|
+
{selected.status != null && (<react_native_1.View style={[
|
|
3254
3900
|
styles_1.default.chip,
|
|
3255
3901
|
{
|
|
3256
3902
|
backgroundColor: selected.status === 0
|
|
@@ -3261,10 +3907,10 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3261
3907
|
: `${(0, helpers_1.getStatusColor)(selected.status)}40`,
|
|
3262
3908
|
},
|
|
3263
3909
|
]}>
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3910
|
+
{selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
|
|
3911
|
+
<react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
|
|
3912
|
+
</react_native_svg_1.default>)}
|
|
3913
|
+
<react_native_1.Text style={[
|
|
3268
3914
|
styles_1.default.chipText,
|
|
3269
3915
|
{
|
|
3270
3916
|
color: selected.status === 0
|
|
@@ -3272,29 +3918,38 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3272
3918
|
: (0, helpers_1.getStatusColor)(selected.status),
|
|
3273
3919
|
},
|
|
3274
3920
|
]}>
|
|
3275
|
-
|
|
3921
|
+
{selected.status === 0
|
|
3276
3922
|
? 'Failed'
|
|
3277
3923
|
: String(selected.status)}
|
|
3278
|
-
|
|
3279
|
-
|
|
3924
|
+
</react_native_1.Text>
|
|
3925
|
+
</react_native_1.View>)}
|
|
3280
3926
|
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3927
|
+
{selected.duration != null && (<react_native_1.View style={[
|
|
3928
|
+
styles_1.default.chip,
|
|
3929
|
+
{
|
|
3930
|
+
backgroundColor: 'rgba(104,75,155,0.08)',
|
|
3931
|
+
borderColor: 'rgba(104,75,155,0.18)',
|
|
3932
|
+
},
|
|
3933
|
+
]}>
|
|
3934
|
+
<react_native_1.Text style={[
|
|
3935
|
+
styles_1.default.chipText,
|
|
3936
|
+
{ color: AppColors_1.AppColors.purple },
|
|
3937
|
+
]}>
|
|
3938
|
+
{selected.duration}ms
|
|
3939
|
+
</react_native_1.Text>
|
|
3940
|
+
</react_native_1.View>)}
|
|
3941
|
+
</react_native_1.View>
|
|
3942
|
+
<react_native_1.View style={styles_1.default.detailInfoRight}>
|
|
3943
|
+
<TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
|
|
3944
|
+
<NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
3945
|
+
</TouchableScale_1.default>
|
|
3946
|
+
<CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
|
|
3947
|
+
<CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
|
|
3948
|
+
<CopyButton_1.default value={detailDisplayUrl} label="URL"/>
|
|
3949
|
+
</react_native_1.View>
|
|
3950
|
+
</react_native_1.View>
|
|
3296
3951
|
|
|
3297
|
-
|
|
3952
|
+
<react_native_1.Pressable style={{
|
|
3298
3953
|
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
3299
3954
|
borderRadius: 10,
|
|
3300
3955
|
borderWidth: 1,
|
|
@@ -3302,28 +3957,59 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3302
3957
|
padding: 10,
|
|
3303
3958
|
marginTop: 6,
|
|
3304
3959
|
}} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3960
|
+
<react_native_1.View style={{
|
|
3961
|
+
flexDirection: 'row',
|
|
3962
|
+
alignItems: 'center',
|
|
3963
|
+
justifyContent: 'space-between',
|
|
3964
|
+
marginBottom: 2,
|
|
3965
|
+
}}>
|
|
3966
|
+
<react_native_1.Text style={{
|
|
3967
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
3968
|
+
fontSize: 10,
|
|
3969
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
3970
|
+
flex: 1,
|
|
3971
|
+
}} numberOfLines={1}>
|
|
3972
|
+
{hostStr || 'API Endpoint'}
|
|
3973
|
+
</react_native_1.Text>
|
|
3974
|
+
{queryStr ? (<react_native_1.View style={{
|
|
3975
|
+
backgroundColor: 'rgba(104,75,155,0.08)',
|
|
3976
|
+
paddingHorizontal: 5,
|
|
3977
|
+
paddingVertical: 1,
|
|
3978
|
+
borderRadius: 4,
|
|
3979
|
+
}}>
|
|
3980
|
+
<react_native_1.Text style={{
|
|
3981
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3982
|
+
fontSize: 8.5,
|
|
3983
|
+
color: AppColors_1.AppColors.purple,
|
|
3984
|
+
}}>
|
|
3985
|
+
Query Params
|
|
3986
|
+
</react_native_1.Text>
|
|
3987
|
+
</react_native_1.View>) : null}
|
|
3988
|
+
</react_native_1.View>
|
|
3989
|
+
<react_native_1.Text selectable={true} style={{
|
|
3990
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3991
|
+
fontSize: 12,
|
|
3992
|
+
color: AppColors_1.AppColors.primaryBlack,
|
|
3993
|
+
marginTop: 2,
|
|
3994
|
+
}} numberOfLines={2}>
|
|
3995
|
+
{pathStr}
|
|
3996
|
+
</react_native_1.Text>
|
|
3997
|
+
{queryStr ? (<react_native_1.Text selectable={true} style={{
|
|
3998
|
+
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
3999
|
+
fontSize: 10,
|
|
4000
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
4001
|
+
marginTop: 4,
|
|
4002
|
+
}} numberOfLines={1}>
|
|
4003
|
+
{queryStr}
|
|
4004
|
+
</react_native_1.Text>) : null}
|
|
4005
|
+
</react_native_1.Pressable>
|
|
4006
|
+
</>);
|
|
3321
4007
|
})()}
|
|
3322
|
-
|
|
3323
|
-
|
|
4008
|
+
</react_native_1.View>
|
|
4009
|
+
</react_native_1.View>
|
|
3324
4010
|
|
|
3325
|
-
|
|
3326
|
-
|
|
4011
|
+
{/* Sticky Segment Control */}
|
|
4012
|
+
<react_native_1.View style={{
|
|
3327
4013
|
flexDirection: 'row',
|
|
3328
4014
|
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
3329
4015
|
borderRadius: 10,
|
|
@@ -3334,7 +4020,12 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3334
4020
|
borderWidth: 1,
|
|
3335
4021
|
borderColor: AppColors_1.AppColors.dividerColor,
|
|
3336
4022
|
}}>
|
|
3337
|
-
|
|
4023
|
+
{[
|
|
4024
|
+
'metadata',
|
|
4025
|
+
'headers',
|
|
4026
|
+
'request',
|
|
4027
|
+
'response',
|
|
4028
|
+
].map(tab => {
|
|
3338
4029
|
const isActive = apiDetailActiveTab === tab;
|
|
3339
4030
|
if (tab === 'request' && selected.request == null)
|
|
3340
4031
|
return null;
|
|
@@ -3348,7 +4039,9 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3348
4039
|
return 'Response';
|
|
3349
4040
|
};
|
|
3350
4041
|
const getIcon = () => {
|
|
3351
|
-
const iconColor = isActive
|
|
4042
|
+
const iconColor = isActive
|
|
4043
|
+
? '#FFFFFF'
|
|
4044
|
+
: AppColors_1.AppColors.grayText;
|
|
3352
4045
|
if (tab === 'metadata')
|
|
3353
4046
|
return <NetworkIcons_1.StatusIcon color={iconColor}/>;
|
|
3354
4047
|
if (tab === 'headers')
|
|
@@ -3364,115 +4057,129 @@ const NetworkInspector = ({ enabled = true }) => {
|
|
|
3364
4057
|
alignItems: 'center',
|
|
3365
4058
|
justifyContent: 'center',
|
|
3366
4059
|
borderRadius: 8,
|
|
3367
|
-
backgroundColor: isActive
|
|
4060
|
+
backgroundColor: isActive
|
|
4061
|
+
? AppColors_1.AppColors.purple
|
|
4062
|
+
: 'transparent',
|
|
3368
4063
|
gap: 4,
|
|
3369
4064
|
}}>
|
|
3370
|
-
|
|
3371
|
-
|
|
4065
|
+
{getIcon()}
|
|
4066
|
+
<react_native_1.Text style={{
|
|
3372
4067
|
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
3373
4068
|
fontSize: 10,
|
|
3374
|
-
color: isActive
|
|
4069
|
+
color: isActive
|
|
4070
|
+
? '#FFFFFF'
|
|
4071
|
+
: AppColors_1.AppColors.grayText,
|
|
3375
4072
|
}}>
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
4073
|
+
{getLabel()}
|
|
4074
|
+
</react_native_1.Text>
|
|
4075
|
+
</react_native_1.TouchableOpacity>);
|
|
3379
4076
|
})}
|
|
3380
|
-
|
|
4077
|
+
</react_native_1.View>
|
|
3381
4078
|
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
4079
|
+
{/* Scrollable Tab Content */}
|
|
4080
|
+
<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{
|
|
4081
|
+
paddingHorizontal: 6,
|
|
4082
|
+
paddingBottom: 24,
|
|
4083
|
+
}} showsVerticalScrollIndicator={true}>
|
|
4084
|
+
{apiDetailActiveTab === 'metadata' && (<>
|
|
4085
|
+
<MetaAccordion_1.default status={selected.status} statusColor={(0, helpers_1.getStatusColor)(selected.status)} duration={selected.duration} size={(0, helpers_1.getSize)(selected.response)} triggeredAt={(0, helpers_1.formatDateTime)(selected.startTime)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
|
|
3386
4086
|
selected.responseHeaders?.['Content-Type']} url={selected.url}/>
|
|
3387
4087
|
|
|
3388
|
-
|
|
4088
|
+
{(() => {
|
|
3389
4089
|
const routeInfo = logRouteMapRef.current.get(selected.id);
|
|
3390
4090
|
if (!routeInfo || routeInfo.path === 'Navigators')
|
|
3391
4091
|
return null;
|
|
3392
4092
|
return <SourcePageCard_1.default routeInfo={routeInfo}/>;
|
|
3393
4093
|
})()}
|
|
3394
4094
|
|
|
3395
|
-
|
|
4095
|
+
{(() => {
|
|
3396
4096
|
const cType = selected.responseHeaders?.['content-type'] ||
|
|
3397
4097
|
selected.responseHeaders?.['Content-Type'];
|
|
3398
4098
|
if (cType?.includes('image/')) {
|
|
3399
4099
|
return (<react_native_1.View style={styles_1.default.imagePreviewWrapper}>
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
4100
|
+
<react_native_1.Image source={{ uri: selected.url }} style={styles_1.default.imagePreview} resizeMode="contain"/>
|
|
4101
|
+
<TouchableScale_1.default style={styles_1.default.imageDownloadBtn} onPress={() => react_native_1.Linking.openURL(selected.url)} hitSlop={10}>
|
|
4102
|
+
<NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple} size={18}/>
|
|
4103
|
+
</TouchableScale_1.default>
|
|
4104
|
+
</react_native_1.View>);
|
|
3405
4105
|
}
|
|
3406
4106
|
return null;
|
|
3407
4107
|
})()}
|
|
3408
|
-
|
|
4108
|
+
</>)}
|
|
3409
4109
|
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
4110
|
+
{apiDetailActiveTab === 'headers' && (<>
|
|
4111
|
+
<react_native_1.View style={styles_1.default.detailSearchRow}>
|
|
4112
|
+
<react_native_1.View style={styles_1.default.detailSearchBox}>
|
|
4113
|
+
<react_native_1.TextInput placeholder="Search headers..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
|
|
4114
|
+
{detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
|
|
4115
|
+
<NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
4116
|
+
</react_native_1.Pressable>)}
|
|
4117
|
+
</react_native_1.View>
|
|
4118
|
+
</react_native_1.View>
|
|
3419
4119
|
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
4120
|
+
<HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
|
|
4121
|
+
<HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
|
|
4122
|
+
</>)}
|
|
3423
4123
|
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
4124
|
+
{apiDetailActiveTab === 'request' &&
|
|
4125
|
+
selected.request != null && (<>
|
|
4126
|
+
<react_native_1.View style={styles_1.default.detailSearchRow}>
|
|
4127
|
+
<react_native_1.View style={styles_1.default.detailSearchBox}>
|
|
4128
|
+
<react_native_1.TextInput placeholder="Search request..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
|
|
4129
|
+
{detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
|
|
4130
|
+
<NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
4131
|
+
</react_native_1.Pressable>)}
|
|
4132
|
+
</react_native_1.View>
|
|
4133
|
+
</react_native_1.View>
|
|
3433
4134
|
|
|
3434
|
-
|
|
3435
|
-
|
|
4135
|
+
<react_native_1.View style={styles_1.default.sectionContainer}>
|
|
4136
|
+
<SectionHeader_1.default title="Request" value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
|
|
3436
4137
|
setShowReqDiff(v => !v);
|
|
3437
4138
|
if (!reqExpanded && !showReqDiff)
|
|
3438
4139
|
setReqExpanded(true);
|
|
3439
4140
|
}}/>
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
4141
|
+
{showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen={reqExpanded}/>)}
|
|
4142
|
+
</react_native_1.View>
|
|
4143
|
+
</>)}
|
|
3443
4144
|
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
4145
|
+
{apiDetailActiveTab === 'response' && (<>
|
|
4146
|
+
<react_native_1.View style={styles_1.default.detailSearchRow}>
|
|
4147
|
+
<react_native_1.View style={styles_1.default.detailSearchBox}>
|
|
4148
|
+
<react_native_1.TextInput placeholder="Search response..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
|
|
4149
|
+
{detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
|
|
4150
|
+
<NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
|
|
4151
|
+
</react_native_1.Pressable>)}
|
|
4152
|
+
</react_native_1.View>
|
|
4153
|
+
</react_native_1.View>
|
|
3453
4154
|
|
|
3454
|
-
|
|
3455
|
-
|
|
4155
|
+
<react_native_1.View style={styles_1.default.sectionContainer}>
|
|
4156
|
+
<SectionHeader_1.default title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
|
|
3456
4157
|
setShowResDiff(v => !v);
|
|
3457
4158
|
if (!resExpanded && !showResDiff)
|
|
3458
4159
|
setResExpanded(true);
|
|
3459
4160
|
}}/>
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
4161
|
+
{showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded}/>)}
|
|
4162
|
+
</react_native_1.View>
|
|
4163
|
+
</>)}
|
|
4164
|
+
</react_native_1.ScrollView>
|
|
4165
|
+
</react_native_1.View>)) : (<react_native_1.View style={styles_1.default.empty}>
|
|
4166
|
+
<react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
|
|
4167
|
+
<react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
|
|
4168
|
+
Loading logs...
|
|
4169
|
+
</react_native_1.Text>
|
|
4170
|
+
</react_native_1.View>)}
|
|
3470
4171
|
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
4172
|
+
{settingsPage !== null && (<react_native_1.View style={[
|
|
4173
|
+
react_native_1.StyleSheet.absoluteFill,
|
|
4174
|
+
{
|
|
4175
|
+
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
4176
|
+
zIndex: 99999,
|
|
4177
|
+
},
|
|
4178
|
+
]}>
|
|
4179
|
+
{renderSettings()}
|
|
4180
|
+
</react_native_1.View>)}
|
|
4181
|
+
</react_native_1.View>
|
|
3474
4182
|
</react_native_1.View>
|
|
3475
|
-
</react_native_1.View>
|
|
3476
4183
|
</ErrorBoundary_1.default>)}
|
|
3477
4184
|
</react_native_1.Modal>
|
|
3478
4185
|
</>);
|
|
@@ -3488,6 +4195,7 @@ var networkLogger_2 = require("./customHooks/networkLogger");
|
|
|
3488
4195
|
Object.defineProperty(exports, "setupNetworkLogger", { enumerable: true, get: function () { return networkLogger_2.setupNetworkLogger; } });
|
|
3489
4196
|
Object.defineProperty(exports, "clearNetworkLogs", { enumerable: true, get: function () { return networkLogger_2.clearNetworkLogs; } });
|
|
3490
4197
|
Object.defineProperty(exports, "subscribeNetworkLogs", { enumerable: true, get: function () { return networkLogger_2.subscribeNetworkLogs; } });
|
|
4198
|
+
Object.defineProperty(exports, "addAxiosInterceptors", { enumerable: true, get: function () { return networkLogger_2.addAxiosInterceptors; } });
|
|
3491
4199
|
var consoleLogger_2 = require("./customHooks/consoleLogger");
|
|
3492
4200
|
Object.defineProperty(exports, "setupConsoleLogger", { enumerable: true, get: function () { return consoleLogger_2.setupConsoleLogger; } });
|
|
3493
4201
|
Object.defineProperty(exports, "clearConsoleLogs", { enumerable: true, get: function () { return consoleLogger_2.clearConsoleLogs; } });
|