@buoy-gg/image-overlay 7.0.41 → 7.0.43
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 +12 -76
- package/lib/commonjs/imageOverlay/components/ImageOverlayModal.js +1 -880
- package/lib/commonjs/imageOverlay/components/ImageOverlayStandalone.js +1 -463
- package/lib/commonjs/imageOverlay/components/OverlayControls.js +1 -253
- package/lib/commonjs/imageOverlay/components/TargetList.js +1 -181
- package/lib/commonjs/imageOverlay/types/index.js +1 -1
- package/lib/commonjs/imageOverlay/utils/ImageOverlayController.js +1 -426
- package/lib/commonjs/imageOverlay/utils/componentMeasurement.js +1 -106
- package/lib/commonjs/imageOverlay/utils/devtoolsHook.js +1 -36
- package/lib/commonjs/imageOverlay/utils/fiberScanner.js +1 -104
- package/lib/commonjs/imageOverlay/utils/imageClipboard.js +1 -22
- package/lib/commonjs/imageOverlay/utils/imageClipboard.web.js +1 -44
- package/lib/commonjs/index.js +1 -59
- package/lib/commonjs/preset.js +1 -42
- package/lib/module/imageOverlay/components/ImageOverlayModal.js +1 -875
- package/lib/module/imageOverlay/components/ImageOverlayStandalone.js +1 -459
- package/lib/module/imageOverlay/components/OverlayControls.js +1 -249
- package/lib/module/imageOverlay/components/TargetList.js +1 -177
- package/lib/module/imageOverlay/types/index.js +1 -1
- package/lib/module/imageOverlay/utils/ImageOverlayController.js +1 -422
- package/lib/module/imageOverlay/utils/componentMeasurement.js +1 -102
- package/lib/module/imageOverlay/utils/devtoolsHook.js +1 -31
- package/lib/module/imageOverlay/utils/fiberScanner.js +1 -100
- package/lib/module/imageOverlay/utils/imageClipboard.js +1 -17
- package/lib/module/imageOverlay/utils/imageClipboard.web.js +1 -39
- package/lib/module/index.js +1 -35
- package/lib/module/preset.js +1 -38
- package/lib/web/index.mjs +4 -5
- package/package.json +3 -6
- package/lib/typescript/imageOverlay/components/ImageOverlayModal.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/components/ImageOverlayStandalone.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/components/OverlayControls.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/components/TargetList.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/types/index.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/ImageOverlayController.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/componentMeasurement.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/devtoolsHook.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/fiberScanner.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/imageClipboard.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/imageClipboard.web.d.ts.map +0 -1
- package/lib/typescript/index.d.ts.map +0 -1
- package/lib/typescript/preset.d.ts.map +0 -1
|
@@ -1,253 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.OverlayControls = OverlayControls;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _sharedUi = require("@buoy-gg/shared-ui");
|
|
10
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
/**
|
|
12
|
-
* Controls for adjusting the overlay: opacity, scale, offset.
|
|
13
|
-
* Each control has a slider track plus -/+ stepper buttons.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
function SliderStepper({
|
|
17
|
-
label,
|
|
18
|
-
value,
|
|
19
|
-
min,
|
|
20
|
-
max,
|
|
21
|
-
step,
|
|
22
|
-
displayValue,
|
|
23
|
-
onChange
|
|
24
|
-
}) {
|
|
25
|
-
const trackWidth = (0, _react.useRef)(0);
|
|
26
|
-
const trackX = (0, _react.useRef)(0);
|
|
27
|
-
const clamp = (0, _react.useCallback)(v => Math.max(min, Math.min(max, v)), [min, max]);
|
|
28
|
-
const fraction = max > min ? (value - min) / (max - min) : 0;
|
|
29
|
-
|
|
30
|
-
// Keep current values in refs so PanResponder always uses latest props
|
|
31
|
-
const onChangeRef = (0, _react.useRef)(onChange);
|
|
32
|
-
const clampRef = (0, _react.useRef)(clamp);
|
|
33
|
-
const minRef = (0, _react.useRef)(min);
|
|
34
|
-
const maxRef = (0, _react.useRef)(max);
|
|
35
|
-
onChangeRef.current = onChange;
|
|
36
|
-
clampRef.current = clamp;
|
|
37
|
-
minRef.current = min;
|
|
38
|
-
maxRef.current = max;
|
|
39
|
-
const handleSliderEvent = (0, _react.useCallback)(pageX => {
|
|
40
|
-
const x = pageX - trackX.current;
|
|
41
|
-
const frac = Math.max(0, Math.min(1, x / trackWidth.current));
|
|
42
|
-
const val = minRef.current + frac * (maxRef.current - minRef.current);
|
|
43
|
-
onChangeRef.current(clampRef.current(val));
|
|
44
|
-
}, []);
|
|
45
|
-
const panResponder = (0, _react.useRef)(_reactNative.PanResponder.create({
|
|
46
|
-
onStartShouldSetPanResponder: () => true,
|
|
47
|
-
onMoveShouldSetPanResponder: () => true,
|
|
48
|
-
onPanResponderTerminationRequest: () => false,
|
|
49
|
-
onPanResponderGrant: evt => {
|
|
50
|
-
handleSliderEvent(evt.nativeEvent.pageX);
|
|
51
|
-
},
|
|
52
|
-
onPanResponderMove: evt => {
|
|
53
|
-
handleSliderEvent(evt.nativeEvent.pageX);
|
|
54
|
-
}
|
|
55
|
-
})).current;
|
|
56
|
-
const onTrackLayout = (0, _react.useCallback)(e => {
|
|
57
|
-
trackWidth.current = e.nativeEvent.layout.width;
|
|
58
|
-
// We need pageX, measure the track view
|
|
59
|
-
}, []);
|
|
60
|
-
const trackRef = (0, _react.useRef)(null);
|
|
61
|
-
const measureTrack = (0, _react.useCallback)(() => {
|
|
62
|
-
trackRef.current?.measure?.((_x, _y, _w, _h, pageX) => {
|
|
63
|
-
trackX.current = pageX;
|
|
64
|
-
});
|
|
65
|
-
}, []);
|
|
66
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
67
|
-
style: styles.controlRow,
|
|
68
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
69
|
-
style: styles.label,
|
|
70
|
-
children: label
|
|
71
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
72
|
-
style: styles.controlRight,
|
|
73
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
74
|
-
style: styles.stepperButton,
|
|
75
|
-
onPress: () => onChange(clamp(value - step)),
|
|
76
|
-
activeOpacity: 0.6,
|
|
77
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
78
|
-
style: styles.stepperButtonText,
|
|
79
|
-
children: "-"
|
|
80
|
-
})
|
|
81
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
82
|
-
style: styles.sliderHitArea,
|
|
83
|
-
...panResponder.panHandlers,
|
|
84
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
85
|
-
ref: trackRef,
|
|
86
|
-
style: styles.sliderTrack,
|
|
87
|
-
onLayout: e => {
|
|
88
|
-
onTrackLayout(e);
|
|
89
|
-
measureTrack();
|
|
90
|
-
},
|
|
91
|
-
pointerEvents: "none",
|
|
92
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
93
|
-
style: [styles.sliderFill, {
|
|
94
|
-
width: `${fraction * 100}%`
|
|
95
|
-
}]
|
|
96
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
97
|
-
style: [styles.sliderThumb, {
|
|
98
|
-
left: `${fraction * 100}%`
|
|
99
|
-
}]
|
|
100
|
-
})]
|
|
101
|
-
})
|
|
102
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
103
|
-
style: styles.stepperButton,
|
|
104
|
-
onPress: () => onChange(clamp(value + step)),
|
|
105
|
-
activeOpacity: 0.6,
|
|
106
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
107
|
-
style: styles.stepperButtonText,
|
|
108
|
-
children: "+"
|
|
109
|
-
})
|
|
110
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
111
|
-
style: styles.valueText,
|
|
112
|
-
children: displayValue
|
|
113
|
-
})]
|
|
114
|
-
})]
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
function OverlayControls({
|
|
118
|
-
opacity,
|
|
119
|
-
scale,
|
|
120
|
-
offsetX,
|
|
121
|
-
offsetY,
|
|
122
|
-
onOpacityChange,
|
|
123
|
-
onScaleChange,
|
|
124
|
-
onOffsetChange,
|
|
125
|
-
opacityOnly
|
|
126
|
-
}) {
|
|
127
|
-
if (opacityOnly) {
|
|
128
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderStepper, {
|
|
129
|
-
label: "Opacity",
|
|
130
|
-
value: opacity,
|
|
131
|
-
min: 0,
|
|
132
|
-
max: 1,
|
|
133
|
-
step: 0.05,
|
|
134
|
-
displayValue: `${Math.round(opacity * 100)}%`,
|
|
135
|
-
onChange: onOpacityChange
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
139
|
-
style: styles.container,
|
|
140
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SliderStepper, {
|
|
141
|
-
label: "Opacity",
|
|
142
|
-
value: opacity,
|
|
143
|
-
min: 0,
|
|
144
|
-
max: 1,
|
|
145
|
-
step: 0.05,
|
|
146
|
-
displayValue: `${Math.round(opacity * 100)}%`,
|
|
147
|
-
onChange: onOpacityChange
|
|
148
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderStepper, {
|
|
149
|
-
label: "Scale",
|
|
150
|
-
value: scale,
|
|
151
|
-
min: 0.05,
|
|
152
|
-
max: 3,
|
|
153
|
-
step: 0.05,
|
|
154
|
-
displayValue: `${Math.round(scale * 100)}%`,
|
|
155
|
-
onChange: onScaleChange
|
|
156
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderStepper, {
|
|
157
|
-
label: "Offset X",
|
|
158
|
-
value: offsetX,
|
|
159
|
-
min: -200,
|
|
160
|
-
max: 200,
|
|
161
|
-
step: 2,
|
|
162
|
-
displayValue: `${Math.round(offsetX)}px`,
|
|
163
|
-
onChange: v => onOffsetChange(Math.round(v), offsetY)
|
|
164
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderStepper, {
|
|
165
|
-
label: "Offset Y",
|
|
166
|
-
value: offsetY,
|
|
167
|
-
min: -200,
|
|
168
|
-
max: 200,
|
|
169
|
-
step: 2,
|
|
170
|
-
displayValue: `${Math.round(offsetY)}px`,
|
|
171
|
-
onChange: v => onOffsetChange(offsetX, Math.round(v))
|
|
172
|
-
})]
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
const THUMB_SIZE = 18;
|
|
176
|
-
const styles = _reactNative.StyleSheet.create({
|
|
177
|
-
container: {
|
|
178
|
-
gap: 8
|
|
179
|
-
},
|
|
180
|
-
controlRow: {
|
|
181
|
-
paddingHorizontal: 12,
|
|
182
|
-
gap: 4
|
|
183
|
-
},
|
|
184
|
-
label: {
|
|
185
|
-
fontSize: 11,
|
|
186
|
-
fontWeight: "600",
|
|
187
|
-
color: _sharedUi.night.color.textTertiary,
|
|
188
|
-
textTransform: "uppercase",
|
|
189
|
-
letterSpacing: 0.5
|
|
190
|
-
},
|
|
191
|
-
controlRight: {
|
|
192
|
-
flexDirection: "row",
|
|
193
|
-
alignItems: "center",
|
|
194
|
-
gap: 6
|
|
195
|
-
},
|
|
196
|
-
stepperButton: {
|
|
197
|
-
width: 28,
|
|
198
|
-
height: 28,
|
|
199
|
-
borderRadius: 6,
|
|
200
|
-
backgroundColor: _sharedUi.night.color.surfaceElevated,
|
|
201
|
-
borderWidth: 1,
|
|
202
|
-
borderColor: _sharedUi.night.color.border,
|
|
203
|
-
justifyContent: "center",
|
|
204
|
-
alignItems: "center"
|
|
205
|
-
},
|
|
206
|
-
stepperButtonText: {
|
|
207
|
-
fontSize: 16,
|
|
208
|
-
fontWeight: "700",
|
|
209
|
-
color: _sharedUi.night.color.text,
|
|
210
|
-
lineHeight: 18
|
|
211
|
-
},
|
|
212
|
-
sliderHitArea: {
|
|
213
|
-
flex: 1,
|
|
214
|
-
paddingVertical: 20,
|
|
215
|
-
paddingHorizontal: 40,
|
|
216
|
-
marginVertical: -20,
|
|
217
|
-
marginHorizontal: -40
|
|
218
|
-
},
|
|
219
|
-
sliderTrack: {
|
|
220
|
-
height: 28,
|
|
221
|
-
justifyContent: "center",
|
|
222
|
-
borderRadius: 6,
|
|
223
|
-
backgroundColor: _sharedUi.night.color.bg,
|
|
224
|
-
borderWidth: 1,
|
|
225
|
-
borderColor: _sharedUi.night.color.border,
|
|
226
|
-
overflow: "hidden"
|
|
227
|
-
},
|
|
228
|
-
sliderFill: {
|
|
229
|
-
position: "absolute",
|
|
230
|
-
left: 0,
|
|
231
|
-
top: 0,
|
|
232
|
-
bottom: 0,
|
|
233
|
-
backgroundColor: _sharedUi.night.color.accentFill,
|
|
234
|
-
borderRadius: 5
|
|
235
|
-
},
|
|
236
|
-
sliderThumb: {
|
|
237
|
-
position: "absolute",
|
|
238
|
-
width: 4,
|
|
239
|
-
top: 4,
|
|
240
|
-
bottom: 4,
|
|
241
|
-
marginLeft: -2,
|
|
242
|
-
borderRadius: 2,
|
|
243
|
-
backgroundColor: _sharedUi.night.color.accent
|
|
244
|
-
},
|
|
245
|
-
valueText: {
|
|
246
|
-
fontSize: 11,
|
|
247
|
-
fontWeight: "600",
|
|
248
|
-
color: _sharedUi.night.color.text,
|
|
249
|
-
width: 45,
|
|
250
|
-
textAlign: "right",
|
|
251
|
-
fontFamily: _sharedUi.monoFont
|
|
252
|
-
}
|
|
253
|
-
});
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.OverlayControls=OverlayControls;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function SliderStepper({label:o,value:a,min:t,max:r,step:s,displayValue:u,onChange:n}){const i=(0,_react.useRef)(0);const l=(0,_react.useRef)(0);const c=(0,_react.useCallback)(e=>Math.max(t,Math.min(r,e)),[t,r]);const h=r>t?(a-t)/(r-t):0;const p=(0,_react.useRef)(n);const x=(0,_react.useRef)(c);const d=(0,_react.useRef)(t);const g=(0,_react.useRef)(r);p.current=n;x.current=c;d.current=t;g.current=r;const b=(0,_react.useCallback)(e=>{const f=e-l.current;const R=Math.max(0,Math.min(1,f/i.current));const v=d.current+R*(g.current-d.current);p.current(x.current(v))},[]);const m=(0,_react.useRef)(_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:e=>{b(e.nativeEvent.pageX)},onPanResponderMove:e=>{b(e.nativeEvent.pageX)}})).current;const j=(0,_react.useCallback)(e=>{i.current=e.nativeEvent.layout.width},[]);const y=(0,_react.useRef)(null);const T=(0,_react.useCallback)(()=>{y.current?.measure?.((e,f,R,v,w)=>{l.current=w})},[]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.controlRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.label,children:o}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.controlRight,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.stepperButton,onPress:()=>n(c(a-s)),activeOpacity:.6,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.stepperButtonText,children:"-"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sliderHitArea,...m.panHandlers,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:y,style:styles.sliderTrack,onLayout:e=>{j(e);T()},pointerEvents:"none",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.sliderFill,{width:`${h*100}%`}]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.sliderThumb,{left:`${h*100}%`}]})]})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.stepperButton,onPress:()=>n(c(a+s)),activeOpacity:.6,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.stepperButtonText,children:"+"})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.valueText,children:u})]})]})}function OverlayControls({opacity:o,scale:a,offsetX:t,offsetY:r,onOpacityChange:s,onScaleChange:u,onOffsetChange:n,opacityOnly:i}){if(i){return(0,_jsxRuntime.jsx)(SliderStepper,{label:"Opacity",value:o,min:0,max:1,step:.05,displayValue:`${Math.round(o*100)}%`,onChange:s})}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(SliderStepper,{label:"Opacity",value:o,min:0,max:1,step:.05,displayValue:`${Math.round(o*100)}%`,onChange:s}),(0,_jsxRuntime.jsx)(SliderStepper,{label:"Scale",value:a,min:.05,max:3,step:.05,displayValue:`${Math.round(a*100)}%`,onChange:u}),(0,_jsxRuntime.jsx)(SliderStepper,{label:"Offset X",value:t,min:-200,max:200,step:2,displayValue:`${Math.round(t)}px`,onChange:l=>n(Math.round(l),r)}),(0,_jsxRuntime.jsx)(SliderStepper,{label:"Offset Y",value:r,min:-200,max:200,step:2,displayValue:`${Math.round(r)}px`,onChange:l=>n(t,Math.round(l))})]})}const THUMB_SIZE=18;const styles=_reactNative.StyleSheet.create({container:{gap:8},controlRow:{paddingHorizontal:12,gap:4},label:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},controlRight:{flexDirection:"row",alignItems:"center",gap:6},stepperButton:{width:28,height:28,borderRadius:6,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border,justifyContent:"center",alignItems:"center"},stepperButtonText:{fontSize:16,fontWeight:"700",color:_sharedUi.night.color.text,lineHeight:18},sliderHitArea:{flex:1,paddingVertical:20,paddingHorizontal:40,marginVertical:-20,marginHorizontal:-40},sliderTrack:{height:28,justifyContent:"center",borderRadius:6,backgroundColor:_sharedUi.night.color.bg,borderWidth:1,borderColor:_sharedUi.night.color.border,overflow:"hidden"},sliderFill:{position:"absolute",left:0,top:0,bottom:0,backgroundColor:_sharedUi.night.color.accentFill,borderRadius:5},sliderThumb:{position:"absolute",width:4,top:4,bottom:4,marginLeft:-2,borderRadius:2,backgroundColor:_sharedUi.night.color.accent},valueText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.text,width:45,textAlign:"right",fontFamily:_sharedUi.monoFont}});
|
|
@@ -1,181 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.TargetList = TargetList;
|
|
7
|
-
var _reactNative = require("react-native");
|
|
8
|
-
var _sharedUi = require("@buoy-gg/shared-ui");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
/**
|
|
11
|
-
* List of discovered image-overlay target components.
|
|
12
|
-
* Styled to match RenderListItem from highlight-updates.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
function TargetRow({
|
|
16
|
-
target,
|
|
17
|
-
onSelect
|
|
18
|
-
}) {
|
|
19
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
20
|
-
style: styles.card,
|
|
21
|
-
onPress: onSelect,
|
|
22
|
-
activeOpacity: 0.7,
|
|
23
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
24
|
-
style: styles.colorIndicator
|
|
25
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
26
|
-
style: styles.content,
|
|
27
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
28
|
-
style: styles.topRow,
|
|
29
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
30
|
-
style: styles.label,
|
|
31
|
-
numberOfLines: 1,
|
|
32
|
-
children: target.label
|
|
33
|
-
})
|
|
34
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
35
|
-
style: styles.bottomRow,
|
|
36
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
37
|
-
style: styles.badgeRow,
|
|
38
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
39
|
-
style: styles.testIdBadge,
|
|
40
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Hash, {
|
|
41
|
-
size: 8,
|
|
42
|
-
color: _sharedUi.night.color.accent
|
|
43
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
44
|
-
style: styles.testIdBadgeText,
|
|
45
|
-
children: "testID"
|
|
46
|
-
})]
|
|
47
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
48
|
-
style: styles.testIdValue,
|
|
49
|
-
numberOfLines: 1,
|
|
50
|
-
children: target.testID
|
|
51
|
-
})]
|
|
52
|
-
}), target.componentName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
53
|
-
style: styles.componentName,
|
|
54
|
-
numberOfLines: 1,
|
|
55
|
-
children: target.componentName
|
|
56
|
-
})]
|
|
57
|
-
})]
|
|
58
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
|
|
59
|
-
size: 16,
|
|
60
|
-
color: _sharedUi.night.color.textTertiary
|
|
61
|
-
})]
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
function TargetList({
|
|
65
|
-
targets,
|
|
66
|
-
onSelect
|
|
67
|
-
}) {
|
|
68
|
-
if (targets.length === 0) {
|
|
69
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
|
|
70
|
-
testID: "buoy-image-overlay-empty"
|
|
71
|
-
// scanning = the screen was walked and nothing was tagged.
|
|
72
|
-
,
|
|
73
|
-
otto: "scanning",
|
|
74
|
-
title: "No targets found",
|
|
75
|
-
message: 'Tag components with\ntestID="image-target:YourLabel"'
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
|
|
79
|
-
style: styles.list,
|
|
80
|
-
contentContainerStyle: styles.listContent,
|
|
81
|
-
children: targets.map(target => /*#__PURE__*/(0, _jsxRuntime.jsx)(TargetRow, {
|
|
82
|
-
target: target,
|
|
83
|
-
onSelect: () => onSelect(target)
|
|
84
|
-
}, target.testID))
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
const styles = _reactNative.StyleSheet.create({
|
|
88
|
-
list: {
|
|
89
|
-
flex: 1
|
|
90
|
-
},
|
|
91
|
-
listContent: {
|
|
92
|
-
paddingTop: 8,
|
|
93
|
-
paddingBottom: 20
|
|
94
|
-
},
|
|
95
|
-
card: {
|
|
96
|
-
flexDirection: "row",
|
|
97
|
-
alignItems: "center",
|
|
98
|
-
paddingVertical: 10,
|
|
99
|
-
paddingHorizontal: 12,
|
|
100
|
-
marginHorizontal: 12,
|
|
101
|
-
marginBottom: 6,
|
|
102
|
-
backgroundColor: _sharedUi.night.color.surface,
|
|
103
|
-
borderRadius: 8,
|
|
104
|
-
borderWidth: 1,
|
|
105
|
-
borderColor: _sharedUi.night.color.border
|
|
106
|
-
},
|
|
107
|
-
colorIndicator: {
|
|
108
|
-
width: 4,
|
|
109
|
-
height: 36,
|
|
110
|
-
borderRadius: 2,
|
|
111
|
-
marginRight: 10,
|
|
112
|
-
backgroundColor: _sharedUi.night.color.accent
|
|
113
|
-
},
|
|
114
|
-
content: {
|
|
115
|
-
flex: 1,
|
|
116
|
-
marginRight: 8
|
|
117
|
-
},
|
|
118
|
-
topRow: {
|
|
119
|
-
flexDirection: "row",
|
|
120
|
-
alignItems: "center",
|
|
121
|
-
marginBottom: 4
|
|
122
|
-
},
|
|
123
|
-
label: {
|
|
124
|
-
fontSize: 13,
|
|
125
|
-
fontWeight: "600",
|
|
126
|
-
color: _sharedUi.night.color.text,
|
|
127
|
-
flex: 1
|
|
128
|
-
},
|
|
129
|
-
bottomRow: {
|
|
130
|
-
gap: 2
|
|
131
|
-
},
|
|
132
|
-
badgeRow: {
|
|
133
|
-
flexDirection: "row",
|
|
134
|
-
alignItems: "center",
|
|
135
|
-
gap: 4
|
|
136
|
-
},
|
|
137
|
-
testIdBadge: {
|
|
138
|
-
flexDirection: "row",
|
|
139
|
-
alignItems: "center",
|
|
140
|
-
paddingVertical: 2,
|
|
141
|
-
paddingHorizontal: 5,
|
|
142
|
-
borderRadius: 4,
|
|
143
|
-
backgroundColor: _sharedUi.night.color.accentSoft,
|
|
144
|
-
gap: 3
|
|
145
|
-
},
|
|
146
|
-
testIdBadgeText: {
|
|
147
|
-
fontSize: 9,
|
|
148
|
-
fontWeight: "700",
|
|
149
|
-
color: _sharedUi.night.color.accent
|
|
150
|
-
},
|
|
151
|
-
testIdValue: {
|
|
152
|
-
fontSize: 11,
|
|
153
|
-
color: _sharedUi.night.color.text,
|
|
154
|
-
fontFamily: _sharedUi.monoFont,
|
|
155
|
-
flex: 1
|
|
156
|
-
},
|
|
157
|
-
componentName: {
|
|
158
|
-
fontSize: 10,
|
|
159
|
-
color: "#a855f7",
|
|
160
|
-
fontFamily: _sharedUi.monoFont,
|
|
161
|
-
marginTop: 1
|
|
162
|
-
},
|
|
163
|
-
emptyState: {
|
|
164
|
-
alignItems: "center",
|
|
165
|
-
paddingVertical: 40,
|
|
166
|
-
paddingHorizontal: 32
|
|
167
|
-
},
|
|
168
|
-
emptyTitle: {
|
|
169
|
-
color: _sharedUi.night.color.text,
|
|
170
|
-
fontSize: 14,
|
|
171
|
-
fontWeight: "600",
|
|
172
|
-
marginBottom: 6
|
|
173
|
-
},
|
|
174
|
-
emptyText: {
|
|
175
|
-
color: _sharedUi.night.color.textTertiary,
|
|
176
|
-
fontSize: 12,
|
|
177
|
-
textAlign: "center",
|
|
178
|
-
lineHeight: 18,
|
|
179
|
-
fontFamily: _sharedUi.monoFont
|
|
180
|
-
}
|
|
181
|
-
});
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.TargetList=TargetList;var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function TargetRow({target:e,onSelect:t}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.card,onPress:t,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.colorIndicator}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.content,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.topRow,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.label,numberOfLines:1,children:e.label})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.bottomRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.testIdBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Hash,{size:8,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.testIdBadgeText,children:"testID"})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.testIdValue,numberOfLines:1,children:e.testID})]}),e.componentName&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.componentName,numberOfLines:1,children:e.componentName})]})]}),(0,_jsxRuntime.jsx)(_sharedUi.ChevronRight,{size:16,color:_sharedUi.night.color.textTertiary})]})}function TargetList({targets:e,onSelect:t}){if(e.length===0){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-image-overlay-empty",otto:"scanning",title:"No targets found",message:'Tag components with\ntestID="image-target:YourLabel"'})}return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:styles.list,contentContainerStyle:styles.listContent,children:e.map(o=>(0,_jsxRuntime.jsx)(TargetRow,{target:o,onSelect:()=>t(o)},o.testID))})}const styles=_reactNative.StyleSheet.create({list:{flex:1},listContent:{paddingTop:8,paddingBottom:20},card:{flexDirection:"row",alignItems:"center",paddingVertical:10,paddingHorizontal:12,marginHorizontal:12,marginBottom:6,backgroundColor:_sharedUi.night.color.surface,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border},colorIndicator:{width:4,height:36,borderRadius:2,marginRight:10,backgroundColor:_sharedUi.night.color.accent},content:{flex:1,marginRight:8},topRow:{flexDirection:"row",alignItems:"center",marginBottom:4},label:{fontSize:13,fontWeight:"600",color:_sharedUi.night.color.text,flex:1},bottomRow:{gap:2},badgeRow:{flexDirection:"row",alignItems:"center",gap:4},testIdBadge:{flexDirection:"row",alignItems:"center",paddingVertical:2,paddingHorizontal:5,borderRadius:4,backgroundColor:_sharedUi.night.color.accentSoft,gap:3},testIdBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.accent},testIdValue:{fontSize:11,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},componentName:{fontSize:10,color:"#a855f7",fontFamily:_sharedUi.monoFont,marginTop:1},emptyState:{alignItems:"center",paddingVertical:40,paddingHorizontal:32},emptyTitle:{color:_sharedUi.night.color.text,fontSize:14,fontWeight:"600",marginBottom:6},emptyText:{color:_sharedUi.night.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:18,fontFamily:_sharedUi.monoFont}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|