@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.0

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

@@ -77,7 +77,7 @@ function getColumnIndexByValue(range = [], column, value = []) {
     return changeIndex;
 }
 const _MultiSelectorPicker = forwardRef((props, ref) => {
-    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props;
+    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props;
     const formatRange = formatRangeFun(range, props['range-key']);
     const initValue = getInnerValueByIndex(formatRange, value);
     // 选中的索引值
@@ -87,7 +87,10 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);
@@ -117,6 +120,7 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
         });
     };
     const antPickerProps = {
+        ref: nodeRef,
         data,
         value: selected,
         cols: range.length,

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

@@ -35,13 +35,16 @@ function formateRegionData(clObj = [], customItem, depth = 2) {
     return obj;
 }
 const _RegionPicker = forwardRef((props, ref) => {
-    const { children, value, bindchange, bindcancel, disabled } = props;
+    const { children, value, bindchange, bindcancel, disabled, style } = props;
     const formatRegionData = formateRegionData(regionData, props['custom-item']);
     const [regionvalue, setRegionValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     const onChange = (value) => {
         // 通过 value 查找 code
         let tmp = regionData;
@@ -75,6 +78,7 @@ const _RegionPicker = forwardRef((props, ref) => {
         bindcancel && bindcancel();
     };
     const regionProps = {
+        ref: nodeRef,
         data: formatRegionData,
         value: regionvalue,
         onChange,

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

@@ -18,7 +18,7 @@ const formatRangeFun = (range, rangeKey = '') => {
     return newRange;
 };
 const _SelectorPicker = forwardRef((props, ref) => {
-    const { range, children, value, disabled, bindchange, bindcancel } = props;
+    const { range, children, value, disabled, bindchange, bindcancel, style } = props;
     // 格式化数据为Array<*>
     const formatRange = formatRangeFun(range, props['range-key']);
     // 选中的索引值
@@ -28,7 +28,10 @@ const _SelectorPicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);
@@ -53,6 +56,7 @@ const _SelectorPicker = forwardRef((props, ref) => {
         });
     };
     const antPickerProps = {
+        ref: nodeRef,
         data,
         value: [selected],
         cols: 1,

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

@@ -1,5 +1,5 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView } from '@ant-design/react-native';
+import { PickerView, Portal } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。
@@ -11,8 +11,8 @@ const styles = {
     showModal: {
         backgroundColor: 'black',
         opacity: 0.5,
-        position: 'absolute',
-        width: '100%'
+        width: '100%',
+        height: '100%'
     },
     hideModal: {
         opacity: 1,
@@ -117,7 +117,7 @@ function checkSelectedIsValid(strStart, strEnd, selected) {
 */
 // start="02:10" end = 23:01
 const _TimePicker = forwardRef((props, ref) => {
-    const { children, start, end, value, bindchange, bindcancel, disabled } = props;
+    const { children, start, end, value, bindchange, bindcancel, style } = props;
     const defaultProps = {
         start: '00:10',
         end: '23:59'
@@ -127,11 +127,11 @@ const _TimePicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style });
     // 存储modal的布局信息
     const modalLayoutRef = useRef({});
     const modalRef = useRef(null);
-    useNodesRef(props, ref, modalRef, {});
     const [visible, setVisible] = useState(false);
     const columnData = generateColumns();
     const [data, setData] = useState(columnData);
@@ -175,12 +175,6 @@ const _TimePicker = forwardRef((props, ref) => {
         else {
             // [9, 13]
             setTimeValue(date);
-            const strDate = formatStr(date);
-            bindchange && bindchange({
-                detail: {
-                    value: strDate
-                }
-            });
         }
     };
     const onElementLayout = () => {
@@ -197,6 +191,7 @@ const _TimePicker = forwardRef((props, ref) => {
     };
     const renderModalChildren = () => {
         const pickerProps = {
+            ref: nodeRef,
             data,
             value: timevalue,
             defaultValue: timevalue,
@@ -230,15 +225,15 @@ const _TimePicker = forwardRef((props, ref) => {
       </TouchableWithoutFeedback>
     </View>;
     };
-    const strStyle = visible ? styles.showModal : styles.hideModal;
-    const mheight = Math.floor(offsetTop);
     // Animated.View
     return (<>
-    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+    <Portal>
+      <View style={visible ? styles.showModal : styles.hideModal}>
       <Modal animationType="slide" transparent={true} visible={visible}>
         {renderModalChildren()}
       </Modal>
     </View>
+    </Portal>
     {renderChildren()}
   </>);
 });

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

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { wrapChildren, extendObject } from './utils';
+import { createFaces } from './pickerFaces';
+import { usePickerViewColumnAnimationContext } from './pickerVIewContext';
+const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
+    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: [
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { 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%' }, textStyleFromParent, textStyle, item.props.style)
+    }, restProps);
+    const realItem = React.cloneElement(item, itemProps);
+    return (<Reanimated.View key={strKey} style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}>
+      {wrapChildren({ children: realItem }, {
+            hasVarDec,
+            varContext,
+            textStyle,
+            textProps
+        })}
+    </Reanimated.View>);
+};
+_PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default _PickerViewColumnItem;

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

@@ -1,40 +1,58 @@
-import { Animated, SafeAreaView } from 'react-native';
-import React, { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout, usePrevious } from './utils';
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
+import { vibrateShort } from '@mpxjs/api-proxy';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious } from './utils';
 import useNodesRef from './useNodesRef';
-import { createFaces } from './pickerFaces';
-import PickerOverlay from './pickerOverlay';
-// 默认的单个选项高度
-const DefaultPickerItemH = 36;
-// 默认一屏可见选项个数
+import PickerOverlay from './pickerViewOverlay';
+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, onColumnItemRawHChange, getInnerLayout, style, wrapperStyle, pickerOverlayStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
+    const { columnData, columnIndex, columnStyle, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerOverlayStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle } = splitStyle(normalStyle);
+    const { textStyle: textStyleFromParent = {} } = splitStyle(columnStyle);
+    const { textStyle = {} } = splitStyle(normalStyle);
     const { textProps } = splitProps(props);
-    const scrollViewRef = useRef(null);
-    useNodesRef(props, ref, scrollViewRef, {});
-    const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle;
-    const [itemRawH, setItemRawH] = useState(0); // 单个选项真实渲染高度
+    const scrollViewRef = useAnimatedRef();
+    const offsetYShared = useScrollViewOffset(scrollViewRef);
+    useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle
+    });
+    const { height: pickerH, itemHeight } = wrapperStyle;
+    const [scrollViewWidth, setScrollViewWidth] = useState('100%');
+    const [itemRawW, setItemRawW] = useState('100%');
+    const [itemRawH, setItemRawH] = useState(itemHeight);
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
+    const maxScrollViewWidth = useRef(-1);
+    const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
     const touching = useRef(false);
     const scrolling = useRef(false);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
-    const initialOffset = useMemo(() => ({
-        x: 0,
-        y: itemRawH * initialIndex
-    }), [itemRawH]);
+    const { layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: scrollViewRef
+    });
+    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length)
+    // const initialOffset = useMemo(() => ({
+    //   x: 0,
+    //   y: itemRawH * initialIndex
+    // }), [itemRawH])
     const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemRawH) / 2), [pickerH, itemRawH]);
     const contentContainerStyle = useMemo(() => {
-        return [
-            {
-                paddingVertical: Math.round(pickerH - itemRawH) / 2
-            }
-        ];
-    }, [pickerH, itemRawH]);
+        return [{ paddingVertical: paddingHeight }];
+    }, [paddingHeight]);
+    const getIndex = useCallback((y) => {
+        const calc = Math.round(y / itemRawH);
+        return Math.max(0, Math.min(calc, maxIndex));
+    }, [itemRawH, maxIndex]);
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
@@ -46,40 +64,55 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             maxIndex !== prevMaxIndex) {
             return;
         }
+        // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
+        setTimeout(() => {
+            scrollViewRef.current?.scrollTo({
+                x: 0,
+                y: itemRawH * initialIndex,
+                animated: false
+            });
+        }, 0);
         activeIndex.current = initialIndex;
-        scrollViewRef.current.scrollTo({
-            x: 0,
-            y: itemRawH * initialIndex,
-            animated: false
-        });
     }, [itemRawH, initialIndex]);
-    const onScrollViewLayout = () => {
-        getInnerLayout && getInnerLayout(layoutRef);
+    const onContentSizeChange = (_w, h) => {
+        const y = itemRawH * initialIndex;
+        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y)
+        if (y <= h) {
+            setTimeout(() => {
+                scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
+            }, 0);
+        }
     };
-    const { layoutRef, layoutProps } = useLayout({
-        props,
-        hasSelfPercent,
-        setWidth,
-        setHeight,
-        nodeRef: scrollViewRef,
-        onLayout: onScrollViewLayout
-    });
-    const onContentSizeChange = (w, h) => {
-        scrollViewRef.current?.scrollTo({
-            x: 0,
-            y: itemRawH * initialIndex,
-            animated: false
-        });
+    const onScrollViewLayout = (e) => {
+        const { width } = e.nativeEvent.layout;
+        const widthInt = Math.ceil(width);
+        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
+        if (widthInt !== scrollViewWidth) {
+            const maxW = maxScrollViewWidth.current;
+            if (maxW !== -1 && widthInt > maxW) {
+                return;
+            }
+            if (maxW === -1) {
+                maxScrollViewWidth.current = Math.ceil(widthInt * 1.5);
+            }
+            setScrollViewWidth(widthInt);
+        }
+        if (itemRawW === '100%') {
+            setItemRawW(widthInt);
+        }
     };
     const onItemLayout = (e) => {
         const { height: rawH } = e.nativeEvent.layout;
         if (rawH && itemRawH !== rawH) {
             setItemRawH(rawH);
-            onColumnItemRawHChange(rawH);
         }
     };
     const onTouchStart = () => {
         touching.current = true;
+        prevScrollingInfo.current = {
+            index: activeIndex.current,
+            y: activeIndex.current * itemRawH
+        };
     };
     const onTouchEnd = () => {
         touching.current = false;
@@ -103,65 +136,45 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             onSelectChange(calcIndex);
         }
     };
-    const offsetY = useRef(new Animated.Value(0)).current;
-    const onScroll = useMemo(() => Animated.event([{ nativeEvent: { contentOffset: { y: offsetY } } }], {
-        useNativeDriver: true
-    }), [offsetY]);
-    const faces = useMemo(() => createFaces(itemRawH, visibleCount), [itemRawH]);
-    const getTransform = useCallback((index) => {
-        const inputRange = faces.map((f) => itemRawH * (index + f.index));
-        return {
-            opacity: offsetY.interpolate({
-                inputRange: inputRange,
-                outputRange: faces.map((x) => x.opacity),
-                extrapolate: 'clamp'
-            }),
-            rotateX: offsetY.interpolate({
-                inputRange: inputRange,
-                outputRange: faces.map((x) => `${x.deg}deg`),
-                extrapolate: 'extend'
-            }),
-            translateY: offsetY.interpolate({
-                inputRange: inputRange,
-                outputRange: faces.map((x) => x.offsetY),
-                extrapolate: 'extend'
-            })
-        };
-    }, [offsetY, faces, itemRawH]);
-    const renderInnerchild = () => columnData.map((item, index) => {
-        const InnerProps = index === 0 ? { onLayout: onItemLayout } : {};
-        const strKey = `picker-column-${columnIndex}-${index}`;
-        const { opacity, rotateX, translateY } = getTransform(index);
-        return (<Animated.View key={strKey} {...InnerProps} style={[
-                {
-                    height: itemHeight || DefaultPickerItemH,
-                    width: '100%',
-                    opacity,
-                    transform: [
-                        { translateY },
-                        { rotateX },
-                        { perspective: 1000 } // 适配 Android
-                    ]
+    const onScroll = (e) => {
+        if (Platform.OS === 'android') {
+            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' });
                 }
-            ]}>
-          {wrapChildren({ children: item }, {
-                hasVarDec,
-                varContext: varContextRef.current,
-                textStyle,
-                textProps
-            })}
-        </Animated.View>);
+            }
+        }
+    };
+    const renderInnerchild = () => columnData.map((item, index) => {
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} itemWidth={itemRawW} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
-        return (<Animated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} pagingEnabled={false} nestedScrollEnabled={true} removeClippedSubviews={true} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} {...layoutProps} scrollEventThrottle={16} contentContainerStyle={contentContainerStyle} contentOffset={initialOffset} snapToOffsets={snapToOffsets} onContentSizeChange={onContentSizeChange} onScroll={onScroll} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd}>
-        {renderInnerchild()}
-      </Animated.ScrollView>);
+        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: scrollViewWidth }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onLayout={onScrollViewLayout} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+          {renderInnerchild()}
+        </Reanimated.ScrollView>
+      </PickerViewColumnAnimationContext.Provider>);
     };
     const renderOverlay = () => (<PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle}/>);
-    return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
+    const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
+    return (<SafeAreaView style={[styles.wrapper, normalStyle]}>
       {renderScollView()}
+      {renderMask()}
       {renderOverlay()}
     </SafeAreaView>);
 });
+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

@@ -1,8 +1,8 @@
 import { View } from 'react-native';
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, useDebounceCallback, useStableCallback, extendObject } from './utils';
+import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, extendObject } from './utils';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -13,66 +13,69 @@ const styles = {
         alignItems: 'center'
     }
 };
+const DefaultPickerItemH = 36;
 const _PickerView = forwardRef((props, ref) => {
     const { children, value = [], bindchange, style, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // indicatorStyle 需要转换为rn的style
-    // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
     const indicatorStyle = parseInlineStyle(props['indicator-style']);
+    const pickerMaskStyle = parseInlineStyle(props['mask-style']);
     const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
-    const [pickMaxH, setPickMaxH] = useState(0);
     const nodeRef = useRef(null);
     const cloneRef = useRef(null);
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
+    const snapActiveValueRef = useRef(null);
+    console.log('[mpx-picker-view] value=', value, Date.now());
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    useNodesRef(props, ref, nodeRef, {});
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
+    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 onColumnItemRawHChange = (height) => {
-        if (height > pickMaxH) {
-            setPickMaxH(height);
-        }
-    };
-    const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300);
     const onSelectChange = (columnIndex, selectedIndex) => {
-        bindchangeDebounce.clear();
         const activeValue = activeValueRef.current;
         activeValue[columnIndex] = selectedIndex;
+        console.log('[mpx-picker-view], onSelectChange ---> columnIndex=', columnIndex, 'selectedIndex=', selectedIndex, 'activeValue=', activeValue);
         const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
-        bindchangeDebounce(eventData);
+        bindchange?.(eventData);
+        snapActiveValueRef.current = activeValueRef.current;
     };
-    const onInitialChange = (value) => {
-        const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
-        bindchange?.(eventData); // immediate
+    const hasDiff = (a = [], b) => {
+        return a.some((v, i) => v !== b[i]);
+    };
+    const onInitialChange = (isInvalid, value) => {
+        if (isInvalid || !snapActiveValueRef.current || hasDiff(snapActiveValueRef.current, value)) {
+            console.log('[mpx-picker-view], onInitialChange-1 ===> value=', value);
+            const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
+            bindchange?.(eventData);
+            snapActiveValueRef.current = value.slice();
+        }
     };
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: extendObject(normalStyle, layoutStyle, {
+        style: extendObject({}, normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
         }),
         layoutProps
     }), ['enable-offset'], { layoutRef });
     const renderColumn = (child, index, columnData, initialIndex) => {
-        const extraProps = {};
         const childProps = child?.props || {};
-        const wrappedProps = extendObject(childProps, {
+        const wrappedProps = extendObject({}, childProps, {
             columnData,
             ref: cloneRef,
             columnIndex: index,
             key: `pick-view-${index}`,
             wrapperStyle: {
-                height: normalStyle?.height || 0,
-                itemHeight: indicatorH || 0
+                height: normalStyle?.height || DefaultPickerItemH,
+                itemHeight: indicatorH || DefaultPickerItemH
             },
-            onColumnItemRawHChange,
+            columnStyle: normalStyle,
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
-            pickerOverlayStyle
-        }, extraProps);
+            pickerOverlayStyle,
+            pickerMaskStyle
+        });
         const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({
             children: realElement
@@ -108,7 +111,7 @@ const _PickerView = forwardRef((props, ref) => {
             validValue.push(validIndex);
             renderColumns.push(renderColumn(item, index, columnData, validIndex));
         });
-        isInvalid && onInitialChange(validValue);
+        onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
     return (<View {...innerProps}>

package/lib/runtime/components/react/dist/mpx-radio-group.jsx

@@ -1,13 +1,13 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect, createElement } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, RadioGroupContext } from './context';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { useLayout, useTransformStyle, wrapChildren } from './utils';
+import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
 const radioGroup = forwardRef((props, ref) => {
     const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const propsRef = useRef({});
@@ -22,13 +22,10 @@ const radioGroup = forwardRef((props, ref) => {
         flexDirection: 'row',
         flexWrap: 'wrap'
     };
-    const styleObj = {
-        ...defaultStyle,
-        ...style
-    };
+    const styleObj = extendObject({}, defaultStyle, style);
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, { defaultStyle });
+    useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const getValue = () => {
         for (const key in groupValue) {
@@ -74,21 +71,16 @@ const radioGroup = forwardRef((props, ref) => {
             notifyChange
         };
     }, []);
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: { ...normalStyle, ...layoutStyle },
-        ...layoutProps
-    }, [], {
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps), ['name'], {
         layoutRef
     });
-    return (<View {...innerProps}>
-      <RadioGroupContext.Provider value={contextValue}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-      </RadioGroupContext.Provider>
-    </View>);
+    return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    })));
 });
 radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;