zkit-ui 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui/Button/index.d.ts.map +1 -1
- package/dist/ui/Button/index.js +35 -11
- package/package.json +1 -1
- package/src/ui/Button/README.md +2 -2
- package/src/ui/Button/index.tsx +40 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAEV,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/Button/index.js
CHANGED
|
@@ -538,8 +538,18 @@ function resolveWebCursorStyle(disabled) {
|
|
|
538
538
|
return undefined;
|
|
539
539
|
return { cursor: disabled ? 'not-allowed' : 'pointer' };
|
|
540
540
|
}
|
|
541
|
+
function requiresAnimatedPressEffect(effect) {
|
|
542
|
+
return (effect === 'scale' ||
|
|
543
|
+
effect === 'scale-opacity' ||
|
|
544
|
+
effect === 'highlight' ||
|
|
545
|
+
effect === 'scale-highlight');
|
|
546
|
+
}
|
|
541
547
|
function shouldUseStaticButtonPath({ disabled, loading, pressEffect, }) {
|
|
542
|
-
|
|
548
|
+
if (loading)
|
|
549
|
+
return false;
|
|
550
|
+
if (disabled)
|
|
551
|
+
return true;
|
|
552
|
+
return !requiresAnimatedPressEffect(pressEffect);
|
|
543
553
|
}
|
|
544
554
|
function useButtonFrame({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, textStyle, accessibilityLabel, }) {
|
|
545
555
|
var _a, _b;
|
|
@@ -670,7 +680,7 @@ function useButtonFrame({ variant = 'solid', tone = 'primary', size = 'md', shap
|
|
|
670
680
|
borderStyle,
|
|
671
681
|
};
|
|
672
682
|
}
|
|
673
|
-
function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode: _loadingMode = 'inline', pressEffect
|
|
683
|
+
function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode: _loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, testID, ...pressableProps }, ref) {
|
|
674
684
|
const frame = useButtonFrame({
|
|
675
685
|
accessibilityLabel,
|
|
676
686
|
block,
|
|
@@ -698,19 +708,30 @@ function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', sh
|
|
|
698
708
|
return;
|
|
699
709
|
onPress === null || onPress === void 0 ? void 0 : onPress(event);
|
|
700
710
|
}, [interactionDisabled, onPress]);
|
|
711
|
+
const pressOpacityEnabled = !interactionDisabled && (pressEffect === 'auto' || pressEffect === 'opacity');
|
|
712
|
+
const rootStyle = React.useCallback(({ pressed }) => [
|
|
713
|
+
styles.root,
|
|
714
|
+
rootSizeStyle,
|
|
715
|
+
radiusStyle,
|
|
716
|
+
shadowStyle,
|
|
717
|
+
visualDisabled ? styles.disabledRoot : null,
|
|
718
|
+
pressOpacityEnabled && pressed ? styles.pressedRoot : null,
|
|
719
|
+
webCursorStyle,
|
|
720
|
+
style,
|
|
721
|
+
], [
|
|
722
|
+
pressOpacityEnabled,
|
|
723
|
+
radiusStyle,
|
|
724
|
+
rootSizeStyle,
|
|
725
|
+
shadowStyle,
|
|
726
|
+
style,
|
|
727
|
+
visualDisabled,
|
|
728
|
+
webCursorStyle,
|
|
729
|
+
]);
|
|
701
730
|
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
|
|
702
731
|
...accessibilityState,
|
|
703
732
|
busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
|
|
704
733
|
disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
|
|
705
|
-
}, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: [
|
|
706
|
-
styles.root,
|
|
707
|
-
rootSizeStyle,
|
|
708
|
-
radiusStyle,
|
|
709
|
-
shadowStyle,
|
|
710
|
-
visualDisabled ? styles.disabledRoot : null,
|
|
711
|
-
webCursorStyle,
|
|
712
|
-
style,
|
|
713
|
-
], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
|
|
734
|
+
}, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: rootStyle, testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
|
|
714
735
|
styles.content,
|
|
715
736
|
contentSizeStyle,
|
|
716
737
|
paddingStyle,
|
|
@@ -943,6 +964,9 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
943
964
|
disabledRoot: {
|
|
944
965
|
opacity: DISABLED_OPACITY,
|
|
945
966
|
},
|
|
967
|
+
pressedRoot: {
|
|
968
|
+
opacity: PRESSED_OPACITY,
|
|
969
|
+
},
|
|
946
970
|
spinnerBox: {
|
|
947
971
|
alignItems: 'center',
|
|
948
972
|
justifyContent: 'center',
|
package/package.json
CHANGED
package/src/ui/Button/README.md
CHANGED
|
@@ -154,11 +154,11 @@ export function Demo() {
|
|
|
154
154
|
}
|
|
155
155
|
```
|
|
156
156
|
|
|
157
|
-
渐变依赖 `expo-linear-gradient
|
|
157
|
+
渐变依赖 `expo-linear-gradient`，缺失时会使用第一段颜色作为稳定兜底。默认 `pressEffect="auto"` 走普通 `Pressable` 静态路径，并用原生 pressed style 做轻量透明度反馈；只有 `scale`、`scale-opacity`、`highlight`、`scale-highlight` 和 loading 过渡会升级到 Reanimated 动画路径。
|
|
158
158
|
|
|
159
159
|
## 列表高频渲染
|
|
160
160
|
|
|
161
|
-
在 `FlatList` / `FlashList` cell
|
|
161
|
+
在 `FlatList` / `FlashList` cell 中批量渲染普通按钮时，默认 `pressEffect="auto"` 已命中轻量 `Pressable + View` 路径，不会为每个 cell 挂载 Reanimated press/loading 动画结构。列表内需要更强反馈时优先使用 `pressEffect="opacity"`；只有确实需要缩放、高亮遮罩或 loading 动画时再使用对应动画配置。
|
|
162
162
|
|
|
163
163
|
## 常用 Props
|
|
164
164
|
|
package/src/ui/Button/index.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import type {
|
|
|
4
4
|
DimensionValue,
|
|
5
5
|
GestureResponderEvent,
|
|
6
6
|
Insets,
|
|
7
|
+
PressableStateCallbackType,
|
|
7
8
|
StyleProp,
|
|
8
9
|
TextStyle,
|
|
9
10
|
ViewStyle,
|
|
@@ -837,6 +838,15 @@ function resolveWebCursorStyle(disabled: boolean): ViewStyle | undefined {
|
|
|
837
838
|
return { cursor: disabled ? 'not-allowed' : 'pointer' } as ViewStyle;
|
|
838
839
|
}
|
|
839
840
|
|
|
841
|
+
function requiresAnimatedPressEffect(effect: ButtonPressEffect | undefined) {
|
|
842
|
+
return (
|
|
843
|
+
effect === 'scale' ||
|
|
844
|
+
effect === 'scale-opacity' ||
|
|
845
|
+
effect === 'highlight' ||
|
|
846
|
+
effect === 'scale-highlight'
|
|
847
|
+
);
|
|
848
|
+
}
|
|
849
|
+
|
|
840
850
|
function shouldUseStaticButtonPath({
|
|
841
851
|
disabled,
|
|
842
852
|
loading,
|
|
@@ -846,7 +856,9 @@ function shouldUseStaticButtonPath({
|
|
|
846
856
|
loading?: boolean;
|
|
847
857
|
pressEffect?: ButtonPressEffect;
|
|
848
858
|
}) {
|
|
849
|
-
|
|
859
|
+
if (loading) return false;
|
|
860
|
+
if (disabled) return true;
|
|
861
|
+
return !requiresAnimatedPressEffect(pressEffect);
|
|
850
862
|
}
|
|
851
863
|
|
|
852
864
|
function useButtonFrame({
|
|
@@ -1079,7 +1091,7 @@ function ButtonStaticImpl(
|
|
|
1079
1091
|
disabled = false,
|
|
1080
1092
|
loading = false,
|
|
1081
1093
|
loadingMode: _loadingMode = 'inline',
|
|
1082
|
-
pressEffect
|
|
1094
|
+
pressEffect = 'auto',
|
|
1083
1095
|
icon,
|
|
1084
1096
|
iconPlacement = 'start',
|
|
1085
1097
|
iconOnly = false,
|
|
@@ -1151,6 +1163,28 @@ function ButtonStaticImpl(
|
|
|
1151
1163
|
},
|
|
1152
1164
|
[interactionDisabled, onPress]
|
|
1153
1165
|
);
|
|
1166
|
+
const pressOpacityEnabled = !interactionDisabled && (pressEffect === 'auto' || pressEffect === 'opacity');
|
|
1167
|
+
const rootStyle = React.useCallback(
|
|
1168
|
+
({ pressed }: PressableStateCallbackType) => [
|
|
1169
|
+
styles.root,
|
|
1170
|
+
rootSizeStyle,
|
|
1171
|
+
radiusStyle,
|
|
1172
|
+
shadowStyle,
|
|
1173
|
+
visualDisabled ? styles.disabledRoot : null,
|
|
1174
|
+
pressOpacityEnabled && pressed ? styles.pressedRoot : null,
|
|
1175
|
+
webCursorStyle,
|
|
1176
|
+
style,
|
|
1177
|
+
],
|
|
1178
|
+
[
|
|
1179
|
+
pressOpacityEnabled,
|
|
1180
|
+
radiusStyle,
|
|
1181
|
+
rootSizeStyle,
|
|
1182
|
+
shadowStyle,
|
|
1183
|
+
style,
|
|
1184
|
+
visualDisabled,
|
|
1185
|
+
webCursorStyle,
|
|
1186
|
+
]
|
|
1187
|
+
);
|
|
1154
1188
|
|
|
1155
1189
|
return (
|
|
1156
1190
|
<Pressable
|
|
@@ -1166,15 +1200,7 @@ function ButtonStaticImpl(
|
|
|
1166
1200
|
disabled={interactionDisabled}
|
|
1167
1201
|
hitSlop={hitSlop ?? defaultHitSlop}
|
|
1168
1202
|
onPress={handlePress}
|
|
1169
|
-
style={
|
|
1170
|
-
styles.root,
|
|
1171
|
-
rootSizeStyle,
|
|
1172
|
-
radiusStyle,
|
|
1173
|
-
shadowStyle,
|
|
1174
|
-
visualDisabled ? styles.disabledRoot : null,
|
|
1175
|
-
webCursorStyle,
|
|
1176
|
-
style,
|
|
1177
|
-
]}
|
|
1203
|
+
style={rootStyle}
|
|
1178
1204
|
testID={testID}
|
|
1179
1205
|
>
|
|
1180
1206
|
<View
|
|
@@ -1647,6 +1673,9 @@ const styles = StyleSheet.create({
|
|
|
1647
1673
|
disabledRoot: {
|
|
1648
1674
|
opacity: DISABLED_OPACITY,
|
|
1649
1675
|
},
|
|
1676
|
+
pressedRoot: {
|
|
1677
|
+
opacity: PRESSED_OPACITY,
|
|
1678
|
+
},
|
|
1650
1679
|
spinnerBox: {
|
|
1651
1680
|
alignItems: 'center',
|
|
1652
1681
|
justifyContent: 'center',
|