@oxyhq/bloom 0.6.2 → 0.6.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/lib/commonjs/segmented-control/index.js +48 -11
- package/lib/commonjs/segmented-control/index.js.map +1 -1
- package/lib/module/segmented-control/index.js +49 -12
- package/lib/module/segmented-control/index.js.map +1 -1
- package/lib/typescript/commonjs/segmented-control/index.d.ts +9 -4
- package/lib/typescript/commonjs/segmented-control/index.d.ts.map +1 -1
- package/lib/typescript/module/segmented-control/index.d.ts +9 -4
- package/lib/typescript/module/segmented-control/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/segmented-control/index.tsx +65 -14
|
@@ -11,7 +11,6 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
12
12
|
var _useTheme = require("../theme/use-theme.js");
|
|
13
13
|
var _index = require("../styles/index.js");
|
|
14
|
-
var _index2 = require("../button/index.js");
|
|
15
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
16
|
const InternalContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
@@ -67,13 +66,24 @@ function Root({
|
|
|
67
66
|
}
|
|
68
67
|
};
|
|
69
68
|
}, [value, selectedPosition, setSelectedPosition, onChange, type, size]);
|
|
69
|
+
|
|
70
|
+
// Height of the wrapping pill matches the active item height (item
|
|
71
|
+
// `minHeight` + 4px outer `p_xs` padding on both sides). Locking the
|
|
72
|
+
// outer View to this exact height keeps the control as a tight inline
|
|
73
|
+
// pill on every platform — without it, a parent column flex context
|
|
74
|
+
// (the default on a `<View>`) would let the Root stretch vertically
|
|
75
|
+
// and the items inside would inherit that stretched height, blowing
|
|
76
|
+
// the control up into a giant block on native.
|
|
77
|
+
const itemMinHeight = size === 'large' ? 40 : 32;
|
|
78
|
+
const pillHeight = itemMinHeight + 8;
|
|
70
79
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
71
80
|
accessibilityLabel: label,
|
|
72
81
|
accessibilityHint: accessibilityHint ?? '',
|
|
73
|
-
style: [_index.atoms.w_full, _index.atoms.
|
|
82
|
+
style: [_index.atoms.w_full, _index.atoms.relative, _index.atoms.flex_row, _index.atoms.align_center, {
|
|
74
83
|
backgroundColor: theme.colors.contrast50
|
|
75
84
|
}, {
|
|
76
|
-
borderRadius: 14
|
|
85
|
+
borderRadius: 14,
|
|
86
|
+
height: pillHeight
|
|
77
87
|
}, _index.atoms.p_xs, style],
|
|
78
88
|
role: type === 'tabs' ? 'tablist' : 'radiogroup',
|
|
79
89
|
children: [selectedPosition !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, {
|
|
@@ -91,7 +101,10 @@ function Item({
|
|
|
91
101
|
style,
|
|
92
102
|
children,
|
|
93
103
|
onPress: onPressProp,
|
|
94
|
-
|
|
104
|
+
accessibilityLabel,
|
|
105
|
+
accessibilityHint,
|
|
106
|
+
testID,
|
|
107
|
+
disabled
|
|
95
108
|
}) {
|
|
96
109
|
const [position, setPosition] = (0, _react.useState)(null);
|
|
97
110
|
const ctx = (0, _react.useContext)(InternalContext);
|
|
@@ -115,8 +128,22 @@ function Item({
|
|
|
115
128
|
ctx.onSelectValue(value, position);
|
|
116
129
|
onPressProp?.();
|
|
117
130
|
}, [ctx, value, position, onPressProp]);
|
|
131
|
+
|
|
132
|
+
// We render the segment as a flat `Pressable` (not Bloom's `Button`)
|
|
133
|
+
// for two reasons:
|
|
134
|
+
// 1. Layout: we need the touch target to participate directly in the
|
|
135
|
+
// Root's row flex layout so `flex: 1` distributes the items
|
|
136
|
+
// evenly on every platform. Bloom Button wraps its Pressable in
|
|
137
|
+
// an Animated.View that doesn't forward layout-affecting styles,
|
|
138
|
+
// which would collapse the segment to its natural text width.
|
|
139
|
+
// 2. Semantics: the Root carries `role="tablist"`/`"radiogroup"` and
|
|
140
|
+
// each item carries `role="tab"`/`"radio"`. Bloom Button always
|
|
141
|
+
// adds `accessibilityRole="button"` — that overrides the correct
|
|
142
|
+
// a11y role for tablist children.
|
|
143
|
+
const itemRole = ctx.type === 'tabs' ? 'tab' : 'radio';
|
|
144
|
+
const itemMinHeight = ctx.size === 'large' ? 40 : 32;
|
|
118
145
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
119
|
-
style: [_index.atoms.flex_1, _index.atoms.flex_row],
|
|
146
|
+
style: [_index.atoms.flex_1, _index.atoms.flex_row, _index.atoms.align_stretch],
|
|
120
147
|
onLayout: evt => {
|
|
121
148
|
const measuredPosition = {
|
|
122
149
|
x: evt.nativeEvent.layout.x,
|
|
@@ -127,14 +154,24 @@ function Item({
|
|
|
127
154
|
}
|
|
128
155
|
setPosition(measuredPosition);
|
|
129
156
|
},
|
|
130
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
131
|
-
...props,
|
|
157
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
132
158
|
onPress: onPress,
|
|
133
|
-
accessibilityLabel:
|
|
134
|
-
accessibilityHint:
|
|
135
|
-
|
|
136
|
-
|
|
159
|
+
accessibilityLabel: accessibilityLabel,
|
|
160
|
+
accessibilityHint: accessibilityHint,
|
|
161
|
+
accessibilityState: {
|
|
162
|
+
selected: active,
|
|
163
|
+
disabled: !!disabled
|
|
164
|
+
},
|
|
165
|
+
role: itemRole,
|
|
166
|
+
disabled: disabled,
|
|
167
|
+
testID: testID,
|
|
168
|
+
style: ({
|
|
169
|
+
pressed
|
|
170
|
+
}) => [_index.atoms.flex_1, _index.atoms.flex_row, _index.atoms.align_center, _index.atoms.justify_center, _index.atoms.bg_transparent, _index.atoms.px_sm, _index.atoms.py_xs, {
|
|
171
|
+
minHeight: itemMinHeight,
|
|
137
172
|
borderRadius: 10
|
|
173
|
+
}, pressed && !disabled && {
|
|
174
|
+
opacity: 0.7
|
|
138
175
|
}, style],
|
|
139
176
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalItemContext.Provider, {
|
|
140
177
|
value: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_useTheme","_index","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_useTheme","_index","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InternalContext","createContext","Root","label","type","size","value","onChange","children","style","accessibilityHint","theme","useTheme","selectedPosition","setSelectedPosition","useState","contextValue","useMemo","selectedValue","onSelectValue","val","position","updatePosition","currPos","width","x","itemMinHeight","pillHeight","jsxs","View","accessibilityLabel","a","w_full","relative","flex_row","align_center","backgroundColor","colors","contrast50","borderRadius","height","p_xs","role","jsx","Slider","Provider","InternalItemContext","Item","onPress","onPressProp","testID","disabled","setPosition","ctx","useContext","Error","active","needsUpdate","updatePositionRef","useRef","current","positionRef","useLayoutEffect","useCallback","itemRole","flex_1","align_stretch","onLayout","evt","measuredPosition","nativeEvent","layout","Pressable","accessibilityState","selected","pressed","justify_center","bg_transparent","px_sm","py_xs","minHeight","opacity","ItemText","props","Text","text_center","text_md","font_medium","px_xs","color","text","textTertiary","nativeLayout","Platform","OS","LinearTransition","easing","Easing","out","exp","undefined","absolute","background","top","bottom","left","platform","web","boxShadow","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","native","transform","translateX"],"sourceRoot":"../../../src","sources":["segmented-control/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
-
import { Platform, Text, View } from 'react-native';
|
|
4
|
+
import { Platform, Pressable, Text, View } from 'react-native';
|
|
5
5
|
import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
|
|
6
6
|
import { useTheme } from "../theme/use-theme.js";
|
|
7
7
|
import { atoms as a, platform } from "../styles/index.js";
|
|
8
|
-
import { Button } from "../button/index.js";
|
|
9
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
9
|
const InternalContext = /*#__PURE__*/createContext(null);
|
|
11
10
|
|
|
@@ -60,13 +59,24 @@ export function Root({
|
|
|
60
59
|
}
|
|
61
60
|
};
|
|
62
61
|
}, [value, selectedPosition, setSelectedPosition, onChange, type, size]);
|
|
62
|
+
|
|
63
|
+
// Height of the wrapping pill matches the active item height (item
|
|
64
|
+
// `minHeight` + 4px outer `p_xs` padding on both sides). Locking the
|
|
65
|
+
// outer View to this exact height keeps the control as a tight inline
|
|
66
|
+
// pill on every platform — without it, a parent column flex context
|
|
67
|
+
// (the default on a `<View>`) would let the Root stretch vertically
|
|
68
|
+
// and the items inside would inherit that stretched height, blowing
|
|
69
|
+
// the control up into a giant block on native.
|
|
70
|
+
const itemMinHeight = size === 'large' ? 40 : 32;
|
|
71
|
+
const pillHeight = itemMinHeight + 8;
|
|
63
72
|
return /*#__PURE__*/_jsxs(View, {
|
|
64
73
|
accessibilityLabel: label,
|
|
65
74
|
accessibilityHint: accessibilityHint ?? '',
|
|
66
|
-
style: [a.w_full, a.
|
|
75
|
+
style: [a.w_full, a.relative, a.flex_row, a.align_center, {
|
|
67
76
|
backgroundColor: theme.colors.contrast50
|
|
68
77
|
}, {
|
|
69
|
-
borderRadius: 14
|
|
78
|
+
borderRadius: 14,
|
|
79
|
+
height: pillHeight
|
|
70
80
|
}, a.p_xs, style],
|
|
71
81
|
role: type === 'tabs' ? 'tablist' : 'radiogroup',
|
|
72
82
|
children: [selectedPosition !== null && /*#__PURE__*/_jsx(Slider, {
|
|
@@ -84,7 +94,10 @@ export function Item({
|
|
|
84
94
|
style,
|
|
85
95
|
children,
|
|
86
96
|
onPress: onPressProp,
|
|
87
|
-
|
|
97
|
+
accessibilityLabel,
|
|
98
|
+
accessibilityHint,
|
|
99
|
+
testID,
|
|
100
|
+
disabled
|
|
88
101
|
}) {
|
|
89
102
|
const [position, setPosition] = useState(null);
|
|
90
103
|
const ctx = useContext(InternalContext);
|
|
@@ -108,8 +121,22 @@ export function Item({
|
|
|
108
121
|
ctx.onSelectValue(value, position);
|
|
109
122
|
onPressProp?.();
|
|
110
123
|
}, [ctx, value, position, onPressProp]);
|
|
124
|
+
|
|
125
|
+
// We render the segment as a flat `Pressable` (not Bloom's `Button`)
|
|
126
|
+
// for two reasons:
|
|
127
|
+
// 1. Layout: we need the touch target to participate directly in the
|
|
128
|
+
// Root's row flex layout so `flex: 1` distributes the items
|
|
129
|
+
// evenly on every platform. Bloom Button wraps its Pressable in
|
|
130
|
+
// an Animated.View that doesn't forward layout-affecting styles,
|
|
131
|
+
// which would collapse the segment to its natural text width.
|
|
132
|
+
// 2. Semantics: the Root carries `role="tablist"`/`"radiogroup"` and
|
|
133
|
+
// each item carries `role="tab"`/`"radio"`. Bloom Button always
|
|
134
|
+
// adds `accessibilityRole="button"` — that overrides the correct
|
|
135
|
+
// a11y role for tablist children.
|
|
136
|
+
const itemRole = ctx.type === 'tabs' ? 'tab' : 'radio';
|
|
137
|
+
const itemMinHeight = ctx.size === 'large' ? 40 : 32;
|
|
111
138
|
return /*#__PURE__*/_jsx(View, {
|
|
112
|
-
style: [a.flex_1, a.flex_row],
|
|
139
|
+
style: [a.flex_1, a.flex_row, a.align_stretch],
|
|
113
140
|
onLayout: evt => {
|
|
114
141
|
const measuredPosition = {
|
|
115
142
|
x: evt.nativeEvent.layout.x,
|
|
@@ -120,14 +147,24 @@ export function Item({
|
|
|
120
147
|
}
|
|
121
148
|
setPosition(measuredPosition);
|
|
122
149
|
},
|
|
123
|
-
children: /*#__PURE__*/_jsx(
|
|
124
|
-
...props,
|
|
150
|
+
children: /*#__PURE__*/_jsx(Pressable, {
|
|
125
151
|
onPress: onPress,
|
|
126
|
-
accessibilityLabel:
|
|
127
|
-
accessibilityHint:
|
|
128
|
-
|
|
129
|
-
|
|
152
|
+
accessibilityLabel: accessibilityLabel,
|
|
153
|
+
accessibilityHint: accessibilityHint,
|
|
154
|
+
accessibilityState: {
|
|
155
|
+
selected: active,
|
|
156
|
+
disabled: !!disabled
|
|
157
|
+
},
|
|
158
|
+
role: itemRole,
|
|
159
|
+
disabled: disabled,
|
|
160
|
+
testID: testID,
|
|
161
|
+
style: ({
|
|
162
|
+
pressed
|
|
163
|
+
}) => [a.flex_1, a.flex_row, a.align_center, a.justify_center, a.bg_transparent, a.px_sm, a.py_xs, {
|
|
164
|
+
minHeight: itemMinHeight,
|
|
130
165
|
borderRadius: 10
|
|
166
|
+
}, pressed && !disabled && {
|
|
167
|
+
opacity: 0.7
|
|
131
168
|
}, style],
|
|
132
169
|
children: /*#__PURE__*/_jsx(InternalItemContext.Provider, {
|
|
133
170
|
value: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useCallback","useContext","useLayoutEffect","useMemo","useRef","useState","Platform","Text","View","Animated","Easing","LinearTransition","useTheme","atoms","a","platform","
|
|
1
|
+
{"version":3,"names":["createContext","useCallback","useContext","useLayoutEffect","useMemo","useRef","useState","Platform","Pressable","Text","View","Animated","Easing","LinearTransition","useTheme","atoms","a","platform","jsx","_jsx","jsxs","_jsxs","InternalContext","Root","label","type","size","value","onChange","children","style","accessibilityHint","theme","selectedPosition","setSelectedPosition","contextValue","selectedValue","onSelectValue","val","position","updatePosition","currPos","width","x","itemMinHeight","pillHeight","accessibilityLabel","w_full","relative","flex_row","align_center","backgroundColor","colors","contrast50","borderRadius","height","p_xs","role","Slider","Provider","InternalItemContext","Item","onPress","onPressProp","testID","disabled","setPosition","ctx","Error","active","needsUpdate","updatePositionRef","current","positionRef","itemRole","flex_1","align_stretch","onLayout","evt","measuredPosition","nativeEvent","layout","accessibilityState","selected","pressed","justify_center","bg_transparent","px_sm","py_xs","minHeight","opacity","ItemText","props","text_center","text_md","font_medium","px_xs","color","text","textTertiary","nativeLayout","OS","easing","out","exp","undefined","absolute","background","top","bottom","left","web","boxShadow","ios","shadowColor","shadowOffset","shadowOpacity","shadowRadius","android","elevation","native","transform","translateX"],"sourceRoot":"../../../src","sources":["segmented-control/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
|
|
2
|
-
import { type ButtonProps } from '../button';
|
|
1
|
+
import { type PressableProps, type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
2
|
/**
|
|
4
3
|
* Segmented control component.
|
|
5
4
|
*
|
|
@@ -29,10 +28,16 @@ export declare function Root<T extends string>({ label, type, size, value, onCha
|
|
|
29
28
|
style?: StyleProp<ViewStyle>;
|
|
30
29
|
accessibilityHint?: string;
|
|
31
30
|
}): import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
export declare function Item({ value, style, children, onPress: onPressProp,
|
|
31
|
+
export declare function Item({ value, style, children, onPress: onPressProp, accessibilityLabel, accessibilityHint, testID, disabled, }: {
|
|
33
32
|
value: string;
|
|
34
33
|
children: React.ReactNode;
|
|
35
|
-
|
|
34
|
+
style?: StyleProp<ViewStyle>;
|
|
35
|
+
onPress?: () => void;
|
|
36
|
+
accessibilityLabel?: string;
|
|
37
|
+
accessibilityHint?: string;
|
|
38
|
+
testID?: string;
|
|
39
|
+
disabled?: PressableProps['disabled'];
|
|
40
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
36
41
|
export declare function ItemText({ style, children, ...props }: {
|
|
37
42
|
children: React.ReactNode;
|
|
38
43
|
style?: StyleProp<TextStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkBtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoEA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,2CA2FA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
|
|
2
|
-
import { type ButtonProps } from '../button';
|
|
1
|
+
import { type PressableProps, type StyleProp, Text, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
2
|
/**
|
|
4
3
|
* Segmented control component.
|
|
5
4
|
*
|
|
@@ -29,10 +28,16 @@ export declare function Root<T extends string>({ label, type, size, value, onCha
|
|
|
29
28
|
style?: StyleProp<ViewStyle>;
|
|
30
29
|
accessibilityHint?: string;
|
|
31
30
|
}): import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
export declare function Item({ value, style, children, onPress: onPressProp,
|
|
31
|
+
export declare function Item({ value, style, children, onPress: onPressProp, accessibilityLabel, accessibilityHint, testID, disabled, }: {
|
|
33
32
|
value: string;
|
|
34
33
|
children: React.ReactNode;
|
|
35
|
-
|
|
34
|
+
style?: StyleProp<ViewStyle>;
|
|
35
|
+
onPress?: () => void;
|
|
36
|
+
accessibilityLabel?: string;
|
|
37
|
+
accessibilityHint?: string;
|
|
38
|
+
testID?: string;
|
|
39
|
+
disabled?: PressableProps['disabled'];
|
|
40
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
36
41
|
export declare function ItemText({ style, children, ...props }: {
|
|
37
42
|
children: React.ReactNode;
|
|
38
43
|
style?: StyleProp<TextStyle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,IAAI,EACJ,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAkBtB;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,IAAc,EACd,IAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,iBAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoEA;AAMD,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC,2CA2FA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG,IAAI,CACnE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,UAAU,CACrB,2CAyBA"}
|
package/package.json
CHANGED
|
@@ -7,12 +7,20 @@ import {
|
|
|
7
7
|
useRef,
|
|
8
8
|
useState,
|
|
9
9
|
} from 'react';
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
Platform,
|
|
12
|
+
Pressable,
|
|
13
|
+
type PressableProps,
|
|
14
|
+
type StyleProp,
|
|
15
|
+
Text,
|
|
16
|
+
type TextStyle,
|
|
17
|
+
View,
|
|
18
|
+
type ViewStyle,
|
|
19
|
+
} from 'react-native';
|
|
11
20
|
import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
|
|
12
21
|
|
|
13
22
|
import { useTheme } from '../theme/use-theme';
|
|
14
23
|
import { atoms as a, platform } from '../styles';
|
|
15
|
-
import { Button, type ButtonProps } from '../button';
|
|
16
24
|
|
|
17
25
|
const InternalContext = createContext<{
|
|
18
26
|
type: 'tabs' | 'radio';
|
|
@@ -98,17 +106,27 @@ export function Root<T extends string>({
|
|
|
98
106
|
};
|
|
99
107
|
}, [value, selectedPosition, setSelectedPosition, onChange, type, size]);
|
|
100
108
|
|
|
109
|
+
// Height of the wrapping pill matches the active item height (item
|
|
110
|
+
// `minHeight` + 4px outer `p_xs` padding on both sides). Locking the
|
|
111
|
+
// outer View to this exact height keeps the control as a tight inline
|
|
112
|
+
// pill on every platform — without it, a parent column flex context
|
|
113
|
+
// (the default on a `<View>`) would let the Root stretch vertically
|
|
114
|
+
// and the items inside would inherit that stretched height, blowing
|
|
115
|
+
// the control up into a giant block on native.
|
|
116
|
+
const itemMinHeight = size === 'large' ? 40 : 32;
|
|
117
|
+
const pillHeight = itemMinHeight + 8;
|
|
118
|
+
|
|
101
119
|
return (
|
|
102
120
|
<View
|
|
103
121
|
accessibilityLabel={label}
|
|
104
122
|
accessibilityHint={accessibilityHint ?? ''}
|
|
105
123
|
style={[
|
|
106
124
|
a.w_full,
|
|
107
|
-
a.flex_1,
|
|
108
125
|
a.relative,
|
|
109
126
|
a.flex_row,
|
|
127
|
+
a.align_center,
|
|
110
128
|
{ backgroundColor: theme.colors.contrast50 },
|
|
111
|
-
{ borderRadius: 14 },
|
|
129
|
+
{ borderRadius: 14, height: pillHeight },
|
|
112
130
|
a.p_xs,
|
|
113
131
|
style,
|
|
114
132
|
]}
|
|
@@ -132,8 +150,20 @@ export function Item({
|
|
|
132
150
|
style,
|
|
133
151
|
children,
|
|
134
152
|
onPress: onPressProp,
|
|
135
|
-
|
|
136
|
-
|
|
153
|
+
accessibilityLabel,
|
|
154
|
+
accessibilityHint,
|
|
155
|
+
testID,
|
|
156
|
+
disabled,
|
|
157
|
+
}: {
|
|
158
|
+
value: string;
|
|
159
|
+
children: React.ReactNode;
|
|
160
|
+
style?: StyleProp<ViewStyle>;
|
|
161
|
+
onPress?: () => void;
|
|
162
|
+
accessibilityLabel?: string;
|
|
163
|
+
accessibilityHint?: string;
|
|
164
|
+
testID?: string;
|
|
165
|
+
disabled?: PressableProps['disabled'];
|
|
166
|
+
}) {
|
|
137
167
|
const [position, setPosition] = useState<{ x: number; width: number } | null>(
|
|
138
168
|
null,
|
|
139
169
|
);
|
|
@@ -171,9 +201,23 @@ export function Item({
|
|
|
171
201
|
onPressProp?.();
|
|
172
202
|
}, [ctx, value, position, onPressProp]);
|
|
173
203
|
|
|
204
|
+
// We render the segment as a flat `Pressable` (not Bloom's `Button`)
|
|
205
|
+
// for two reasons:
|
|
206
|
+
// 1. Layout: we need the touch target to participate directly in the
|
|
207
|
+
// Root's row flex layout so `flex: 1` distributes the items
|
|
208
|
+
// evenly on every platform. Bloom Button wraps its Pressable in
|
|
209
|
+
// an Animated.View that doesn't forward layout-affecting styles,
|
|
210
|
+
// which would collapse the segment to its natural text width.
|
|
211
|
+
// 2. Semantics: the Root carries `role="tablist"`/`"radiogroup"` and
|
|
212
|
+
// each item carries `role="tab"`/`"radio"`. Bloom Button always
|
|
213
|
+
// adds `accessibilityRole="button"` — that overrides the correct
|
|
214
|
+
// a11y role for tablist children.
|
|
215
|
+
const itemRole = ctx.type === 'tabs' ? 'tab' : 'radio';
|
|
216
|
+
const itemMinHeight = ctx.size === 'large' ? 40 : 32;
|
|
217
|
+
|
|
174
218
|
return (
|
|
175
219
|
<View
|
|
176
|
-
style={[a.flex_1, a.flex_row]}
|
|
220
|
+
style={[a.flex_1, a.flex_row, a.align_stretch]}
|
|
177
221
|
onLayout={evt => {
|
|
178
222
|
const measuredPosition = {
|
|
179
223
|
x: evt.nativeEvent.layout.x,
|
|
@@ -184,23 +228,30 @@ export function Item({
|
|
|
184
228
|
}
|
|
185
229
|
setPosition(measuredPosition);
|
|
186
230
|
}}>
|
|
187
|
-
<
|
|
188
|
-
{...props}
|
|
231
|
+
<Pressable
|
|
189
232
|
onPress={onPress}
|
|
190
|
-
accessibilityLabel={
|
|
191
|
-
accessibilityHint={
|
|
192
|
-
|
|
233
|
+
accessibilityLabel={accessibilityLabel}
|
|
234
|
+
accessibilityHint={accessibilityHint}
|
|
235
|
+
accessibilityState={{ selected: active, disabled: !!disabled }}
|
|
236
|
+
role={itemRole}
|
|
237
|
+
disabled={disabled}
|
|
238
|
+
testID={testID}
|
|
239
|
+
style={({ pressed }) => [
|
|
193
240
|
a.flex_1,
|
|
241
|
+
a.flex_row,
|
|
242
|
+
a.align_center,
|
|
243
|
+
a.justify_center,
|
|
194
244
|
a.bg_transparent,
|
|
195
245
|
a.px_sm,
|
|
196
246
|
a.py_xs,
|
|
197
|
-
{ minHeight:
|
|
247
|
+
{ minHeight: itemMinHeight, borderRadius: 10 },
|
|
248
|
+
pressed && !disabled && { opacity: 0.7 },
|
|
198
249
|
style,
|
|
199
250
|
]}>
|
|
200
251
|
<InternalItemContext.Provider value={{ active }}>
|
|
201
252
|
{children}
|
|
202
253
|
</InternalItemContext.Provider>
|
|
203
|
-
</
|
|
254
|
+
</Pressable>
|
|
204
255
|
</View>
|
|
205
256
|
);
|
|
206
257
|
}
|