react-native-terra-ui 0.11.17 → 0.12.1
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/CHANGELOG.md +23 -0
- package/lib/module/components/accordion/Accordion.js +109 -0
- package/lib/module/components/accordion/Accordion.js.map +1 -0
- package/lib/module/components/accordion/context.js +34 -0
- package/lib/module/components/accordion/context.js.map +1 -0
- package/lib/module/components/accordion/hooks/use-accordion-core.js +46 -0
- package/lib/module/components/accordion/hooks/use-accordion-core.js.map +1 -0
- package/lib/module/components/accordion/index.js +5 -0
- package/lib/module/components/accordion/index.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionContent.js +98 -0
- package/lib/module/components/accordion/parts/AccordionContent.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionIndicator.js +60 -0
- package/lib/module/components/accordion/parts/AccordionIndicator.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionItem.js +53 -0
- package/lib/module/components/accordion/parts/AccordionItem.js.map +1 -0
- package/lib/module/components/accordion/parts/AccordionTrigger.js +85 -0
- package/lib/module/components/accordion/parts/AccordionTrigger.js.map +1 -0
- package/lib/module/components/accordion/types.js +4 -0
- package/lib/module/components/accordion/types.js.map +1 -0
- package/lib/module/components/accordion/utils.js +15 -0
- package/lib/module/components/accordion/utils.js.map +1 -0
- package/lib/module/components/avatar/Avatar.js +15 -3
- package/lib/module/components/avatar/Avatar.js.map +1 -1
- package/lib/module/components/badge/Badge.js +220 -64
- package/lib/module/components/badge/Badge.js.map +1 -1
- package/lib/module/components/badge/WithBadge.js +94 -0
- package/lib/module/components/badge/WithBadge.js.map +1 -0
- package/lib/module/components/badge/index.js +1 -0
- package/lib/module/components/badge/index.js.map +1 -1
- package/lib/module/components/badge/utils.js +3 -3
- package/lib/module/components/chip/Chip.js +1 -0
- package/lib/module/components/chip/Chip.js.map +1 -1
- package/lib/module/components/header/parts/HeaderBar.js +105 -69
- package/lib/module/components/header/parts/HeaderBar.js.map +1 -1
- package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js +50 -33
- package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js.map +1 -1
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/components/input/parts/InputField.js +96 -82
- package/lib/module/components/input/parts/InputField.js.map +1 -1
- package/lib/module/components/text/Text.js +10 -6
- package/lib/module/components/text/Text.js.map +1 -1
- package/lib/module/theme/tokens/primitives.js +24 -4
- package/lib/module/theme/tokens/primitives.js.map +1 -1
- package/lib/typescript/src/components/accordion/Accordion.d.ts +33 -0
- package/lib/typescript/src/components/accordion/Accordion.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/context.d.ts +25 -0
- package/lib/typescript/src/components/accordion/context.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/hooks/use-accordion-core.d.ts +11 -0
- package/lib/typescript/src/components/accordion/hooks/use-accordion-core.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/index.d.ts +8 -0
- package/lib/typescript/src/components/accordion/index.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionContent.d.ts +8 -0
- package/lib/typescript/src/components/accordion/parts/AccordionContent.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionIndicator.d.ts +16 -0
- package/lib/typescript/src/components/accordion/parts/AccordionIndicator.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionItem.d.ts +16 -0
- package/lib/typescript/src/components/accordion/parts/AccordionItem.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/parts/AccordionTrigger.d.ts +11 -0
- package/lib/typescript/src/components/accordion/parts/AccordionTrigger.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/types.d.ts +65 -0
- package/lib/typescript/src/components/accordion/types.d.ts.map +1 -0
- package/lib/typescript/src/components/accordion/utils.d.ts +8 -0
- package/lib/typescript/src/components/accordion/utils.d.ts.map +1 -0
- package/lib/typescript/src/components/avatar/Avatar.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/Badge.d.ts +13 -9
- package/lib/typescript/src/components/badge/Badge.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/WithBadge.d.ts +18 -0
- package/lib/typescript/src/components/badge/WithBadge.d.ts.map +1 -0
- package/lib/typescript/src/components/badge/index.d.ts +2 -1
- package/lib/typescript/src/components/badge/index.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/types.d.ts +35 -12
- package/lib/typescript/src/components/badge/types.d.ts.map +1 -1
- package/lib/typescript/src/components/badge/utils.d.ts +3 -3
- package/lib/typescript/src/components/badge/utils.d.ts.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderBar.d.ts.map +1 -1
- package/lib/typescript/src/components/index.d.ts +1 -0
- package/lib/typescript/src/components/index.d.ts.map +1 -1
- package/lib/typescript/src/components/input/parts/InputField.d.ts.map +1 -1
- package/lib/typescript/src/theme/tokens/primitives.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/accordion/Accordion.tsx +116 -0
- package/src/components/accordion/context.ts +45 -0
- package/src/components/accordion/hooks/use-accordion-core.ts +51 -0
- package/src/components/accordion/index.ts +14 -0
- package/src/components/accordion/parts/AccordionContent.tsx +96 -0
- package/src/components/accordion/parts/AccordionIndicator.tsx +67 -0
- package/src/components/accordion/parts/AccordionItem.tsx +55 -0
- package/src/components/accordion/parts/AccordionTrigger.tsx +88 -0
- package/src/components/accordion/types.ts +71 -0
- package/src/components/accordion/utils.ts +12 -0
- package/src/components/avatar/Avatar.tsx +12 -2
- package/src/components/badge/Badge.tsx +178 -59
- package/src/components/badge/WithBadge.tsx +79 -0
- package/src/components/badge/index.ts +2 -1
- package/src/components/badge/types.ts +36 -12
- package/src/components/badge/utils.ts +3 -3
- package/src/components/chip/Chip.tsx +1 -0
- package/src/components/header/parts/HeaderBar.tsx +100 -57
- package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx +47 -29
- package/src/components/index.ts +1 -0
- package/src/components/input/parts/InputField.tsx +63 -55
- package/src/components/text/Text.tsx +10 -6
- package/src/theme/tokens/primitives.ts +24 -4
- package/lib/module/components/badge/parts/BadgeIndicator.js +0 -212
- package/lib/module/components/badge/parts/BadgeIndicator.js.map +0 -1
- package/lib/typescript/src/components/badge/parts/BadgeIndicator.d.ts +0 -19
- package/lib/typescript/src/components/badge/parts/BadgeIndicator.d.ts.map +0 -1
- package/src/components/badge/parts/BadgeIndicator.tsx +0 -178
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
-
import { Text as RNText } from "react-native-unistyles/components/native/Text";
|
|
5
|
-
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
6
|
-
import { resolveThemeColor } from "../../../utils/resolve-theme-color.js";
|
|
7
|
-
import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "../../../utils/typography.js";
|
|
8
|
-
import { getCustomBadgeColors, hasLabel } from "../utils.js";
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
|
|
11
|
-
/** Label foreground per scheme — mirrors the spec's token table. */
|
|
12
|
-
const FG_TOKEN = {
|
|
13
|
-
primary: "accent.solid.fg",
|
|
14
|
-
secondary: "neutral.solid.fg",
|
|
15
|
-
success: "success.solid.fg",
|
|
16
|
-
warning: "warning.solid.fg",
|
|
17
|
-
danger: "danger.solid.fg"
|
|
18
|
-
};
|
|
19
|
-
const LABEL_VARIANT = {
|
|
20
|
-
sm: "label-sm",
|
|
21
|
-
md: "label-md",
|
|
22
|
-
lg: "label-lg"
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
|
|
26
|
-
* legibility ring, and the accessibility node — the wrapper owns only position.
|
|
27
|
-
*
|
|
28
|
-
* `useUnistyles` is called unconditionally, which is what subscribes this
|
|
29
|
-
* component to theme changes. The background below comes from a variant, which
|
|
30
|
-
* unistyles applies straight to the native node on a theme switch; without a
|
|
31
|
-
* re-render React would go on believing the node holds the previous theme's
|
|
32
|
-
* value. `Chip` documents the same hazard on its root.
|
|
33
|
-
*/
|
|
34
|
-
export const BadgeIndicator = ({
|
|
35
|
-
label,
|
|
36
|
-
color,
|
|
37
|
-
size,
|
|
38
|
-
accessibilityLabel
|
|
39
|
-
}) => {
|
|
40
|
-
const {
|
|
41
|
-
theme
|
|
42
|
-
} = useUnistyles();
|
|
43
|
-
// A literal never matches one of the five variant options, so it's cast to
|
|
44
|
-
// satisfy `useVariants`'s literal-union type while still being compared
|
|
45
|
-
// against the real value below.
|
|
46
|
-
const _styles = styles;
|
|
47
|
-
{
|
|
48
|
-
const styles = _styles.useVariants({
|
|
49
|
-
color: color,
|
|
50
|
-
size
|
|
51
|
-
});
|
|
52
|
-
const custom = SCHEME_NAMES.has(color) ? null : getCustomBadgeColors(color);
|
|
53
|
-
const labelled = hasLabel(label);
|
|
54
|
-
const foreground = custom ? custom.fg : FG_TOKEN[color];
|
|
55
|
-
|
|
56
|
-
// An explicit label wins even on a dot; a dot with nothing to announce is
|
|
57
|
-
// decorative and hidden rather than read out as an unlabelled element.
|
|
58
|
-
const announced = accessibilityLabel ?? (labelled ? String(label) : undefined);
|
|
59
|
-
const accessibility = announced ? {
|
|
60
|
-
accessible: true,
|
|
61
|
-
accessibilityLabel: announced
|
|
62
|
-
} : {
|
|
63
|
-
accessibilityElementsHidden: true,
|
|
64
|
-
importantForAccessibility: "no-hide-descendants",
|
|
65
|
-
"aria-hidden": true
|
|
66
|
-
};
|
|
67
|
-
return /*#__PURE__*/_jsx(View, {
|
|
68
|
-
style: [styles.indicator, labelled ? styles.pill : styles.dot, custom ? {
|
|
69
|
-
backgroundColor: custom.bg
|
|
70
|
-
} : null],
|
|
71
|
-
...accessibility,
|
|
72
|
-
children: labelled ? /*#__PURE__*/_jsx(RNText, {
|
|
73
|
-
style: [styles.label, {
|
|
74
|
-
color: resolveThemeColor(foreground, theme)
|
|
75
|
-
}],
|
|
76
|
-
maxFontSizeMultiplier: theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier,
|
|
77
|
-
numberOfLines: 1,
|
|
78
|
-
children: label
|
|
79
|
-
}) : null
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
85
|
-
//
|
|
86
|
-
// `color` is a plain variant rather than a compound one: `Badge` renders solid
|
|
87
|
-
// only, so there is no second paint axis for it to interact with.
|
|
88
|
-
//
|
|
89
|
-
// React Native's box model is border-box, so the ring below eats into the
|
|
90
|
-
// indicator rather than growing it — the dot's outer diameter stays exactly
|
|
91
|
-
// what `size` declares, with no compensation arithmetic.
|
|
92
|
-
const styles = StyleSheet.create(theme => {
|
|
93
|
-
const c = theme.color;
|
|
94
|
-
// A custom font encodes its weight in the family name, so only the system
|
|
95
|
-
// font takes a numeric `fontWeight` — the same branch `Chip` makes. Inlined
|
|
96
|
-
// rather than extracted: the unistyles Babel plugin rewrites this factory,
|
|
97
|
-
// and an imported function called from inside it is not in scope at runtime.
|
|
98
|
-
const labelFont = theme.typography.fonts.semibold;
|
|
99
|
-
const isSystemLabelFont = labelFont === SYSTEM_FONT;
|
|
100
|
-
return {
|
|
101
|
-
indicator: {
|
|
102
|
-
alignItems: "center",
|
|
103
|
-
justifyContent: "center",
|
|
104
|
-
borderRadius: theme.radius.full,
|
|
105
|
-
borderColor: c["surface.canvas"],
|
|
106
|
-
variants: {
|
|
107
|
-
size: {
|
|
108
|
-
sm: {
|
|
109
|
-
borderWidth: 1.5
|
|
110
|
-
},
|
|
111
|
-
md: {
|
|
112
|
-
borderWidth: 2
|
|
113
|
-
},
|
|
114
|
-
lg: {
|
|
115
|
-
borderWidth: 2
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
color: {
|
|
119
|
-
primary: {
|
|
120
|
-
backgroundColor: c["accent.solid.bg"]
|
|
121
|
-
},
|
|
122
|
-
secondary: {
|
|
123
|
-
backgroundColor: c["neutral.solid.bg"]
|
|
124
|
-
},
|
|
125
|
-
success: {
|
|
126
|
-
backgroundColor: c["success.solid.bg"]
|
|
127
|
-
},
|
|
128
|
-
warning: {
|
|
129
|
-
backgroundColor: c["warning.solid.bg"]
|
|
130
|
-
},
|
|
131
|
-
danger: {
|
|
132
|
-
backgroundColor: c["danger.solid.bg"]
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
},
|
|
136
|
-
uni__dependencies: [0, 4]
|
|
137
|
-
},
|
|
138
|
-
// These diameters are mirrored by `DOT_SIZE` in `../utils.ts`, which the
|
|
139
|
-
// anchor arithmetic reads. The Babel plugin needs them literal here, so a
|
|
140
|
-
// test asserts the two stay equal.
|
|
141
|
-
dot: {
|
|
142
|
-
variants: {
|
|
143
|
-
size: {
|
|
144
|
-
sm: {
|
|
145
|
-
width: 12,
|
|
146
|
-
height: 12
|
|
147
|
-
},
|
|
148
|
-
md: {
|
|
149
|
-
width: 16,
|
|
150
|
-
height: 16
|
|
151
|
-
},
|
|
152
|
-
lg: {
|
|
153
|
-
width: 20,
|
|
154
|
-
height: 20
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
uni__dependencies: [4]
|
|
159
|
-
},
|
|
160
|
-
pill: {
|
|
161
|
-
variants: {
|
|
162
|
-
size: {
|
|
163
|
-
sm: {
|
|
164
|
-
height: 18,
|
|
165
|
-
minWidth: 18,
|
|
166
|
-
paddingHorizontal: 5
|
|
167
|
-
},
|
|
168
|
-
md: {
|
|
169
|
-
height: 22,
|
|
170
|
-
minWidth: 22,
|
|
171
|
-
paddingHorizontal: 6
|
|
172
|
-
},
|
|
173
|
-
lg: {
|
|
174
|
-
height: 26,
|
|
175
|
-
minWidth: 26,
|
|
176
|
-
paddingHorizontal: 8
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
},
|
|
180
|
-
uni__dependencies: [4]
|
|
181
|
-
},
|
|
182
|
-
// Spelled out rather than derived from `LABEL_VARIANT`: the unistyles Babel
|
|
183
|
-
// plugin reads this object statically, so computed variant keys are not
|
|
184
|
-
// safe here even though they would resolve correctly under test.
|
|
185
|
-
label: {
|
|
186
|
-
textAlign: "center",
|
|
187
|
-
fontFamily: isSystemLabelFont ? undefined : labelFont,
|
|
188
|
-
fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
|
|
189
|
-
variants: {
|
|
190
|
-
size: {
|
|
191
|
-
sm: {
|
|
192
|
-
fontSize: theme.typography.variants["label-sm"].fontSize,
|
|
193
|
-
lineHeight: theme.typography.variants["label-sm"].lineHeight,
|
|
194
|
-
letterSpacing: theme.typography.variants["label-sm"].letterSpacing
|
|
195
|
-
},
|
|
196
|
-
md: {
|
|
197
|
-
fontSize: theme.typography.variants["label-md"].fontSize,
|
|
198
|
-
lineHeight: theme.typography.variants["label-md"].lineHeight,
|
|
199
|
-
letterSpacing: theme.typography.variants["label-md"].letterSpacing
|
|
200
|
-
},
|
|
201
|
-
lg: {
|
|
202
|
-
fontSize: theme.typography.variants["label-lg"].fontSize,
|
|
203
|
-
lineHeight: theme.typography.variants["label-lg"].lineHeight,
|
|
204
|
-
letterSpacing: theme.typography.variants["label-lg"].letterSpacing
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
},
|
|
208
|
-
uni__dependencies: [0, 4]
|
|
209
|
-
}
|
|
210
|
-
};
|
|
211
|
-
});
|
|
212
|
-
//# sourceMappingURL=BadgeIndicator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","useUnistyles","resolveThemeColor","FONT_WEIGHT_VALUE","SYSTEM_FONT","getCustomBadgeColors","hasLabel","jsx","_jsx","SCHEME_NAMES","Set","FG_TOKEN","primary","secondary","success","warning","danger","LABEL_VARIANT","sm","md","lg","BadgeIndicator","label","color","size","accessibilityLabel","theme","_styles","styles","useVariants","custom","has","labelled","foreground","fg","announced","String","undefined","accessibility","accessible","accessibilityElementsHidden","importantForAccessibility","View","style","indicator","pill","dot","backgroundColor","bg","children","RNText","maxFontSizeMultiplier","typography","variants","numberOfLines","create","c","labelFont","fonts","semibold","isSystemLabelFont","alignItems","justifyContent","borderRadius","radius","full","borderColor","borderWidth","uni__dependencies","width","height","minWidth","paddingHorizontal","textAlign","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing"],"sourceRoot":"../../../../../src","sources":["components/badge/parts/BadgeIndicator.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { BadgeColor, BadgeSize } from "../types.js";
|
|
2
|
-
export interface BadgeIndicatorProps {
|
|
3
|
-
label?: string | number;
|
|
4
|
-
color: BadgeColor;
|
|
5
|
-
size: BadgeSize;
|
|
6
|
-
accessibilityLabel?: string;
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
|
|
10
|
-
* legibility ring, and the accessibility node — the wrapper owns only position.
|
|
11
|
-
*
|
|
12
|
-
* `useUnistyles` is called unconditionally, which is what subscribes this
|
|
13
|
-
* component to theme changes. The background below comes from a variant, which
|
|
14
|
-
* unistyles applies straight to the native node on a theme switch; without a
|
|
15
|
-
* re-render React would go on believing the node holds the previous theme's
|
|
16
|
-
* value. `Chip` documents the same hazard on its root.
|
|
17
|
-
*/
|
|
18
|
-
export declare const BadgeIndicator: ({ label, color, size, accessibilityLabel }: BadgeIndicatorProps) => import("react").JSX.Element;
|
|
19
|
-
//# sourceMappingURL=BadgeIndicator.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/badge/parts/BadgeIndicator.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAU,CAAC;AAsBtD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,4CAA4C,mBAAmB,gCA0C7F,CAAC"}
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
import { Text as RNText, View } from "react-native";
|
|
2
|
-
|
|
3
|
-
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
4
|
-
|
|
5
|
-
import type { ColorToken, RoleTextVariant } from "#theme/types";
|
|
6
|
-
import { resolveThemeColor } from "#utils/resolve-theme-color";
|
|
7
|
-
import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
|
|
8
|
-
import type { BadgeColor, BadgeSize } from "../types";
|
|
9
|
-
import { getCustomBadgeColors, hasLabel } from "../utils";
|
|
10
|
-
|
|
11
|
-
const SCHEME_NAMES = new Set(["primary", "secondary", "success", "warning", "danger"]);
|
|
12
|
-
|
|
13
|
-
type BadgeScheme = "primary" | "secondary" | "success" | "warning" | "danger";
|
|
14
|
-
|
|
15
|
-
/** Label foreground per scheme — mirrors the spec's token table. */
|
|
16
|
-
const FG_TOKEN: Record<BadgeScheme, ColorToken> = {
|
|
17
|
-
primary: "accent.solid.fg",
|
|
18
|
-
secondary: "neutral.solid.fg",
|
|
19
|
-
success: "success.solid.fg",
|
|
20
|
-
warning: "warning.solid.fg",
|
|
21
|
-
danger: "danger.solid.fg",
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const LABEL_VARIANT: Record<BadgeSize, RoleTextVariant> = {
|
|
25
|
-
sm: "label-sm",
|
|
26
|
-
md: "label-md",
|
|
27
|
-
lg: "label-lg",
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export interface BadgeIndicatorProps {
|
|
31
|
-
label?: string | number;
|
|
32
|
-
color: BadgeColor;
|
|
33
|
-
size: BadgeSize;
|
|
34
|
-
accessibilityLabel?: string;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* The overlay itself: a dot, or a pill carrying the label. Owns the paint, the
|
|
39
|
-
* legibility ring, and the accessibility node — the wrapper owns only position.
|
|
40
|
-
*
|
|
41
|
-
* `useUnistyles` is called unconditionally, which is what subscribes this
|
|
42
|
-
* component to theme changes. The background below comes from a variant, which
|
|
43
|
-
* unistyles applies straight to the native node on a theme switch; without a
|
|
44
|
-
* re-render React would go on believing the node holds the previous theme's
|
|
45
|
-
* value. `Chip` documents the same hazard on its root.
|
|
46
|
-
*/
|
|
47
|
-
export const BadgeIndicator = ({ label, color, size, accessibilityLabel }: BadgeIndicatorProps) => {
|
|
48
|
-
const { theme } = useUnistyles();
|
|
49
|
-
// A literal never matches one of the five variant options, so it's cast to
|
|
50
|
-
// satisfy `useVariants`'s literal-union type while still being compared
|
|
51
|
-
// against the real value below.
|
|
52
|
-
styles.useVariants({ color: color as BadgeScheme, size });
|
|
53
|
-
|
|
54
|
-
const custom = SCHEME_NAMES.has(color) ? null : getCustomBadgeColors(color);
|
|
55
|
-
const labelled = hasLabel(label);
|
|
56
|
-
const foreground = custom ? custom.fg : FG_TOKEN[color as BadgeScheme];
|
|
57
|
-
|
|
58
|
-
// An explicit label wins even on a dot; a dot with nothing to announce is
|
|
59
|
-
// decorative and hidden rather than read out as an unlabelled element.
|
|
60
|
-
const announced = accessibilityLabel ?? (labelled ? String(label) : undefined);
|
|
61
|
-
const accessibility = announced
|
|
62
|
-
? { accessible: true, accessibilityLabel: announced }
|
|
63
|
-
: {
|
|
64
|
-
accessibilityElementsHidden: true,
|
|
65
|
-
importantForAccessibility: "no-hide-descendants" as const,
|
|
66
|
-
"aria-hidden": true,
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
return (
|
|
70
|
-
<View
|
|
71
|
-
style={[
|
|
72
|
-
styles.indicator,
|
|
73
|
-
labelled ? styles.pill : styles.dot,
|
|
74
|
-
custom ? { backgroundColor: custom.bg } : null,
|
|
75
|
-
]}
|
|
76
|
-
{...accessibility}
|
|
77
|
-
>
|
|
78
|
-
{labelled ? (
|
|
79
|
-
<RNText
|
|
80
|
-
style={[styles.label, { color: resolveThemeColor(foreground, theme) }]}
|
|
81
|
-
maxFontSizeMultiplier={theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier}
|
|
82
|
-
numberOfLines={1}
|
|
83
|
-
>
|
|
84
|
-
{label}
|
|
85
|
-
</RNText>
|
|
86
|
-
) : null}
|
|
87
|
-
</View>
|
|
88
|
-
);
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// ─── Styles ───────────────────────────────────────────────────────────────────
|
|
92
|
-
//
|
|
93
|
-
// `color` is a plain variant rather than a compound one: `Badge` renders solid
|
|
94
|
-
// only, so there is no second paint axis for it to interact with.
|
|
95
|
-
//
|
|
96
|
-
// React Native's box model is border-box, so the ring below eats into the
|
|
97
|
-
// indicator rather than growing it — the dot's outer diameter stays exactly
|
|
98
|
-
// what `size` declares, with no compensation arithmetic.
|
|
99
|
-
const styles = StyleSheet.create((theme) => {
|
|
100
|
-
const c = theme.color;
|
|
101
|
-
// A custom font encodes its weight in the family name, so only the system
|
|
102
|
-
// font takes a numeric `fontWeight` — the same branch `Chip` makes. Inlined
|
|
103
|
-
// rather than extracted: the unistyles Babel plugin rewrites this factory,
|
|
104
|
-
// and an imported function called from inside it is not in scope at runtime.
|
|
105
|
-
const labelFont = theme.typography.fonts.semibold;
|
|
106
|
-
const isSystemLabelFont = labelFont === SYSTEM_FONT;
|
|
107
|
-
|
|
108
|
-
return {
|
|
109
|
-
indicator: {
|
|
110
|
-
alignItems: "center",
|
|
111
|
-
justifyContent: "center",
|
|
112
|
-
borderRadius: theme.radius.full,
|
|
113
|
-
borderColor: c["surface.canvas"],
|
|
114
|
-
variants: {
|
|
115
|
-
size: {
|
|
116
|
-
sm: { borderWidth: 1.5 },
|
|
117
|
-
md: { borderWidth: 2 },
|
|
118
|
-
lg: { borderWidth: 2 },
|
|
119
|
-
},
|
|
120
|
-
color: {
|
|
121
|
-
primary: { backgroundColor: c["accent.solid.bg"] },
|
|
122
|
-
secondary: { backgroundColor: c["neutral.solid.bg"] },
|
|
123
|
-
success: { backgroundColor: c["success.solid.bg"] },
|
|
124
|
-
warning: { backgroundColor: c["warning.solid.bg"] },
|
|
125
|
-
danger: { backgroundColor: c["danger.solid.bg"] },
|
|
126
|
-
},
|
|
127
|
-
},
|
|
128
|
-
},
|
|
129
|
-
// These diameters are mirrored by `DOT_SIZE` in `../utils.ts`, which the
|
|
130
|
-
// anchor arithmetic reads. The Babel plugin needs them literal here, so a
|
|
131
|
-
// test asserts the two stay equal.
|
|
132
|
-
dot: {
|
|
133
|
-
variants: {
|
|
134
|
-
size: {
|
|
135
|
-
sm: { width: 12, height: 12 },
|
|
136
|
-
md: { width: 16, height: 16 },
|
|
137
|
-
lg: { width: 20, height: 20 },
|
|
138
|
-
},
|
|
139
|
-
},
|
|
140
|
-
},
|
|
141
|
-
pill: {
|
|
142
|
-
variants: {
|
|
143
|
-
size: {
|
|
144
|
-
sm: { height: 18, minWidth: 18, paddingHorizontal: 5 },
|
|
145
|
-
md: { height: 22, minWidth: 22, paddingHorizontal: 6 },
|
|
146
|
-
lg: { height: 26, minWidth: 26, paddingHorizontal: 8 },
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
},
|
|
150
|
-
// Spelled out rather than derived from `LABEL_VARIANT`: the unistyles Babel
|
|
151
|
-
// plugin reads this object statically, so computed variant keys are not
|
|
152
|
-
// safe here even though they would resolve correctly under test.
|
|
153
|
-
label: {
|
|
154
|
-
textAlign: "center",
|
|
155
|
-
fontFamily: isSystemLabelFont ? undefined : labelFont,
|
|
156
|
-
fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
|
|
157
|
-
variants: {
|
|
158
|
-
size: {
|
|
159
|
-
sm: {
|
|
160
|
-
fontSize: theme.typography.variants["label-sm"].fontSize,
|
|
161
|
-
lineHeight: theme.typography.variants["label-sm"].lineHeight,
|
|
162
|
-
letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
|
|
163
|
-
},
|
|
164
|
-
md: {
|
|
165
|
-
fontSize: theme.typography.variants["label-md"].fontSize,
|
|
166
|
-
lineHeight: theme.typography.variants["label-md"].lineHeight,
|
|
167
|
-
letterSpacing: theme.typography.variants["label-md"].letterSpacing,
|
|
168
|
-
},
|
|
169
|
-
lg: {
|
|
170
|
-
fontSize: theme.typography.variants["label-lg"].fontSize,
|
|
171
|
-
lineHeight: theme.typography.variants["label-lg"].lineHeight,
|
|
172
|
-
letterSpacing: theme.typography.variants["label-lg"].letterSpacing,
|
|
173
|
-
},
|
|
174
|
-
},
|
|
175
|
-
},
|
|
176
|
-
},
|
|
177
|
-
};
|
|
178
|
-
});
|