@buoy-gg/highlight-updates 7.0.40 → 7.0.42
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 +11 -67
- package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js +1 -281
- package/lib/commonjs/highlight-updates/components/HighlightFilterView.js +1 -1474
- package/lib/commonjs/highlight-updates/components/HighlightUpdatesModal.js +1 -641
- package/lib/commonjs/highlight-updates/components/IdentifierBadge.js +1 -273
- package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js +1 -188
- package/lib/commonjs/highlight-updates/components/ModalHeaderContent.js +1 -293
- package/lib/commonjs/highlight-updates/components/RenderCauseBadge.js +1 -508
- package/lib/commonjs/highlight-updates/components/RenderDetailView.js +1 -846
- package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js +1 -915
- package/lib/commonjs/highlight-updates/components/RenderListItem.js +1 -235
- package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js +1 -469
- package/lib/commonjs/highlight-updates/components/StatsDisplay.js +1 -73
- package/lib/commonjs/highlight-updates/types/copySettings.js +1 -107
- package/lib/commonjs/highlight-updates/utils/CommitProfiler.js +1 -446
- package/lib/commonjs/highlight-updates/utils/HighlightUpdatesController.js +1 -1920
- package/lib/commonjs/highlight-updates/utils/PerformanceLogger.js +26 -359
- package/lib/commonjs/highlight-updates/utils/ProfilerInterceptor.js +1 -371
- package/lib/commonjs/highlight-updates/utils/RenderCauseDetector.js +5 -1840
- package/lib/commonjs/highlight-updates/utils/RenderTracker.js +1 -952
- package/lib/commonjs/highlight-updates/utils/ViewTypeMapper.js +1 -264
- package/lib/commonjs/highlight-updates/utils/copySettingsStorage.js +1 -32
- package/lib/commonjs/highlight-updates/utils/devtoolsComponentNames.js +1 -188
- package/lib/commonjs/highlight-updates/utils/namedComposite.js +1 -41
- package/lib/commonjs/highlight-updates/utils/ownStateChanged.js +1 -103
- package/lib/commonjs/highlight-updates/utils/rawEventEmitter.js +1 -50
- package/lib/commonjs/highlight-updates/utils/rawEventEmitter.web.js +1 -0
- package/lib/commonjs/highlight-updates/utils/renderExportFormatter.js +1 -58
- package/lib/commonjs/highlight-updates/utils/rendersExportFormatter.js +1 -485
- package/lib/commonjs/highlight-updates/utils/screenElements.js +1 -1248
- package/lib/commonjs/highlight-updates/utils/tapMatch.js +1 -83
- package/lib/commonjs/highlight-updates/utils/testIDs.js +1 -68
- package/lib/commonjs/highlight-updates/utils/touchCapture.js +1 -277
- package/lib/commonjs/index.js +1 -429
- package/lib/commonjs/preset.js +1 -278
- package/lib/commonjs/sync/highlightUpdatesSyncAdapter.js +1 -235
- package/lib/module/highlight-updates/HighlightUpdatesOverlay.js +1 -274
- package/lib/module/highlight-updates/components/HighlightFilterView.js +1 -1468
- package/lib/module/highlight-updates/components/HighlightUpdatesModal.js +1 -634
- package/lib/module/highlight-updates/components/IdentifierBadge.js +1 -265
- package/lib/module/highlight-updates/components/IsolatedRenderList.js +1 -183
- package/lib/module/highlight-updates/components/ModalHeaderContent.js +1 -288
- package/lib/module/highlight-updates/components/RenderCauseBadge.js +1 -499
- package/lib/module/highlight-updates/components/RenderDetailView.js +1 -840
- package/lib/module/highlight-updates/components/RenderHistoryViewer.js +1 -908
- package/lib/module/highlight-updates/components/RenderListItem.js +1 -230
- package/lib/module/highlight-updates/components/RendersCopySettingsView.js +1 -465
- package/lib/module/highlight-updates/components/StatsDisplay.js +1 -70
- package/lib/module/highlight-updates/types/copySettings.js +1 -102
- package/lib/module/highlight-updates/utils/CommitProfiler.js +1 -442
- package/lib/module/highlight-updates/utils/HighlightUpdatesController.js +1 -1916
- package/lib/module/highlight-updates/utils/PerformanceLogger.js +26 -353
- package/lib/module/highlight-updates/utils/ProfilerInterceptor.js +1 -358
- package/lib/module/highlight-updates/utils/RenderCauseDetector.js +5 -1830
- package/lib/module/highlight-updates/utils/RenderTracker.js +1 -949
- package/lib/module/highlight-updates/utils/ViewTypeMapper.js +1 -255
- package/lib/module/highlight-updates/utils/copySettingsStorage.js +1 -26
- package/lib/module/highlight-updates/utils/devtoolsComponentNames.js +1 -178
- package/lib/module/highlight-updates/utils/namedComposite.js +1 -36
- package/lib/module/highlight-updates/utils/ownStateChanged.js +1 -98
- package/lib/module/highlight-updates/utils/rawEventEmitter.js +1 -46
- package/lib/module/highlight-updates/utils/rawEventEmitter.web.js +1 -0
- package/lib/module/highlight-updates/utils/renderExportFormatter.js +1 -54
- package/lib/module/highlight-updates/utils/rendersExportFormatter.js +1 -478
- package/lib/module/highlight-updates/utils/screenElements.js +1 -1242
- package/lib/module/highlight-updates/utils/tapMatch.js +1 -76
- package/lib/module/highlight-updates/utils/testIDs.js +1 -60
- package/lib/module/highlight-updates/utils/touchCapture.js +1 -270
- package/lib/module/index.js +1 -130
- package/lib/module/preset.js +1 -272
- package/lib/module/sync/highlightUpdatesSyncAdapter.js +1 -230
- package/lib/typescript/highlight-updates/utils/HighlightUpdatesController.d.ts +0 -26
- package/lib/typescript/highlight-updates/utils/rawEventEmitter.web.d.ts +3 -0
- package/lib/typescript/highlight-updates/utils/screenElements.d.ts +0 -19
- package/lib/web/index.mjs +38 -0
- package/package.json +34 -14
- package/lib/typescript/highlight-updates/HighlightUpdatesOverlay.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/HighlightFilterView.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/HighlightUpdatesModal.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/IdentifierBadge.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/IsolatedRenderList.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/ModalHeaderContent.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/RenderCauseBadge.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/RenderDetailView.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/RenderHistoryViewer.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/RenderListItem.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/RendersCopySettingsView.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/components/StatsDisplay.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/types/copySettings.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/CommitProfiler.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/HighlightUpdatesController.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/PerformanceLogger.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/ProfilerInterceptor.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/RenderCauseDetector.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/RenderTracker.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/ViewTypeMapper.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/copySettingsStorage.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/devtoolsComponentNames.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/namedComposite.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/ownStateChanged.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/rawEventEmitter.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/renderExportFormatter.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/rendersExportFormatter.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/screenElements.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/tapMatch.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/testIDs.d.ts.map +0 -1
- package/lib/typescript/highlight-updates/utils/touchCapture.d.ts.map +0 -1
- package/lib/typescript/index.d.ts.map +0 -1
- package/lib/typescript/preset.d.ts.map +0 -1
- package/lib/typescript/sync/highlightUpdatesSyncAdapter.d.ts.map +0 -1
|
@@ -1,1474 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.HighlightFilterView = HighlightFilterView;
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _reactNative = require("react-native");
|
|
10
|
-
var _sharedUi = require("@buoy-gg/shared-ui");
|
|
11
|
-
var _IdentifierBadge = require("./IdentifierBadge");
|
|
12
|
-
var _testIDs = require("../utils/testIDs");
|
|
13
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
|
-
/**
|
|
16
|
-
* HighlightFilterView
|
|
17
|
-
*
|
|
18
|
-
* Simplified filter configuration for tracked component renders.
|
|
19
|
-
* Uses a badge-based approach where users select a filter type
|
|
20
|
-
* (Any, ViewType, testID, Component) then enter a value.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
// Use shared identifier config (FilterType is a subset of IdentifierType)
|
|
24
|
-
const getFilterConfig = type => _IdentifierBadge.IDENTIFIER_CONFIG[type];
|
|
25
|
-
|
|
26
|
-
// Filter types available for selection (all identifier types)
|
|
27
|
-
const FILTER_TYPES = ["any", "viewType", "testID", "nativeID", "component", "accessibilityLabel"];
|
|
28
|
-
|
|
29
|
-
// Type picker component
|
|
30
|
-
function TypePicker({
|
|
31
|
-
mode,
|
|
32
|
-
onSelect,
|
|
33
|
-
onCancel
|
|
34
|
-
}) {
|
|
35
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
36
|
-
nativeID: "__rn_buoy__type-picker",
|
|
37
|
-
testID: `buoy-highlight-${mode}-types`,
|
|
38
|
-
style: styles.typePicker,
|
|
39
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
40
|
-
style: styles.typePickerRow,
|
|
41
|
-
children: FILTER_TYPES.map(type => {
|
|
42
|
-
const config = getFilterConfig(type);
|
|
43
|
-
const IconComponent = config.icon;
|
|
44
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
45
|
-
testID: `buoy-highlight-${mode}-type-${type.toLowerCase()}`,
|
|
46
|
-
accessibilityRole: "button",
|
|
47
|
-
accessibilityLabel: config.label,
|
|
48
|
-
style: [styles.typeOption, {
|
|
49
|
-
backgroundColor: config.color + "15",
|
|
50
|
-
borderColor: config.color + "40"
|
|
51
|
-
}],
|
|
52
|
-
onPress: () => onSelect(type),
|
|
53
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
|
|
54
|
-
size: 14,
|
|
55
|
-
color: config.color
|
|
56
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
57
|
-
style: [styles.typeOptionText, {
|
|
58
|
-
color: config.color
|
|
59
|
-
}],
|
|
60
|
-
children: config.label
|
|
61
|
-
})]
|
|
62
|
-
}, type);
|
|
63
|
-
})
|
|
64
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
65
|
-
testID: `buoy-highlight-${mode}-types-cancel`,
|
|
66
|
-
accessibilityRole: "button",
|
|
67
|
-
accessibilityLabel: "Cancel",
|
|
68
|
-
onPress: onCancel,
|
|
69
|
-
style: styles.typePickerCancel,
|
|
70
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
|
|
71
|
-
size: 16,
|
|
72
|
-
color: _sharedUi.night.color.textTertiary
|
|
73
|
-
})
|
|
74
|
-
})]
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Pattern input with badge prefix
|
|
79
|
-
function PatternInput({
|
|
80
|
-
mode,
|
|
81
|
-
type,
|
|
82
|
-
onSubmit,
|
|
83
|
-
onCancel
|
|
84
|
-
}) {
|
|
85
|
-
const [value, setValue] = (0, _react.useState)("");
|
|
86
|
-
const config = getFilterConfig(type);
|
|
87
|
-
const handleSubmit = () => {
|
|
88
|
-
if (value.trim()) {
|
|
89
|
-
onSubmit(value.trim());
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
93
|
-
nativeID: "__rn_buoy__pattern-input",
|
|
94
|
-
testID: `buoy-highlight-${mode}-input-row`,
|
|
95
|
-
style: styles.patternInputContainer,
|
|
96
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
|
|
97
|
-
type: type,
|
|
98
|
-
value: "",
|
|
99
|
-
badgeOnly: true,
|
|
100
|
-
compact: true
|
|
101
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
102
|
-
testID: `buoy-highlight-${mode}-input`,
|
|
103
|
-
value: value,
|
|
104
|
-
onChangeText: setValue,
|
|
105
|
-
onSubmitEditing: handleSubmit,
|
|
106
|
-
placeholder: "Enter pattern...",
|
|
107
|
-
placeholderTextColor: _sharedUi.night.color.placeholder,
|
|
108
|
-
style: styles.patternInput,
|
|
109
|
-
autoFocus: true,
|
|
110
|
-
returnKeyType: "done",
|
|
111
|
-
autoCorrect: false,
|
|
112
|
-
autoCapitalize: "none"
|
|
113
|
-
}), value.trim() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
114
|
-
testID: `buoy-highlight-${mode}-submit`,
|
|
115
|
-
accessibilityRole: "button",
|
|
116
|
-
accessibilityLabel: "Add pattern",
|
|
117
|
-
onPress: handleSubmit,
|
|
118
|
-
style: [styles.addPatternButton, {
|
|
119
|
-
backgroundColor: config.color + "20"
|
|
120
|
-
}],
|
|
121
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
122
|
-
style: [styles.addPatternButtonText, {
|
|
123
|
-
color: config.color
|
|
124
|
-
}],
|
|
125
|
-
children: "Add"
|
|
126
|
-
})
|
|
127
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
128
|
-
testID: `buoy-highlight-${mode}-input-cancel`,
|
|
129
|
-
accessibilityRole: "button",
|
|
130
|
-
accessibilityLabel: "Cancel",
|
|
131
|
-
onPress: onCancel,
|
|
132
|
-
style: styles.cancelButton,
|
|
133
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
|
|
134
|
-
size: 16,
|
|
135
|
-
color: _sharedUi.night.color.textTertiary
|
|
136
|
-
})
|
|
137
|
-
})]
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
// Pattern chip (removable badge) - tap to remove
|
|
142
|
-
function PatternChip({
|
|
143
|
-
mode,
|
|
144
|
-
pattern,
|
|
145
|
-
onRemove
|
|
146
|
-
}) {
|
|
147
|
-
const config = getFilterConfig(pattern.type);
|
|
148
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
149
|
-
testID: (0, _testIDs.patternChipTestID)(mode, pattern.type, pattern.value),
|
|
150
|
-
accessibilityRole: "button",
|
|
151
|
-
accessibilityLabel: `${config.label} ${pattern.value}, tap to remove`,
|
|
152
|
-
style: [styles.patternChip, {
|
|
153
|
-
borderColor: config.color + "40"
|
|
154
|
-
}],
|
|
155
|
-
onPress: onRemove,
|
|
156
|
-
activeOpacity: 0.7,
|
|
157
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
158
|
-
style: [styles.patternChipBadge, {
|
|
159
|
-
backgroundColor: config.color + "20"
|
|
160
|
-
}],
|
|
161
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
162
|
-
style: [styles.patternChipBadgeText, {
|
|
163
|
-
color: config.color
|
|
164
|
-
}],
|
|
165
|
-
children: config.shortLabel
|
|
166
|
-
})
|
|
167
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
168
|
-
style: styles.patternChipValue,
|
|
169
|
-
numberOfLines: 1,
|
|
170
|
-
children: pattern.value
|
|
171
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
|
|
172
|
-
size: 12,
|
|
173
|
-
color: _sharedUi.night.color.textTertiary,
|
|
174
|
-
style: styles.patternChipX
|
|
175
|
-
})]
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// Category type including "all"
|
|
180
|
-
|
|
181
|
-
// Config for "all" category
|
|
182
|
-
const ALL_CATEGORY_CONFIG = {
|
|
183
|
-
label: "All",
|
|
184
|
-
shortLabel: "All",
|
|
185
|
-
color: _sharedUi.night.color.textSecondary,
|
|
186
|
-
icon: _sharedUi.Box
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
// Category badge for horizontal scroll - always colored
|
|
190
|
-
function DetectedCategoryBadge({
|
|
191
|
-
filterType,
|
|
192
|
-
count,
|
|
193
|
-
isSelected,
|
|
194
|
-
onPress
|
|
195
|
-
}) {
|
|
196
|
-
// "all" has its own config
|
|
197
|
-
const config = filterType === "all" ? ALL_CATEGORY_CONFIG : getFilterConfig(filterType);
|
|
198
|
-
const handle = `buoy-highlight-detected-cat-${String(filterType).toLowerCase()}`;
|
|
199
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
200
|
-
testID: handle,
|
|
201
|
-
accessibilityRole: "button",
|
|
202
|
-
accessibilityLabel: `${config.label}, ${count}`,
|
|
203
|
-
style: [styles.categoryBadge, {
|
|
204
|
-
backgroundColor: config.color + "15",
|
|
205
|
-
borderColor: isSelected ? config.color : config.color + "40",
|
|
206
|
-
borderWidth: isSelected ? 2 : 1
|
|
207
|
-
}],
|
|
208
|
-
onPress: onPress,
|
|
209
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(config.icon, {
|
|
210
|
-
size: 12,
|
|
211
|
-
color: config.color
|
|
212
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
213
|
-
style: [styles.categoryBadgeText, {
|
|
214
|
-
color: config.color
|
|
215
|
-
}],
|
|
216
|
-
children: config.label
|
|
217
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
218
|
-
style: [styles.categoryBadgeCountBubble, {
|
|
219
|
-
backgroundColor: config.color + "25"
|
|
220
|
-
}],
|
|
221
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
222
|
-
testID: `${handle}-count`,
|
|
223
|
-
style: [styles.categoryBadgeCount, {
|
|
224
|
-
color: config.color
|
|
225
|
-
}],
|
|
226
|
-
children: count
|
|
227
|
-
})
|
|
228
|
-
})]
|
|
229
|
-
});
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
// Batch size presets for the slider
|
|
233
|
-
const BATCH_SIZE_PRESETS = [{
|
|
234
|
-
value: 20,
|
|
235
|
-
label: "20"
|
|
236
|
-
}, {
|
|
237
|
-
value: 50,
|
|
238
|
-
label: "50"
|
|
239
|
-
}, {
|
|
240
|
-
value: 100,
|
|
241
|
-
label: "100"
|
|
242
|
-
}, {
|
|
243
|
-
value: 150,
|
|
244
|
-
label: "150"
|
|
245
|
-
}, {
|
|
246
|
-
value: 250,
|
|
247
|
-
label: "250"
|
|
248
|
-
}, {
|
|
249
|
-
value: 500,
|
|
250
|
-
label: "500"
|
|
251
|
-
}];
|
|
252
|
-
|
|
253
|
-
// Debug log level presets
|
|
254
|
-
const DEBUG_LOG_LEVEL_PRESETS = [{
|
|
255
|
-
value: "off",
|
|
256
|
-
label: "Off",
|
|
257
|
-
description: "No debug logging"
|
|
258
|
-
}, {
|
|
259
|
-
value: "minimal",
|
|
260
|
-
label: "Minimal",
|
|
261
|
-
description: "Only hook value changes"
|
|
262
|
-
}, {
|
|
263
|
-
value: "verbose",
|
|
264
|
-
label: "Verbose",
|
|
265
|
-
description: "Component + cause + changes"
|
|
266
|
-
}, {
|
|
267
|
-
value: "all",
|
|
268
|
-
label: "All",
|
|
269
|
-
description: "Full fiber dump"
|
|
270
|
-
}];
|
|
271
|
-
function HighlightFilterView({
|
|
272
|
-
filters,
|
|
273
|
-
onFilterChange,
|
|
274
|
-
settings,
|
|
275
|
-
onSettingsChange,
|
|
276
|
-
availableProps,
|
|
277
|
-
activeTab
|
|
278
|
-
}) {
|
|
279
|
-
// UI state for add inputs
|
|
280
|
-
const [showIncludeTypePicker, setShowIncludeTypePicker] = (0, _react.useState)(false);
|
|
281
|
-
const [showExcludeTypePicker, setShowExcludeTypePicker] = (0, _react.useState)(false);
|
|
282
|
-
const [includeInputType, setIncludeInputType] = (0, _react.useState)(null);
|
|
283
|
-
const [excludeInputType, setExcludeInputType] = (0, _react.useState)(null);
|
|
284
|
-
|
|
285
|
-
// State for selected detected category (default to "all")
|
|
286
|
-
const [selectedCategory, setSelectedCategory] = (0, _react.useState)("all");
|
|
287
|
-
|
|
288
|
-
// State for action popup when tapping detected item
|
|
289
|
-
const [actionPopupItem, setActionPopupItem] = (0, _react.useState)(null);
|
|
290
|
-
|
|
291
|
-
// Get items for selected category with their filter type
|
|
292
|
-
const getItemsForCategory = category => {
|
|
293
|
-
switch (category) {
|
|
294
|
-
case "viewType":
|
|
295
|
-
return availableProps.viewTypes.map(v => ({
|
|
296
|
-
value: v,
|
|
297
|
-
type: "viewType"
|
|
298
|
-
}));
|
|
299
|
-
case "testID":
|
|
300
|
-
return availableProps.testIDs.map(v => ({
|
|
301
|
-
value: v,
|
|
302
|
-
type: "testID"
|
|
303
|
-
}));
|
|
304
|
-
case "nativeID":
|
|
305
|
-
return availableProps.nativeIDs.map(v => ({
|
|
306
|
-
value: v,
|
|
307
|
-
type: "nativeID"
|
|
308
|
-
}));
|
|
309
|
-
case "component":
|
|
310
|
-
return availableProps.componentNames.map(v => ({
|
|
311
|
-
value: v,
|
|
312
|
-
type: "component"
|
|
313
|
-
}));
|
|
314
|
-
case "accessibilityLabel":
|
|
315
|
-
return availableProps.accessibilityLabels.map(v => ({
|
|
316
|
-
value: v,
|
|
317
|
-
type: "accessibilityLabel"
|
|
318
|
-
}));
|
|
319
|
-
case "all":
|
|
320
|
-
default:
|
|
321
|
-
// Combine all items with their types
|
|
322
|
-
return [...availableProps.viewTypes.map(v => ({
|
|
323
|
-
value: v,
|
|
324
|
-
type: "viewType"
|
|
325
|
-
})), ...availableProps.testIDs.map(v => ({
|
|
326
|
-
value: v,
|
|
327
|
-
type: "testID"
|
|
328
|
-
})), ...availableProps.nativeIDs.map(v => ({
|
|
329
|
-
value: v,
|
|
330
|
-
type: "nativeID"
|
|
331
|
-
})), ...availableProps.componentNames.map(v => ({
|
|
332
|
-
value: v,
|
|
333
|
-
type: "component"
|
|
334
|
-
})), ...availableProps.accessibilityLabels.map(v => ({
|
|
335
|
-
value: v,
|
|
336
|
-
type: "accessibilityLabel"
|
|
337
|
-
}))];
|
|
338
|
-
}
|
|
339
|
-
};
|
|
340
|
-
const selectedItems = getItemsForCategory(selectedCategory);
|
|
341
|
-
const totalItemCount = availableProps.viewTypes.length + availableProps.testIDs.length + availableProps.nativeIDs.length + availableProps.componentNames.length + availableProps.accessibilityLabels.length;
|
|
342
|
-
|
|
343
|
-
// Add include pattern
|
|
344
|
-
const handleAddIncludePattern = (0, _react.useCallback)((type, value) => {
|
|
345
|
-
const newPatterns = [...filters.includePatterns, {
|
|
346
|
-
type,
|
|
347
|
-
value
|
|
348
|
-
}];
|
|
349
|
-
onFilterChange({
|
|
350
|
-
includePatterns: newPatterns
|
|
351
|
-
});
|
|
352
|
-
setIncludeInputType(null);
|
|
353
|
-
}, [filters.includePatterns, onFilterChange]);
|
|
354
|
-
|
|
355
|
-
// Add exclude pattern
|
|
356
|
-
const handleAddExcludePattern = (0, _react.useCallback)((type, value) => {
|
|
357
|
-
const newPatterns = [...filters.excludePatterns, {
|
|
358
|
-
type,
|
|
359
|
-
value
|
|
360
|
-
}];
|
|
361
|
-
onFilterChange({
|
|
362
|
-
excludePatterns: newPatterns
|
|
363
|
-
});
|
|
364
|
-
setExcludeInputType(null);
|
|
365
|
-
}, [filters.excludePatterns, onFilterChange]);
|
|
366
|
-
|
|
367
|
-
// Remove include pattern
|
|
368
|
-
const handleRemoveIncludePattern = (0, _react.useCallback)(index => {
|
|
369
|
-
const newPatterns = filters.includePatterns.filter((_, i) => i !== index);
|
|
370
|
-
onFilterChange({
|
|
371
|
-
includePatterns: newPatterns
|
|
372
|
-
});
|
|
373
|
-
}, [filters.includePatterns, onFilterChange]);
|
|
374
|
-
|
|
375
|
-
// Remove exclude pattern
|
|
376
|
-
const handleRemoveExcludePattern = (0, _react.useCallback)(index => {
|
|
377
|
-
const newPatterns = filters.excludePatterns.filter((_, i) => i !== index);
|
|
378
|
-
onFilterChange({
|
|
379
|
-
excludePatterns: newPatterns
|
|
380
|
-
});
|
|
381
|
-
}, [filters.excludePatterns, onFilterChange]);
|
|
382
|
-
|
|
383
|
-
// Show action popup for detected item
|
|
384
|
-
const handleDetectedItemPress = (0, _react.useCallback)((type, value) => {
|
|
385
|
-
setActionPopupItem({
|
|
386
|
-
type,
|
|
387
|
-
value
|
|
388
|
-
});
|
|
389
|
-
}, []);
|
|
390
|
-
|
|
391
|
-
// Add to include from popup
|
|
392
|
-
const handlePopupInclude = (0, _react.useCallback)(() => {
|
|
393
|
-
if (actionPopupItem) {
|
|
394
|
-
handleAddIncludePattern(actionPopupItem.type, actionPopupItem.value);
|
|
395
|
-
setActionPopupItem(null);
|
|
396
|
-
}
|
|
397
|
-
}, [actionPopupItem, handleAddIncludePattern]);
|
|
398
|
-
|
|
399
|
-
// Add to exclude from popup
|
|
400
|
-
const handlePopupExclude = (0, _react.useCallback)(() => {
|
|
401
|
-
if (actionPopupItem) {
|
|
402
|
-
handleAddExcludePattern(actionPopupItem.type, actionPopupItem.value);
|
|
403
|
-
setActionPopupItem(null);
|
|
404
|
-
}
|
|
405
|
-
}, [actionPopupItem, handleAddExcludePattern]);
|
|
406
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
407
|
-
style: styles.container,
|
|
408
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
|
|
409
|
-
nativeID: "__rn_buoy__filter-view",
|
|
410
|
-
testID: "buoy-highlight-filter-scroll",
|
|
411
|
-
style: styles.scrollView,
|
|
412
|
-
contentContainerStyle: styles.scrollContent,
|
|
413
|
-
showsVerticalScrollIndicator: false,
|
|
414
|
-
children: activeTab === "filters" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
415
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
416
|
-
style: styles.section,
|
|
417
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
|
|
418
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
|
|
419
|
-
icon: _sharedUi.Eye,
|
|
420
|
-
color: _sharedUi.night.color.accent,
|
|
421
|
-
size: 12
|
|
422
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
|
|
423
|
-
children: "INCLUDE ONLY"
|
|
424
|
-
}), filters.includePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
|
|
425
|
-
testID: "buoy-highlight-include-count",
|
|
426
|
-
count: filters.includePatterns.length,
|
|
427
|
-
color: _sharedUi.night.color.accent
|
|
428
|
-
})]
|
|
429
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
430
|
-
style: styles.sectionDescription,
|
|
431
|
-
children: "Show only components matching these patterns. If any are set, components must match at least one."
|
|
432
|
-
}), filters.includePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
433
|
-
style: styles.patternChips,
|
|
434
|
-
children: filters.includePatterns.map((pattern, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternChip, {
|
|
435
|
-
mode: "include",
|
|
436
|
-
pattern: pattern,
|
|
437
|
-
onRemove: () => handleRemoveIncludePattern(index)
|
|
438
|
-
}, `${pattern.type}-${pattern.value}-${index}`))
|
|
439
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
440
|
-
style: styles.addPatternRow,
|
|
441
|
-
children: showIncludeTypePicker ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TypePicker, {
|
|
442
|
-
mode: "include",
|
|
443
|
-
onSelect: type => {
|
|
444
|
-
setShowIncludeTypePicker(false);
|
|
445
|
-
setIncludeInputType(type);
|
|
446
|
-
},
|
|
447
|
-
onCancel: () => setShowIncludeTypePicker(false)
|
|
448
|
-
}) : includeInputType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternInput, {
|
|
449
|
-
mode: "include",
|
|
450
|
-
type: includeInputType,
|
|
451
|
-
onSubmit: value => handleAddIncludePattern(includeInputType, value),
|
|
452
|
-
onCancel: () => setIncludeInputType(null)
|
|
453
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
454
|
-
testID: "buoy-highlight-include-add",
|
|
455
|
-
accessibilityRole: "button",
|
|
456
|
-
accessibilityLabel: "Add include pattern",
|
|
457
|
-
style: [styles.addButton, {
|
|
458
|
-
borderColor: _sharedUi.night.color.accentBorderStrong
|
|
459
|
-
}],
|
|
460
|
-
onPress: () => setShowIncludeTypePicker(true),
|
|
461
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Plus, {
|
|
462
|
-
size: 14,
|
|
463
|
-
color: _sharedUi.night.color.accent
|
|
464
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
465
|
-
style: [styles.addButtonText, {
|
|
466
|
-
color: _sharedUi.night.color.accent
|
|
467
|
-
}],
|
|
468
|
-
children: "Add include pattern"
|
|
469
|
-
})]
|
|
470
|
-
})
|
|
471
|
-
})]
|
|
472
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
473
|
-
style: styles.section,
|
|
474
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
|
|
475
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
|
|
476
|
-
icon: _sharedUi.Filter,
|
|
477
|
-
color: _sharedUi.night.color.accent,
|
|
478
|
-
size: 12
|
|
479
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
|
|
480
|
-
children: "EXCLUDE"
|
|
481
|
-
}), filters.excludePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
|
|
482
|
-
testID: "buoy-highlight-exclude-count",
|
|
483
|
-
count: filters.excludePatterns.length,
|
|
484
|
-
color: _sharedUi.night.color.accent
|
|
485
|
-
})]
|
|
486
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
487
|
-
style: styles.sectionDescription,
|
|
488
|
-
children: "Hide components matching these patterns from the list."
|
|
489
|
-
}), filters.excludePatterns.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
490
|
-
style: styles.patternChips,
|
|
491
|
-
children: filters.excludePatterns.map((pattern, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternChip, {
|
|
492
|
-
mode: "exclude",
|
|
493
|
-
pattern: pattern,
|
|
494
|
-
onRemove: () => handleRemoveExcludePattern(index)
|
|
495
|
-
}, `${pattern.type}-${pattern.value}-${index}`))
|
|
496
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
497
|
-
style: styles.addPatternRow,
|
|
498
|
-
children: showExcludeTypePicker ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TypePicker, {
|
|
499
|
-
mode: "exclude",
|
|
500
|
-
onSelect: type => {
|
|
501
|
-
setShowExcludeTypePicker(false);
|
|
502
|
-
setExcludeInputType(type);
|
|
503
|
-
},
|
|
504
|
-
onCancel: () => setShowExcludeTypePicker(false)
|
|
505
|
-
}) : excludeInputType ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternInput, {
|
|
506
|
-
mode: "exclude",
|
|
507
|
-
type: excludeInputType,
|
|
508
|
-
onSubmit: value => handleAddExcludePattern(excludeInputType, value),
|
|
509
|
-
onCancel: () => setExcludeInputType(null)
|
|
510
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
511
|
-
testID: "buoy-highlight-exclude-add",
|
|
512
|
-
accessibilityRole: "button",
|
|
513
|
-
accessibilityLabel: "Add exclude pattern",
|
|
514
|
-
style: [styles.addButton, {
|
|
515
|
-
borderColor: _sharedUi.night.color.accentBorderStrong
|
|
516
|
-
}],
|
|
517
|
-
onPress: () => setShowExcludeTypePicker(true),
|
|
518
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Plus, {
|
|
519
|
-
size: 14,
|
|
520
|
-
color: _sharedUi.night.color.accent
|
|
521
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
522
|
-
style: [styles.addButtonText, {
|
|
523
|
-
color: _sharedUi.night.color.accent
|
|
524
|
-
}],
|
|
525
|
-
children: "Add exclude pattern"
|
|
526
|
-
})]
|
|
527
|
-
})
|
|
528
|
-
})]
|
|
529
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
530
|
-
style: styles.section,
|
|
531
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
|
|
532
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
|
|
533
|
-
icon: _sharedUi.Hash,
|
|
534
|
-
color: _sharedUi.night.color.warning,
|
|
535
|
-
size: 12
|
|
536
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
|
|
537
|
-
children: "RENDER COUNT RANGE"
|
|
538
|
-
}), (filters.minRenderCount !== undefined || filters.maxRenderCount !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge, {
|
|
539
|
-
count: 1,
|
|
540
|
-
color: _sharedUi.night.color.warning
|
|
541
|
-
})]
|
|
542
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
543
|
-
style: styles.sectionDescription,
|
|
544
|
-
children: "Show only components with render count in a specific range."
|
|
545
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
546
|
-
nativeID: "__rn_buoy__render-count-range",
|
|
547
|
-
testID: "buoy-highlight-range",
|
|
548
|
-
style: styles.renderCountRangeContainer,
|
|
549
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
550
|
-
style: styles.renderCountInputRow,
|
|
551
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
552
|
-
style: styles.renderCountInputGroup,
|
|
553
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
554
|
-
style: styles.renderCountLabel,
|
|
555
|
-
children: "Min"
|
|
556
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
557
|
-
value: filters.minRenderCount !== undefined ? String(filters.minRenderCount) : "",
|
|
558
|
-
onChangeText: text => {
|
|
559
|
-
const num = parseInt(text, 10);
|
|
560
|
-
if (text === "" || text === undefined) {
|
|
561
|
-
onFilterChange({
|
|
562
|
-
minRenderCount: undefined
|
|
563
|
-
});
|
|
564
|
-
} else if (!isNaN(num) && num >= 0) {
|
|
565
|
-
onFilterChange({
|
|
566
|
-
minRenderCount: num
|
|
567
|
-
});
|
|
568
|
-
}
|
|
569
|
-
},
|
|
570
|
-
testID: "buoy-highlight-range-min",
|
|
571
|
-
placeholder: "0",
|
|
572
|
-
placeholderTextColor: _sharedUi.night.color.placeholder,
|
|
573
|
-
style: styles.renderCountInput,
|
|
574
|
-
keyboardType: "number-pad",
|
|
575
|
-
returnKeyType: "done"
|
|
576
|
-
})]
|
|
577
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
578
|
-
style: styles.renderCountSeparator,
|
|
579
|
-
children: "to"
|
|
580
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
581
|
-
style: styles.renderCountInputGroup,
|
|
582
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
583
|
-
style: styles.renderCountLabel,
|
|
584
|
-
children: "Max"
|
|
585
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
586
|
-
value: filters.maxRenderCount !== undefined ? String(filters.maxRenderCount) : "",
|
|
587
|
-
onChangeText: text => {
|
|
588
|
-
const num = parseInt(text, 10);
|
|
589
|
-
if (text === "" || text === undefined) {
|
|
590
|
-
onFilterChange({
|
|
591
|
-
maxRenderCount: undefined
|
|
592
|
-
});
|
|
593
|
-
} else if (!isNaN(num) && num >= 0) {
|
|
594
|
-
onFilterChange({
|
|
595
|
-
maxRenderCount: num
|
|
596
|
-
});
|
|
597
|
-
}
|
|
598
|
-
},
|
|
599
|
-
testID: "buoy-highlight-range-max",
|
|
600
|
-
placeholder: "\u221E",
|
|
601
|
-
placeholderTextColor: _sharedUi.night.color.placeholder,
|
|
602
|
-
style: styles.renderCountInput,
|
|
603
|
-
keyboardType: "number-pad",
|
|
604
|
-
returnKeyType: "done"
|
|
605
|
-
})]
|
|
606
|
-
})]
|
|
607
|
-
}), (filters.minRenderCount !== undefined || filters.maxRenderCount !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
608
|
-
testID: "buoy-highlight-range-clear",
|
|
609
|
-
accessibilityRole: "button",
|
|
610
|
-
accessibilityLabel: "Clear range",
|
|
611
|
-
style: styles.clearRangeButton,
|
|
612
|
-
onPress: () => onFilterChange({
|
|
613
|
-
minRenderCount: undefined,
|
|
614
|
-
maxRenderCount: undefined
|
|
615
|
-
}),
|
|
616
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
|
|
617
|
-
size: 12,
|
|
618
|
-
color: _sharedUi.night.color.warning
|
|
619
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
620
|
-
style: styles.clearRangeButtonText,
|
|
621
|
-
children: "Clear Range"
|
|
622
|
-
})]
|
|
623
|
-
})]
|
|
624
|
-
})]
|
|
625
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
626
|
-
style: styles.section,
|
|
627
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
|
|
628
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
|
|
629
|
-
icon: _sharedUi.Box,
|
|
630
|
-
color: _sharedUi.night.color.textSecondary,
|
|
631
|
-
size: 12
|
|
632
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
|
|
633
|
-
children: "DETECTED ITEMS"
|
|
634
|
-
})]
|
|
635
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
636
|
-
style: styles.sectionDescription,
|
|
637
|
-
children: "Tap an item to quickly add it as an exclude pattern."
|
|
638
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
|
|
639
|
-
horizontal: true,
|
|
640
|
-
showsHorizontalScrollIndicator: false,
|
|
641
|
-
style: styles.categoryBadgeScroll,
|
|
642
|
-
contentContainerStyle: styles.categoryBadgeScrollContent,
|
|
643
|
-
children: [totalItemCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectedCategoryBadge, {
|
|
644
|
-
filterType: "all",
|
|
645
|
-
count: totalItemCount,
|
|
646
|
-
isSelected: selectedCategory === "all",
|
|
647
|
-
onPress: () => setSelectedCategory("all")
|
|
648
|
-
}), availableProps.viewTypes.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectedCategoryBadge, {
|
|
649
|
-
filterType: "viewType",
|
|
650
|
-
count: availableProps.viewTypes.length,
|
|
651
|
-
isSelected: selectedCategory === "viewType",
|
|
652
|
-
onPress: () => setSelectedCategory("viewType")
|
|
653
|
-
}), availableProps.testIDs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectedCategoryBadge, {
|
|
654
|
-
filterType: "testID",
|
|
655
|
-
count: availableProps.testIDs.length,
|
|
656
|
-
isSelected: selectedCategory === "testID",
|
|
657
|
-
onPress: () => setSelectedCategory("testID")
|
|
658
|
-
}), availableProps.nativeIDs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectedCategoryBadge, {
|
|
659
|
-
filterType: "nativeID",
|
|
660
|
-
count: availableProps.nativeIDs.length,
|
|
661
|
-
isSelected: selectedCategory === "nativeID",
|
|
662
|
-
onPress: () => setSelectedCategory("nativeID")
|
|
663
|
-
}), availableProps.componentNames.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectedCategoryBadge, {
|
|
664
|
-
filterType: "component",
|
|
665
|
-
count: availableProps.componentNames.length,
|
|
666
|
-
isSelected: selectedCategory === "component",
|
|
667
|
-
onPress: () => setSelectedCategory("component")
|
|
668
|
-
}), availableProps.accessibilityLabels.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectedCategoryBadge, {
|
|
669
|
-
filterType: "accessibilityLabel",
|
|
670
|
-
count: availableProps.accessibilityLabels.length,
|
|
671
|
-
isSelected: selectedCategory === "accessibilityLabel",
|
|
672
|
-
onPress: () => setSelectedCategory("accessibilityLabel")
|
|
673
|
-
})]
|
|
674
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
675
|
-
nativeID: "__rn_buoy__detected-items",
|
|
676
|
-
testID: "buoy-highlight-detected",
|
|
677
|
-
style: styles.detectedItemsContainer,
|
|
678
|
-
children: selectedItems.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
|
|
679
|
-
testID: "buoy-highlight-detected-scroll",
|
|
680
|
-
style: styles.detectedItemsScroll,
|
|
681
|
-
contentContainerStyle: styles.detectedItems,
|
|
682
|
-
nestedScrollEnabled: true,
|
|
683
|
-
showsVerticalScrollIndicator: true,
|
|
684
|
-
children: selectedItems.map(item => {
|
|
685
|
-
const itemConfig = getFilterConfig(item.type);
|
|
686
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
687
|
-
testID: (0, _testIDs.detectedItemTestID)(item.type, item.value),
|
|
688
|
-
accessibilityRole: "button",
|
|
689
|
-
accessibilityLabel: `${itemConfig.label} ${item.value}`,
|
|
690
|
-
style: [styles.detectedItem, {
|
|
691
|
-
borderColor: itemConfig.color + "40"
|
|
692
|
-
}],
|
|
693
|
-
onPress: () => handleDetectedItemPress(item.type, item.value),
|
|
694
|
-
children: selectedCategory === "all" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
|
|
695
|
-
type: item.type,
|
|
696
|
-
value: item.value,
|
|
697
|
-
compact: true,
|
|
698
|
-
shortLabel: true
|
|
699
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
700
|
-
style: styles.detectedItemText,
|
|
701
|
-
numberOfLines: 1,
|
|
702
|
-
children: item.value
|
|
703
|
-
})
|
|
704
|
-
}, `${item.type}-${item.value}`);
|
|
705
|
-
})
|
|
706
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
707
|
-
testID: "buoy-highlight-detected-empty",
|
|
708
|
-
style: styles.emptyText,
|
|
709
|
-
children: "No items detected yet. Start tracking to see components here."
|
|
710
|
-
})
|
|
711
|
-
})]
|
|
712
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
|
|
713
|
-
visible: actionPopupItem !== null,
|
|
714
|
-
transparent: true,
|
|
715
|
-
animationType: "fade",
|
|
716
|
-
onRequestClose: () => setActionPopupItem(null),
|
|
717
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
718
|
-
accessible: false,
|
|
719
|
-
testID: "buoy-highlight-detected-popup-backdrop",
|
|
720
|
-
style: styles.modalOverlay,
|
|
721
|
-
onPress: () => setActionPopupItem(null),
|
|
722
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
723
|
-
accessible: false,
|
|
724
|
-
testID: "buoy-highlight-detected-popup",
|
|
725
|
-
style: styles.actionPopup,
|
|
726
|
-
children: actionPopupItem && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
727
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
728
|
-
style: styles.actionPopupHeader,
|
|
729
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge, {
|
|
730
|
-
type: actionPopupItem.type,
|
|
731
|
-
value: actionPopupItem.value,
|
|
732
|
-
compact: true,
|
|
733
|
-
shortLabel: true
|
|
734
|
-
})
|
|
735
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
736
|
-
style: styles.actionPopupButtons,
|
|
737
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
738
|
-
testID: "buoy-highlight-detected-popup-include",
|
|
739
|
-
accessibilityRole: "button",
|
|
740
|
-
accessibilityLabel: "Include only",
|
|
741
|
-
style: [styles.actionPopupButton, styles.actionPopupInclude],
|
|
742
|
-
onPress: handlePopupInclude,
|
|
743
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
|
|
744
|
-
size: 16,
|
|
745
|
-
color: _sharedUi.night.color.accent
|
|
746
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
747
|
-
style: [styles.actionPopupButtonText, {
|
|
748
|
-
color: _sharedUi.night.color.accent
|
|
749
|
-
}],
|
|
750
|
-
children: "Include Only"
|
|
751
|
-
})]
|
|
752
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
753
|
-
testID: "buoy-highlight-detected-popup-exclude",
|
|
754
|
-
accessibilityRole: "button",
|
|
755
|
-
accessibilityLabel: "Exclude",
|
|
756
|
-
style: [styles.actionPopupButton, styles.actionPopupExclude],
|
|
757
|
-
onPress: handlePopupExclude,
|
|
758
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
|
|
759
|
-
size: 16,
|
|
760
|
-
color: _sharedUi.night.color.accent
|
|
761
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
762
|
-
style: [styles.actionPopupButtonText, {
|
|
763
|
-
color: _sharedUi.night.color.accent
|
|
764
|
-
}],
|
|
765
|
-
children: "Exclude"
|
|
766
|
-
})]
|
|
767
|
-
})]
|
|
768
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
769
|
-
testID: "buoy-highlight-detected-popup-cancel",
|
|
770
|
-
accessibilityRole: "button",
|
|
771
|
-
accessibilityLabel: "Cancel",
|
|
772
|
-
style: styles.actionPopupCancel,
|
|
773
|
-
onPress: () => setActionPopupItem(null),
|
|
774
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
775
|
-
style: styles.actionPopupCancelText,
|
|
776
|
-
children: "Cancel"
|
|
777
|
-
})
|
|
778
|
-
})]
|
|
779
|
-
})
|
|
780
|
-
})
|
|
781
|
-
})
|
|
782
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
783
|
-
style: styles.section,
|
|
784
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
|
|
785
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
|
|
786
|
-
icon: _sharedUi.Filter,
|
|
787
|
-
color: _sharedUi.night.color.textTertiary,
|
|
788
|
-
size: 12
|
|
789
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
|
|
790
|
-
children: "HOW FILTERS WORK"
|
|
791
|
-
})]
|
|
792
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
793
|
-
style: styles.howItWorks,
|
|
794
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
795
|
-
style: styles.howItWorksText,
|
|
796
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
797
|
-
style: styles.howItWorksBold,
|
|
798
|
-
children: "Any:"
|
|
799
|
-
}), " Matches against all fields", "\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
800
|
-
style: styles.howItWorksBold,
|
|
801
|
-
children: "ViewType:"
|
|
802
|
-
}), " Native component class (RCTView, RCTText)", "\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
803
|
-
style: styles.howItWorksBold,
|
|
804
|
-
children: "testID:"
|
|
805
|
-
}), " Component testID prop", "\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
806
|
-
style: styles.howItWorksBold,
|
|
807
|
-
children: "Component:"
|
|
808
|
-
}), " React component name from fiber"]
|
|
809
|
-
})
|
|
810
|
-
})]
|
|
811
|
-
})]
|
|
812
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
813
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
814
|
-
style: styles.section,
|
|
815
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
|
|
816
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
|
|
817
|
-
icon: _sharedUi.Settings,
|
|
818
|
-
color: _sharedUi.night.color.textTertiary,
|
|
819
|
-
size: 12
|
|
820
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
|
|
821
|
-
children: "SETTINGS"
|
|
822
|
-
})]
|
|
823
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
824
|
-
style: styles.settingsSection,
|
|
825
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
826
|
-
style: styles.settingItem,
|
|
827
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
828
|
-
style: styles.settingHeader,
|
|
829
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
830
|
-
style: styles.settingLabel,
|
|
831
|
-
children: "Show Render Count"
|
|
832
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
|
|
833
|
-
testID: (0, _testIDs.settingTestID)("showRenderCount"),
|
|
834
|
-
value: settings.showRenderCount,
|
|
835
|
-
onValueChange: value => {
|
|
836
|
-
onSettingsChange({
|
|
837
|
-
showRenderCount: value
|
|
838
|
-
});
|
|
839
|
-
// If disabling render count, also disable cause tracking
|
|
840
|
-
if (!value && settings.trackRenderCauses) {
|
|
841
|
-
onSettingsChange({
|
|
842
|
-
trackRenderCauses: false
|
|
843
|
-
});
|
|
844
|
-
}
|
|
845
|
-
},
|
|
846
|
-
trackColor: {
|
|
847
|
-
false: _sharedUi.night.color.surfaceElevated,
|
|
848
|
-
true: _sharedUi.night.color.accent + "80"
|
|
849
|
-
},
|
|
850
|
-
thumbColor: settings.showRenderCount ? _sharedUi.night.color.accent : _sharedUi.night.color.knob
|
|
851
|
-
})]
|
|
852
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
853
|
-
style: styles.settingDescription,
|
|
854
|
-
children: "Display render count badge on highlights. Disabling improves performance by skipping count tracking."
|
|
855
|
-
})]
|
|
856
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
857
|
-
style: [styles.settingItem, styles.settingItemSpaced],
|
|
858
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
859
|
-
style: styles.settingHeader,
|
|
860
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
861
|
-
style: [styles.settingLabel, !settings.showRenderCount && styles.settingLabelDisabled],
|
|
862
|
-
children: "Track Render Causes"
|
|
863
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
|
|
864
|
-
testID: (0, _testIDs.settingTestID)("trackRenderCauses"),
|
|
865
|
-
value: settings.trackRenderCauses,
|
|
866
|
-
onValueChange: value => onSettingsChange({
|
|
867
|
-
trackRenderCauses: value
|
|
868
|
-
}),
|
|
869
|
-
trackColor: {
|
|
870
|
-
false: _sharedUi.night.color.surfaceElevated,
|
|
871
|
-
true: _sharedUi.night.color.warning + "80"
|
|
872
|
-
},
|
|
873
|
-
thumbColor: settings.trackRenderCauses ? _sharedUi.night.color.warning : _sharedUi.night.color.knob,
|
|
874
|
-
disabled: !settings.showRenderCount
|
|
875
|
-
})]
|
|
876
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
877
|
-
style: styles.settingDescription,
|
|
878
|
-
children: ["Detect WHY components render (props, hooks, parent re-render).", !settings.showRenderCount && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
879
|
-
style: styles.settingWarning,
|
|
880
|
-
children: ["\n", "Requires \"Show Render Count\" to be enabled."]
|
|
881
|
-
})]
|
|
882
|
-
})]
|
|
883
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
884
|
-
style: [styles.settingItem, styles.settingItemSpaced],
|
|
885
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
886
|
-
style: styles.settingHeader,
|
|
887
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
888
|
-
style: [styles.settingLabel, !settings.trackRenderCauses && styles.settingLabelDisabled],
|
|
889
|
-
children: "Enable Render History"
|
|
890
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
|
|
891
|
-
testID: (0, _testIDs.settingTestID)("enableRenderHistory"),
|
|
892
|
-
value: settings.enableRenderHistory,
|
|
893
|
-
onValueChange: value => onSettingsChange({
|
|
894
|
-
enableRenderHistory: value
|
|
895
|
-
}),
|
|
896
|
-
trackColor: {
|
|
897
|
-
false: _sharedUi.night.color.surfaceElevated,
|
|
898
|
-
true: _sharedUi.night.color.accent + "80"
|
|
899
|
-
},
|
|
900
|
-
thumbColor: settings.enableRenderHistory ? _sharedUi.night.color.accent : _sharedUi.night.color.knob,
|
|
901
|
-
disabled: !settings.trackRenderCauses
|
|
902
|
-
})]
|
|
903
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
904
|
-
style: styles.settingDescription,
|
|
905
|
-
children: ["Store render events for each component to view in the History tab.", !settings.trackRenderCauses && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
906
|
-
style: styles.settingWarning,
|
|
907
|
-
children: ["\n", "Requires \"Track Render Causes\" to be enabled."]
|
|
908
|
-
})]
|
|
909
|
-
})]
|
|
910
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
911
|
-
style: [styles.settingItem, styles.settingItemSpaced],
|
|
912
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
913
|
-
style: styles.settingHeader,
|
|
914
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
915
|
-
style: styles.settingLabel,
|
|
916
|
-
children: "Debug Log Level"
|
|
917
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
918
|
-
style: styles.settingValue,
|
|
919
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
920
|
-
testID: "buoy-highlight-setting-debugLogLevel-value",
|
|
921
|
-
style: [styles.settingValueText, settings.debugLogLevel !== "off" && {
|
|
922
|
-
color: _sharedUi.night.color.warning
|
|
923
|
-
}],
|
|
924
|
-
children: DEBUG_LOG_LEVEL_PRESETS.find(p => p.value === settings.debugLogLevel)?.label || "Off"
|
|
925
|
-
})
|
|
926
|
-
})]
|
|
927
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
928
|
-
style: styles.settingDescription,
|
|
929
|
-
children: "Control console logging verbosity for render cause detection."
|
|
930
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
931
|
-
style: styles.batchSizePresets,
|
|
932
|
-
children: DEBUG_LOG_LEVEL_PRESETS.map(preset => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
933
|
-
style: [styles.batchSizePreset, settings.debugLogLevel === preset.value && styles.batchSizePresetActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
|
|
934
|
-
backgroundColor: _sharedUi.night.color.warningSoft,
|
|
935
|
-
borderColor: _sharedUi.night.color.warning
|
|
936
|
-
}],
|
|
937
|
-
onPress: () => onSettingsChange({
|
|
938
|
-
debugLogLevel: preset.value
|
|
939
|
-
}),
|
|
940
|
-
testID: `buoy-highlight-preset-log-${preset.value}`,
|
|
941
|
-
accessibilityRole: "button",
|
|
942
|
-
accessibilityLabel: `Debug log level ${preset.label}`,
|
|
943
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
944
|
-
style: [styles.batchSizePresetText, settings.debugLogLevel === preset.value && styles.batchSizePresetTextActive, preset.value !== "off" && settings.debugLogLevel === preset.value && {
|
|
945
|
-
color: _sharedUi.night.color.warning
|
|
946
|
-
}],
|
|
947
|
-
children: preset.label
|
|
948
|
-
})
|
|
949
|
-
}, preset.value))
|
|
950
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
951
|
-
style: styles.settingDescriptionMuted,
|
|
952
|
-
children: [DEBUG_LOG_LEVEL_PRESETS.find(p => p.value === settings.debugLogLevel)?.description, settings.debugLogLevel !== "off" && " • Check Metro console for logs"]
|
|
953
|
-
})]
|
|
954
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
955
|
-
style: [styles.settingItem, styles.settingItemSpaced],
|
|
956
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
957
|
-
style: styles.settingHeader,
|
|
958
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
959
|
-
style: styles.settingLabel,
|
|
960
|
-
children: "Batch Size"
|
|
961
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
962
|
-
style: styles.settingValue,
|
|
963
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
964
|
-
testID: "buoy-highlight-setting-batchSize-value",
|
|
965
|
-
style: styles.settingValueText,
|
|
966
|
-
children: settings.batchSize
|
|
967
|
-
})
|
|
968
|
-
})]
|
|
969
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
970
|
-
style: styles.settingDescription,
|
|
971
|
-
children: "Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."
|
|
972
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
973
|
-
style: styles.batchSizePresets,
|
|
974
|
-
children: BATCH_SIZE_PRESETS.map(preset => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
975
|
-
style: [styles.batchSizePreset, settings.batchSize === preset.value && styles.batchSizePresetActive],
|
|
976
|
-
onPress: () => onSettingsChange({
|
|
977
|
-
batchSize: preset.value
|
|
978
|
-
}),
|
|
979
|
-
testID: `buoy-highlight-preset-batch-${preset.value}`,
|
|
980
|
-
accessibilityRole: "button",
|
|
981
|
-
accessibilityLabel: `Batch size ${preset.label}`,
|
|
982
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
983
|
-
style: [styles.batchSizePresetText, settings.batchSize === preset.value && styles.batchSizePresetTextActive],
|
|
984
|
-
children: preset.label
|
|
985
|
-
})
|
|
986
|
-
}, preset.value))
|
|
987
|
-
})]
|
|
988
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
989
|
-
style: [styles.settingItem, styles.settingItemSpaced],
|
|
990
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
991
|
-
style: styles.settingHeader,
|
|
992
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
993
|
-
style: styles.settingLabel,
|
|
994
|
-
children: "Show host views"
|
|
995
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
|
|
996
|
-
testID: (0, _testIDs.settingTestID)("showHostViews"),
|
|
997
|
-
value: !!settings.showHostViews,
|
|
998
|
-
onValueChange: value => onSettingsChange({
|
|
999
|
-
showHostViews: value
|
|
1000
|
-
}),
|
|
1001
|
-
trackColor: {
|
|
1002
|
-
false: _sharedUi.night.color.surfaceElevated,
|
|
1003
|
-
true: _sharedUi.night.color.accent + "80"
|
|
1004
|
-
},
|
|
1005
|
-
thumbColor: settings.showHostViews ? _sharedUi.night.color.accent : _sharedUi.night.color.knob
|
|
1006
|
-
})]
|
|
1007
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
1008
|
-
style: styles.settingDescription,
|
|
1009
|
-
children: "Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."
|
|
1010
|
-
})]
|
|
1011
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
1012
|
-
style: [styles.settingItem, styles.settingItemSpaced],
|
|
1013
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
1014
|
-
style: styles.settingHeader,
|
|
1015
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
1016
|
-
style: styles.settingLabel,
|
|
1017
|
-
children: "Highlight Dev Tools"
|
|
1018
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
|
|
1019
|
-
testID: (0, _testIDs.settingTestID)("excludeDevTools"),
|
|
1020
|
-
value: !settings.excludeDevTools,
|
|
1021
|
-
onValueChange: value => onSettingsChange({
|
|
1022
|
-
excludeDevTools: !value
|
|
1023
|
-
}),
|
|
1024
|
-
trackColor: {
|
|
1025
|
-
false: _sharedUi.night.color.surfaceElevated,
|
|
1026
|
-
true: _sharedUi.night.color.accent + "80"
|
|
1027
|
-
},
|
|
1028
|
-
thumbColor: !settings.excludeDevTools ? _sharedUi.night.color.accent : _sharedUi.night.color.knob
|
|
1029
|
-
})]
|
|
1030
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
1031
|
-
style: styles.settingDescription,
|
|
1032
|
-
children: ["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.", !settings.excludeDevTools && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
|
|
1033
|
-
style: styles.settingWarning,
|
|
1034
|
-
children: ["\n", "The highlight overlay is always excluded to prevent infinite loops."]
|
|
1035
|
-
})]
|
|
1036
|
-
})]
|
|
1037
|
-
})]
|
|
1038
|
-
})]
|
|
1039
|
-
})
|
|
1040
|
-
})
|
|
1041
|
-
})
|
|
1042
|
-
});
|
|
1043
|
-
}
|
|
1044
|
-
const styles = _reactNative.StyleSheet.create({
|
|
1045
|
-
container: {
|
|
1046
|
-
flex: 1,
|
|
1047
|
-
// Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
|
|
1048
|
-
backgroundColor: "transparent"
|
|
1049
|
-
},
|
|
1050
|
-
scrollView: {
|
|
1051
|
-
flex: 1
|
|
1052
|
-
},
|
|
1053
|
-
scrollContent: {
|
|
1054
|
-
paddingHorizontal: 16,
|
|
1055
|
-
paddingTop: 12,
|
|
1056
|
-
paddingBottom: 32
|
|
1057
|
-
},
|
|
1058
|
-
section: {
|
|
1059
|
-
backgroundColor: _sharedUi.night.color.surface,
|
|
1060
|
-
borderRadius: 8,
|
|
1061
|
-
borderWidth: 1,
|
|
1062
|
-
borderColor: _sharedUi.night.color.border,
|
|
1063
|
-
marginBottom: 12,
|
|
1064
|
-
overflow: "hidden"
|
|
1065
|
-
},
|
|
1066
|
-
sectionDescription: {
|
|
1067
|
-
fontSize: 11,
|
|
1068
|
-
color: _sharedUi.night.color.textSecondary,
|
|
1069
|
-
paddingHorizontal: 16,
|
|
1070
|
-
paddingTop: 8,
|
|
1071
|
-
lineHeight: 16
|
|
1072
|
-
},
|
|
1073
|
-
patternChips: {
|
|
1074
|
-
flexDirection: "row",
|
|
1075
|
-
flexWrap: "wrap",
|
|
1076
|
-
gap: 8,
|
|
1077
|
-
paddingHorizontal: 16,
|
|
1078
|
-
paddingTop: 12
|
|
1079
|
-
},
|
|
1080
|
-
patternChip: {
|
|
1081
|
-
flexDirection: "row",
|
|
1082
|
-
alignItems: "center",
|
|
1083
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
1084
|
-
borderRadius: 6,
|
|
1085
|
-
borderWidth: 1,
|
|
1086
|
-
paddingVertical: 4,
|
|
1087
|
-
paddingLeft: 4,
|
|
1088
|
-
paddingRight: 6,
|
|
1089
|
-
maxWidth: "100%",
|
|
1090
|
-
gap: 4
|
|
1091
|
-
},
|
|
1092
|
-
patternChipBadge: {
|
|
1093
|
-
paddingVertical: 2,
|
|
1094
|
-
paddingHorizontal: 5,
|
|
1095
|
-
borderRadius: 4
|
|
1096
|
-
},
|
|
1097
|
-
patternChipBadgeText: {
|
|
1098
|
-
fontSize: 9,
|
|
1099
|
-
fontWeight: "700"
|
|
1100
|
-
},
|
|
1101
|
-
patternChipValue: {
|
|
1102
|
-
fontSize: 11,
|
|
1103
|
-
color: _sharedUi.night.color.text,
|
|
1104
|
-
fontFamily: _sharedUi.monoFont,
|
|
1105
|
-
flexShrink: 1
|
|
1106
|
-
},
|
|
1107
|
-
patternChipX: {
|
|
1108
|
-
marginLeft: 2
|
|
1109
|
-
},
|
|
1110
|
-
addPatternRow: {
|
|
1111
|
-
paddingHorizontal: 16,
|
|
1112
|
-
paddingTop: 12,
|
|
1113
|
-
paddingBottom: 16
|
|
1114
|
-
},
|
|
1115
|
-
addButton: {
|
|
1116
|
-
flexDirection: "row",
|
|
1117
|
-
alignItems: "center",
|
|
1118
|
-
justifyContent: "center",
|
|
1119
|
-
paddingVertical: 10,
|
|
1120
|
-
paddingHorizontal: 16,
|
|
1121
|
-
borderRadius: 8,
|
|
1122
|
-
borderWidth: 1,
|
|
1123
|
-
borderStyle: "dashed",
|
|
1124
|
-
gap: 6
|
|
1125
|
-
},
|
|
1126
|
-
addButtonText: {
|
|
1127
|
-
fontSize: 12,
|
|
1128
|
-
fontWeight: "500"
|
|
1129
|
-
},
|
|
1130
|
-
typePicker: {
|
|
1131
|
-
flexDirection: "row",
|
|
1132
|
-
alignItems: "center",
|
|
1133
|
-
gap: 8
|
|
1134
|
-
},
|
|
1135
|
-
typePickerRow: {
|
|
1136
|
-
flex: 1,
|
|
1137
|
-
flexDirection: "row",
|
|
1138
|
-
flexWrap: "wrap",
|
|
1139
|
-
gap: 8
|
|
1140
|
-
},
|
|
1141
|
-
typeOption: {
|
|
1142
|
-
flexDirection: "row",
|
|
1143
|
-
alignItems: "center",
|
|
1144
|
-
paddingVertical: 8,
|
|
1145
|
-
paddingHorizontal: 12,
|
|
1146
|
-
borderRadius: 6,
|
|
1147
|
-
borderWidth: 1,
|
|
1148
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
1149
|
-
gap: 6
|
|
1150
|
-
},
|
|
1151
|
-
typeOptionText: {
|
|
1152
|
-
fontSize: 11,
|
|
1153
|
-
fontWeight: "600"
|
|
1154
|
-
},
|
|
1155
|
-
typePickerCancel: {
|
|
1156
|
-
padding: 8
|
|
1157
|
-
},
|
|
1158
|
-
patternInputContainer: {
|
|
1159
|
-
flexDirection: "row",
|
|
1160
|
-
alignItems: "center",
|
|
1161
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
1162
|
-
borderRadius: 8,
|
|
1163
|
-
borderWidth: 1,
|
|
1164
|
-
borderColor: _sharedUi.night.color.border,
|
|
1165
|
-
paddingLeft: 4,
|
|
1166
|
-
paddingRight: 8,
|
|
1167
|
-
paddingVertical: 4,
|
|
1168
|
-
gap: 4
|
|
1169
|
-
},
|
|
1170
|
-
patternInput: {
|
|
1171
|
-
flex: 1,
|
|
1172
|
-
fontSize: 12,
|
|
1173
|
-
color: _sharedUi.night.color.text,
|
|
1174
|
-
paddingVertical: 6,
|
|
1175
|
-
paddingHorizontal: 4
|
|
1176
|
-
},
|
|
1177
|
-
addPatternButton: {
|
|
1178
|
-
paddingVertical: 6,
|
|
1179
|
-
paddingHorizontal: 10,
|
|
1180
|
-
borderRadius: 4
|
|
1181
|
-
},
|
|
1182
|
-
addPatternButtonText: {
|
|
1183
|
-
fontSize: 11,
|
|
1184
|
-
fontWeight: "600"
|
|
1185
|
-
},
|
|
1186
|
-
cancelButton: {
|
|
1187
|
-
padding: 4
|
|
1188
|
-
},
|
|
1189
|
-
categoryBadgeScroll: {
|
|
1190
|
-
marginTop: 12
|
|
1191
|
-
},
|
|
1192
|
-
categoryBadgeScrollContent: {
|
|
1193
|
-
paddingHorizontal: 16,
|
|
1194
|
-
gap: 8
|
|
1195
|
-
},
|
|
1196
|
-
categoryBadge: {
|
|
1197
|
-
flexDirection: "row",
|
|
1198
|
-
alignItems: "center",
|
|
1199
|
-
paddingVertical: 8,
|
|
1200
|
-
paddingLeft: 10,
|
|
1201
|
-
paddingRight: 6,
|
|
1202
|
-
borderRadius: 8,
|
|
1203
|
-
borderWidth: 1,
|
|
1204
|
-
gap: 6
|
|
1205
|
-
},
|
|
1206
|
-
categoryBadgeText: {
|
|
1207
|
-
fontSize: 11,
|
|
1208
|
-
fontWeight: "600"
|
|
1209
|
-
},
|
|
1210
|
-
categoryBadgeCountBubble: {
|
|
1211
|
-
paddingHorizontal: 6,
|
|
1212
|
-
paddingVertical: 2,
|
|
1213
|
-
borderRadius: 10,
|
|
1214
|
-
minWidth: 20,
|
|
1215
|
-
alignItems: "center"
|
|
1216
|
-
},
|
|
1217
|
-
categoryBadgeCount: {
|
|
1218
|
-
fontSize: 10,
|
|
1219
|
-
fontWeight: "600"
|
|
1220
|
-
},
|
|
1221
|
-
detectedItemsContainer: {
|
|
1222
|
-
paddingHorizontal: 16,
|
|
1223
|
-
paddingTop: 12,
|
|
1224
|
-
paddingBottom: 16
|
|
1225
|
-
},
|
|
1226
|
-
detectedItemsScroll: {
|
|
1227
|
-
maxHeight: 200
|
|
1228
|
-
},
|
|
1229
|
-
detectedItems: {
|
|
1230
|
-
flexDirection: "row",
|
|
1231
|
-
flexWrap: "wrap",
|
|
1232
|
-
gap: 8
|
|
1233
|
-
},
|
|
1234
|
-
detectedItem: {
|
|
1235
|
-
flexDirection: "row",
|
|
1236
|
-
alignItems: "center",
|
|
1237
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
1238
|
-
borderRadius: 6,
|
|
1239
|
-
borderWidth: 1,
|
|
1240
|
-
paddingVertical: 6,
|
|
1241
|
-
paddingHorizontal: 10,
|
|
1242
|
-
gap: 6
|
|
1243
|
-
},
|
|
1244
|
-
detectedItemText: {
|
|
1245
|
-
fontSize: 11,
|
|
1246
|
-
color: _sharedUi.night.color.text,
|
|
1247
|
-
fontFamily: _sharedUi.monoFont
|
|
1248
|
-
},
|
|
1249
|
-
emptyText: {
|
|
1250
|
-
fontSize: 11,
|
|
1251
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1252
|
-
fontStyle: "italic",
|
|
1253
|
-
textAlign: "center",
|
|
1254
|
-
paddingVertical: 16,
|
|
1255
|
-
paddingHorizontal: 16
|
|
1256
|
-
},
|
|
1257
|
-
howItWorks: {
|
|
1258
|
-
paddingHorizontal: 16,
|
|
1259
|
-
paddingVertical: 12
|
|
1260
|
-
},
|
|
1261
|
-
howItWorksText: {
|
|
1262
|
-
fontSize: 11,
|
|
1263
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1264
|
-
lineHeight: 18,
|
|
1265
|
-
fontFamily: _sharedUi.monoFont
|
|
1266
|
-
},
|
|
1267
|
-
howItWorksBold: {
|
|
1268
|
-
fontWeight: "700",
|
|
1269
|
-
color: _sharedUi.night.color.textSecondary
|
|
1270
|
-
},
|
|
1271
|
-
// Action popup modal styles
|
|
1272
|
-
modalOverlay: {
|
|
1273
|
-
flex: 1,
|
|
1274
|
-
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
1275
|
-
justifyContent: "center",
|
|
1276
|
-
alignItems: "center",
|
|
1277
|
-
padding: 32
|
|
1278
|
-
},
|
|
1279
|
-
actionPopup: {
|
|
1280
|
-
backgroundColor: _sharedUi.night.color.surface,
|
|
1281
|
-
borderRadius: 12,
|
|
1282
|
-
borderWidth: 1,
|
|
1283
|
-
borderColor: _sharedUi.night.color.border,
|
|
1284
|
-
width: "100%",
|
|
1285
|
-
maxWidth: 300,
|
|
1286
|
-
overflow: "hidden"
|
|
1287
|
-
},
|
|
1288
|
-
actionPopupHeader: {
|
|
1289
|
-
padding: 16,
|
|
1290
|
-
borderBottomWidth: 1,
|
|
1291
|
-
borderBottomColor: _sharedUi.night.color.separator,
|
|
1292
|
-
alignItems: "center"
|
|
1293
|
-
},
|
|
1294
|
-
actionPopupButtons: {
|
|
1295
|
-
flexDirection: "row",
|
|
1296
|
-
padding: 12,
|
|
1297
|
-
gap: 8
|
|
1298
|
-
},
|
|
1299
|
-
actionPopupButton: {
|
|
1300
|
-
flex: 1,
|
|
1301
|
-
flexDirection: "row",
|
|
1302
|
-
alignItems: "center",
|
|
1303
|
-
justifyContent: "center",
|
|
1304
|
-
paddingVertical: 12,
|
|
1305
|
-
paddingHorizontal: 12,
|
|
1306
|
-
borderRadius: 8,
|
|
1307
|
-
gap: 8
|
|
1308
|
-
},
|
|
1309
|
-
actionPopupInclude: {
|
|
1310
|
-
backgroundColor: _sharedUi.night.color.accentSoft
|
|
1311
|
-
},
|
|
1312
|
-
actionPopupExclude: {
|
|
1313
|
-
backgroundColor: _sharedUi.night.color.accentSoft
|
|
1314
|
-
},
|
|
1315
|
-
actionPopupButtonText: {
|
|
1316
|
-
fontSize: 13,
|
|
1317
|
-
fontWeight: "600"
|
|
1318
|
-
},
|
|
1319
|
-
actionPopupCancel: {
|
|
1320
|
-
padding: 12,
|
|
1321
|
-
borderTopWidth: 1,
|
|
1322
|
-
borderTopColor: _sharedUi.night.color.separator,
|
|
1323
|
-
alignItems: "center"
|
|
1324
|
-
},
|
|
1325
|
-
actionPopupCancelText: {
|
|
1326
|
-
fontSize: 13,
|
|
1327
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1328
|
-
fontWeight: "500"
|
|
1329
|
-
},
|
|
1330
|
-
// Settings styles
|
|
1331
|
-
settingsSection: {
|
|
1332
|
-
paddingHorizontal: 16,
|
|
1333
|
-
paddingTop: 8,
|
|
1334
|
-
paddingBottom: 16
|
|
1335
|
-
},
|
|
1336
|
-
settingItem: {
|
|
1337
|
-
gap: 8
|
|
1338
|
-
},
|
|
1339
|
-
settingItemSpaced: {
|
|
1340
|
-
marginTop: 16,
|
|
1341
|
-
paddingTop: 16,
|
|
1342
|
-
borderTopWidth: 1,
|
|
1343
|
-
borderTopColor: _sharedUi.night.color.separator
|
|
1344
|
-
},
|
|
1345
|
-
settingHeader: {
|
|
1346
|
-
flexDirection: "row",
|
|
1347
|
-
alignItems: "center",
|
|
1348
|
-
justifyContent: "space-between"
|
|
1349
|
-
},
|
|
1350
|
-
settingLabel: {
|
|
1351
|
-
fontSize: 13,
|
|
1352
|
-
fontWeight: "600",
|
|
1353
|
-
color: _sharedUi.night.color.text
|
|
1354
|
-
},
|
|
1355
|
-
settingValue: {
|
|
1356
|
-
backgroundColor: _sharedUi.night.color.fillSecondary,
|
|
1357
|
-
paddingHorizontal: 10,
|
|
1358
|
-
paddingVertical: 4,
|
|
1359
|
-
borderRadius: 6
|
|
1360
|
-
},
|
|
1361
|
-
settingValueText: {
|
|
1362
|
-
fontSize: 12,
|
|
1363
|
-
fontWeight: "700",
|
|
1364
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1365
|
-
fontFamily: _sharedUi.monoFont
|
|
1366
|
-
},
|
|
1367
|
-
settingDescription: {
|
|
1368
|
-
fontSize: 11,
|
|
1369
|
-
color: _sharedUi.night.color.textSecondary,
|
|
1370
|
-
lineHeight: 16
|
|
1371
|
-
},
|
|
1372
|
-
settingDescriptionMuted: {
|
|
1373
|
-
fontSize: 10,
|
|
1374
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1375
|
-
lineHeight: 14,
|
|
1376
|
-
marginTop: 4,
|
|
1377
|
-
fontStyle: "italic"
|
|
1378
|
-
},
|
|
1379
|
-
settingLabelDisabled: {
|
|
1380
|
-
color: _sharedUi.night.color.textTertiary
|
|
1381
|
-
},
|
|
1382
|
-
settingWarning: {
|
|
1383
|
-
color: _sharedUi.night.color.warning,
|
|
1384
|
-
fontWeight: "500"
|
|
1385
|
-
},
|
|
1386
|
-
batchSizePresets: {
|
|
1387
|
-
flexDirection: "row",
|
|
1388
|
-
flexWrap: "wrap",
|
|
1389
|
-
gap: 8,
|
|
1390
|
-
marginTop: 4
|
|
1391
|
-
},
|
|
1392
|
-
batchSizePreset: {
|
|
1393
|
-
paddingVertical: 8,
|
|
1394
|
-
paddingHorizontal: 14,
|
|
1395
|
-
borderRadius: 6,
|
|
1396
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
1397
|
-
borderWidth: 1,
|
|
1398
|
-
borderColor: _sharedUi.night.color.border
|
|
1399
|
-
},
|
|
1400
|
-
batchSizePresetActive: {
|
|
1401
|
-
backgroundColor: _sharedUi.night.color.fillSecondary,
|
|
1402
|
-
borderColor: _sharedUi.night.color.fillTertiary
|
|
1403
|
-
},
|
|
1404
|
-
batchSizePresetText: {
|
|
1405
|
-
fontSize: 12,
|
|
1406
|
-
fontWeight: "500",
|
|
1407
|
-
color: _sharedUi.night.color.textSecondary,
|
|
1408
|
-
fontFamily: _sharedUi.monoFont
|
|
1409
|
-
},
|
|
1410
|
-
batchSizePresetTextActive: {
|
|
1411
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1412
|
-
fontWeight: "700"
|
|
1413
|
-
},
|
|
1414
|
-
// Render count range styles
|
|
1415
|
-
renderCountRangeContainer: {
|
|
1416
|
-
paddingHorizontal: 16,
|
|
1417
|
-
paddingTop: 12,
|
|
1418
|
-
paddingBottom: 16,
|
|
1419
|
-
gap: 12
|
|
1420
|
-
},
|
|
1421
|
-
renderCountInputRow: {
|
|
1422
|
-
flexDirection: "row",
|
|
1423
|
-
alignItems: "center",
|
|
1424
|
-
gap: 12
|
|
1425
|
-
},
|
|
1426
|
-
renderCountInputGroup: {
|
|
1427
|
-
flex: 1,
|
|
1428
|
-
gap: 4
|
|
1429
|
-
},
|
|
1430
|
-
renderCountLabel: {
|
|
1431
|
-
fontSize: 10,
|
|
1432
|
-
fontWeight: "600",
|
|
1433
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1434
|
-
textTransform: "uppercase",
|
|
1435
|
-
letterSpacing: 0.5
|
|
1436
|
-
},
|
|
1437
|
-
renderCountInput: {
|
|
1438
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
1439
|
-
borderRadius: 8,
|
|
1440
|
-
borderWidth: 1,
|
|
1441
|
-
borderColor: _sharedUi.night.color.border,
|
|
1442
|
-
paddingVertical: 10,
|
|
1443
|
-
paddingHorizontal: 12,
|
|
1444
|
-
fontSize: 14,
|
|
1445
|
-
fontWeight: "600",
|
|
1446
|
-
color: _sharedUi.night.color.text,
|
|
1447
|
-
fontFamily: _sharedUi.monoFont,
|
|
1448
|
-
textAlign: "center"
|
|
1449
|
-
},
|
|
1450
|
-
renderCountSeparator: {
|
|
1451
|
-
fontSize: 12,
|
|
1452
|
-
color: _sharedUi.night.color.textTertiary,
|
|
1453
|
-
marginTop: 18
|
|
1454
|
-
},
|
|
1455
|
-
clearRangeButton: {
|
|
1456
|
-
flexDirection: "row",
|
|
1457
|
-
alignItems: "center",
|
|
1458
|
-
justifyContent: "center",
|
|
1459
|
-
paddingVertical: 8,
|
|
1460
|
-
paddingHorizontal: 12,
|
|
1461
|
-
borderRadius: 6,
|
|
1462
|
-
backgroundColor: _sharedUi.night.color.warningSoft,
|
|
1463
|
-
borderWidth: 1,
|
|
1464
|
-
borderColor: _sharedUi.night.color.warning + "40",
|
|
1465
|
-
gap: 6,
|
|
1466
|
-
alignSelf: "center"
|
|
1467
|
-
},
|
|
1468
|
-
clearRangeButtonText: {
|
|
1469
|
-
fontSize: 11,
|
|
1470
|
-
fontWeight: "600",
|
|
1471
|
-
color: _sharedUi.night.color.warning
|
|
1472
|
-
}
|
|
1473
|
-
});
|
|
1474
|
-
var _default = exports.default = HighlightFilterView;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.HighlightFilterView=HighlightFilterView;exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _IdentifierBadge=require("./IdentifierBadge");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(n,l){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(t,a){if(!a&&t&&t.__esModule)return t;var s,d,g={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return g;if(s=a?r:i){if(s.has(t))return s.get(t);s.set(t,g)}for(const u in t)"default"!==u&&{}.hasOwnProperty.call(t,u)&&((d=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,u))&&(d.get||d.set)?s(g,u,d):g[u]=t[u]);return g})(n,l)}const getFilterConfig=n=>_IdentifierBadge.IDENTIFIER_CONFIG[n];const FILTER_TYPES=["any","viewType","testID","nativeID","component","accessibilityLabel"];function TypePicker({mode:n,onSelect:l,onCancel:i}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__type-picker",testID:`buoy-highlight-${n}-types`,style:styles.typePicker,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typePickerRow,children:FILTER_TYPES.map(r=>{const t=getFilterConfig(r);const a=t.icon;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-type-${r.toLowerCase()}`,accessibilityRole:"button",accessibilityLabel:t.label,style:[styles.typeOption,{backgroundColor:t.color+"15",borderColor:t.color+"40"}],onPress:()=>l(r),children:[(0,_jsxRuntime.jsx)(a,{size:14,color:t.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.typeOptionText,{color:t.color}],children:t.label})]},r)})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-types-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:i,style:styles.typePickerCancel,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.night.color.textTertiary})})]})}function PatternInput({mode:n,type:l,onSubmit:i,onCancel:r}){const[t,a]=(0,_react.useState)("");const s=getFilterConfig(l);const d=()=>{if(t.trim()){i(t.trim())}};return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__pattern-input",testID:`buoy-highlight-${n}-input-row`,style:styles.patternInputContainer,children:[(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:l,value:"",badgeOnly:true,compact:true}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{testID:`buoy-highlight-${n}-input`,value:t,onChangeText:a,onSubmitEditing:d,placeholder:"Enter pattern...",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.patternInput,autoFocus:true,returnKeyType:"done",autoCorrect:false,autoCapitalize:"none"}),t.trim()&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-submit`,accessibilityRole:"button",accessibilityLabel:"Add pattern",onPress:d,style:[styles.addPatternButton,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addPatternButtonText,{color:s.color}],children:"Add"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:`buoy-highlight-${n}-input-cancel`,accessibilityRole:"button",accessibilityLabel:"Cancel",onPress:r,style:styles.cancelButton,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:16,color:_sharedUi.night.color.textTertiary})})]})}function PatternChip({mode:n,pattern:l,onRemove:i}){const r=getFilterConfig(l.type);return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:(0,_testIDs.patternChipTestID)(n,l.type,l.value),accessibilityRole:"button",accessibilityLabel:`${r.label} ${l.value}, tap to remove`,style:[styles.patternChip,{borderColor:r.color+"40"}],onPress:i,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.patternChipBadge,{backgroundColor:r.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.patternChipBadgeText,{color:r.color}],children:r.shortLabel})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.patternChipValue,numberOfLines:1,children:l.value}),(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.textTertiary,style:styles.patternChipX})]})}const ALL_CATEGORY_CONFIG={label:"All",shortLabel:"All",color:_sharedUi.night.color.textSecondary,icon:_sharedUi.Box};function DetectedCategoryBadge({filterType:n,count:l,isSelected:i,onPress:r}){const t=n==="all"?ALL_CATEGORY_CONFIG:getFilterConfig(n);const a=`buoy-highlight-detected-cat-${String(n).toLowerCase()}`;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:a,accessibilityRole:"button",accessibilityLabel:`${t.label}, ${l}`,style:[styles.categoryBadge,{backgroundColor:t.color+"15",borderColor:i?t.color:t.color+"40",borderWidth:i?2:1}],onPress:r,children:[(0,_jsxRuntime.jsx)(t.icon,{size:12,color:t.color}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryBadgeText,{color:t.color}],children:t.label}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadgeCountBubble,{backgroundColor:t.color+"25"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:`${a}-count`,style:[styles.categoryBadgeCount,{color:t.color}],children:l})})]})}const BATCH_SIZE_PRESETS=[{value:20,label:"20"},{value:50,label:"50"},{value:100,label:"100"},{value:150,label:"150"},{value:250,label:"250"},{value:500,label:"500"}];const DEBUG_LOG_LEVEL_PRESETS=[{value:"off",label:"Off",description:"No debug logging"},{value:"minimal",label:"Minimal",description:"Only hook value changes"},{value:"verbose",label:"Verbose",description:"Component + cause + changes"},{value:"all",label:"All",description:"Full fiber dump"}];function HighlightFilterView({filters:n,onFilterChange:l,settings:i,onSettingsChange:r,availableProps:t,activeTab:a}){const[s,d]=(0,_react.useState)(false);const[g,u]=(0,_react.useState)(false);const[b,T]=(0,_react.useState)(null);const[f,m]=(0,_react.useState)(null);const[h,p]=(0,_react.useState)("all");const[c,y]=(0,_react.useState)(null);const v=e=>{switch(e){case"viewType":return t.viewTypes.map(o=>({value:o,type:"viewType"}));case"testID":return t.testIDs.map(o=>({value:o,type:"testID"}));case"nativeID":return t.nativeIDs.map(o=>({value:o,type:"nativeID"}));case"component":return t.componentNames.map(o=>({value:o,type:"component"}));case"accessibilityLabel":return t.accessibilityLabels.map(o=>({value:o,type:"accessibilityLabel"}));case"all":default:return[...t.viewTypes.map(o=>({value:o,type:"viewType"})),...t.testIDs.map(o=>({value:o,type:"testID"})),...t.nativeIDs.map(o=>({value:o,type:"nativeID"})),...t.componentNames.map(o=>({value:o,type:"component"})),...t.accessibilityLabels.map(o=>({value:o,type:"accessibilityLabel"}))]}};const w=v(h);const S=t.viewTypes.length+t.testIDs.length+t.nativeIDs.length+t.componentNames.length+t.accessibilityLabels.length;const I=(0,_react.useCallback)((e,o)=>{const x=[...n.includePatterns,{type:e,value:o}];l({includePatterns:x});T(null)},[n.includePatterns,l]);const j=(0,_react.useCallback)((e,o)=>{const x=[...n.excludePatterns,{type:e,value:o}];l({excludePatterns:x});m(null)},[n.excludePatterns,l]);const D=(0,_react.useCallback)(e=>{const o=n.includePatterns.filter((x,C)=>C!==e);l({includePatterns:o})},[n.includePatterns,l]);const R=(0,_react.useCallback)(e=>{const o=n.excludePatterns.filter((x,C)=>C!==e);l({excludePatterns:o})},[n.excludePatterns,l]);const P=(0,_react.useCallback)((e,o)=>{y({type:e,value:o})},[]);const V=(0,_react.useCallback)(()=>{if(c){I(c.type,c.value);y(null)}},[c,I]);const z=(0,_react.useCallback)(()=>{if(c){j(c.type,c.value);y(null)}},[c,j]);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{nativeID:"__rn_buoy__filter-view",testID:"buoy-highlight-filter-scroll",style:styles.scrollView,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:false,children:a==="filters"?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Eye,color:_sharedUi.night.color.accent,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"INCLUDE ONLY"}),n.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{testID:"buoy-highlight-include-count",count:n.includePatterns.length,color:_sharedUi.night.color.accent})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Show only components matching these patterns. If any are set, components must match at least one."}),n.includePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:n.includePatterns.map((e,o)=>(0,_jsxRuntime.jsx)(PatternChip,{mode:"include",pattern:e,onRemove:()=>D(o)},`${e.type}-${e.value}-${o}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:s?(0,_jsxRuntime.jsx)(TypePicker,{mode:"include",onSelect:e=>{d(false);T(e)},onCancel:()=>d(false)}):b?(0,_jsxRuntime.jsx)(PatternInput,{mode:"include",type:b,onSubmit:e=>I(b,e),onCancel:()=>T(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-include-add",accessibilityRole:"button",accessibilityLabel:"Add include pattern",style:[styles.addButton,{borderColor:_sharedUi.night.color.accentBorderStrong}],onPress:()=>d(true),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.night.color.accent}],children:"Add include pattern"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Filter,color:_sharedUi.night.color.accent,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"EXCLUDE"}),n.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{testID:"buoy-highlight-exclude-count",count:n.excludePatterns.length,color:_sharedUi.night.color.accent})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Hide components matching these patterns from the list."}),n.excludePatterns.length>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.patternChips,children:n.excludePatterns.map((e,o)=>(0,_jsxRuntime.jsx)(PatternChip,{mode:"exclude",pattern:e,onRemove:()=>R(o)},`${e.type}-${e.value}-${o}`))}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.addPatternRow,children:g?(0,_jsxRuntime.jsx)(TypePicker,{mode:"exclude",onSelect:e=>{u(false);m(e)},onCancel:()=>u(false)}):f?(0,_jsxRuntime.jsx)(PatternInput,{mode:"exclude",type:f,onSubmit:e=>j(f,e),onCancel:()=>m(null)}):(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-exclude-add",accessibilityRole:"button",accessibilityLabel:"Add exclude pattern",style:[styles.addButton,{borderColor:_sharedUi.night.color.accentBorderStrong}],onPress:()=>u(true),children:[(0,_jsxRuntime.jsx)(_sharedUi.Plus,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.addButtonText,{color:_sharedUi.night.color.accent}],children:"Add exclude pattern"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Hash,color:_sharedUi.night.color.warning,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"RENDER COUNT RANGE"}),(n.minRenderCount!==void 0||n.maxRenderCount!==void 0)&&(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Badge,{count:1,color:_sharedUi.night.color.warning})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Show only components with render count in a specific range."}),(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__render-count-range",testID:"buoy-highlight-range",style:styles.renderCountRangeContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.renderCountInputRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.renderCountInputGroup,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.renderCountLabel,children:"Min"}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:n.minRenderCount!==void 0?String(n.minRenderCount):"",onChangeText:e=>{const o=parseInt(e,10);if(e===""||e===void 0){l({minRenderCount:void 0})}else if(!isNaN(o)&&o>=0){l({minRenderCount:o})}},testID:"buoy-highlight-range-min",placeholder:"0",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.renderCountSeparator,children:"to"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.renderCountInputGroup,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.renderCountLabel,children:"Max"}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:n.maxRenderCount!==void 0?String(n.maxRenderCount):"",onChangeText:e=>{const o=parseInt(e,10);if(e===""||e===void 0){l({maxRenderCount:void 0})}else if(!isNaN(o)&&o>=0){l({maxRenderCount:o})}},testID:"buoy-highlight-range-max",placeholder:"\u221E",placeholderTextColor:_sharedUi.night.color.placeholder,style:styles.renderCountInput,keyboardType:"number-pad",returnKeyType:"done"})]})]}),(n.minRenderCount!==void 0||n.maxRenderCount!==void 0)&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-range-clear",accessibilityRole:"button",accessibilityLabel:"Clear range",style:styles.clearRangeButton,onPress:()=>l({minRenderCount:void 0,maxRenderCount:void 0}),children:[(0,_jsxRuntime.jsx)(_sharedUi.X,{size:12,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.clearRangeButtonText,children:"Clear Range"})]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Box,color:_sharedUi.night.color.textSecondary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"DETECTED ITEMS"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionDescription,children:"Tap an item to quickly add it as an exclude pattern."}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{horizontal:true,showsHorizontalScrollIndicator:false,style:styles.categoryBadgeScroll,contentContainerStyle:styles.categoryBadgeScrollContent,children:[S>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"all",count:S,isSelected:h==="all",onPress:()=>p("all")}),t.viewTypes.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"viewType",count:t.viewTypes.length,isSelected:h==="viewType",onPress:()=>p("viewType")}),t.testIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"testID",count:t.testIDs.length,isSelected:h==="testID",onPress:()=>p("testID")}),t.nativeIDs.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"nativeID",count:t.nativeIDs.length,isSelected:h==="nativeID",onPress:()=>p("nativeID")}),t.componentNames.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"component",count:t.componentNames.length,isSelected:h==="component",onPress:()=>p("component")}),t.accessibilityLabels.length>0&&(0,_jsxRuntime.jsx)(DetectedCategoryBadge,{filterType:"accessibilityLabel",count:t.accessibilityLabels.length,isSelected:h==="accessibilityLabel",onPress:()=>p("accessibilityLabel")})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__detected-items",testID:"buoy-highlight-detected",style:styles.detectedItemsContainer,children:w.length>0?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{testID:"buoy-highlight-detected-scroll",style:styles.detectedItemsScroll,contentContainerStyle:styles.detectedItems,nestedScrollEnabled:true,showsVerticalScrollIndicator:true,children:w.map(e=>{const o=getFilterConfig(e.type);return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:(0,_testIDs.detectedItemTestID)(e.type,e.value),accessibilityRole:"button",accessibilityLabel:`${o.label} ${e.value}`,style:[styles.detectedItem,{borderColor:o.color+"40"}],onPress:()=>P(e.type,e.value),children:h==="all"?(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:e.type,value:e.value,compact:true,shortLabel:true}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detectedItemText,numberOfLines:1,children:e.value})},`${e.type}-${e.value}`)})}):(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-detected-empty",style:styles.emptyText,children:"No items detected yet. Start tracking to see components here."})})]}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:c!==null,transparent:true,animationType:"fade",onRequestClose:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessible:false,testID:"buoy-highlight-detected-popup-backdrop",style:styles.modalOverlay,onPress:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:false,testID:"buoy-highlight-detected-popup",style:styles.actionPopup,children:c&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionPopupHeader,children:(0,_jsxRuntime.jsx)(_IdentifierBadge.IdentifierBadge,{type:c.type,value:c.value,compact:true,shortLabel:true})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionPopupButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-include",accessibilityRole:"button",accessibilityLabel:"Include only",style:[styles.actionPopupButton,styles.actionPopupInclude],onPress:V,children:[(0,_jsxRuntime.jsx)(_sharedUi.Eye,{size:16,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.night.color.accent}],children:"Include Only"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-exclude",accessibilityRole:"button",accessibilityLabel:"Exclude",style:[styles.actionPopupButton,styles.actionPopupExclude],onPress:z,children:[(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:16,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionPopupButtonText,{color:_sharedUi.night.color.accent}],children:"Exclude"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-detected-popup-cancel",accessibilityRole:"button",accessibilityLabel:"Cancel",style:styles.actionPopupCancel,onPress:()=>y(null),children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionPopupCancelText,children:"Cancel"})})]})})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Filter,color:_sharedUi.night.color.textTertiary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"HOW FILTERS WORK"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.howItWorks,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.howItWorksText,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"Any:"})," Matches against all fields","\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"ViewType:"})," Native component class (RCTView, RCTText)","\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"testID:"})," Component testID prop","\n",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.howItWorksBold,children:"Component:"})," React component name from fiber"]})})]})]}):(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Settings,color:_sharedUi.night.color.textTertiary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"SETTINGS"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingsSection,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingItem,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Show Render Count"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("showRenderCount"),value:i.showRenderCount,onValueChange:e=>{r({showRenderCount:e});if(!e&&i.trackRenderCauses){r({trackRenderCauses:false})}},trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.showRenderCount?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Display render count badge on highlights. Disabling improves performance by skipping count tracking."})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.settingLabel,!i.showRenderCount&&styles.settingLabelDisabled],children:"Track Render Causes"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("trackRenderCauses"),value:i.trackRenderCauses,onValueChange:e=>r({trackRenderCauses:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.warning+"80"},thumbColor:i.trackRenderCauses?_sharedUi.night.color.warning:_sharedUi.night.color.knob,disabled:!i.showRenderCount})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Detect WHY components render (props, hooks, parent re-render).",!i.showRenderCount&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n",'Requires "Show Render Count" to be enabled.']})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.settingLabel,!i.trackRenderCauses&&styles.settingLabelDisabled],children:"Enable Render History"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("enableRenderHistory"),value:i.enableRenderHistory,onValueChange:e=>r({enableRenderHistory:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.enableRenderHistory?_sharedUi.night.color.accent:_sharedUi.night.color.knob,disabled:!i.trackRenderCauses})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Store render events for each component to view in the History tab.",!i.trackRenderCauses&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n",'Requires "Track Render Causes" to be enabled.']})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Debug Log Level"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.settingValue,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-setting-debugLogLevel-value",style:[styles.settingValueText,i.debugLogLevel!=="off"&&{color:_sharedUi.night.color.warning}],children:DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===i.debugLogLevel)?.label||"Off"})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Control console logging verbosity for render cause detection."}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.batchSizePresets,children:DEBUG_LOG_LEVEL_PRESETS.map(e=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.batchSizePreset,i.debugLogLevel===e.value&&styles.batchSizePresetActive,e.value!=="off"&&i.debugLogLevel===e.value&&{backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning}],onPress:()=>r({debugLogLevel:e.value}),testID:`buoy-highlight-preset-log-${e.value}`,accessibilityRole:"button",accessibilityLabel:`Debug log level ${e.label}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,i.debugLogLevel===e.value&&styles.batchSizePresetTextActive,e.value!=="off"&&i.debugLogLevel===e.value&&{color:_sharedUi.night.color.warning}],children:e.label})},e.value))}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescriptionMuted,children:[DEBUG_LOG_LEVEL_PRESETS.find(e=>e.value===i.debugLogLevel)?.description,i.debugLogLevel!=="off"&&" \u2022 Check Metro console for logs"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Batch Size"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.settingValue,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-setting-batchSize-value",style:styles.settingValueText,children:i.batchSize})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Maximum components to highlight per render update. Higher values capture more re-renders but may impact performance on complex screens."}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.batchSizePresets,children:BATCH_SIZE_PRESETS.map(e=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.batchSizePreset,i.batchSize===e.value&&styles.batchSizePresetActive],onPress:()=>r({batchSize:e.value}),testID:`buoy-highlight-preset-batch-${e.value}`,accessibilityRole:"button",accessibilityLabel:`Batch size ${e.label}`,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.batchSizePresetText,i.batchSize===e.value&&styles.batchSizePresetTextActive],children:e.label})},e.value))})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Show host views"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("showHostViews"),value:!!i.showHostViews,onValueChange:e=>r({showHostViews:e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:i.showHostViews?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingDescription,children:"Include anonymous View / RCTView / Text hosts. Off by default so the list is named composites (what actually re-rendered)."})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.settingItem,styles.settingItemSpaced],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.settingHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.settingLabel,children:"Highlight Dev Tools"}),(0,_jsxRuntime.jsx)(_reactNative.Switch,{testID:(0,_testIDs.settingTestID)("excludeDevTools"),value:!i.excludeDevTools,onValueChange:e=>r({excludeDevTools:!e}),trackColor:{false:_sharedUi.night.color.surfaceElevated,true:_sharedUi.night.color.accent+"80"},thumbColor:!i.excludeDevTools?_sharedUi.night.color.accent:_sharedUi.night.color.knob})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingDescription,children:["Show re-render highlights on Buoy dev tools (floating menu, modals, etc.). Useful for optimizing the dev tools themselves.",!i.excludeDevTools&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.settingWarning,children:["\n","The highlight overlay is always excluded to prevent infinite loops."]})]})]})]})]})})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},scrollView:{flex:1},scrollContent:{paddingHorizontal:16,paddingTop:12,paddingBottom:32},section:{backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,marginBottom:12,overflow:"hidden"},sectionDescription:{fontSize:11,color:_sharedUi.night.color.textSecondary,paddingHorizontal:16,paddingTop:8,lineHeight:16},patternChips:{flexDirection:"row",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:12},patternChip:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:4,paddingLeft:4,paddingRight:6,maxWidth:"100%",gap:4},patternChipBadge:{paddingVertical:2,paddingHorizontal:5,borderRadius:4},patternChipBadgeText:{fontSize:9,fontWeight:"700"},patternChipValue:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flexShrink:1},patternChipX:{marginLeft:2},addPatternRow:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},addButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderStyle:"dashed",gap:6},addButtonText:{fontSize:12,fontWeight:"500"},typePicker:{flexDirection:"row",alignItems:"center",gap:8},typePickerRow:{flex:1,flexDirection:"row",flexWrap:"wrap",gap:8},typeOption:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,borderWidth:1,backgroundColor:_sharedUi.night.color.surfaceElevated,gap:6},typeOptionText:{fontSize:11,fontWeight:"600"},typePickerCancel:{padding:8},patternInputContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingLeft:4,paddingRight:8,paddingVertical:4,gap:4},patternInput:{flex:1,fontSize:12,color:_sharedUi.night.color.text,paddingVertical:6,paddingHorizontal:4},addPatternButton:{paddingVertical:6,paddingHorizontal:10,borderRadius:4},addPatternButtonText:{fontSize:11,fontWeight:"600"},cancelButton:{padding:4},categoryBadgeScroll:{marginTop:12},categoryBadgeScrollContent:{paddingHorizontal:16,gap:8},categoryBadge:{flexDirection:"row",alignItems:"center",paddingVertical:8,paddingLeft:10,paddingRight:6,borderRadius:8,borderWidth:1,gap:6},categoryBadgeText:{fontSize:11,fontWeight:"600"},categoryBadgeCountBubble:{paddingHorizontal:6,paddingVertical:2,borderRadius:10,minWidth:20,alignItems:"center"},categoryBadgeCount:{fontSize:10,fontWeight:"600"},detectedItemsContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16},detectedItemsScroll:{maxHeight:200},detectedItems:{flexDirection:"row",flexWrap:"wrap",gap:8},detectedItem:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:6,borderWidth:1,paddingVertical:6,paddingHorizontal:10,gap:6},detectedItemText:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},emptyText:{fontSize:11,color:_sharedUi.night.color.textTertiary,fontStyle:"italic",textAlign:"center",paddingVertical:16,paddingHorizontal:16},howItWorks:{paddingHorizontal:16,paddingVertical:12},howItWorksText:{fontSize:11,color:_sharedUi.night.color.textTertiary,lineHeight:18,fontFamily:_sharedUi.monoFont},howItWorksBold:{fontWeight:"700",color:_sharedUi.night.color.textSecondary},modalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.5)",justifyContent:"center",alignItems:"center",padding:32},actionPopup:{backgroundColor:_sharedUi.night.color.surface,borderRadius:12,borderWidth:1,borderColor:_sharedUi.night.color.border,width:"100%",maxWidth:300,overflow:"hidden"},actionPopupHeader:{padding:16,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.separator,alignItems:"center"},actionPopupButtons:{flexDirection:"row",padding:12,gap:8},actionPopupButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:12,borderRadius:8,gap:8},actionPopupInclude:{backgroundColor:_sharedUi.night.color.accentSoft},actionPopupExclude:{backgroundColor:_sharedUi.night.color.accentSoft},actionPopupButtonText:{fontSize:13,fontWeight:"600"},actionPopupCancel:{padding:12,borderTopWidth:1,borderTopColor:_sharedUi.night.color.separator,alignItems:"center"},actionPopupCancelText:{fontSize:13,color:_sharedUi.night.color.textTertiary,fontWeight:"500"},settingsSection:{paddingHorizontal:16,paddingTop:8,paddingBottom:16},settingItem:{gap:8},settingItemSpaced:{marginTop:16,paddingTop:16,borderTopWidth:1,borderTopColor:_sharedUi.night.color.separator},settingHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},settingLabel:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.text},settingValue:{backgroundColor:_sharedUi.night.color.fillSecondary,paddingHorizontal:10,paddingVertical:4,borderRadius:6},settingValueText:{fontSize:12,fontWeight:"700",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},settingDescription:{fontSize:11,color:_sharedUi.night.color.textSecondary,lineHeight:16},settingDescriptionMuted:{fontSize:10,color:_sharedUi.night.color.textTertiary,lineHeight:14,marginTop:4,fontStyle:"italic"},settingLabelDisabled:{color:_sharedUi.night.color.textTertiary},settingWarning:{color:_sharedUi.night.color.warning,fontWeight:"500"},batchSizePresets:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:4},batchSizePreset:{paddingVertical:8,paddingHorizontal:14,borderRadius:6,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border},batchSizePresetActive:{backgroundColor:_sharedUi.night.color.fillSecondary,borderColor:_sharedUi.night.color.fillTertiary},batchSizePresetText:{fontSize:12,fontWeight:"500",color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont},batchSizePresetTextActive:{color:_sharedUi.night.color.textTertiary,fontWeight:"700"},renderCountRangeContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:16,gap:12},renderCountInputRow:{flexDirection:"row",alignItems:"center",gap:12},renderCountInputGroup:{flex:1,gap:4},renderCountLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},renderCountInput:{backgroundColor:_sharedUi.night.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border,paddingVertical:10,paddingHorizontal:12,fontSize:14,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,textAlign:"center"},renderCountSeparator:{fontSize:12,color:_sharedUi.night.color.textTertiary,marginTop:18},clearRangeButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:8,paddingHorizontal:12,borderRadius:6,backgroundColor:_sharedUi.night.color.warningSoft,borderWidth:1,borderColor:_sharedUi.night.color.warning+"40",gap:6,alignSelf:"center"},clearRangeButtonText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.warning}});var _default=exports.default=HighlightFilterView;
|