@mpxjs/webpack-plugin 2.10.16 → 2.10.17-beta.10

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

@@ -0,0 +1,106 @@
+import React from 'react';
+export declare const enum PickerMode {
+    SELECTOR = "selector",
+    MULTI_SELECTOR = "multiSelector",
+    TIME = "time",
+    DATE = "date",
+    REGION = "region"
+}
+export type PickerValue = number;
+export type Obj = Record<string, any>;
+export type RangeItem = Obj | number | string;
+export type TimeValue = `${number}-${number}-${number}` | '';
+/** 通用属性 */
+export interface BasePickerProps {
+    /** --- 小程序属性 --- */
+    /** 选择器类型, 默认值 selector */
+    mode?: PickerMode;
+    /** 是否禁用, 默认值 false */
+    disabled?: boolean;
+    /** 点击取消按钮时触发 */
+    bindcancel?: Function;
+    /** 头部标题 */
+    'header-text'?: string;
+    /** --- 内部组件属性 --- */
+    /** 作为表单组件时的名称 */
+    name?: string;
+    style?: Record<string, any>;
+    children?: React.ReactNode;
+    range?: RangeItem[];
+    ref?: any;
+}
+export interface SelectorProps extends BasePickerProps {
+    mode: PickerMode.SELECTOR;
+    /**  默认值 0 */
+    value?: number;
+    /** 默认值 [] */
+    range?: RangeItem[];
+    'range-key'?: string;
+    /** 点击确认按钮后触发 change 事件, event.detail = {value} */
+    bindchange?: Function;
+}
+export interface MultiSelectorProps extends BasePickerProps {
+    mode: PickerMode.MULTI_SELECTOR;
+    /** 默认值 [] */
+    value?: number[];
+    range?: RangeItem[];
+    'range-key'?: string;
+    bindchange?: Function;
+    bindcolumnchange?: Function;
+}
+export interface TimeProps extends BasePickerProps {
+    mode: PickerMode.TIME;
+    /** 表示选中的时间，格式为"hh:mm" */
+    value?: string;
+    start?: string;
+    end?: string;
+    bindchange?: Function;
+}
+export interface DateProps extends BasePickerProps {
+    mode: PickerMode.DATE;
+    /** 默认值 '' */
+    value?: TimeValue;
+    start?: TimeValue;
+    end?: TimeValue;
+    /** 有效值 year,month,day，表示选择器的粒度 */
+    fields?: 'day' | 'month' | 'year';
+    bindchange?: Function;
+}
+export interface RegionProps extends BasePickerProps {
+    mode: PickerMode.REGION;
+    /** 表示选中的省市区，默认选中每一列的第一个值, 默认值 [] */
+    value?: string[];
+    /** 默认值 region */
+    level?: 'province' | 'city' | 'region' | 'sub-district';
+    /** 可为每一列的顶部添加一个自定义的项 */
+    'custom-item'?: string;
+    /** value 改变时触发 change 事件, event.detail = {value, code, postcode},
+     * 其中字段 code 是统计用区划代码, postcode 是邮政编码 */
+    bindchange?: Function;
+}
+export interface RegionObj {
+    value: string;
+    code: string;
+    postcode?: string;
+    children?: RegionObj[];
+}
+export interface PickerData {
+    value: string;
+    label: string;
+    children?: Object[];
+}
+export interface EventType {
+    detail: {
+        value: PickerValue[];
+    };
+}
+export interface LayoutType {
+    nativeEvent: {
+        layout: Obj;
+    };
+}
+export interface FormType {
+    name: string;
+}
+export type PickerProps = SelectorProps | MultiSelectorProps | TimeProps | DateProps | RegionProps;
+export type LanguageCode = 'zh-CN' | 'en-US';

package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts

@@ -0,0 +1,32 @@
+import { View } from 'react-native';
+import React from 'react';
+import { HandlerRef } from '../useNodesRef';
+import type { AnyFunc } from '../types/common';
+/**
+ * ✔ value
+ * ✔ bindchange
+ * ✘ bindpickstart
+ * ✘ bindpickend
+ * ✔ mask-class
+ * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
+ * WebView Only:
+ * ✔ indicator-class
+ * ✔ mask-style
+ * ✘ immediate-change
+ */
+interface PickerViewProps {
+    children: React.ReactNode;
+    value?: Array<number>;
+    bindchange?: AnyFunc;
+    style?: {
+        [key: string]: any;
+    };
+    'enable-wheel-animation'?: boolean;
+    'indicator-style'?: Record<string, any>;
+    'mask-style'?: Record<string, any>;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'enable-offset'?: boolean;
+}
+declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;
+export default _PickerView;

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

@@ -17,7 +17,7 @@ const styles = {
 };
 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 { children, value = [], bindchange, style, 'enable-wheel-animation': enableWheelAnimation = true, '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);
@@ -67,7 +67,7 @@ const _PickerView = forwardRef((props, ref) => {
             columnData,
             ref: cloneRef,
             columnIndex: index,
-            key: `pick-view-${index}`,
+            key: `pick-view-${index}-${columnData.length}`,
             wrapperStyle: {
                 height: normalStyle?.height || DefaultPickerItemH,
                 itemHeight: indicatorH || DefaultPickerItemH
@@ -75,7 +75,8 @@ const _PickerView = forwardRef((props, ref) => {
             onSelectChange: onSelectChange.bind(null, index),
             initialIndex,
             pickerIndicatorStyle,
-            pickerMaskStyle
+            pickerMaskStyle,
+            enableWheelAnimation
         });
         const realElement = React.cloneElement(child, wrappedProps);
         return wrapChildren({

package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SharedValue } from 'react-native-reanimated';
+type ContextValue = SharedValue<number>;
+export declare const PickerViewColumnAnimationContext: import("react").Context<ContextValue | undefined>;
+export declare const usePickerViewColumnAnimationContext: () => ContextValue;
+export declare const PickerViewStyleContext: import("react").Context<Record<string, any> | undefined>;
+export declare const usePickerViewStyleContext: () => Record<string, any> | undefined;
+export {};

package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+interface ColumnProps {
+    columnIndex: number;
+    columnData: React.ReactNode[];
+    initialIndex: number;
+    onSelectChange: Function;
+    style: {
+        [key: string]: any;
+    };
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    wrapperStyle: {
+        height: number;
+        itemHeight: number;
+    };
+    pickerMaskStyle: Record<string, any>;
+    pickerIndicatorStyle: Record<string, any>;
+    enableWheelAnimation?: boolean;
+}
+declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
+export default _PickerViewColumn;

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

@@ -5,12 +5,13 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
 import useNodesRef from '../useNodesRef';
 import PickerIndicator from './pickerViewIndicator';
 import PickerMask from './pickerViewMask';
-import MpxPickerVIewColumnItem from './pickerViewColumnItem';
+import MpxPickerViewColumnItem from './pickerViewColumnItem';
+import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite';
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext';
 import { calcHeightOffsets } from './pickerViewFaces';
 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 { columnData, columnIndex, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerIndicatorStyle, enableWheelAnimation = true, '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);
@@ -43,6 +44,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const contentContainerStyle = useMemo(() => {
         return [{ paddingVertical: paddingHeight }];
     }, [paddingHeight]);
+    const initialContentOffsetY = useMemo(() => initialIndex * itemRawH, [initialIndex, itemRawH]);
     const getIndex = useCallback((y) => {
         const calc = Math.round(y / itemRawH);
         return Math.max(0, Math.min(calc, maxIndex));
@@ -92,16 +94,6 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             activeIndex.current = initialIndex;
         }, isIOS ? 0 : 200);
     }, [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 });
-                activeIndex.current = initialIndex;
-            }, 0);
-        }
-    }, [itemRawH, initialIndex]);
     const onItemLayout = useCallback((e) => {
         const { height: rawH } = e.nativeEvent.layout;
         const roundedH = Math.round(rawH);
@@ -217,7 +209,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     }, [itemRawH, maxIndex, calcOffset, onMomentumScrollEnd]);
     const renderInnerchild = () => columnData.map((item, index) => {
-        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+        return enableWheelAnimation
+            ? (<MpxPickerViewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>)
+            : (<MpxPickerViewColumnItemLite key={index} item={item} index={index} itemHeight={itemHeight} textStyle={textStyle} textProps={textProps} onItemLayout={onItemLayout}/>);
     });
     const renderScollView = () => {
         const innerProps = extendObject({}, layoutProps, {
@@ -238,17 +232,17 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             onScrollEndDrag,
             onMomentumScrollBegin,
             onMomentumScrollEnd,
-            onContentSizeChange,
-            contentContainerStyle
+            contentContainerStyle,
+            contentOffset: { x: 0, y: initialContentOffsetY }
         });
         return createElement(PickerViewColumnAnimationContext.Provider, { value: offsetYShared }, createElement(Reanimated.ScrollView, innerProps, renderInnerchild()));
     };
     const renderIndicator = () => (<PickerIndicator itemHeight={itemHeight} indicatorItemStyle={pickerIndicatorStyle}/>);
     const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
     return (<View style={[styles.wrapper, normalStyle]}>
-        {renderScollView()}
-        {renderMask()}
-        {renderIndicator()}
+      {renderScollView()}
+      {renderMask()}
+      {renderIndicator()}
     </View>);
 });
 const styles = StyleSheet.create({

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+interface PickerColumnItemProps {
+    item: React.ReactElement;
+    index: number;
+    itemHeight: number;
+    itemWidth?: number | '100%';
+    textStyle: Record<string, any>;
+    visibleCount: number;
+    textProps?: any;
+    onItemLayout?: (e: LayoutChangeEvent) => void;
+}
+declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;
+export default PickerViewColumnItem;

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

@@ -1,23 +1,20 @@
-import React, { useEffect } from 'react';
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import React, { useMemo } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 import { extendObject } from '../utils';
 import { createFaces } from './pickerViewFaces';
 import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/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 facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount]);
     const animatedStyles = useAnimatedStyle(() => {
-        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
+        const inputRange = facesShared.map((f) => itemHeight * (index + f.index));
         return {
-            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+            opacity: interpolate(offsetYShared.value, inputRange, facesShared.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) }
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
             ]
         };
     });

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+interface PickerColumnItemProps {
+    item: React.ReactElement;
+    index: number;
+    itemHeight: number;
+    itemWidth?: number | '100%';
+    textStyle: Record<string, any>;
+    textProps?: any;
+    onItemLayout?: (e: LayoutChangeEvent) => void;
+}
+declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;
+export default PickerViewColumnItem;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+import { extendObject } from '../utils';
+import { usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext';
+const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', textStyle, textProps, onItemLayout }) => {
+    const textStyleFromAncestor = usePickerViewStyleContext();
+    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 (<View key={strKey} style={[
+            { height: itemHeight, width: itemWidth, pointerEvents: 'none' }
+        ]}>
+      {realItem}
+    </View>);
+};
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default PickerViewColumnItem;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export type Faces = {
+    index: number;
+    deg: number;
+    offsetY: number;
+    opacity: number;
+    scale: number;
+    screenHeight: number;
+};
+export declare const degToRad: (deg: number) => number;
+export declare const calcPickerHeight: (faces: Faces[], itemHeight: number) => number;
+export declare const calcHeightOffsets: (itemHeight: number) => number[];
+export declare const createFaces: (itemHeight: number, visibleCount: number) => Faces[];

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type IndicatorProps = {
+    itemHeight: number;
+    indicatorItemStyle?: StyleProp<ViewStyle>;
+    indicatorContainerStyle?: StyleProp<ViewStyle>;
+};
+declare const _PickerViewIndicator: {
+    ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }: IndicatorProps): React.JSX.Element;
+    displayName: string;
+};
+export default _PickerViewIndicator;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type MaskProps = {
+    itemHeight: number;
+    maskContainerStyle?: StyleProp<ViewStyle>;
+};
+declare const _PickerViewMask: {
+    ({ itemHeight, maskContainerStyle }: MaskProps): React.JSX.Element;
+    displayName: string;
+};
+export default _PickerViewMask;

package/lib/runtime/components/react/dist/mpx-popup/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { PopupBaseProps } from './popupBase';
+export declare const enum PopupType {
+    PICKER = "picker"
+}
+export interface IUsePopupOptions {
+    modal?: React.ComponentType<PopupBaseProps>;
+    type?: PopupType;
+}
+/**
+ * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
+ */
+declare const createPopupManager: (options?: IUsePopupOptions) => {
+    open: (childComponent: React.ReactNode, pageId: number | undefined, options?: {
+        contentHeight?: number;
+    }) => void;
+    show: () => void;
+    hide: () => void;
+    update: (updatedChild: ReactElement | null) => void;
+    remove: () => void;
+};
+export { createPopupManager };

package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface PopupBaseProps {
+    children?: React.ReactNode;
+    hide?: () => void;
+    contentHeight?: number;
+    visible?: boolean;
+}
+/**
+ * 类似微信 picker 弹窗的动画效果都可以复用此类容器
+ * 其他特定类型的弹窗容器组件可以在此基础上封装，或者扩展实现
+ */
+declare const PopupBase: {
+    (props?: PopupBaseProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default PopupBase;

package/lib/runtime/components/react/dist/mpx-portal/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    children?: ReactNode;
+};
+declare const Portal: {
+    ({ children }: PortalProps): null;
+    Host: ({ children }: {
+        children: ReactNode;
+        pageId: number;
+    }) => JSX.Element;
+    add: (e: ReactNode, id: number | null) => number;
+    remove: (key: number) => void;
+    update: (key: number, e: ReactNode) => void;
+};
+export default Portal;

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

@@ -1,14 +1,18 @@
 import { useContext, useEffect, useRef } from 'react';
-import { PortalContext, RouteContext, VarContext } from '../context';
+import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context';
 import PortalHost, { portal } from './portal-host';
 const Portal = ({ children }) => {
     const manager = useContext(PortalContext);
     const keyRef = useRef(null);
     const { pageId } = useContext(RouteContext) || {};
     const varContext = useContext(VarContext);
+    const parentProvides = useContext(ProviderContext);
     if (varContext) {
         children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
     }
+    if (parentProvides) {
+        children = (<ProviderContext.Provider value={parentProvides} key='providerContextWrap'>{children}</ProviderContext.Provider>);
+    }
     useEffect(() => {
         manager.update(keyRef.current, children);
     }, [children]);

package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+type PortalHostProps = {
+    children: ReactNode;
+    pageId: number;
+};
+export type Operation = {
+    type: 'mount';
+    key: number;
+    children: ReactNode;
+} | {
+    type: 'update';
+    key: number;
+    children: ReactNode;
+} | {
+    type: 'unmount';
+    key: number;
+};
+declare class PortalGuard {
+    private nextKey;
+    add: (e: ReactNode, id: number | null) => number;
+    remove: (key: number) => void;
+    update: (key: number, e: ReactNode) => void;
+}
+/**
+ * portal
+ */
+export declare const portal: PortalGuard;
+declare const PortalHost: ({ children }: PortalHostProps) => JSX.Element;
+export default PortalHost;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type State = {
+    portals: Array<{
+        key: number;
+        children: ReactNode;
+    }>;
+};
+declare const _PortalManager: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export default _PortalManager;

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

@@ -7,7 +7,7 @@ const _PortalManager = forwardRef((props, ref) => {
         setState((prevState) => ({
             portals: [...prevState.portals, { key, children }]
         }));
-    }, [state]);
+    }, []);
     const update = useCallback((key, children) => {
         setState((prevState) => ({
             portals: prevState.portals.map((item) => {
@@ -17,7 +17,7 @@ const _PortalManager = forwardRef((props, ref) => {
                 return item;
             })
         }));
-    }, [state]);
+    }, []);
     const unmount = useCallback((key) => {
         setState((prevState) => ({
             portals: prevState.portals.filter((item) => item.key !== key)

package/lib/runtime/components/react/dist/mpx-progress.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { View, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface ProgressProps {
+    percent?: number;
+    'stroke-width'?: number | string;
+    color?: string;
+    activeColor?: string;
+    backgroundColor?: string;
+    active?: boolean;
+    'active-mode'?: 'backwards' | 'forwards';
+    duration?: number;
+    bindactiveend?: (event: any) => void;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HandlerRef<View, ProgressProps>>>;
+export default Progress;

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

@@ -0,0 +1,20 @@
+/**
+ * ✔ bindchange
+ */
+import { ReactNode } from 'react';
+import { View, NativeSyntheticEvent, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface RadioGroupProps {
+    name: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindchange?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const radioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HandlerRef<View, RadioGroupProps>>>;
+export default radioGroup;

package/lib/runtime/components/react/dist/mpx-radio.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ✔ value
+ * ✔ disabled
+ * ✔ checked
+ * ✔ color
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface RadioProps {
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    color?: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HandlerRef<View, RadioProps>>>;
+export default Radio;

package/lib/runtime/components/react/dist/mpx-recycle-view.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+interface ListItem {
+    isSectionHeader?: boolean;
+    _originalItemIndex?: number;
+    [key: string]: any;
+}
+interface ItemHeightType {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+}
+interface RecycleViewProps {
+    enhanced?: boolean;
+    bounces?: boolean;
+    scrollEventThrottle?: number;
+    height?: number | string;
+    width?: number | string;
+    listData?: ListItem[];
+    generichash?: string;
+    style?: Record<string, any>;
+    itemHeight?: ItemHeightType;
+    sectionHeaderHeight?: ItemHeightType;
+    listHeaderData?: any;
+    listHeaderHeight?: ItemHeightType;
+    useListHeader?: boolean;
+    'genericrecycle-item'?: string;
+    'genericsection-header'?: string;
+    'genericlist-header'?: string;
+    'enable-var'?: boolean;
+    'external-var-context'?: any;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-sticky'?: boolean;
+    'enable-back-to-top'?: boolean;
+    'end-reached-threshold'?: number;
+    'refresher-enabled'?: boolean;
+    'show-scrollbar'?: boolean;
+    'refresher-triggered'?: boolean;
+    bindrefresherrefresh?: (event: any) => void;
+    bindscrolltolower?: (event: any) => void;
+    bindscroll?: (event: any) => void;
+    [key: string]: any;
+}
+declare const RecycleView: React.ForwardRefExoticComponent<Omit<RecycleViewProps, "ref"> & React.RefAttributes<any>>;
+export default RecycleView;