@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

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

@@ -0,0 +1,468 @@
+/**
+ * ✔ direction
+ * ✔ inertia
+ * ✔ out-of-bounds
+ * ✔ x
+ * ✔ y
+ * ✘ damping
+ * ✘ friction
+ * ✔ disabled
+ * ✘ scale
+ * ✘ scale-min
+ * ✘ scale-max
+ * ✘ scale-value
+ * ✔ animation
+ * ✔ bindchange
+ * ✘ bindscale
+ * ✔ htouchmove
+ * ✔ vtouchmove
+ */
+import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo, createElement } from 'react';
+import { StyleSheet } from 'react-native';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { MovableAreaContext } from './context';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
+import { collectDataset, noop } from '@mpxjs/utils';
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        left: 0,
+        top: 0
+    }
+});
+const _MovableView = forwardRef((movableViewProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(movableViewProps);
+    const movableGestureRef = useRef();
+    const layoutRef = useRef({});
+    const changeSource = useRef('');
+    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 = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend } = 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 || []);
+    const prevWaitForHandlersRef = useRef(waitFor || []);
+    const gestureSwitch = useRef(false);
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const offsetX = useSharedValue(x);
+    const offsetY = useSharedValue(y);
+    const startPosition = useSharedValue({
+        x: 0,
+        y: 0
+    });
+    const draggableXRange = useSharedValue([0, 0]);
+    const draggableYRange = useSharedValue([0, 0]);
+    const isMoving = useSharedValue(false);
+    const xInertialMotion = useSharedValue(false);
+    const yInertialMotion = useSharedValue(false);
+    const isFirstTouch = useSharedValue(true);
+    const touchEvent = useSharedValue('');
+    const MovableAreaLayout = useContext(MovableAreaContext);
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle,
+        gestureRef: movableGestureRef
+    });
+    const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+        (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index]);
+    const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+        (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index]);
+    if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+        gestureSwitch.current = !gestureSwitch.current;
+    }
+    prevSimultaneousHandlersRef.current = originSimultaneousHandlers || [];
+    prevWaitForHandlersRef.current = waitFor || [];
+    const handleTriggerChange = useCallback(({ x, y, type }) => {
+        const { bindchange } = propsRef.current;
+        if (!bindchange)
+            return;
+        let source = '';
+        if (type !== 'setData') {
+            source = getTouchSource(x, y);
+        }
+        else {
+            changeSource.current = '';
+        }
+        bindchange(getCustomEvent('change', {}, {
+            detail: {
+                x,
+                y,
+                source
+            },
+            layoutRef
+        }, propsRef.current));
+    }, []);
+    useEffect(() => {
+        runOnUI(() => {
+            if (offsetX.value !== x || offsetY.value !== y) {
+                const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) });
+                if (direction === 'horizontal' || direction === 'all') {
+                    offsetX.value = animation
+                        ? withSpring(newX, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : newX;
+                }
+                if (direction === 'vertical' || direction === 'all') {
+                    offsetY.value = animation
+                        ? withSpring(newY, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : newY;
+                }
+                runOnJS(handleTriggerChange)({
+                    x: newX,
+                    y: newY,
+                    type: 'setData'
+                });
+            }
+        })();
+    }, [x, y]);
+    useEffect(() => {
+        const { width, height } = layoutRef.current;
+        if (width && height) {
+            resetBoundaryAndCheck({ width, height });
+        }
+    }, [MovableAreaLayout.height, MovableAreaLayout.width]);
+    useAnimatedReaction(() => ({
+        offsetX: offsetX.value,
+        offsetY: offsetY.value
+    }), (currentValue) => {
+        const { offsetX, offsetY } = currentValue;
+        runOnJS(handleTriggerChange)({
+            x: offsetX,
+            y: offsetY
+        });
+    });
+    const getTouchSource = useCallback((offsetX, offsetY) => {
+        const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
+            offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1];
+        let source = changeSource.current;
+        if (hasOverBoundary) {
+            if (isMoving.value) {
+                source = 'touch-out-of-bounds';
+            }
+            else {
+                source = 'out-of-bounds';
+            }
+        }
+        else {
+            if (isMoving.value) {
+                source = 'touch';
+            }
+            else if ((xInertialMotion.value || yInertialMotion.value) && (changeSource.current === 'touch' || changeSource.current === 'friction')) {
+                source = 'friction';
+            }
+        }
+        changeSource.current = source;
+        return source;
+    }, []);
+    const setBoundary = useCallback(({ width, height }) => {
+        const top = (style.position === 'absolute' && style.top) || 0;
+        const left = (style.position === 'absolute' && style.left) || 0;
+        const scaledWidth = width || 0;
+        const scaledHeight = height || 0;
+        const maxY = MovableAreaLayout.height - scaledHeight - top;
+        const maxX = MovableAreaLayout.width - scaledWidth - left;
+        let xRange;
+        let yRange;
+        if (MovableAreaLayout.width < scaledWidth) {
+            xRange = [maxX, 0];
+        }
+        else {
+            xRange = [left === 0 ? 0 : -left, maxX < 0 ? 0 : maxX];
+        }
+        if (MovableAreaLayout.height < scaledHeight) {
+            yRange = [maxY, 0];
+        }
+        else {
+            yRange = [top === 0 ? 0 : -top, maxY < 0 ? 0 : maxY];
+        }
+        draggableXRange.value = xRange;
+        draggableYRange.value = yRange;
+    }, [MovableAreaLayout.height, MovableAreaLayout.width, style.position, style.top, style.left]);
+    const checkBoundaryPosition = useCallback(({ positionX, positionY }) => {
+        'worklet';
+        let x = positionX;
+        let y = positionY;
+        // 计算边界限制
+        if (x > draggableXRange.value[1]) {
+            x = draggableXRange.value[1];
+        }
+        else if (x < draggableXRange.value[0]) {
+            x = draggableXRange.value[0];
+        }
+        if (y > draggableYRange.value[1]) {
+            y = draggableYRange.value[1];
+        }
+        else if (y < draggableYRange.value[0]) {
+            y = draggableYRange.value[0];
+        }
+        return { x, y };
+    }, []);
+    const resetBoundaryAndCheck = ({ width, height }) => {
+        setBoundary({ width, height });
+        runOnUI(() => {
+            const positionX = offsetX.value;
+            const positionY = offsetY.value;
+            const { x: newX, y: newY } = checkBoundaryPosition({ positionX, positionY });
+            if (positionX !== newX) {
+                offsetX.value = newX;
+            }
+            if (positionY !== newY) {
+                offsetY.value = newY;
+            }
+        })();
+    };
+    const onLayout = (e) => {
+        hasLayoutRef.current = true;
+        if (hasSelfPercent) {
+            const { width, height } = e?.nativeEvent?.layout || {};
+            setWidth(width || 0);
+            setHeight(height || 0);
+        }
+        nodeRef.current?.measure((x, y, width, height) => {
+            const { y: navigationY = 0 } = navigation?.layout || {};
+            layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
+            resetBoundaryAndCheck({ width, height });
+        });
+        props.onLayout && props.onLayout(e);
+    };
+    const extendEvent = useCallback((e, type) => {
+        const { y: navigationY = 0 } = navigation?.layout || {};
+        const touchArr = [e.changedTouches, e.allTouches];
+        touchArr.forEach(touches => {
+            touches && touches.forEach((item) => {
+                item.pageX = item.absoluteX;
+                item.pageY = item.absoluteY - navigationY;
+                item.clientX = item.absoluteX;
+                item.clientY = item.absoluteY - navigationY;
+            });
+        });
+        Object.assign(e, {
+            touches: type === 'end' ? [] : e.allTouches,
+            currentTarget: {
+                id: props.id || '',
+                dataset: collectDataset(props),
+                offsetLeft: 0,
+                offsetTop: 0
+            },
+            detail: {}
+        });
+    }, []);
+    const triggerStartOnJS = ({ e }) => {
+        extendEvent(e, 'start');
+        bindtouchstart && bindtouchstart(e);
+        catchtouchstart && catchtouchstart(e);
+    };
+    const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
+        extendEvent(e, 'move');
+        if (hasTouchmove) {
+            if (touchEvent === 'htouchmove') {
+                bindhtouchmove && bindhtouchmove(e);
+            }
+            else if (touchEvent === 'vtouchmove') {
+                bindvtouchmove && bindvtouchmove(e);
+            }
+            bindtouchmove && bindtouchmove(e);
+        }
+        if (hasCatchTouchmove) {
+            if (touchEvent === 'htouchmove') {
+                catchhtouchmove && catchhtouchmove(e);
+            }
+            else if (touchEvent === 'vtouchmove') {
+                catchvtouchmove && catchvtouchmove(e);
+            }
+            catchtouchmove && catchtouchmove(e);
+        }
+    };
+    const triggerEndOnJS = ({ e }) => {
+        extendEvent(e, 'end');
+        bindtouchend && bindtouchend(e);
+        catchtouchend && catchtouchend(e);
+    };
+    const gesture = useMemo(() => {
+        const handleTriggerMove = (e) => {
+            'worklet';
+            const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
+            const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
+            if (hasTouchmove || hasCatchTouchmove) {
+                runOnJS(triggerMoveOnJS)({
+                    e,
+                    touchEvent: touchEvent.value,
+                    hasTouchmove,
+                    hasCatchTouchmove
+                });
+            }
+        };
+        const gesturePan = Gesture.Pan()
+            .onTouchesDown((e) => {
+            'worklet';
+            const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
+            isMoving.value = false;
+            startPosition.value = {
+                x: changedTouches.x,
+                y: changedTouches.y
+            };
+            if (bindtouchstart || catchtouchstart) {
+                runOnJS(triggerStartOnJS)({ e });
+            }
+        })
+            .onTouchesMove((e) => {
+            'worklet';
+            const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
+            isMoving.value = true;
+            if (isFirstTouch.value) {
+                touchEvent.value = Math.abs(changedTouches.x - startPosition.value.x) > Math.abs(changedTouches.y - startPosition.value.y) ? 'htouchmove' : 'vtouchmove';
+                isFirstTouch.value = false;
+            }
+            handleTriggerMove(e);
+            if (disabled)
+                return;
+            const changeX = changedTouches.x - startPosition.value.x;
+            const changeY = changedTouches.y - startPosition.value.y;
+            if (direction === 'horizontal' || direction === 'all') {
+                const newX = offsetX.value + changeX;
+                if (!outOfBounds) {
+                    const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value });
+                    offsetX.value = x;
+                }
+                else {
+                    offsetX.value = newX;
+                }
+            }
+            if (direction === 'vertical' || direction === 'all') {
+                const newY = offsetY.value + changeY;
+                if (!outOfBounds) {
+                    const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY });
+                    offsetY.value = y;
+                }
+                else {
+                    offsetY.value = newY;
+                }
+            }
+        })
+            .onTouchesUp((e) => {
+            'worklet';
+            isFirstTouch.value = true;
+            isMoving.value = false;
+            if (bindtouchend || catchtouchend) {
+                runOnJS(triggerEndOnJS)({ e });
+            }
+            if (disabled)
+                return;
+            if (!inertia) {
+                const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value });
+                if (x !== offsetX.value) {
+                    offsetX.value = animation
+                        ? withSpring(x, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : x;
+                }
+                if (y !== offsetY.value) {
+                    offsetY.value = animation
+                        ? withSpring(y, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : y;
+                }
+            }
+        })
+            .onFinalize((e) => {
+            'worklet';
+            isMoving.value = false;
+            if (!inertia || disabled || !animation)
+                return;
+            if (direction === 'horizontal' || direction === 'all') {
+                xInertialMotion.value = true;
+                offsetX.value = withDecay({
+                    velocity: e.velocityX / 10,
+                    rubberBandEffect: outOfBounds,
+                    clamp: draggableXRange.value
+                }, () => {
+                    xInertialMotion.value = false;
+                });
+            }
+            if (direction === 'vertical' || direction === 'all') {
+                yInertialMotion.value = true;
+                offsetY.value = withDecay({
+                    velocity: e.velocityY / 10,
+                    rubberBandEffect: outOfBounds,
+                    clamp: draggableYRange.value
+                }, () => {
+                    yInertialMotion.value = false;
+                });
+            }
+        })
+            .withRef(movableGestureRef);
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesturePan.requireExternalGestureToFail(...waitForHandlers);
+        }
+        return gesturePan;
+    }, [disabled, direction, inertia, outOfBounds, gestureSwitch.current]);
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            transform: [
+                { translateX: offsetX.value },
+                { translateY: offsetY.value }
+            ]
+        };
+    });
+    const rewriteCatchEvent = () => {
+        const handlers = {};
+        const events = [
+            { type: 'touchstart' },
+            { type: 'touchmove', alias: ['vtouchmove', 'htouchmove'] },
+            { type: 'touchend' }
+        ];
+        events.forEach(({ type, alias = [] }) => {
+            const hasCatchEvent = props[`catch${type}`] ||
+                alias.some(name => props[`catch${name}`]);
+            if (hasCatchEvent)
+                handlers[`catch${type}`] = noop;
+        });
+        return handlers;
+    };
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
+    // bind 相关 touch 事件直接由 gesture 触发，无须重复挂载
+    // catch 相关 touch 事件需要重写并通过 useInnerProps 注入阻止冒泡逻辑
+    const filterProps = omit(props, [
+        'bindtouchstart',
+        'bindtouchmove',
+        'bindvtouchmove',
+        'bindhtouchmove',
+        'bindtouchend',
+        'catchtouchstart',
+        'catchtouchmove',
+        'catchvtouchmove',
+        'catchhtouchmove',
+        'catchtouchend'
+    ]);
+    const innerProps = useInnerProps(filterProps, extendObject({
+        ref: nodeRef,
+        onLayout: onLayout,
+        style: [innerStyle, animatedStyles, layoutStyle]
+    }, rewriteCatchEvent()));
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+_MovableView.displayName = 'MpxMovableView';
+export default _MovableView;

package/lib/runtime/components/react/dist/mpx-navigator.jsx

@@ -0,0 +1,33 @@
+import { useCallback, forwardRef, createElement } from 'react';
+import useInnerProps from './getInnerListeners';
+import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
+import MpxView from './mpx-view';
+const _Navigator = forwardRef((props, ref) => {
+    const { children, 'open-type': openType, url = '', delta } = props;
+    const handleClick = useCallback(() => {
+        switch (openType) {
+            case 'navigateBack':
+                navigateBack({ delta });
+                break;
+            case 'redirect':
+                redirectTo({ url });
+                break;
+            case 'switchTab':
+                switchTab({ url });
+                break;
+            case 'reLaunch':
+                reLaunch({ url });
+                break;
+            default:
+                navigateTo({ url });
+                break;
+        }
+    }, [openType, url, delta]);
+    const innerProps = useInnerProps(props, {
+        ref,
+        bindtap: handleClick
+    });
+    return createElement(MpxView, innerProps, children);
+});
+_Navigator.displayName = 'MpxNavigator';
+export default _Navigator;

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

@@ -0,0 +1,74 @@
+import { View, TouchableWithoutFeedback } from 'react-native';
+import { DatePicker } from '@ant-design/react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+function formatTimeStr(time = '') {
+    let [year, month, day] = time.split('-');
+    year = ~~year || 2000;
+    month = ~~month || 1;
+    day = ~~day || 1;
+    return new Date(year, month - 1, day);
+}
+function dateToString(date, fields = 'day') {
+    const yyyy = date.getFullYear() + '';
+    const MM = ('0' + (date.getMonth() + 1)).slice(-2);
+    const dd = ('0' + date.getDate()).slice(-2);
+    let ret = yyyy;
+    if (fields === 'month' || fields === 'day') {
+        ret += `-${MM}`;
+        if (fields === 'day') {
+            ret += `-${dd}`;
+        }
+    }
+    return ret;
+}
+const _DatePicker = forwardRef((props, ref) => {
+    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props;
+    const [datevalue, setDateValue] = useState(value);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const viewRef = useRef(null);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
+    useEffect(() => {
+        value && setDateValue(value);
+    }, [value]);
+    const onChange = (date) => {
+        const { fields = 'day' } = props;
+        const ret = dateToString(date, fields);
+        setDateValue(ret);
+        bindchange && bindchange({ detail: { value: ret } });
+    };
+    const onDismiss = () => {
+        bindcancel && bindcancel();
+    };
+    const onElementLayout = (layout) => {
+        viewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
+    };
+    const dateProps = {
+        ref: nodeRef,
+        precision: fields,
+        value: formatTimeStr(datevalue),
+        minDate: formatTimeStr(start),
+        maxDate: formatTimeStr(end),
+        onChange,
+        onDismiss,
+        disabled
+    };
+    const touchProps = {
+        onLayout: onElementLayout,
+        ref: viewRef
+    };
+    return (<DatePicker {...dateProps}>
+      <TouchableWithoutFeedback>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </DatePicker>);
+});
+_DatePicker.displayName = 'mpx-picker-date';
+export default _DatePicker;