@mpxjs/webpack-plugin 2.9.65 → 2.9.67

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

@@ -7,6 +7,8 @@
 import { View, StyleSheet, Image } from 'react-native';
 import { useRef, useState, useEffect, forwardRef } from 'react';
 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 } from './utils';
 import LinearGradient from 'react-native-linear-gradient';
@@ -527,7 +529,7 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 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, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    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-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     const [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = {
@@ -592,9 +594,10 @@ const _View = forwardRef((viewProps, ref) => {
         setStayTimer();
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: { ...innerStyle, ...layoutStyle },
+        style: viewStyle,
         ...layoutProps,
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
@@ -608,16 +611,32 @@ const _View = forwardRef((viewProps, ref) => {
     ], {
         layoutRef
     });
-    return (<View {...innerProps}>
-      {wrapWithChildren(props, {
-            hasVarDec,
-            enableBackground: enableBackgroundRef.current,
-            textStyle,
-            backgroundStyle,
-            varContext: varContextRef.current,
-            textProps
-        })}
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimation
+        ? useAnimationHooks({
+            animation,
+            style: viewStyle
+        })
+        : viewStyle;
+    const childNode = wrapWithChildren(props, {
+        hasVarDec,
+        enableBackground: enableBackgroundRef.current,
+        textStyle,
+        backgroundStyle,
+        varContext: varContextRef.current,
+        textProps
+    });
+    return animation?.actions?.length
+        ? (<Animated.View {...innerProps} style={finalStyle}>
+      {childNode}
+    </Animated.View>)
+        : (<View {...innerProps}>
+      {childNode}
     </View>);
 });
-_View.displayName = 'mpx-view';
+_View.displayName = 'MpxView';
 export default _View;

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

@@ -6,7 +6,7 @@ import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab }
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
 const _WebView = forwardRef((props, ref) => {
-    const { src, bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
@@ -109,5 +109,5 @@ const _WebView = forwardRef((props, ref) => {
     <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
   </Portal>);
 });
-_WebView.displayName = 'mpx-web-view';
+_WebView.displayName = 'MpxWebview';
 export default _WebView;

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

@@ -0,0 +1,303 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Easing, useSharedValue, withTiming, useAnimatedStyle, withSequence, withDelay, makeMutable, cancelAnimation } from 'react-native-reanimated';
+// 微信 timingFunction 和 RN Easing 对应关系
+const EasingKey = {
+    linear: Easing.linear,
+    ease: Easing.ease,
+    'ease-in': Easing.in(Easing.ease),
+    'ease-in-out': Easing.inOut(Easing.ease),
+    'ease-out': Easing.out(Easing.ease)
+    // 'step-start': '',
+    // 'step-end': ''
+};
+const TransformInitial = {
+    // matrix: 0,
+    // matrix3d: 0,
+    rotate: '0deg',
+    rotateX: '0deg',
+    rotateY: '0deg',
+    rotateZ: '0deg',
+    // rotate3d:[0,0,0]
+    scale: 1,
+    // scale3d: [1, 1, 1],
+    scaleX: 1,
+    scaleY: 1,
+    // scaleZ: 1,
+    skew: 0,
+    skewX: '0deg',
+    skewY: '0deg',
+    translate: 0,
+    // translate3d: 0,
+    translateX: 0,
+    translateY: 0
+    // translateZ: 0,
+};
+// 动画默认初始值
+const InitialValue = Object.assign({
+    opacity: 1,
+    backgroundColor: 'transparent',
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    transformOrigin: ['50%', '50%', 0]
+}, TransformInitial);
+const TransformOrigin = 'transformOrigin';
+// transform
+const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+const parseTransform = (transformStr) => {
+    const values = transformStr.trim().split(/\s+/);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                case 'matrix3d':
+                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'rotate3d': // x y z angle
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
+        }
+    });
+    return transform;
+};
+// format style
+const formatStyle = (style) => {
+    if (!style.transform || Array.isArray(style.transform))
+        return style;
+    return Object.assign({}, style, {
+        transform: parseTransform(style.transform)
+    });
+};
+export default function useAnimationHooks(props) {
+    const { style = {}, animation } = props;
+    const originalStyle = formatStyle(style);
+    // id 标识
+    const id = animation?.id || -1;
+    // 有动画样式的 style key
+    const animatedStyleKeys = useSharedValue([]);
+    // 记录动画key的style样式值 没有的话设置为false
+    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，动画无法驱动。
+    const shareValMap = useMemo(() => {
+        return Object.keys(InitialValue).reduce((valMap, key) => {
+            const defaultVal = getInitialVal(key, isTransform(key));
+            valMap[key] = makeMutable(defaultVal);
+            return valMap;
+        }, {});
+    }, []);
+    // ** 获取动画样式prop & 驱动动画
+    useEffect(() => {
+        if (id === -1)
+            return;
+        // 更新动画样式 key map
+        animatedKeys.current = getAnimatedStyleKeys();
+        const keys = Object.keys(animatedKeys.current);
+        animatedStyleKeys.value = formatAnimatedKeys([TransformOrigin, ...keys]);
+        // 驱动动画
+        createAnimation(keys);
+    }, [id]);
+    // 同步style更新
+    // useEffect(() => {
+    //   Object.keys(animatedKeys.current).forEach(key => {
+    //     const originVal = getOriginalStyleVal(key, isTransform(key))
+    //     if (originVal && animatedKeys.current[key] !== originVal) {
+    //       animatedKeys.current[key] = originVal
+    //       shareValMap[key].value = originVal
+    //     }
+    //   })
+    // }, [style])
+    // ** 清空动画
+    useEffect(() => {
+        return () => {
+            Object.values(shareValMap).forEach((value) => {
+                cancelAnimation(value);
+            });
+        };
+    }, []);
+    // 根据 animation action 创建&驱动动画 key => wi
+    function createAnimation(animatedKeys = []) {
+        const actions = animation?.actions || [];
+        const sequence = {};
+        const lastValueMap = {};
+        actions.forEach(({ animatedOption, rules, transform }, index) => {
+            const { delay, duration, timingFunction, transformOrigin } = animatedOption;
+            const easing = EasingKey[timingFunction] || Easing.inOut(Easing.quad);
+            let needSetCallback = true;
+            const setTransformOrigin = (finished) => {
+                'worklet';
+                // 动画结束后设置下一次transformOrigin
+                if (finished) {
+                    if (index < actions.length - 1) {
+                        const transformOrigin = actions[index + 1].animatedOption?.transformOrigin;
+                        transformOrigin && (shareValMap[TransformOrigin].value = transformOrigin);
+                    }
+                }
+            };
+            if (index === 0) {
+                // 设置当次中心
+                shareValMap[TransformOrigin].value = transformOrigin;
+            }
+            // 添加每个key的多次step动画
+            animatedKeys.forEach(key => {
+                let toVal = (rules.get(key) || transform.get(key));
+                // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
+                if (toVal === undefined) {
+                    toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
+                }
+                const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
+                needSetCallback = false;
+                if (!sequence[key]) {
+                    sequence[key] = [animation];
+                }
+                else {
+                    sequence[key].push(animation);
+                }
+                // 更新一下 lastValueMap
+                lastValueMap[key] = toVal;
+            });
+            // 赋值驱动动画
+            animatedKeys.forEach((key) => {
+                const animations = sequence[key];
+                shareValMap[key].value = withSequence(...animations);
+            });
+        });
+    }
+    // 创建单个animation
+    function getAnimation({ key, value }, { delay, duration, easing }, callback) {
+        const animation = typeof callback === 'function'
+            ? withTiming(value, { duration, easing }, callback)
+            : withTiming(value, { duration, easing });
+        return delay ? withDelay(delay, animation) : animation;
+    }
+    function getInitialVal(key, isTransform = false) {
+        if (isTransform && Array.isArray(originalStyle.transform)) {
+            let initialVal = InitialValue[key];
+            // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+            originalStyle.transform.forEach(item => {
+                if (item[key] !== undefined)
+                    initialVal = item[key];
+            });
+            return initialVal;
+        }
+        return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key];
+    }
+    // 从 prop style 中获取样式初始值 没有为undefined
+    // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   if (isTransform && Array.isArray(originalStyle.transform)) {
+    //     let initialVal = undefined // InitialValue[key]
+    //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+    //     originalStyle.transform.forEach(item => {
+    //       if (item[key] !== undefined) initialVal = item[key]
+    //     })
+    //     return initialVal
+    //   }
+    //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
+    // }
+    // 获取动画shareVal初始值（prop style or 默认值）
+    // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   const originalVal = getOriginalStyleVal(key, isTransform)
+    //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
+    // }
+    // 循环 animation actions 获取所有有动画的 style prop name
+    function getAnimatedStyleKeys() {
+        return (animation?.actions || []).reduce((keyMap, action) => {
+            const { rules, transform } = action;
+            const ruleArr = [...rules.keys(), ...transform.keys()];
+            ruleArr.forEach(key => {
+                // const originalVal = getOriginalStyleVal(key, isTransform(key))
+                // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
+                if (!keyMap[key])
+                    keyMap[key] = true;
+            });
+            return keyMap;
+        }, animatedKeys.current);
+    }
+    // animated key transform 格式化
+    function formatAnimatedKeys(keys = []) {
+        const animatedKeys = [];
+        const transforms = [];
+        keys.forEach(key => {
+            if (isTransform(key)) {
+                transforms.push(key);
+            }
+            else {
+                animatedKeys.push(key);
+            }
+        });
+        if (transforms.length)
+            animatedKeys.push(transforms);
+        return animatedKeys;
+    }
+    // transform 数组转对象
+    function getTransformObj() {
+        'worklet';
+        const transforms = originalStyle.transform || [];
+        return transforms.reduce((transformObj, item) => {
+            return Object.assign(transformObj, item);
+        }, {});
+    }
+    // ** 生成动画样式
+    return useAnimatedStyle(() => {
+        // console.info(`useAnimatedStyle styles=`, originalStyle)
+        return animatedStyleKeys.value.reduce((styles, key) => {
+            // console.info('getAnimationStyles', key, shareValMap[key].value)
+            if (Array.isArray(key)) {
+                const transformStyle = getTransformObj();
+                key.forEach((transformKey) => {
+                    transformStyle[transformKey] = shareValMap[transformKey].value;
+                });
+                styles.transform = Object.entries(transformStyle).map(([key, value]) => {
+                    return { [key]: value };
+                });
+            }
+            else {
+                styles[key] = shareValMap[key].value;
+            }
+            return styles;
+        }, Object.assign({}, originalStyle));
+    });
+}

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

@@ -9,7 +9,7 @@ export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
 export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
 export const DEFAULT_FONT_SIZE = 16;
-export const DEFAULT_UNLAY_STYLE = {
+export const HIDDEN_STYLE = {
     opacity: 0
 };
 const varDecRegExp = /^--.*/;
@@ -87,7 +87,8 @@ export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKe
 export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
-        return displayName === 'mpx-text' || displayName === 'Text';
+        const isCustomText = ele.type?.isCustomText;
+        return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -401,7 +402,7 @@ export function splitProps(props) {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }) => {
     const layoutRef = useRef({});
     const hasLayoutRef = useRef(false);
-    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? DEFAULT_UNLAY_STYLE : {};
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -443,3 +444,12 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     }
     return children;
 }
+export function flatGesture(gestures = []) {
+    return (gestures && gestures.flatMap((gesture) => {
+        if (gesture && gesture.nodeRefs) {
+            return gesture.nodeRefs
+                .map((item) => item.getNodeInstance()?.instance?.gestureRef || {});
+        }
+        return gesture?.current ? [gesture] : [];
+    })) || [];
+}

package/lib/runtime/components/react/getInnerListeners.ts

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+import { NativeSyntheticEvent } from 'react-native'
 import { omit } from './utils'
 import eventConfigMap from './event.config'
 import {

package/lib/runtime/components/react/mpx-button.tsx

@@ -408,6 +408,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 })
 
-Button.displayName = 'mpx-button'
+Button.displayName = 'MpxButton'
 
 export default Button

package/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -1,8 +1,20 @@
 /**
  * ✔ bindchange
  */
-import { JSX, useRef, forwardRef, ReactNode, useContext } from 'react'
-import { View, NativeSyntheticEvent, ViewStyle } from 'react-native'
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  ReactNode,
+  useContext,
+  useMemo,
+  useEffect
+} from 'react'
+import {
+  View,
+  NativeSyntheticEvent,
+  ViewStyle
+} from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { FormContext, FormFieldValue, CheckboxGroupContext, GroupValue } from './context'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
@@ -26,14 +38,15 @@ const CheckboxGroup = forwardRef<
   HandlerRef<View, CheckboxGroupProps>,
   CheckboxGroupProps
 >((props, ref): JSX.Element => {
+  const propsRef = useRef({} as CheckboxGroupProps)
+  propsRef.current = props
   const {
     style = {},
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
     'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
-    'parent-height': parentHeight,
-    bindchange
+    'parent-height': parentHeight
   } = props
 
   const formContext = useContext(FormContext)
@@ -71,7 +84,7 @@ const CheckboxGroup = forwardRef<
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const getSelectionValue = (): string[] => {
+  const getValue = (): string[] => {
     const arr: string[] = []
     for (const key in groupValue) {
       if (groupValue[key].checked) {
@@ -81,10 +94,6 @@ const CheckboxGroup = forwardRef<
     return arr
   }
 
-  const getValue = () => {
-    return getSelectionValue()
-  }
-
   const resetValue = () => {
     Object.keys(groupValue).forEach((key) => {
       groupValue[key].checked = false
@@ -100,24 +109,13 @@ const CheckboxGroup = forwardRef<
     }
   }
 
-  const notifyChange = (
-    evt: NativeSyntheticEvent<TouchEvent>
-  ) => {
-    bindchange &&
-      bindchange(
-        getCustomEvent(
-          'tap',
-          evt,
-          {
-            layoutRef,
-            detail: {
-              value: getSelectionValue()
-            }
-          },
-          props
-        )
-      )
-  }
+  useEffect(() => {
+    return () => {
+      if (formValuesMap && props.name) {
+        formValuesMap.delete(props.name)
+      }
+    }
+  }, [])
 
   const innerProps = useInnerProps(
     props,
@@ -132,9 +130,34 @@ const CheckboxGroup = forwardRef<
     }
   )
 
+  const contextValue = useMemo(() => {
+    const notifyChange = (
+      evt: NativeSyntheticEvent<TouchEvent>
+    ) => {
+      const { bindchange } = propsRef.current
+      bindchange &&
+        bindchange(
+          getCustomEvent(
+            'tap',
+            evt,
+            {
+              layoutRef,
+              detail: {
+                value: getValue()
+              }
+            },
+            propsRef.current
+          )
+        )
+    }
+    return {
+      groupValue,
+      notifyChange
+    }
+  }, [])
   return (
     <View {...innerProps}>
-      <CheckboxGroupContext.Provider value={{ groupValue, notifyChange }}>
+      <CheckboxGroupContext.Provider value={contextValue}>
         {
           wrapChildren(
             props,
@@ -149,6 +172,6 @@ const CheckboxGroup = forwardRef<
   )
 })
 
-CheckboxGroup.displayName = 'mpx-checkbox-group'
+CheckboxGroup.displayName = 'MpxCheckboxGroup'
 
 export default CheckboxGroup

package/lib/runtime/components/react/mpx-checkbox.tsx

@@ -232,6 +232,6 @@ const Checkbox = forwardRef<HandlerRef<View, CheckboxProps>, CheckboxProps>(
   }
 )
 
-Checkbox.displayName = 'mpx-checkbox'
+Checkbox.displayName = 'MpxCheckbox'
 
 export default Checkbox