react-native-platform-components 0.8.10 → 0.9.0
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 +126 -30
- package/android/src/main/java/com/platformcomponents/PCImageLoader.kt +88 -0
- package/android/src/main/java/com/platformcomponents/PCSegmentedControlView.kt +288 -29
- package/android/src/main/java/com/platformcomponents/PCSegmentedControlViewManager.kt +74 -8
- package/ios/PCImageLoader.swift +58 -0
- package/ios/PCSegmentedControl.mm +85 -25
- package/ios/PCSegmentedControl.swift +231 -308
- package/lib/commonjs/DatePickerNativeComponent.ts +4 -2
- package/lib/commonjs/SegmentedControl.js +138 -6
- package/lib/commonjs/SegmentedControl.js.map +1 -1
- package/lib/commonjs/SegmentedControlNativeComponent.ts +62 -8
- package/lib/commonjs/SelectionMenuNativeComponent.ts +4 -2
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/module/DatePickerNativeComponent.ts +4 -2
- package/lib/module/SegmentedControl.js +138 -7
- package/lib/module/SegmentedControl.js.map +1 -1
- package/lib/module/SegmentedControlNativeComponent.ts +62 -8
- package/lib/module/SelectionMenuNativeComponent.ts +4 -2
- package/lib/module/index.web.js.map +1 -1
- package/lib/typescript/commonjs/src/DatePickerNativeComponent.d.ts +2 -2
- package/lib/typescript/commonjs/src/DatePickerNativeComponent.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/SegmentedControl.d.ts +111 -6
- package/lib/typescript/commonjs/src/SegmentedControl.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/SegmentedControlNativeComponent.d.ts +46 -7
- package/lib/typescript/commonjs/src/SegmentedControlNativeComponent.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/SelectionMenuNativeComponent.d.ts +2 -2
- package/lib/typescript/commonjs/src/SelectionMenuNativeComponent.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/index.web.d.ts +36 -1
- package/lib/typescript/commonjs/src/index.web.d.ts.map +1 -1
- package/lib/typescript/module/src/DatePicker.d.ts +1 -1
- package/lib/typescript/module/src/DatePicker.d.ts.map +1 -1
- package/lib/typescript/module/src/DatePickerNativeComponent.d.ts +2 -2
- package/lib/typescript/module/src/DatePickerNativeComponent.d.ts.map +1 -1
- package/lib/typescript/module/src/SegmentedControl.d.ts +111 -6
- package/lib/typescript/module/src/SegmentedControl.d.ts.map +1 -1
- package/lib/typescript/module/src/SegmentedControlNativeComponent.d.ts +46 -7
- package/lib/typescript/module/src/SegmentedControlNativeComponent.d.ts.map +1 -1
- package/lib/typescript/module/src/SelectionMenu.d.ts +1 -1
- package/lib/typescript/module/src/SelectionMenu.d.ts.map +1 -1
- package/lib/typescript/module/src/SelectionMenuNativeComponent.d.ts +2 -2
- package/lib/typescript/module/src/SelectionMenuNativeComponent.d.ts.map +1 -1
- package/lib/typescript/module/src/index.d.ts +6 -6
- package/lib/typescript/module/src/index.d.ts.map +1 -1
- package/lib/typescript/module/src/index.web.d.ts +36 -1
- package/lib/typescript/module/src/index.web.d.ts.map +1 -1
- package/package.json +29 -25
- package/plugin/tsconfig.json +2 -2
- package/src/DatePickerNativeComponent.ts +4 -2
- package/src/SegmentedControl.tsx +238 -11
- package/src/SegmentedControlNativeComponent.ts +62 -8
- package/src/SelectionMenuNativeComponent.ts +4 -2
- package/src/index.web.tsx +34 -1
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SegmentedControl = SegmentedControl;
|
|
7
|
+
exports.resolveSegmentIcon = resolveSegmentIcon;
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _reactNative = require("react-native");
|
|
9
10
|
var _SegmentedControlNativeComponent = _interopRequireDefault(require("./SegmentedControlNativeComponent"));
|
|
@@ -16,6 +17,101 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
16
17
|
// Fabric's shadow node measurement isn't being called on initial render,
|
|
17
18
|
// so we apply a minHeight that matches Material design touch target guidelines.
|
|
18
19
|
const ANDROID_MIN_HEIGHT = 48;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* A single icon source.
|
|
23
|
+
*
|
|
24
|
+
* - `string`: shorthand for an SF Symbol name on iOS and a drawable resource
|
|
25
|
+
* name on Android (the original API).
|
|
26
|
+
* - `{ type: 'sfSymbol' }`: an SF Symbol. iOS only; ignored on Android.
|
|
27
|
+
* - `{ type: 'drawable' }`: a drawable from the app's `res/drawable`.
|
|
28
|
+
* Android only; ignored on iOS.
|
|
29
|
+
* - `{ type: 'image' }`: an image asset (`require('./icon.png')`) or a
|
|
30
|
+
* `{ uri }` source. Works on both platforms. Images are drawn as tinted
|
|
31
|
+
* templates unless `tinted` is `false`.
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* An icon for a segment: a single source used on both platforms, or a
|
|
36
|
+
* per-platform pair so callers don't need to branch on `Platform.OS`.
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* How labels and icons combine for segments that have an icon.
|
|
41
|
+
*
|
|
42
|
+
* - `auto` (default): platform behavior. iOS shows the icon in place of the
|
|
43
|
+
* label (UISegmentedControl cannot show both); Android shows icon and label.
|
|
44
|
+
* - `labeled`: always show the label. iOS drops the icon; Android shows both.
|
|
45
|
+
* - `unlabeled`: show only the icon. Segments without an icon still show
|
|
46
|
+
* their label. Screen readers still announce the label on both platforms.
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Font for segment labels. Each field falls back to the platform default.
|
|
51
|
+
*/
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Badge colors. Both default to the platform look (red with white text).
|
|
55
|
+
*/
|
|
56
|
+
|
|
57
|
+
const NO_ICON = {
|
|
58
|
+
iconType: '',
|
|
59
|
+
iconName: '',
|
|
60
|
+
iconUri: '',
|
|
61
|
+
iconScale: 1,
|
|
62
|
+
iconTinted: 'true'
|
|
63
|
+
};
|
|
64
|
+
function pickIconSource(icon) {
|
|
65
|
+
if (icon === undefined || typeof icon === 'string' || 'type' in icon) {
|
|
66
|
+
return icon;
|
|
67
|
+
}
|
|
68
|
+
return _reactNative.Platform.OS === 'ios' ? icon.ios : icon.android;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Flattens the public icon shape into the strings native expects, dropping
|
|
73
|
+
* sources that don't apply to the current platform.
|
|
74
|
+
*/
|
|
75
|
+
function resolveSegmentIcon(icon) {
|
|
76
|
+
const source = pickIconSource(icon);
|
|
77
|
+
if (source === undefined) return NO_ICON;
|
|
78
|
+
if (typeof source === 'string') {
|
|
79
|
+
if (source.length === 0) return NO_ICON;
|
|
80
|
+
return {
|
|
81
|
+
...NO_ICON,
|
|
82
|
+
iconType: _reactNative.Platform.OS === 'ios' ? 'sfSymbol' : 'drawable',
|
|
83
|
+
iconName: source
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
switch (source.type) {
|
|
87
|
+
case 'sfSymbol':
|
|
88
|
+
return _reactNative.Platform.OS === 'ios' ? {
|
|
89
|
+
...NO_ICON,
|
|
90
|
+
iconType: 'sfSymbol',
|
|
91
|
+
iconName: source.name
|
|
92
|
+
} : NO_ICON;
|
|
93
|
+
case 'drawable':
|
|
94
|
+
return _reactNative.Platform.OS === 'android' ? {
|
|
95
|
+
...NO_ICON,
|
|
96
|
+
iconType: 'drawable',
|
|
97
|
+
iconName: source.name
|
|
98
|
+
} : NO_ICON;
|
|
99
|
+
case 'image':
|
|
100
|
+
{
|
|
101
|
+
const resolved = _reactNative.Image.resolveAssetSource(source.source);
|
|
102
|
+
if (!resolved?.uri) return NO_ICON;
|
|
103
|
+
return {
|
|
104
|
+
iconType: 'image',
|
|
105
|
+
iconName: '',
|
|
106
|
+
iconUri: resolved.uri,
|
|
107
|
+
iconScale: resolved.scale > 0 ? resolved.scale : 1,
|
|
108
|
+
iconTinted: source.tinted === false ? 'false' : 'true'
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
default:
|
|
112
|
+
return NO_ICON;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
19
115
|
function normalizeSelectedValue(selected) {
|
|
20
116
|
return selected ?? '';
|
|
21
117
|
}
|
|
@@ -25,7 +121,14 @@ function SegmentedControl(props) {
|
|
|
25
121
|
segments,
|
|
26
122
|
selectedValue,
|
|
27
123
|
disabled,
|
|
124
|
+
labelVisibility,
|
|
125
|
+
selectedSegmentColor,
|
|
126
|
+
activeTintColor,
|
|
127
|
+
inactiveTintColor,
|
|
128
|
+
labelStyle,
|
|
129
|
+
badgeStyle,
|
|
28
130
|
onSelect,
|
|
131
|
+
onDeselect,
|
|
29
132
|
ios,
|
|
30
133
|
android,
|
|
31
134
|
...viewProps
|
|
@@ -37,7 +140,9 @@ function SegmentedControl(props) {
|
|
|
37
140
|
label: seg.label,
|
|
38
141
|
value: seg.value,
|
|
39
142
|
disabled: seg.disabled ? 'disabled' : 'enabled',
|
|
40
|
-
|
|
143
|
+
badge: seg.badge === undefined || seg.badge === null ? '' : String(seg.badge),
|
|
144
|
+
accessibilityLabel: seg.accessibilityLabel ?? '',
|
|
145
|
+
...resolveSegmentIcon(seg.icon)
|
|
41
146
|
}));
|
|
42
147
|
}, [segments]);
|
|
43
148
|
const selectedData = (0, _react.useMemo)(() => normalizeSelectedValue(selectedValue), [selectedValue]);
|
|
@@ -46,24 +151,42 @@ function SegmentedControl(props) {
|
|
|
46
151
|
index,
|
|
47
152
|
value
|
|
48
153
|
} = e.nativeEvent;
|
|
154
|
+
// Native reports a cleared selection as index -1 with an empty value.
|
|
155
|
+
if (index < 0) {
|
|
156
|
+
onDeselect?.();
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
49
159
|
onSelect?.(value, index);
|
|
50
|
-
}, [onSelect]);
|
|
160
|
+
}, [onSelect, onDeselect]);
|
|
51
161
|
|
|
52
162
|
// Normalize iOS props to native string format
|
|
53
163
|
const nativeIos = (0, _react.useMemo)(() => {
|
|
54
164
|
if (!ios) return undefined;
|
|
55
165
|
return {
|
|
56
166
|
momentary: ios.momentary ? 'true' : 'false',
|
|
57
|
-
apportionsSegmentWidthsByContent: ios.apportionsSegmentWidthsByContent ? 'true' : 'false'
|
|
58
|
-
selectedSegmentTintColor: ios.selectedSegmentTintColor ?? ''
|
|
167
|
+
apportionsSegmentWidthsByContent: ios.apportionsSegmentWidthsByContent ? 'true' : 'false'
|
|
59
168
|
};
|
|
60
169
|
}, [ios]);
|
|
61
170
|
|
|
171
|
+
// Deprecated iOS-only tint falls back to the cross-platform prop
|
|
172
|
+
const nativeSelectedSegmentColor = selectedSegmentColor ?? (_reactNative.Platform.OS === 'ios' ? ios?.selectedSegmentTintColor : undefined);
|
|
173
|
+
|
|
174
|
+
// Normalize the label font; empty / 0 means platform default
|
|
175
|
+
const nativeLabelStyle = (0, _react.useMemo)(() => {
|
|
176
|
+
if (!labelStyle) return undefined;
|
|
177
|
+
return {
|
|
178
|
+
fontFamily: labelStyle.fontFamily ?? '',
|
|
179
|
+
fontSize: labelStyle.fontSize ?? 0,
|
|
180
|
+
fontWeight: labelStyle.fontWeight === undefined ? '' : String(labelStyle.fontWeight),
|
|
181
|
+
fontStyle: labelStyle.fontStyle ?? ''
|
|
182
|
+
};
|
|
183
|
+
}, [labelStyle]);
|
|
184
|
+
|
|
62
185
|
// Normalize Android props
|
|
63
186
|
const nativeAndroid = (0, _react.useMemo)(() => {
|
|
64
187
|
if (!android) return undefined;
|
|
65
188
|
return {
|
|
66
|
-
selectionRequired: android.selectionRequired ? '
|
|
189
|
+
selectionRequired: android.selectionRequired === false ? 'false' : 'true'
|
|
67
190
|
};
|
|
68
191
|
}, [android]);
|
|
69
192
|
|
|
@@ -79,7 +202,16 @@ function SegmentedControl(props) {
|
|
|
79
202
|
segments: nativeSegments,
|
|
80
203
|
selectedValue: selectedData,
|
|
81
204
|
interactivity: disabled ? 'disabled' : 'enabled',
|
|
82
|
-
|
|
205
|
+
labelVisibility: labelVisibility ?? 'auto',
|
|
206
|
+
selectedSegmentColor: nativeSelectedSegmentColor,
|
|
207
|
+
activeTintColor: activeTintColor,
|
|
208
|
+
inactiveTintColor: inactiveTintColor,
|
|
209
|
+
androidRippleColor: android?.rippleColor,
|
|
210
|
+
androidStrokeColor: android?.strokeColor,
|
|
211
|
+
labelStyle: nativeLabelStyle,
|
|
212
|
+
badgeBackgroundColor: badgeStyle?.backgroundColor,
|
|
213
|
+
badgeTextColor: badgeStyle?.color,
|
|
214
|
+
onSelect: onSelect || onDeselect ? handleSelect : undefined,
|
|
83
215
|
ios: nativeIos,
|
|
84
216
|
android: nativeAndroid,
|
|
85
217
|
...viewProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_SegmentedControlNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANDROID_MIN_HEIGHT","normalizeSelectedValue","selected","SegmentedControl","props","style","segments","selectedValue","disabled","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_SegmentedControlNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ANDROID_MIN_HEIGHT","NO_ICON","iconType","iconName","iconUri","iconScale","iconTinted","pickIconSource","icon","undefined","Platform","OS","ios","android","resolveSegmentIcon","source","length","type","name","resolved","Image","resolveAssetSource","uri","scale","tinted","normalizeSelectedValue","selected","SegmentedControl","props","style","segments","selectedValue","disabled","labelVisibility","selectedSegmentColor","activeTintColor","inactiveTintColor","labelStyle","badgeStyle","onSelect","onDeselect","viewProps","nativeSegments","useMemo","map","seg","label","value","badge","String","accessibilityLabel","selectedData","handleSelect","useCallback","index","nativeEvent","nativeIos","momentary","apportionsSegmentWidthsByContent","nativeSelectedSegmentColor","selectedSegmentTintColor","nativeLabelStyle","fontFamily","fontSize","fontWeight","fontStyle","nativeAndroid","selectionRequired","mergedStyle","styles","androidDefault","jsx","interactivity","androidRippleColor","rippleColor","androidStrokeColor","strokeColor","badgeBackgroundColor","backgroundColor","badgeTextColor","color","StyleSheet","create","minHeight"],"sourceRoot":"../../src","sources":["SegmentedControl.tsx"],"mappings":";;;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAaA,IAAAE,gCAAA,GAAAC,sBAAA,CAAAH,OAAA;AAG2C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAlB3C;;AAoBA;AACA;AACA;AACA,MAAMgB,kBAAkB,GAAG,EAAE;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAWA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;;AAqIA,MAAMC,OAAyB,GAAG;EAChCC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,CAAC;EACZC,UAAU,EAAE;AACd,CAAC;AAED,SAASC,cAAcA,CACrBC,IAAsC,EACE;EACxC,IAAIA,IAAI,KAAKC,SAAS,IAAI,OAAOD,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAIA,IAAI,EAAE;IACpE,OAAOA,IAAI;EACb;EACA,OAAOE,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAGH,IAAI,CAACI,GAAG,GAAGJ,IAAI,CAACK,OAAO;AACxD;;AAEA;AACA;AACA;AACA;AACO,SAASC,kBAAkBA,CAChCN,IAAsC,EACpB;EAClB,MAAMO,MAAM,GAAGR,cAAc,CAACC,IAAI,CAAC;EACnC,IAAIO,MAAM,KAAKN,SAAS,EAAE,OAAOR,OAAO;EAExC,IAAI,OAAOc,MAAM,KAAK,QAAQ,EAAE;IAC9B,IAAIA,MAAM,CAACC,MAAM,KAAK,CAAC,EAAE,OAAOf,OAAO;IACvC,OAAO;MACL,GAAGA,OAAO;MACVC,QAAQ,EAAEQ,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAG,UAAU,GAAG,UAAU;MACzDR,QAAQ,EAAEY;IACZ,CAAC;EACH;EAEA,QAAQA,MAAM,CAACE,IAAI;IACjB,KAAK,UAAU;MACb,OAAOP,qBAAQ,CAACC,EAAE,KAAK,KAAK,GACxB;QAAE,GAAGV,OAAO;QAAEC,QAAQ,EAAE,UAAU;QAAEC,QAAQ,EAAEY,MAAM,CAACG;MAAK,CAAC,GAC3DjB,OAAO;IACb,KAAK,UAAU;MACb,OAAOS,qBAAQ,CAACC,EAAE,KAAK,SAAS,GAC5B;QAAE,GAAGV,OAAO;QAAEC,QAAQ,EAAE,UAAU;QAAEC,QAAQ,EAAEY,MAAM,CAACG;MAAK,CAAC,GAC3DjB,OAAO;IACb,KAAK,OAAO;MAAE;QACZ,MAAMkB,QAAQ,GAAGC,kBAAK,CAACC,kBAAkB,CAACN,MAAM,CAACA,MAAM,CAAC;QACxD,IAAI,CAACI,QAAQ,EAAEG,GAAG,EAAE,OAAOrB,OAAO;QAClC,OAAO;UACLC,QAAQ,EAAE,OAAO;UACjBC,QAAQ,EAAE,EAAE;UACZC,OAAO,EAAEe,QAAQ,CAACG,GAAG;UACrBjB,SAAS,EAAEc,QAAQ,CAACI,KAAK,GAAG,CAAC,GAAGJ,QAAQ,CAACI,KAAK,GAAG,CAAC;UAClDjB,UAAU,EAAES,MAAM,CAACS,MAAM,KAAK,KAAK,GAAG,OAAO,GAAG;QAClD,CAAC;MACH;IACA;MACE,OAAOvB,OAAO;EAClB;AACF;AAEA,SAASwB,sBAAsBA,CAACC,QAAuB,EAAU;EAC/D,OAAOA,QAAQ,IAAI,EAAE;AACvB;AAEO,SAASC,gBAAgBA,CAC9BC,KAA4B,EACR;EACpB,MAAM;IACJC,KAAK;IACLC,QAAQ;IACRC,aAAa;IACbC,QAAQ;IACRC,eAAe;IACfC,oBAAoB;IACpBC,eAAe;IACfC,iBAAiB;IACjBC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACV5B,GAAG;IACHC,OAAO;IACP,GAAG4B;EACL,CAAC,GAAGb,KAAK;;EAET;EACA,MAAMc,cAAc,GAAG,IAAAC,cAAO,EAAC,MAAuB;IACpD,OAAOb,QAAQ,CAACc,GAAG,CAAEC,GAAG,KAAM;MAC5BC,KAAK,EAAED,GAAG,CAACC,KAAK;MAChBC,KAAK,EAAEF,GAAG,CAACE,KAAK;MAChBf,QAAQ,EAAEa,GAAG,CAACb,QAAQ,GAAG,UAAU,GAAG,SAAS;MAC/CgB,KAAK,EACHH,GAAG,CAACG,KAAK,KAAKvC,SAAS,IAAIoC,GAAG,CAACG,KAAK,KAAK,IAAI,GAAG,EAAE,GAAGC,MAAM,CAACJ,GAAG,CAACG,KAAK,CAAC;MACxEE,kBAAkB,EAAEL,GAAG,CAACK,kBAAkB,IAAI,EAAE;MAChD,GAAGpC,kBAAkB,CAAC+B,GAAG,CAACrC,IAAI;IAChC,CAAC,CAAC,CAAC;EACL,CAAC,EAAE,CAACsB,QAAQ,CAAC,CAAC;EAEd,MAAMqB,YAAY,GAAG,IAAAR,cAAO,EAC1B,MAAMlB,sBAAsB,CAACM,aAAa,CAAC,EAC3C,CAACA,aAAa,CAChB,CAAC;EAED,MAAMqB,YAAY,GAAG,IAAAC,kBAAW,EAC7BxE,CAA+C,IAAK;IACnD,MAAM;MAAEyE,KAAK;MAAEP;IAAM,CAAC,GAAGlE,CAAC,CAAC0E,WAAW;IACtC;IACA,IAAID,KAAK,GAAG,CAAC,EAAE;MACbd,UAAU,GAAG,CAAC;MACd;IACF;IACAD,QAAQ,GAAGQ,KAAK,EAAEO,KAAK,CAAC;EAC1B,CAAC,EACD,CAACf,QAAQ,EAAEC,UAAU,CACvB,CAAC;;EAED;EACA,MAAMgB,SAAS,GAAG,IAAAb,cAAO,EAAC,MAAM;IAC9B,IAAI,CAAC/B,GAAG,EAAE,OAAOH,SAAS;IAC1B,OAAO;MACLgD,SAAS,EAAE7C,GAAG,CAAC6C,SAAS,GAAG,MAAM,GAAG,OAAO;MAC3CC,gCAAgC,EAAE9C,GAAG,CAAC8C,gCAAgC,GAClE,MAAM,GACN;IACN,CAAC;EACH,CAAC,EAAE,CAAC9C,GAAG,CAAC,CAAC;;EAET;EACA,MAAM+C,0BAA0B,GAC9BzB,oBAAoB,KACnBxB,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAGC,GAAG,EAAEgD,wBAAwB,GAAGnD,SAAS,CAAC;;EAErE;EACA,MAAMoD,gBAAgB,GAAG,IAAAlB,cAAO,EAAC,MAAM;IACrC,IAAI,CAACN,UAAU,EAAE,OAAO5B,SAAS;IACjC,OAAO;MACLqD,UAAU,EAAEzB,UAAU,CAACyB,UAAU,IAAI,EAAE;MACvCC,QAAQ,EAAE1B,UAAU,CAAC0B,QAAQ,IAAI,CAAC;MAClCC,UAAU,EACR3B,UAAU,CAAC2B,UAAU,KAAKvD,SAAS,GAC/B,EAAE,GACFwC,MAAM,CAACZ,UAAU,CAAC2B,UAAU,CAAC;MACnCC,SAAS,EAAE5B,UAAU,CAAC4B,SAAS,IAAI;IACrC,CAAC;EACH,CAAC,EAAE,CAAC5B,UAAU,CAAC,CAAC;;EAEhB;EACA,MAAM6B,aAAa,GAAG,IAAAvB,cAAO,EAAC,MAAM;IAClC,IAAI,CAAC9B,OAAO,EAAE,OAAOJ,SAAS;IAC9B,OAAO;MACL0D,iBAAiB,EAAEtD,OAAO,CAACsD,iBAAiB,KAAK,KAAK,GAAG,OAAO,GAAG;IACrE,CAAC;EACH,CAAC,EAAE,CAACtD,OAAO,CAAC,CAAC;;EAEb;EACA,MAAMuD,WAAW,GAAG,IAAAzB,cAAO,EAAC,MAA4B;IACtD,IAAIjC,qBAAQ,CAACC,EAAE,KAAK,SAAS,EAAE;MAC7B,OAAO,CAAC0D,MAAM,CAACC,cAAc,EAAEzC,KAAK,CAAC;IACvC;IACA,OAAOA,KAAK;EACd,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,oBACE,IAAAjD,WAAA,CAAA2F,GAAA,EAAC7F,gCAAA,CAAAK,OAAsB;IACrB8C,KAAK,EAAEuC,WAAY;IACnBtC,QAAQ,EAAEY,cAAe;IACzBX,aAAa,EAAEoB,YAAa;IAC5BqB,aAAa,EAAExC,QAAQ,GAAG,UAAU,GAAG,SAAU;IACjDC,eAAe,EAAEA,eAAe,IAAI,MAAO;IAC3CC,oBAAoB,EAAEyB,0BAA2B;IACjDxB,eAAe,EAAEA,eAAgB;IACjCC,iBAAiB,EAAEA,iBAAkB;IACrCqC,kBAAkB,EAAE5D,OAAO,EAAE6D,WAAY;IACzCC,kBAAkB,EAAE9D,OAAO,EAAE+D,WAAY;IACzCvC,UAAU,EAAEwB,gBAAiB;IAC7BgB,oBAAoB,EAAEvC,UAAU,EAAEwC,eAAgB;IAClDC,cAAc,EAAEzC,UAAU,EAAE0C,KAAM;IAClCzC,QAAQ,EAAEA,QAAQ,IAAIC,UAAU,GAAGY,YAAY,GAAG3C,SAAU;IAC5DG,GAAG,EAAE4C,SAAU;IACf3C,OAAO,EAAEqD,aAAc;IAAA,GACnBzB;EAAS,CACd,CAAC;AAEN;AAEA,MAAM4B,MAAM,GAAGY,uBAAU,CAACC,MAAM,CAAC;EAC/BZ,cAAc,EAAE;IACda,SAAS,EAAEnF;EACb;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,31 +1,59 @@
|
|
|
1
1
|
// SegmentedControlNativeComponent.ts
|
|
2
|
-
import type {
|
|
2
|
+
import type {
|
|
3
|
+
CodegenTypes,
|
|
4
|
+
ColorValue,
|
|
5
|
+
HostComponent,
|
|
6
|
+
ViewProps,
|
|
7
|
+
} from 'react-native';
|
|
3
8
|
import { codegenNativeComponent } from 'react-native';
|
|
4
9
|
|
|
5
10
|
/**
|
|
6
11
|
* A single segment in the control.
|
|
12
|
+
*
|
|
13
|
+
* Icons are pre-resolved on the JS side so native only deals with flat
|
|
14
|
+
* strings: `iconType` selects the source, `iconName` carries an SF Symbol or
|
|
15
|
+
* drawable name, and `iconUri` / `iconScale` carry a resolved image asset.
|
|
7
16
|
*/
|
|
8
17
|
export type SegmentedControlSegment = Readonly<{
|
|
9
18
|
label: string;
|
|
10
19
|
value: string;
|
|
11
20
|
disabled: string; // 'enabled' | 'disabled'
|
|
12
|
-
|
|
21
|
+
iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
|
|
22
|
+
iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
|
|
23
|
+
iconUri: string; // Resolved image URI when iconType === 'image'
|
|
24
|
+
iconScale: CodegenTypes.Double; // Resolved image scale when iconType === 'image'
|
|
25
|
+
iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
|
|
26
|
+
badge: string; // Badge text, empty = no badge
|
|
27
|
+
accessibilityLabel: string; // Screen-reader label, empty = use label
|
|
13
28
|
}>;
|
|
14
29
|
|
|
15
30
|
/**
|
|
16
31
|
* Event emitted when the user selects a segment.
|
|
17
32
|
*/
|
|
18
33
|
export type SegmentedControlSelectEvent = Readonly<{
|
|
19
|
-
/** Selected segment index */
|
|
34
|
+
/** Selected segment index. -1 means the selection was cleared. */
|
|
20
35
|
index: CodegenTypes.Int32;
|
|
21
36
|
|
|
22
|
-
/** Selected segment value */
|
|
37
|
+
/** Selected segment value. Empty when the selection was cleared. */
|
|
23
38
|
value: string;
|
|
24
39
|
}>;
|
|
25
40
|
|
|
26
41
|
/** Interactivity state (no booleans). */
|
|
27
42
|
export type SegmentedControlInteractivity = 'enabled' | 'disabled';
|
|
28
43
|
|
|
44
|
+
/** How labels and icons combine (no booleans). */
|
|
45
|
+
export type SegmentedControlLabelVisibility = 'auto' | 'labeled' | 'unlabeled';
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Label font. Empty strings / 0 mean "platform default".
|
|
49
|
+
*/
|
|
50
|
+
export type LabelStyleProps = Readonly<{
|
|
51
|
+
fontFamily?: string;
|
|
52
|
+
fontSize?: CodegenTypes.Double;
|
|
53
|
+
fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
|
|
54
|
+
fontStyle?: string; // 'normal' | 'italic'
|
|
55
|
+
}>;
|
|
56
|
+
|
|
29
57
|
/**
|
|
30
58
|
* iOS-specific configuration.
|
|
31
59
|
*/
|
|
@@ -35,9 +63,6 @@ export type IOSProps = Readonly<{
|
|
|
35
63
|
|
|
36
64
|
/** Whether segment widths are proportional to content */
|
|
37
65
|
apportionsSegmentWidthsByContent?: string; // 'true' | 'false'
|
|
38
|
-
|
|
39
|
-
/** Selected segment tint color (hex string) */
|
|
40
|
-
selectedSegmentTintColor?: string;
|
|
41
66
|
}>;
|
|
42
67
|
|
|
43
68
|
/**
|
|
@@ -65,6 +90,35 @@ export interface SegmentedControlProps extends ViewProps {
|
|
|
65
90
|
*/
|
|
66
91
|
interactivity?: string; // SegmentedControlInteractivity
|
|
67
92
|
|
|
93
|
+
/**
|
|
94
|
+
* How segment labels and icons combine.
|
|
95
|
+
*/
|
|
96
|
+
labelVisibility?: string; // SegmentedControlLabelVisibility
|
|
97
|
+
|
|
98
|
+
/** Background of the selected segment. */
|
|
99
|
+
selectedSegmentColor?: ColorValue;
|
|
100
|
+
|
|
101
|
+
/** Text / icon color of the selected segment. */
|
|
102
|
+
activeTintColor?: ColorValue;
|
|
103
|
+
|
|
104
|
+
/** Text / icon color of unselected segments. */
|
|
105
|
+
inactiveTintColor?: ColorValue;
|
|
106
|
+
|
|
107
|
+
/** Android: ripple color when pressing a segment. */
|
|
108
|
+
androidRippleColor?: ColorValue;
|
|
109
|
+
|
|
110
|
+
/** Android: outline color of the segments. */
|
|
111
|
+
androidStrokeColor?: ColorValue;
|
|
112
|
+
|
|
113
|
+
/** Label font. */
|
|
114
|
+
labelStyle?: LabelStyleProps;
|
|
115
|
+
|
|
116
|
+
/** Badge background (default: system red). */
|
|
117
|
+
badgeBackgroundColor?: ColorValue;
|
|
118
|
+
|
|
119
|
+
/** Badge text color (default: white). */
|
|
120
|
+
badgeTextColor?: ColorValue;
|
|
121
|
+
|
|
68
122
|
/**
|
|
69
123
|
* Fired when the user selects a segment.
|
|
70
124
|
*/
|
|
@@ -76,4 +130,4 @@ export interface SegmentedControlProps extends ViewProps {
|
|
|
76
130
|
|
|
77
131
|
export default codegenNativeComponent<SegmentedControlProps>(
|
|
78
132
|
'PCSegmentedControl'
|
|
79
|
-
)
|
|
133
|
+
) as HostComponent<SegmentedControlProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// SelectionMenuNativeComponent.ts
|
|
2
|
-
import type { CodegenTypes, ViewProps } from 'react-native';
|
|
2
|
+
import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
|
|
3
3
|
import { codegenNativeComponent } from 'react-native';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -94,4 +94,6 @@ export interface SelectionMenuProps extends ViewProps {
|
|
|
94
94
|
android?: AndroidProps;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
export default codegenNativeComponent<SelectionMenuProps>(
|
|
97
|
+
export default codegenNativeComponent<SelectionMenuProps>(
|
|
98
|
+
'PCSelectionMenu'
|
|
99
|
+
) as HostComponent<SelectionMenuProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_jsxRuntime","e","__esModule","default","DatePicker","_props","exports","SelectionMenu","ContextMenu","children","jsx","Fragment","SegmentedControl","LiquidGlass","isLiquidGlassSupported"],"sourceRoot":"../../src","sources":["index.web.tsx"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAL1B;AACA;AACA;AACA;;AAMA;AACA;AACA;;AAMA;AACA;AACA;;AAoBO,MAAMG,UAAU,GACrBC,MAAuB,IACO,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAF,UAAA,GAAAA,UAAA;AAoBO,MAAMG,aAAa,GACxBF,MAA0B,IACI,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAgCO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC;AACgB,CAAC,KAAgC;EACjD,oBAAO,IAAAT,WAAA,CAAAU,GAAA,EAAAV,WAAA,CAAAW,QAAA;IAAAF,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;;AAED;AACA;AACA;AAAAH,OAAA,CAAAE,WAAA,GAAAA,WAAA;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_jsxRuntime","e","__esModule","default","DatePicker","_props","exports","SelectionMenu","ContextMenu","children","jsx","Fragment","SegmentedControl","LiquidGlass","isLiquidGlassSupported"],"sourceRoot":"../../src","sources":["index.web.tsx"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAL1B;AACA;AACA;AACA;;AAMA;AACA;AACA;;AAMA;AACA;AACA;;AAoBO,MAAMG,UAAU,GACrBC,MAAuB,IACO,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAF,UAAA,GAAAA,UAAA;AAoBO,MAAMG,aAAa,GACxBF,MAA0B,IACI,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAgCO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC;AACgB,CAAC,KAAgC;EACjD,oBAAO,IAAAT,WAAA,CAAAU,GAAA,EAAAV,WAAA,CAAAW,QAAA;IAAAF,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;;AAED;AACA;AACA;AAAAH,OAAA,CAAAE,WAAA,GAAAA,WAAA;AAmDO,MAAMI,gBAAgB,GAC3BP,MAA6B,IACC,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAM,gBAAA,GAAAA,gBAAA;AASO,MAAMC,WAAW,GAAGA,CAAC;EAC1BJ;AACgB,CAAC,KAAgC;EACjD,oBAAO,IAAAT,WAAA,CAAAU,GAAA,EAAAV,WAAA,CAAAW,QAAA;IAAAF,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;AAACH,OAAA,CAAAO,WAAA,GAAAA,WAAA;AAEK,MAAMC,sBAAsB,GAAAR,OAAA,CAAAQ,sBAAA,GAAG,KAAK","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// DatePickerNativeComponent.ts
|
|
2
|
-
import type { CodegenTypes, ViewProps } from 'react-native';
|
|
2
|
+
import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
|
|
3
3
|
import { codegenNativeComponent } from 'react-native';
|
|
4
4
|
|
|
5
5
|
export type TimestampMs = CodegenTypes.Double;
|
|
@@ -69,4 +69,6 @@ export interface NativeProps extends ViewProps, CommonProps {
|
|
|
69
69
|
onClosed?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
export default codegenNativeComponent<NativeProps>(
|
|
72
|
+
export default codegenNativeComponent<NativeProps>(
|
|
73
|
+
'PCDatePicker'
|
|
74
|
+
) as HostComponent<NativeProps>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
// SegmentedControl.tsx
|
|
4
4
|
import React, { useCallback, useMemo } from 'react';
|
|
5
|
-
import { Platform, StyleSheet } from 'react-native';
|
|
5
|
+
import { Image, Platform, StyleSheet } from 'react-native';
|
|
6
6
|
import NativeSegmentedControl from './SegmentedControlNativeComponent';
|
|
7
7
|
|
|
8
8
|
// Android: Minimum height to ensure visibility.
|
|
@@ -10,6 +10,101 @@ import NativeSegmentedControl from './SegmentedControlNativeComponent';
|
|
|
10
10
|
// so we apply a minHeight that matches Material design touch target guidelines.
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
const ANDROID_MIN_HEIGHT = 48;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* A single icon source.
|
|
16
|
+
*
|
|
17
|
+
* - `string`: shorthand for an SF Symbol name on iOS and a drawable resource
|
|
18
|
+
* name on Android (the original API).
|
|
19
|
+
* - `{ type: 'sfSymbol' }`: an SF Symbol. iOS only; ignored on Android.
|
|
20
|
+
* - `{ type: 'drawable' }`: a drawable from the app's `res/drawable`.
|
|
21
|
+
* Android only; ignored on iOS.
|
|
22
|
+
* - `{ type: 'image' }`: an image asset (`require('./icon.png')`) or a
|
|
23
|
+
* `{ uri }` source. Works on both platforms. Images are drawn as tinted
|
|
24
|
+
* templates unless `tinted` is `false`.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* An icon for a segment: a single source used on both platforms, or a
|
|
29
|
+
* per-platform pair so callers don't need to branch on `Platform.OS`.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* How labels and icons combine for segments that have an icon.
|
|
34
|
+
*
|
|
35
|
+
* - `auto` (default): platform behavior. iOS shows the icon in place of the
|
|
36
|
+
* label (UISegmentedControl cannot show both); Android shows icon and label.
|
|
37
|
+
* - `labeled`: always show the label. iOS drops the icon; Android shows both.
|
|
38
|
+
* - `unlabeled`: show only the icon. Segments without an icon still show
|
|
39
|
+
* their label. Screen readers still announce the label on both platforms.
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Font for segment labels. Each field falls back to the platform default.
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Badge colors. Both default to the platform look (red with white text).
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
const NO_ICON = {
|
|
51
|
+
iconType: '',
|
|
52
|
+
iconName: '',
|
|
53
|
+
iconUri: '',
|
|
54
|
+
iconScale: 1,
|
|
55
|
+
iconTinted: 'true'
|
|
56
|
+
};
|
|
57
|
+
function pickIconSource(icon) {
|
|
58
|
+
if (icon === undefined || typeof icon === 'string' || 'type' in icon) {
|
|
59
|
+
return icon;
|
|
60
|
+
}
|
|
61
|
+
return Platform.OS === 'ios' ? icon.ios : icon.android;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Flattens the public icon shape into the strings native expects, dropping
|
|
66
|
+
* sources that don't apply to the current platform.
|
|
67
|
+
*/
|
|
68
|
+
export function resolveSegmentIcon(icon) {
|
|
69
|
+
const source = pickIconSource(icon);
|
|
70
|
+
if (source === undefined) return NO_ICON;
|
|
71
|
+
if (typeof source === 'string') {
|
|
72
|
+
if (source.length === 0) return NO_ICON;
|
|
73
|
+
return {
|
|
74
|
+
...NO_ICON,
|
|
75
|
+
iconType: Platform.OS === 'ios' ? 'sfSymbol' : 'drawable',
|
|
76
|
+
iconName: source
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
switch (source.type) {
|
|
80
|
+
case 'sfSymbol':
|
|
81
|
+
return Platform.OS === 'ios' ? {
|
|
82
|
+
...NO_ICON,
|
|
83
|
+
iconType: 'sfSymbol',
|
|
84
|
+
iconName: source.name
|
|
85
|
+
} : NO_ICON;
|
|
86
|
+
case 'drawable':
|
|
87
|
+
return Platform.OS === 'android' ? {
|
|
88
|
+
...NO_ICON,
|
|
89
|
+
iconType: 'drawable',
|
|
90
|
+
iconName: source.name
|
|
91
|
+
} : NO_ICON;
|
|
92
|
+
case 'image':
|
|
93
|
+
{
|
|
94
|
+
const resolved = Image.resolveAssetSource(source.source);
|
|
95
|
+
if (!resolved?.uri) return NO_ICON;
|
|
96
|
+
return {
|
|
97
|
+
iconType: 'image',
|
|
98
|
+
iconName: '',
|
|
99
|
+
iconUri: resolved.uri,
|
|
100
|
+
iconScale: resolved.scale > 0 ? resolved.scale : 1,
|
|
101
|
+
iconTinted: source.tinted === false ? 'false' : 'true'
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
default:
|
|
105
|
+
return NO_ICON;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
13
108
|
function normalizeSelectedValue(selected) {
|
|
14
109
|
return selected ?? '';
|
|
15
110
|
}
|
|
@@ -19,7 +114,14 @@ export function SegmentedControl(props) {
|
|
|
19
114
|
segments,
|
|
20
115
|
selectedValue,
|
|
21
116
|
disabled,
|
|
117
|
+
labelVisibility,
|
|
118
|
+
selectedSegmentColor,
|
|
119
|
+
activeTintColor,
|
|
120
|
+
inactiveTintColor,
|
|
121
|
+
labelStyle,
|
|
122
|
+
badgeStyle,
|
|
22
123
|
onSelect,
|
|
124
|
+
onDeselect,
|
|
23
125
|
ios,
|
|
24
126
|
android,
|
|
25
127
|
...viewProps
|
|
@@ -31,7 +133,9 @@ export function SegmentedControl(props) {
|
|
|
31
133
|
label: seg.label,
|
|
32
134
|
value: seg.value,
|
|
33
135
|
disabled: seg.disabled ? 'disabled' : 'enabled',
|
|
34
|
-
|
|
136
|
+
badge: seg.badge === undefined || seg.badge === null ? '' : String(seg.badge),
|
|
137
|
+
accessibilityLabel: seg.accessibilityLabel ?? '',
|
|
138
|
+
...resolveSegmentIcon(seg.icon)
|
|
35
139
|
}));
|
|
36
140
|
}, [segments]);
|
|
37
141
|
const selectedData = useMemo(() => normalizeSelectedValue(selectedValue), [selectedValue]);
|
|
@@ -40,24 +144,42 @@ export function SegmentedControl(props) {
|
|
|
40
144
|
index,
|
|
41
145
|
value
|
|
42
146
|
} = e.nativeEvent;
|
|
147
|
+
// Native reports a cleared selection as index -1 with an empty value.
|
|
148
|
+
if (index < 0) {
|
|
149
|
+
onDeselect?.();
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
43
152
|
onSelect?.(value, index);
|
|
44
|
-
}, [onSelect]);
|
|
153
|
+
}, [onSelect, onDeselect]);
|
|
45
154
|
|
|
46
155
|
// Normalize iOS props to native string format
|
|
47
156
|
const nativeIos = useMemo(() => {
|
|
48
157
|
if (!ios) return undefined;
|
|
49
158
|
return {
|
|
50
159
|
momentary: ios.momentary ? 'true' : 'false',
|
|
51
|
-
apportionsSegmentWidthsByContent: ios.apportionsSegmentWidthsByContent ? 'true' : 'false'
|
|
52
|
-
selectedSegmentTintColor: ios.selectedSegmentTintColor ?? ''
|
|
160
|
+
apportionsSegmentWidthsByContent: ios.apportionsSegmentWidthsByContent ? 'true' : 'false'
|
|
53
161
|
};
|
|
54
162
|
}, [ios]);
|
|
55
163
|
|
|
164
|
+
// Deprecated iOS-only tint falls back to the cross-platform prop
|
|
165
|
+
const nativeSelectedSegmentColor = selectedSegmentColor ?? (Platform.OS === 'ios' ? ios?.selectedSegmentTintColor : undefined);
|
|
166
|
+
|
|
167
|
+
// Normalize the label font; empty / 0 means platform default
|
|
168
|
+
const nativeLabelStyle = useMemo(() => {
|
|
169
|
+
if (!labelStyle) return undefined;
|
|
170
|
+
return {
|
|
171
|
+
fontFamily: labelStyle.fontFamily ?? '',
|
|
172
|
+
fontSize: labelStyle.fontSize ?? 0,
|
|
173
|
+
fontWeight: labelStyle.fontWeight === undefined ? '' : String(labelStyle.fontWeight),
|
|
174
|
+
fontStyle: labelStyle.fontStyle ?? ''
|
|
175
|
+
};
|
|
176
|
+
}, [labelStyle]);
|
|
177
|
+
|
|
56
178
|
// Normalize Android props
|
|
57
179
|
const nativeAndroid = useMemo(() => {
|
|
58
180
|
if (!android) return undefined;
|
|
59
181
|
return {
|
|
60
|
-
selectionRequired: android.selectionRequired ? '
|
|
182
|
+
selectionRequired: android.selectionRequired === false ? 'false' : 'true'
|
|
61
183
|
};
|
|
62
184
|
}, [android]);
|
|
63
185
|
|
|
@@ -73,7 +195,16 @@ export function SegmentedControl(props) {
|
|
|
73
195
|
segments: nativeSegments,
|
|
74
196
|
selectedValue: selectedData,
|
|
75
197
|
interactivity: disabled ? 'disabled' : 'enabled',
|
|
76
|
-
|
|
198
|
+
labelVisibility: labelVisibility ?? 'auto',
|
|
199
|
+
selectedSegmentColor: nativeSelectedSegmentColor,
|
|
200
|
+
activeTintColor: activeTintColor,
|
|
201
|
+
inactiveTintColor: inactiveTintColor,
|
|
202
|
+
androidRippleColor: android?.rippleColor,
|
|
203
|
+
androidStrokeColor: android?.strokeColor,
|
|
204
|
+
labelStyle: nativeLabelStyle,
|
|
205
|
+
badgeBackgroundColor: badgeStyle?.backgroundColor,
|
|
206
|
+
badgeTextColor: badgeStyle?.color,
|
|
207
|
+
onSelect: onSelect || onDeselect ? handleSelect : undefined,
|
|
77
208
|
ios: nativeIos,
|
|
78
209
|
android: nativeAndroid,
|
|
79
210
|
...viewProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useMemo","Platform","StyleSheet","NativeSegmentedControl","jsx","_jsx","ANDROID_MIN_HEIGHT","normalizeSelectedValue","selected","SegmentedControl","props","style","segments","selectedValue","disabled","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","Image","Platform","StyleSheet","NativeSegmentedControl","jsx","_jsx","ANDROID_MIN_HEIGHT","NO_ICON","iconType","iconName","iconUri","iconScale","iconTinted","pickIconSource","icon","undefined","OS","ios","android","resolveSegmentIcon","source","length","type","name","resolved","resolveAssetSource","uri","scale","tinted","normalizeSelectedValue","selected","SegmentedControl","props","style","segments","selectedValue","disabled","labelVisibility","selectedSegmentColor","activeTintColor","inactiveTintColor","labelStyle","badgeStyle","onSelect","onDeselect","viewProps","nativeSegments","map","seg","label","value","badge","String","accessibilityLabel","selectedData","handleSelect","e","index","nativeEvent","nativeIos","momentary","apportionsSegmentWidthsByContent","nativeSelectedSegmentColor","selectedSegmentTintColor","nativeLabelStyle","fontFamily","fontSize","fontWeight","fontStyle","nativeAndroid","selectionRequired","mergedStyle","styles","androidDefault","interactivity","androidRippleColor","rippleColor","androidStrokeColor","strokeColor","badgeBackgroundColor","backgroundColor","badgeTextColor","color","create","minHeight"],"sourceRoot":"../../src","sources":["SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}
|