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

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

@@ -10,9 +10,10 @@ import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils';
 import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
+import { GestureDetector } from 'react-native-gesture-handler';
 const linearMap = new Map([
     ['top', 0],
     ['bottom', 180],
@@ -441,7 +442,7 @@ function inheritStyle(innerStyle = {}) {
         }
         : undefined);
 }
-function wrapImage(imageStyle, innerStyle, enableFastImage) {
+function useWrapImage(imageStyle, innerStyle, enableFastImage) {
     // 预处理数据
     const preImageInfo = preParseImage(imageStyle);
     // 预解析
@@ -534,14 +535,14 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
         textProps
     });
     return [
-        enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        enableBackground ? useWrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
         children
     ];
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
     let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
-    const [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = style.display === 'flex'
         ? {
@@ -551,6 +552,8 @@ const _View = forwardRef((viewProps, ref) => {
             flexWrap: 'nowrap'
         }
         : {};
+    const enableHover = !!hoverStyle;
+    const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime });
     const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
@@ -569,58 +572,17 @@ const _View = forwardRef((viewProps, ref) => {
     useNodesRef(props, ref, nodeRef, {
         style: normalStyle
     });
-    const dataRef = useRef({});
-    useEffect(() => {
-        return () => {
-            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        };
-    }, []);
-    const setStartTimer = () => {
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.startTimer = setTimeout(() => {
-            setIsHover(true);
-        }, +hoverStartTime);
-    };
-    const setStayTimer = () => {
-        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.stayTimer = setTimeout(() => {
-            setIsHover(false);
-        }, +hoverStayTime);
-    };
-    function onTouchStart(e) {
-        const { bindtouchstart } = props;
-        bindtouchstart && bindtouchstart(e);
-        setStartTimer();
-    }
-    function onTouchEnd(e) {
-        const { bindtouchend } = props;
-        bindtouchend && bindtouchend(e);
-        setStayTimer();
-    }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = extendObject({}, innerStyle, layoutStyle);
-    enableAnimation = enableAnimation || !!animation;
-    const enableAnimationRef = useRef(enableAnimation);
-    if (enableAnimationRef.current !== enableAnimation) {
-        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
-    }
-    const finalStyle = enableAnimationRef.current
-        ? [viewStyle, useAnimationHooks({
-                animation,
-                style: viewStyle
-            })]
-        : viewStyle;
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+        enableAnimation,
+        animation,
+        style: viewStyle
+    });
     const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: finalStyle
-    }, layoutProps, hoverStyle
-        ? {
-            bindtouchstart: onTouchStart,
-            bindtouchend: onTouchEnd
-        }
-        : {}), [
+        style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
+    }, layoutProps), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -638,9 +600,12 @@ const _View = forwardRef((viewProps, ref) => {
         innerStyle,
         enableFastImage
     });
-    return enableAnimation
+    const BaseComponent = enableStyleAnimation
         ? createElement(Animated.View, innerProps, childNode)
         : createElement(View, innerProps, childNode);
+    return enableHover
+        ? createElement(GestureDetector, { gesture: gesture }, BaseComponent)
+        : BaseComponent;
 });
 _View.displayName = 'MpxView';
 export default _View;

package/lib/runtime/components/react/dist/pickerFaces.js

@@ -30,9 +30,6 @@ export const createFaces = (itemHeight, visibleCount) => {
             for (let i = 0; i < index; i++) {
                 offset += freeSpaces[i];
             }
-            if (index === 0) {
-                offset *= 0.6;
-            }
             return offset;
         });
         return [screenHeights, offsets];
@@ -41,15 +38,13 @@ export const createFaces = (itemHeight, visibleCount) => {
         const map = {
             0: 0,
             1: 0.8,
-            2: 0.9 // 0.35
-            // 3: 0.45, // 0.45
-            // 4: 0.5 // 0.5
+            2: 0.9
         };
         return map[index] ?? Math.min(1, map[2] + index * 0.05);
     };
     const degrees = getDegreesRelativeCenter();
     const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
-    const scales = [1, 0.925, 0.8];
+    const scales = [0.973, 0.9, 0.8];
     return [
         // top items
         ...degrees
@@ -65,7 +60,7 @@ export const createFaces = (itemHeight, visibleCount) => {
         })
             .reverse(),
         // center item
-        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1.031, screenHeight: itemHeight },
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
         // bottom items
         ...degrees.map((degree, index) => {
             return {

package/lib/runtime/components/react/dist/pickerVIewContext.js

@@ -7,3 +7,8 @@ export const usePickerViewColumnAnimationContext = () => {
     }
     return value;
 };
+export const PickerViewStyleContext = createContext(undefined);
+export const usePickerViewStyleContext = () => {
+    const value = useContext(PickerViewStyleContext);
+    return value;
+};

package/lib/runtime/components/react/dist/{pickerViewOverlay.jsx → pickerViewIndicator.jsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-const _PickerViewOverlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }) => {
-    return (<View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
-      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]}/>
+const _PickerViewIndicator = ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }) => {
+    return (<View style={[styles.indicatorContainer, indicatorContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, indicatorItemStyle]}/>
     </View>);
 };
 const styles = StyleSheet.create({
-    overlayContainer: {
+    indicatorContainer: {
         ...StyleSheet.absoluteFillObject,
         justifyContent: 'center',
         alignItems: 'center',
@@ -19,5 +19,5 @@ const styles = StyleSheet.create({
         alignSelf: 'stretch'
     }
 });
-_PickerViewOverlay.displayName = 'MpxPickerViewOverlay';
-export default _PickerViewOverlay;
+_PickerViewIndicator.displayName = 'MpxPickerViewIndicator';
+export default _PickerViewIndicator;

package/lib/runtime/components/react/dist/pickerViewMask.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 const _PickerViewMask = ({ itemHeight, maskContainerStyle }) => {
-    return (<View style={[styles.overlayContainer, maskContainerStyle]} pointerEvents={'none'}>
+    return (<View style={[styles.maskContainer, maskContainerStyle]} pointerEvents={'none'}>
       <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }}/>
       <View style={{ height: itemHeight }}/>
       <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }}/>
     </View>);
 };
 const styles = StyleSheet.create({
-    overlayContainer: {
+    maskContainer: {
         ...StyleSheet.absoluteFillObject,
         zIndex: 100
     }

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
+import { error } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
@@ -75,7 +76,7 @@ const parseTransform = (transformStr) => {
     const values = parseValues(transformStr);
     const transform = [];
     values.forEach(item => {
-        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        const match = item.match(/([/\w]+)\((.+)\)/);
         if (match && match.length >= 3) {
             let key = match[1];
             const val = match[2];
@@ -132,19 +133,29 @@ const formatStyle = (style) => {
     });
 };
 export default function useAnimationHooks(props) {
-    const { style = {}, animation } = props;
+    const { style = {}, animation, enableAnimation } = props;
+    const enableStyleAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableStyleAnimation);
+    if (enableAnimationRef.current !== enableStyleAnimation) {
+        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    if (!enableAnimationRef.current)
+        return { enableStyleAnimation: false };
     const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedStyleKeys = useSharedValue([]);
     // 记录动画key的style样式值 没有的话设置为false
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const animatedKeys = useRef({});
     // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
     // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const shareValMap = useMemo(() => {
         return Object.keys(InitialValue).reduce((valMap, key) => {
             const defaultVal = getInitialVal(key, isTransform(key));
@@ -153,6 +164,7 @@ export default function useAnimationHooks(props) {
         }, {});
     }, []);
     // ** 获取动画样式prop & 驱动动画
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         if (id === -1)
             return;
@@ -174,6 +186,7 @@ export default function useAnimationHooks(props) {
     //   })
     // }, [style])
     // ** 清空动画
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         return () => {
             Object.values(shareValMap).forEach((value) => {
@@ -206,14 +219,13 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
+                const ruleV = isTransform(key) ? transform.get(key) : rules.get(key);
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                const toVal = rules.get(key) !== undefined
-                    ? rules.get(key)
-                    : transform.get(key) !== undefined
-                        ? transform.get(key)
-                        : index > 0
-                            ? lastValueMap[key]
-                            : shareValMap[key].value;
+                const toVal = ruleV !== undefined
+                    ? ruleV
+                    : index > 0
+                        ? lastValueMap[key]
+                        : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -307,7 +319,8 @@ export default function useAnimationHooks(props) {
         }, {});
     }
     // ** 生成动画样式
-    return useAnimatedStyle(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const animationStyle = useAnimatedStyle(() => {
         // console.info(`useAnimatedStyle styles=`, originalStyle)
         return animatedStyleKeys.value.reduce((styles, key) => {
             // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -326,4 +339,8 @@ export default function useAnimationHooks(props) {
             return styles;
         }, {});
     });
+    return {
+        enableStyleAnimation: enableAnimationRef.current,
+        animationStyle
+    };
 }