@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.3

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+type KeyboardAvoidViewProps = {
+    children?: ReactNode;
+    style?: ViewStyle;
+    contentContainerStyle?: ViewStyle;
+};
+declare const KeyboardAvoidingView: {
+    ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps): React.JSX.Element;
+    displayName: string;
+};
+export default KeyboardAvoidingView;

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx

@@ -1,20 +1,31 @@
 import React, { useContext, useEffect } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
+    const isShow = React.useRef(false);
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
     const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: -offset.value }],
+        // translate/position top可能会导致地步渲染区域缺失
+        marginTop: -offset.value,
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
         if (keyboardAvoid?.current) {
+            const inputRef = keyboardAvoid.current.ref?.current;
+            if (inputRef && inputRef.isFocused()) {
+                // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+                inputRef.blur();
+            }
             keyboardAvoid.current = null;
         }
         offset.value = withTiming(0, { duration, easing });
@@ -27,52 +38,42 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     };
     useEffect(() => {
         let subscriptions = [];
-        if (isIOS) {
-            subscriptions = [
-                Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
-                        return;
-                    const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    setTimeout(() => {
-                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
-                            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                            const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
-                            const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing }, (finished) => {
-                                if (finished) {
-                                    // Set flexBasic after animation to trigger re-layout and reset layout information
-                                    basic.value = '99.99%';
-                                }
-                            });
-                        });
-                    });
-                }),
-                Keyboard.addListener('keyboardWillHide', resetKeyboard)
-            ];
-        }
-        else {
-            subscriptions = [
-                Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
-                        return;
-                    const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
+        function keybaordAvoding(evt) {
+            if (!keyboardAvoid?.current || isShow.current) {
+                return;
+            }
+            isShow.current = true;
+            const { endCoordinates } = evt;
+            const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
+            keyboardAvoid.current.keyboardHeight = endCoordinates.height;
+            onKeyboardShow?.();
+            if (adjustPosition) {
+                setTimeout(() => {
                     ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                        const aboveOffset = pageY + height - endCoordinates.screenY;
-                        const belowOffset = endCoordinates.height - aboveOffset;
+                        const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                         const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                        const belowValue = Math.min(belowOffset, cursorSpacing);
+                        const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
-                        offset.value = withTiming(value, { duration, easing }, (finished) => {
+                        cancelAnimation(offset);
+                        offset.value = withTiming(value, { duration, easing }, finished => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
                     });
-                }),
+                });
+            }
+        }
+        if (isIOS) {
+            subscriptions = [
+                Keyboard.addListener('keyboardWillShow', keybaordAvoding),
+                Keyboard.addListener('keyboardWillHide', resetKeyboard)
+            ];
+        }
+        else {
+            subscriptions = [
+                Keyboard.addListener('keyboardDidShow', keybaordAvoding),
                 Keyboard.addListener('keyboardDidHide', resetKeyboard)
             ];
         }
@@ -80,13 +81,8 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View style={[
-            contentContainerStyle,
-            animatedStyle
-        ]}>
-        {children}
-      </Animated.View>
+    return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';

package/lib/runtime/components/react/dist/mpx-label.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ✘ for
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface LabelProps {
+    for?: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HandlerRef<View, LabelProps>>>;
+export default Label;

package/lib/runtime/components/react/dist/mpx-movable-area.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ✘ scale-area
+ */
+import { View } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface MovableAreaProps {
+    style?: Record<string, any>;
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _MovableArea: import("react").ForwardRefExoticComponent<MovableAreaProps & import("react").RefAttributes<HandlerRef<View, MovableAreaProps>>>;
+export default _MovableArea;

package/lib/runtime/components/react/dist/mpx-movable-view.d.ts

@@ -0,0 +1,63 @@
+/**
+ * ✔ direction
+ * ✔ inertia
+ * ✔ out-of-bounds
+ * ✔ x
+ * ✔ y
+ * ✘ damping
+ * ✘ friction
+ * ✔ disabled
+ * ✘ scale
+ * ✘ scale-min
+ * ✘ scale-max
+ * ✘ scale-value
+ * ✔ animation
+ * ✔ bindchange
+ * ✘ bindscale
+ * ✔ htouchmove
+ * ✔ vtouchmove
+ */
+import { ReactNode } from 'react';
+import { View, LayoutChangeEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+import { GestureHandler } from './utils';
+import { GestureTouchEvent } from 'react-native-gesture-handler';
+interface MovableViewProps {
+    children: ReactNode;
+    style?: Record<string, any>;
+    direction: 'all' | 'vertical' | 'horizontal' | 'none';
+    x?: number;
+    y?: number;
+    disabled?: boolean;
+    animation?: boolean;
+    id?: string;
+    changeThrottleTime?: number;
+    bindchange?: (event: unknown) => void;
+    bindtouchstart?: (event: GestureTouchEvent) => void;
+    catchtouchstart?: (event: GestureTouchEvent) => void;
+    bindtouchmove?: (event: GestureTouchEvent) => void;
+    catchtouchmove?: (event: GestureTouchEvent) => void;
+    catchtouchend?: (event: GestureTouchEvent) => void;
+    bindtouchend?: (event: GestureTouchEvent) => void;
+    bindhtouchmove?: (event: GestureTouchEvent) => void;
+    bindvtouchmove?: (event: GestureTouchEvent) => void;
+    catchhtouchmove?: (event: GestureTouchEvent) => void;
+    catchvtouchmove?: (event: GestureTouchEvent) => void;
+    bindlongpress?: (event: GestureTouchEvent) => void;
+    catchlongpress?: (event: GestureTouchEvent) => void;
+    bindtap?: (event: GestureTouchEvent) => void;
+    catchtap?: (event: GestureTouchEvent) => void;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    'out-of-bounds'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    inertia?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'disable-event-passthrough'?: boolean;
+}
+declare const _MovableView: import("react").ForwardRefExoticComponent<MovableViewProps & import("react").RefAttributes<HandlerRef<View, MovableViewProps>>>;
+export default _MovableView;

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -41,7 +41,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    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', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
+    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;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
@@ -449,11 +449,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         })
             .withRef(movableGestureRef);
-        if (direction === 'horizontal') {
-            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
-        }
-        else if (direction === 'vertical') {
-            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        if (!disableEventPassthrough) {
+            if (direction === 'horizontal') {
+                gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+            }
+            else if (direction === 'vertical') {
+                gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+            }
         }
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);

package/lib/runtime/components/react/dist/mpx-nav-container.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface MpxNavContainerProps {
+    children?: React.ReactNode;
+}
+export default function MpxNavContainer(props: MpxNavContainerProps): import("react").ReactNode;
+export declare function NavSharedProvider({ children }: {
+    children?: React.ReactNode;
+}): import("react").JSX.Element;
+export {};

package/lib/runtime/components/react/dist/mpx-nav-container.jsx

@@ -0,0 +1,23 @@
+import { useNavShared } from './useNavShared';
+import { NavSharedContext } from './context';
+import { useLayoutEffect, useMemo, useState } from 'react';
+import { isAndroid } from './utils';
+export default function MpxNavContainer(props) {
+    const [, setCustomNav] = useNavShared();
+    useLayoutEffect(() => {
+        if (!isAndroid)
+            return;
+        if (props.children) {
+            setCustomNav(props.children);
+        }
+        return () => {
+            setCustomNav(undefined);
+        };
+    }, [props.children]);
+    return isAndroid ? null : props.children;
+}
+export function NavSharedProvider({ children }) {
+    const [customNav, setCustomNav] = useState();
+    const value = useMemo(() => ({ customNav, setCustomNav }), [customNav]);
+    return <NavSharedContext.Provider value={value}>{children}</NavSharedContext.Provider>;
+}

package/lib/runtime/components/react/dist/mpx-navigator.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { _ViewProps } from './mpx-view';
+interface _NavigatorProps extends _ViewProps {
+    ['open-type']: 'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack';
+    url: string;
+    delta: number;
+}
+declare const _Navigator: import("react").ForwardRefExoticComponent<_NavigatorProps & import("react").RefAttributes<any>>;
+export default _Navigator;

package/lib/runtime/components/react/dist/mpx-page-container.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type Position = 'top' | 'bottom' | 'right' | 'center';
+interface PageContainerProps {
+    show: boolean;
+    duration?: number;
+    'z-index'?: number;
+    overlay?: boolean;
+    position?: Position;
+    round?: boolean;
+    'close-on-slide-down'?: boolean;
+    'overlay-style'?: StyleProp<ViewStyle>;
+    'custom-style'?: StyleProp<ViewStyle>;
+    bindclose: (event: CustomEvent<{
+        value: boolean;
+    }>) => void;
+    bindbeforeenter?: (event: CustomEvent) => void;
+    bindenter?: (event: CustomEvent) => void;
+    bindafterenter?: (event: CustomEvent) => void;
+    bindbeforeleave?: (event: CustomEvent) => void;
+    bindleave?: (event: CustomEvent) => void;
+    bindafterleave?: (event: CustomEvent) => void;
+    bindclickoverlay?: (event: CustomEvent) => void;
+    children: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<PageContainerProps & React.RefAttributes<any>>;
+export default _default;

package/lib/runtime/components/react/dist/mpx-page-container.jsx

@@ -0,0 +1,255 @@
+import { createElement, forwardRef, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Animated, Dimensions, TouchableWithoutFeedback, PanResponder } from 'react-native';
+import Portal from './mpx-portal/index';
+import { usePreventRemove } from '@react-navigation/native';
+import { extendObject, useLayout, useNavigation } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const screenHeight = Dimensions.get('window').height;
+const screenWidth = Dimensions.get('window').width;
+function nextTick(cb) {
+    setTimeout(cb, 0);
+}
+export default forwardRef((props, ref) => {
+    const { show, duration = 300, 'z-index': zIndex = 100, overlay = true, position = 'bottom', round = false, 'close-on-slide-down': closeOnSlideDown = false, 'overlay-style': overlayStyle, 'custom-style': customStyle, bindclose, // RN下特有属性，用于同步show状态到父组件
+    bindbeforeenter, bindenter, bindafterenter, bindbeforeleave, bindleave, bindafterleave, bindclickoverlay, children } = props;
+    const isFirstRenderFlag = useRef(true);
+    const isFirstRender = isFirstRenderFlag.current;
+    if (isFirstRenderFlag.current) {
+        isFirstRenderFlag.current = false;
+    }
+    const close = () => {
+        bindclose(getCustomEvent('close', {}, { detail: { value: false, source: 'close' } }, props));
+    };
+    const [internalVisible, setInternalVisible] = useState(show); // 控制组件是否挂载
+    const overlayOpacity = useRef(new Animated.Value(0)).current;
+    const contentOpacity = useRef(new Animated.Value(position === 'center' ? 0 : 1)).current;
+    const contentTranslate = useRef(new Animated.Value(getInitialPosition())).current;
+    const currentAnimation = useRef(null);
+    function getInitialPosition() {
+        switch (position) {
+            case 'top':
+                return -screenHeight;
+            case 'bottom':
+                return screenHeight;
+            case 'right':
+                return screenWidth;
+            case 'center':
+                return 0;
+            default:
+                return screenHeight;
+        }
+    }
+    const currentTick = useRef(0);
+    function createTick() {
+        currentTick.current++;
+        console.log('currentTick.current++', currentTick.current);
+        const current = currentTick.current;
+        return () => {
+            console.log('currentTick.current', currentTick.current, 'current', current);
+            return currentTick.current === current;
+        };
+    }
+    // 播放入场动画
+    const animateIn = () => {
+        const isCurrentTick = createTick();
+        const animateOutFinish = currentAnimation.current === null;
+        if (!animateOutFinish) {
+            currentAnimation.current.forEach((animation) => animation.stop());
+        }
+        const animations = [
+            Animated.timing(contentTranslate, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            }),
+            Animated.timing(contentOpacity, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true
+            }),
+            Animated.timing(overlayOpacity, {
+                toValue: 1,
+                duration,
+                useNativeDriver: true
+            })
+        ];
+        currentAnimation.current = animations;
+        // 所有生命周期需相隔一个nextTick以保证在生命周期中修改show可在组件内部监听到
+        bindbeforeenter && bindbeforeenter(getCustomEvent('beforeenter', {}, { detail: { value: false, source: 'beforeenter' } }, props));
+        nextTick(() => {
+            bindenter && bindenter(getCustomEvent('enter', {}, { detail: { value: false, source: 'enter' } }, props));
+            // 与微信对其， bindenter 需要执行，所以 isCurrentTick 放在后面
+            if (!isCurrentTick())
+                return;
+            console.log('animateIn start');
+            // 设置为动画初始状态(特殊情况， 如果退场动画没有结束 或者 退场动画还未开始，则无需初始化，而是从当前位置完成动画)
+            if (animateOutFinish) {
+                contentTranslate.setValue(getInitialPosition());
+                contentOpacity.setValue(position === 'center' ? 0 : 1);
+            }
+            Animated.parallel(animations).start(() => {
+                bindafterenter && bindafterenter(getCustomEvent('afterenter', {}, { detail: { value: false, source: 'afterenter' } }, props));
+            });
+        });
+    };
+    // 播放离场动画
+    const animateOut = () => {
+        const isCurrentTick = createTick();
+        // 停止入场动画
+        currentAnimation.current?.forEach((animation) => animation.stop());
+        const animations = [Animated.timing(overlayOpacity, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            })
+        ];
+        if (position === 'center') {
+            animations.push(Animated.timing(contentOpacity, {
+                toValue: 0,
+                duration,
+                useNativeDriver: true
+            }));
+        }
+        else {
+            animations.push(Animated.timing(contentTranslate, {
+                toValue: getInitialPosition(),
+                duration,
+                useNativeDriver: true
+            }));
+        }
+        currentAnimation.current = animations;
+        bindbeforeleave && bindbeforeleave(getCustomEvent('beforeleave', {}, { detail: { value: false, source: 'beforeleave' } }, props));
+        nextTick(() => {
+            bindleave && bindleave(getCustomEvent('leave', {}, { detail: { value: false, source: 'leave' } }, props));
+            if (!isCurrentTick())
+                return;
+            console.log('animateOut start');
+            Animated.parallel(animations).start(() => {
+                currentAnimation.current = null;
+                bindafterleave && bindafterleave(getCustomEvent('afterleave', {}, { detail: { value: false, source: 'afterleave' } }, props));
+                setInternalVisible(false); // 动画播放完后，才卸载
+            });
+        });
+    };
+    useEffect(() => {
+        console.log('====comp show', show, 'internalVisible', internalVisible);
+        // 如果展示状态和挂载状态一致，则不需要做任何操作
+        if (show) {
+            setInternalVisible(true); // 确保挂载
+            animateIn();
+        }
+        else {
+            if (!isFirstRender)
+                animateOut();
+        }
+    }, [show]);
+    const navigation = useNavigation();
+    usePreventRemove(show, (event) => {
+        const { data } = event;
+        if (show) {
+            close();
+        }
+        else {
+            navigation?.dispatch(data.action);
+        }
+    });
+    // IOS 下需要关闭手势返回（原因： IOS手势返回时页面会跟随手指滑动，但是实际返回动作是在松手时触发，需禁掉页面跟随手指滑动的效果）
+    useEffect(() => {
+        navigation?.setOptions({
+            gestureEnabled: !show
+        });
+    }, [show]);
+    const SCREEN_EDGE_THRESHOLD = 60; // 从屏幕左侧 30px 内触发
+    // 内容区 手势下滑关闭
+    const contentPanResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            const { dx, dy } = gestureState;
+            return dy > 200 && Math.abs(dx) < 60;
+        },
+        onPanResponderRelease: () => {
+            close();
+        }
+    });
+    // 全屏幕 IOS 右滑手势返回
+    const screenPanResponder = PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            const { moveX, dx, dy } = gestureState;
+            const isFromEdge = moveX < SCREEN_EDGE_THRESHOLD;
+            const isHorizontalSwipe = dx > 10 && Math.abs(dy) < 20;
+            return isFromEdge && isHorizontalSwipe;
+        },
+        onPanResponderRelease: (_, gestureState) => {
+            if (gestureState.dx > 100) {
+                close();
+            }
+        }
+    });
+    const getTransformStyle = () => {
+        switch (position) {
+            case 'top':
+            case 'bottom':
+                return { transform: [{ translateY: contentTranslate }] };
+            case 'right':
+                return { transform: [{ translateX: contentTranslate }] };
+            case 'center':
+                return {};
+        }
+    };
+    const renderMask = () => {
+        const onPress = () => {
+            close();
+            bindclickoverlay && bindclickoverlay(getCustomEvent('clickoverlay', {}, { detail: { value: false, source: 'clickoverlay' } }, props));
+        };
+        return createElement(TouchableWithoutFeedback, { onPress }, createElement(Animated.View, { style: [styles.overlay, overlayStyle, { opacity: overlayOpacity }] }));
+    };
+    const renderContent = (children) => {
+        const contentProps = extendObject({
+            style: [
+                styles.container,
+                round ? styles.rounded : null,
+                positionStyle[position],
+                customStyle,
+                getTransformStyle(),
+                { opacity: contentOpacity }
+            ]
+        }, closeOnSlideDown ? contentPanResponder.panHandlers : null);
+        return createElement(Animated.View, contentProps, children);
+    };
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {});
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent: false, nodeRef });
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: nodeRef
+    }, layoutProps), [], { layoutRef });
+    const wrapperProps = extendObject(innerProps, {
+        style: [styles.wrapper, { zIndex }]
+    }, __mpx_mode__ === 'ios' ? screenPanResponder.panHandlers : {});
+    // TODO 是否有必要支持refs? dataset?
+    return createElement(Portal, null, internalVisible
+        ? createElement(Animated.View, wrapperProps, overlay ? renderMask() : null, renderContent(children))
+        : null);
+});
+const styles = StyleSheet.create({
+    wrapper: extendObject({
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+    }, StyleSheet.absoluteFillObject),
+    overlay: extendObject({
+        backgroundColor: 'rgba(0,0,0,0.5)'
+    }, StyleSheet.absoluteFillObject),
+    container: {
+        position: 'absolute',
+        backgroundColor: 'white'
+    },
+    rounded: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20
+    }
+});
+const positionStyle = {
+    bottom: { bottom: 0, width: '100%', height: 'auto' },
+    top: { top: 0, width: '100%', height: 'auto' },
+    right: extendObject({}, StyleSheet.absoluteFillObject, { right: 0 }),
+    center: extendObject({}, StyleSheet.absoluteFillObject)
+};

package/lib/runtime/components/react/dist/mpx-picker/date.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { DateProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerDate: React.ForwardRefExoticComponent<Omit<DateProps, "ref"> & React.RefAttributes<HandlerRef<View, DateProps>>>;
+export default PickerDate;

package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts

@@ -0,0 +1,7 @@
+export declare const wrapDate: (union?: string) => (num: number) => string;
+export declare const START_YEAR = 1900;
+export declare const END_YEAR = 2099;
+export declare const years: string[];
+export declare const months: string[];
+export declare const daysInMonthLength: (year: number, month: number) => 30 | 28 | 29 | 31;
+export declare const daysInMonth: (year: number, month: number) => string[];

package/lib/runtime/components/react/dist/mpx-picker/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+import { PickerProps } from './type';
+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>>>;
+export default Picker;

package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MultiSelectorProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerMultiSelector: React.ForwardRefExoticComponent<Omit<MultiSelectorProps, "ref"> & React.RefAttributes<HandlerRef<View, MultiSelectorProps>>>;
+export default PickerMultiSelector;

package/lib/runtime/components/react/dist/mpx-picker/region.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { RegionProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerRegion: React.ForwardRefExoticComponent<Omit<RegionProps, "ref"> & React.RefAttributes<HandlerRef<View, RegionProps>>>;
+export default PickerRegion;

package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts

@@ -0,0 +1,2 @@
+import { RegionObj } from './type';
+export declare const regionData: RegionObj[];

package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { SelectorProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerSelector: React.ForwardRefExoticComponent<Omit<SelectorProps, "ref"> & React.RefAttributes<HandlerRef<View, SelectorProps>>>;
+export default PickerSelector;