@terreno/ui 0.11.2 → 0.11.3
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/dist/PickerSelect.js +72 -17
- package/dist/PickerSelect.js.map +1 -1
- package/dist/SelectBadge.js +39 -4
- package/dist/SelectBadge.js.map +1 -1
- package/dist/WebDropdownMenu.d.ts +60 -0
- package/dist/WebDropdownMenu.js +63 -0
- package/dist/WebDropdownMenu.js.map +1 -0
- package/package.json +1 -1
- package/src/PickerSelect.tsx +109 -24
- package/src/SelectBadge.tsx +63 -5
- package/src/SelectBadge.web.test.tsx +75 -0
- package/src/WebDropdownMenu.test.tsx +180 -0
- package/src/WebDropdownMenu.tsx +183 -0
- package/src/__snapshots__/SelectBadge.test.tsx.snap +27 -0
package/dist/PickerSelect.js
CHANGED
|
@@ -24,6 +24,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
24
24
|
import { Keyboard, Modal, Platform, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
|
|
25
25
|
import { Icon } from "./Icon";
|
|
26
26
|
import { useTheme } from "./Theme";
|
|
27
|
+
import { useWebDropdownAnchor, WebDropdownMenu } from "./WebDropdownMenu";
|
|
27
28
|
export const defaultStyles = StyleSheet.create({
|
|
28
29
|
chevron: {
|
|
29
30
|
backgroundColor: "transparent",
|
|
@@ -53,6 +54,10 @@ export function RNPickerSelect({ onValueChange, value, items, placeholder, disab
|
|
|
53
54
|
const [orientation, setOrientation] = useState("portrait");
|
|
54
55
|
const [doneDepressed, setDoneDepressed] = useState(false);
|
|
55
56
|
const { theme } = useTheme();
|
|
57
|
+
// Web-only: anchor the custom dropdown menu to the trigger element so that
|
|
58
|
+
// Safari/Firefox/Chrome all render the same styled menu instead of the
|
|
59
|
+
// browser's native <select> UI.
|
|
60
|
+
const { anchor: webAnchor, measure: measureWebAnchor, triggerRef: webTriggerRef, } = useWebDropdownAnchor();
|
|
56
61
|
// On web, blur the active element before the picker modal opens to prevent
|
|
57
62
|
// "aria-hidden on a focused element" warnings from React Native Web.
|
|
58
63
|
useEffect(() => {
|
|
@@ -270,9 +275,55 @@ export function RNPickerSelect({ onValueChange, value, items, placeholder, disab
|
|
|
270
275
|
},
|
|
271
276
|
], children: _jsx(Picker, { dropdownIconColor: theme.text.primary, enabled: !disabled, onValueChange: onValueChangeEvent, selectedValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value, style: [{ color: theme.text.primary, width: "100%" }], testID: "android_picker", children: renderPickerItems() }) }));
|
|
272
277
|
};
|
|
273
|
-
//
|
|
278
|
+
// Custom web dropdown. Rendering the native <Picker> on web delegates
|
|
279
|
+
// styling to each browser (Safari in particular looks very different from
|
|
280
|
+
// Chrome/Firefox). Instead, we render a styled trigger + popup menu so the
|
|
281
|
+
// dropdown looks identical across browsers and matches the Terreno design.
|
|
282
|
+
const openWebMenu = () => {
|
|
283
|
+
if (disabled) {
|
|
284
|
+
return;
|
|
285
|
+
}
|
|
286
|
+
measureWebAnchor(() => {
|
|
287
|
+
setShowPicker(true);
|
|
288
|
+
if (onOpen) {
|
|
289
|
+
onOpen();
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
};
|
|
293
|
+
const closeWebMenu = () => {
|
|
294
|
+
setShowPicker(false);
|
|
295
|
+
if (onClose) {
|
|
296
|
+
onClose();
|
|
297
|
+
}
|
|
298
|
+
};
|
|
299
|
+
// Build the dropdown option list AND track each option's original index in
|
|
300
|
+
// `options` so `onValueChange` receives the same index that the native
|
|
301
|
+
// Picker would have reported (needed when a placeholder is present).
|
|
302
|
+
const { menuOptions: webMenuOptions, originalIndexes: webMenuOptionIndexes } = useMemo(() => {
|
|
303
|
+
var _a;
|
|
304
|
+
const menuOptions = [];
|
|
305
|
+
const originalIndexes = [];
|
|
306
|
+
for (let i = 0; i < options.length; i++) {
|
|
307
|
+
const item = options[i];
|
|
308
|
+
if (!item || typeof item !== "object" || typeof item.label !== "string") {
|
|
309
|
+
continue;
|
|
310
|
+
}
|
|
311
|
+
menuOptions.push({
|
|
312
|
+
color: item.color,
|
|
313
|
+
key: item.key,
|
|
314
|
+
label: item.label,
|
|
315
|
+
value: String((_a = item.value) !== null && _a !== void 0 ? _a : ""),
|
|
316
|
+
});
|
|
317
|
+
originalIndexes.push(i);
|
|
318
|
+
}
|
|
319
|
+
return { menuOptions, originalIndexes };
|
|
320
|
+
}, [options]);
|
|
274
321
|
const renderWeb = () => {
|
|
275
|
-
|
|
322
|
+
var _a, _b;
|
|
323
|
+
const displayLabel = (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.inputLabel) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _b !== void 0 ? _b : "";
|
|
324
|
+
const selectedOriginalIdx = getSelectedItem(itemKey, value).idx;
|
|
325
|
+
const webSelectedIndex = webMenuOptionIndexes.indexOf(selectedOriginalIdx);
|
|
326
|
+
return (_jsxs(View, { ref: webTriggerRef, style: [
|
|
276
327
|
defaultStyles.viewContainer,
|
|
277
328
|
{
|
|
278
329
|
backgroundColor: theme.surface.base,
|
|
@@ -281,23 +332,27 @@ export function RNPickerSelect({ onValueChange, value, items, placeholder, disab
|
|
|
281
332
|
disabled && {
|
|
282
333
|
backgroundColor: theme.surface.neutralLight,
|
|
283
334
|
},
|
|
284
|
-
], children:
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
borderWidth: 0,
|
|
290
|
-
height: "100%",
|
|
335
|
+
], children: [_jsxs(Pressable, Object.assign({ "aria-role": "button", disabled: disabled, onPress: openWebMenu, style: {
|
|
336
|
+
alignItems: "center",
|
|
337
|
+
flexDirection: "row",
|
|
338
|
+
justifyContent: "space-between",
|
|
339
|
+
minHeight: 40,
|
|
291
340
|
paddingHorizontal: 8,
|
|
292
|
-
paddingVertical: 8,
|
|
293
341
|
width: "100%",
|
|
294
|
-
},
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
342
|
+
}, testID: "web_picker" }, touchableWrapperProps, { children: [_jsx(Text, { numberOfLines: 1, style: {
|
|
343
|
+
color: disabled ? theme.text.secondaryLight : theme.text.primary,
|
|
344
|
+
flex: 1,
|
|
345
|
+
paddingRight: 8,
|
|
346
|
+
}, testID: "text_input", children: displayLabel }), _jsx(Icon, { color: disabled ? "secondaryLight" : "primary", iconName: showPicker ? "angle-up" : "angle-down", size: "sm" })] })), _jsx(WebDropdownMenu, { anchor: webAnchor, onClose: closeWebMenu, onSelect: (_val, idx) => {
|
|
347
|
+
var _a, _b;
|
|
348
|
+
const originalIndex = (_a = webMenuOptionIndexes[idx]) !== null && _a !== void 0 ? _a : idx;
|
|
349
|
+
// Pass the original (non-stringified) value through so lodash
|
|
350
|
+
// `isEqual` matching in `getSelectedItem` works for number /
|
|
351
|
+
// object values.
|
|
352
|
+
const originalValue = (_b = options[originalIndex]) === null || _b === void 0 ? void 0 : _b.value;
|
|
353
|
+
onValueChangeEvent(originalValue, originalIndex);
|
|
354
|
+
closeWebMenu();
|
|
355
|
+
}, options: webMenuOptions, selectedIndex: webSelectedIndex >= 0 ? webSelectedIndex : undefined, testIDPrefix: "web_dropdown", visible: showPicker })] }));
|
|
301
356
|
};
|
|
302
357
|
const render = () => {
|
|
303
358
|
if (Platform.OS === "ios") {
|
package/dist/PickerSelect.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerSelect.js","sourceRoot":"","sources":["../src/PickerSelect.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PickerSelect.js","sourceRoot":"","sources":["../src/PickerSelect.tsx"],"names":[],"mappings":"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"}
|
package/dist/SelectBadge.js
CHANGED
|
@@ -4,12 +4,17 @@ import { useCallback, useMemo, useState } from "react";
|
|
|
4
4
|
import { Modal, Platform, Text, TouchableOpacity, View } from "react-native";
|
|
5
5
|
import { Icon } from "./Icon";
|
|
6
6
|
import { useTheme } from "./Theme";
|
|
7
|
+
import { useWebDropdownAnchor, WebDropdownMenu } from "./WebDropdownMenu";
|
|
7
8
|
export const SelectBadge = ({ value, status = "info", secondary = false, customBackgroundColor, customTextColor, customBorderColor, disabled = false, options, onChange, }) => {
|
|
8
9
|
const { theme } = useTheme();
|
|
9
10
|
const [showPicker, setShowPicker] = useState(false);
|
|
10
11
|
// Temporary state to manage value changes for ios picker
|
|
11
12
|
// Assures the badge display value persists when user scrolls through options
|
|
12
13
|
const [iosDisplayValue, setIosDisplayValue] = useState(value);
|
|
14
|
+
// Web-only: anchor the custom dropdown menu to the trigger element so that
|
|
15
|
+
// Safari/Firefox/Chrome all render the same styled menu instead of the
|
|
16
|
+
// browser's native <select> UI.
|
|
17
|
+
const { anchor: webAnchor, measure: measureWebAnchor, triggerRef: webTriggerRef, } = useWebDropdownAnchor();
|
|
13
18
|
const secondaryBorderColors = {
|
|
14
19
|
custom: "#AAAAAA",
|
|
15
20
|
error: "#F39E9E",
|
|
@@ -114,17 +119,43 @@ export const SelectBadge = ({ value, status = "info", secondary = false, customB
|
|
|
114
119
|
var _a, _b;
|
|
115
120
|
return (_jsx(Picker, { enabled: !disabled, onValueChange: handleOnChange, selectedValue: (_b = (_a = findSelectedItem(value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : undefined, style: [
|
|
116
121
|
{
|
|
122
|
+
backgroundColor: "transparent",
|
|
117
123
|
color: "transparent",
|
|
118
124
|
height: "100%",
|
|
119
125
|
opacity: 0,
|
|
120
126
|
position: "absolute",
|
|
121
127
|
width: "100%",
|
|
122
128
|
},
|
|
123
|
-
// Android headless picker: transparent overlay to capture touches without visible UI.
|
|
124
|
-
Platform.OS !== "web" && { backgroundColor: "transparent" },
|
|
125
129
|
], children: renderPickerItems() }));
|
|
126
130
|
}, [disabled, findSelectedItem, value, handleOnChange, renderPickerItems]);
|
|
127
|
-
|
|
131
|
+
// Custom web dropdown. Rendering the native <Picker> on web delegates
|
|
132
|
+
// styling to each browser (Safari in particular looks very different from
|
|
133
|
+
// Chrome/Firefox). Instead, we render a styled popup menu anchored to the
|
|
134
|
+
// badge so the dropdown looks identical across browsers.
|
|
135
|
+
const webMenuOptions = useMemo(() => options.map((item) => ({ key: item.key, label: item.label, value: item.value })), [options]);
|
|
136
|
+
const renderWebPicker = useCallback(() => {
|
|
137
|
+
return (_jsx(WebDropdownMenu, { anchor: webAnchor, minWidth: 160, onClose: () => setShowPicker(false), onSelect: (val) => handleOnChange(val), options: webMenuOptions, optionTextStyle: { fontFamily: "text", fontSize: 12 }, selectedValue: value, testIDPrefix: "web_badge", visible: showPicker, width: undefined }));
|
|
138
|
+
}, [showPicker, webAnchor, webMenuOptions, value, handleOnChange]);
|
|
139
|
+
const openWebMenu = () => {
|
|
140
|
+
if (disabled) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
measureWebAnchor(() => {
|
|
144
|
+
setShowPicker(true);
|
|
145
|
+
});
|
|
146
|
+
};
|
|
147
|
+
return (_jsxs(View, { ref: webTriggerRef, style: { alignItems: "flex-start", opacity: disabled ? 0.5 : 1 }, children: [_jsx(TouchableOpacity, { accessibilityHint: "Opens the options picker", accessibilityLabel: "Open select badge options", "aria-role": "button", disabled: disabled, onPress: () => {
|
|
148
|
+
if (Platform.OS === "web") {
|
|
149
|
+
if (showPicker) {
|
|
150
|
+
setShowPicker(false);
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
openWebMenu();
|
|
154
|
+
}
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
setShowPicker(!showPicker);
|
|
158
|
+
}, children: _jsxs(View, { style: {
|
|
128
159
|
alignItems: "center",
|
|
129
160
|
display: "flex",
|
|
130
161
|
flexDirection: "row",
|
|
@@ -161,6 +192,10 @@ export const SelectBadge = ({ value, status = "info", secondary = false, customB
|
|
|
161
192
|
paddingHorizontal: theme.spacing.xs,
|
|
162
193
|
paddingVertical: 1,
|
|
163
194
|
width: "auto",
|
|
164
|
-
}, children: _jsx(Icon, { color: textColor, iconName: showPicker ? "chevron-up" : "chevron-down", size: "sm" }) })] }) }), Platform.OS === "ios"
|
|
195
|
+
}, children: _jsx(Icon, { color: textColor, iconName: showPicker ? "chevron-up" : "chevron-down", size: "sm" }) })] }) }), Platform.OS === "ios"
|
|
196
|
+
? renderIosPicker()
|
|
197
|
+
: Platform.OS === "web"
|
|
198
|
+
? renderWebPicker()
|
|
199
|
+
: renderPicker()] }));
|
|
165
200
|
};
|
|
166
201
|
//# sourceMappingURL=SelectBadge.js.map
|
package/dist/SelectBadge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBadge.js","sourceRoot":"","sources":["../src/SelectBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAEnD,OAAO,EAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAG3E,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectBadge.js","sourceRoot":"","sources":["../src/SelectBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAEnD,OAAO,EAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAG3E,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACjC,OAAO,EAAC,oBAAoB,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAEpG,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,MAAM,GAAG,MAAM,EACf,SAAS,GAAG,KAAK,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,GACS,EAAsB,EAAE;IACzC,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,yDAAyD;IACzD,6EAA6E;IAC7E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,KAAK,CAAC,CAAC;IAElF,2EAA2E;IAC3E,uEAAuE;IACvE,gCAAgC;IAChC,MAAM,EACJ,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,aAAa,GAC1B,GAAG,oBAAoB,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG;QAC5B,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;KACnB,CAAC;IAEF,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,SAAS,IAAI,MAAM,KAAK,QAAQ;QAAE,WAAW,GAAG,CAAC,CAAC;IAEtD,IAAI,UAAU,GAAoB,UAAU,CAAC;IAE7C,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,MAAM,KAAK,OAAO;YAAE,UAAU,GAAG,OAAO,CAAC;aACxC,IAAI,MAAM,KAAK,SAAS;YAAE,UAAU,GAAG,SAAS,CAAC;aACjD,IAAI,MAAM,KAAK,MAAM;YAAE,UAAU,GAAG,eAAe,CAAC;aACpD,IAAI,MAAM,KAAK,SAAS;YAAE,UAAU,GAAG,SAAS,CAAC;aACjD,IAAI,MAAM,KAAK,SAAS;YAAE,UAAU,GAAG,SAAS,CAAC;IACxD,CAAC;IAED,IAAI,YAAY,GAAuB,aAAa,CAAC;IAErD,IAAI,MAAM,KAAK,OAAO;QAAE,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC;SACrE,IAAI,MAAM,KAAK,SAAS;QAAE,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;SAChF,IAAI,MAAM,KAAK,MAAM;QAAE,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC;SACrF,IAAI,MAAM,KAAK,SAAS;QAAE,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;SAChF,IAAI,MAAM,KAAK,SAAS;QAAE,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC;IAEzF,MAAM,eAAe,GAAG,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAClG,MAAM,WAAW,GAAG,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC5F,MAAM,SAAS,GAAG,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEjF,IAAI,wBAAwB,GAAG,SAAS,CAAC;IACzC,IAAI,MAAM,KAAK,QAAQ;QAAE,wBAAwB,GAAG,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,SAAS,CAAC;SAC9E,IAAI,SAAS;QAAE,wBAAwB,GAAG,WAAW,CAAC;IAE3D,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,CAA4B,EAAsB,EAAE;QACnD,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;YAClC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC;QACxD,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC9B,OAAO,MAAA,MAAA,gBAAgB,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,KAAK,CAAC;IACjD,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,GAAW,EAAE,EAAE;QACd,MAAM,YAAY,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAC3C,IAAI,YAAY,EAAE,CAAC;YACjB,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAC7B,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,CACjC,KAAC,MAAM,CAAC,IAAI,IAA8B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAA5D,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAA0C,CACnF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,MAAM,oBAAoB,GAAG,CAAC,SAAiB,EAAE,EAAE;YACjD,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,IAAI,eAAe,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACjC,cAAc,CAAC,eAAe,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,OAAO,CACL,KAAC,KAAK,IACJ,aAAa,EAAC,OAAO,EACrB,cAAc,EAAE,aAAa,EAC7B,qBAAqB,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,EAChD,WAAW,QACX,OAAO,EAAE,UAAU,YAEnB,MAAC,IAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAE,cAAc,EAAE,UAAU,EAAC,aAChD,KAAC,gBAAgB,IACf,iBAAiB,EAAC,yBAAyB,EAC3C,kBAAkB,EAAC,sBAAsB,EACzC,aAAa,EAAE,CAAC,EAChB,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,GAChB,EACF,MAAC,IAAI,IACH,KAAK,EAAE;4BACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;4BAC3C,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;4BACpC,cAAc,EAAE,CAAC;4BACjB,MAAM,EAAE,GAAG;yBACZ,aAED,KAAC,IAAI,IACH,KAAK,EAAE;oCACL,UAAU,EAAE,QAAQ;oCACpB,eAAe,EAAE,SAAS;oCAC1B,MAAM,EAAE,EAAE;oCACV,cAAc,EAAE,QAAQ;oCACxB,KAAK,EAAE,MAAM;iCACd,YAED,KAAC,gBAAgB,IACf,iBAAiB,EAAC,0BAA0B,EAC5C,kBAAkB,EAAC,qBAAqB,eAC9B,QAAQ,EAClB,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAC,EAC/C,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE;wCACL,SAAS,EAAE,UAAU;wCACrB,YAAY,EAAE,EAAE;qCACjB,YAED,KAAC,IAAI,cACH,KAAC,IAAI,IACH,KAAK,EAAE;gDACL,KAAK,EAAE,SAAS;gDAChB,QAAQ,EAAE,EAAE;gDACZ,UAAU,EAAE,KAAK;gDACjB,UAAU,EAAE,CAAC;6CACd,qBAGI,GACF,GACU,GACd,EACP,KAAC,MAAM,IACL,OAAO,EAAE,CAAC,QAAQ,EAClB,aAAa,EAAE,oBAAoB,EACnC,aAAa,EAAE,eAAe,YAE7B,iBAAiB,EAAE,GACb,IACJ,IACF,GACD,CACT,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE7F,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;;QACpC,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAE,CAAC,QAAQ,EAClB,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,MAAA,MAAA,gBAAgB,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,SAAS,EAC1D,KAAK,EAAE;gBACL;oBACE,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,aAAa;oBACpB,MAAM,EAAE,MAAM;oBACd,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE,UAAU;oBACpB,KAAK,EAAE,MAAM;iBACd;aACF,YAEA,iBAAiB,EAAE,GACb,CACV,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE3E,sEAAsE;IACtE,0EAA0E;IAC1E,0EAA0E;IAC1E,yDAAyD;IACzD,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC,EACpF,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,OAAO,CACL,KAAC,eAAe,IACd,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EACtC,OAAO,EAAE,cAAc,EACvB,eAAe,EAAE,EAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAC,EACnD,aAAa,EAAE,KAAK,EACpB,YAAY,EAAC,WAAW,EACxB,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,SAAS,GAChB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QACD,gBAAgB,CAAC,GAAG,EAAE;YACpB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,EAAC,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAC,aACtF,KAAC,gBAAgB,IACf,iBAAiB,EAAC,0BAA0B,EAC5C,kBAAkB,EAAC,2BAA2B,eACpC,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;wBAC1B,IAAI,UAAU,EAAE,CAAC;4BACf,aAAa,CAAC,KAAK,CAAC,CAAC;wBACvB,CAAC;6BAAM,CAAC;4BACN,WAAW,EAAE,CAAC;wBAChB,CAAC;wBACD,OAAO;oBACT,CAAC;oBACD,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;gBAC7B,CAAC,YAED,MAAC,IAAI,IACH,KAAK,EAAE;wBACL,UAAU,EAAE,QAAQ;wBACpB,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK;wBACpB,MAAM,EAAE,EAAE;wBACV,KAAK,EAAE,MAAM;qBACd,aAED,KAAC,IAAI,IACH,KAAK,EAAE;gCACL,UAAU,EAAE,QAAQ;gCACpB,eAAe;gCACf,sBAAsB,EAAE,CAAC;gCACzB,WAAW;gCACX,mBAAmB,EAAE,CAAC;gCACtB,WAAW;gCACX,aAAa,EAAE,KAAK;gCACpB,MAAM,EAAE,EAAE;gCACV,cAAc,EAAE,QAAQ;gCACxB,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;gCACnC,KAAK,EAAE,MAAM;6BACd,YAED,KAAC,IAAI,IACH,KAAK,EAAE;oCACL,KAAK,EAAE,SAAS;oCAChB,UAAU,EAAE,MAAM;oCAClB,QAAQ,EAAE,EAAE;oCACZ,UAAU,EAAE,KAAK;iCAClB,YAEA,UAAU,GACN,GACF,EACP,KAAC,IAAI,IACH,KAAK,EAAE;gCACL,UAAU,EAAE,QAAQ;gCACpB,eAAe;gCACf,uBAAuB,EAAE,CAAC;gCAC1B,WAAW,EAAE,wBAAwB;gCACrC,eAAe,EAAE,CAAC;gCAClB,oBAAoB,EAAE,CAAC;gCACvB,WAAW;gCACX,aAAa,EAAE,KAAK;gCACpB,MAAM,EAAE,EAAE;gCACV,cAAc,EAAE,QAAQ;gCACxB,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;gCACnC,eAAe,EAAE,CAAC;gCAClB,KAAK,EAAE,MAAM;6BACd,YAED,KAAC,IAAI,IACH,KAAK,EAAE,SAAgB,EACvB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,IAAI,EAAC,IAAI,GACT,GACG,IACF,GACU,EAClB,QAAQ,CAAC,EAAE,KAAK,KAAK;gBACpB,CAAC,CAAC,eAAe,EAAE;gBACnB,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK;oBACrB,CAAC,CAAC,eAAe,EAAE;oBACnB,CAAC,CAAC,YAAY,EAAE,IACf,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { type ReactElement } from "react";
|
|
2
|
+
import { type DimensionValue, type TextStyle, View } from "react-native";
|
|
3
|
+
export interface WebDropdownMenuOption {
|
|
4
|
+
key?: string | number;
|
|
5
|
+
label: string;
|
|
6
|
+
value: string;
|
|
7
|
+
color?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface WebDropdownAnchor {
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
}
|
|
15
|
+
export interface WebDropdownMenuProps {
|
|
16
|
+
/** Controls visibility of the popup. */
|
|
17
|
+
visible: boolean;
|
|
18
|
+
/** Position of the trigger element so the menu can be anchored beneath it. */
|
|
19
|
+
anchor: WebDropdownAnchor;
|
|
20
|
+
/** Options to render in the list. */
|
|
21
|
+
options: WebDropdownMenuOption[];
|
|
22
|
+
/** Currently selected value (used to highlight the matching option). */
|
|
23
|
+
selectedValue?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Optional index of the currently selected option. When provided, takes
|
|
26
|
+
* precedence over `selectedValue` — useful when option values aren't
|
|
27
|
+
* unique (e.g. a placeholder with an empty value sharing the same string
|
|
28
|
+
* representation as another option).
|
|
29
|
+
*/
|
|
30
|
+
selectedIndex?: number;
|
|
31
|
+
/** Called when an option is chosen. */
|
|
32
|
+
onSelect: (value: string, index: number) => void;
|
|
33
|
+
/** Called when the backdrop is pressed or Escape is hit. */
|
|
34
|
+
onClose: () => void;
|
|
35
|
+
/** Optional fixed width for the menu. Defaults to the trigger width. */
|
|
36
|
+
width?: DimensionValue;
|
|
37
|
+
/** Optional minimum width for the menu. */
|
|
38
|
+
minWidth?: DimensionValue;
|
|
39
|
+
/** Additional style applied to each option's label. */
|
|
40
|
+
optionTextStyle?: TextStyle;
|
|
41
|
+
/** Prefix for the testIDs on the menu / backdrop / option nodes. */
|
|
42
|
+
testIDPrefix?: string;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Shared web-only popup used by `RNPickerSelect` and `SelectBadge` so every
|
|
46
|
+
* browser renders the same styled dropdown instead of falling back to the
|
|
47
|
+
* platform-native `<select>` UI. Must be anchored to a trigger element via
|
|
48
|
+
* `useWebDropdownAnchor` (or an equivalent measurement).
|
|
49
|
+
*/
|
|
50
|
+
export declare const WebDropdownMenu: ({ visible, anchor, options, selectedValue, selectedIndex, onSelect, onClose, width, minWidth, optionTextStyle, testIDPrefix, }: WebDropdownMenuProps) => ReactElement;
|
|
51
|
+
/**
|
|
52
|
+
* Hook that wires up a `View` ref + anchor state for use with
|
|
53
|
+
* `WebDropdownMenu`. Measure the trigger via `measure()` before opening so
|
|
54
|
+
* the menu lines up beneath it across browsers.
|
|
55
|
+
*/
|
|
56
|
+
export declare const useWebDropdownAnchor: () => {
|
|
57
|
+
triggerRef: React.RefObject<View | null>;
|
|
58
|
+
anchor: WebDropdownAnchor;
|
|
59
|
+
measure: (onMeasured: (anchor: WebDropdownAnchor) => void) => void;
|
|
60
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState } from "react";
|
|
3
|
+
import { Modal, Pressable, ScrollView, Text, View, } from "react-native";
|
|
4
|
+
import { useTheme } from "./Theme";
|
|
5
|
+
/**
|
|
6
|
+
* Shared web-only popup used by `RNPickerSelect` and `SelectBadge` so every
|
|
7
|
+
* browser renders the same styled dropdown instead of falling back to the
|
|
8
|
+
* platform-native `<select>` UI. Must be anchored to a trigger element via
|
|
9
|
+
* `useWebDropdownAnchor` (or an equivalent measurement).
|
|
10
|
+
*/
|
|
11
|
+
export const WebDropdownMenu = ({ visible, anchor, options, selectedValue, selectedIndex, onSelect, onClose, width, minWidth, optionTextStyle, testIDPrefix = "web_dropdown", }) => {
|
|
12
|
+
const { theme } = useTheme();
|
|
13
|
+
return (_jsxs(Modal, { animationType: "none", onRequestClose: onClose, testID: `${testIDPrefix}_modal`, transparent: true, visible: visible, children: [_jsx(Pressable, { "aria-role": "button", onPress: onClose, style: { flex: 1 }, testID: `${testIDPrefix}_backdrop` }), _jsx(View, { style: {
|
|
14
|
+
backgroundColor: theme.surface.base,
|
|
15
|
+
borderColor: theme.border.dark,
|
|
16
|
+
borderRadius: 4,
|
|
17
|
+
borderWidth: 1,
|
|
18
|
+
left: anchor.x,
|
|
19
|
+
maxHeight: 300,
|
|
20
|
+
minWidth,
|
|
21
|
+
overflow: "hidden",
|
|
22
|
+
position: "absolute",
|
|
23
|
+
shadowColor: "#000",
|
|
24
|
+
shadowOffset: { height: 2, width: 0 },
|
|
25
|
+
shadowOpacity: 0.15,
|
|
26
|
+
shadowRadius: 8,
|
|
27
|
+
top: anchor.y + anchor.height + 4,
|
|
28
|
+
width: width !== null && width !== void 0 ? width : anchor.width,
|
|
29
|
+
}, testID: `${testIDPrefix}_menu`, children: _jsx(ScrollView, { children: options.map((item, idx) => {
|
|
30
|
+
var _a, _b;
|
|
31
|
+
const isSelected = selectedIndex !== undefined ? idx === selectedIndex : item.value === selectedValue;
|
|
32
|
+
return (_jsx(Pressable, { "aria-role": "button", onPress: () => onSelect(item.value, idx), style: (state) => ({
|
|
33
|
+
backgroundColor: isSelected || state.hovered || state.pressed
|
|
34
|
+
? theme.surface.neutralLight
|
|
35
|
+
: theme.surface.base,
|
|
36
|
+
paddingHorizontal: 12,
|
|
37
|
+
paddingVertical: 10,
|
|
38
|
+
}), testID: `${testIDPrefix}_option_${item.value}`, children: _jsx(Text, { style: Object.assign({ color: (_a = item.color) !== null && _a !== void 0 ? _a : theme.text.primary, fontWeight: isSelected ? "600" : "400" }, optionTextStyle), children: item.label }) }, (_b = item.key) !== null && _b !== void 0 ? _b : idx));
|
|
39
|
+
}) }) })] }));
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* Hook that wires up a `View` ref + anchor state for use with
|
|
43
|
+
* `WebDropdownMenu`. Measure the trigger via `measure()` before opening so
|
|
44
|
+
* the menu lines up beneath it across browsers.
|
|
45
|
+
*/
|
|
46
|
+
export const useWebDropdownAnchor = () => {
|
|
47
|
+
const triggerRef = useRef(null);
|
|
48
|
+
const [anchor, setAnchor] = useState({ height: 0, width: 0, x: 0, y: 0 });
|
|
49
|
+
const measure = (onMeasured) => {
|
|
50
|
+
const node = triggerRef.current;
|
|
51
|
+
if (node && typeof node.measureInWindow === "function") {
|
|
52
|
+
node.measureInWindow((x, y, w, h) => {
|
|
53
|
+
const next = { height: h, width: w, x, y };
|
|
54
|
+
setAnchor(next);
|
|
55
|
+
onMeasured(next);
|
|
56
|
+
});
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
onMeasured(anchor);
|
|
60
|
+
};
|
|
61
|
+
return { anchor, measure, triggerRef };
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=WebDropdownMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WebDropdownMenu.js","sourceRoot":"","sources":["../src/WebDropdownMenu.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/PickerSelect.tsx
CHANGED
|
@@ -40,6 +40,7 @@ import {
|
|
|
40
40
|
|
|
41
41
|
import {Icon} from "./Icon";
|
|
42
42
|
import {useTheme} from "./Theme";
|
|
43
|
+
import {useWebDropdownAnchor, WebDropdownMenu, type WebDropdownMenuOption} from "./WebDropdownMenu";
|
|
43
44
|
|
|
44
45
|
export const defaultStyles = StyleSheet.create({
|
|
45
46
|
chevron: {
|
|
@@ -129,6 +130,15 @@ export function RNPickerSelect({
|
|
|
129
130
|
const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
|
|
130
131
|
const {theme} = useTheme();
|
|
131
132
|
|
|
133
|
+
// Web-only: anchor the custom dropdown menu to the trigger element so that
|
|
134
|
+
// Safari/Firefox/Chrome all render the same styled menu instead of the
|
|
135
|
+
// browser's native <select> UI.
|
|
136
|
+
const {
|
|
137
|
+
anchor: webAnchor,
|
|
138
|
+
measure: measureWebAnchor,
|
|
139
|
+
triggerRef: webTriggerRef,
|
|
140
|
+
} = useWebDropdownAnchor();
|
|
141
|
+
|
|
132
142
|
// On web, blur the active element before the picker modal opens to prevent
|
|
133
143
|
// "aria-hidden on a focused element" warnings from React Native Web.
|
|
134
144
|
useEffect(() => {
|
|
@@ -520,10 +530,61 @@ export function RNPickerSelect({
|
|
|
520
530
|
);
|
|
521
531
|
};
|
|
522
532
|
|
|
523
|
-
//
|
|
533
|
+
// Custom web dropdown. Rendering the native <Picker> on web delegates
|
|
534
|
+
// styling to each browser (Safari in particular looks very different from
|
|
535
|
+
// Chrome/Firefox). Instead, we render a styled trigger + popup menu so the
|
|
536
|
+
// dropdown looks identical across browsers and matches the Terreno design.
|
|
537
|
+
const openWebMenu = (): void => {
|
|
538
|
+
if (disabled) {
|
|
539
|
+
return;
|
|
540
|
+
}
|
|
541
|
+
measureWebAnchor(() => {
|
|
542
|
+
setShowPicker(true);
|
|
543
|
+
if (onOpen) {
|
|
544
|
+
onOpen();
|
|
545
|
+
}
|
|
546
|
+
});
|
|
547
|
+
};
|
|
548
|
+
|
|
549
|
+
const closeWebMenu = (): void => {
|
|
550
|
+
setShowPicker(false);
|
|
551
|
+
if (onClose) {
|
|
552
|
+
onClose();
|
|
553
|
+
}
|
|
554
|
+
};
|
|
555
|
+
|
|
556
|
+
// Build the dropdown option list AND track each option's original index in
|
|
557
|
+
// `options` so `onValueChange` receives the same index that the native
|
|
558
|
+
// Picker would have reported (needed when a placeholder is present).
|
|
559
|
+
const {menuOptions: webMenuOptions, originalIndexes: webMenuOptionIndexes} = useMemo<{
|
|
560
|
+
menuOptions: WebDropdownMenuOption[];
|
|
561
|
+
originalIndexes: number[];
|
|
562
|
+
}>(() => {
|
|
563
|
+
const menuOptions: WebDropdownMenuOption[] = [];
|
|
564
|
+
const originalIndexes: number[] = [];
|
|
565
|
+
for (let i = 0; i < options.length; i++) {
|
|
566
|
+
const item = options[i];
|
|
567
|
+
if (!item || typeof item !== "object" || typeof item.label !== "string") {
|
|
568
|
+
continue;
|
|
569
|
+
}
|
|
570
|
+
menuOptions.push({
|
|
571
|
+
color: item.color,
|
|
572
|
+
key: item.key,
|
|
573
|
+
label: item.label,
|
|
574
|
+
value: String(item.value ?? ""),
|
|
575
|
+
});
|
|
576
|
+
originalIndexes.push(i);
|
|
577
|
+
}
|
|
578
|
+
return {menuOptions, originalIndexes};
|
|
579
|
+
}, [options]);
|
|
580
|
+
|
|
524
581
|
const renderWeb = () => {
|
|
582
|
+
const displayLabel = selectedItem?.inputLabel ?? selectedItem?.label ?? "";
|
|
583
|
+
const selectedOriginalIdx = getSelectedItem(itemKey, value).idx;
|
|
584
|
+
const webSelectedIndex = webMenuOptionIndexes.indexOf(selectedOriginalIdx);
|
|
525
585
|
return (
|
|
526
586
|
<View
|
|
587
|
+
ref={webTriggerRef}
|
|
527
588
|
style={[
|
|
528
589
|
defaultStyles.viewContainer,
|
|
529
590
|
{
|
|
@@ -535,31 +596,55 @@ export function RNPickerSelect({
|
|
|
535
596
|
},
|
|
536
597
|
]}
|
|
537
598
|
>
|
|
538
|
-
<
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
style={
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
paddingVertical: 8,
|
|
551
|
-
width: "100%",
|
|
552
|
-
},
|
|
553
|
-
disabled && {
|
|
554
|
-
backgroundColor: theme.surface.neutralLight,
|
|
555
|
-
color: theme.text.secondaryLight,
|
|
556
|
-
opacity: 1,
|
|
557
|
-
},
|
|
558
|
-
]}
|
|
599
|
+
<Pressable
|
|
600
|
+
aria-role="button"
|
|
601
|
+
disabled={disabled}
|
|
602
|
+
onPress={openWebMenu}
|
|
603
|
+
style={{
|
|
604
|
+
alignItems: "center",
|
|
605
|
+
flexDirection: "row",
|
|
606
|
+
justifyContent: "space-between",
|
|
607
|
+
minHeight: 40,
|
|
608
|
+
paddingHorizontal: 8,
|
|
609
|
+
width: "100%",
|
|
610
|
+
}}
|
|
559
611
|
testID="web_picker"
|
|
612
|
+
{...touchableWrapperProps}
|
|
560
613
|
>
|
|
561
|
-
|
|
562
|
-
|
|
614
|
+
<Text
|
|
615
|
+
numberOfLines={1}
|
|
616
|
+
style={{
|
|
617
|
+
color: disabled ? theme.text.secondaryLight : theme.text.primary,
|
|
618
|
+
flex: 1,
|
|
619
|
+
paddingRight: 8,
|
|
620
|
+
}}
|
|
621
|
+
testID="text_input"
|
|
622
|
+
>
|
|
623
|
+
{displayLabel}
|
|
624
|
+
</Text>
|
|
625
|
+
<Icon
|
|
626
|
+
color={disabled ? "secondaryLight" : "primary"}
|
|
627
|
+
iconName={showPicker ? "angle-up" : "angle-down"}
|
|
628
|
+
size="sm"
|
|
629
|
+
/>
|
|
630
|
+
</Pressable>
|
|
631
|
+
<WebDropdownMenu
|
|
632
|
+
anchor={webAnchor}
|
|
633
|
+
onClose={closeWebMenu}
|
|
634
|
+
onSelect={(_val, idx) => {
|
|
635
|
+
const originalIndex = webMenuOptionIndexes[idx] ?? idx;
|
|
636
|
+
// Pass the original (non-stringified) value through so lodash
|
|
637
|
+
// `isEqual` matching in `getSelectedItem` works for number /
|
|
638
|
+
// object values.
|
|
639
|
+
const originalValue = options[originalIndex]?.value;
|
|
640
|
+
onValueChangeEvent(originalValue, originalIndex);
|
|
641
|
+
closeWebMenu();
|
|
642
|
+
}}
|
|
643
|
+
options={webMenuOptions}
|
|
644
|
+
selectedIndex={webSelectedIndex >= 0 ? webSelectedIndex : undefined}
|
|
645
|
+
testIDPrefix="web_dropdown"
|
|
646
|
+
visible={showPicker}
|
|
647
|
+
/>
|
|
563
648
|
</View>
|
|
564
649
|
);
|
|
565
650
|
};
|
package/src/SelectBadge.tsx
CHANGED
|
@@ -6,6 +6,7 @@ import {Modal, Platform, Text, TouchableOpacity, View} from "react-native";
|
|
|
6
6
|
import type {FieldOption, SelectBadgeProps, SurfaceTheme, TextTheme} from "./Common";
|
|
7
7
|
import {Icon} from "./Icon";
|
|
8
8
|
import {useTheme} from "./Theme";
|
|
9
|
+
import {useWebDropdownAnchor, WebDropdownMenu, type WebDropdownMenuOption} from "./WebDropdownMenu";
|
|
9
10
|
|
|
10
11
|
export const SelectBadge = ({
|
|
11
12
|
value,
|
|
@@ -24,6 +25,15 @@ export const SelectBadge = ({
|
|
|
24
25
|
// Assures the badge display value persists when user scrolls through options
|
|
25
26
|
const [iosDisplayValue, setIosDisplayValue] = useState<string | undefined>(value);
|
|
26
27
|
|
|
28
|
+
// Web-only: anchor the custom dropdown menu to the trigger element so that
|
|
29
|
+
// Safari/Firefox/Chrome all render the same styled menu instead of the
|
|
30
|
+
// browser's native <select> UI.
|
|
31
|
+
const {
|
|
32
|
+
anchor: webAnchor,
|
|
33
|
+
measure: measureWebAnchor,
|
|
34
|
+
triggerRef: webTriggerRef,
|
|
35
|
+
} = useWebDropdownAnchor();
|
|
36
|
+
|
|
27
37
|
const secondaryBorderColors = {
|
|
28
38
|
custom: "#AAAAAA",
|
|
29
39
|
error: "#F39E9E",
|
|
@@ -190,14 +200,13 @@ export const SelectBadge = ({
|
|
|
190
200
|
selectedValue={findSelectedItem(value)?.value ?? undefined}
|
|
191
201
|
style={[
|
|
192
202
|
{
|
|
203
|
+
backgroundColor: "transparent",
|
|
193
204
|
color: "transparent",
|
|
194
205
|
height: "100%",
|
|
195
206
|
opacity: 0,
|
|
196
207
|
position: "absolute",
|
|
197
208
|
width: "100%",
|
|
198
209
|
},
|
|
199
|
-
// Android headless picker: transparent overlay to capture touches without visible UI.
|
|
200
|
-
Platform.OS !== "web" && {backgroundColor: "transparent"},
|
|
201
210
|
]}
|
|
202
211
|
>
|
|
203
212
|
{renderPickerItems()}
|
|
@@ -205,14 +214,59 @@ export const SelectBadge = ({
|
|
|
205
214
|
);
|
|
206
215
|
}, [disabled, findSelectedItem, value, handleOnChange, renderPickerItems]);
|
|
207
216
|
|
|
217
|
+
// Custom web dropdown. Rendering the native <Picker> on web delegates
|
|
218
|
+
// styling to each browser (Safari in particular looks very different from
|
|
219
|
+
// Chrome/Firefox). Instead, we render a styled popup menu anchored to the
|
|
220
|
+
// badge so the dropdown looks identical across browsers.
|
|
221
|
+
const webMenuOptions = useMemo<WebDropdownMenuOption[]>(
|
|
222
|
+
() => options.map((item) => ({key: item.key, label: item.label, value: item.value})),
|
|
223
|
+
[options]
|
|
224
|
+
);
|
|
225
|
+
|
|
226
|
+
const renderWebPicker = useCallback(() => {
|
|
227
|
+
return (
|
|
228
|
+
<WebDropdownMenu
|
|
229
|
+
anchor={webAnchor}
|
|
230
|
+
minWidth={160}
|
|
231
|
+
onClose={() => setShowPicker(false)}
|
|
232
|
+
onSelect={(val) => handleOnChange(val)}
|
|
233
|
+
options={webMenuOptions}
|
|
234
|
+
optionTextStyle={{fontFamily: "text", fontSize: 12}}
|
|
235
|
+
selectedValue={value}
|
|
236
|
+
testIDPrefix="web_badge"
|
|
237
|
+
visible={showPicker}
|
|
238
|
+
width={undefined}
|
|
239
|
+
/>
|
|
240
|
+
);
|
|
241
|
+
}, [showPicker, webAnchor, webMenuOptions, value, handleOnChange]);
|
|
242
|
+
|
|
243
|
+
const openWebMenu = (): void => {
|
|
244
|
+
if (disabled) {
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
measureWebAnchor(() => {
|
|
248
|
+
setShowPicker(true);
|
|
249
|
+
});
|
|
250
|
+
};
|
|
251
|
+
|
|
208
252
|
return (
|
|
209
|
-
<View style={{alignItems: "flex-start", opacity: disabled ? 0.5 : 1}}>
|
|
253
|
+
<View ref={webTriggerRef} style={{alignItems: "flex-start", opacity: disabled ? 0.5 : 1}}>
|
|
210
254
|
<TouchableOpacity
|
|
211
255
|
accessibilityHint="Opens the options picker"
|
|
212
256
|
accessibilityLabel="Open select badge options"
|
|
213
257
|
aria-role="button"
|
|
214
258
|
disabled={disabled}
|
|
215
|
-
onPress={() =>
|
|
259
|
+
onPress={() => {
|
|
260
|
+
if (Platform.OS === "web") {
|
|
261
|
+
if (showPicker) {
|
|
262
|
+
setShowPicker(false);
|
|
263
|
+
} else {
|
|
264
|
+
openWebMenu();
|
|
265
|
+
}
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
setShowPicker(!showPicker);
|
|
269
|
+
}}
|
|
216
270
|
>
|
|
217
271
|
<View
|
|
218
272
|
style={{
|
|
@@ -274,7 +328,11 @@ export const SelectBadge = ({
|
|
|
274
328
|
</View>
|
|
275
329
|
</View>
|
|
276
330
|
</TouchableOpacity>
|
|
277
|
-
{Platform.OS === "ios"
|
|
331
|
+
{Platform.OS === "ios"
|
|
332
|
+
? renderIosPicker()
|
|
333
|
+
: Platform.OS === "web"
|
|
334
|
+
? renderWebPicker()
|
|
335
|
+
: renderPicker()}
|
|
278
336
|
</View>
|
|
279
337
|
);
|
|
280
338
|
};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import {afterAll, beforeAll, describe, expect, it, mock} from "bun:test";
|
|
2
|
+
import {act, fireEvent} from "@testing-library/react-native";
|
|
3
|
+
import {Platform} from "react-native";
|
|
4
|
+
|
|
5
|
+
import {SelectBadge} from "./SelectBadge";
|
|
6
|
+
import {renderWithTheme} from "./test-utils";
|
|
7
|
+
|
|
8
|
+
// Force Platform.OS to "web" for this file so SelectBadge takes the web
|
|
9
|
+
// rendering branch (custom WebDropdownMenu instead of the native iOS Picker).
|
|
10
|
+
const originalOS = Platform.OS;
|
|
11
|
+
beforeAll(() => {
|
|
12
|
+
Object.defineProperty(Platform, "OS", {configurable: true, value: "web"});
|
|
13
|
+
});
|
|
14
|
+
afterAll(() => {
|
|
15
|
+
Object.defineProperty(Platform, "OS", {configurable: true, value: originalOS});
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
describe("SelectBadge (web)", () => {
|
|
19
|
+
const options = [
|
|
20
|
+
{label: "Option A", value: "a"},
|
|
21
|
+
{label: "Option B", value: "b"},
|
|
22
|
+
{label: "Option C", value: "c"},
|
|
23
|
+
];
|
|
24
|
+
|
|
25
|
+
it("renders the styled web dropdown menu (not the native picker) when opened", () => {
|
|
26
|
+
const {getByLabelText, getByTestId} = renderWithTheme(
|
|
27
|
+
<SelectBadge onChange={() => {}} options={options} value="a" />
|
|
28
|
+
);
|
|
29
|
+
expect(getByTestId("web_badge_modal").props.visible).toBe(false);
|
|
30
|
+
act(() => {
|
|
31
|
+
fireEvent.press(getByLabelText("Open select badge options"));
|
|
32
|
+
});
|
|
33
|
+
expect(getByTestId("web_badge_modal").props.visible).toBe(true);
|
|
34
|
+
expect(getByTestId("web_badge_menu")).toBeTruthy();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it("invokes onChange with the selected value when an option is pressed", () => {
|
|
38
|
+
const handleChange = mock((_val: string) => {});
|
|
39
|
+
const {getByLabelText, getByTestId} = renderWithTheme(
|
|
40
|
+
<SelectBadge onChange={handleChange} options={options} value="a" />
|
|
41
|
+
);
|
|
42
|
+
act(() => {
|
|
43
|
+
fireEvent.press(getByLabelText("Open select badge options"));
|
|
44
|
+
});
|
|
45
|
+
act(() => {
|
|
46
|
+
fireEvent.press(getByTestId("web_badge_option_b"));
|
|
47
|
+
});
|
|
48
|
+
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
49
|
+
expect(handleChange).toHaveBeenCalledWith("b");
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
it("closes the menu when the backdrop is pressed", () => {
|
|
53
|
+
const {getByLabelText, getByTestId} = renderWithTheme(
|
|
54
|
+
<SelectBadge onChange={() => {}} options={options} value="a" />
|
|
55
|
+
);
|
|
56
|
+
act(() => {
|
|
57
|
+
fireEvent.press(getByLabelText("Open select badge options"));
|
|
58
|
+
});
|
|
59
|
+
expect(getByTestId("web_badge_modal").props.visible).toBe(true);
|
|
60
|
+
act(() => {
|
|
61
|
+
fireEvent.press(getByTestId("web_badge_backdrop"));
|
|
62
|
+
});
|
|
63
|
+
expect(getByTestId("web_badge_modal").props.visible).toBe(false);
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it("does not open the dropdown when disabled", () => {
|
|
67
|
+
const {getByLabelText, getByTestId} = renderWithTheme(
|
|
68
|
+
<SelectBadge disabled onChange={() => {}} options={options} value="a" />
|
|
69
|
+
);
|
|
70
|
+
act(() => {
|
|
71
|
+
fireEvent.press(getByLabelText("Open select badge options"));
|
|
72
|
+
});
|
|
73
|
+
expect(getByTestId("web_badge_modal").props.visible).toBe(false);
|
|
74
|
+
});
|
|
75
|
+
});
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import {describe, expect, it, mock} from "bun:test";
|
|
2
|
+
import {act, fireEvent, renderHook} from "@testing-library/react-native";
|
|
3
|
+
|
|
4
|
+
import {renderWithTheme} from "./test-utils";
|
|
5
|
+
import {useWebDropdownAnchor, WebDropdownMenu} from "./WebDropdownMenu";
|
|
6
|
+
|
|
7
|
+
describe("WebDropdownMenu", () => {
|
|
8
|
+
const anchor = {height: 40, width: 200, x: 16, y: 32};
|
|
9
|
+
const options = [
|
|
10
|
+
{label: "Option A", value: "a"},
|
|
11
|
+
{label: "Option B", value: "b"},
|
|
12
|
+
{label: "Option C", value: "c"},
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
it("marks the underlying Modal hidden when not visible", () => {
|
|
16
|
+
const {getByTestId} = renderWithTheme(
|
|
17
|
+
<WebDropdownMenu
|
|
18
|
+
anchor={anchor}
|
|
19
|
+
onClose={() => {}}
|
|
20
|
+
onSelect={() => {}}
|
|
21
|
+
options={options}
|
|
22
|
+
visible={false}
|
|
23
|
+
/>
|
|
24
|
+
);
|
|
25
|
+
expect(getByTestId("web_dropdown_modal").props.visible).toBe(false);
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
it("marks the underlying Modal visible when open", () => {
|
|
29
|
+
const {getByTestId} = renderWithTheme(
|
|
30
|
+
<WebDropdownMenu
|
|
31
|
+
anchor={anchor}
|
|
32
|
+
onClose={() => {}}
|
|
33
|
+
onSelect={() => {}}
|
|
34
|
+
options={options}
|
|
35
|
+
visible
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
expect(getByTestId("web_dropdown_modal").props.visible).toBe(true);
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it("renders every option when visible", () => {
|
|
42
|
+
const {getByText} = renderWithTheme(
|
|
43
|
+
<WebDropdownMenu
|
|
44
|
+
anchor={anchor}
|
|
45
|
+
onClose={() => {}}
|
|
46
|
+
onSelect={() => {}}
|
|
47
|
+
options={options}
|
|
48
|
+
selectedValue="b"
|
|
49
|
+
visible
|
|
50
|
+
/>
|
|
51
|
+
);
|
|
52
|
+
expect(getByText("Option A")).toBeTruthy();
|
|
53
|
+
expect(getByText("Option B")).toBeTruthy();
|
|
54
|
+
expect(getByText("Option C")).toBeTruthy();
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
it("invokes onSelect with value and index when an option is pressed", () => {
|
|
58
|
+
const onSelect = mock(() => {});
|
|
59
|
+
const {getByTestId} = renderWithTheme(
|
|
60
|
+
<WebDropdownMenu
|
|
61
|
+
anchor={anchor}
|
|
62
|
+
onClose={() => {}}
|
|
63
|
+
onSelect={onSelect}
|
|
64
|
+
options={options}
|
|
65
|
+
visible
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
fireEvent.press(getByTestId("web_dropdown_option_b"));
|
|
69
|
+
expect(onSelect).toHaveBeenCalledTimes(1);
|
|
70
|
+
expect(onSelect.mock.calls[0]).toEqual(["b", 1]);
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
it("invokes onClose when the backdrop is pressed", () => {
|
|
74
|
+
const onClose = mock(() => {});
|
|
75
|
+
const {getByTestId} = renderWithTheme(
|
|
76
|
+
<WebDropdownMenu
|
|
77
|
+
anchor={anchor}
|
|
78
|
+
onClose={onClose}
|
|
79
|
+
onSelect={() => {}}
|
|
80
|
+
options={options}
|
|
81
|
+
visible
|
|
82
|
+
/>
|
|
83
|
+
);
|
|
84
|
+
fireEvent.press(getByTestId("web_dropdown_backdrop"));
|
|
85
|
+
expect(onClose).toHaveBeenCalledTimes(1);
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
it("anchors the menu below the trigger using the provided anchor", () => {
|
|
89
|
+
const {getByTestId} = renderWithTheme(
|
|
90
|
+
<WebDropdownMenu
|
|
91
|
+
anchor={anchor}
|
|
92
|
+
onClose={() => {}}
|
|
93
|
+
onSelect={() => {}}
|
|
94
|
+
options={options}
|
|
95
|
+
visible
|
|
96
|
+
/>
|
|
97
|
+
);
|
|
98
|
+
const menu = getByTestId("web_dropdown_menu");
|
|
99
|
+
const style = Array.isArray(menu.props.style)
|
|
100
|
+
? Object.assign({}, ...menu.props.style)
|
|
101
|
+
: menu.props.style;
|
|
102
|
+
expect(style.left).toBe(anchor.x);
|
|
103
|
+
expect(style.top).toBe(anchor.y + anchor.height + 4);
|
|
104
|
+
expect(style.width).toBe(anchor.width);
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
it("uses the custom testID prefix when provided", () => {
|
|
108
|
+
const {getByTestId, queryByTestId} = renderWithTheme(
|
|
109
|
+
<WebDropdownMenu
|
|
110
|
+
anchor={anchor}
|
|
111
|
+
onClose={() => {}}
|
|
112
|
+
onSelect={() => {}}
|
|
113
|
+
options={options}
|
|
114
|
+
testIDPrefix="badge_menu"
|
|
115
|
+
visible
|
|
116
|
+
/>
|
|
117
|
+
);
|
|
118
|
+
expect(getByTestId("badge_menu_menu")).toBeTruthy();
|
|
119
|
+
expect(getByTestId("badge_menu_backdrop")).toBeTruthy();
|
|
120
|
+
expect(getByTestId("badge_menu_option_a")).toBeTruthy();
|
|
121
|
+
expect(queryByTestId("web_dropdown_menu")).toBeNull();
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
it("highlights the option matched by selectedIndex regardless of duplicated values", () => {
|
|
125
|
+
const dupOptions = [
|
|
126
|
+
{label: "Placeholder", value: ""},
|
|
127
|
+
{label: "Blank option", value: ""},
|
|
128
|
+
{label: "Real", value: "real"},
|
|
129
|
+
];
|
|
130
|
+
const {getByText} = renderWithTheme(
|
|
131
|
+
<WebDropdownMenu
|
|
132
|
+
anchor={anchor}
|
|
133
|
+
onClose={() => {}}
|
|
134
|
+
onSelect={() => {}}
|
|
135
|
+
options={dupOptions}
|
|
136
|
+
selectedIndex={1}
|
|
137
|
+
visible
|
|
138
|
+
/>
|
|
139
|
+
);
|
|
140
|
+
expect(getByText("Blank option").props.style.fontWeight).toBe("600");
|
|
141
|
+
expect(getByText("Placeholder").props.style.fontWeight).toBe("400");
|
|
142
|
+
expect(getByText("Real").props.style.fontWeight).toBe("400");
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
describe("useWebDropdownAnchor", () => {
|
|
147
|
+
it("exposes a default zero-sized anchor before measuring", () => {
|
|
148
|
+
const {result} = renderHook(() => useWebDropdownAnchor());
|
|
149
|
+
expect(result.current.anchor).toEqual({height: 0, width: 0, x: 0, y: 0});
|
|
150
|
+
expect(result.current.triggerRef.current).toBeNull();
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
it("invokes the callback synchronously with the existing anchor when the ref is empty", () => {
|
|
154
|
+
const {result} = renderHook(() => useWebDropdownAnchor());
|
|
155
|
+
const onMeasured = mock(() => {});
|
|
156
|
+
act(() => {
|
|
157
|
+
result.current.measure(onMeasured);
|
|
158
|
+
});
|
|
159
|
+
expect(onMeasured).toHaveBeenCalledTimes(1);
|
|
160
|
+
expect(onMeasured.mock.calls[0][0]).toEqual({height: 0, width: 0, x: 0, y: 0});
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
it("measures the trigger and updates anchor state when the ref has measureInWindow", () => {
|
|
164
|
+
const {result} = renderHook(() => useWebDropdownAnchor());
|
|
165
|
+
// Simulate a mounted native View by assigning a measureInWindow shim to the
|
|
166
|
+
// ref. The hook does not care whether the node is a real View instance.
|
|
167
|
+
const measureInWindow = mock((cb: (x: number, y: number, w: number, h: number) => void) => {
|
|
168
|
+
cb(10, 20, 100, 40);
|
|
169
|
+
});
|
|
170
|
+
(result.current.triggerRef as {current: unknown}).current = {measureInWindow};
|
|
171
|
+
const onMeasured = mock(() => {});
|
|
172
|
+
act(() => {
|
|
173
|
+
result.current.measure(onMeasured);
|
|
174
|
+
});
|
|
175
|
+
expect(measureInWindow).toHaveBeenCalledTimes(1);
|
|
176
|
+
expect(onMeasured).toHaveBeenCalledTimes(1);
|
|
177
|
+
expect(onMeasured.mock.calls[0][0]).toEqual({height: 40, width: 100, x: 10, y: 20});
|
|
178
|
+
expect(result.current.anchor).toEqual({height: 40, width: 100, x: 10, y: 20});
|
|
179
|
+
});
|
|
180
|
+
});
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import {type ReactElement, useRef, useState} from "react";
|
|
2
|
+
import {
|
|
3
|
+
type DimensionValue,
|
|
4
|
+
Modal,
|
|
5
|
+
Pressable,
|
|
6
|
+
ScrollView,
|
|
7
|
+
Text,
|
|
8
|
+
type TextStyle,
|
|
9
|
+
View,
|
|
10
|
+
} from "react-native";
|
|
11
|
+
|
|
12
|
+
import {useTheme} from "./Theme";
|
|
13
|
+
|
|
14
|
+
export interface WebDropdownMenuOption {
|
|
15
|
+
key?: string | number;
|
|
16
|
+
label: string;
|
|
17
|
+
value: string;
|
|
18
|
+
color?: string;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface WebDropdownAnchor {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
24
|
+
width: number;
|
|
25
|
+
height: number;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface WebDropdownMenuProps {
|
|
29
|
+
/** Controls visibility of the popup. */
|
|
30
|
+
visible: boolean;
|
|
31
|
+
/** Position of the trigger element so the menu can be anchored beneath it. */
|
|
32
|
+
anchor: WebDropdownAnchor;
|
|
33
|
+
/** Options to render in the list. */
|
|
34
|
+
options: WebDropdownMenuOption[];
|
|
35
|
+
/** Currently selected value (used to highlight the matching option). */
|
|
36
|
+
selectedValue?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Optional index of the currently selected option. When provided, takes
|
|
39
|
+
* precedence over `selectedValue` — useful when option values aren't
|
|
40
|
+
* unique (e.g. a placeholder with an empty value sharing the same string
|
|
41
|
+
* representation as another option).
|
|
42
|
+
*/
|
|
43
|
+
selectedIndex?: number;
|
|
44
|
+
/** Called when an option is chosen. */
|
|
45
|
+
onSelect: (value: string, index: number) => void;
|
|
46
|
+
/** Called when the backdrop is pressed or Escape is hit. */
|
|
47
|
+
onClose: () => void;
|
|
48
|
+
/** Optional fixed width for the menu. Defaults to the trigger width. */
|
|
49
|
+
width?: DimensionValue;
|
|
50
|
+
/** Optional minimum width for the menu. */
|
|
51
|
+
minWidth?: DimensionValue;
|
|
52
|
+
/** Additional style applied to each option's label. */
|
|
53
|
+
optionTextStyle?: TextStyle;
|
|
54
|
+
/** Prefix for the testIDs on the menu / backdrop / option nodes. */
|
|
55
|
+
testIDPrefix?: string;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
interface PressableWebState {
|
|
59
|
+
pressed: boolean;
|
|
60
|
+
hovered?: boolean;
|
|
61
|
+
focused?: boolean;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Shared web-only popup used by `RNPickerSelect` and `SelectBadge` so every
|
|
66
|
+
* browser renders the same styled dropdown instead of falling back to the
|
|
67
|
+
* platform-native `<select>` UI. Must be anchored to a trigger element via
|
|
68
|
+
* `useWebDropdownAnchor` (or an equivalent measurement).
|
|
69
|
+
*/
|
|
70
|
+
export const WebDropdownMenu = ({
|
|
71
|
+
visible,
|
|
72
|
+
anchor,
|
|
73
|
+
options,
|
|
74
|
+
selectedValue,
|
|
75
|
+
selectedIndex,
|
|
76
|
+
onSelect,
|
|
77
|
+
onClose,
|
|
78
|
+
width,
|
|
79
|
+
minWidth,
|
|
80
|
+
optionTextStyle,
|
|
81
|
+
testIDPrefix = "web_dropdown",
|
|
82
|
+
}: WebDropdownMenuProps): ReactElement => {
|
|
83
|
+
const {theme} = useTheme();
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<Modal
|
|
87
|
+
animationType="none"
|
|
88
|
+
onRequestClose={onClose}
|
|
89
|
+
testID={`${testIDPrefix}_modal`}
|
|
90
|
+
transparent
|
|
91
|
+
visible={visible}
|
|
92
|
+
>
|
|
93
|
+
<Pressable
|
|
94
|
+
aria-role="button"
|
|
95
|
+
onPress={onClose}
|
|
96
|
+
style={{flex: 1}}
|
|
97
|
+
testID={`${testIDPrefix}_backdrop`}
|
|
98
|
+
/>
|
|
99
|
+
<View
|
|
100
|
+
style={{
|
|
101
|
+
backgroundColor: theme.surface.base,
|
|
102
|
+
borderColor: theme.border.dark,
|
|
103
|
+
borderRadius: 4,
|
|
104
|
+
borderWidth: 1,
|
|
105
|
+
left: anchor.x,
|
|
106
|
+
maxHeight: 300,
|
|
107
|
+
minWidth,
|
|
108
|
+
overflow: "hidden",
|
|
109
|
+
position: "absolute",
|
|
110
|
+
shadowColor: "#000",
|
|
111
|
+
shadowOffset: {height: 2, width: 0},
|
|
112
|
+
shadowOpacity: 0.15,
|
|
113
|
+
shadowRadius: 8,
|
|
114
|
+
top: anchor.y + anchor.height + 4,
|
|
115
|
+
width: width ?? anchor.width,
|
|
116
|
+
}}
|
|
117
|
+
testID={`${testIDPrefix}_menu`}
|
|
118
|
+
>
|
|
119
|
+
<ScrollView>
|
|
120
|
+
{options.map((item, idx) => {
|
|
121
|
+
const isSelected =
|
|
122
|
+
selectedIndex !== undefined ? idx === selectedIndex : item.value === selectedValue;
|
|
123
|
+
return (
|
|
124
|
+
<Pressable
|
|
125
|
+
aria-role="button"
|
|
126
|
+
key={item.key ?? idx}
|
|
127
|
+
onPress={() => onSelect(item.value, idx)}
|
|
128
|
+
style={(state: PressableWebState) => ({
|
|
129
|
+
backgroundColor:
|
|
130
|
+
isSelected || state.hovered || state.pressed
|
|
131
|
+
? theme.surface.neutralLight
|
|
132
|
+
: theme.surface.base,
|
|
133
|
+
paddingHorizontal: 12,
|
|
134
|
+
paddingVertical: 10,
|
|
135
|
+
})}
|
|
136
|
+
testID={`${testIDPrefix}_option_${item.value}`}
|
|
137
|
+
>
|
|
138
|
+
<Text
|
|
139
|
+
style={{
|
|
140
|
+
color: item.color ?? theme.text.primary,
|
|
141
|
+
fontWeight: isSelected ? "600" : "400",
|
|
142
|
+
...optionTextStyle,
|
|
143
|
+
}}
|
|
144
|
+
>
|
|
145
|
+
{item.label}
|
|
146
|
+
</Text>
|
|
147
|
+
</Pressable>
|
|
148
|
+
);
|
|
149
|
+
})}
|
|
150
|
+
</ScrollView>
|
|
151
|
+
</View>
|
|
152
|
+
</Modal>
|
|
153
|
+
);
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* Hook that wires up a `View` ref + anchor state for use with
|
|
158
|
+
* `WebDropdownMenu`. Measure the trigger via `measure()` before opening so
|
|
159
|
+
* the menu lines up beneath it across browsers.
|
|
160
|
+
*/
|
|
161
|
+
export const useWebDropdownAnchor = (): {
|
|
162
|
+
triggerRef: React.RefObject<View | null>;
|
|
163
|
+
anchor: WebDropdownAnchor;
|
|
164
|
+
measure: (onMeasured: (anchor: WebDropdownAnchor) => void) => void;
|
|
165
|
+
} => {
|
|
166
|
+
const triggerRef = useRef<View>(null);
|
|
167
|
+
const [anchor, setAnchor] = useState<WebDropdownAnchor>({height: 0, width: 0, x: 0, y: 0});
|
|
168
|
+
|
|
169
|
+
const measure = (onMeasured: (next: WebDropdownAnchor) => void): void => {
|
|
170
|
+
const node = triggerRef.current;
|
|
171
|
+
if (node && typeof node.measureInWindow === "function") {
|
|
172
|
+
node.measureInWindow((x, y, w, h) => {
|
|
173
|
+
const next = {height: h, width: w, x, y};
|
|
174
|
+
setAnchor(next);
|
|
175
|
+
onMeasured(next);
|
|
176
|
+
});
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
onMeasured(anchor);
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
return {anchor, measure, triggerRef};
|
|
183
|
+
};
|
|
@@ -254,6 +254,9 @@ exports[`SelectBadge renders correctly with default props 1`] = `
|
|
|
254
254
|
},
|
|
255
255
|
],
|
|
256
256
|
"props": {
|
|
257
|
+
"ref": {
|
|
258
|
+
"current": null,
|
|
259
|
+
},
|
|
257
260
|
"style": {
|
|
258
261
|
"alignItems": "flex-start",
|
|
259
262
|
"opacity": 1,
|
|
@@ -518,6 +521,9 @@ exports[`SelectBadge renders with info status (default) 1`] = `
|
|
|
518
521
|
},
|
|
519
522
|
],
|
|
520
523
|
"props": {
|
|
524
|
+
"ref": {
|
|
525
|
+
"current": null,
|
|
526
|
+
},
|
|
521
527
|
"style": {
|
|
522
528
|
"alignItems": "flex-start",
|
|
523
529
|
"opacity": 1,
|
|
@@ -782,6 +788,9 @@ exports[`SelectBadge renders with success status 1`] = `
|
|
|
782
788
|
},
|
|
783
789
|
],
|
|
784
790
|
"props": {
|
|
791
|
+
"ref": {
|
|
792
|
+
"current": null,
|
|
793
|
+
},
|
|
785
794
|
"style": {
|
|
786
795
|
"alignItems": "flex-start",
|
|
787
796
|
"opacity": 1,
|
|
@@ -1046,6 +1055,9 @@ exports[`SelectBadge renders with warning status 1`] = `
|
|
|
1046
1055
|
},
|
|
1047
1056
|
],
|
|
1048
1057
|
"props": {
|
|
1058
|
+
"ref": {
|
|
1059
|
+
"current": null,
|
|
1060
|
+
},
|
|
1049
1061
|
"style": {
|
|
1050
1062
|
"alignItems": "flex-start",
|
|
1051
1063
|
"opacity": 1,
|
|
@@ -1310,6 +1322,9 @@ exports[`SelectBadge renders with error status 1`] = `
|
|
|
1310
1322
|
},
|
|
1311
1323
|
],
|
|
1312
1324
|
"props": {
|
|
1325
|
+
"ref": {
|
|
1326
|
+
"current": null,
|
|
1327
|
+
},
|
|
1313
1328
|
"style": {
|
|
1314
1329
|
"alignItems": "flex-start",
|
|
1315
1330
|
"opacity": 1,
|
|
@@ -1574,6 +1589,9 @@ exports[`SelectBadge renders with neutral status 1`] = `
|
|
|
1574
1589
|
},
|
|
1575
1590
|
],
|
|
1576
1591
|
"props": {
|
|
1592
|
+
"ref": {
|
|
1593
|
+
"current": null,
|
|
1594
|
+
},
|
|
1577
1595
|
"style": {
|
|
1578
1596
|
"alignItems": "flex-start",
|
|
1579
1597
|
"opacity": 1,
|
|
@@ -1838,6 +1856,9 @@ exports[`SelectBadge renders with secondary style 1`] = `
|
|
|
1838
1856
|
},
|
|
1839
1857
|
],
|
|
1840
1858
|
"props": {
|
|
1859
|
+
"ref": {
|
|
1860
|
+
"current": null,
|
|
1861
|
+
},
|
|
1841
1862
|
"style": {
|
|
1842
1863
|
"alignItems": "flex-start",
|
|
1843
1864
|
"opacity": 1,
|
|
@@ -2102,6 +2123,9 @@ exports[`SelectBadge renders with custom colors 1`] = `
|
|
|
2102
2123
|
},
|
|
2103
2124
|
],
|
|
2104
2125
|
"props": {
|
|
2126
|
+
"ref": {
|
|
2127
|
+
"current": null,
|
|
2128
|
+
},
|
|
2105
2129
|
"style": {
|
|
2106
2130
|
"alignItems": "flex-start",
|
|
2107
2131
|
"opacity": 1,
|
|
@@ -2366,6 +2390,9 @@ exports[`SelectBadge renders disabled state 1`] = `
|
|
|
2366
2390
|
},
|
|
2367
2391
|
],
|
|
2368
2392
|
"props": {
|
|
2393
|
+
"ref": {
|
|
2394
|
+
"current": null,
|
|
2395
|
+
},
|
|
2369
2396
|
"style": {
|
|
2370
2397
|
"alignItems": "flex-start",
|
|
2371
2398
|
"opacity": 0.5,
|