@unif/react-native-design 0.27.0 → 0.28.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 +3 -3
- package/lib/module/components/ui/Ribbon/Ribbon.js +70 -0
- package/lib/module/components/ui/Ribbon/Ribbon.js.map +1 -0
- package/lib/module/components/ui/Ribbon/index.js +4 -0
- package/lib/module/components/ui/Ribbon/index.js.map +1 -0
- package/lib/module/components/ui/Ribbon/layout.js +26 -0
- package/lib/module/components/ui/Ribbon/layout.js.map +1 -0
- package/lib/module/components/ui/Ribbon/styles.js +44 -0
- package/lib/module/components/ui/Ribbon/styles.js.map +1 -0
- package/lib/module/components/ui/Ribbon/types.js +4 -0
- package/lib/module/components/ui/Ribbon/types.js.map +1 -0
- package/lib/module/components/ui/Stepper/Stepper.js +12 -2
- package/lib/module/components/ui/Stepper/Stepper.js.map +1 -1
- package/lib/module/components/ui/Stepper/displayValue.js +6 -0
- package/lib/module/components/ui/Stepper/displayValue.js.map +1 -0
- package/lib/module/components/ui/Stepper/layout.js +19 -1
- package/lib/module/components/ui/Stepper/layout.js.map +1 -1
- package/lib/module/components/ui/Stepper/styles.js +9 -1
- package/lib/module/components/ui/Stepper/styles.js.map +1 -1
- package/lib/module/components/ui/index.js +1 -0
- package/lib/module/components/ui/index.js.map +1 -1
- package/lib/typescript/src/components/ui/Ribbon/Ribbon.d.ts +4 -0
- package/lib/typescript/src/components/ui/Ribbon/Ribbon.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Ribbon/index.d.ts +3 -0
- package/lib/typescript/src/components/ui/Ribbon/index.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Ribbon/layout.d.ts +23 -0
- package/lib/typescript/src/components/ui/Ribbon/layout.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Ribbon/styles.d.ts +31 -0
- package/lib/typescript/src/components/ui/Ribbon/styles.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Ribbon/types.d.ts +18 -0
- package/lib/typescript/src/components/ui/Ribbon/types.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Stepper/Stepper.d.ts +1 -1
- package/lib/typescript/src/components/ui/Stepper/Stepper.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/Stepper/displayValue.d.ts +2 -0
- package/lib/typescript/src/components/ui/Stepper/displayValue.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Stepper/layout.d.ts +2 -0
- package/lib/typescript/src/components/ui/Stepper/layout.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/Stepper/styles.d.ts +2 -1
- package/lib/typescript/src/components/ui/Stepper/styles.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/Stepper/types.d.ts +4 -2
- package/lib/typescript/src/components/ui/Stepper/types.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/index.d.ts +2 -0
- package/lib/typescript/src/components/ui/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/Ribbon/Ribbon.tsx +92 -0
- package/src/components/ui/Ribbon/index.ts +2 -0
- package/src/components/ui/Ribbon/layout.ts +33 -0
- package/src/components/ui/Ribbon/styles.ts +33 -0
- package/src/components/ui/Ribbon/types.ts +19 -0
- package/src/components/ui/Stepper/Stepper.tsx +15 -3
- package/src/components/ui/Stepper/displayValue.ts +6 -0
- package/src/components/ui/Stepper/layout.ts +28 -9
- package/src/components/ui/Stepper/styles.ts +4 -1
- package/src/components/ui/Stepper/types.ts +4 -2
- package/src/components/ui/index.ts +2 -0
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ Unif 设计系统 —— theme(设计令牌)+ 组件 + 图标 + utils,面向 Rea
|
|
|
10
10
|
## 特性
|
|
11
11
|
|
|
12
12
|
- **运行时主题**:`useColors()` 角色 token 跟随系统 light/dark 自动切换;`useThemedStyles` + 模块顶层 `makeStyles` 缓存样式,绝不内联 hex。
|
|
13
|
-
- **40+ 组件**:Button、Card、Cell、NavBar、Toast 等原子组件 + AvatarWithRing、GlassStats 等通用复合组件,全部从包根 barrel 导出,无需深路径。
|
|
13
|
+
- **40+ 组件**:Button、Card、Ribbon、Cell、NavBar、Toast 等原子组件 + AvatarWithRing、GlassStats 等通用复合组件,全部从包根 barrel 导出,无需深路径。
|
|
14
14
|
- **a11y 内建**:交互组件预设 `accessibilityRole`;`IconButton` 的 `accessibilityLabel` 为类型必填。
|
|
15
15
|
- **图标集 + 严格 TS**:`IconName` 闭集类型、`<Icon>` 自动继承主题色;`strict` + `noUncheckedIndexedAccess`,类型随包发布。
|
|
16
16
|
|
|
@@ -93,9 +93,9 @@ React Native `0.86.2`、React `19.2.3`、New Architecture 和 Hermes,并通过
|
|
|
93
93
|
| `foundation` | 基础能力与图标 | Theme、token、Icon、logger、testID |
|
|
94
94
|
| `actions` | 操作与状态 | Button、IconButton、Chip、Tag、StatusDot |
|
|
95
95
|
| `feedback` | 反馈与浮层 | Empty、动效、Blur、Toast、Confirm |
|
|
96
|
-
| `forms` | 表单与输入 | 文本输入、选择控件、Stepper
|
|
96
|
+
| `forms` | 表单与输入 | 文本输入、选择控件、Stepper(xs 为横向触控 < 44pt 的紧凑档)、Form |
|
|
97
97
|
| `navigation` | 导航组件 | NavBar、DrawerHeader、Tabs、Segmented、TabBar |
|
|
98
|
-
| `collections` | 容器与集合 | Card、Cell、List、Grid、EntryCard、Carousel
|
|
98
|
+
| `collections` | 容器与集合 | Card、Ribbon、Cell、List、Grid、EntryCard、Carousel |
|
|
99
99
|
| `media` | 媒体展示 | Avatar、Thumbnail、Logo 与图片失败边界 |
|
|
100
100
|
| `business` | 业务复合组件 | 渐变、背景、统计、头像环、版本状态 |
|
|
101
101
|
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Text, View } from 'react-native';
|
|
5
|
+
import { r, scaleFontMetric, space, type as t, useColors, useFontScale, useThemedStyles } from "../../../theme/index.js";
|
|
6
|
+
import { childTestID } from "../../../utils/testID/index.js";
|
|
7
|
+
import { A11Y_HIDDEN_PROPS, A11Y_TEXT_ONLY_STYLE } from "../shared/a11y.js";
|
|
8
|
+
import { normalizeNonBlankText } from "../shared/accessibilityName.js";
|
|
9
|
+
import { resolveRibbonLayout } from "./layout.js";
|
|
10
|
+
import { makeStyles, paletteFor } from "./styles.js";
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
export function Ribbon({
|
|
13
|
+
label,
|
|
14
|
+
tone = 'brand',
|
|
15
|
+
children,
|
|
16
|
+
accessibilityLabel,
|
|
17
|
+
style,
|
|
18
|
+
testID
|
|
19
|
+
}) {
|
|
20
|
+
const c = useColors();
|
|
21
|
+
const fontScale = useFontScale();
|
|
22
|
+
const styles = useThemedStyles(makeStyles);
|
|
23
|
+
const layout = resolveRibbonLayout({
|
|
24
|
+
top: space['3'],
|
|
25
|
+
barHeight: r(20),
|
|
26
|
+
foldSize: r(3)
|
|
27
|
+
});
|
|
28
|
+
const palette = paletteFor(tone, c);
|
|
29
|
+
const accessibleName = normalizeNonBlankText(accessibilityLabel);
|
|
30
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
31
|
+
style: [styles.root, style],
|
|
32
|
+
testID: testID,
|
|
33
|
+
children: [children, /*#__PURE__*/_jsxs(View, {
|
|
34
|
+
pointerEvents: "none",
|
|
35
|
+
style: layout.overlay,
|
|
36
|
+
testID: childTestID(testID, 'overlay'),
|
|
37
|
+
children: [/*#__PURE__*/_jsxs(View, {
|
|
38
|
+
...A11Y_HIDDEN_PROPS,
|
|
39
|
+
style: styles.visual,
|
|
40
|
+
testID: childTestID(testID, 'visual'),
|
|
41
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
42
|
+
style: [styles.bar, layout.bar, {
|
|
43
|
+
backgroundColor: palette.bg
|
|
44
|
+
}],
|
|
45
|
+
testID: childTestID(testID, 'bar'),
|
|
46
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
47
|
+
style: [styles.text, {
|
|
48
|
+
color: palette.fg,
|
|
49
|
+
fontSize: scaleFontMetric(t.micro, fontScale)
|
|
50
|
+
}],
|
|
51
|
+
children: label
|
|
52
|
+
})
|
|
53
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
54
|
+
style: [styles.fold, layout.fold, {
|
|
55
|
+
borderTopColor: palette.fold,
|
|
56
|
+
borderLeftColor: palette.fold
|
|
57
|
+
}],
|
|
58
|
+
testID: childTestID(testID, 'fold')
|
|
59
|
+
})]
|
|
60
|
+
}), accessibleName === undefined ? null : /*#__PURE__*/_jsx(Text, {
|
|
61
|
+
accessible: true,
|
|
62
|
+
accessibilityLabel: accessibleName,
|
|
63
|
+
style: A11Y_TEXT_ONLY_STYLE,
|
|
64
|
+
testID: childTestID(testID, 'accessibility-label'),
|
|
65
|
+
children: accessibleName
|
|
66
|
+
})]
|
|
67
|
+
})]
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
//# sourceMappingURL=Ribbon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Text","View","r","scaleFontMetric","space","type","t","useColors","useFontScale","useThemedStyles","childTestID","A11Y_HIDDEN_PROPS","A11Y_TEXT_ONLY_STYLE","normalizeNonBlankText","resolveRibbonLayout","makeStyles","paletteFor","jsx","_jsx","jsxs","_jsxs","Ribbon","label","tone","children","accessibilityLabel","style","testID","c","fontScale","styles","layout","top","barHeight","foldSize","palette","accessibleName","root","pointerEvents","overlay","visual","bar","backgroundColor","bg","text","color","fg","fontSize","micro","fold","borderTopColor","borderLeftColor","undefined","accessible"],"sourceRoot":"../../../../../src","sources":["components/ui/Ribbon/Ribbon.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Ribbon"],"sourceRoot":"../../../../../src","sources":["components/ui/Ribbon/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,aAAU","ignoreList":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export function resolveRibbonLayout({
|
|
4
|
+
top,
|
|
5
|
+
barHeight,
|
|
6
|
+
foldSize
|
|
7
|
+
}) {
|
|
8
|
+
return {
|
|
9
|
+
overlay: {
|
|
10
|
+
position: 'absolute',
|
|
11
|
+
top,
|
|
12
|
+
right: 0,
|
|
13
|
+
zIndex: 1,
|
|
14
|
+
alignItems: 'flex-end'
|
|
15
|
+
},
|
|
16
|
+
bar: {
|
|
17
|
+
height: barHeight
|
|
18
|
+
},
|
|
19
|
+
fold: {
|
|
20
|
+
width: 0,
|
|
21
|
+
height: 0,
|
|
22
|
+
borderWidth: foldSize
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["resolveRibbonLayout","top","barHeight","foldSize","overlay","position","right","zIndex","alignItems","bar","height","fold","width","borderWidth"],"sourceRoot":"../../../../../src","sources":["components/ui/Ribbon/layout.ts"],"mappings":";;AAYA,OAAO,SAASA,mBAAmBA,CAAC;EAClCC,GAAG;EACHC,SAAS;EACTC;AAKF,CAAC,EAAwB;EACvB,OAAO;IACLC,OAAO,EAAE;MACPC,QAAQ,EAAE,UAAU;MACpBJ,GAAG;MACHK,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,UAAU,EAAE;IACd,CAAC;IACDC,GAAG,EAAE;MAAEC,MAAM,EAAER;IAAU,CAAC;IAC1BS,IAAI,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEF,MAAM,EAAE,CAAC;MAAEG,WAAW,EAAEV;IAAS;EACrD,CAAC;AACH","ignoreList":[]}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { StyleSheet } from 'react-native';
|
|
4
|
+
import { fw, radius, space, type as t } from "../../../theme/index.js";
|
|
5
|
+
export const makeStyles = _c => StyleSheet.create({
|
|
6
|
+
root: {
|
|
7
|
+
position: 'relative'
|
|
8
|
+
},
|
|
9
|
+
visual: {
|
|
10
|
+
alignItems: 'flex-end'
|
|
11
|
+
},
|
|
12
|
+
bar: {
|
|
13
|
+
flexDirection: 'row',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
paddingHorizontal: space['3'],
|
|
16
|
+
borderTopLeftRadius: radius.xs,
|
|
17
|
+
borderBottomLeftRadius: radius.xs
|
|
18
|
+
},
|
|
19
|
+
text: {
|
|
20
|
+
fontSize: t.micro,
|
|
21
|
+
fontWeight: fw.medium
|
|
22
|
+
},
|
|
23
|
+
fold: {
|
|
24
|
+
borderRightColor: 'transparent',
|
|
25
|
+
borderBottomColor: 'transparent'
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
export function paletteFor(tone, c) {
|
|
29
|
+
switch (tone) {
|
|
30
|
+
case 'brand':
|
|
31
|
+
return {
|
|
32
|
+
bg: c.primary,
|
|
33
|
+
fg: c.onPrimary,
|
|
34
|
+
fold: c.primaryPressed
|
|
35
|
+
};
|
|
36
|
+
case 'danger':
|
|
37
|
+
return {
|
|
38
|
+
bg: c.error,
|
|
39
|
+
fg: c.onError,
|
|
40
|
+
fold: c.error
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StyleSheet","fw","radius","space","type","t","makeStyles","_c","create","root","position","visual","alignItems","bar","flexDirection","paddingHorizontal","borderTopLeftRadius","xs","borderBottomLeftRadius","text","fontSize","micro","fontWeight","medium","fold","borderRightColor","borderBottomColor","paletteFor","tone","c","bg","primary","fg","onPrimary","primaryPressed","error","onError"],"sourceRoot":"../../../../../src","sources":["components/ui/Ribbon/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,IAAIC,CAAC,QAA0B,yBAAgB;AAG/E,OAAO,MAAMC,UAAU,GAAIC,EAAe,IACxCP,UAAU,CAACQ,MAAM,CAAC;EAChBC,IAAI,EAAE;IAAEC,QAAQ,EAAE;EAAW,CAAC;EAC9BC,MAAM,EAAE;IAAEC,UAAU,EAAE;EAAW,CAAC;EAClCC,GAAG,EAAE;IACHC,aAAa,EAAE,KAAK;IACpBF,UAAU,EAAE,QAAQ;IACpBG,iBAAiB,EAAEZ,KAAK,CAAC,GAAG,CAAC;IAC7Ba,mBAAmB,EAAEd,MAAM,CAACe,EAAE;IAC9BC,sBAAsB,EAAEhB,MAAM,CAACe;EACjC,CAAC;EACDE,IAAI,EAAE;IAAEC,QAAQ,EAAEf,CAAC,CAACgB,KAAK;IAAEC,UAAU,EAAErB,EAAE,CAACsB;EAAO,CAAC;EAClDC,IAAI,EAAE;IACJC,gBAAgB,EAAE,aAAa;IAC/BC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEJ,OAAO,SAASC,UAAUA,CACxBC,IAAgB,EAChBC,CAAc,EAC4B;EAC1C,QAAQD,IAAI;IACV,KAAK,OAAO;MACV,OAAO;QAAEE,EAAE,EAAED,CAAC,CAACE,OAAO;QAAEC,EAAE,EAAEH,CAAC,CAACI,SAAS;QAAET,IAAI,EAAEK,CAAC,CAACK;MAAe,CAAC;IACnE,KAAK,QAAQ;MACX,OAAO;QAAEJ,EAAE,EAAED,CAAC,CAACM,KAAK;QAAEH,EAAE,EAAEH,CAAC,CAACO,OAAO;QAAEZ,IAAI,EAAEK,CAAC,CAACM;MAAM,CAAC;EACxD;AACF","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/ui/Ribbon/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -8,6 +8,7 @@ import { childTestID } from "../../../utils/testID/index.js";
|
|
|
8
8
|
import { A11Y_HIDDEN_PROPS } from "../shared/a11y.js";
|
|
9
9
|
import { normalizeNonBlankText } from "../shared/accessibilityName.js";
|
|
10
10
|
import { getStepperValueAccessibilityProps } from './accessibility';
|
|
11
|
+
import { resolveStepperDisplayValue } from "./displayValue.js";
|
|
11
12
|
import { resolveStepperLayout } from "./layout.js";
|
|
12
13
|
import { nextStepperValue, normalizeStepper } from "./normalizeStepper.js";
|
|
13
14
|
import { StepperPressable } from './StepperPressable';
|
|
@@ -33,6 +34,7 @@ export function Stepper({
|
|
|
33
34
|
max,
|
|
34
35
|
step,
|
|
35
36
|
size = 'md',
|
|
37
|
+
formatValue,
|
|
36
38
|
disabled = false,
|
|
37
39
|
testID
|
|
38
40
|
}) {
|
|
@@ -40,7 +42,9 @@ export function Stepper({
|
|
|
40
42
|
const fontScale = useFontScale();
|
|
41
43
|
const dims = sizingFor(size);
|
|
42
44
|
const valueFontSize = scaleFontMetric(dims.fs, fontScale);
|
|
43
|
-
const layout = resolveStepperLayout(dims
|
|
45
|
+
const layout = resolveStepperLayout(dims, {
|
|
46
|
+
compact: size === 'xs'
|
|
47
|
+
});
|
|
44
48
|
const accessibleName = normalizeNonBlankText(accessibilityLabel);
|
|
45
49
|
const hasBlankLabel = accessibleName === undefined;
|
|
46
50
|
const normalized = normalizeStepper({
|
|
@@ -57,6 +61,7 @@ export function Stepper({
|
|
|
57
61
|
canDecrement,
|
|
58
62
|
canIncrement
|
|
59
63
|
} = normalized;
|
|
64
|
+
const displayValue = resolveStepperDisplayValue(safeValue, formatValue);
|
|
60
65
|
const decrementValue = nextStepperValue(normalized, 'decrement');
|
|
61
66
|
const incrementValue = nextStepperValue(normalized, 'increment');
|
|
62
67
|
const valueAccessibilityProps = getStepperValueAccessibilityProps({
|
|
@@ -140,10 +145,15 @@ export function Stepper({
|
|
|
140
145
|
}],
|
|
141
146
|
testID: childTestID(testID, 'value-visual'),
|
|
142
147
|
children: /*#__PURE__*/_jsx(Text, {
|
|
148
|
+
...(formatValue === undefined ? {} : {
|
|
149
|
+
adjustsFontSizeToFit: true,
|
|
150
|
+
minimumFontScale: 0.75,
|
|
151
|
+
numberOfLines: 1
|
|
152
|
+
}),
|
|
143
153
|
style: [styles.valueText, {
|
|
144
154
|
fontSize: valueFontSize
|
|
145
155
|
}],
|
|
146
|
-
children:
|
|
156
|
+
children: displayValue
|
|
147
157
|
})
|
|
148
158
|
})
|
|
149
159
|
}), /*#__PURE__*/_jsx(StepperPressable, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","Text","View","pressedOpacity","scaleFontMetric","useFontScale","useThemedStyles","createLogger","childTestID","A11Y_HIDDEN_PROPS","normalizeNonBlankText","getStepperValueAccessibilityProps","resolveStepperLayout","nextStepperValue","normalizeStepper","StepperPressable","makeStyles","sizingFor","jsx","_jsx","jsxs","_jsxs","log","_warned","Set","Stepper","value","onChange","accessibilityLabel","min","max","step","size","disabled","testID","styles","fontScale","dims","valueFontSize","fs","layout","accessibleName","hasBlankLabel","undefined","normalized","safeMin","safeStep","safeValue","canDecrement","canIncrement","decrementValue","incrementValue","valueAccessibilityProps","hasInvalidStep","hasInvalidRange","Number","isFinite","k","String","has","add","warn","decrementTestID","valueTestID","incrementTestID","style","wrap","children","accessible","onPress","accessibilityRole","accessibilityState","accessibilityHint","pressed","actionFrame","decrementFrame","opacity","cell","btnLeft","width","btn","height","h","btnText","valueFrame","w","valueText","fontSize","incrementFrame","btnRight"],"sourceRoot":"../../../../../src","sources":["components/ui/Stepper/Stepper.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACzC,SACEC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,eAAe,QACV,yBAAgB;AACvB,SAASC,YAAY,QAAQ,gCAAuB;AACpD,SAASC,WAAW,QAAQ,gCAAuB;AACnD,SAASC,iBAAiB,QAAQ,mBAAgB;AAClD,SAASC,qBAAqB,QAAQ,gCAA6B;AACnE,SAASC,iCAAiC,QAAQ,iBAAiB;AACnE,SAASC,oBAAoB,QAAQ,aAAU;AAC/C,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,uBAAoB;AACvE,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,UAAU,EAAEC,SAAS,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGjD,MAAMC,GAAG,
|
|
1
|
+
{"version":3,"names":["React","useEffect","Text","View","pressedOpacity","scaleFontMetric","useFontScale","useThemedStyles","createLogger","childTestID","A11Y_HIDDEN_PROPS","normalizeNonBlankText","getStepperValueAccessibilityProps","resolveStepperDisplayValue","resolveStepperLayout","nextStepperValue","normalizeStepper","StepperPressable","makeStyles","sizingFor","jsx","_jsx","jsxs","_jsxs","log","_warned","Set","Stepper","value","onChange","accessibilityLabel","min","max","step","size","formatValue","disabled","testID","styles","fontScale","dims","valueFontSize","fs","layout","compact","accessibleName","hasBlankLabel","undefined","normalized","safeMin","safeStep","safeValue","canDecrement","canIncrement","displayValue","decrementValue","incrementValue","valueAccessibilityProps","hasInvalidStep","hasInvalidRange","Number","isFinite","k","String","has","add","warn","decrementTestID","valueTestID","incrementTestID","style","wrap","children","accessible","onPress","accessibilityRole","accessibilityState","accessibilityHint","pressed","actionFrame","decrementFrame","opacity","cell","btnLeft","width","btn","height","h","btnText","valueFrame","w","adjustsFontSizeToFit","minimumFontScale","numberOfLines","valueText","fontSize","incrementFrame","btnRight"],"sourceRoot":"../../../../../src","sources":["components/ui/Stepper/Stepper.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["resolveStepperDisplayValue","value","formatValue","undefined"],"sourceRoot":"../../../../../src","sources":["components/ui/Stepper/displayValue.ts"],"mappings":";;AAAA,OAAO,SAASA,0BAA0BA,CACxCC,KAAa,EACbC,WAAuC,EACtB;EACjB,OAAOA,WAAW,KAAKC,SAAS,GAAGF,KAAK,GAAGC,WAAW,CAACD,KAAK,CAAC;AAC/D","ignoreList":[]}
|
|
@@ -5,7 +5,25 @@ export function resolveStepperLayout({
|
|
|
5
5
|
h,
|
|
6
6
|
btn,
|
|
7
7
|
w
|
|
8
|
-
}) {
|
|
8
|
+
}, options) {
|
|
9
|
+
if (options?.compact === true) {
|
|
10
|
+
return {
|
|
11
|
+
decrementFrame: {
|
|
12
|
+
width: btn,
|
|
13
|
+
height: fixed.hitTarget,
|
|
14
|
+
alignItems: 'flex-end'
|
|
15
|
+
},
|
|
16
|
+
valueFrame: {
|
|
17
|
+
width: w,
|
|
18
|
+
height: fixed.hitTarget
|
|
19
|
+
},
|
|
20
|
+
incrementFrame: {
|
|
21
|
+
width: btn,
|
|
22
|
+
height: fixed.hitTarget,
|
|
23
|
+
alignItems: 'flex-start'
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
}
|
|
9
27
|
const sideWidth = Math.max(fixed.hitTarget, btn);
|
|
10
28
|
const outerHeight = Math.max(fixed.hitTarget, h);
|
|
11
29
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["fixed","resolveStepperLayout","h","btn","w","
|
|
1
|
+
{"version":3,"names":["fixed","resolveStepperLayout","h","btn","w","options","compact","decrementFrame","width","height","hitTarget","alignItems","valueFrame","incrementFrame","sideWidth","Math","max","outerHeight"],"sourceRoot":"../../../../../src","sources":["components/ui/Stepper/layout.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,yBAAgB;AAgBtC,OAAO,SAASC,oBAAoBA,CAClC;EACEC,CAAC;EACDC,GAAG;EACHC;AAKF,CAAC,EACDC,OAA+B,EACR;EACvB,IAAIA,OAAO,EAAEC,OAAO,KAAK,IAAI,EAAE;IAC7B,OAAO;MACLC,cAAc,EAAE;QACdC,KAAK,EAAEL,GAAG;QACVM,MAAM,EAAET,KAAK,CAACU,SAAS;QACvBC,UAAU,EAAE;MACd,CAAC;MACDC,UAAU,EAAE;QAAEJ,KAAK,EAAEJ,CAAC;QAAEK,MAAM,EAAET,KAAK,CAACU;MAAU,CAAC;MACjDG,cAAc,EAAE;QACdL,KAAK,EAAEL,GAAG;QACVM,MAAM,EAAET,KAAK,CAACU,SAAS;QACvBC,UAAU,EAAE;MACd;IACF,CAAC;EACH;EAEA,MAAMG,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAChB,KAAK,CAACU,SAAS,EAAEP,GAAG,CAAC;EAChD,MAAMc,WAAW,GAAGF,IAAI,CAACC,GAAG,CAAChB,KAAK,CAACU,SAAS,EAAER,CAAC,CAAC;EAChD,OAAO;IACLK,cAAc,EAAE;MACdC,KAAK,EAAEM,SAAS;MAChBL,MAAM,EAAEQ,WAAW;MACnBN,UAAU,EAAE;IACd,CAAC;IACDC,UAAU,EAAE;MACVJ,KAAK,EAAEO,IAAI,CAACC,GAAG,CAAChB,KAAK,CAACU,SAAS,EAAEN,CAAC,CAAC;MACnCK,MAAM,EAAEQ;IACV,CAAC;IACDJ,cAAc,EAAE;MACdL,KAAK,EAAEM,SAAS;MAChBL,MAAM,EAAEQ,WAAW;MACnBN,UAAU,EAAE;IACd;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -50,11 +50,19 @@ export const makeStyles = c => StyleSheet.create({
|
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
52
|
|
|
53
|
-
/** Stepper 尺寸推导:
|
|
53
|
+
/** Stepper 尺寸推导:xs(r(24) 高 / r(24) 按钮 / r(40) 值宽 / micro 字)/
|
|
54
|
+
* sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
|
|
54
55
|
* md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
|
|
55
56
|
* 新增 size 在 types.ts 加 union + 这里加 case。 */
|
|
56
57
|
export function sizingFor(size) {
|
|
57
58
|
switch (size) {
|
|
59
|
+
case 'xs':
|
|
60
|
+
return {
|
|
61
|
+
h: r(24),
|
|
62
|
+
btn: r(24),
|
|
63
|
+
w: r(40),
|
|
64
|
+
fs: t.micro
|
|
65
|
+
};
|
|
58
66
|
case 'sm':
|
|
59
67
|
return {
|
|
60
68
|
h: control.sm,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","control","fw","r","radius","type","t","makeStyles","c","create","wrap","flexDirection","alignItems","alignSelf","actionFrame","justifyContent","valueFrame","cell","backgroundColor","surface","borderTopWidth","borderBottomWidth","borderColor","outline","btnLeft","borderLeftWidth","borderTopLeftRadius","md","borderBottomLeftRadius","btnRight","borderRightWidth","borderTopRightRadius","borderBottomRightRadius","btnText","fontSize","h1","color","foreground","fontWeight","medium","lineHeight","valueText","sizingFor","size","h","
|
|
1
|
+
{"version":3,"names":["StyleSheet","control","fw","r","radius","type","t","makeStyles","c","create","wrap","flexDirection","alignItems","alignSelf","actionFrame","justifyContent","valueFrame","cell","backgroundColor","surface","borderTopWidth","borderBottomWidth","borderColor","outline","btnLeft","borderLeftWidth","borderTopLeftRadius","md","borderBottomLeftRadius","btnRight","borderRightWidth","borderTopRightRadius","borderBottomRightRadius","btnText","fontSize","h1","color","foreground","fontWeight","medium","lineHeight","valueText","sizingFor","size","h","btn","w","fs","micro","sm","xs"],"sourceRoot":"../../../../../src","sources":["components/ui/Stepper/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,OAAO,EAAEC,EAAE,EAAEC,CAAC,EAAEC,MAAM,EAAEC,IAAI,IAAIC,CAAC,QAAQ,yBAAgB;AAIlE;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,CAAc,IACvCR,UAAU,CAACS,MAAM,CAAC;EAChBC,IAAI,EAAE;IACJC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,SAAS,EAAE;EACb,CAAC;EACDC,WAAW,EAAE;IACXC,cAAc,EAAE;EAClB,CAAC;EACDC,UAAU,EAAE;IACVJ,UAAU,EAAE,QAAQ;IACpBG,cAAc,EAAE;EAClB,CAAC;EACD;AACJ;EACIE,IAAI,EAAE;IACJL,UAAU,EAAE,QAAQ;IACpBG,cAAc,EAAE,QAAQ;IACxBG,eAAe,EAAEV,CAAC,CAACW,OAAO;IAC1BC,cAAc,EAAE,CAAC;IACjBC,iBAAiB,EAAE,CAAC;IACpBC,WAAW,EAAEd,CAAC,CAACe;EACjB,CAAC;EACDC,OAAO,EAAE;IACPC,eAAe,EAAE,CAAC;IAClBC,mBAAmB,EAAEtB,MAAM,CAACuB,EAAE;IAC9BC,sBAAsB,EAAExB,MAAM,CAACuB;EACjC,CAAC;EACDE,QAAQ,EAAE;IACRC,gBAAgB,EAAE,CAAC;IACnBC,oBAAoB,EAAE3B,MAAM,CAACuB,EAAE;IAC/BK,uBAAuB,EAAE5B,MAAM,CAACuB;EAClC,CAAC;EACDM,OAAO,EAAE;IACPC,QAAQ,EAAE5B,CAAC,CAAC6B,EAAE;IACdC,KAAK,EAAE5B,CAAC,CAAC6B,UAAU;IACnBC,UAAU,EAAEpC,EAAE,CAACqC,MAAM;IACrBC,UAAU,EAAElC,CAAC,CAAC6B;EAChB,CAAC;EACDM,SAAS,EAAE;IACTL,KAAK,EAAE5B,CAAC,CAAC6B,UAAU;IACnBC,UAAU,EAAEpC,EAAE,CAACqC;EACjB;AACF,CAAC,CAAC;;AAEJ;AACA;AACA;AACA;AACA,OAAO,SAASG,SAASA,CAACC,IAAiB,EAKzC;EACA,QAAQA,IAAI;IACV,KAAK,IAAI;MACP,OAAO;QAAEC,CAAC,EAAEzC,CAAC,CAAC,EAAE,CAAC;QAAE0C,GAAG,EAAE1C,CAAC,CAAC,EAAE,CAAC;QAAE2C,CAAC,EAAE3C,CAAC,CAAC,EAAE,CAAC;QAAE4C,EAAE,EAAEzC,CAAC,CAAC0C;MAAM,CAAC;IACxD,KAAK,IAAI;MACP,OAAO;QAAEJ,CAAC,EAAE3C,OAAO,CAACgD,EAAE;QAAEJ,GAAG,EAAE5C,OAAO,CAACgD,EAAE;QAAEH,CAAC,EAAE3C,CAAC,CAAC,EAAE,CAAC;QAAE4C,EAAE,EAAEzC,CAAC,CAAC4C;MAAG,CAAC;IAC/D,KAAK,IAAI;MACP,OAAO;QAAEN,CAAC,EAAEzC,CAAC,CAAC,EAAE,CAAC;QAAE0C,GAAG,EAAE1C,CAAC,CAAC,EAAE,CAAC;QAAE2C,CAAC,EAAE3C,CAAC,CAAC,EAAE,CAAC;QAAE4C,EAAE,EAAEzC,CAAC,CAAC2C;MAAG,CAAC;EACvD;AACF","ignoreList":[]}
|
|
@@ -23,6 +23,7 @@ export { PasswordInput } from "./PasswordInput/index.js";
|
|
|
23
23
|
export { Pulse, PulseDot, usePulse } from "./Pulse/index.js";
|
|
24
24
|
export { Radio } from "./Radio/index.js";
|
|
25
25
|
export { Reveal } from "./Reveal/index.js";
|
|
26
|
+
export { Ribbon } from "./Ribbon/index.js";
|
|
26
27
|
export { Search } from "./Search/index.js";
|
|
27
28
|
export { Skeleton } from "./Skeleton/index.js";
|
|
28
29
|
export { Segmented } from "./Segmented/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Avatar","BlurLayer","Button","Card","Carousel","Cell","List","Checkbox","Chip","confirm","ConfirmHost","DrawerHeader","Empty","EntryCard","Form","FormGroup","FormRow","Grid","Icon","IconButton","Input","Logo","NavBar","PasswordInput","Pulse","PulseDot","usePulse","Radio","Reveal","Search","Skeleton","Segmented","Spinner","StatusDot","Stepper","Switch","TabBar","Tabs","Tag","Textarea","Thumbnail","toast","ToastHost"],"sourceRoot":"../../../../src","sources":["components/ui/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,mBAAU;AAEjC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,EAAEC,IAAI,QAAQ,iBAAQ;AAQnC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,OAAO,EAAEC,WAAW,QAAQ,oBAAW;AAEhD,SAASC,YAAY,QAAQ,yBAAgB;AAE7C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,IAAI,EAAEC,SAAS,EAAEC,OAAO,QAAQ,iBAAQ;AAEjD,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,KAAK,QAAQ,kBAAS;AAO/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,kBAAS;AAEnD,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAE3B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,KAAK,EAAEC,SAAS,QAAQ,kBAAS","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Avatar","BlurLayer","Button","Card","Carousel","Cell","List","Checkbox","Chip","confirm","ConfirmHost","DrawerHeader","Empty","EntryCard","Form","FormGroup","FormRow","Grid","Icon","IconButton","Input","Logo","NavBar","PasswordInput","Pulse","PulseDot","usePulse","Radio","Reveal","Ribbon","Search","Skeleton","Segmented","Spinner","StatusDot","Stepper","Switch","TabBar","Tabs","Tag","Textarea","Thumbnail","toast","ToastHost"],"sourceRoot":"../../../../src","sources":["components/ui/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,mBAAU;AAEjC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,EAAEC,IAAI,QAAQ,iBAAQ;AAQnC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,OAAO,EAAEC,WAAW,QAAQ,oBAAW;AAEhD,SAASC,YAAY,QAAQ,yBAAgB;AAE7C,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,IAAI,EAAEC,SAAS,EAAEC,OAAO,QAAQ,iBAAQ;AAEjD,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,UAAU,QAAQ,uBAAc;AAEzC,SAASC,KAAK,QAAQ,kBAAS;AAO/B,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,aAAa,QAAQ,0BAAiB;AAE/C,SAASC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,kBAAS;AAEnD,SAASC,KAAK,QAAQ,kBAAS;AAE/B,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAEvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,OAAO,QAAQ,oBAAW;AAEnC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,MAAM,QAAQ,mBAAU;AAEjC,SAASC,IAAI,QAAQ,iBAAQ;AAE7B,SAASC,GAAG,QAAQ,gBAAO;AAE3B,SAASC,QAAQ,QAAQ,qBAAY;AAErC,SAASC,SAAS,QAAQ,sBAAa;AAMvC,SAASC,KAAK,EAAEC,SAAS,QAAQ,kBAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Ribbon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/Ribbon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,KAAK,EACL,MAAM,GACP,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkEjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export type ResolvedRibbonLayout = {
|
|
2
|
+
overlay: {
|
|
3
|
+
position: 'absolute';
|
|
4
|
+
top: number;
|
|
5
|
+
right: number;
|
|
6
|
+
zIndex: number;
|
|
7
|
+
alignItems: 'flex-end';
|
|
8
|
+
};
|
|
9
|
+
bar: {
|
|
10
|
+
height: number;
|
|
11
|
+
};
|
|
12
|
+
fold: {
|
|
13
|
+
width: 0;
|
|
14
|
+
height: 0;
|
|
15
|
+
borderWidth: number;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare function resolveRibbonLayout({ top, barHeight, foldSize, }: {
|
|
19
|
+
top: number;
|
|
20
|
+
barHeight: number;
|
|
21
|
+
foldSize: number;
|
|
22
|
+
}): ResolvedRibbonLayout;
|
|
23
|
+
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/layout.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU,CAAC;QACrB,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,GAAG,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,IAAI,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,MAAM,EAAE,CAAC,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,QAAQ,GACT,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,oBAAoB,CAYvB"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type ColorTokens } from '../../../theme';
|
|
2
|
+
import type { RibbonTone } from './types';
|
|
3
|
+
export declare const makeStyles: (_c: ColorTokens) => Readonly<{
|
|
4
|
+
root: {
|
|
5
|
+
position: "relative";
|
|
6
|
+
};
|
|
7
|
+
visual: {
|
|
8
|
+
alignItems: "flex-end";
|
|
9
|
+
};
|
|
10
|
+
bar: {
|
|
11
|
+
flexDirection: "row";
|
|
12
|
+
alignItems: "center";
|
|
13
|
+
paddingHorizontal: number;
|
|
14
|
+
borderTopLeftRadius: number;
|
|
15
|
+
borderBottomLeftRadius: number;
|
|
16
|
+
};
|
|
17
|
+
text: {
|
|
18
|
+
fontSize: number;
|
|
19
|
+
fontWeight: "500";
|
|
20
|
+
};
|
|
21
|
+
fold: {
|
|
22
|
+
borderRightColor: string;
|
|
23
|
+
borderBottomColor: string;
|
|
24
|
+
};
|
|
25
|
+
}>;
|
|
26
|
+
export declare function paletteFor(tone: RibbonTone, c: ColorTokens): {
|
|
27
|
+
bg: string;
|
|
28
|
+
fg: string;
|
|
29
|
+
fold: string;
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,UAAU,GAAI,IAAI,WAAW;;;;;;;;;;;;;;;;;;;;;;EAgBtC,CAAC;AAEL,wBAAgB,UAAU,CACxB,IAAI,EAAE,UAAU,EAChB,CAAC,EAAE,WAAW,GACb;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAO1C"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
export type RibbonTone = 'brand' | 'danger';
|
|
4
|
+
export type RibbonProps = {
|
|
5
|
+
/** 右上缎带的可见文案 */
|
|
6
|
+
label: string;
|
|
7
|
+
/** 语义色,默认 'brand' */
|
|
8
|
+
tone?: RibbonTone;
|
|
9
|
+
/** 被缎带标记的内容 */
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/** 可选读屏文案;不传时缎带只作为装饰,避免与内容重复播报 */
|
|
12
|
+
accessibilityLabel?: string;
|
|
13
|
+
/** 外层布局样式 */
|
|
14
|
+
style?: StyleProp<ViewStyle>;
|
|
15
|
+
/** E2E / 测试定位 */
|
|
16
|
+
testID?: string;
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Ribbon/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
|
|
@@ -7,5 +7,5 @@ import type { StepperProps } from './types';
|
|
|
7
7
|
* 健壮性:value/min/max 的非法或非有限输入均折叠到安全范围;step <=0 或
|
|
8
8
|
* 非有限数时回退 1;min > max 时折叠为 min 的零范围。
|
|
9
9
|
*/
|
|
10
|
-
export declare function Stepper({ value, onChange, accessibilityLabel, min, max, step, size, disabled, testID, }: StepperProps): React.JSX.Element;
|
|
10
|
+
export declare function Stepper({ value, onChange, accessibilityLabel, min, max, step, size, formatValue, disabled, testID, }: StepperProps): React.JSX.Element;
|
|
11
11
|
//# sourceMappingURL=Stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAkBzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAO5C;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,kBAAkB,EAClB,GAAG,EACH,GAAG,EACH,IAAI,EACJ,IAAW,EACX,WAAW,EACX,QAAgB,EAChB,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkLlC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"displayValue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/displayValue.ts"],"names":[],"mappings":"AAAA,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GACtC,MAAM,GAAG,MAAM,CAEjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/layout.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,YAAY,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF,wBAAgB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/layout.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,qBAAqB,GAAG;IAClC,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,UAAU,CAAC;KACxB,CAAC;IACF,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,YAAY,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,EACE,CAAC,EACD,GAAG,EACH,CAAC,GACF,EAAE;IACD,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;CACX,EACD,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAC9B,qBAAqB,CAmCvB"}
|
|
@@ -47,7 +47,8 @@ export declare const makeStyles: (c: ColorTokens) => Readonly<{
|
|
|
47
47
|
fontWeight: "500";
|
|
48
48
|
};
|
|
49
49
|
}>;
|
|
50
|
-
/** Stepper 尺寸推导:
|
|
50
|
+
/** Stepper 尺寸推导:xs(r(24) 高 / r(24) 按钮 / r(40) 值宽 / micro 字)/
|
|
51
|
+
* sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
|
|
51
52
|
* md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
|
|
52
53
|
* 新增 size 在 types.ts 加 union + 这里加 case。 */
|
|
53
54
|
export declare function sizingFor(size: StepperSize): {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;qEAEqE;AACrE,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;IAcrC;2DACuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvD,CAAC;AAEL
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;qEAEqE;AACrE,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;IAcrC;2DACuD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvD,CAAC;AAEL;;;6CAG6C;AAC7C,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;CACZ,CASA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/** Stepper 尺寸:sm=28px / md=32px */
|
|
2
|
-
export type StepperSize = 'sm' | 'md';
|
|
1
|
+
/** Stepper 尺寸:xs=24px / sm=28px / md=32px */
|
|
2
|
+
export type StepperSize = 'xs' | 'sm' | 'md';
|
|
3
3
|
export type StepperProps = {
|
|
4
4
|
/** 当前值(受控) */
|
|
5
5
|
value: number;
|
|
@@ -15,6 +15,8 @@ export type StepperProps = {
|
|
|
15
15
|
step?: number;
|
|
16
16
|
/** 尺寸,默认 'md' */
|
|
17
17
|
size?: StepperSize;
|
|
18
|
+
/** 自定义中央值的可见文案;数值运算与 adjustable 语义仍使用归一化后的 number */
|
|
19
|
+
formatValue?: (value: number) => string;
|
|
18
20
|
/** 整体禁用(三个操作节点都不暴露 action) */
|
|
19
21
|
disabled?: boolean;
|
|
20
22
|
/** E2E / 测试定位 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/types.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Stepper/types.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sDAAsD;IACtD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
|
|
@@ -44,6 +44,8 @@ export { Radio } from './Radio';
|
|
|
44
44
|
export type { GroupProps as RadioGroupProps, RadioProps } from './Radio';
|
|
45
45
|
export { Reveal } from './Reveal';
|
|
46
46
|
export type { RevealProps } from './Reveal';
|
|
47
|
+
export { Ribbon } from './Ribbon';
|
|
48
|
+
export type { RibbonProps, RibbonTone } from './Ribbon';
|
|
47
49
|
export { Search } from './Search';
|
|
48
50
|
export type { SearchProps } from './Search';
|
|
49
51
|
export { Skeleton } from './Skeleton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text, View } from 'react-native';
|
|
3
|
+
import {
|
|
4
|
+
r,
|
|
5
|
+
scaleFontMetric,
|
|
6
|
+
space,
|
|
7
|
+
type as t,
|
|
8
|
+
useColors,
|
|
9
|
+
useFontScale,
|
|
10
|
+
useThemedStyles,
|
|
11
|
+
} from '../../../theme';
|
|
12
|
+
import { childTestID } from '../../../utils/testID';
|
|
13
|
+
import { A11Y_HIDDEN_PROPS, A11Y_TEXT_ONLY_STYLE } from '../shared/a11y';
|
|
14
|
+
import { normalizeNonBlankText } from '../shared/accessibilityName';
|
|
15
|
+
import { resolveRibbonLayout } from './layout';
|
|
16
|
+
import { makeStyles, paletteFor } from './styles';
|
|
17
|
+
import type { RibbonProps } from './types';
|
|
18
|
+
|
|
19
|
+
export function Ribbon({
|
|
20
|
+
label,
|
|
21
|
+
tone = 'brand',
|
|
22
|
+
children,
|
|
23
|
+
accessibilityLabel,
|
|
24
|
+
style,
|
|
25
|
+
testID,
|
|
26
|
+
}: RibbonProps): React.JSX.Element {
|
|
27
|
+
const c = useColors();
|
|
28
|
+
const fontScale = useFontScale();
|
|
29
|
+
const styles = useThemedStyles(makeStyles);
|
|
30
|
+
const layout = resolveRibbonLayout({
|
|
31
|
+
top: space['3'],
|
|
32
|
+
barHeight: r(20),
|
|
33
|
+
foldSize: r(3),
|
|
34
|
+
});
|
|
35
|
+
const palette = paletteFor(tone, c);
|
|
36
|
+
const accessibleName = normalizeNonBlankText(accessibilityLabel);
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<View style={[styles.root, style]} testID={testID}>
|
|
40
|
+
{children}
|
|
41
|
+
<View
|
|
42
|
+
pointerEvents="none"
|
|
43
|
+
style={layout.overlay}
|
|
44
|
+
testID={childTestID(testID, 'overlay')}
|
|
45
|
+
>
|
|
46
|
+
<View
|
|
47
|
+
{...A11Y_HIDDEN_PROPS}
|
|
48
|
+
style={styles.visual}
|
|
49
|
+
testID={childTestID(testID, 'visual')}
|
|
50
|
+
>
|
|
51
|
+
<View
|
|
52
|
+
style={[styles.bar, layout.bar, { backgroundColor: palette.bg }]}
|
|
53
|
+
testID={childTestID(testID, 'bar')}
|
|
54
|
+
>
|
|
55
|
+
<Text
|
|
56
|
+
style={[
|
|
57
|
+
styles.text,
|
|
58
|
+
{
|
|
59
|
+
color: palette.fg,
|
|
60
|
+
fontSize: scaleFontMetric(t.micro, fontScale),
|
|
61
|
+
},
|
|
62
|
+
]}
|
|
63
|
+
>
|
|
64
|
+
{label}
|
|
65
|
+
</Text>
|
|
66
|
+
</View>
|
|
67
|
+
<View
|
|
68
|
+
style={[
|
|
69
|
+
styles.fold,
|
|
70
|
+
layout.fold,
|
|
71
|
+
{
|
|
72
|
+
borderTopColor: palette.fold,
|
|
73
|
+
borderLeftColor: palette.fold,
|
|
74
|
+
},
|
|
75
|
+
]}
|
|
76
|
+
testID={childTestID(testID, 'fold')}
|
|
77
|
+
/>
|
|
78
|
+
</View>
|
|
79
|
+
{accessibleName === undefined ? null : (
|
|
80
|
+
<Text
|
|
81
|
+
accessible
|
|
82
|
+
accessibilityLabel={accessibleName}
|
|
83
|
+
style={A11Y_TEXT_ONLY_STYLE}
|
|
84
|
+
testID={childTestID(testID, 'accessibility-label')}
|
|
85
|
+
>
|
|
86
|
+
{accessibleName}
|
|
87
|
+
</Text>
|
|
88
|
+
)}
|
|
89
|
+
</View>
|
|
90
|
+
</View>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export type ResolvedRibbonLayout = {
|
|
2
|
+
overlay: {
|
|
3
|
+
position: 'absolute';
|
|
4
|
+
top: number;
|
|
5
|
+
right: number;
|
|
6
|
+
zIndex: number;
|
|
7
|
+
alignItems: 'flex-end';
|
|
8
|
+
};
|
|
9
|
+
bar: { height: number };
|
|
10
|
+
fold: { width: 0; height: 0; borderWidth: number };
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export function resolveRibbonLayout({
|
|
14
|
+
top,
|
|
15
|
+
barHeight,
|
|
16
|
+
foldSize,
|
|
17
|
+
}: {
|
|
18
|
+
top: number;
|
|
19
|
+
barHeight: number;
|
|
20
|
+
foldSize: number;
|
|
21
|
+
}): ResolvedRibbonLayout {
|
|
22
|
+
return {
|
|
23
|
+
overlay: {
|
|
24
|
+
position: 'absolute',
|
|
25
|
+
top,
|
|
26
|
+
right: 0,
|
|
27
|
+
zIndex: 1,
|
|
28
|
+
alignItems: 'flex-end',
|
|
29
|
+
},
|
|
30
|
+
bar: { height: barHeight },
|
|
31
|
+
fold: { width: 0, height: 0, borderWidth: foldSize },
|
|
32
|
+
};
|
|
33
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
import { fw, radius, space, type as t, type ColorTokens } from '../../../theme';
|
|
3
|
+
import type { RibbonTone } from './types';
|
|
4
|
+
|
|
5
|
+
export const makeStyles = (_c: ColorTokens) =>
|
|
6
|
+
StyleSheet.create({
|
|
7
|
+
root: { position: 'relative' },
|
|
8
|
+
visual: { alignItems: 'flex-end' },
|
|
9
|
+
bar: {
|
|
10
|
+
flexDirection: 'row',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
paddingHorizontal: space['3'],
|
|
13
|
+
borderTopLeftRadius: radius.xs,
|
|
14
|
+
borderBottomLeftRadius: radius.xs,
|
|
15
|
+
},
|
|
16
|
+
text: { fontSize: t.micro, fontWeight: fw.medium },
|
|
17
|
+
fold: {
|
|
18
|
+
borderRightColor: 'transparent',
|
|
19
|
+
borderBottomColor: 'transparent',
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
export function paletteFor(
|
|
24
|
+
tone: RibbonTone,
|
|
25
|
+
c: ColorTokens
|
|
26
|
+
): { bg: string; fg: string; fold: string } {
|
|
27
|
+
switch (tone) {
|
|
28
|
+
case 'brand':
|
|
29
|
+
return { bg: c.primary, fg: c.onPrimary, fold: c.primaryPressed };
|
|
30
|
+
case 'danger':
|
|
31
|
+
return { bg: c.error, fg: c.onError, fold: c.error };
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
|
|
4
|
+
export type RibbonTone = 'brand' | 'danger';
|
|
5
|
+
|
|
6
|
+
export type RibbonProps = {
|
|
7
|
+
/** 右上缎带的可见文案 */
|
|
8
|
+
label: string;
|
|
9
|
+
/** 语义色,默认 'brand' */
|
|
10
|
+
tone?: RibbonTone;
|
|
11
|
+
/** 被缎带标记的内容 */
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
/** 可选读屏文案;不传时缎带只作为装饰,避免与内容重复播报 */
|
|
14
|
+
accessibilityLabel?: string;
|
|
15
|
+
/** 外层布局样式 */
|
|
16
|
+
style?: StyleProp<ViewStyle>;
|
|
17
|
+
/** E2E / 测试定位 */
|
|
18
|
+
testID?: string;
|
|
19
|
+
};
|
|
@@ -11,6 +11,7 @@ import { childTestID } from '../../../utils/testID';
|
|
|
11
11
|
import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
|
|
12
12
|
import { normalizeNonBlankText } from '../shared/accessibilityName';
|
|
13
13
|
import { getStepperValueAccessibilityProps } from './accessibility';
|
|
14
|
+
import { resolveStepperDisplayValue } from './displayValue';
|
|
14
15
|
import { resolveStepperLayout } from './layout';
|
|
15
16
|
import { nextStepperValue, normalizeStepper } from './normalizeStepper';
|
|
16
17
|
import { StepperPressable } from './StepperPressable';
|
|
@@ -37,6 +38,7 @@ export function Stepper({
|
|
|
37
38
|
max,
|
|
38
39
|
step,
|
|
39
40
|
size = 'md',
|
|
41
|
+
formatValue,
|
|
40
42
|
disabled = false,
|
|
41
43
|
testID,
|
|
42
44
|
}: StepperProps): React.JSX.Element {
|
|
@@ -44,7 +46,7 @@ export function Stepper({
|
|
|
44
46
|
const fontScale = useFontScale();
|
|
45
47
|
const dims = sizingFor(size);
|
|
46
48
|
const valueFontSize = scaleFontMetric(dims.fs, fontScale);
|
|
47
|
-
const layout = resolveStepperLayout(dims);
|
|
49
|
+
const layout = resolveStepperLayout(dims, { compact: size === 'xs' });
|
|
48
50
|
const accessibleName = normalizeNonBlankText(accessibilityLabel);
|
|
49
51
|
const hasBlankLabel = accessibleName === undefined;
|
|
50
52
|
const normalized = normalizeStepper({
|
|
@@ -56,6 +58,7 @@ export function Stepper({
|
|
|
56
58
|
});
|
|
57
59
|
const { safeMin, safeStep, safeValue, canDecrement, canIncrement } =
|
|
58
60
|
normalized;
|
|
61
|
+
const displayValue = resolveStepperDisplayValue(safeValue, formatValue);
|
|
59
62
|
const decrementValue = nextStepperValue(normalized, 'decrement');
|
|
60
63
|
const incrementValue = nextStepperValue(normalized, 'increment');
|
|
61
64
|
const valueAccessibilityProps = getStepperValueAccessibilityProps({
|
|
@@ -161,8 +164,17 @@ export function Stepper({
|
|
|
161
164
|
style={[styles.cell, { width: dims.w, height: dims.h }]}
|
|
162
165
|
testID={childTestID(testID, 'value-visual')}
|
|
163
166
|
>
|
|
164
|
-
<Text
|
|
165
|
-
{
|
|
167
|
+
<Text
|
|
168
|
+
{...(formatValue === undefined
|
|
169
|
+
? {}
|
|
170
|
+
: {
|
|
171
|
+
adjustsFontSizeToFit: true,
|
|
172
|
+
minimumFontScale: 0.75,
|
|
173
|
+
numberOfLines: 1,
|
|
174
|
+
})}
|
|
175
|
+
style={[styles.valueText, { fontSize: valueFontSize }]}
|
|
176
|
+
>
|
|
177
|
+
{displayValue}
|
|
166
178
|
</Text>
|
|
167
179
|
</View>
|
|
168
180
|
</View>
|
|
@@ -14,15 +14,34 @@ export type ResolvedStepperLayout = {
|
|
|
14
14
|
};
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
export function resolveStepperLayout(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
export function resolveStepperLayout(
|
|
18
|
+
{
|
|
19
|
+
h,
|
|
20
|
+
btn,
|
|
21
|
+
w,
|
|
22
|
+
}: {
|
|
23
|
+
h: number;
|
|
24
|
+
btn: number;
|
|
25
|
+
w: number;
|
|
26
|
+
},
|
|
27
|
+
options?: { compact?: boolean }
|
|
28
|
+
): ResolvedStepperLayout {
|
|
29
|
+
if (options?.compact === true) {
|
|
30
|
+
return {
|
|
31
|
+
decrementFrame: {
|
|
32
|
+
width: btn,
|
|
33
|
+
height: fixed.hitTarget,
|
|
34
|
+
alignItems: 'flex-end',
|
|
35
|
+
},
|
|
36
|
+
valueFrame: { width: w, height: fixed.hitTarget },
|
|
37
|
+
incrementFrame: {
|
|
38
|
+
width: btn,
|
|
39
|
+
height: fixed.hitTarget,
|
|
40
|
+
alignItems: 'flex-start',
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
|
|
26
45
|
const sideWidth = Math.max(fixed.hitTarget, btn);
|
|
27
46
|
const outerHeight = Math.max(fixed.hitTarget, h);
|
|
28
47
|
return {
|
|
@@ -52,7 +52,8 @@ export const makeStyles = (c: ColorTokens) =>
|
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
54
|
|
|
55
|
-
/** Stepper 尺寸推导:
|
|
55
|
+
/** Stepper 尺寸推导:xs(r(24) 高 / r(24) 按钮 / r(40) 值宽 / micro 字)/
|
|
56
|
+
* sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
|
|
56
57
|
* md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
|
|
57
58
|
* 新增 size 在 types.ts 加 union + 这里加 case。 */
|
|
58
59
|
export function sizingFor(size: StepperSize): {
|
|
@@ -62,6 +63,8 @@ export function sizingFor(size: StepperSize): {
|
|
|
62
63
|
fs: number;
|
|
63
64
|
} {
|
|
64
65
|
switch (size) {
|
|
66
|
+
case 'xs':
|
|
67
|
+
return { h: r(24), btn: r(24), w: r(40), fs: t.micro };
|
|
65
68
|
case 'sm':
|
|
66
69
|
return { h: control.sm, btn: control.sm, w: r(40), fs: t.xs };
|
|
67
70
|
case 'md':
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/** Stepper 尺寸:sm=28px / md=32px */
|
|
2
|
-
export type StepperSize = 'sm' | 'md';
|
|
1
|
+
/** Stepper 尺寸:xs=24px / sm=28px / md=32px */
|
|
2
|
+
export type StepperSize = 'xs' | 'sm' | 'md';
|
|
3
3
|
|
|
4
4
|
export type StepperProps = {
|
|
5
5
|
/** 当前值(受控) */
|
|
@@ -16,6 +16,8 @@ export type StepperProps = {
|
|
|
16
16
|
step?: number;
|
|
17
17
|
/** 尺寸,默认 'md' */
|
|
18
18
|
size?: StepperSize;
|
|
19
|
+
/** 自定义中央值的可见文案;数值运算与 adjustable 语义仍使用归一化后的 number */
|
|
20
|
+
formatValue?: (value: number) => string;
|
|
19
21
|
/** 整体禁用(三个操作节点都不暴露 action) */
|
|
20
22
|
disabled?: boolean;
|
|
21
23
|
/** E2E / 测试定位 */
|
|
@@ -55,6 +55,8 @@ export { Radio } from './Radio';
|
|
|
55
55
|
export type { GroupProps as RadioGroupProps, RadioProps } from './Radio';
|
|
56
56
|
export { Reveal } from './Reveal';
|
|
57
57
|
export type { RevealProps } from './Reveal';
|
|
58
|
+
export { Ribbon } from './Ribbon';
|
|
59
|
+
export type { RibbonProps, RibbonTone } from './Ribbon';
|
|
58
60
|
export { Search } from './Search';
|
|
59
61
|
export type { SearchProps } from './Search';
|
|
60
62
|
export { Skeleton } from './Skeleton';
|