@mpxjs/webpack-plugin 2.10.4-beta.19-input → 2.10.4-beta.19-input1

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

@@ -1,163 +0,0 @@
-/**
- * ✔ percent 进度百分比 0-100
- * ✘ show-info 在进度条右侧显示百分比
- * ✘ border-radius 圆角大小
- * ✘ font-size 右侧百分比字体大小
- * ✔ stroke-width 进度条线的宽度
- * ✔ color 进度条颜色（请使用activeColor）
- * ✔ activeColor 已选择的进度条的颜色
- * ✔ backgroundColor 未选择的进度条的颜色
- * ✔ active 进度条从左往右的动画
- * ✔ active-mode backwards: 动画从头播；forwards：动画从上次结束点接着播
- * ✔ duration 进度增加1%所需毫秒数
- * ✔ bindactiveend 动画完成事件
- */
-import { useRef, forwardRef, useEffect, useState, createElement } from 'react';
-import { View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated';
-import useInnerProps from './getInnerListeners';
-import useNodesRef from './useNodesRef';
-import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
-import Portal from './mpx-portal';
-const Progress = forwardRef((props, ref) => {
-    const { percent = 0, 'stroke-width': strokeWidth = 6, color, activeColor = color || '#09BB07', backgroundColor = '#EBEBEB', active = false, 'active-mode': activeMode = 'backwards', duration = 30, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    const nodeRef = useRef(null);
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    // 进度值状态
-    const [lastPercent, setLastPercent] = useState(0);
-    const progressWidth = useSharedValue(0);
-    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
-        enableVar,
-        externalVarContext,
-        parentFontSize,
-        parentWidth,
-        parentHeight
-    });
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({
-        props,
-        hasSelfPercent,
-        setWidth,
-        setHeight,
-        nodeRef
-    });
-    useNodesRef(props, ref, nodeRef, {
-        style: normalStyle
-    });
-    // 使用 useRunOnJSCallback 处理动画回调
-    const runOnJSCallbackRef = useRef({
-        triggerActiveEnd: (percent) => {
-            const currentProps = propsRef.current;
-            if (currentProps.bindactiveend) {
-                currentProps.bindactiveend({
-                    type: 'activeend',
-                    detail: {
-                        percent: percent
-                    }
-                });
-            }
-        }
-    });
-    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
-    // 进度条动画函数
-    const startProgressAnimation = (targetPercent, startPercent, animationDuration, onFinished) => {
-        // 根据 active-mode 设置起始位置
-        progressWidth.value = startPercent;
-        progressWidth.value = withTiming(targetPercent, {
-            duration: animationDuration,
-            easing: Easing.linear
-        }, (finished) => {
-            if (finished && onFinished) {
-                // 在动画回调中，执行传入的worklet函数
-                onFinished();
-            }
-        });
-    };
-    // 进度变化时的动画效果
-    useEffect(() => {
-        const targetPercent = Math.max(0, Math.min(100, percent));
-        if (active) {
-            // 根据 active-mode 确定起始位置
-            let startPercent;
-            if (activeMode === 'backwards') {
-                startPercent = 0;
-            }
-            else {
-                // forwards 模式：使用上次记录的百分比作为起始位置
-                startPercent = lastPercent;
-            }
-            // 计算动画持续时间
-            const percentDiff = Math.abs(targetPercent - startPercent);
-            const animationDuration = percentDiff * duration;
-            // 执行动画
-            startProgressAnimation(targetPercent, startPercent, animationDuration, () => {
-                'worklet';
-                // 在worklet函数内部执行runOnJS调用runOnJSCallback
-                runOnJS(runOnJSCallback)('triggerActiveEnd', targetPercent);
-            });
-        }
-        else {
-            progressWidth.value = targetPercent;
-        }
-        setLastPercent(targetPercent);
-    }, [percent, active, activeMode, duration]);
-    // 初始化时设置进度值
-    useEffect(() => {
-        if (!active) {
-            progressWidth.value = Math.max(0, Math.min(100, percent));
-        }
-    }, []);
-    // 进度条动画样式
-    const animatedProgressStyle = useAnimatedStyle(() => {
-        return {
-            width: `${progressWidth.value}%`
-        };
-    });
-    // 确保数值类型正确
-    const strokeWidthNum = typeof strokeWidth === 'number' ? strokeWidth : parseInt(strokeWidth, 10) || 6;
-    // 容器样式
-    const containerStyle = extendObject({}, {
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%',
-        minHeight: Math.max(strokeWidthNum, 20)
-    }, normalStyle, layoutStyle);
-    // 进度条背景样式
-    const progressBgStyle = {
-        width: '100%',
-        height: strokeWidthNum,
-        backgroundColor,
-        overflow: 'hidden'
-    };
-    // 进度条填充样式
-    const progressFillStyle = {
-        height: '100%',
-        backgroundColor: activeColor
-    };
-    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
-        ref: nodeRef
-    }), [
-        'percent',
-        'stroke-width',
-        'color',
-        'activeColor',
-        'backgroundColor',
-        'active',
-        'active-mode',
-        'duration',
-        'bindactiveend'
-    ], { layoutRef });
-    const progressComponent = createElement(View, extendObject({}, innerProps, { style: containerStyle }), 
-    // 进度条背景
-    createElement(View, { style: progressBgStyle }, 
-    // 进度条填充
-    createElement(Animated.View, {
-        style: [progressFillStyle, animatedProgressStyle]
-    })));
-    if (hasPositionFixed) {
-        return createElement(Portal, null, progressComponent);
-    }
-    return progressComponent;
-});
-Progress.displayName = 'MpxProgress';
-export default Progress;

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

@@ -1,321 +0,0 @@
-/**
- * ✔ min 最小值
- * ✔ max 最大值
- * ✔ step 步长
- * ✔ disabled 是否禁用
- * ✔ value 当前取值
- * ✔ color 背景条的颜色（已废弃，使用 backgroundColor）
- * ✔ selected-color 已选择的颜色（已废弃，使用 activeColor）
- * ✔ activeColor 已选择的颜色
- * ✔ backgroundColor 背景条的颜色
- * ✔ block-size 滑块的大小
- * ✔ block-color 滑块的颜色
- * ✘ show-value 是否显示当前 value
- * ✔ bindchange 完成一次拖动后触发的事件
- * ✔ bindchanging 拖动过程中触发的事件
- */
-import { useRef, forwardRef, useEffect, useState, createElement, useContext, useMemo } from 'react';
-import { View } from 'react-native';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
-import { warn } from '@mpxjs/utils';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import useNodesRef from './useNodesRef';
-import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from './utils';
-import Portal from './mpx-portal';
-import { FormContext } from './context';
-const Slider = forwardRef((props, ref) => {
-    const { min: rawMin = 0, max: rawMax = 100, step: rawStep = 1, disabled = false, value: rawValue, color, 'selected-color': selectedColor, activeColor = selectedColor || color || '#1aad19', backgroundColor = color || '#e9e9e9', 'block-size': rawBlockSize = 28, 'block-color': blockColor = '#ffffff', name, style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
-    // 确保数值类型正确
-    const min = typeof rawMin === 'string' ? parseFloat(rawMin) : rawMin;
-    const max = typeof rawMax === 'string' ? parseFloat(rawMax) : rawMax;
-    const step = typeof rawStep === 'string' ? parseFloat(rawStep) : rawStep;
-    const value = rawValue !== undefined ? (typeof rawValue === 'string' ? parseFloat(rawValue) : rawValue) : undefined;
-    const blockSize = typeof rawBlockSize === 'string' ? parseFloat(rawBlockSize) : rawBlockSize;
-    // 如果没有提供 value，则使用 min 作为默认值
-    const defaultValue = value !== undefined ? value : min;
-    const nodeRef = useRef(null);
-    const trackRef = useRef(null);
-    const [currentValue, setCurrentValue] = useState(defaultValue);
-    const [trackWidth, setTrackWidth] = useState(0);
-    const thumbPosition = useSharedValue(0);
-    const isDragging = useSharedValue(false);
-    const startDragPosition = useSharedValue(0); // 记录拖拽开始时的位置
-    const startDragValue = useSharedValue(0); // 记录拖拽开始时的值
-    let formValuesMap;
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    const formContext = useContext(FormContext);
-    if (formContext) {
-        formValuesMap = formContext.formValuesMap;
-    }
-    const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
-        enableVar,
-        externalVarContext,
-        parentFontSize,
-        parentWidth,
-        parentHeight
-    });
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({
-        props,
-        hasSelfPercent,
-        setWidth,
-        setHeight,
-        nodeRef
-    });
-    useNodesRef(props, ref, nodeRef, {
-        style: normalStyle
-    });
-    // 使用 useRunOnJSCallback 处理手势回调
-    const runOnJSCallbackRef = useRef({
-        triggerChangeEvent: (newValue) => {
-            setCurrentValue(newValue);
-            const currentProps = propsRef.current;
-            const changeHandler = currentProps.bindchange || currentProps.catchchange;
-            if (changeHandler) {
-                changeHandler(getCustomEvent('change', {}, { layoutRef, detail: { value: newValue } }, currentProps));
-            }
-        },
-        triggerChangingEvent: (newValue) => {
-            const currentProps = propsRef.current;
-            const changingHandler = currentProps.bindchanging || currentProps.catchchanging;
-            if (changingHandler) {
-                changingHandler(getCustomEvent('changing', {}, { layoutRef, detail: { value: newValue } }, currentProps));
-            }
-        }
-    });
-    const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef);
-    // 限制步长，确保 step 大于 0，并且可被 (max - min) 整除
-    const validateStep = (step, min, max) => {
-        if (step <= 0)
-            return 1;
-        if ((max - min) % step !== 0) {
-            warn(`Step ${step} is not a divisor of range ${max - min}`);
-        }
-        return step;
-    };
-    const validStep = validateStep(step, min, max);
-    // 将值约束在 min-max 范围内，并按步长对齐
-    const constrainValue = (val, minVal = min, maxVal = max, stepVal = validStep) => {
-        const constrained = Math.max(minVal, Math.min(maxVal, val));
-        const steps = Math.round((constrained - minVal) / stepVal);
-        return minVal + steps * stepVal;
-    };
-    // 计算滑块位置
-    const getThumbPosition = (val, trackW = trackWidth, minVal = min, maxVal = max) => {
-        if (trackW === 0)
-            return 0;
-        const percentage = (val - minVal) / (maxVal - minVal);
-        const position = percentage * trackW;
-        return position;
-    };
-    // 手势处理
-    const panGesture = useMemo(() => {
-        const getThumbPositionWorklet = (val, trackW, minVal, maxVal) => {
-            'worklet';
-            if (trackW === 0)
-                return 0;
-            const percentage = (val - minVal) / (maxVal - minVal);
-            return percentage * trackW;
-        };
-        const constrainValueWorklet = (val, minVal, maxVal, stepVal) => {
-            'worklet';
-            const constrained = Math.max(minVal, Math.min(maxVal, val));
-            const steps = Math.round((constrained - minVal) / stepVal);
-            return minVal + steps * stepVal;
-        };
-        return Gesture.Pan()
-            .enabled(!disabled) // 通过手势启用状态控制是否可拖拽
-            .onBegin(() => {
-            'worklet';
-            if (trackWidth === 0)
-                return;
-            isDragging.value = true;
-            // 记录拖拽开始时的位置 - 使用当前的动画位置
-            startDragPosition.value = thumbPosition.value;
-            // 根据当前位置反推值
-            const percentage = thumbPosition.value / trackWidth;
-            const currentVal = min + percentage * (max - min);
-            startDragValue.value = constrainValueWorklet(currentVal, min, max, validStep);
-        })
-            .onUpdate((event) => {
-            'worklet';
-            if (trackWidth === 0)
-                return;
-            // 基于拖拽开始位置计算新位置
-            const newX = startDragPosition.value + event.translationX;
-            const clampedX = Math.max(0, Math.min(trackWidth, newX));
-            // 计算新值
-            const percentage = clampedX / trackWidth;
-            const rawValue = min + percentage * (max - min);
-            const newValue = constrainValueWorklet(rawValue, min, max, validStep);
-            // 更新滑块位置 - 使用约束后的值对应的位置
-            const constrainedPosition = getThumbPositionWorklet(newValue, trackWidth, min, max);
-            thumbPosition.value = constrainedPosition;
-            // 只触发 changing 事件，不更新 currentValue（避免干扰拖拽）
-            runOnJS(runOnJSCallback)('triggerChangingEvent', newValue);
-        })
-            .onEnd((event) => {
-            'worklet';
-            isDragging.value = false;
-            // 基于拖拽开始位置计算最终位置
-            const newX = startDragPosition.value + event.translationX;
-            const clampedX = Math.max(0, Math.min(trackWidth, newX));
-            const percentage = clampedX / trackWidth;
-            const rawValue = min + percentage * (max - min);
-            const finalValue = constrainValueWorklet(rawValue, min, max, validStep);
-            // 确保滑块位置与最终值匹配
-            const finalPosition = getThumbPositionWorklet(finalValue, trackWidth, min, max);
-            thumbPosition.value = finalPosition;
-            // 更新 currentValue 并触发 change 事件
-            runOnJS(runOnJSCallback)('triggerChangeEvent', finalValue);
-        });
-    }, [disabled, trackWidth, min, max, validStep, runOnJSCallback]);
-    // 当 value 属性变化时更新位置
-    useEffect(() => {
-        const newValue = constrainValue(defaultValue);
-        setCurrentValue(newValue);
-        // 同时更新动画位置
-        thumbPosition.value = getThumbPosition(newValue);
-    }, [defaultValue, min, max, validStep]);
-    // 当 trackWidth 变化时更新滑块位置
-    useEffect(() => {
-        // 只在非拖拽状态下更新位置
-        if (!isDragging.value) {
-            thumbPosition.value = getThumbPosition(currentValue);
-        }
-    }, [trackWidth, currentValue]);
-    // 动画样式
-    const animatedThumbStyle = useAnimatedStyle(() => {
-        const blockSizeNum = Math.max(12, Math.min(28, blockSize));
-        const trackHeight = 4;
-        return {
-            position: 'absolute',
-            top: -((blockSizeNum - trackHeight) / 2),
-            left: Math.max(0, Math.min(trackWidth - blockSizeNum, thumbPosition.value - (blockSizeNum / 2))),
-            width: blockSizeNum,
-            height: blockSizeNum,
-            justifyContent: 'center',
-            alignItems: 'center'
-        };
-    });
-    // 轨道布局回调
-    const onTrackLayout = (event) => {
-        const { width } = event.nativeEvent.layout;
-        setTrackWidth(width);
-    };
-    // 表单相关处理
-    const resetValue = () => {
-        const currentProps = propsRef.current;
-        const currentValue = currentProps.value !== undefined ? currentProps.value : currentProps.min || 0;
-        const parsedValue = typeof currentValue === 'string' ? parseFloat(currentValue) : currentValue;
-        const currentMin = typeof currentProps.min === 'string' ? parseFloat(currentProps.min) : (currentProps.min || 0);
-        const currentMax = typeof currentProps.max === 'string' ? parseFloat(currentProps.max) : (currentProps.max || 100);
-        const currentStep = typeof currentProps.step === 'string' ? parseFloat(currentProps.step) : (currentProps.step || 1);
-        const resetVal = parsedValue !== undefined ? parsedValue : currentMin;
-        const validatedStep = validateStep(currentStep, currentMin, currentMax);
-        const constrainedVal = constrainValue(resetVal, currentMin, currentMax, validatedStep);
-        setCurrentValue(constrainedVal);
-        thumbPosition.value = getThumbPosition(constrainedVal, trackWidth, currentMin, currentMax);
-    };
-    const getValue = () => {
-        return currentValue;
-    };
-    if (formValuesMap) {
-        if (!name) {
-            warn('If a form component is used, the name attribute is required.');
-        }
-        else {
-            formValuesMap.set(name, { getValue, resetValue });
-        }
-    }
-    useEffect(() => {
-        return () => {
-            if (formValuesMap && name) {
-                formValuesMap.delete(name);
-            }
-        };
-    }, []);
-    // 样式定义
-    const blockSizeNum = Math.max(12, Math.min(28, blockSize));
-    const trackHeight = 4;
-    const containerStyle = extendObject({}, {
-        flexDirection: 'row',
-        alignItems: 'center',
-        minHeight: Math.max(blockSizeNum + 8, 40),
-        paddingHorizontal: 14 // 固定内边距，不受 block-size 影响
-    }, normalStyle, layoutStyle);
-    const trackStyle = {
-        flex: 1,
-        height: trackHeight,
-        backgroundColor,
-        borderRadius: trackHeight / 2,
-        position: 'relative'
-    };
-    // 动画进度条样式
-    const animatedProgressStyle = useAnimatedStyle(() => {
-        return {
-            height: '100%',
-            backgroundColor: activeColor,
-            borderRadius: trackHeight / 2,
-            width: Math.max(0, thumbPosition.value)
-        };
-    });
-    const thumbStyle = {
-        width: blockSizeNum,
-        height: blockSizeNum,
-        backgroundColor: blockColor,
-        borderRadius: blockSizeNum / 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.2,
-        shadowRadius: 4,
-        elevation: 4
-    };
-    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
-        ref: nodeRef
-    }), [
-        'min',
-        'max',
-        'step',
-        'disabled',
-        'value',
-        'color',
-        'selected-color',
-        'activeColor',
-        'backgroundColor',
-        'block-size',
-        'block-color',
-        'bindchange',
-        'catchchange',
-        'bindchanging',
-        'catchchanging'
-    ], { layoutRef });
-    const sliderContent = createElement(View, extendObject({}, innerProps, { style: containerStyle }), 
-    // 轨道容器
-    createElement(View, {
-        style: trackStyle,
-        onLayout: onTrackLayout,
-        ref: trackRef
-    }, 
-    // 进度条 - 使用动画样式
-    createElement(Animated.View, {
-        style: animatedProgressStyle
-    }), 
-    // 滑块容器
-    createElement(GestureDetector, {
-        gesture: panGesture
-    }, createElement(Animated.View, {
-        style: [animatedThumbStyle]
-    }, 
-    // 滑块
-    createElement(View, {
-        style: thumbStyle
-    })))));
-    if (hasPositionFixed) {
-        return createElement(Portal, null, sliderContent);
-    }
-    return sliderContent;
-});
-Slider.displayName = 'MpxSlider';
-export default Slider;