@mpxjs/webpack-plugin 2.9.66 → 2.9.69

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

@@ -31,5 +31,5 @@ const _Navigator = forwardRef((props, ref) => {
       {children}
     </MpxView>);
 });
-_Navigator.displayName = 'mpx-navigator';
+_Navigator.displayName = 'MpxNavigator';
 export default _Navigator;

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

@@ -1,108 +1,167 @@
-import { View, Animated, SafeAreaView } from 'react-native';
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-const defaultItemHeight = 36;
-// 每个Column 都有个外层的高度, 内部的元素高度
-// 默认的高度
+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 useNodesRef from './useNodesRef';
+import { createFaces } from './pickerFaces';
+import PickerOverlay from './pickerOverlay';
+// 默认的单个选项高度
+const DefaultPickerItemH = 36;
+// 默认一屏可见选项个数
+const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, style, wrapperStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // PickerViewColumn
+    const { columnData, columnIndex, initialIndex, onSelectChange, onColumnItemRawHChange, getInnerLayout, style, wrapperStyle, 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 { textProps } = splitProps(props);
-    // const { innerStyle } = splitStyle(normalStyle)
-    // scrollView的ref
     const scrollViewRef = useRef(null);
     useNodesRef(props, ref, scrollViewRef, {});
-    // 每个元素的高度
-    let [itemH, setItemH] = useState(0);
+    const { height: pickerH, itemHeight = DefaultPickerItemH } = wrapperStyle;
+    const [itemRawH, setItemRawH] = useState(0); // 单个选项真实渲染高度
+    const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
+    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 snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
+    const contentContainerStyle = useMemo(() => {
+        return [
+            {
+                paddingVertical: Math.round(pickerH - itemRawH) / 2
+            }
+        ];
+    }, [pickerH, itemRawH]);
     useEffect(() => {
-        if (selectedIndex && itemH) {
-            const offsetY = selectedIndex * itemH;
-            scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true });
+        if (!scrollViewRef.current ||
+            !itemRawH ||
+            touching.current ||
+            scrolling.current ||
+            prevIndex == null ||
+            initialIndex === prevIndex ||
+            initialIndex === activeIndex.current ||
+            maxIndex !== prevMaxIndex) {
+            return;
         }
-    }, [selectedIndex, itemH]);
+        activeIndex.current = initialIndex;
+        scrollViewRef.current.scrollTo({
+            x: 0,
+            y: itemRawH * initialIndex,
+            animated: false
+        });
+    }, [itemRawH, initialIndex]);
     const onScrollViewLayout = () => {
         getInnerLayout && getInnerLayout(layoutRef);
     };
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout });
+    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 onItemLayout = (e) => {
-        const layout = e.nativeEvent.layout;
-        if (layout.height && itemH !== layout.height) {
-            itemH = layout.height;
-            setItemH(layout.height);
-            onColumnLayoutChange && onColumnLayoutChange({ height: layout.height * 5 });
+        const { height: rawH } = e.nativeEvent.layout;
+        if (rawH && itemRawH !== rawH) {
+            setItemRawH(rawH);
+            onColumnItemRawHChange(rawH);
         }
     };
-    const onMomentumScrollEnd = (e) => {
-        if (scrollViewRef && itemH) {
-            const { y: scrollY } = e.nativeEvent.contentOffset;
-            const selIndex = Math.floor(scrollY / itemH);
-            onSelectChange(selIndex);
-        }
+    const onTouchStart = () => {
+        touching.current = true;
     };
-    const renderInnerchild = () => {
-        // Fragment 节点
-        let realElement = [];
-        const getRealChilds = () => {
-            if (Array.isArray(children)) {
-                realElement = children;
-            }
-            else {
-                const tempChild = children;
-                if (tempChild.props.children && tempChild.props.children) {
-                    realElement = tempChild.props.children;
-                }
-                else {
-                    realElement = [children];
-                }
-            }
-            return realElement;
-        };
-        const realChilds = getRealChilds();
-        const arrChild = realChilds.map((item, index) => {
-            const InnerProps = index === 0 ? { onLayout: onItemLayout } : {};
-            const strKey = 'picker' + props.prefix + '-column' + index;
-            const arrHeight = (wrapperStyle.itemHeight + '').match(/\d+/g) || [];
-            const iHeight = (arrHeight[0] || defaultItemHeight);
-            return <View key={strKey} {...InnerProps} style={[{ height: iHeight, width: '100%' }]}>
-        {wrapChildren({
-                    children: item
-                }, {
-                    hasVarDec,
-                    varContext: varContextRef.current,
-                    textStyle,
-                    textProps
-                })}
-      </View>;
-        });
-        const totalHeight = itemH * 5;
-        if (wrapperStyle.height && totalHeight !== wrapperStyle.height) {
-            const fix = Math.ceil((totalHeight - wrapperStyle.height) / 2);
-            arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH - fix }]}></View>);
-            arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-3" style={[{ height: itemH - fix }]}></View>);
+    const onTouchEnd = () => {
+        touching.current = false;
+    };
+    const onTouchCancel = () => {
+        touching.current = false;
+    };
+    const onMomentumScrollBegin = () => {
+        scrolling.current = true;
+    };
+    const onMomentumScrollEnd = (e) => {
+        scrolling.current = false;
+        if (!itemRawH) {
+            return;
         }
-        else {
-            arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH }]}></View>);
-            arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-3" style={[{ height: itemH }]}></View>);
+        const { y: scrollY } = e.nativeEvent.contentOffset;
+        let calcIndex = Math.round(scrollY / itemRawH);
+        activeIndex.current = calcIndex;
+        if (calcIndex !== initialIndex) {
+            calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0;
+            onSelectChange(calcIndex);
         }
-        return arrChild;
     };
+    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
+                    ]
+                }
+            ]}>
+          {wrapChildren({ children: item }, {
+                hasVarDec,
+                varContext: varContextRef.current,
+                textStyle,
+                textProps
+            })}
+        </Animated.View>);
+    });
     const renderScollView = () => {
-        return (<Animated.ScrollView horizontal={false} ref={scrollViewRef} bounces={false} scrollsToTop={false} removeClippedSubviews={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} pagingEnabled={false} snapToInterval={itemH} automaticallyAdjustContentInsets={false} {...layoutProps} onMomentumScrollEnd={onMomentumScrollEnd}>
+        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>);
+      </Animated.ScrollView>);
     };
+    const renderOverlay = () => (<PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle}/>);
     return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
-    {renderScollView()}
-  </SafeAreaView>);
+      {renderScollView()}
+      {renderOverlay()}
+    </SafeAreaView>);
 });
-_PickerViewColumn.displayName = 'mpx-picker-view-column';
+_PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;

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

@@ -1,9 +1,8 @@
 import { View } from 'react-native';
-import { LinearGradient } from 'react-native-linear-gradient';
 import React, { forwardRef, useState, useRef } from 'react';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-import { parseInlineStyle, useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren } from './utils';
+import useNodesRef from './useNodesRef';
+import { useLayout, splitProps, splitStyle, wrapChildren, parseInlineStyle, useTransformStyle, useDebounceCallback, useStableCallback, extendObject } from './utils';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -12,16 +11,6 @@ const styles = {
         justifyContent: 'space-around',
         overflow: 'hidden',
         alignItems: 'center'
-    },
-    maskTop: {
-        position: 'absolute',
-        width: 1000,
-        zIndex: 100
-    },
-    maskBottom: {
-        position: 'absolute',
-        width: 1000,
-        zIndex: 100
     }
 };
 const _PickerView = forwardRef((props, ref) => {
@@ -29,67 +18,62 @@ const _PickerView = forwardRef((props, ref) => {
     // indicatorStyle 需要转换为rn的style
     // 微信设置到pick-view上上设置的normalStyle如border等需要转换成RN的style然后进行透传
     const indicatorStyle = parseInlineStyle(props['indicator-style']);
-    const { height: indicatorH, width: indicatorW } = indicatorStyle;
+    const { height: indicatorH, ...pickerOverlayStyle } = indicatorStyle;
+    const [pickMaxH, setPickMaxH] = useState(0);
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
-    //  picker-view 设置的color等textStyle,在小程序上的表现是可以继承到最内层的text样式, 但是RN内部column是slot无法设置, 需要业务自己在column内的元素上设置
+    const cloneRef = useRef(null);
+    const activeValueRef = useRef(value);
+    activeValueRef.current = value.slice();
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle } = splitStyle(normalStyle);
-    const { textProps } = splitProps(props);
+    useNodesRef(props, ref, nodeRef, {});
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
-    const isSetW = indicatorW !== undefined ? 1 : 0;
-    const cloneRef = useRef(null);
-    const maskPos = {};
-    let [pickH, setPickH] = useState(0);
-    const itemH = pickH / 5;
-    if (normalStyle?.height && pickH && pickH !== normalStyle?.height) {
-        maskPos.height = itemH * 2 + Math.ceil((normalStyle.height - pickH) / 2);
-    }
-    else {
-        maskPos.height = itemH * 2;
-    }
-    const onColumnLayoutChange = (layoutConfig) => {
-        pickH = layoutConfig.height;
-        setPickH(layoutConfig.height);
+    const { textProps } = splitProps(props);
+    const { textStyle } = splitStyle(normalStyle);
+    const onColumnItemRawHChange = (height) => {
+        if (height > pickMaxH) {
+            setPickMaxH(height);
+        }
     };
-    const onSelectChange = (columnIndex, selIndex) => {
-        const changeValue = value.slice();
-        changeValue[columnIndex] = selIndex;
-        const eventData = getCustomEvent('change', {}, { detail: { value: changeValue, source: 'change' }, layoutRef });
-        bindchange && bindchange(eventData);
+    const bindchangeDebounce = useDebounceCallback(useStableCallback(bindchange), 300);
+    const onSelectChange = (columnIndex, selectedIndex) => {
+        bindchangeDebounce.clear();
+        const activeValue = activeValueRef.current;
+        activeValue[columnIndex] = selectedIndex;
+        const eventData = getCustomEvent('change', {}, { detail: { value: activeValue, source: 'change' }, layoutRef });
+        bindchangeDebounce(eventData);
     };
-    const innerProps = useInnerProps(props, {
+    const onInitialChange = (value) => {
+        const eventData = getCustomEvent('change', {}, { detail: { value, source: 'change' }, layoutRef });
+        bindchange?.(eventData); // immediate
+    };
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: {
-            ...normalStyle,
-            ...layoutStyle,
+        style: extendObject(normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
-        },
-        ...layoutProps
-    }, [
-        'enable-offset'
-    ], { layoutRef });
-    const cloneChild = (child, index) => {
-        // const extraProps = index === 0 ? { getInnerLayout: getInnerLayout, innerProps } : {}
+        }),
+        layoutProps
+    }), ['enable-offset'], { layoutRef });
+    const renderColumn = (child, index, columnData, initialIndex) => {
         const extraProps = {};
-        const childProps = {
-            ...child?.props,
+        const childProps = child?.props || {};
+        const wrappedProps = extendObject(childProps, {
+            columnData,
             ref: cloneRef,
-            prefix: index,
-            key: 'pick-view' + index,
+            columnIndex: index,
+            key: `pick-view-${index}`,
             wrapperStyle: {
                 height: normalStyle?.height || 0,
                 itemHeight: indicatorH || 0
             },
-            onColumnLayoutChange,
+            onColumnItemRawHChange,
             onSelectChange: onSelectChange.bind(null, index),
-            selectedIndex: value?.[index] || 0,
-            ...extraProps
-        };
-        const realElement = React.cloneElement(child, childProps);
+            initialIndex,
+            pickerOverlayStyle
+        }, extraProps);
+        const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({
             children: realElement
         }, {
@@ -99,65 +83,37 @@ const _PickerView = forwardRef((props, ref) => {
             textProps
         });
     };
-    const renderTopMask = () => {
-        const linearProps = {
-            colors: ['rgba(255,255,255,0.8)', 'rgba(255,255,255,0.2)'],
-            style: [
-                styles.maskTop,
-                {
-                    height: maskPos.height,
-                    top: 0,
-                    pointerEvents: 'none'
-                }
-            ]
-        };
-        return (<LinearGradient {...linearProps}/>);
-    };
-    const renderBottomMask = () => {
-        const linearProps = {
-            colors: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.8)'],
-            style: [
-                styles.maskBottom,
-                {
-                    height: maskPos.height,
-                    bottom: 0,
-                    pointerEvents: 'none'
-                }
-            ]
-        };
-        return <LinearGradient {...linearProps}></LinearGradient>;
+    const validateChildInitialIndex = (index, data) => {
+        return Math.max(0, Math.min(value[index] || 0, data.length - 1));
     };
-    const renderLine = () => {
-        return <View style={[{
-                    position: 'absolute',
-                    top: '50%',
-                    transform: [{ translateY: -(itemH / 2) }],
-                    height: itemH,
-                    borderTopWidth: 1,
-                    borderBottomWidth: 1,
-                    borderColor: '#f0f0f0',
-                    width: '100%',
-                    zIndex: 101
-                }]}></View>;
-    };
-    const renderSubChild = () => {
-        if (Array.isArray(children)) {
-            return children.map((item, index) => {
-                return cloneChild(item, index);
-            });
-        }
-        else {
-            return cloneChild(children, 0);
+    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));
+        });
+        isInvalid && onInitialChange(validValue);
+        return renderColumns;
     };
     return (<View {...innerProps}>
-    {renderTopMask()}
-    <View style={[styles.wrapper]}>
-      {renderSubChild()}
-    </View>
-    {renderBottomMask()}
-    {!isSetW && renderLine()}
-  </View>);
+      <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
+    </View>);
 });
-_PickerView.displayName = 'mpx-picker-view';
+_PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

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

@@ -1,7 +1,7 @@
 /**
  * ✔ bindchange
  */
-import { useRef, forwardRef, useContext } from 'react';
+import { useRef, forwardRef, useContext, useMemo, useEffect } from 'react';
 import { View } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { FormContext, RadioGroupContext } from './context';
@@ -9,7 +9,9 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { useLayout, useTransformStyle, wrapChildren } 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, bindchange } = props;
+    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const propsRef = useRef({});
+    propsRef.current = props;
     const formContext = useContext(FormContext);
     let formValuesMap;
     if (formContext) {
@@ -28,16 +30,13 @@ const radioGroup = forwardRef((props, ref) => {
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { defaultStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const getSelectionValue = () => {
+    const getValue = () => {
         for (const key in groupValue) {
             if (groupValue[key].checked) {
                 return key;
             }
         }
     };
-    const getValue = () => {
-        return getSelectionValue();
-    };
     const resetValue = () => {
         Object.keys(groupValue).forEach((key) => {
             groupValue[key].checked = false;
@@ -52,15 +51,29 @@ const radioGroup = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
-    const notifyChange = (evt) => {
-        bindchange &&
-            bindchange(getCustomEvent('tap', evt, {
-                layoutRef,
-                detail: {
-                    value: getSelectionValue()
-                }
-            }, props));
-    };
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    const contextValue = useMemo(() => {
+        const notifyChange = (evt) => {
+            const { bindchange } = propsRef.current;
+            bindchange &&
+                bindchange(getCustomEvent('tap', evt, {
+                    layoutRef,
+                    detail: {
+                        value: getValue()
+                    }
+                }, propsRef.current));
+        };
+        return {
+            groupValue,
+            notifyChange
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -69,7 +82,7 @@ const radioGroup = forwardRef((props, ref) => {
         layoutRef
     });
     return (<View {...innerProps}>
-      <RadioGroupContext.Provider value={{ groupValue, notifyChange }}>
+      <RadioGroupContext.Provider value={contextValue}>
         {wrapChildren(props, {
             hasVarDec,
             varContext: varContextRef.current
@@ -77,5 +90,5 @@ const radioGroup = forwardRef((props, ref) => {
       </RadioGroupContext.Provider>
     </View>);
 });
-radioGroup.displayName = 'mpx-radio-group';
+radioGroup.displayName = 'MpxRadioGroup';
 export default radioGroup;

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

@@ -151,5 +151,5 @@ const Radio = forwardRef((radioProps, ref) => {
         })}
       </View>);
 });
-Radio.displayName = 'mpx-radio';
+Radio.displayName = 'MpxRadio';
 export default Radio;

package/lib/runtime/components/react/dist/mpx-root-portal.jsx

@@ -11,5 +11,5 @@ const _RootPortal = (props) => {
     </Portal>
         : <>{children}</>;
 };
-_RootPortal.displayName = 'mpx-root-portal';
+_RootPortal.displayName = 'MpxRootPortal';
 export default _RootPortal;