@mpxjs/webpack-plugin 2.10.14-beta.7 → 2.10.14-beta.8
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/style/wx/index.js +7 -1
- package/lib/runtime/components/react/dist/context.d.ts +5 -3
- package/lib/runtime/components/react/dist/context.js +1 -1
- package/lib/runtime/components/react/dist/event.config.d.ts +0 -1
- package/lib/runtime/components/react/dist/getInnerListeners.d.ts +0 -1
- package/lib/runtime/components/react/dist/getInnerListeners.js +21 -35
- package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-async-suspense.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-button.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/Image.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/html.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-checkbox.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-form.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-icon/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-image.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-image.jsx +37 -81
- package/lib/runtime/components/react/dist/mpx-inline-text.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-input.d.ts +0 -2
- package/lib/runtime/components/react/dist/mpx-input.jsx +12 -19
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx +21 -12
- package/lib/runtime/components/react/dist/mpx-label.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-movable-area.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-movable-view.d.ts +2 -5
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +34 -102
- package/lib/runtime/components/react/dist/mpx-nav-container.d.ts +9 -0
- package/lib/runtime/components/react/dist/mpx-nav-container.jsx +23 -0
- package/lib/runtime/components/react/dist/mpx-navigator.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/date.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/region.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/time.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/type.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts +0 -2
- package/lib/runtime/components/react/dist/mpx-picker-view/index.jsx +3 -4
- package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts +0 -2
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.jsx +21 -15
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.jsx +11 -8
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-popup/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/index.jsx +1 -5
- package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/portal-manager.jsx +5 -3
- package/lib/runtime/components/react/dist/mpx-radio-group.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-radio.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-rich-text/html.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-root-portal.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-scroll-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +51 -69
- package/lib/runtime/components/react/dist/mpx-simple-text.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-simple-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +16 -9
- package/lib/runtime/components/react/dist/mpx-switch.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-text.d.ts +1 -3
- package/lib/runtime/components/react/dist/mpx-text.jsx +5 -33
- package/lib/runtime/components/react/dist/mpx-textarea.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-video.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-web-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-web-view.jsx +2 -21
- package/lib/runtime/components/react/dist/{mpx-nav.d.ts → nav.d.ts} +0 -1
- package/lib/runtime/components/react/dist/{mpx-nav.jsx → nav.jsx} +6 -1
- package/lib/runtime/components/react/dist/parser.d.ts +0 -1
- package/lib/runtime/components/react/dist/useAnimationHooks.d.ts +0 -1
- package/lib/runtime/components/react/dist/useNavShared.d.ts +2 -0
- package/lib/runtime/components/react/dist/useNavShared.js +6 -0
- package/lib/runtime/components/react/dist/useNodesRef.d.ts +0 -1
- package/lib/runtime/components/react/dist/utils.d.ts +0 -1
- package/lib/runtime/components/react/dist/utils.jsx +6 -16
- package/lib/runtime/components/react/mpx-view.tsx +1 -1
- package/package.json +1 -1
- package/lib/runtime/components/react/dist/context.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/event.config.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/getInnerListeners.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-button.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-camera.d.ts +0 -27
- package/lib/runtime/components/react/dist/mpx-camera.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-camera.jsx +0 -197
- package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/Image.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/html.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-checkbox.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-form.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-icon/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-image.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-inline-text.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-input.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-label.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-movable-area.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-movable-view.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-nav.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-navigator.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/date.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/region.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/time.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker/type.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.d.ts +0 -14
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.jsx +0 -20
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-popup/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-progress.d.ts +0 -24
- package/lib/runtime/components/react/dist/mpx-progress.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-progress.jsx +0 -163
- package/lib/runtime/components/react/dist/mpx-radio-group.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-radio.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-rich-text/html.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-root-portal.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-scroll-view.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-simple-text.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-simple-view.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-slider.d.ts +0 -31
- package/lib/runtime/components/react/dist/mpx-slider.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-slider.jsx +0 -321
- package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-switch.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-text.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-textarea.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-video.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-view.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/mpx-web-view.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/parser.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/useAnimationHooks.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/useNodesRef.d.ts.map +0 -1
- package/lib/runtime/components/react/dist/utils.d.ts.map +0 -1
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* eslint-disable space-before-function-paren */
|
|
2
1
|
import React, { useContext, useEffect, useRef } from 'react';
|
|
3
2
|
import { Keyboard, View } from 'react-native';
|
|
4
3
|
import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
|
|
@@ -12,8 +11,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
|
|
|
12
11
|
const keyboardAvoid = useContext(KeyboardAvoidContext);
|
|
13
12
|
// fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow,
|
|
14
13
|
// 比如机型 iPhone 11 Pro,可能会导致显隐动画冲突
|
|
15
|
-
// 因此增加状态标记 + cancelAnimation 来优化
|
|
14
|
+
// 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
|
|
16
15
|
const isShow = useRef(false);
|
|
16
|
+
const timerRef = useRef(null);
|
|
17
17
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
18
18
|
// translate/position top可能会导致底部渲染区域缺失
|
|
19
19
|
marginTop: -offset.value,
|
|
@@ -24,6 +24,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
|
|
|
24
24
|
return;
|
|
25
25
|
}
|
|
26
26
|
isShow.current = false;
|
|
27
|
+
timerRef.current && clearTimeout(timerRef.current);
|
|
27
28
|
if (keyboardAvoid?.current) {
|
|
28
29
|
const inputRef = keyboardAvoid.current.ref?.current;
|
|
29
30
|
if (inputRef && inputRef.isFocused()) {
|
|
@@ -38,19 +39,19 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
|
|
|
38
39
|
};
|
|
39
40
|
const onTouchEnd = ({ nativeEvent }) => {
|
|
40
41
|
if (nativeEvent.origin !== 'input') {
|
|
41
|
-
if (keyboardAvoid?.current?.holdKeyboard) {
|
|
42
|
-
return;
|
|
43
|
-
}
|
|
44
42
|
Keyboard.isVisible() && Keyboard.dismiss();
|
|
45
43
|
}
|
|
46
44
|
};
|
|
47
45
|
useEffect(() => {
|
|
48
46
|
let subscriptions = [];
|
|
49
|
-
function keybaordAvoding(evt) {
|
|
47
|
+
function keybaordAvoding(evt, ios = false) {
|
|
50
48
|
if (!keyboardAvoid?.current || isShow.current) {
|
|
51
49
|
return;
|
|
52
50
|
}
|
|
53
51
|
isShow.current = true;
|
|
52
|
+
if (ios) {
|
|
53
|
+
timerRef.current && clearTimeout(timerRef.current);
|
|
54
|
+
}
|
|
54
55
|
const { endCoordinates } = evt;
|
|
55
56
|
const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
|
|
56
57
|
keyboardAvoid.current.keyboardHeight = endCoordinates.height;
|
|
@@ -63,10 +64,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
|
|
|
63
64
|
function calculateOffset() {
|
|
64
65
|
// enableNativeKeyboardAvoding 默认开启
|
|
65
66
|
if (enableNativeKeyboardAvoiding && isAndroid) {
|
|
66
|
-
const aboveOffset = pageY + height - endCoordinates.screenY;
|
|
67
|
-
const belowOffset = endCoordinates.height - aboveOffset;
|
|
67
|
+
const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
|
|
68
68
|
const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
|
|
69
|
-
const belowValue = Math.min(
|
|
69
|
+
const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
|
|
70
70
|
return aboveOffset > 0 ? belowValue : aboveValue;
|
|
71
71
|
}
|
|
72
72
|
const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
|
|
@@ -83,17 +83,26 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
|
|
|
83
83
|
});
|
|
84
84
|
});
|
|
85
85
|
};
|
|
86
|
-
(isIOS ? () => setTimeout(callback) : callback)();
|
|
86
|
+
(isIOS ? () => (timerRef.current = setTimeout(callback)) : callback)();
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
if (isIOS) {
|
|
90
|
-
subscriptions = [
|
|
90
|
+
subscriptions = [
|
|
91
|
+
Keyboard.addListener('keyboardWillShow', (evt) => {
|
|
92
|
+
keybaordAvoding(evt, true);
|
|
93
|
+
}),
|
|
94
|
+
Keyboard.addListener('keyboardWillHide', resetKeyboard)
|
|
95
|
+
];
|
|
91
96
|
}
|
|
92
97
|
else {
|
|
93
|
-
subscriptions = [
|
|
98
|
+
subscriptions = [
|
|
99
|
+
Keyboard.addListener('keyboardDidShow', keybaordAvoding),
|
|
100
|
+
Keyboard.addListener('keyboardDidHide', resetKeyboard)
|
|
101
|
+
];
|
|
94
102
|
}
|
|
95
103
|
return () => {
|
|
96
104
|
subscriptions.forEach(subscription => subscription.remove());
|
|
105
|
+
timerRef.current && clearTimeout(timerRef.current);
|
|
97
106
|
};
|
|
98
107
|
}, [keyboardAvoid]);
|
|
99
108
|
return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
|
|
@@ -18,4 +18,3 @@ interface MovableAreaProps {
|
|
|
18
18
|
}
|
|
19
19
|
declare const _MovableArea: import("react").ForwardRefExoticComponent<MovableAreaProps & import("react").RefAttributes<HandlerRef<View, MovableAreaProps>>>;
|
|
20
20
|
export default _MovableArea;
|
|
21
|
-
//# sourceMappingURL=mpx-movable-area.d.ts.map
|
|
@@ -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
|
|
@@ -30,8 +30,6 @@ interface MovableViewProps {
|
|
|
30
30
|
y?: number;
|
|
31
31
|
disabled?: boolean;
|
|
32
32
|
animation?: boolean;
|
|
33
|
-
damping?: number;
|
|
34
|
-
friction?: number;
|
|
35
33
|
id?: string;
|
|
36
34
|
changeThrottleTime?: number;
|
|
37
35
|
bindchange?: (event: unknown) => void;
|
|
@@ -63,4 +61,3 @@ interface MovableViewProps {
|
|
|
63
61
|
}
|
|
64
62
|
declare const _MovableView: import("react").ForwardRefExoticComponent<MovableViewProps & import("react").RefAttributes<HandlerRef<View, MovableViewProps>>>;
|
|
65
63
|
export default _MovableView;
|
|
66
|
-
//# sourceMappingURL=mpx-movable-view.d.ts.map
|
|
@@ -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,96 +24,8 @@ 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, runOnJS, runOnUI,
|
|
27
|
+
import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring } 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
|
-
};
|
|
117
29
|
const styles = StyleSheet.create({
|
|
118
30
|
container: {
|
|
119
31
|
position: 'absolute',
|
|
@@ -129,7 +41,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
129
41
|
const hasLayoutRef = useRef(false);
|
|
130
42
|
const propsRef = useRef({});
|
|
131
43
|
propsRef.current = (props || {});
|
|
132
|
-
const { x = 0, y = 0, inertia = false, disabled = false, animation = true,
|
|
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;
|
|
133
45
|
const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
|
|
134
46
|
const navigation = useNavigation();
|
|
135
47
|
const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
|
|
@@ -194,12 +106,18 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
194
106
|
const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) });
|
|
195
107
|
if (direction === 'horizontal' || direction === 'all') {
|
|
196
108
|
offsetX.value = animation
|
|
197
|
-
?
|
|
109
|
+
? withSpring(newX, {
|
|
110
|
+
duration: 1500,
|
|
111
|
+
dampingRatio: 0.8
|
|
112
|
+
})
|
|
198
113
|
: newX;
|
|
199
114
|
}
|
|
200
115
|
if (direction === 'vertical' || direction === 'all') {
|
|
201
116
|
offsetY.value = animation
|
|
202
|
-
?
|
|
117
|
+
? withSpring(newY, {
|
|
118
|
+
duration: 1500,
|
|
119
|
+
dampingRatio: 0.8
|
|
120
|
+
})
|
|
203
121
|
: newY;
|
|
204
122
|
}
|
|
205
123
|
if (bindchange) {
|
|
@@ -375,7 +293,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
375
293
|
triggerEndOnJS
|
|
376
294
|
});
|
|
377
295
|
const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
|
|
378
|
-
// 节流版本的change事件触发
|
|
296
|
+
// 节流版本的 change 事件触发
|
|
379
297
|
const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
|
|
380
298
|
'worklet';
|
|
381
299
|
const now = Date.now();
|
|
@@ -439,7 +357,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
439
357
|
offsetX.value = x;
|
|
440
358
|
}
|
|
441
359
|
else {
|
|
442
|
-
offsetX.value =
|
|
360
|
+
offsetX.value = newX;
|
|
443
361
|
}
|
|
444
362
|
}
|
|
445
363
|
if (direction === 'vertical' || direction === 'all') {
|
|
@@ -449,7 +367,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
449
367
|
offsetY.value = y;
|
|
450
368
|
}
|
|
451
369
|
else {
|
|
452
|
-
offsetY.value =
|
|
370
|
+
offsetY.value = newY;
|
|
453
371
|
}
|
|
454
372
|
}
|
|
455
373
|
if (bindchange) {
|
|
@@ -479,12 +397,18 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
479
397
|
if (x !== offsetX.value || y !== offsetY.value) {
|
|
480
398
|
if (x !== offsetX.value) {
|
|
481
399
|
offsetX.value = animation
|
|
482
|
-
?
|
|
400
|
+
? withSpring(x, {
|
|
401
|
+
duration: 1500,
|
|
402
|
+
dampingRatio: 0.8
|
|
403
|
+
})
|
|
483
404
|
: x;
|
|
484
405
|
}
|
|
485
406
|
if (y !== offsetY.value) {
|
|
486
407
|
offsetY.value = animation
|
|
487
|
-
?
|
|
408
|
+
? withSpring(y, {
|
|
409
|
+
duration: 1500,
|
|
410
|
+
dampingRatio: 0.8
|
|
411
|
+
})
|
|
488
412
|
: y;
|
|
489
413
|
}
|
|
490
414
|
if (bindchange) {
|
|
@@ -496,10 +420,14 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
496
420
|
}
|
|
497
421
|
}
|
|
498
422
|
else if (inertia) {
|
|
499
|
-
// 惯性处理
|
|
423
|
+
// 惯性处理
|
|
500
424
|
if (direction === 'horizontal' || direction === 'all') {
|
|
501
425
|
xInertialMotion.value = true;
|
|
502
|
-
offsetX.value =
|
|
426
|
+
offsetX.value = withDecay({
|
|
427
|
+
velocity: e.velocityX / 10,
|
|
428
|
+
rubberBandEffect: outOfBounds,
|
|
429
|
+
clamp: draggableXRange.value
|
|
430
|
+
}, () => {
|
|
503
431
|
xInertialMotion.value = false;
|
|
504
432
|
if (bindchange) {
|
|
505
433
|
runOnJS(runOnJSCallback)('handleTriggerChange', {
|
|
@@ -511,7 +439,11 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
511
439
|
}
|
|
512
440
|
if (direction === 'vertical' || direction === 'all') {
|
|
513
441
|
yInertialMotion.value = true;
|
|
514
|
-
offsetY.value =
|
|
442
|
+
offsetY.value = withDecay({
|
|
443
|
+
velocity: e.velocityY / 10,
|
|
444
|
+
rubberBandEffect: outOfBounds,
|
|
445
|
+
clamp: draggableYRange.value
|
|
446
|
+
}, () => {
|
|
515
447
|
yInertialMotion.value = false;
|
|
516
448
|
if (bindchange) {
|
|
517
449
|
runOnJS(runOnJSCallback)('handleTriggerChange', {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface MpxNavContainerProps {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
}
|
|
5
|
+
export default function MpxNavContainer(props: MpxNavContainerProps): import("react").ReactNode;
|
|
6
|
+
export declare function NavSharedProvider({ children }: {
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}): import("react").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { useNavShared } from './useNavShared';
|
|
2
|
+
import { NavSharedContext } from './context';
|
|
3
|
+
import { useLayoutEffect, useMemo, useState } from 'react';
|
|
4
|
+
import { isAndroid } from './utils';
|
|
5
|
+
export default function MpxNavContainer(props) {
|
|
6
|
+
const [, setCustomNav] = useNavShared();
|
|
7
|
+
useLayoutEffect(() => {
|
|
8
|
+
if (!isAndroid)
|
|
9
|
+
return;
|
|
10
|
+
if (props.children) {
|
|
11
|
+
setCustomNav(props.children);
|
|
12
|
+
}
|
|
13
|
+
return () => {
|
|
14
|
+
setCustomNav(undefined);
|
|
15
|
+
};
|
|
16
|
+
}, [props.children]);
|
|
17
|
+
return isAndroid ? null : props.children;
|
|
18
|
+
}
|
|
19
|
+
export function NavSharedProvider({ children }) {
|
|
20
|
+
const [customNav, setCustomNav] = useState();
|
|
21
|
+
const value = useMemo(() => ({ customNav, setCustomNav }), [customNav]);
|
|
22
|
+
return <NavSharedContext.Provider value={value}>{children}</NavSharedContext.Provider>;
|
|
23
|
+
}
|
|
@@ -4,4 +4,3 @@ 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
|
|
@@ -5,4 +5,3 @@ 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
|
|
@@ -4,4 +4,3 @@ 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
|
|
@@ -4,4 +4,3 @@ 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
|
|
@@ -4,4 +4,3 @@ 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
|
|
@@ -4,4 +4,3 @@ 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
|
|
@@ -4,4 +4,3 @@ 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
|
|
@@ -21,7 +21,6 @@ interface PickerViewProps {
|
|
|
21
21
|
style?: {
|
|
22
22
|
[key: string]: any;
|
|
23
23
|
};
|
|
24
|
-
'enable-wheel-animation'?: boolean;
|
|
25
24
|
'indicator-style'?: Record<string, any>;
|
|
26
25
|
'mask-style'?: Record<string, any>;
|
|
27
26
|
'enable-var'?: boolean;
|
|
@@ -30,4 +29,3 @@ interface PickerViewProps {
|
|
|
30
29
|
}
|
|
31
30
|
declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;
|
|
32
31
|
export default _PickerView;
|
|
33
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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, '
|
|
20
|
+
const { children, value = [], bindchange, style, '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}`,
|
|
71
71
|
wrapperStyle: {
|
|
72
72
|
height: normalStyle?.height || DefaultPickerItemH,
|
|
73
73
|
itemHeight: indicatorH || DefaultPickerItemH
|
|
@@ -75,8 +75,7 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
75
75
|
onSelectChange: onSelectChange.bind(null, index),
|
|
76
76
|
initialIndex,
|
|
77
77
|
pickerIndicatorStyle,
|
|
78
|
-
pickerMaskStyle
|
|
79
|
-
enableWheelAnimation
|
|
78
|
+
pickerMaskStyle
|
|
80
79
|
});
|
|
81
80
|
const realElement = React.cloneElement(child, wrappedProps);
|
|
82
81
|
return wrapChildren({
|
|
@@ -6,4 +6,3 @@ 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
|
|
@@ -17,8 +17,6 @@ interface ColumnProps {
|
|
|
17
17
|
};
|
|
18
18
|
pickerMaskStyle: Record<string, any>;
|
|
19
19
|
pickerIndicatorStyle: Record<string, any>;
|
|
20
|
-
enableWheelAnimation?: boolean;
|
|
21
20
|
}
|
|
22
21
|
declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
|
|
23
22
|
export default _PickerViewColumn;
|
|
24
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -5,13 +5,12 @@ 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
|
|
9
|
-
import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite';
|
|
8
|
+
import MpxPickerVIewColumnItem from './pickerViewColumnItem';
|
|
10
9
|
import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext';
|
|
11
10
|
import { calcHeightOffsets } from './pickerViewFaces';
|
|
12
11
|
const visibleCount = 5;
|
|
13
12
|
const _PickerViewColumn = forwardRef((props, ref) => {
|
|
14
|
-
const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle,
|
|
13
|
+
const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
|
|
15
14
|
const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
|
|
16
15
|
const { textStyle = {} } = splitStyle(normalStyle);
|
|
17
16
|
const { textProps = {} } = splitProps(props);
|
|
@@ -44,7 +43,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
44
43
|
const contentContainerStyle = useMemo(() => {
|
|
45
44
|
return [{ paddingVertical: paddingHeight }];
|
|
46
45
|
}, [paddingHeight]);
|
|
47
|
-
const initialContentOffsetY = useMemo(() => initialIndex * itemRawH, [initialIndex, itemRawH]);
|
|
48
46
|
const getIndex = useCallback((y) => {
|
|
49
47
|
const calc = Math.round(y / itemRawH);
|
|
50
48
|
return Math.max(0, Math.min(calc, maxIndex));
|
|
@@ -94,6 +92,16 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
94
92
|
activeIndex.current = initialIndex;
|
|
95
93
|
}, isIOS ? 0 : 200);
|
|
96
94
|
}, [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]);
|
|
97
105
|
const onItemLayout = useCallback((e) => {
|
|
98
106
|
const { height: rawH } = e.nativeEvent.layout;
|
|
99
107
|
const roundedH = Math.round(rawH);
|
|
@@ -149,8 +157,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
149
157
|
}, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
|
|
150
158
|
const onScroll = useCallback((e) => {
|
|
151
159
|
// 全局注册的振动触感 hook
|
|
152
|
-
const
|
|
153
|
-
if (typeof
|
|
160
|
+
const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
|
|
161
|
+
if (typeof pickerVibrate !== 'function') {
|
|
154
162
|
return;
|
|
155
163
|
}
|
|
156
164
|
const { y } = e.nativeEvent.contentOffset;
|
|
@@ -164,7 +172,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
164
172
|
y: currentId * itemRawH
|
|
165
173
|
};
|
|
166
174
|
// vibrateShort({ type: 'selection' })
|
|
167
|
-
|
|
175
|
+
pickerVibrate();
|
|
168
176
|
}
|
|
169
177
|
}
|
|
170
178
|
}
|
|
@@ -209,9 +217,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
209
217
|
}
|
|
210
218
|
}, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd]);
|
|
211
219
|
const renderInnerchild = () => columnData.map((item, index) => {
|
|
212
|
-
return
|
|
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}/>);
|
|
220
|
+
return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
|
|
215
221
|
});
|
|
216
222
|
const renderScollView = () => {
|
|
217
223
|
const innerProps = extendObject({}, layoutProps, {
|
|
@@ -232,17 +238,17 @@ const _PickerViewColumn = forwardRef((props, ref) => {
|
|
|
232
238
|
onScrollEndDrag,
|
|
233
239
|
onMomentumScrollBegin,
|
|
234
240
|
onMomentumScrollEnd,
|
|
235
|
-
|
|
236
|
-
|
|
241
|
+
onContentSizeChange,
|
|
242
|
+
contentContainerStyle
|
|
237
243
|
});
|
|
238
244
|
return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, renderInnerchild()));
|
|
239
245
|
};
|
|
240
246
|
const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
|
|
241
247
|
const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
|
|
242
248
|
return (<View style={[styles.wrapper, normalStyle]}>
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
249
|
+
{renderScollView()}
|
|
250
|
+
{renderMask()}
|
|
251
|
+
{renderIndicator()}
|
|
246
252
|
</View>);
|
|
247
253
|
});
|
|
248
254
|
const styles = StyleSheet.create({
|
|
@@ -1,20 +1,23 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
|
|
3
3
|
import { extendObject } from '../utils';
|
|
4
4
|
import { createFaces } from './pickerViewFaces';
|
|
5
5
|
import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext';
|
|
6
6
|
const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, visibleCount, onItemLayout }) => {
|
|
7
7
|
const textStyleFromAncestor = usePickerViewStyleContext();
|
|
8
8
|
const offsetYShared = usePickerViewColumnAnimationContext();
|
|
9
|
-
const facesShared =
|
|
9
|
+
const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
facesShared.value = createFaces(itemHeight, visibleCount);
|
|
12
|
+
}, [itemHeight]);
|
|
10
13
|
const animatedStyles = useAnimatedStyle(() => {
|
|
11
|
-
const inputRange = facesShared.map((f) => itemHeight * (index + f.index));
|
|
14
|
+
const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
|
|
12
15
|
return {
|
|
13
|
-
opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
|
|
16
|
+
opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
|
|
14
17
|
transform: [
|
|
15
|
-
{ translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
|
|
16
|
-
{ rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
|
|
17
|
-
{ scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
|
|
18
|
+
{ translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
|
|
19
|
+
{ rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
|
|
20
|
+
{ scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
|
|
18
21
|
]
|
|
19
22
|
};
|
|
20
23
|
});
|
|
@@ -14,4 +14,3 @@ export declare const degToRad: (deg: number) => number;
|
|
|
14
14
|
export declare const calcPickerHeight: (faces: Faces[], itemHeight: number) => number;
|
|
15
15
|
export declare const calcHeightOffsets: (itemHeight: number) => number[];
|
|
16
16
|
export declare const createFaces: (itemHeight: number, visibleCount: number) => Faces[];
|
|
17
|
-
//# sourceMappingURL=pickerViewFaces.d.ts.map
|