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

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

@@ -0,0 +1,81 @@
+/**
+ * 普通选择器，range可以是Array<Obj> 也可以是Array
+ */
+import { View, TouchableWithoutFeedback } from 'react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Picker } from '@ant-design/react-native';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+const formatRangeFun = (range, rangeKey = '') => {
+    let newRange = [];
+    newRange = (range || []).map((item, index) => {
+        if (typeof item === 'object') {
+            return { value: index, label: item[rangeKey] };
+        }
+        else {
+            return { value: index, label: item };
+        }
+    });
+    return newRange;
+};
+const _SelectorPicker = forwardRef((props, ref) => {
+    const { range, children, value, disabled, bindchange, bindcancel, style } = props;
+    // 格式化数据为Array<*>
+    const formatRange = formatRangeFun(range, props['range-key']);
+    // 选中的索引值
+    const [selected, setSelected] = useState(value || 0);
+    // range数据源
+    const [data, setData] = useState(formatRange || []);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const viewRef = useRef(null);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
+    useEffect(() => {
+        if (range) {
+            const newFormatRange = formatRangeFun(range, props['range-key']);
+            setData(newFormatRange);
+        }
+        setSelected(() => {
+            return value;
+        });
+    }, [range, value]);
+    const defaultValue = [value];
+    const onChange = (value) => {
+        bindchange && bindchange({
+            detail: {
+                value: value && value[0]
+            }
+        });
+    };
+    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 antPickerProps = {
+        ref: nodeRef,
+        data,
+        value: [selected],
+        cols: 1,
+        defaultValue,
+        itemHeight: 40,
+        onChange,
+        onDismiss: bindcancel && bindcancel
+    };
+    const touchProps = {
+        onLayout: onElementLayout,
+        ref: viewRef
+    };
+    return (<Picker {...antPickerProps}>
+        <TouchableWithoutFeedback>
+          <View {...touchProps}>
+            {children}
+          </View>
+        </TouchableWithoutFeedback>
+    </Picker>);
+});
+_SelectorPicker.displayName = 'mpx-picker-selector';
+export default _SelectorPicker;

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

@@ -0,0 +1,242 @@
+import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
+import Portal from '../mpx-portal/index';
+import { PickerView } from '@ant-design/react-native';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import useNodesRef from '../useNodesRef'; // 引入辅助函数
+// 可见应用窗口的大小。
+// const { height: dHeight, width: dWidth } = Dimensions.get('window');
+//  modal属性: {"height": 298.33331298828125, "offsetLeft": 0, "offsetTop": 513.6666870117188, "width": 375, "x": 0, "y": 513.6666870117188}
+// const { height: sHeight, width: sWidth } = Dimensions.get('screen');
+// 设备屏幕的大小。 screen
+const styles = {
+    showModal: {
+        backgroundColor: 'black',
+        opacity: 0.5,
+        width: '100%',
+        height: '100%'
+    },
+    hideModal: {
+        opacity: 1,
+        height: 0
+    },
+    modal: {
+        backgroundColor: 'black',
+        opacity: 0.5
+    },
+    centeredView: {
+        position: 'absolute',
+        bottom: 0,
+        width: '100%',
+        overflow: 'scroll'
+    },
+    btnLine: {
+        width: '100%',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        borderColor: 20,
+        borderBottomWidth: 1,
+        backgroundColor: 'white',
+        paddingLeft: 40,
+        paddingRight: 40
+    },
+    cancel: {
+        height: 50,
+        display: 'flex',
+        justifyContent: 'center'
+    },
+    ok: {
+        height: 50,
+        display: 'flex',
+        justifyContent: 'center'
+    },
+    btntext: {
+        color: '#0ae',
+        fontSize: 18
+    }
+};
+function formatStrToInt(timestr) {
+    const [start, end] = timestr.split(':');
+    return [parseInt(start), parseInt(end)];
+}
+// [9, 59] to 09:59
+function formatStr(arr) {
+    let [hour, minute] = arr;
+    if (hour < 10) {
+        hour = '0' + hour;
+    }
+    if (minute < 10) {
+        minute = '0' + minute;
+    }
+    return hour + ':' + minute;
+}
+function generateMinute() {
+    const arrMinute = [];
+    for (let i = 0; i <= 59; i++) {
+        const obj = {
+            label: toSingleStr(i),
+            value: i,
+            children: []
+        };
+        arrMinute.push(obj);
+    }
+    return arrMinute;
+}
+function generateColumns() {
+    const pickData = [];
+    for (let i = 0; i <= 23; i++) {
+        const obj = {
+            label: toSingleStr(i),
+            value: i,
+            children: generateMinute()
+        };
+        pickData.push(obj);
+    }
+    return pickData;
+}
+function toSingleStr(str) {
+    return str < 10 ? '0' + str : str;
+}
+function toStr(time) {
+    const [hour, minute] = formatStrToInt(time);
+    const newHour = toSingleStr(hour);
+    const newMinute = toSingleStr(minute);
+    return '' + newHour + newMinute;
+}
+function checkSelectedIsValid(strStart, strEnd, selected) {
+    const strSel = '' + toSingleStr(selected[0]) + toSingleStr(selected[1]);
+    if (strSel < strStart || strSel > strEnd)
+        return false;
+    return true;
+}
+/**
+ * [{label:'', value: '', key: '', children: []}]
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+*/
+// start="02:10" end = 23:01
+const _TimePicker = forwardRef((props, ref) => {
+    const { children, start, end, value, bindchange, bindcancel, style } = props;
+    const defaultProps = {
+        start: '00:10',
+        end: '23:59'
+    };
+    const defaultValue = formatStrToInt(value);
+    const [timevalue, setTimeValue] = useState(defaultValue);
+    // 存储layout布局信息
+    const layoutRef = useRef({});
+    const viewRef = useRef(null);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style });
+    // 存储modal的布局信息
+    const modalLayoutRef = useRef({});
+    const modalRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const columnData = generateColumns();
+    const [data, setData] = useState(columnData);
+    const [offsetTop, setOffsetTop] = useState(0);
+    const strStart = toStr(start);
+    const strEnd = toStr(end);
+    useEffect(() => {
+        const newColumnData = generateColumns();
+        setData(newColumnData);
+    }, [start, end]);
+    useEffect(() => {
+        if (value) {
+            const nValue = formatStrToInt(value);
+            nValue && setTimeValue(nValue);
+        }
+    }, [value]);
+    // console.log('---------------visible---', visible, JSON.stringify(columnData))
+    const handleModalStatus = (status) => {
+        setVisible(status);
+    };
+    const handleConfirm = () => {
+        handleModalStatus(false);
+        bindchange && bindchange({
+            detail: {
+                value: formatStr(timevalue)
+            }
+        });
+    };
+    const handleCancel = () => {
+        handleModalStatus(false);
+        bindcancel && bindcancel();
+    };
+    const handleChildClick = () => {
+        handleModalStatus(true);
+    };
+    const handlePickChange = (date) => {
+        // 不是有效的值
+        if (!checkSelectedIsValid(strStart, strEnd, date)) {
+            setTimeValue(timevalue);
+        }
+        else {
+            // [9, 13]
+            setTimeValue(date);
+        }
+    };
+    const onElementLayout = () => {
+        viewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            props.getInnerLayout && props.getInnerLayout(layoutRef);
+        });
+    };
+    const onModalLayout = () => {
+        modalRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            modalLayoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            setOffsetTop(offsetTop);
+        });
+    };
+    const renderModalChildren = () => {
+        const pickerProps = {
+            ref: nodeRef,
+            data,
+            value: timevalue,
+            defaultValue: timevalue,
+            cols: 2,
+            onChange: handlePickChange
+        };
+        return (<View style={styles.centeredView} ref={modalRef} onLayout={onModalLayout}>
+        <View style={styles.btnLine}>
+          <View style={styles.cancel}>
+            <TouchableWithoutFeedback onPress={handleCancel}>
+              <Text style={styles.btntext}>取消</Text>
+            </TouchableWithoutFeedback>
+          </View>
+          <View style={styles.ok}>
+            <TouchableWithoutFeedback onPress={handleConfirm}>
+              <Text style={styles.btntext}>确定</Text>
+            </TouchableWithoutFeedback>
+          </View>
+        </View>
+        <PickerView {...pickerProps}></PickerView>
+      </View>);
+    };
+    const renderChildren = () => {
+        const touchProps = {
+            onLayout: onElementLayout,
+            ref: viewRef
+        };
+        return <View>
+      <TouchableWithoutFeedback onPress={handleChildClick}>
+        <View {...touchProps}>{children}</View>
+      </TouchableWithoutFeedback>
+    </View>;
+    };
+    // Animated.View
+    return (<>
+    <Portal>
+      <View style={visible ? styles.showModal : styles.hideModal}>
+      <Modal animationType="slide" transparent={true} visible={visible}>
+        {renderModalChildren()}
+      </Modal>
+    </View>
+    </Portal>
+    {renderChildren()}
+  </>);
+});
+_TimePicker.displayName = 'mpx-picker-time';
+export default _TimePicker;

package/lib/runtime/components/react/dist/mpx-picker/type.js

@@ -0,0 +1 @@
+export {};

package/lib/runtime/components/react/dist/mpx-picker-view-column-item.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { extendObject } from './utils';
+import { createFaces } from './pickerFaces';
+import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from './pickerVIewContext';
+const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, visibleCount, onItemLayout }) => {
+    const textStyleFromAncestor = usePickerViewStyleContext();
+    const offsetYShared = usePickerViewColumnAnimationContext();
+    const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
+    useEffect(() => {
+        facesShared.value = createFaces(itemHeight, visibleCount);
+    }, [itemHeight]);
+    const animatedStyles = useAnimatedStyle(() => {
+        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
+        return {
+            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+            transform: [
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+            ]
+        };
+    });
+    const strKey = `picker-column-item-${index}`;
+    const restProps = index === 0 ? { onLayout: onItemLayout } : {};
+    const itemProps = extendObject({
+        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromAncestor, textStyle, item.props.style)
+    }, textProps, restProps);
+    const realItem = React.cloneElement(item, itemProps);
+    return (<Reanimated.View key={strKey} style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}>
+      {realItem}
+    </Reanimated.View>);
+};
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default PickerViewColumnItem;

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

@@ -0,0 +1,193 @@
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS } from './utils';
+import useNodesRef from './useNodesRef';
+import PickerIndicator from './pickerViewIndicator';
+import PickerMask from './pickerViewMask';
+import MpxPickerVIewColumnItem from './mpx-picker-view-column-item';
+import { PickerViewColumnAnimationContext } from './pickerVIewContext';
+const visibleCount = 5;
+const _PickerViewColumn = forwardRef((props, ref) => {
+    const { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { textStyle = {} } = splitStyle(normalStyle);
+    const { textProps = {} } = splitProps(props);
+    const scrollViewRef = useAnimatedRef();
+    const offsetYShared = useScrollViewOffset(scrollViewRef);
+    useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle
+    });
+    const { height: pickerH, itemHeight } = wrapperStyle;
+    const [itemRawH, setItemRawH] = useState(itemHeight);
+    const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
+    const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
+    const touching = useRef(false);
+    const scrolling = useRef(false);
+    const timerResetPosition = useRef(null);
+    const timerScrollTo = useRef(null);
+    const activeIndex = useRef(initialIndex);
+    const prevIndex = usePrevious(initialIndex);
+    const prevMaxIndex = usePrevious(maxIndex);
+    const { layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: scrollViewRef
+    });
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemHeight) / 2), [pickerH, itemHeight]);
+    const snapToOffsets = useMemo(() => Array.from({ length: maxIndex + 1 }, (_, i) => i * itemRawH), [maxIndex, itemRawH]);
+    const contentContainerStyle = useMemo(() => {
+        return [{ paddingVertical: paddingHeight }];
+    }, [paddingHeight]);
+    const getIndex = useCallback((y) => {
+        const calc = Math.round(y / itemRawH);
+        return Math.max(0, Math.min(calc, maxIndex));
+    }, [itemRawH, maxIndex]);
+    const clearTimerResetPosition = useCallback(() => {
+        if (timerResetPosition.current) {
+            clearTimeout(timerResetPosition.current);
+            timerResetPosition.current = null;
+        }
+    }, []);
+    const clearTimerScrollTo = useCallback(() => {
+        if (timerScrollTo.current) {
+            clearTimeout(timerScrollTo.current);
+            timerScrollTo.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            clearTimerResetPosition();
+            clearTimerScrollTo();
+        };
+    }, []);
+    useEffect(() => {
+        if (!scrollViewRef.current ||
+            !itemRawH ||
+            touching.current ||
+            scrolling.current ||
+            prevIndex == null ||
+            initialIndex === prevIndex ||
+            initialIndex === activeIndex.current ||
+            maxIndex !== prevMaxIndex) {
+            return;
+        }
+        clearTimerScrollTo();
+        timerScrollTo.current = setTimeout(() => {
+            scrollViewRef.current?.scrollTo({
+                x: 0,
+                y: initialIndex * itemRawH,
+                animated: false
+            });
+        }, isAndroid ? 200 : 0);
+        activeIndex.current = initialIndex;
+    }, [itemRawH, maxIndex, initialIndex]);
+    const onContentSizeChange = useCallback((_w, h) => {
+        const y = initialIndex * itemRawH;
+        if (y <= h) {
+            clearTimerScrollTo();
+            timerScrollTo.current = setTimeout(() => {
+                scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
+            }, 0);
+        }
+    }, [itemRawH, initialIndex]);
+    const onItemLayout = useCallback((e) => {
+        const { height: rawH } = e.nativeEvent.layout;
+        const roundedH = Math.round(rawH);
+        if (roundedH && roundedH !== itemRawH) {
+            setItemRawH(roundedH);
+        }
+    }, [itemRawH]);
+    const resetScrollPosition = useCallback((y) => {
+        if (touching.current || scrolling.current) {
+            return;
+        }
+        scrolling.current = true;
+        const targetIndex = getIndex(y);
+        scrollViewRef.current?.scrollTo({ x: 0, y: targetIndex * itemRawH, animated: false });
+    }, [itemRawH, getIndex]);
+    const onMomentumScrollBegin = useCallback(() => {
+        isIOS && clearTimerResetPosition();
+        scrolling.current = true;
+    }, []);
+    const onMomentumScrollEnd = useCallback((e) => {
+        scrolling.current = false;
+        const { y: scrollY } = e.nativeEvent.contentOffset;
+        if (isIOS && scrollY % itemRawH !== 0) {
+            return resetScrollPosition(scrollY);
+        }
+        const calcIndex = getIndex(scrollY);
+        if (calcIndex !== activeIndex.current) {
+            activeIndex.current = calcIndex;
+            onSelectChange(calcIndex);
+        }
+    }, [itemRawH, getIndex, onSelectChange, resetScrollPosition]);
+    const onScrollBeginDrag = useCallback(() => {
+        isIOS && clearTimerResetPosition();
+        touching.current = true;
+        prevScrollingInfo.current = {
+            index: activeIndex.current,
+            y: activeIndex.current * itemRawH
+        };
+    }, [itemRawH]);
+    const onScrollEndDrag = useCallback((e) => {
+        touching.current = false;
+        if (isIOS) {
+            const { y } = e.nativeEvent.contentOffset;
+            if (y % itemRawH === 0) {
+                onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
+            }
+            else if (y > 0 && y < snapToOffsets[maxIndex]) {
+                timerResetPosition.current = setTimeout(() => {
+                    resetScrollPosition(y);
+                }, 10);
+            }
+        }
+    }, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
+    const onScroll = useCallback((e) => {
+        // 全局注册的振动触感 hook
+        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
+        if (typeof pickerVibrate !== 'function') {
+            return;
+        }
+        const { y } = e.nativeEvent.contentOffset;
+        const { index: prevIndex, y: _y } = prevScrollingInfo.current;
+        if (touching.current || scrolling.current) {
+            if (Math.abs(y - _y) >= itemRawH) {
+                const currentId = getIndex(y);
+                if (currentId !== prevIndex) {
+                    prevScrollingInfo.current = {
+                        index: currentId,
+                        y: currentId * itemRawH
+                    };
+                    // vibrateShort({ type: 'selection' })
+                    pickerVibrate();
+                }
+            }
+        }
+    }, [itemRawH, getIndex]);
+    const renderInnerchild = () => columnData.map((item, index) => {
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+    });
+    const renderScollView = () => {
+        return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+          {renderInnerchild()}
+        </Reanimated.ScrollView>
+      </PickerViewColumnAnimationContext.Provider>);
+    };
+    const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
+    const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
+    return (<View style={[styles.wrapper, normalStyle]}>
+      {renderScollView()}
+      {renderMask()}
+      {renderIndicator()}
+    </View>);
+});
+const styles = StyleSheet.create({
+    wrapper: { display: 'flex', flex: 1 }
+});
+_PickerViewColumn.displayName = 'MpxPickerViewColumn';
+export default _PickerViewColumn;

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

@@ -0,0 +1,125 @@
+import { View } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from './utils';
+import { PickerViewStyleContext } from './pickerVIewContext';
+const styles = {
+    wrapper: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        overflow: 'hidden',
+        alignItems: 'center'
+    }
+};
+const DefaultPickerItemH = 36;
+const _PickerView = forwardRef((props, ref) => {
+    const { children, value = [], bindchange, style, 'indicator-style': indicatorStyle = {}, 'mask-style': pickerMaskStyle = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle;
+    const nodeRef = useRef(null);
+    const cloneRef = useRef(null);
+    const activeValueRef = useRef(value);
+    activeValueRef.current = value.slice();
+    const snapActiveValueRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
+    const { textProps } = splitProps(props);
+    const { textStyle } = splitStyle(normalStyle);
+    const onSelectChange = (columnIndex, selectedIndex) => {
+        const activeValue = activeValueRef.current;
+        activeValue[columnIndex] = selectedIndex;
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue.slice(), source: 'change' }, layoutRef });
+        bindchange?.(eventData);
+        snapActiveValueRef.current = activeValueRef.current;
+    };
+    const hasDiff = (a = [], b) => {
+        return a.some((v, i) => v !== b[i]);
+    };
+    const onInitialChange = (isInvalid, value) => {
+        if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+            const eventData = getCustomEvent('change', {}, { detail: { value: value.slice(), source: 'change' }, layoutRef });
+            bindchange?.(eventData);
+            snapActiveValueRef.current = value.slice();
+        }
+    };
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle, {
+            position: 'relative',
+            overflow: 'hidden'
+        }),
+        layoutProps
+    }), [
+        'enable-offset',
+        'indicator-style',
+        'indicator-class',
+        'mask-style',
+        'mask-class'
+    ], { layoutRef });
+    const renderColumn = (child, index, columnData, initialIndex) => {
+        const childProps = child?.props || {};
+        const wrappedProps = extendObject({}, childProps, {
+            columnData,
+            ref: cloneRef,
+            columnIndex: index,
+            key: `pick-view-${index}`,
+            wrapperStyle: {
+                height: normalStyle?.height || DefaultPickerItemH,
+                itemHeight: indicatorH || DefaultPickerItemH
+            },
+            onSelectChange: onSelectChange.bind(null, index),
+            initialIndex,
+            pickerIndicatorStyle,
+            pickerMaskStyle
+        });
+        const realElement = React.cloneElement(child, wrappedProps);
+        return wrapChildren({
+            children: realElement
+        }, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        });
+    };
+    const validateChildInitialIndex = (index, data) => {
+        return Math.max(0, Math.min(value[index] || 0, data.length - 1));
+    };
+    const flatColumnChildren = (data) => {
+        const columnData = React.Children.toArray(data?.props?.children);
+        if (columnData.length === 1 && React.isValidElement(columnData[0]) && columnData[0].type === React.Fragment) {
+            // 只有一个 Fragment 嵌套情况
+            return React.Children.toArray(columnData[0].props.children);
+        }
+        return columnData;
+    };
+    const renderPickerColumns = () => {
+        const columns = React.Children.toArray(children);
+        const renderColumns = [];
+        const validValue = [];
+        let isInvalid = false;
+        columns.forEach((item, index) => {
+            const columnData = flatColumnChildren(item);
+            const validIndex = validateChildInitialIndex(index, columnData);
+            if (validIndex !== value[index]) {
+                isInvalid = true;
+            }
+            validValue.push(validIndex);
+            renderColumns.push(renderColumn(item, index, columnData, validIndex));
+        });
+        onInitialChange(isInvalid, validValue);
+        return renderColumns;
+    };
+    return (<PickerViewStyleContext.Provider value={textStyle}>
+      <View {...innerProps}>
+        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+      </View>
+    </PickerViewStyleContext.Provider>);
+});
+_PickerView.displayName = 'MpxPickerView';
+export default _PickerView;