@mpxjs/webpack-plugin 2.10.3 → 2.10.4

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

@@ -1,242 +1,114 @@
-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%'
+import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { warn } from '@mpxjs/utils';
+import MpxPickerView from '../mpx-picker-view';
+import MpxPickerViewColumn from '../mpx-picker-view-column';
+import { useUpdateEffect } from '../utils';
+const styles = StyleSheet.create({
+    pickerContainer: {
+        width: 120,
+        height: 240,
+        alignSelf: 'center',
+        paddingHorizontal: 10,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10
     },
-    hideModal: {
-        opacity: 1,
-        height: 0
+    pickerIndicator: {
+        height: 45
     },
-    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
+    pickerItem: {
+        fontSize: 20,
+        lineHeight: 45,
+        textAlign: 'center'
     }
-};
-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;
+});
+const time2Array = (time, defaultValue = [0, 0]) => {
+    if (typeof time !== 'string') {
+        warn('[mpx runtime warn]: mpx-picker prop time must be a string');
+        return defaultValue;
     }
-    if (minute < 10) {
-        minute = '0' + minute;
+    let [hour = 0, minute = 0] = time.split(':').map(Number);
+    hour = Math.min(Math.max(hour, 0), 23);
+    minute = Math.min(Math.max(minute, 0), 59);
+    return [hour, minute];
+};
+const time2String = (time) => {
+    return time.map(i => i.toString().padStart(2, '0')).join(':');
+};
+const time2Minutes = (time) => {
+    return time[0] * 60 + time[1];
+};
+const calibrateTime = (time, start = [0, 0], end = [23, 59]) => {
+    time = typeof time === 'string' ? time2Array(time) : time;
+    start = typeof start === 'string' ? time2Array(start) : start;
+    end = typeof end === 'string' ? time2Array(end) : end;
+    const current = time2Minutes(time);
+    if (current < time2Minutes(start)) {
+        return start;
     }
-    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);
+    else if (current > time2Minutes(end)) {
+        return end;
     }
-    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);
+    else {
+        return time;
     }
-    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 hoursRange = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
+const minutesRange = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
+const PickerTime = forwardRef((props, ref) => {
+    const { value = '00:00', start = '00:00', end = '23:59', bindchange } = props;
     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 timerRef = useRef(null);
+    const startArray = time2Array(start);
+    const endArray = time2Array(end, [23, 59]);
+    const [formatValue, setFormatValue] = useState(calibrateTime(value, startArray, endArray));
+    const updateValue = (value = '00:00') => {
+        const calibratedValue = calibrateTime(value, startArray, endArray);
+        setFormatValue(calibratedValue);
     };
-    const handleConfirm = () => {
-        handleModalStatus(false);
-        bindchange && bindchange({
-            detail: {
-                value: formatStr(timevalue)
+    const _props = useRef(props);
+    _props.current = props;
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        getNodeInstance: () => ({
+            props: _props,
+            nodeRef,
+            instance: {
+                style: {}
             }
-        });
-    };
-    const handleCancel = () => {
-        handleModalStatus(false);
-        bindcancel && bindcancel();
-    };
-    const handleChildClick = () => {
-        handleModalStatus(true);
-    };
-    const handlePickChange = (date) => {
-        // 不是有效的值
-        if (!checkSelectedIsValid(strStart, strEnd, date)) {
-            setTimeValue(timevalue);
+        })
+    }));
+    useEffect(() => {
+        return () => {
+            timerRef.current && clearTimeout(timerRef.current);
+        };
+    }, []);
+    useUpdateEffect(() => {
+        const calibratedValue = calibrateTime(value, startArray, endArray);
+        setFormatValue(calibratedValue);
+    }, [value]);
+    const onChange = (e) => {
+        const { value } = e.detail;
+        const calibratedValue = calibrateTime(value, startArray, endArray);
+        bindchange?.({ detail: { value: time2String(calibratedValue) } });
+        if (value[0] !== formatValue[0] || value[1] !== formatValue[1]) {
+            setFormatValue(value);
         }
-        else {
-            // [9, 13]
-            setTimeValue(date);
+        if (value[0] !== calibratedValue[0] || value[1] !== calibratedValue[1]) {
+            timerRef.current && clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => setFormatValue(calibratedValue));
         }
     };
-    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()}
-  </>);
+    return (<MpxPickerView style={styles.pickerContainer} indicator-style={styles.pickerIndicator} value={formatValue} bindchange={onChange}>
+      {/* @ts-expect-error ignore */}
+      <MpxPickerViewColumn key='hour'>
+        {hoursRange.map((item, index) => (<Text key={index} style={styles.pickerItem}>{item}</Text>))}
+      </MpxPickerViewColumn>
+      {/* @ts-expect-error ignore */}
+      <MpxPickerViewColumn key='minute'>
+        {minutesRange.map((item, index) => (<Text key={index} style={styles.pickerItem}>{item}</Text>))}
+      </MpxPickerViewColumn>
+    </MpxPickerView>);
 });
-_TimePicker.displayName = 'mpx-picker-time';
-export default _TimePicker;
+PickerTime.displayName = 'MpxPickerTime';
+export default PickerTime;

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

@@ -1,8 +1,8 @@
 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 useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import useNodesRef from '../useNodesRef';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from '../utils';
 import { PickerViewStyleContext } from './pickerVIewContext';
 const styles = {
     wrapper: {

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

@@ -1,12 +1,13 @@
 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 { 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';
+import MpxPickerVIewColumnItem from './pickerViewColumnItem';
+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;
@@ -22,10 +23,11 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     const [itemRawH, setItemRawH] = useState(itemHeight);
     const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
     const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
-    const touching = useRef(false);
+    const dragging = useRef(false);
     const scrolling = useRef(false);
     const timerResetPosition = useRef(null);
     const timerScrollTo = useRef(null);
+    const timerClickOnce = useRef(null);
     const activeIndex = useRef(initialIndex);
     const prevIndex = usePrevious(initialIndex);
     const prevMaxIndex = usePrevious(maxIndex);
@@ -57,6 +59,12 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             timerScrollTo.current = null;
         }
     }, []);
+    const clearTimerClickOnce = useCallback(() => {
+        if (timerClickOnce.current) {
+            clearTimeout(timerClickOnce.current);
+            timerClickOnce.current = null;
+        }
+    }, []);
     useEffect(() => {
         return () => {
             clearTimerResetPosition();
@@ -66,7 +74,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
-            touching.current ||
+            dragging.current ||
             scrolling.current ||
             prevIndex == null ||
             initialIndex === prevIndex ||
@@ -81,8 +89,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 y: initialIndex * itemRawH,
                 animated: false
             });
-        }, isAndroid ? 200 : 0);
-        activeIndex.current = initialIndex;
+            activeIndex.current = initialIndex;
+        }, isIOS ? 0 : 200);
     }, [itemRawH, maxIndex, initialIndex]);
     const onContentSizeChange = useCallback((_w, h) => {
         const y = initialIndex * itemRawH;
@@ -90,6 +98,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             clearTimerScrollTo();
             timerScrollTo.current = setTimeout(() => {
                 scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
+                activeIndex.current = initialIndex;
             }, 0);
         }
     }, [itemRawH, initialIndex]);
@@ -101,7 +110,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
     }, [itemRawH]);
     const resetScrollPosition = useCallback((y) => {
-        if (touching.current || scrolling.current) {
+        if (dragging.current || scrolling.current) {
             return;
         }
         scrolling.current = true;
@@ -126,14 +135,14 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH, getIndex, onSelectChange, resetScrollPosition]);
     const onScrollBeginDrag = useCallback(() => {
         isIOS && clearTimerResetPosition();
-        touching.current = true;
+        dragging.current = true;
         prevScrollingInfo.current = {
             index: activeIndex.current,
             y: activeIndex.current * itemRawH
         };
     }, [itemRawH]);
     const onScrollEndDrag = useCallback((e) => {
-        touching.current = false;
+        dragging.current = false;
         if (isIOS) {
             const { y } = e.nativeEvent.contentOffset;
             if (y % itemRawH === 0) {
@@ -154,7 +163,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
         }
         const { y } = e.nativeEvent.contentOffset;
         const { index: prevIndex, y: _y } = prevScrollingInfo.current;
-        if (touching.current || scrolling.current) {
+        if (dragging.current || scrolling.current) {
             if (Math.abs(y - _y) >= itemRawH) {
                 const currentId = getIndex(y);
                 if (currentId !== prevIndex) {
@@ -168,12 +177,51 @@ const _PickerViewColumn = forwardRef((props, ref) => {
             }
         }
     }, [itemRawH, getIndex]);
+    const offsetHeights = useMemo(() => calcHeightOffsets(itemRawH), [itemRawH]);
+    const calcOffset = useCallback((y) => {
+        const baselineY = activeIndex.current * itemRawH + pickerH / 2;
+        const diff = Math.abs(y - baselineY);
+        const positive = y - baselineY > 0 ? 1 : -1;
+        const [h1, h2, h3] = offsetHeights;
+        if (diff > h1 && diff < h3) {
+            if (diff < h2) {
+                return 1 * positive;
+            }
+            else {
+                return 2 * positive;
+            }
+        }
+        return false;
+    }, [offsetHeights]);
+    /**
+     * 和小程序表现对齐，点击（不滑动）非焦点选项自动滚动到对应位置
+     */
+    const onClickOnceItem = useCallback((e) => {
+        const { locationY } = e.nativeEvent || {};
+        const offsetIndex = calcOffset(locationY);
+        if (dragging.current || !offsetIndex) {
+            return;
+        }
+        const targetIndex = activeIndex.current + offsetIndex;
+        if (targetIndex < 0 || targetIndex > maxIndex) {
+            return;
+        }
+        const y = targetIndex * itemRawH;
+        scrollViewRef.current?.scrollTo({ x: 0, y, animated: true });
+        if (isAndroid) {
+            // Android scrollTo 不会自动触发 onMomentumScrollEnd，需要手动触发
+            clearTimerClickOnce();
+            timerClickOnce.current = setTimeout(() => {
+                onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
+            }, 250);
+        }
+    }, [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}/>);
     });
     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}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} onTouchStart={onClickOnceItem} 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>);
@@ -181,9 +229,9 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     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-item.jsx → mpx-picker-view-column/pickerViewColumnItem.jsx}

@@ -1,8 +1,8 @@
 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';
+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();
@@ -27,8 +27,11 @@ const PickerViewColumnItem = ({ item, index, itemHeight, itemWidth = '100%', tex
         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}
+    return (<Reanimated.View key={strKey} style={[
+            { height: itemHeight, width: itemWidth, pointerEvents: 'none' },
+            animatedStyles
+        ]}>
+        {realItem}
     </Reanimated.View>);
 };
 PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';

package/lib/runtime/components/react/dist/{pickerFaces.js → mpx-picker-view-column/pickerViewFaces.js}

@@ -11,6 +11,12 @@ export const calcPickerHeight = (faces, itemHeight) => {
     }
     return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0);
 };
+export const calcHeightOffsets = (itemHeight) => {
+    const h1 = itemHeight / 2;
+    const h2 = h1 + calcHeight(30, itemHeight);
+    const h3 = h2 + calcHeight(60, itemHeight);
+    return [h1, h2, h3];
+};
 export const createFaces = (itemHeight, visibleCount) => {
     // e.g [30, 60, 90]
     const getDegreesRelativeCenter = () => {

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

@@ -0,0 +1,61 @@
+import { cloneElement } from 'react';
+import Portal from '../mpx-portal';
+import PopupBase from './popupBase';
+/**
+ * 根据 type 返回对应的弹窗壳子组件
+ */
+const getPopup = (type) => {
+    switch (type) {
+        case "picker" /* PopupType.PICKER */:
+        default:
+            return PopupBase;
+    }
+};
+/**
+ * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
+ */
+const createPopupManager = (options = {}) => {
+    const { modal, type } = options;
+    const Modal = modal || getPopup(type);
+    let popupKey = null;
+    let isOpen = false;
+    let child = null;
+    const remove = () => {
+        if (popupKey !== null) {
+            Portal.remove(popupKey);
+            popupKey = null;
+        }
+        isOpen = false;
+    };
+    const open = (childComponent, pageId, options) => {
+        if (!isOpen && pageId != null) {
+            isOpen = true;
+            child = (<Modal hide={hide} {...options} visible={false}>
+          {childComponent}
+        </Modal>);
+            popupKey = Portal.add(child, pageId);
+        }
+    };
+    const update = (updatedChild) => {
+        if (popupKey !== null && child !== null && updatedChild !== null) {
+            child = cloneElement(child, { children: updatedChild });
+            Portal.update(popupKey, child);
+        }
+    };
+    const _updateVisible = (visible) => {
+        if (popupKey !== null && child !== null) {
+            child = cloneElement(child, { visible });
+            Portal.update(popupKey, child);
+        }
+    };
+    const show = () => _updateVisible(true);
+    const hide = () => _updateVisible(false);
+    return {
+        open,
+        show,
+        hide,
+        update,
+        remove
+    };
+};
+export { createPopupManager };