@mpxjs/webpack-plugin 2.10.14-beta.5 → 2.10.14-beta.7
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/platform/template/wx/component-config/button.js +12 -3
- package/lib/runtime/components/react/context.ts +0 -1
- package/lib/runtime/components/react/dist/context.d.ts +3 -6
- package/lib/runtime/components/react/dist/context.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/context.js +1 -1
- package/lib/runtime/components/react/dist/event.config.d.ts +1 -0
- package/lib/runtime/components/react/dist/event.config.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/getInnerListeners.d.ts +1 -0
- package/lib/runtime/components/react/dist/getInnerListeners.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/getInnerListeners.js +35 -21
- package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-async-suspense.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-button.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-button.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-camera.d.ts +27 -0
- package/lib/runtime/components/react/dist/mpx-camera.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-camera.jsx +197 -0
- package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/Image.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/Image.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/html.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/html.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-checkbox.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-checkbox.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-form.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-form.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-icon/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-icon/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-image.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-image.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-image.jsx +81 -37
- package/lib/runtime/components/react/dist/mpx-inline-text.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-inline-text.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-input.d.ts +2 -7
- package/lib/runtime/components/react/dist/mpx-input.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-input.jsx +19 -12
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx +15 -22
- package/lib/runtime/components/react/dist/mpx-label.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-label.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-movable-area.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-movable-area.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-movable-view.d.ts +5 -2
- package/lib/runtime/components/react/dist/mpx-movable-view.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +102 -34
- package/lib/runtime/components/react/dist/mpx-nav.d.ts +9 -0
- package/lib/runtime/components/react/dist/mpx-nav.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-nav.jsx +132 -0
- package/lib/runtime/components/react/dist/mpx-navigator.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-navigator.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/date.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/date.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/region.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/region.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/time.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/time.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/type.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker/type.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts +2 -0
- package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view/index.jsx +4 -3
- package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts +2 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.jsx +15 -21
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.jsx +8 -11
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.d.ts +14 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.jsx +20 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-popup/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-popup/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/index.jsx +5 -1
- package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx +3 -5
- package/lib/runtime/components/react/dist/mpx-progress.d.ts +24 -0
- package/lib/runtime/components/react/dist/mpx-progress.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-progress.jsx +163 -0
- package/lib/runtime/components/react/dist/mpx-radio-group.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-radio-group.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-radio.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-radio.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-rich-text/html.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-rich-text/html.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-root-portal.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-root-portal.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-scroll-view.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-scroll-view.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +69 -51
- package/lib/runtime/components/react/dist/mpx-simple-text.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-simple-text.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-simple-view.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-simple-view.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-slider.d.ts +31 -0
- package/lib/runtime/components/react/dist/mpx-slider.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-slider.jsx +321 -0
- package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-swiper.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-swiper.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +9 -16
- package/lib/runtime/components/react/dist/mpx-switch.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-switch.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-text.d.ts +3 -1
- package/lib/runtime/components/react/dist/mpx-text.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-text.jsx +33 -5
- package/lib/runtime/components/react/dist/mpx-textarea.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-textarea.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-video.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-video.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-view.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-view.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-view.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-web-view.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-web-view.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/mpx-web-view.jsx +21 -2
- package/lib/runtime/components/react/dist/parser.d.ts +1 -0
- package/lib/runtime/components/react/dist/parser.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/useAnimationHooks.d.ts +1 -0
- package/lib/runtime/components/react/dist/useAnimationHooks.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/useNodesRef.d.ts +1 -0
- package/lib/runtime/components/react/dist/useNodesRef.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/utils.d.ts +1 -0
- package/lib/runtime/components/react/dist/utils.d.ts.map +1 -0
- package/lib/runtime/components/react/dist/utils.jsx +16 -6
- package/lib/runtime/components/react/mpx-input.tsx +1 -9
- package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx +15 -13
- package/lib/runtime/components/react/nav.tsx +67 -76
- package/package.json +1 -1
- package/lib/runtime/components/react/dist/mpx-nav-container.d.ts +0 -9
- package/lib/runtime/components/react/dist/mpx-nav-container.jsx +0 -23
- package/lib/runtime/components/react/dist/nav.d.ts +0 -11
- package/lib/runtime/components/react/dist/nav.jsx +0 -141
- package/lib/runtime/components/react/dist/useNavShared.d.ts +0 -2
- package/lib/runtime/components/react/dist/useNavShared.js +0 -6
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* ✔ out-of-bounds
|
|
5
5
|
* ✔ x
|
|
6
6
|
* ✔ y
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* ✔ damping
|
|
8
|
+
* ✔ friction
|
|
9
9
|
* ✔ disabled
|
|
10
10
|
* ✘ scale
|
|
11
11
|
* ✘ scale-min
|
|
@@ -24,8 +24,96 @@ import useNodesRef from './useNodesRef';
|
|
|
24
24
|
import { MovableAreaContext } from './context';
|
|
25
25
|
import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils';
|
|
26
26
|
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
|
|
27
|
-
import Animated, { useSharedValue, useAnimatedStyle,
|
|
27
|
+
import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
|
|
28
28
|
import { collectDataset, noop } from '@mpxjs/utils';
|
|
29
|
+
// 超出边界处理函数,参考微信小程序的超出边界衰减效果
|
|
30
|
+
const applyBoundaryDecline = (newValue, range) => {
|
|
31
|
+
'worklet';
|
|
32
|
+
const decline = (distance) => {
|
|
33
|
+
'worklet';
|
|
34
|
+
return Math.sqrt(Math.abs(distance));
|
|
35
|
+
};
|
|
36
|
+
if (newValue < range[0]) {
|
|
37
|
+
const overDistance = range[0] - newValue;
|
|
38
|
+
return range[0] - decline(overDistance);
|
|
39
|
+
}
|
|
40
|
+
else if (newValue > range[1]) {
|
|
41
|
+
const overDistance = newValue - range[1];
|
|
42
|
+
return range[1] + decline(overDistance);
|
|
43
|
+
}
|
|
44
|
+
return newValue;
|
|
45
|
+
};
|
|
46
|
+
// 参考微信小程序的弹簧阻尼系统实现
|
|
47
|
+
const withWechatSpring = (toValue, dampingParam = 20, callback) => {
|
|
48
|
+
'worklet';
|
|
49
|
+
// 弹簧参数计算
|
|
50
|
+
const m = 1; // 质量
|
|
51
|
+
const k = 9 * Math.pow(dampingParam, 2) / 40; // 弹簧系数
|
|
52
|
+
const c = dampingParam; // 阻尼系数
|
|
53
|
+
// 判别式:r = c² - 4mk
|
|
54
|
+
const discriminant = c * c - 4 * m * k;
|
|
55
|
+
// 计算动画持续时间和缓动函数
|
|
56
|
+
let duration;
|
|
57
|
+
let easingFunction;
|
|
58
|
+
if (Math.abs(discriminant) < 0.01) {
|
|
59
|
+
// 临界阻尼 (discriminant ≈ 0)
|
|
60
|
+
// 使用cubic-out模拟临界阻尼的平滑过渡
|
|
61
|
+
duration = Math.max(350, Math.min(800, 2000 / dampingParam));
|
|
62
|
+
easingFunction = Easing.out(Easing.cubic);
|
|
63
|
+
}
|
|
64
|
+
else if (discriminant > 0) {
|
|
65
|
+
// 过阻尼 (discriminant > 0)
|
|
66
|
+
// 使用指数缓动模拟过阻尼的缓慢收敛
|
|
67
|
+
duration = Math.max(450, Math.min(1000, 2500 / dampingParam));
|
|
68
|
+
easingFunction = Easing.out(Easing.exp);
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
// 欠阻尼 (discriminant < 0) - 会产生振荡
|
|
72
|
+
// 计算振荡频率和衰减率
|
|
73
|
+
const dampingRatio = c / (2 * Math.sqrt(m * k)); // 阻尼比
|
|
74
|
+
// 根据阻尼比调整动画参数
|
|
75
|
+
if (dampingRatio < 0.7) {
|
|
76
|
+
// 明显振荡
|
|
77
|
+
duration = Math.max(600, Math.min(1200, 3000 / dampingParam));
|
|
78
|
+
// 创建带振荡的贝塞尔曲线
|
|
79
|
+
easingFunction = Easing.bezier(0.175, 0.885, 0.32, 1.275);
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
// 轻微振荡
|
|
83
|
+
duration = Math.max(400, Math.min(800, 2000 / dampingParam));
|
|
84
|
+
easingFunction = Easing.bezier(0.25, 0.46, 0.45, 0.94);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return withTiming(toValue, {
|
|
88
|
+
duration,
|
|
89
|
+
easing: easingFunction
|
|
90
|
+
}, callback);
|
|
91
|
+
};
|
|
92
|
+
// 参考微信小程序friction的惯性动画
|
|
93
|
+
const withWechatDecay = (velocity, currentPosition, clampRange, frictionValue = 2, callback) => {
|
|
94
|
+
'worklet';
|
|
95
|
+
// 微信小程序friction算法: delta = -1.5 * v² / a, 其中 a = -f * v / |v|
|
|
96
|
+
// 如果friction小于等于0,设置为默认值2
|
|
97
|
+
const validFriction = frictionValue <= 0 ? 2 : frictionValue;
|
|
98
|
+
const f = 1000 * validFriction;
|
|
99
|
+
const acceleration = velocity !== 0 ? -f * velocity / Math.abs(velocity) : 0;
|
|
100
|
+
const delta = acceleration !== 0 ? (-1.5 * velocity * velocity) / acceleration : 0;
|
|
101
|
+
let finalPosition = currentPosition + delta;
|
|
102
|
+
// 边界限制
|
|
103
|
+
if (finalPosition < clampRange[0]) {
|
|
104
|
+
finalPosition = clampRange[0];
|
|
105
|
+
}
|
|
106
|
+
else if (finalPosition > clampRange[1]) {
|
|
107
|
+
finalPosition = clampRange[1];
|
|
108
|
+
}
|
|
109
|
+
// 计算动画时长
|
|
110
|
+
const distance = Math.abs(finalPosition - currentPosition);
|
|
111
|
+
const duration = Math.min(1500, Math.max(200, distance * 8));
|
|
112
|
+
return withTiming(finalPosition, {
|
|
113
|
+
duration,
|
|
114
|
+
easing: Easing.out(Easing.cubic)
|
|
115
|
+
}, callback);
|
|
116
|
+
};
|
|
29
117
|
const styles = StyleSheet.create({
|
|
30
118
|
container: {
|
|
31
119
|
position: 'absolute',
|
|
@@ -41,7 +129,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
41
129
|
const hasLayoutRef = useRef(false);
|
|
42
130
|
const propsRef = useRef({});
|
|
43
131
|
propsRef.current = (props || {});
|
|
44
|
-
const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
|
|
132
|
+
const { x = 0, y = 0, inertia = false, disabled = false, animation = true, damping = 20, friction = 2, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
|
|
45
133
|
const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
|
|
46
134
|
const navigation = useNavigation();
|
|
47
135
|
const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
|
|
@@ -106,18 +194,12 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
106
194
|
const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) });
|
|
107
195
|
if (direction === 'horizontal' || direction === 'all') {
|
|
108
196
|
offsetX.value = animation
|
|
109
|
-
?
|
|
110
|
-
duration: 1500,
|
|
111
|
-
dampingRatio: 0.8
|
|
112
|
-
})
|
|
197
|
+
? withWechatSpring(newX, damping)
|
|
113
198
|
: newX;
|
|
114
199
|
}
|
|
115
200
|
if (direction === 'vertical' || direction === 'all') {
|
|
116
201
|
offsetY.value = animation
|
|
117
|
-
?
|
|
118
|
-
duration: 1500,
|
|
119
|
-
dampingRatio: 0.8
|
|
120
|
-
})
|
|
202
|
+
? withWechatSpring(newY, damping)
|
|
121
203
|
: newY;
|
|
122
204
|
}
|
|
123
205
|
if (bindchange) {
|
|
@@ -293,7 +375,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
293
375
|
triggerEndOnJS
|
|
294
376
|
});
|
|
295
377
|
const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
|
|
296
|
-
// 节流版本的
|
|
378
|
+
// 节流版本的change事件触发
|
|
297
379
|
const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
|
|
298
380
|
'worklet';
|
|
299
381
|
const now = Date.now();
|
|
@@ -357,7 +439,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
357
439
|
offsetX.value = x;
|
|
358
440
|
}
|
|
359
441
|
else {
|
|
360
|
-
offsetX.value = newX;
|
|
442
|
+
offsetX.value = applyBoundaryDecline(newX, draggableXRange.value);
|
|
361
443
|
}
|
|
362
444
|
}
|
|
363
445
|
if (direction === 'vertical' || direction === 'all') {
|
|
@@ -367,7 +449,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
367
449
|
offsetY.value = y;
|
|
368
450
|
}
|
|
369
451
|
else {
|
|
370
|
-
offsetY.value = newY;
|
|
452
|
+
offsetY.value = applyBoundaryDecline(newY, draggableYRange.value);
|
|
371
453
|
}
|
|
372
454
|
}
|
|
373
455
|
if (bindchange) {
|
|
@@ -397,18 +479,12 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
397
479
|
if (x !== offsetX.value || y !== offsetY.value) {
|
|
398
480
|
if (x !== offsetX.value) {
|
|
399
481
|
offsetX.value = animation
|
|
400
|
-
?
|
|
401
|
-
duration: 1500,
|
|
402
|
-
dampingRatio: 0.8
|
|
403
|
-
})
|
|
482
|
+
? withWechatSpring(x, damping)
|
|
404
483
|
: x;
|
|
405
484
|
}
|
|
406
485
|
if (y !== offsetY.value) {
|
|
407
486
|
offsetY.value = animation
|
|
408
|
-
?
|
|
409
|
-
duration: 1500,
|
|
410
|
-
dampingRatio: 0.8
|
|
411
|
-
})
|
|
487
|
+
? withWechatSpring(y, damping)
|
|
412
488
|
: y;
|
|
413
489
|
}
|
|
414
490
|
if (bindchange) {
|
|
@@ -420,14 +496,10 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
420
496
|
}
|
|
421
497
|
}
|
|
422
498
|
else if (inertia) {
|
|
423
|
-
// 惯性处理
|
|
499
|
+
// 惯性处理 - 使用微信小程序friction算法
|
|
424
500
|
if (direction === 'horizontal' || direction === 'all') {
|
|
425
501
|
xInertialMotion.value = true;
|
|
426
|
-
offsetX.value =
|
|
427
|
-
velocity: e.velocityX / 10,
|
|
428
|
-
rubberBandEffect: outOfBounds,
|
|
429
|
-
clamp: draggableXRange.value
|
|
430
|
-
}, () => {
|
|
502
|
+
offsetX.value = withWechatDecay(e.velocityX / 10, offsetX.value, draggableXRange.value, friction, () => {
|
|
431
503
|
xInertialMotion.value = false;
|
|
432
504
|
if (bindchange) {
|
|
433
505
|
runOnJS(runOnJSCallback)('handleTriggerChange', {
|
|
@@ -439,11 +511,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
439
511
|
}
|
|
440
512
|
if (direction === 'vertical' || direction === 'all') {
|
|
441
513
|
yInertialMotion.value = true;
|
|
442
|
-
offsetY.value =
|
|
443
|
-
velocity: e.velocityY / 10,
|
|
444
|
-
rubberBandEffect: outOfBounds,
|
|
445
|
-
clamp: draggableYRange.value
|
|
446
|
-
}, () => {
|
|
514
|
+
offsetY.value = withWechatDecay(e.velocityY / 10, offsetY.value, draggableYRange.value, friction, () => {
|
|
447
515
|
yInertialMotion.value = false;
|
|
448
516
|
if (bindchange) {
|
|
449
517
|
runOnJS(runOnJSCallback)('handleTriggerChange', {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function useInnerHeaderHeight(pageConfig: PageConfig): number;
|
|
3
|
+
export interface MpxNavProps {
|
|
4
|
+
pageConfig: PageConfig;
|
|
5
|
+
navigation: any;
|
|
6
|
+
}
|
|
7
|
+
declare const MpxNav: import("react").MemoExoticComponent<({ pageConfig, navigation }: MpxNavProps) => import("react").JSX.Element>;
|
|
8
|
+
export default MpxNav;
|
|
9
|
+
//# sourceMappingURL=mpx-nav.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mpx-nav.d.ts","sourceRoot":"","sources":["../mpx-nav.tsx"],"names":[],"mappings":";AA0BA,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,UAS1D;AA6CD,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,UAAU,CAAA;IACtB,UAAU,EAAE,GAAG,CAAA;CAChB;AAKD,QAAA,MAAM,MAAM,mEAAqC,WAAW,iCA+D1D,CAAA;AAGF,eAAe,MAAM,CAAA"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/* eslint-disable space-before-function-paren */
|
|
2
|
+
import { useState, useMemo, memo } from 'react';
|
|
3
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
4
|
+
import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native';
|
|
5
|
+
function convertToHex(color) {
|
|
6
|
+
try {
|
|
7
|
+
const intColor = processColor(color);
|
|
8
|
+
if (intColor === null || intColor === undefined) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
// 将32位整数颜色值转换为RGBA
|
|
12
|
+
const r = (intColor >> 16) & 255;
|
|
13
|
+
const g = (intColor >> 8) & 255;
|
|
14
|
+
const b = intColor & 255;
|
|
15
|
+
// 转换为十六进制
|
|
16
|
+
const hexR = r.toString(16).padStart(2, '0');
|
|
17
|
+
const hexG = g.toString(16).padStart(2, '0');
|
|
18
|
+
const hexB = b.toString(16).padStart(2, '0');
|
|
19
|
+
return `#${hexR}${hexG}${hexB}`;
|
|
20
|
+
}
|
|
21
|
+
catch (error) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
const titleHeight = 44;
|
|
26
|
+
export function useInnerHeaderHeight(pageConfig) {
|
|
27
|
+
const safeArea = useSafeAreaInsets();
|
|
28
|
+
if (pageConfig.navigationStyle === 'custom') {
|
|
29
|
+
return 0;
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
const safeAreaTop = safeArea?.top || 0;
|
|
33
|
+
const headerHeight = safeAreaTop + titleHeight;
|
|
34
|
+
return headerHeight;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
const styles = StyleSheet.create({
|
|
38
|
+
header: {
|
|
39
|
+
elevation: 3
|
|
40
|
+
},
|
|
41
|
+
headerContent: {
|
|
42
|
+
flexDirection: 'row',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
justifyContent: 'center'
|
|
45
|
+
},
|
|
46
|
+
backButton: {
|
|
47
|
+
position: 'absolute',
|
|
48
|
+
height: '100%',
|
|
49
|
+
width: 40,
|
|
50
|
+
left: 0,
|
|
51
|
+
top: 0,
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
justifyContent: 'center'
|
|
54
|
+
},
|
|
55
|
+
backButtonImage: {
|
|
56
|
+
width: 22,
|
|
57
|
+
height: 22
|
|
58
|
+
},
|
|
59
|
+
title: {
|
|
60
|
+
fontSize: 17,
|
|
61
|
+
fontWeight: 600,
|
|
62
|
+
width: '60%',
|
|
63
|
+
textAlign: 'center'
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
const NavColor = {
|
|
67
|
+
White: '#ffffff',
|
|
68
|
+
Black: '#000000'
|
|
69
|
+
};
|
|
70
|
+
// navigationBarTextStyle 只支持黑白 'white'/'black
|
|
71
|
+
const validBarTextStyle = (textStyle) => {
|
|
72
|
+
const textStyleColor = convertToHex(textStyle);
|
|
73
|
+
if (textStyle && textStyleColor && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
|
|
74
|
+
return textStyleColor;
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
return NavColor.White;
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
const BACK_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==';
|
|
81
|
+
const MpxNav = memo(({ pageConfig, navigation }) => {
|
|
82
|
+
const [innerPageConfig, setPageConfig] = useState(pageConfig || {});
|
|
83
|
+
const safeAreaTop = useSafeAreaInsets()?.top || 0;
|
|
84
|
+
navigation.setPageConfig = (config) => {
|
|
85
|
+
setPageConfig(Object.assign({}, innerPageConfig, config));
|
|
86
|
+
};
|
|
87
|
+
const isCustom = innerPageConfig.navigationStyle === 'custom';
|
|
88
|
+
const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle]);
|
|
89
|
+
// 状态栏的颜色
|
|
90
|
+
const statusBarElement = (<StatusBar translucent backgroundColor='transparent' barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>);
|
|
91
|
+
if (isCustom)
|
|
92
|
+
return statusBarElement;
|
|
93
|
+
// 假设是栈导航,获取栈的长度
|
|
94
|
+
const stackLength = navigation.getState()?.routes?.length;
|
|
95
|
+
const onStackTopBack = mpxGlobal?.__mpx?.config?.rnConfig?.onStackTopBack;
|
|
96
|
+
const isHandleStackTopBack = typeof onStackTopBack === 'function';
|
|
97
|
+
// 回退按钮与图标
|
|
98
|
+
// prettier-ignore
|
|
99
|
+
const backElement = stackLength > 1 || isHandleStackTopBack
|
|
100
|
+
? (<TouchableWithoutFeedback onPress={() => {
|
|
101
|
+
if (stackLength <= 1 && isHandleStackTopBack) {
|
|
102
|
+
onStackTopBack();
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
navigation.goBack();
|
|
106
|
+
}}>
|
|
107
|
+
<View style={[styles.backButton]}>
|
|
108
|
+
<Image style={[styles.backButtonImage, { tintColor: navigationBarTextStyle }]} source={{ uri: BACK_ICON }}></Image>
|
|
109
|
+
</View>
|
|
110
|
+
</TouchableWithoutFeedback>)
|
|
111
|
+
: null;
|
|
112
|
+
return (<View style={[
|
|
113
|
+
styles.header,
|
|
114
|
+
{
|
|
115
|
+
paddingTop: safeAreaTop,
|
|
116
|
+
backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
|
|
117
|
+
}
|
|
118
|
+
]}>
|
|
119
|
+
{statusBarElement}
|
|
120
|
+
{/* TODO: 确定 height 的有效性 */}
|
|
121
|
+
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
|
122
|
+
{/* @ts-expect-error */}
|
|
123
|
+
<View style={styles.headerContent} height={titleHeight}>
|
|
124
|
+
{backElement}
|
|
125
|
+
<Text style={[styles.title, { color: navigationBarTextStyle }]} numberOfLines={1}>
|
|
126
|
+
{innerPageConfig.navigationBarTitleText?.trim() || ''}
|
|
127
|
+
</Text>
|
|
128
|
+
</View>
|
|
129
|
+
</View>);
|
|
130
|
+
});
|
|
131
|
+
MpxNav.displayName = 'MpxNav';
|
|
132
|
+
export default MpxNav;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mpx-navigator.d.ts","sourceRoot":"","sources":["../mpx-navigator.tsx"],"names":[],"mappings":";AAYA,OAAgB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAEhD,UAAU,eAAgB,SAAQ,UAAU;IAC1C,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,CAAA;IAClF,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,UAAU,iGAkCd,CAAA;AAIF,eAAe,UAAU,CAAA"}
|
|
@@ -4,3 +4,4 @@ import { DateProps } from './type';
|
|
|
4
4
|
import { HandlerRef } from '../useNodesRef';
|
|
5
5
|
declare const PickerDate: React.ForwardRefExoticComponent<Omit<DateProps, "ref"> & React.RefAttributes<HandlerRef<View, DateProps>>>;
|
|
6
6
|
export default PickerDate;
|
|
7
|
+
//# sourceMappingURL=date.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../mpx-picker/date.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAA;AACjH,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAA;AAGrD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AA8J3C,QAAA,MAAM,UAAU,4GA4Ed,CAAA;AAGF,eAAe,UAAU,CAAA"}
|
|
@@ -5,3 +5,4 @@ export declare const years: string[];
|
|
|
5
5
|
export declare const months: string[];
|
|
6
6
|
export declare const daysInMonthLength: (year: number, month: number) => 30 | 28 | 29 | 31;
|
|
7
7
|
export declare const daysInMonth: (year: number, month: number) => string[];
|
|
8
|
+
//# sourceMappingURL=dateData.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dateData.d.ts","sourceRoot":"","sources":["../../mpx-picker/dateData.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,4BAAyB,MAAM,WAAyC,CAAA;AAE7F,eAAO,MAAM,UAAU,OAAO,CAAA;AAC9B,eAAO,MAAM,QAAQ,OAAO,CAAA;AAE5B,eAAO,MAAM,KAAK,UAAsE,CAAA;AAExF,eAAO,MAAM,MAAM,UAAyE,CAAA;AAE5F,eAAO,MAAM,iBAAiB,SAAU,MAAM,SAAS,MAAM,sBAQ5D,CAAA;AAED,eAAO,MAAM,WAAW,SAAU,MAAM,SAAS,MAAM,aAEtD,CAAA"}
|
|
@@ -4,3 +4,4 @@ import { HandlerRef } from '../useNodesRef';
|
|
|
4
4
|
import { PickerProps } from './type';
|
|
5
5
|
declare const Picker: React.ForwardRefExoticComponent<(Omit<import("./type").DateProps, "ref"> | Omit<import("./type").SelectorProps, "ref"> | Omit<import("./type").MultiSelectorProps, "ref"> | Omit<import("./type").TimeProps, "ref"> | Omit<import("./type").RegionProps, "ref">) & React.RefAttributes<HandlerRef<View, PickerProps>>>;
|
|
6
6
|
export default Picker;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../mpx-picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAA;AACvF,OAAO,EAA8C,IAAI,EAAE,MAAM,cAAc,CAAA;AAQ/E,OAAoB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAuC,WAAW,EAAE,MAAM,QAAQ,CAAA;AAmGzE,QAAA,MAAM,MAAM,wTAuKX,CAAA;AAGD,eAAe,MAAM,CAAA"}
|
|
@@ -4,3 +4,4 @@ import { MultiSelectorProps } from './type';
|
|
|
4
4
|
import { HandlerRef } from '../useNodesRef';
|
|
5
5
|
declare const PickerMultiSelector: React.ForwardRefExoticComponent<Omit<MultiSelectorProps, "ref"> & React.RefAttributes<HandlerRef<View, MultiSelectorProps>>>;
|
|
6
6
|
export default PickerMultiSelector;
|
|
7
|
+
//# sourceMappingURL=multiSelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"multiSelector.d.ts","sourceRoot":"","sources":["../../mpx-picker/multiSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyE,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAkB,MAAM,QAAQ,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AA8B3C,QAAA,MAAM,mBAAmB,8HA8EvB,CAAA;AAGF,eAAe,mBAAmB,CAAA"}
|
|
@@ -4,3 +4,4 @@ import { RegionProps } from './type';
|
|
|
4
4
|
import { HandlerRef } from '../useNodesRef';
|
|
5
5
|
declare const PickerRegion: React.ForwardRefExoticComponent<Omit<RegionProps, "ref"> & React.RefAttributes<HandlerRef<View, RegionProps>>>;
|
|
6
6
|
export default PickerRegion;
|
|
7
|
+
//# sourceMappingURL=region.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"region.d.ts","sourceRoot":"","sources":["../../mpx-picker/region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkF,MAAM,OAAO,CAAA;AACtG,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAA;AAGrD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AA+J3C,QAAA,MAAM,YAAY,gHAsEhB,CAAA;AAGF,eAAe,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"regionData.d.ts","sourceRoot":"","sources":["../../mpx-picker/regionData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,SAAS,EAk9LjC,CAAA"}
|
|
@@ -4,3 +4,4 @@ import { SelectorProps } from './type';
|
|
|
4
4
|
import { HandlerRef } from '../useNodesRef';
|
|
5
5
|
declare const PickerSelector: React.ForwardRefExoticComponent<Omit<SelectorProps, "ref"> & React.RefAttributes<HandlerRef<View, SelectorProps>>>;
|
|
6
6
|
export default PickerSelector;
|
|
7
|
+
//# sourceMappingURL=selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selector.d.ts","sourceRoot":"","sources":["../../mpx-picker/selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,aAAa,EAAkB,MAAM,QAAQ,CAAA;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AA4B3C,QAAA,MAAM,cAAc,oHAqDlB,CAAA;AAGF,eAAe,cAAc,CAAA"}
|
|
@@ -4,3 +4,4 @@ import { TimeProps } from './type';
|
|
|
4
4
|
import { HandlerRef } from '../useNodesRef';
|
|
5
5
|
declare const PickerTime: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HandlerRef<View, TimeProps>>>;
|
|
6
6
|
export default PickerTime;
|
|
7
|
+
//# sourceMappingURL=time.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../mpx-picker/time.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuE,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAoB,IAAI,EAAE,MAAM,cAAc,CAAA;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGlC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAkE3C,QAAA,MAAM,UAAU,4GA2Ed,CAAA;AAGF,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../mpx-picker/type.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,7 @@ interface PickerViewProps {
|
|
|
21
21
|
style?: {
|
|
22
22
|
[key: string]: any;
|
|
23
23
|
};
|
|
24
|
+
'enable-wheel-animation'?: boolean;
|
|
24
25
|
'indicator-style'?: Record<string, any>;
|
|
25
26
|
'mask-style'?: Record<string, any>;
|
|
26
27
|
'enable-var'?: boolean;
|
|
@@ -29,3 +30,4 @@ interface PickerViewProps {
|
|
|
29
30
|
}
|
|
30
31
|
declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;
|
|
31
32
|
export default _PickerView;
|
|
33
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../mpx-picker-view/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,KAA4C,MAAM,OAAO,CAAA;AAEhE,OAAoB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAWxD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAC9C;;;;;;;;;;;GAWG;AAEH,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB,CAAA;IACD,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAyBD,QAAA,MAAM,WAAW,2GAsLf,CAAA;AAGF,eAAe,WAAW,CAAA"}
|
|
@@ -17,7 +17,7 @@ const styles = {
|
|
|
17
17
|
};
|
|
18
18
|
const DefaultPickerItemH = 36;
|
|
19
19
|
const _PickerView = forwardRef((props, ref) => {
|
|
20
|
-
const { children, value = [], bindchange, style, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
|
|
20
|
+
const { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
|
|
21
21
|
const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
|
|
22
22
|
const nodeRef = useRef(null);
|
|
23
23
|
const cloneRef = useRef(null);
|
|
@@ -67,7 +67,7 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
67
67
|
columnData,
|
|
68
68
|
ref: cloneRef,
|
|
69
69
|
columnIndex: index,
|
|
70
|
-
key: `pick-view-${index}`,
|
|
70
|
+
key: `pick-view-${index}-${columnData.length}`,
|
|
71
71
|
wrapperStyle: {
|
|
72
72
|
height: normalStyle?.height || DefaultPickerItemH,
|
|
73
73
|
itemHeight: indicatorH || DefaultPickerItemH
|
|
@@ -75,7 +75,8 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
75
75
|
onSelectChange: onSelectChange.bind(null, index),
|
|
76
76
|
initialIndex,
|
|
77
77
|
pickerIndicatorStyle,
|
|
78
|
-
pickerMaskStyle
|
|
78
|
+
pickerMaskStyle,
|
|
79
|
+
enableWheelAnimation
|
|
79
80
|
});
|
|
80
81
|
const realElement = React.cloneElement(child, wrappedProps);
|
|
81
82
|
return wrapChildren({
|
|
@@ -6,3 +6,4 @@ export declare const usePickerViewColumnAnimationContext: () => ContextValue;
|
|
|
6
6
|
export declare const PickerViewStyleContext: import("react").Context<Record<string, any> | undefined>;
|
|
7
7
|
export declare const usePickerViewStyleContext: () => Record<string, any> | undefined;
|
|
8
8
|
export {};
|
|
9
|
+
//# sourceMappingURL=pickerVIewContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pickerVIewContext.d.ts","sourceRoot":"","sources":["../../mpx-picker-view/pickerVIewContext.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,KAAK,YAAY,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;AAEvC,eAAO,MAAM,gCAAgC,mDAEjC,CAAA;AAEZ,eAAO,MAAM,mCAAmC,oBAQ/C,CAAA;AAED,eAAO,MAAM,sBAAsB,0DAEvB,CAAA;AAEZ,eAAO,MAAM,yBAAyB,uCAGrC,CAAA"}
|
|
@@ -17,6 +17,8 @@ interface ColumnProps {
|
|
|
17
17
|
};
|
|
18
18
|
pickerMaskStyle: Record<string, any>;
|
|
19
19
|
pickerIndicatorStyle: Record<string, any>;
|
|
20
|
+
enableWheelAnimation?: boolean;
|
|
20
21
|
}
|
|
21
22
|
declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
|
|
22
23
|
export default _PickerViewColumn;
|
|
24
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../mpx-picker-view-column/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuF,MAAM,OAAO,CAAA;AAC3G,OAAO,EAAqF,UAAU,EAAc,IAAI,EAAE,MAAM,cAAc,CAAA;AAG9I,OAAoB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAQxD,UAAU,WAAW;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7B,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,QAAQ,CAAA;IACxB,KAAK,EAAE;QACL,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB,CAAA;IACD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5C,YAAY,EAAE;QACZ,MAAM,EAAE,MAAM,CAAA;QACd,UAAU,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAID,QAAA,MAAM,iBAAiB,gHA0UrB,CAAA;AAQF,eAAe,iBAAiB,CAAA"}
|
|
@@ -5,12 +5,13 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
|
|
|
5
5
|
import useNodesRef from '../useNodesRef';
|
|
6
6
|
import PickerIndicator from './pickerViewIndicator';
|
|
7
7
|
import PickerMask from './pickerViewMask';
|
|
8
|
-
import
|
|
8
|
+
import MpxPickerViewColumnItem from './pickerViewColumnItem';
|
|
9
|
+
import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite';
|
|
9
10
|
import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext';
|
|
10
11
|
import { calcHeightOffsets } from './pickerViewFaces';
|
|
11
12
|
const visibleCount = 5;
|
|
12
13
|
const _PickerViewColumn = forwardRef((props, ref) => {
|
|
13
|
-
const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
|
|
14
|
+
const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
|
|
14
15
|
const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
|
|
15
16
|
const { textStyle = {} } = splitStyle(normalStyle);
|
|
16
17
|
const { textProps = {} } = splitProps(props);
|
|
@@ -43,6 +44,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
43
44
|
const contentContainerStyle = useMemo(() => {
|
|
44
45
|
return [{ paddingVertical: paddingHeight }];
|
|
45
46
|
}, [paddingHeight]);
|
|
47
|
+
const initialContentOffsetY = useMemo(() => initialIndex * itemRawH, [initialIndex, itemRawH]);
|
|
46
48
|
const getIndex = useCallback((y) => {
|
|
47
49
|
const calc = Math.round(y / itemRawH);
|
|
48
50
|
return Math.max(0, Math.min(calc, maxIndex));
|
|
@@ -92,16 +94,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
92
94
|
activeIndex.current = initialIndex;
|
|
93
95
|
}, isIOS ? 0 : 200);
|
|
94
96
|
}, [itemRawH, maxIndex, initialIndex]);
|
|
95
|
-
const onContentSizeChange = useCallback((_w, h) => {
|
|
96
|
-
const y = initialIndex * itemRawH;
|
|
97
|
-
if (y <= h) {
|
|
98
|
-
clearTimerScrollTo();
|
|
99
|
-
timerScrollTo.current = setTimeout(() => {
|
|
100
|
-
scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
|
|
101
|
-
activeIndex.current = initialIndex;
|
|
102
|
-
}, 0);
|
|
103
|
-
}
|
|
104
|
-
}, [itemRawH, initialIndex]);
|
|
105
97
|
const onItemLayout = useCallback((e) => {
|
|
106
98
|
const { height: rawH } = e.nativeEvent.layout;
|
|
107
99
|
const roundedH = Math.round(rawH);
|
|
@@ -157,8 +149,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
157
149
|
}, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
|
|
158
150
|
const onScroll = useCallback((e) => {
|
|
159
151
|
// 全局注册的振动触感 hook
|
|
160
|
-
const
|
|
161
|
-
if (typeof
|
|
152
|
+
const onPickerVibrate = global.__mpx?.config?.rnConfig?.onPickerVibrate;
|
|
153
|
+
if (typeof onPickerVibrate !== 'function') {
|
|
162
154
|
return;
|
|
163
155
|
}
|
|
164
156
|
const { y } = e.nativeEvent.contentOffset;
|
|
@@ -172,7 +164,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
172
164
|
y: currentId * itemRawH
|
|
173
165
|
};
|
|
174
166
|
// vibrateShort({ type: 'selection' })
|
|
175
|
-
|
|
167
|
+
onPickerVibrate();
|
|
176
168
|
}
|
|
177
169
|
}
|
|
178
170
|
}
|
|
@@ -217,7 +209,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
217
209
|
}
|
|
218
210
|
}, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd]);
|
|
219
211
|
const renderInnerchild = () => columnData.map((item, index) => {
|
|
220
|
-
return
|
|
212
|
+
return enableWheelAnimation
|
|
213
|
+
? (<MpxPickerViewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>)
|
|
214
|
+
: (<MpxPickerViewColumnItemLite key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} onItemLayout={onItemLayout}/>);
|
|
221
215
|
});
|
|
222
216
|
const renderScollView = () => {
|
|
223
217
|
const innerProps = extendObject({}, layoutProps, {
|
|
@@ -238,17 +232,17 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
238
232
|
onScrollEndDrag,
|
|
239
233
|
onMomentumScrollBegin,
|
|
240
234
|
onMomentumScrollEnd,
|
|
241
|
-
|
|
242
|
-
|
|
235
|
+
contentContainerStyle,
|
|
236
|
+
contentOffset: { x: 0, y: initialContentOffsetY }
|
|
243
237
|
});
|
|
244
238
|
return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, renderInnerchild()));
|
|
245
239
|
};
|
|
246
240
|
const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
|
|
247
241
|
const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
|
|
248
242
|
return (<View style={[styles.wrapper, normalStyle]}>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
243
|
+
{renderScollView()}
|
|
244
|
+
{renderMask()}
|
|
245
|
+
{renderIndicator()}
|
|
252
246
|
</View>);
|
|
253
247
|
});
|
|
254
248
|
const styles = StyleSheet.create({
|