@mpxjs/webpack-plugin 2.10.3-beta.17 → 2.10.3-beta.18

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,9 +1,10 @@
 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 React, { createElement, forwardRef, useRef } from 'react';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import useNodesRef from '../useNodesRef';
+import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from '../utils';
 import { PickerViewStyleContext } from './pickerVIewContext';
+import Portal from '../mpx-portal';
 const styles = {
     wrapper: {
         display: 'flex',
@@ -16,14 +17,14 @@ 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);
     const activeValueRef = useRef(value);
     activeValueRef.current = value.slice();
     const snapActiveValueRef = useRef(null);
-    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, { enableVar, externalVarContext });
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
@@ -47,13 +48,12 @@ const _PickerView = forwardRef((props, ref) => {
             snapActiveValueRef.current = value.slice();
         }
     };
-    const innerProps = useInnerProps(props, extendObject({
+    const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle, {
             position: 'relative',
             overflow: 'hidden'
-        }),
-        layoutProps
+        })
     }), [
         'enable-offset',
         'indicator-style',
@@ -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({
@@ -115,11 +116,11 @@ const _PickerView = forwardRef((props, ref) => {
         onInitialChange(isInvalid, validValue);
         return renderColumns;
     };
-    return (<PickerViewStyleContext.Provider value={textStyle}>
-      <View {...innerProps}>
-        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-      </View>
-    </PickerViewStyleContext.Provider>);
+    const finalComponent = createElement(PickerViewStyleContext.Provider, { value: textStyle }, createElement(View, innerProps, createElement(View, { style: [styles.wrapper] }, renderPickerColumns())));
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 _PickerView.displayName = 'MpxPickerView';
 export default _PickerView;

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

@@ -1,15 +1,17 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony } from './utils';
-import useNodesRef from './useNodesRef';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } 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 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);
@@ -22,10 +24,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 +60,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 +75,7 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     useEffect(() => {
         if (!scrollViewRef.current ||
             !itemRawH ||
-            touching.current ||
+            dragging.current ||
             scrolling.current ||
             prevIndex == null ||
             initialIndex === prevIndex ||
@@ -81,8 +90,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                 y: initialIndex * itemRawH,
                 animated: false
             });
-        }, isAndroid || isHarmony ? 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 +99,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 +111,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,17 +136,17 @@ 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;
-        if (isIOS) {
+        dragging.current = false;
+        if (!isAndroid) {
             const { y } = e.nativeEvent.contentOffset;
-            if (y % itemRawH === 0) {
+            if (y % itemRawH === 0 || (isHarmony && y > snapToOffsets[maxIndex])) {
                 onMomentumScrollEnd({ nativeEvent: { contentOffset: { y } } });
             }
             else if (y > 0 && y < snapToOffsets[maxIndex]) {
@@ -148,13 +158,13 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     }, [itemRawH, maxIndex, snapToOffsets, onMomentumScrollEnd, resetScrollPosition]);
     const onScroll = useCallback((e) => {
         // 全局注册的振动触感 hook
-        const pickerVibrate = global.__mpx?.config?.rnConfig?.pickerVibrate;
-        if (typeof pickerVibrate !== 'function') {
+        const onPickerVibrate = global.__mpx?.config?.rnConfig?.onPickerVibrate;
+        if (typeof onPickerVibrate !== 'function') {
             return;
         }
         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) {
@@ -163,20 +173,78 @@ const _PickerViewColumn = forwardRef((props, ref) => {
                         y: currentId * itemRawH
                     };
                     // vibrateShort({ type: 'selection' })
-                    pickerVibrate();
+                    onPickerVibrate();
                 }
             }
         }
     }, [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}/>);
+        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 = () => {
-        return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: '100%' }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
-          {renderInnerchild()}
-        </Reanimated.ScrollView>
-      </PickerViewColumnAnimationContext.Provider>);
+        const innerProps = extendObject({}, layoutProps, {
+            ref: scrollViewRef,
+            bounces: true,
+            horizontal: false,
+            nestedScrollEnabled: true,
+            removeClippedSubviews: false,
+            showsVerticalScrollIndicator: false,
+            showsHorizontalScrollIndicator: false,
+            scrollEventThrottle: 16,
+            style: styles.scrollView,
+            decelerationRate: 'fast',
+            snapToOffsets: snapToOffsets,
+            onTouchEnd: onClickOnceItem,
+            onScroll,
+            onScrollBeginDrag,
+            onScrollEndDrag,
+            onMomentumScrollBegin,
+            onMomentumScrollEnd,
+            onContentSizeChange,
+            contentContainerStyle
+        });
+        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}/>);
@@ -187,7 +255,8 @@ const _PickerViewColumn = forwardRef((props, ref) => {
     </View>);
 });
 const styles = StyleSheet.create({
-    wrapper: { display: 'flex', flex: 1 }
+    wrapper: { display: 'flex', flex: 1 },
+    scrollView: { width: '100%' }
 });
 _PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;