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

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

@@ -1,468 +0,0 @@
-/**
- * ✔ 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

@@ -1,33 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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;