@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.1

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

@@ -0,0 +1,81 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export const degToRad = (deg) => (Math.PI * deg) / 180;
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree, itemHeight) => itemHeight * Math.cos(degToRad(degree));
+export const calcPickerHeight = (faces, itemHeight) => {
+    if (faces.length === 7) {
+        return itemHeight * 5;
+    }
+    return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0);
+};
+export const createFaces = (itemHeight, visibleCount) => {
+    // e.g [30, 60, 90]
+    const getDegreesRelativeCenter = () => {
+        const maxStep = Math.trunc((visibleCount + 2) / 2); // + 2 because there are 2 more faces at 90 degrees
+        const stepDegree = 90 / maxStep;
+        const result = [];
+        for (let i = 1; i <= maxStep; i++) {
+            result.push(i * stepDegree);
+        }
+        return result;
+    };
+    const getScreenHeightsAndOffsets = (degrees) => {
+        const screenHeights = degrees.map((deg) => calcHeight(deg, itemHeight));
+        const freeSpaces = screenHeights.map((screenHeight) => itemHeight - screenHeight);
+        const offsets = freeSpaces.map((freeSpace, index) => {
+            let offset = freeSpace / 2;
+            for (let i = 0; i < index; i++) {
+                offset += freeSpaces[i];
+            }
+            if (index === 0) {
+                offset *= 0.6;
+            }
+            return offset;
+        });
+        return [screenHeights, offsets];
+    };
+    const getOpacity = (index) => {
+        const map = {
+            0: 0,
+            1: 0.8,
+            2: 0.9 // 0.35
+            // 3: 0.45, // 0.45
+            // 4: 0.5 // 0.5
+        };
+        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];
+    return [
+        // top items
+        ...degrees
+            .map((degree, index) => {
+            return {
+                index: -1 * (index + 1),
+                deg: degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: -1 * offsets[index],
+                scale: scales[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+            .reverse(),
+        // center item
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
+        // bottom items
+        ...degrees.map((degree, index) => {
+            return {
+                index: index + 1,
+                deg: -1 * degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: offsets[index],
+                scale: scales[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+    ];
+};

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

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const PickerViewColumnAnimationContext = createContext(undefined);
+export const usePickerViewColumnAnimationContext = () => {
+    const value = useContext(PickerViewColumnAnimationContext);
+    if (value === undefined) {
+        throw new Error('usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!');
+    }
+    return value;
+};

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

@@ -0,0 +1,18 @@
+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'}>
+      <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: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 100
+    }
+});
+_PickerViewMask.displayName = 'MpxPickerViewMask';
+export default _PickerViewMask;

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

@@ -0,0 +1,23 @@
+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]}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    overlayContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 200
+    },
+    selection: {
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.05)',
+        alignSelf: 'stretch'
+    }
+});
+_PickerViewOverlay.displayName = 'MpxPickerViewOverlay';
+export default _PickerViewOverlay;

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

@@ -47,12 +47,35 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// 多value解析
+const parseValues = (str, char = ' ') => {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+};
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr) => {
-    const values = transformStr.trim().split(/\s+/);
+    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];
@@ -73,7 +96,7 @@ const parseTransform = (transformStr) => {
                     break;
                 case 'matrix':
                 case 'matrix3d':
-                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
                     break;
                 case 'translate':
                 case 'scale':
@@ -84,8 +107,8 @@ const parseTransform = (transformStr) => {
                     {
                         // 2 个以上的值处理
                         key = key.replace('3d', '');
-                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
                         if (vals.length === 1 && key === 'scale') {
                             vals.push(vals[0]);
                         }
@@ -183,11 +206,14 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个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 toVal = rules.get(key) !== undefined
+                    ? rules.get(key)
+                    : transform.get(key) !== undefined
+                        ? transform.get(key)
+                        : index > 0
+                            ? lastValueMap[key]
+                            : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -298,6 +324,6 @@ export default function useAnimationHooks(props) {
                 styles[key] = shareValMap[key].value;
             }
             return styles;
-        }, Object.assign({}, originalStyle));
+        }, {});
     });
 }

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

@@ -1,17 +1,24 @@
-import { useEffect, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
-import { VarContext } from './context';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { Image, Platform } from 'react-native';
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
+import { VarContext, ScrollViewContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+import FastImage from '@d11/react-native-fast-image';
+import { runOnJS } from 'react-native-reanimated';
+import { Gesture } from 'react-native-gesture-handler';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
+export const SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i;
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
-export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines|allowFontScaling/;
 export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
 };
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';
 const varDecRegExp = /^--.*/;
 const varUseRegExp = /var\(/;
 const calcUseRegExp = /calc\(/;
@@ -24,10 +31,7 @@ const safeAreaInsetMap = {
 };
 function getSafeAreaInset(name) {
     const navigation = getFocusedNavigation();
-    const insets = {
-        ...initialWindowMetrics?.insets,
-        ...navigation?.insets
-    };
+    const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
 }
 export function omit(obj, fields) {
@@ -69,7 +73,7 @@ export const parseInlineStyle = (inlineStyle = '') => {
         if (rest.length || !v || !k)
             return styleObj;
         const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return Object.assign(styleObj, { [key]: v.trim() });
+        return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) });
     }, {});
 };
 export const parseUrl = (cssUrl = '') => {
@@ -79,23 +83,13 @@ export const parseUrl = (cssUrl = '') => {
     return match?.[1];
 };
 export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKey = []) => {
-    return {
-        ...transferProps,
-        ...omit(originProps, deletePropsKey)
-    };
+    return extendObject({}, transferProps, omit(originProps, deletePropsKey));
 };
 export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText;
-    }
-    return false;
-}
-export function isEmbedded(ele) {
-    if (isValidElement(ele)) {
-        const displayName = ele.type?.displayName || '';
-        return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName);
+        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -238,6 +232,14 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
+const stringifyProps = ['fontWeight'];
+function transformStringify(styleObj) {
+    stringifyProps.forEach((prop) => {
+        if (isNumber(styleObj[prop])) {
+            styleObj[prop] = '' + styleObj[prop];
+        }
+    });
+}
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const normalStyle = {};
@@ -336,6 +338,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             }
         }
     });
+    // transform number enum stringify
+    transformStringify(normalStyle);
     return {
         normalStyle,
         hasSelfPercent,
@@ -402,7 +406,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 ? HIDDEN_STYLE : {};
+    const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}; }, [hasLayoutRef.current]);
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -433,8 +437,8 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     if (textStyle || textProps) {
         children = Children.map(children, (child) => {
             if (isText(child)) {
-                const style = { ...textStyle, ...child.props.style };
-                return cloneElement(child, { ...textProps, style });
+                const style = extendObject({}, textStyle, child.props.style);
+                return cloneElement(child, extendObject({}, textProps, { style }));
             }
             return child;
         });
@@ -444,6 +448,34 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     }
     return children;
 }
+export const debounce = (func, delay) => {
+    let timer;
+    const wrapper = (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+    wrapper.clear = () => {
+        clearTimeout(timer);
+    };
+    return wrapper;
+};
+export const useDebounceCallback = (func, delay) => {
+    const debounced = useMemo(() => debounce(func, delay), [func]);
+    return debounced;
+};
+export const useStableCallback = (callback) => {
+    const ref = useRef(callback);
+    ref.current = callback;
+    return useCallback((...args) => ref.current?.(...args), []);
+};
+export const usePrevious = (value) => {
+    const ref = useRef(undefined);
+    const prev = ref.current;
+    ref.current = value;
+    return prev;
+};
 export function flatGesture(gestures = []) {
     return (gestures && gestures.flatMap((gesture) => {
         if (gesture && gesture.nodeRefs) {
@@ -453,3 +485,76 @@ export function flatGesture(gestures = []) {
         return gesture?.current ? [gesture] : [];
     })) || [];
 }
+export const extendObject = Object.assign;
+export function getCurrentPage(pageId) {
+    if (!global.getCurrentPages)
+        return;
+    const pages = global.getCurrentPages();
+    return pages.find((page) => isFunction(page.getPageId) && page.getPageId() === pageId);
+}
+export function renderImage(imageProps, enableFastImage = false) {
+    const Component = enableFastImage ? FastImage : Image;
+    return <Component {...imageProps}/>;
+}
+export function pickStyle(styleObj = {}, pickedKeys, callback) {
+    return pickedKeys.reduce((acc, key) => {
+        if (key in styleObj) {
+            acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key];
+        }
+        return acc;
+    }, {});
+}
+export function useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime, disabled }) {
+    const enableHoverStyle = !!hoverStyle;
+    const enableHoverStyleRef = useRef(enableHoverStyle);
+    if (enableHoverStyleRef.current !== enableHoverStyle) {
+        throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.');
+    }
+    if (!enableHoverStyle)
+        return { enableHoverStyle };
+    const gestureRef = useContext(ScrollViewContext).gestureRef;
+    const [isHover, setIsHover] = useState(false);
+    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);
+    };
+    const gesture = useMemo(() => {
+        return Gesture.Pan()
+            .onTouchesDown(() => {
+            'worklet';
+            if (disabled)
+                return;
+            runOnJS(setStartTimer)();
+        })
+            .onTouchesUp(() => {
+            'worklet';
+            if (disabled)
+                return;
+            runOnJS(setStayTimer)();
+        });
+    }, [disabled]);
+    if (gestureRef) {
+        gesture.simultaneousWithExternalGesture(gestureRef);
+    }
+    return {
+        isHover,
+        gesture,
+        enableHoverStyle
+    };
+}

package/lib/runtime/components/react/event.config.ts

@@ -2,31 +2,30 @@ interface EventConfig {
   [key: string]: string[];
 }
 
-const eventConfigMap: EventConfig = {
-  bindtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-  bindlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-  bindtouchstart: ['onTouchStart'],
-  bindtouchmove: ['onTouchMove'],
-  bindtouchend: ['onTouchEnd'],
-  bindtouchcancel: ['onTouchCancel'],
-  catchtap: ['onTouchStart', 'onTouchMove', 'onTouchEnd'],
-  catchlongpress: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'],
-  catchtouchstart: ['onTouchStart'],
-  catchtouchmove: ['onTouchMove'],
-  catchtouchend: ['onTouchEnd'],
-  catchtouchcancel: ['onTouchCancel'],
-  'capture-bindtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-  'capture-bindlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-  'capture-bindtouchstart': ['onTouchStartCapture'],
-  'capture-bindtouchmove': ['onTouchMoveCapture'],
-  'capture-bindtouchend': ['onTouchEndCapture'],
-  'capture-bindtouchcancel': ['onTouchCancelCapture'],
-  'capture-catchtap': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'],
-  'capture-catchlongpress': ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'],
-  'capture-catchtouchstart': ['onTouchStartCapture'],
-  'capture-catchtouchmove': ['onTouchMoveCapture'],
-  'capture-catchtouchend': ['onTouchEndCapture'],
-  'capture-catchtouchcancel': ['onTouchCancelCapture']
+const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } = {
+  bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+  bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+  bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
+  bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
+  bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
+  bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
+  catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
+  catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
+  catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
+  catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
+  catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
+  catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
+  'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+  'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+  'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
+  'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
+  'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
+  'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
+  'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
+  'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
+  'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
+  'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
+  'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
+  'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
 }
-
 export default eventConfigMap