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

package/lib/runtime/components/react/dist/mpx-canvas/html.js

@@ -316,8 +316,7 @@ var handleError = function (err, message) {
   document.removeEventListener('message', handleIncomingMessage);
 };
 
-function handleIncomingMessage(e) {
-  var data = JSON.parse(e.data);
+function handleIncomingMessage(data) {
   if (Array.isArray(data)) {
     for (var i = 0; i < data.length; i++) {
       try {
@@ -335,8 +334,7 @@ function handleIncomingMessage(e) {
   }
 }
 
-window.addEventListener('message', handleIncomingMessage);
-document.addEventListener('message', handleIncomingMessage);
+window.mpxWebviewMessageCallback = handleIncomingMessage
 </script>
   
 

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

@@ -69,7 +69,11 @@ const _Canvas = forwardRef((props = {}, ref) => {
     useEffect(() => {
         const webviewPostMessage = (message) => {
             if (canvasRef.current.webview) {
-                canvasRef.current.webview.postMessage(JSON.stringify(message));
+                const jsCode = `
+        window.mpxWebviewMessageCallback(${JSON.stringify(message)});
+        true;
+      `;
+                canvasRef.current.webview.injectJavaScript(jsCode);
             }
         };
         // 设置bus

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

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

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

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