@mpxjs/webpack-plugin 2.9.59 → 2.9.64

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

@@ -0,0 +1,346 @@
+/**
+ * ✔ direction
+ * ✘ inertia
+ * ✘ out-of-bounds
+ * ✔ x
+ * ✔ y
+ * ✘ damping
+ * ✔ friction
+ * ✔ disabled
+ * ✔ scale
+ * ✔ scale-min
+ * ✔ scale-max
+ * ✔ scale-value
+ * ✘ animation
+ * ✔ bindchange
+ * ✔ bindscale
+ * ✔ htouchmove
+ * ✔ vtouchmove
+ */
+import { useRef, useEffect, forwardRef, useContext, useState, useMemo } from 'react';
+import { StyleSheet, Animated, PanResponder } from 'react-native';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { MovableAreaContext } from './context';
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        left: 0,
+        top: 0
+    }
+});
+const _MovableView = forwardRef((props, ref) => {
+    const { children, friction = 7, scale = false, direction = 'none', x = 0, y = 0, style = {}, 'scale-min': scaleMin = 0.1, 'scale-max': scaleMax = 10, 'scale-value': originScaleValue = 1, bindscale, bindchange } = props;
+    const pan = useRef(new Animated.ValueXY());
+    const scaleValue = useRef(new Animated.Value(1));
+    const [transformOrigin, setTransformOrigin] = useState('0% 0%');
+    const propsRef = useRef({});
+    const layoutRef = useRef({});
+    const MovableAreaLayout = useContext(MovableAreaContext);
+    const movablePosition = useRef({
+        x: Number(x),
+        y: Number(y)
+    });
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle: styles.container
+    });
+    let panResponder = {};
+    const isFirstTouch = useRef(true);
+    const touchEvent = useRef('');
+    const initialDistance = useRef(0);
+    propsRef.current = props;
+    useEffect(() => {
+        if (scale && (scaleValue.current._value !== originScaleValue)) {
+            const clampedScale = Math.min(scaleMax, Math.max(scaleMin, originScaleValue));
+            Animated.spring(scaleValue.current, {
+                toValue: clampedScale,
+                friction,
+                useNativeDriver: false
+            }).start(() => {
+                bindscale && bindscale(getCustomEvent('scale', {}, {
+                    detail: {
+                        x: pan.current.x._value,
+                        y: pan.current.y._value,
+                        scale: clampedScale
+                    },
+                    layoutRef
+                }, props));
+            });
+        }
+    }, [originScaleValue]);
+    useEffect(() => {
+        if (movablePosition.current.x !== Number(x) || movablePosition.current.y !== Number(y)) {
+            const { x: newX, y: newY } = checkBoundaryPosition({
+                clampedScale: scaleValue.current._value,
+                width: layoutRef.current.width,
+                height: layoutRef.current.height,
+                positionX: Number(x),
+                positionY: Number(y)
+            });
+            movablePosition.current = { x: newX, y: newY };
+            Animated.spring(pan.current, {
+                toValue: { x: newX, y: newY },
+                useNativeDriver: false,
+                friction
+            }).start(() => {
+                bindchange &&
+                    bindchange(getCustomEvent('change', {}, {
+                        detail: {
+                            x: newX,
+                            y: newY,
+                            source: ''
+                        },
+                        layoutRef
+                    }, props));
+            });
+        }
+    }, [x, y]);
+    const handlePanReleaseOrTerminate = () => {
+        pan.current.flattenOffset();
+        isFirstTouch.current = true;
+        initialDistance.current = 0;
+        const { x, y } = checkBoundaryPosition({
+            clampedScale: scaleValue.current._value,
+            width: layoutRef.current.width,
+            height: layoutRef.current.height,
+            positionX: pan.current.x._value,
+            positionY: pan.current.y._value
+        });
+        movablePosition.current = {
+            x,
+            y
+        };
+        const needChange = x !== pan.current.x._value || y !== pan.current.y._value;
+        Animated.spring(pan.current, {
+            toValue: { x, y },
+            friction: 7,
+            useNativeDriver: false
+        }).start(() => {
+            if (needChange) {
+                bindchange && bindchange(getCustomEvent('change', {}, {
+                    detail: {
+                        x,
+                        y,
+                        source: 'out-of-bounds'
+                    },
+                    layoutRef
+                }, propsRef.current));
+            }
+        });
+    };
+    panResponder = useMemo(() => {
+        return PanResponder.create({
+            onMoveShouldSetPanResponder: () => !propsRef.current.disabled,
+            onMoveShouldSetPanResponderCapture: () => !propsRef.current.disabled,
+            onPanResponderGrant: (e, gestureState) => {
+                if (gestureState.numberActiveTouches === 1) {
+                    setTransformOrigin('0% 0%');
+                    pan.current.setOffset({
+                        x: direction === 'all' || direction === 'horizontal' ? pan.current.x._value : 0,
+                        y: direction === 'all' || direction === 'vertical' ? pan.current.y._value : 0
+                    });
+                    pan.current.setValue({ x: 0, y: 0 });
+                }
+                else {
+                    initialDistance.current = 0;
+                    setTransformOrigin('50% 50%');
+                }
+            },
+            onPanResponderMove: (e, gestureState) => {
+                if (gestureState.numberActiveTouches === 2 && scale) {
+                    setTransformOrigin('50% 50%');
+                    const touch1 = e.nativeEvent.touches[0];
+                    const touch2 = e.nativeEvent.touches[1];
+                    const currentTouchDistance = Math.sqrt(Math.pow(touch1.pageX - touch2.pageX, 2) + Math.pow(touch1.pageY - touch2.pageY, 2));
+                    if (!initialDistance.current) {
+                        initialDistance.current = currentTouchDistance;
+                    }
+                    else {
+                        const newScale = currentTouchDistance / initialDistance.current;
+                        const clampedScale = Math.min(scaleMax, Math.max(scaleMin, newScale));
+                        Animated.spring(scaleValue.current, {
+                            toValue: clampedScale,
+                            friction: 7,
+                            useNativeDriver: false
+                        }).start();
+                        bindscale && bindscale(getCustomEvent('scale', e, {
+                            detail: {
+                                x: pan.current.x._value,
+                                y: pan.current.y._value,
+                                scale: clampedScale
+                            },
+                            layoutRef
+                        }, propsRef.current));
+                    }
+                }
+                else if (gestureState.numberActiveTouches === 1) {
+                    if (initialDistance.current) {
+                        return; // Skip processing if it's switching from a double touch
+                    }
+                    setTransformOrigin('0% 0%');
+                    if (isFirstTouch.current) {
+                        touchEvent.current = Math.abs(gestureState.dx) > Math.abs(gestureState.dy) ? 'htouchmove' : 'vtouchmove';
+                        isFirstTouch.current = false;
+                    }
+                    Animated.event([
+                        null,
+                        {
+                            dx: direction === 'all' || direction === 'horizontal' ? pan.current.x : new Animated.Value(0),
+                            dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0)
+                        }
+                    ], {
+                        useNativeDriver: false
+                    })(e, gestureState);
+                    movablePosition.current = {
+                        x: pan.current.x.__getValue(),
+                        y: pan.current.y.__getValue()
+                    };
+                    bindchange && bindchange(getCustomEvent('change', e, {
+                        detail: {
+                            x: movablePosition.current.x,
+                            y: movablePosition.current.y,
+                            source: 'touch'
+                        },
+                        layoutRef
+                    }, propsRef.current));
+                }
+            },
+            onPanResponderRelease: () => {
+                handlePanReleaseOrTerminate();
+            },
+            onPanResponderTerminate: () => {
+                handlePanReleaseOrTerminate();
+            }
+        });
+    }, [MovableAreaLayout.width, MovableAreaLayout.height]);
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height) => {
+            layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 };
+            const clampedScale = Math.min(scaleMax, Math.max(scaleMin, originScaleValue));
+            const { x: newX, y: nexY } = checkBoundaryPosition({
+                clampedScale,
+                width,
+                height,
+                positionX: movablePosition.current.x,
+                positionY: movablePosition.current.y
+            });
+            Animated.spring(pan.current, {
+                toValue: { x: newX, y: nexY },
+                useNativeDriver: false,
+                friction
+            }).start(() => {
+                movablePosition.current = { x: newX, y: nexY };
+                bindchange &&
+                    bindchange(getCustomEvent('change', {}, {
+                        detail: {
+                            x: newX,
+                            y: nexY,
+                            source: ''
+                        },
+                        layoutRef
+                    }, props));
+            });
+        });
+    };
+    const onTouchMove = (e) => {
+        const { bindhtouchmove, bindvtouchmove, bindtouchmove } = props;
+        if (touchEvent.current === 'htouchmove') {
+            bindhtouchmove && bindhtouchmove(e);
+        }
+        else if (touchEvent.current === 'vtouchmove') {
+            bindvtouchmove && bindvtouchmove(e);
+        }
+        bindtouchmove && bindtouchmove(e);
+    };
+    const onCatchTouchMove = (e) => {
+        const { catchhtouchmove, catchvtouchmove, catchtouchmove } = props;
+        if (touchEvent.current === 'htouchmove') {
+            catchhtouchmove && catchhtouchmove(e);
+        }
+        else if (touchEvent.current === 'vtouchmove') {
+            catchvtouchmove && catchvtouchmove(e);
+        }
+        catchtouchmove && catchtouchmove(e);
+    };
+    const checkBoundaryPosition = ({ clampedScale, width, height, positionX, positionY }) => {
+        // Calculate scaled element size
+        const scaledWidth = width * clampedScale;
+        const scaledHeight = height * clampedScale;
+        // Calculate the boundary limits
+        let x = positionX;
+        let y = positionY;
+        // Correct y coordinate
+        if (scaledHeight > MovableAreaLayout.height) {
+            if (y >= 0) {
+                y = 0;
+            }
+            else if (y < MovableAreaLayout.height - scaledHeight) {
+                y = MovableAreaLayout.height - scaledHeight;
+            }
+        }
+        else {
+            if (y < 0) {
+                y = 0;
+            }
+            else if (y > MovableAreaLayout.height - scaledHeight) {
+                y = MovableAreaLayout.height - scaledHeight;
+            }
+        }
+        // Correct x coordinate
+        if (scaledWidth > MovableAreaLayout.width) {
+            if (x >= 0) {
+                x = 0;
+            }
+            else if (x < MovableAreaLayout.width - scaledWidth) {
+                x = MovableAreaLayout.width - scaledWidth;
+            }
+        }
+        else {
+            if (x < 0) {
+                x = 0;
+            }
+            else if (x > MovableAreaLayout.width - scaledWidth) {
+                x = MovableAreaLayout.width - scaledWidth;
+            }
+        }
+        return {
+            x,
+            y
+        };
+    };
+    const [translateX, translateY] = [pan.current.x, pan.current.y];
+    const transformStyle = { transform: [{ translateX }, { translateY }, { scale: scaleValue.current }], transformOrigin: transformOrigin };
+    const hasTouchmove = () => !!props.bindhtouchmove || !!props.bindvtouchmove || !!props.bindtouchmove;
+    const hasCatchTouchmove = () => !!props.catchhtouchmove || !!props.catchvtouchmove || !!props.catchtouchmove;
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...panResponder.panHandlers,
+        onLayout,
+        ...(hasTouchmove() ? { bindtouchmove: onTouchMove } : {}),
+        ...(hasCatchTouchmove() ? { catchtouchmove: onCatchTouchMove } : {})
+    }, [
+        'children',
+        'style',
+        'direction',
+        'x',
+        'y',
+        'scale',
+        'disabled',
+        'scale-value',
+        'scale-min',
+        'scale-max',
+        'bindchange',
+        'bindscale',
+        'htouchmove',
+        'vtouchmove'
+    ], { layoutRef });
+    return (<Animated.View {...innerProps} style={{
+            ...styles.container,
+            ...style,
+            ...transformStyle
+        }}>
+      {children}
+    </Animated.View>);
+});
+_MovableView.displayName = 'mpx-movable-view';
+export default _MovableView;

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

@@ -0,0 +1,35 @@
+import { useCallback, forwardRef } 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 (<MpxView {...innerProps}>
+      {children}
+    </MpxView>);
+});
+_Navigator.displayName = 'mpx-navigator';
+export default _Navigator;

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

@@ -0,0 +1,69 @@
+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 } = props;
+    const [datevalue, setDateValue] = useState(value);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const { nodeRef: viewRef } = useNodesRef(props, ref, {});
+    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 = {
+        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;

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

@@ -0,0 +1,138 @@
+import { View } from 'react-native';
+import React, { forwardRef, useRef, useContext, useState } from 'react';
+import { warn } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+import Selector from './selector';
+import TimeSelector from './time';
+import DateSelector from './date';
+import MultiSelector from './multiSelector';
+import RegionSelector from './region';
+import { FormContext } from '../context';
+/**
+ * ✔ mode
+ * ✔ disabled
+ * ✔ bindcancel
+ * ✔ bindchange
+ * ✔ range
+ * ✔ range-key
+ * ✔ value
+ * ✔ start
+ * ✔ end
+ * ✔ fields 有效值 year,month,day，表示选择器的粒度
+ * ✔ end
+ * ✔ custom-item
+ * ✔ level 选择器层级 province，city，region，<sub-district不支持>
+ * ✔ level
+ * ✘ header-text
+ * ✘ bindcolumnchange
+ */
+const _Picker = forwardRef((props, ref) => {
+    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props;
+    const innerLayout = useRef({});
+    const { nodeRef } = useNodesRef(props, ref, {});
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef
+    }, [], { layoutRef: innerLayout });
+    const [pickerValue, setPickerValue] = useState(value);
+    const defaultValues = {
+        selector: 0,
+        multiSelector: [0],
+        time: props.start,
+        date: props.start,
+        region: undefined
+    };
+    const formContext = useContext(FormContext);
+    let formValuesMap;
+    // 判断 context 是否存在，存在的话读取 context 中存的 formValuesMap
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const resetValue = () => {
+        const defalutValue = (defaultValues[mode] !== undefined ? defaultValues[mode] : value);
+        setPickerValue(defalutValue);
+    };
+    const getValue = () => {
+        return pickerValue;
+    };
+    if (formValuesMap) {
+        if (!props.name) {
+            warn('If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    const getInnerLayout = (layout) => {
+        innerLayout.current = layout.current;
+    };
+    const onChange = (event) => {
+        const eventData = getCustomEvent('change', {}, { detail: event.detail, layoutRef: innerLayout });
+        bindchange && bindchange(eventData);
+        setPickerValue(event.detail.value);
+    };
+    const columnChange = (value, index) => {
+        // type: "columnchange", detail: {column: 1, value: 2}
+        const eventData = getCustomEvent('columnchange', {}, { detail: { column: index, value }, layoutRef: innerLayout });
+        bindcolumnchange && bindcolumnchange(eventData);
+    };
+    const commonProps = {
+        ...{ innerProps },
+        mode,
+        children,
+        bindchange: onChange,
+        bindcolumnchange: columnChange,
+        bindcancel,
+        getInnerLayout
+    };
+    const selectorProps = {
+        ...commonProps,
+        value: pickerValue,
+        range: props.range,
+        'range-key': props['range-key']
+    };
+    const multiProps = {
+        ...commonProps,
+        value: pickerValue,
+        range: props.range,
+        'range-key': props['range-key']
+    };
+    const timeProps = {
+        ...commonProps,
+        value: pickerValue,
+        start: props.start,
+        end: props.end
+    };
+    const dateProps = {
+        ...commonProps,
+        value: pickerValue,
+        start: props.start,
+        end: props.end,
+        fileds: props.fields || 'day'
+    };
+    const regionProps = {
+        ...commonProps,
+        value: pickerValue,
+        level: props.level || 'sub-district'
+    };
+    if (mode === 'selector') {
+        return <Selector {...selectorProps}></Selector>;
+    }
+    else if (mode === 'multiSelector') {
+        return <MultiSelector {...multiProps}></MultiSelector>;
+    }
+    else if (mode === 'time') {
+        return <TimeSelector {...timeProps}></TimeSelector>;
+    }
+    else if (mode === 'date') {
+        return <DateSelector {...dateProps}></DateSelector>;
+    }
+    else if (mode === 'region') {
+        return <RegionSelector {...regionProps}></RegionSelector>;
+    }
+    else {
+        return <View>只支持selector, multiSelector, time, date, region 这些类型</View>;
+    }
+});
+_Picker.displayName = 'mpx-picker';
+export default _Picker;